《09多列式网页的布局与美化电子教案.doc》由会员分享，可在线阅读，更多相关《09多列式网页的布局与美化电子教案.doc（8页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教学单元9多列式网页的布局与美化教学单元9多列式网页的布局与美化多列式网页布局的结构较复杂，其实现方法也是多种多样，可以采用嵌套结构、并列浮动结构和列表结构，布局结构的实现方法与两列式网页布局和三列式网页布局类似。【教学要点】（1）熟悉多列式网页布局的各种方法（2）学会多行多列混合布局网页的方法（3）学会并列浮动布局网页的方法（4）学会利用列表项布局网页的方法（5）了解CSS代码的精简与优化方法（6）了解检验网站是否符合Web标准的方法【9.1前导训练】【准备工作】（1）在本地硬盘中创建文件夹（2）启动Dreamweaver CS3（3）创建名称为“09多列式网页的布局与美化”的本地站点【任务
2、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
3、-1”，然后在文件夹“任务9-1”中建立子文件夹“css”和“images”，并将所需要的图像文件拷贝到“images”子文件夹中。（2）Dreamweaver CS3初始参数设置打开【首选参数】对话框，在该对话框的“分类”列表项中选择“新建文档”，默认文档设置为“HTML”，默认扩展名设置为“.html”，默认编码设置为“简体中文（GB2312）”。Dreamweaver CS3初始参数设置完成后，单击【确定】按钮关闭【首选参数】对话框。2建立公共样式文件0901common.css，定义标签样式属性在文件夹“css”中建立样式文件0901common.css，在该样式文件中编写CSS样式代
4、码，定义标签样式属性。3建立样式文件main0901.css，定义样式在文件夹“css”中建立样式文件main0901.css，在该样式文件中编写CSS样式代码，定义所需要的样式。4新建网页文档0901.html在子文件夹“任务9-1”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0901.html”的网页文档。打开网页文档0901.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务9-1”。5链接外部样式文件main0901.css 切换到网页文档0901.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：6对网页的页面
5、进行布局切换到“代码视图”，在网页0901.html代码区域的与之间输入表9-3所示的XHTML代码。表9-3网页0901.html布局结构的XHTML代码行号XHTML代码1234 7在网页中插入项目列表及列表项在网页0901.html中，分别在代码“ ”，“ ”内插入项目列表及列表项。8在网页中插入图像和输入文字在网页0901.html的“”与“”之间各个列表项中输入文字和插入图像。9保存网页单击Dreamweaver CS3“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页“0901.html”。10浏览网页效果按快捷键F12，网页的浏览效果如图9-1所示。【任务9-1-2】创建
6、网页0902.html【任务描述】（1）创建样式文件main0902.css，在该样式文件中定义标签及选择符的样式属性。（2）创建网页文档0902.html，且链接外部样式文件main0902.css。（3）对网页0902.html的页面进行布局设计，在网页中插入图像和输入文字。网页0902.html的浏览效果如图9-4所示。图9-4网页0902.html的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件main0902.css，定义样式3新建网页文档0902.html4链接外部样式文件main0902.css 5对网页的页面进行布局切换到“代码视图”，在网页0902.html代码
7、区域的与之间输入表9-7所示的XHTML代码。表9-7网页0902.html布局结构的XHTML代码行号XHTML代码1234 6在网页中插入图像和输入文字在网页0902.html中插入图像和输入文字。7保存网页8浏览网页效果【任务9-1-3】创建网页0903.html【任务描述】任务9-3为考核项目，请独立完成以下操作任务：创建如图9-6所示的网页0903.html。【实施过程】1新建文件夹，准备图像文件2建立样式文件main0903.css，定义样式3新建网页文档0903.html在子文件夹“任务9-3”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“0903.h
8、tml”的网页文档。打开网页文档0903.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务9-3”。4链接外部样式文件main0903.css 切换到网页文档0903.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：5对网页的页面进行布局切换到“代码视图”，在网页0903.html代码区域的与之间输入表9-10所示的XHTML代码。表9-10网页0903.html布局结构的XHTML代码行号XHTML代码1234 6在网页中插入项目列表和图像在网页0902.htm中插入项目列表及列表项，然后插入多幅图像。7保存网页单击Dreamweaver CS
9、3“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页“0903.html”。8浏览网页效果按快捷键F12，网页的浏览效果如图9-6所示。【9.2操作实战】【任务9-2-1】创建网页index0901.html【任务描述】以“凤凰旅游”为主题，制作网页index0901.html。（1）布局结构该网页整体上为多行多列式混合布局结构，还包含了层。（2）网页的主要元素文本、项目列表、图像等。（3）网页色彩网页前景色采用#313131、#52a2c4、#0b9640、#cf790a、#c20c72、#63f、#f69、#f60等多种不同的颜色，背景色主要通过背景图像控制。网页index0901
10、.html的浏览效果如图9-8所示。图9-8网页index0901.html的浏览效果【实施过程】1新建文件夹，准备网页素材在文件夹“09多列式网页的布局与美化”中建立子文件夹“0902操作实战”，然后在文件夹“0902操作实战”中建立子文件夹“css”和“images”，并将所需要的图像文件拷贝到“images”子文件夹中。2建立样式文件，定义样式3新建代码片断由于网页index0901.html的主体布局结构已在前导训练阶段制作完成，本阶段以代码片断的形式将这些区块的XHTML代码添加到网页index0901.htm中。将【文件】面板中“任务9-1”子文件夹中的网页文档“0901.html
11、”标签“”与“”之间XHTML代码，创建名称分别为“0901代码片断”、然后将“任务9-2”和“任务9-3”子文件夹中的网页文档“0902.html”和“0903.html”标签“”与“”之间XHTML代码，创建名称分别为“0902代码片断”和“0903代码片断”的代码片断。4新建网页文档index0901.html在文件夹“0902操作实战”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为“index0901.html”的网页文档。5链接外部样式文件03main.css 打开网页文档index0901.html，切换到网页文档index0901.html的【代码视图】
12、，在标签“”的前面输入两行链接外部样式表的代码，如下所示：6对网页的页面进行布局在“文档”工具栏的“标题”文本框输入网页标题“凤凰旅游”。然后切换到“代码视图”，在标签“”与“”之间输入表9-13所示的网页主体布局结构的XHTML代码。表9-13网页0901.html主体布局结构的XHTML代码行号XHTML代码123456789 7在网页中插入代码片断（1）插入“0901代码片断”（2）插入“0902代码片断”（3）插入底部导航栏（4）插入“0903代码片断”8对网页进行优化完善对已插入的代码片断进行优化完善，对XHTML代码进行清理操作。9保存网页且浏览其效果【9.3拓展实践】【任务9-3-1】创建网页index0902.html【任务描述】以“野山坡旅游”为主题制作网页index0902.html，该网页整体上为多列式布局结构，其浏览效果如图9-13所示。图9-13网页index0902.html的浏览效果7