DIV+CSS技术应用网页效果预览.docVIP

一、DIV+CSS技术应用网页效果预览 图2-9-1 DIV+CSS技术应用网页效果图? 　2.实例分析网页设计DIV结构 通过上图不难看出，整个网页的布局是有规律可寻得，它大致可以分为顶部区域，中上部区域、中下部区域和底部区域。而中上部区域和中下部区域又可以分成若干小的区块，分析后效果图如下：　 图2-9-2 区块划分分析图 根据上图，我们得出实际页面布局图如下： 图2-9-3 页面布局层叠结构图? 三、实例制作步骤： 1.启动DreamWeaver，新建站点为“zzrsb”，路径为E:/websit，新建一个网页文件，命名为“zzrsb.html”，并保存在站点文件夹下。 2.在body标记中写出DIV结构，代码如下：div id=content? div id=head顶部区域/div? div id=webbody1主题1区??? div id=webbody1Left主题1区左/div??? div id=webbody1Right主题1区右/div? /div? div id=webbody2主题2区?? div id=webbody2Left主题2区左????? div id=webbody2LeftTop主题2区左顶部/div????? div id=webbody2LeftFoot主题2区左底部div id=webbody2LeftFootLeft主题2区左底部左边/div??????? div id=webbody2LeftFootRight主题2区左底部右边/div????? /div/div??? div id=webbody2Right主题2区右div id=webbody2RightTop主题2区顶部/div????? div id=webbody2RightFoot主题2区底部/div/div? /div? div id=foot底部区域/div/div3.新建一个CSS文档，命名为“style.css”,并保存在站点文件夹下。 body {font:12px Tahoma;margin:0px;text-align:center;background:#FFF;}/*页面层容器*/#content {width:100%}/*页面头部*/#head {width:1000px;margin:0 auto;height:100px;background:#900000}/*页面主体1*/#webbody1 {width:1000px;margin:0 auto;height:200px;background:#FEFEFE}/*页面主体1*/#webbody2 {width:1000px;margin:0 auto;height:200px;background:#FCFCFC}/*页面底部*/#foot {width:1000px;margin:0 auto;height:50px;background:#900000}/*主题1区左*/#webbody1Left {width:746px; /*设定宽度*/text-align:left; /*文字左对齐*/float:left; /*浮动居左*/clear:left; /*不允许左侧存在浮动*/overflow:hidden; /*超出宽度部分隐藏*/}/*主题1区右*/#webbody1Right {width:254px;text-align:left;float:right; /*浮动居右*/clear:right; /*不允许右侧存在浮动*/overflow:hidden}/*主题2区左*/#webbody2Left {……}/*主题2区右*/#webbody2Right {……}/*主题2区左底部左边*/#webbody2LeftFootLeft {width:373px; /*设定宽度*/……}/*主题2区左底部右边*/#webbody2LeftFootRight {width:373px;text-align:left;……}4.“zzrsb.html”链接“style.CSS”文件，链接方法同第八讲中内容，到此为止，网页框架制作完毕。效果图如下： 图2-9-4 CSS控制DIV后布局图? 网页内部内容的添加和前面文字、多媒体元素、链接等内容添加相同，这里不再累述。 四、DIV+CSS页面布局常见错误分析 1. 检查HTML元素是否有拼写错误、是否忘记结束标记　　即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。　　2. 检查CSS是否正确 检查一下有无拼写错误、是否忘记结