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

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

1、教学单元9　多列式网页的布局与美化教学单元9　多列式网页的布局与美化多列式网页布局的结构较复杂，其实现方法也是多种多样，可以采用嵌套结构、并列浮动结构和列表结构，布局结构的实现方法与两列式网页布局和三列式网页布局类似。【教学要点】（1）熟悉多列式网页布局的各种方法（2）学会多行多列混合布局网页的方法（3）学会并列浮动布局网页的方法（4）学会利用列表项布局网页的方法（5）了解CSS代码的精简与优化方法（6）了解检验网站是否符合Web标准的方法【9.1　前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动DreamweaverCS3（3）创建名称

2、为“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所示。7教学单元9　多列式网页的布局与美化图9-1　网页0901.html的游览效果【实施过程】1．操作准备

3、（1）创建文件夹显示DreamweaverCS3的【文件】面板，在【文件】面板中的文件夹“0901前导训练”中建立子文件夹“任务9-1”，然后在文件夹“任务9-1”中建立子文件夹“css”和“images”，并将所需要的图像文件拷贝到“images”子文件夹中。（2）DreamweaverCS3初始参数设置打开【首选参数】对话框，在该对话框的“分类”列表项中选择“新建文档”，默认文档设置为“HTML”，默认扩展名设置为“.html”，默认编码设置为“简体中文（GB2312）”。DreamweaverCS3初始参数设置完成后，单击【确定】按钮关闭【首选

4、参数】对话框。2．建立公共样式文件0901common.css，定义标签样式属性在文件夹“css”中建立样式文件0901common.css，在该样式文件中编写CSS样式代码，定义标签样式属性。3．建立样式文件main0901.css，定义样式在文件夹“css”中建立样式文件main0901.css，在该样式文件中编写CSS样式代码，定义所需要的样式。4．新建网页文档0901.html在子文件夹“任务9-1”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0901.html”的网页文档。打开网页文档0901.html，在“文

5、档”工具栏的“标题”文本框直接输入网页标题“任务9-1”。5．链接外部样式文件main0901.css切换到网页文档0901.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：7教学单元9　多列式网页的布局与美化6．对网页的页面进行布局切换到“代码视图”，在网页0

6、901.html代码区域的与之间输入表9-3所示的XHTML代码。表9-3　网页0901.html布局结构的XHTML代码行号XHTML代码1234