内容发布更新时间 : 2024/5/16 2:46:05星期一 下面是文章的全部内容请认真阅读。

教学单元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）创建网页文档0701.html，且链接外部样式文件0701common.css和main0701.css。 （3）对网页0701.html的页面进行布局设计，在网页中插入图像和输入文字。 网页0701.html的浏览效果如图7-1所示。

图7-1 网页0701.html的游览效果

【实施过程】

1．操作准备

XHTML+CSS 网页布局与美化案例教程

（1）创建文件夹

（2）Dreamweaver CS3初始参数设置

2．建立公共样式文件0701common.css，定义标签样式属性 3．建立样式文件main0701.css，定义样式 4．新建网页文档0701.html

在子文件夹“任务7-1”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0701.html”的网页文档。打开网页文档0701.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务7-1”。

5．链接外部样式文件main0701.css

切换到网页文档0701.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：

与之间输入表7-3所示的XHTML代码。

表7-3 网页0701.html布局结构的XHTML代码

行号 1 2 3 4