XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 07两列式网页的布局与美化.doc

《XHTML+CSS网页布局与美化案例教程电子教案 教学课件 ppt 作者 陈承欢 07两列式网页的布局与美化.doc》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、教学单元7　两列式网页的布局与美化教学单元7　两列式网页的布局与美化【教学要点】（1）熟悉网页两列式布局的各种方法（2）熟悉网页的单列式布局方法与元素的自适应（3）学会网页元素的嵌套布局方法（4）了解使用CSS的定位属性控制元素的位置（5）了解CSS布局网页的基本布局模型【7.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（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．操作准备5教学单元7　两列式网页的布局与美化（1）创建文件夹（2）DreamweaverCS3初始参数设置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代码1234