项目7 使用DIV+CSS布局网页
利用DIV+CSS技术，自行规划设计如图7-1所示的网页。网页使用了DIV的多层嵌套，文本及图片的布局中使用了多种CSS样式。练习素材在文件夹exercise中的blog文件夹中的images子文件夹中。
图7-1 利用DIV+CSS技术制作网页页
操作提示：
1.插入一个宽1000像素，高800像素，固定宽度居中的DIV，ID为“main”，CSS样式设置为：字体为宋体、大小为12像素、1.5倍行高、边界左，右均为自动；
2.定位光标到main层内行尾，按回车，继续插入一个层，ID为“top”，CSS样式设置为：字体为宋体、大小为12像素、1.5倍行高、背景图像为“blog_top.jpg”、方框宽为1000像素，高为200像素；
3.在“top”层中输入文字“听雨品茶绿江南的博客”， CSS样式设置为：字体为黑体、大小为24像素、1.5倍行高、文字缩进为20像素、边界上，下，左，右均为10像素；
4.光标定位到“top”层下方，插入一个层，ID为“menu”, CSS样式设置为：字体为宋体、大小为12像素、1.5倍行高、字体颜色为“#FFFFFF”、背景颜色为“#006600”、垂直对齐为“中线对齐”、 方框宽为1000像素，高为30像素；
5.在“menu”层中输入文字“主页 | 博客 | 相册 | 个人档案 | 好友 | 贴吧”， CSS样式设置为：字体为宋体、大小为12像素、1.5倍行高、字体颜色为“#FFFFFF”、边界上，下，左均为6像素，右边界为20像素；
6.光标定位到“menu”层下方，插入一个层，ID为“left”, CSS样式设置为：背景颜色为“#66FF99”、 方框宽为200像素，高为490像素、浮动为“左对齐”；
7.光标定位到“left”层里面，插入一个层，ID为“left_top1”, CSS样式设置为：背景图像为“left_top.png”、方框宽为200像素，高为24像素；
8.光标定位到“left”层中的“left_top1”层下方，插入一个层，ID为“left_1”, CSS样式设置为：方框宽为200像素，高为211像素；
9.在“left_1”层插入图像“p1.jpg”,图像宽为“180”，高为“127”，在图像下方输入文字“听雨品茶绿江南 女，21岁 安徽 黄山 上次登录： 3天以前”，设置图像和文字的CSS样式设置为：字体为宋体、大小为12像素、1.5倍行高；
10.在“left_1”层下方，插入一个层，ID为“left_top2”, CSS样式设置同“left_top1”层；
11.光标定位到“left”层中的“left_top2”层下方，插入一个层，ID为“left_2”, CSS样式同“left_1”层；
12.在“left_2”层中插入图像“fk2.jpg”、“fk3.jpg”,图像宽为“75”，高为“75”，在图像下方输入文字“梧桐雨 开心果”，继续插入图像“fk1.jpg” 图像宽为“75”，高为“75”，在图像下方输入文字“伤心剑 花无语”，图像和文字的CSS样式设置同“left_1”层；
13.光标定位到“left”层下方，插入一个层，ID为“middle”, CSS样式设置为： 方框宽为600像素，高为490像素、浮动为“左对齐”、字体颜色为“#000000”；
14.在“middle”层中输入相应的内容，并在适当的位置，插入水平线，文本的CSS样式同前；
15.光标定位到“middle”层下方，插入一个层，ID为“right”, CSS样式设置为：背景颜色为“#66FF99”、方框宽为200像素，高为490像素、浮动为“左对齐”；
16.在“right”层中插入4个层分别为“right_top1”、“right_1”、“right_top2”、“right_2”,CSS样式参照“left”层中的4个层；
17.光标定位到“right”层下方，插入一个层，ID为“bottom”, CSS样式设置为：字体颜色为“#FFFFFF”、 背景图像为“blog_bottom.jpg”、垂直对齐为“中线对齐”、文本对齐为“居中”、方框宽为1000像素，高为800像素、清除为“两者”；
18.在“bottom”层中输入文本，CSS样式设置为：行高为“1.5倍、边界上，下，左，右均为10像素；
19.保存并预览。
利用DIV+CSS技术制作网页
姓名：评价日期：小组评价人：
评价方式比例评价内容总分值所得分值
个人评价15%对学习任务的兴趣5
利用所学知识解决操作中遇到的问题的能力10
小组评价35%课堂纪律和学习表现10
会根据效果采用素材利用DIV+CSS技术制作网页15
能与小组成员互帮互助10
教师评价50%掌握DIV(层)的概念10
了解DIV+CSS的布局优势10
掌握使用DIV+CSS进行常见的页面布局方法10
会使用DIV制作较复杂的网页10
“听雨品茶绿江南的博客”网页外观美感、有无创新10
总评
个人总分
