《07两列式网页的布局与美化电子教案.doc》由会员分享，可在线阅读，更多相关《07两列式网页的布局与美化电子教案.doc（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、教学单元7两列式网页的布局与美化教学单元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
2、）创建网页文档0701.html，且链接外部样式文件0701common.css和main0701.css。（3）对网页0701.html的页面进行布局设计，在网页中插入图像和输入文字。网页0701.html的浏览效果如图7-1所示。图7-1网页0701.html的游览效果【实施过程】1操作准备（1）创建文件夹（2）Dreamweaver CS3初始参数设置2建立公共样式文件0701common.css，定义标签样式属性3建立样式文件main0701.css，定义样式4新建网页文档0701.html在子文件夹“任务7-1”中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建一个名称为
3、“0701.html”的网页文档。打开网页文档0701.html，在“文档”工具栏的“标题”文本框直接输入网页标题“任务7-1”。5链接外部样式文件main0701.css 切换到网页文档0701.html的【代码视图】，在标签“”的前面输入两行链接外部样式表的代码，如下所示：6对网页的页面进行布局切换到“代码视图”，在网页0701.html代码区域的与之间输入表7-3所示的XHTML代码。表7-3网页0701.html布局结构的XHTML代码行号XHTML代码1234 7在网页中输入文字和插入图像在网页0701.html代码区域输入文字，然后插入1幅图像。8保存网页单击Dreamweaver
4、 CS3“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页“0701.html”。9浏览网页效果按快捷键F12，网页的浏览效果如图7-1所示。【任务7-1-2】创建网页0702.html【任务描述】（1）创建样式文件main0702.css，在该样式文件中定义标签及选择符的样式属性。（2）创建网页文档0702.html，且链接外部样式文件main0702.css。（3）对网页0702.html的页面进行布局设计，在网页中插入定义列表和输入文字。网页0702.html的浏览效果如图7-4所示。图7-4网页0702.html的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件ma
5、in0702.css，定义样式3新建网页文档0702.html4链接外部样式文件main0702.css 5对网页的页面进行布局切换到“代码视图”，在网页0702.html代码区域的与之间输入表7-6所示的XHTML代码。表7-6网页0702.html布局结构的XHTML代码行号XHTML代码123 6在网页中插入定义列表和输入文字在网页0702.html代码区域输入定义列表和，然后输入列表项，在列表项中输入文字。7保存网页8浏览网页效果【任务7-1-3】创建网页0703.html【任务描述】任务7-3为考核项目，请独立完成以下操作任务：创建如图7-6所示的网页0703.html。图7-6网页
6、0703.html的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件main0703.css，定义样式3新建网页文档0703.html4链接外部样式文件main0703.css 5对网页的页面进行布局切换到“代码视图”，在网页0703.html代码区域的与之间输入表7-9所示的XHTML代码。表7-9网页0703.html布局结构的XHTML代码行号XHTML代码12 6在网页中插入定义列表和输入文字在网页0702.html代码区域的标签“”与“”之间输入两对定义列表、，然后插入图像、输入文字，设置必要的超链接。7保存网页8浏览网页效果【7.2操作实战】【任务7-2-1】创建网页i
7、ndex0701.html【任务描述】以“海南旅游”为主题，制作网页index0701.html。（1）布局结构该网页整体上从上至下分为多个区块，大部分区块都采用两列式布局结构。（2）网页的主要元素文本、定义列表、图像、超链接等。（3）网页色彩网页前景色采用#333、#5a7c0c、#286be6、#f60、#425502、#5e7237、#639fea等多种不同的颜色，背景色主要通过背景图像控制。网页index0701.html的浏览效果如图7-9所示。图7-9网页index0701.html的浏览效果【实施过程】1新建文件夹，准备网页素材2建立样式文件，定义样式3新建代码片断4新建网页文档
8、index0701.html5链接外部样式文件03main.css 6对网页的页面进行布局在“文档”工具栏的“标题”文本框输入网页标题“海南旅游”。然后切换到“代码视图”，在标签“”与“”之间输入表7-12所示的网页主体布局结构的XHTML代码。表7-12网页0701.html主体布局结构的XHTML代码行号XHTML代码12345678 7在网页中插入代码片断（1）插入“0701代码片断”（2）插入“0702代码片断”（3）插入“0703代码片断”8对网页进行优化完善对已插入的代码片断进行优化完善，对XHTML代码进行清理操作。9保存网页且浏览其效果【7.3拓展实践】【任务7-3-1】创建网页index0702.html【任务描述】以“湖南旅游”为主题制作网页index0702.html，该网页整体上分为上、下两个部分，下半部分为左、右布局结构，其浏览效果如图7-12所示。图7-12网页index0702.html的浏览效果5