XHTML+CSS网页布局与美化的案例教程电子教案09多列式网页的布局与美化.docVIP

教学单元9　多列式网页的布局与美化 多列式网页布局的结构较复杂，其实现方法也是多种多样，可以采用嵌套结构、并列浮动结构和列表结构，布局结构的实现方法与两列式网页布局和三列式网页布局类似。 【教学要点】 （1）熟悉多列式网页布局的各种方法 （2）学会多行多列混合布局网页的方法 （3）学会并列浮动布局网页的方法 （4）学会利用列表项布局网页的方法 （5）了解CSS代码的精简与优化方法 （6）了解检验网站是否符合Web标准的方法 【9.1　前导训练】 【准备工作】 （1）在本地硬盘中创建文件夹 （2）启动Dreamweaver CS3 （3）创建名称为“09多列式网页的布局与美化”的本地站点 【任务9-1-1】创建网页0901.html 【任务描述】 （1）创建样式文件0901common.css和main0901.css，在这些样式文件中定义标签及选择符的样式属性。 （2）创建网页文档0901.html，且链接外部样式文件0901common.css和main0901.css。 （3）对网页0901.html的页面进行布局设计，在网页中插入图像和输入文字。 网页0901.html的浏览效果如图9-1所示。 图9-1　网页0901.html的游览效果 【实施过程】 1．操作准备 （1）创建文件夹 显示Dreamweaver CS3的【文件】面板，在【文件】面板中的文件夹“0901前导训练”中建立子文件夹“任务9-1”，然后在文件夹“任务9-1”中建立子文件夹“css”和“images”，并将所需要的图像文件拷贝到“images”子文件夹中。 （2）Dreamweaver CS3初始参数设置 打开【首选参数】对话框，在该对话框的“分类”列表项中选择“新建文档”，默认文档设置为“HTML”，默认扩展名设置为“.html”，默认编码设置为“简体中文（GB2312）”。Dreamweaver CS3初始参数设置完成后，单击【确定】按钮关闭【首选参数】对话框。 2．建立公共样式文件0901common.css，定义标签样式属性 在文件夹“css”中建立样式文件0901common.css，在该样式文件中编写CSS样式代码，定义标签样式属性。 3．建立样式文件main0901.css，定义样式 在文件夹“css”中建立样式文件main0901.css，在该样式文件中编写CSS样式代码，定义所需要的样式。 4．新建网页文档0901.html 在子文件夹“任务9-1”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0901.html”的网页文档。打开网页文档0901.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务9-1”。 5．链接外部样式文件main0901.css 切换到网页文档0901.html的【代码视图】，在标签“/head”的前面输入两行链接外部样式表的代码，如下所示： link href=css/0901common.css rel=stylesheet type=text/css / link href=css/main0901.css rel=stylesheet type=text/css / 6．对网页的页面进行布局 切换到“代码视图”，在网页0901.html代码区域的body与/ body之间输入表9-3所示的XHTML代码。 表9-3　网页0901.html布局结构的XHTML代码 行号 XHTML代码 1 2 3 4 div id=public_m div id=top /div div id=article /div /div 7．在网页中插入项目列表及列表项 在网页0901.html中，分别在代码“div id=top /div”，“div id=article /div”内插入项目列表及列表项。 8．在网页中插入图像和输入文字 在网页0901.html的“div id=article”与“/div”之间各个列表项中输入文字和插入图像。 9．保存网页 单击Dreamweaver CS3“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页“0901.html”。 10．浏览网页效果 按快捷键F12，网页的浏览效果如图9-1所示。 【任务9-1-2】创建网页0902.html 【任务描述】 （1）创建样式文件main0902.css，在该样式文件中定义标签及选择符的样式属性。 （2）创建网页文档0902.html，且链接外部样式文件main0902.css。 （3）对网页0902.html的页面进行布局设计，在网页中插入图像和输入文字。 网页0902.html的浏览效果如图9-4所示。 图9-4　网页0902.html的浏览