1、启动dreamweaver cs5,在d出的对话框窗口中选择html,进入主界面编辑区域。
2、接着对网页的整个布局在草纸上绘制下来,做到心中有数,主要分成那几个模块。主要有脚注、菜单导航、主体、导航条四大部分。
3、接着点击设计进入设计状态,在代码区域书写整体框架的css,即
#ztkj{width:80%
boder:1px solid #000000
height:800px}
在body里添加<div id="ztkj"></div>即可在下面看到整体框架。
4、接着在书写导航条代码,即
#dht{padding:10px
boder:1px solid#000000
background-color:#a2a2ff}
在第一个div中输入<div id="dht"></div>,查看效果变化。
5、书写主体内容的代码,即
#ztnr{
float:leftwidth:60%
height:600pxboder:1px solid #000000
text-align:center
margin-light:10px
margin-left:10px}
在整体框架中输入<div id="ztnr">主体内容</div>,查看效果
6、书写菜单导航代码
#cddh{
float:right
margin-right:10px
width:35%boder:1px #a2a2ff
height:600px}
接着在整体框架中输入代码<div id="cddh">菜单导航</div>
7、书写脚注的代码
#jz{
padding:10px
boder:3px #a2a2ff
text-algin:center
clear:both
margin-top:20px}
在整体框架中输入代码<div id="jz">脚注</div>查看效果。
8、这样大体框架就制作出来了,按f12进行查看效果,效果不好需要进一步修改代码。把边框设置出来,把所有的boder进行修改为border:solid 5px #fcc
9、由于整个框架不在中间位置,需要修改让其居中对齐,所以要在ztkj中添加一条语句margin:auto
10、这样整个框架就出来,在实际的使用过程中要根据自己的需要进一步调整,执行文件-另存为命令,将网页保存就完成了。
HTML的主要结构可划分为3个部分:HTML标签:代表整篇文档是一个网页文件。HEAD标签:用于描述网页的头部信息。BODY标签:用于描述要显示的内容信息。示例代码如下:1. <HTML>2. <HEAD>3. <TITLE>第一个HTML页面</TITLE>4. </HEAD>5. <BODY>大家好,我们一起来学习ASP.NET 吧!!</BODY>6. </HTML>HTML标签大部分是成对出现的,必须有开头和结尾部分。但浏览器具有一定的容错性,即使没有配对,通常也不会报错。在书写HTML页面时,标签是不区分大小写的,所以实际网页中大写和小写的标签都存在(但新规范提倡使用小写,所以在使用VS2008设计的网页中,都已经使用了小写)。我们针对上面的示例说明一下。<HTML></HTML>表示文件类型,分别放在开头和结尾部分,通过这一小段代码可以看出,HTML标签是成对出现的,但也有某种特殊的情况,由于浏览器的容错性很强,所以即使在编写的过程中不小心丢失了一个标签,在网页上都不会有错误提示。<HEAD></HEAD>标签表示文档的头部。打开浏览器或其他窗体界面时,都会有一个标题栏,而标题栏中显示的信息,就是HEAD中的一个元素标签<TITLE>所展示出来的。 <BODY></BODY>标签是文档的主体部分,在浏览器中显示的所有内容都是包含在BODY标签中的,写在BODY中的"大家好,我们一起来学习ASP.NET 吧!!"这段文字也会相应地显示在浏览器中。欢迎分享,转载请注明来源:内存溢出
评论列表(0条)