软件开发实用教程第2版教学课件ppt作者华驰32静态网页设计课件.ppt

任务实施 ② 定义网页结构，插入各块标签。此处以插入header的标签为例，单击DW菜单栏【插入】→【布局对象】→【div标签】命令，弹出【插入Div标签】窗口，如图3-11所示： 图3-11 插入Div标签 任务实施 单击【确定】按钮，header标签插入成功，其它块的插入方法类同。“中国无锡质量网”首页网页结构代码如下： div id=header此处显示 id header 的内容/div div id=nav此处显示 id nav 的内容/div div id=maincontent div id=side此处显示 id side 的内容/div div id=main此处显示 id main 的内容/div /div div id=footer此处显示 id footer 的内容/div 从上图分析得知，整个网页是居中浏览器显示的，按照这样的写法需要把以上的header、 nav、maincontent、footer都设置宽度并居中，这样做起来很麻烦，所以再在这些标签 外增加一个父标签，设置这个父标签宽度并居中后，那么所有的标签都居中了。 增加后的代码如下： 任务考核 div id=container div id=header此处显示 id header 的内容/div div id=nav此处显示 id nav 的内容/div div id=maincontent div id=side此处显示 id side 的内容/div div id=main此处显示 id main 的内容/div /div div id=footer此处显示 id footer 的内容/div /div 任务实施 ③ 设置CSS样式表，定义全局样式。DIV框架代码写完后，接下来就需要设置css样式表了。“中国无锡质量网”整体宽度是996px，（注意： 设置container也是这个宽度并居中）其中main部的宽度为765px，side宽度为205px。把这三个基本的宽度确定好后，下面就可以写css代码了。由于本实例是按照实际当中应用来做的，所以css样式表就最好写在单独文件里了，不要再写在文件内部了，这样可以利用代码的重用性，减少很多劳动强度。下面就新建一个css样式表文件：在DW文件菜单选择【新建】，然后在打开的窗口页面类型中选择【css】，如图3-12所示： 图3-12 新建CSS文件 任务实施 * { padding: 0px; margin: 0px;} body {margin: 0px;font-family: Verdana, Helvetica, sans-serif;font-size: 10pt; font-weight: normal; letter-spacing: normal;} A:link {text-decoration: none; color: #000000;} A:visited {text-decoration: none; color: #000000;} A:active {text-decoration: none;color: #000000;} A:hover {text-decoration: underline;color: #EF8618;} #container {position: relative;margin: 0px auto 0px auto; width: 966px;} #header {margin:0 auto;} #nav { margin:0 auto;} #maincontent {margin:0 auto;} #side {margin-top: 10px;position: relative;float: left;width: 205px;height: auto;} #main {margin-top: 10px;position: relative;float: left;width: 761px;height: auto;} #footer { background-image: url(image/bottom.jpg);} 任务实施 预览一下：在IE8下，#footer干脆跑到#nav的下边了，这又是怎么回事呢？这就是之前我们讲的，如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在#maincontent增加 overflow:auto; zoom:1;，这样就可以让它自动适应内部元素的高度了。 为了更加保险，笔者建议在header、nav、maincontent、footer之间增加如下一句代码