XHTML+CSS网页布局与美化07两列式网页的布局与美化

1、教学单元 7 两列式网页的布局与美化【教学要点】(1)熟悉网页两列式布局的各种方法(2)熟悉网页的单列式布局方法与元素的自适应(3)学会网页元素的嵌套布局方法(4)了解使用 CSS 的定位属性控制元素的位置(5)了解 CSS 布局网页的基本布局模型【7.1 前导训练】【准备工作】(1)在本地硬盘中创建文件夹(2)启动 Dreamweaver CS3(3)创建名称为“07 两列式网页的布局与美化”的本地站点【任务 7-1-1】创建网页 0701.html【任务描述】(1)创建样式文件 0701common.css 和 main0701.css，在这些样式文件中定义标签及 选择符的样式属性。(2)

2、 创建网页文档 0701.html，且链接外部样式文件 0701common.css 和 main0701.css。(3)对网页 0701.html 的页面进行布局设计，在网页中插入图像和输入文字。 网页 0701.html 的浏览效果如图 7- 1 所示。图 7-1 网页 0701.html 的游览效果【实施过程】1操作准备2XHTML+CSS 网页布局与美化案例教程 (1)创建文件夹(2) Dreamweaver CS3 初始参数设置2建立公共样式文件 0701common.css，定义标签样式属性3建立样式文件 main0701.css，定义样式4新建网页文档 0701.html在子文件

3、夹“任务 7- 1”中，通过【新建文档】对话框或者直接使用【新建文件】快 捷菜单创建一个名称为“0701.html”的网页文档。打开网页文档0701.html，在“文档”工 具栏的“标题”文本框直接输入网页标题“任务7- 1”。5链接外部样式文件 main0701.css切换到网页文档 0701.html 的【代码视图】，在标签“”的前面输入两行链接外 部样式表的代码，如下所示：6对网页的页面进行布局切换到“代码视图”，在网页 0701.html 代码区域的与之间输入表 7-3 所示的 XHTML 代码。表 7-3 网页 0701.html 布局结构的 XHTML 代码XHTML 代码 行号1

4、2347在网页中输入文字和插入图像在网页 0701.html 代码区域输入文字，然后插入 1 幅图像。8保存网页单击 Dreamweaver CS3 “标准”工具栏中的【保存】按钮或【全部保存】按钮， 保存网页“0701.html”。9浏览网页效果按快捷键 F12，网页的浏览效果如图 7- 1 所示。【任务 7-1-2】创建网页 0702.html【任务描述】(1)创建样式文件 main0702.css，在该样式文件中定义标签及选择符的样式属性。(2)创建网页文档 0702.html，且链接外部样式文件 main0702.css。(3)对网页 0702.html 的页面进行布局设计，在网页中插

5、入定义列表和输入文字。 网页 0702.html 的浏览效果如图 7-4 所示。3教学单元 7 两列式网页的布局与美化 图 7-4 网页 0702.html 的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件 main0702.css，定义样式3新建网页文档 0702.html4链接外部样式文件 main0702.css5对网页的页面进行布局切换到“代码视图”，在网页 0702.html 代码区域的与之间输入表 7-6 所示的 XHTML 代码。表 7-6 网页 0702.html 布局结构的 XHTML 代码XHTML 代码 行号1236在网页中插入定义列表和输入文字在网页 07

6、02.html 代码区域输入定义列表和，然后输入列表项，在列表项中输入文字。7保存网页8浏览网页效果【任务 7-1-3】创建网页 0703.html【任务描述】任务 7-3 为考核项目， 请独立完成以下操作任务： 创建如图 7-6 所示的网页 0703.html。图 7-6 网页 0703.html 的浏览效果4XHTML+CSS 网页布局与美化案例教程 【实施过程】1新建文件夹，准备图像文件2建立样式文件 main0703.css，定义样式3新建网页文档 0703.html4链接外部样式文件 main0703.css5对网页的页面进行布局切换到“代码视图”，在网页 0703.html 代码区

7、域的与之间输入表 7-9 所示的 XHTML 代码。表 7-9 网页 0703.html 布局结构的 XHTML 代码XHTML 代码行号126在网页中插入定义列表和输入文字在网页 0702.html 代码区域的标签“”与“”之间输入两对 定义列表、，然后插入图像、输入文字，设置必要的超链 接。7保存网页8浏览网页效果【7.2 操作实战】【任务 7-2-1】创建网页 index0701.html【任务描述】以“海南旅游”为主题，制作网页 index0701.html。(1)布局结构该网页整体上从上至下分为多个区块，大部分区块都采用两列式布局结构。 (2)网页的主要元素文本、定义列表、图像、超链

8、接等。(3)网页色彩网页前景色采用#333、#5a7c0c、#286be6、#f60、#425502、#5e7237、#639fea 等多种不同的颜色，背景色主要通过背景图像控制。网页 index0701.html 的浏览效果如图 7-9 所示。5教学单元 7 两列式网页的布局与美化 图 7-9 网页 index0701.html 的浏览效果【实施过程】1新建文件夹，准备网页素材2建立样式文件，定义样式3新建代码片断4新建网页文档 index0701.html5链接外部样式文件 03main.css6对网页的页面进行布局在“文档”工具栏的“标题”文本框输入网页标题“海南旅游”。然后切换到“代码视图”，在标签“”与“”之间输入表7- 12 所示的网 页主体布局结构的 XHTML 代码。表 7-12 网页 0701.html 主体布局结构的 XHTML 代码 行号12345678XHTML 代码7在网页中插入代码片断(1)插入“0701代码片断”6XHTML+CSS 网页布局与美化案例教程 (2)插入“0702 代码片断”(3)插入“0703 代码片断”8对网页进行优化完善对已插入的代码片断进行优化完善，对XHTML 代码进行清理操作。9保存网页且浏览其效果【7.3 拓展实践】【