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

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

1、教学单元8　三列式网页的布局与美化教学单元8　三列式网页的布局与美化三列式网页布局是网站设计时最常用的布局方式，使网站内容显得非常丰富，能充分利用网页空间。三列式布局相对复杂，可以使用嵌套浮动、并列浮动、并列层等多方式实现，宽度可以定义为固定值或自适应宽度。【教学要点】（1）熟悉网页三列式布局的各种方法（2）学会三列浮动布局网页的方法（3）学会嵌套浮动布局网页的方法（4）了解CSS样式的继承性、层叠性、特殊性和重要性【8.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverC

2、S3（3）创建名称为“08三列式网页的布局与美化”的本地站点【任务8-1-1】创建网页0801.html【任务描述】（1）创建样式文件0801common.css和main0801.css，在这些样式文件中定义标签及选择符的样式属性。（2）创建网页文档0801.html，且链接外部样式文件0801common.css和main0801.css。（3）网页0801.html为三列式布局结构，对网页0801.html的页面进行布局设计，在网页中输入文字和插入图像。网页0801.html的浏览效果如图8-1所示。5

3、教学单元8　三列式网页的布局与美化图8-1　网页0801.html的游览效果【实施过程】1．操作准备（1）创建文件夹（2）DreamweaverCS3初始参数设置2．建立公共样式文件0801common.css，定义标签样式属性3．建立样式文件main0801.css，定义样式4．新建网页文档0801.html5．链接外部样式文件main0801.css切换到网页文档0801.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：

4、ommon.css"rel="stylesheet"type="text/css"/>6．对网页的页面进行布局切换到“代码视图”，在网页0801.html代码区域的与之间输入表8-3所示的XHTML代码。表8-3　网页0801.html布局结构的XHTML代码行号XHTML代码12345678

5、leftheight2">