XHTML+CSS网页布局与美化07两列式网页的布局与美化.docx

《XHTML+CSS网页布局与美化07两列式网页的布局与美化.docx》由会员分享，可在线阅读，更多相关《XHTML+CSS网页布局与美化07两列式网页的布局与美化.docx（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、教学单元7两列式网页的布局与美化【教学要点】(1)熟悉网页两列式布局的各种方法(2)熟悉网页的单列式布局方法与元素的自适应(3)学会网页元素的嵌套布局方法(4) 了解使用CSS的定位属性控制元素的位置(5) 了解CSS布局网页的基本布局模型(6) 1前导i)l|练】【准备工作】(1)在本地硬盘中创立文件夹(2)启动 Dreamweaver CS3(3)创立名称为“07两列式网页的布局与美化”的本地站点【任务7-1-1创立网页070Lhtml【任务描述】创立样式文件0701common.css和main0701.css,在这些样式文件中定义标签及 选择符的样式属性。(2)创立网页文档0701.h

2、tml,且链接外部样式文件0701common.css和main0701.csso(3)对网页0701.html的页面进行布局设计，在网页中插入图像和输入文字。网页0701.html的浏览效果如图7-1所示。在神瞄奇的密图上，浮着一个风光腐旗的热带岛 屿，郡里有辽阔广遁的天空、澄港透明的海域、平坦柔软 的沙源，构影婆笑的娜样.它达1590多公里海 岸雄的海南岛.今天，梅南巳经战为一个著W的膑游胜 地，以海口和三变力两个端点，向南的航淞行程及本分为 三条技，一条是东海案的海底旅游风景线，一条是中线的 黎亩少数民艇风景峻，另一条是西再岸的短蛤丛林风景 蛾在神瞄奇的密图上，浮着一个风光腐旗的热带岛

3、屿，郡里有辽阔广遁的天空、澄港透明的海域、平坦柔软 的沙源，构影婆笑的娜样.它达1590多公里海 岸雄的海南岛.今天，梅南巳经战为一个著W的膑游胜 地，以海口和三变力两个端点，向南的航淞行程及本分为 三条技，一条是东海案的海底旅游风景线，一条是中线的 黎亩少数民艇风景峻，另一条是西再岸的短蛤丛林风景 蛾图7-1网页0701.html的游览效果【实施过程】1.操作准备XHTML+CSS网页布局与美化案例教程(1)创立文件夹Dreamweaver CS3初始参数设置2 .建立公共样式文件0701common.css,定义标签样式属性.建立样式文件main0701.css,定义样式3 .新建网页文档

4、0701.html在子文件夹“任务7-1中，通过【新建文档】对话框或者直接使用【新建文件】快 捷菜单创立一个名称为“0701.html”的网页文档。翻开网页文档0701.html,在“文档”工 具栏的“标题”文本框直接输入网页标题“任务7- 1”。4 .链接外部样式文件main0701 .css切换到网页文档0701.html的【代码视图】，在标签v/head”的前面输入两行链接外 部样式表的代码，如下所示：dink href=css/main0701 .css rel=nstylesheetn type=Htext/cssH /5 .对网页的页面进行布局切换至|J 代码视图”，在网页0701

5、.html代码区域的vbody与v/body之间输入表7-3 所示的XHTML代码。表73网页0701.html布局结构的XHTML代码行号XHTML代码12346 .在网页中输入文字和插入图像在网页0701.html代码区域输入文字，然后插入1幅图像。7 .保存网页单击DreamweaverCS3 “标准”工具栏中的【保存】按钮图或【全部保存】按钮Q, 保存网页保701.html”。8 .浏览网页效果按快捷键F12,网页的浏览效果如图71所示。【任务7-1-2】创立网页0702.html【任务描述】创立样式文件main0702.css,在该样式文件中定义标签及选择符的样式属性。(2)创立网页

6、文档0702.html,且链接外部样式文件main0702.csso(3)对网页0702.html的页面进行布局设计，在网页中插入定义列表和输入文字。网页0702.html的浏览效果如图74所示。教学单元7两列式网页的布局与美化图74网页0702.html的浏览效果北京到三更纯做支洲nr双飞五日纯玩游北京到海口”玩团-尽整娱支州双飞五日稣玩第?900北京到三豆纯乐团-完美修女洲双飞五日纯反沙W24O北京到海口厘加博-三星与勒团05tto北京到三爱美三膏n?双飞五n半自助*3470化京到海口品质那-康本寿双飞六日老年团2160北京到三千”反闭 蛾支渊南山全目双飞五日春*3300北京到海口国愉游特

7、价做支洲鸟*2060北京却三亚柒蜕收支洲双飞五日享自勘轴*3500牝京到海口品质第海南大环岛双飞七日浴*3130【实施过程】.新建文件夹，准备图像文件1 .建立样式文件main0702.css,定义样式.新建网页文档0702.html2 .链接外部样式文件main0702.css.对网页的页面进行布局切换到“代码视图”，在网页0702.html代码区域的vbody与v/body之间输入表7-6 所示的XHTML代码。表76网页0702.html布局结构的XHTML代码.在网页中插入定义列表和输入文字行号XHTML代码123 在网页0702.html代码区域输入定义列表vdlv/dl和vdtv/

8、dt,然后输入列表项 ,在列表项中输入文字。3 .保存网页.浏览网页效果【任务7-1-3创立网页0703.html【任务描述】任务7-3为考核工程，请独立完成以下操作任务：创立如图7-6所示的网页0703.htmlo图7-6网页0703.html的浏览效果3XHTML+CSS网页布局与美化案例教程【实施过程】.新建文件夹，准备图像文件1 .建立样式文件main0703.css,定义样式.新建网页文档0703.html2 .链接外部样式文件main0703.css.对网页的页面进行布局切换到“代码视图”，在网页0703.html代码区域的vbody与v/body之间输入表7-9 所示的XHTML

9、代码。表7-9网页0703.html布局结构的XHTML代码.在网页中插入定义列表和输入文字行号XHTML代码12 在网页0702.html代码区域的标签“vdivclass=nei_x”与v/div”之间输入两对 定义列表vdlv/dl、 ,然后插入图像、输入文字，设置必要的超链 接。3 .保存网页.浏览网页效果7.2操作实战】【任务7-2-1创立网页index0701. html【任务描述】以“海南旅游”为主题,制作网页index0701.htmL(1)布局结构该网页整体上从上至下分为多个区块，大局部区块都采用两列式布局结构。(2)网页的主要元素文本、定义列表、图像、超链接等。(3)网页色

10、彩网页前景色采用#333、#5a7cOc、#286be6、#f60、#425502、#5e7237、#639fea 等多种 不同的颜色，背景色主要通过背景图像控制。网页index0701 .html的浏览效果如图7-9所示。教学单元7两列式网页的布局与美化金回国M匕京仔三亚里博俄路 felB北京刽三亚凭HTR支测nr双飞五日用双荐wtJ牝京到三汽团完美祭支渊双、五H姓上KI244I北京到三更美三”?双飞五日李自的W4TO北京到三亶”团支洌南山全景双飞五日会*3300北京到三更餐研做支调双飞近日隼CIRMB但TBlIffl匕京号海口旅游浅路莺京到海口死反因-凤脩茶支州双飞五日注-2900ikjR

11、imnWftV 三星 WR 团- M&京到“口晶SdM寿双飞六日去年即WIW拓直到海口乾僧XT峙伊岁支淘恩I26M配京到海R品JR/海南大叫自双七七日番213。在承,萧的直图上，声假设一个风优箱瓶的门希芸 屿，那量有江网F的无生，灌港遗而泗虬平坂翻: 的吩淳，树影要波的&轴，它就是有苔长达1580妥公里蔺 生世的南南翳.今天，陶南已经成为一个著名的旅种雅 坳,以河口和三王方两个端点，海菊的就骄行程基本分为 三条线，一条是东汨岸的海茂旅廨风景岐，一条是中收的 整：苗少数民心H策收，另一条是西海岸的耳桧从林凤箫 威物鄢窸朝美丽的三步它是国际性通锥淡海旅源城市，m 有品暧的阳光.菸篮的海洋.醉道的岛

12、 宜人的气温美丽的三步它是国际性通锥淡海旅源城市，m 有品暧的阳光.菸篮的海洋.醉道的岛 宜人的气温4 A线支洲岛区侪一穹沙谷沙质细白J像溥击石， 演花如雪，舟底册期，五荔渤蜩形态 奇异，整度也、避惠，冬泳TICffS图7-9网页index0701.html的浏览效果【实施过程】.新建文件夹，准备网页素材1 .建立样式文件，定义样式.新建代码片断2 .新建网页文档index0701.html.链接外部样式文件03main.css3 .对网页的页面进行布局在“文档”工具栏的“标题”文本框输入网页标题“海南旅游”。然后切换到“代码视图”，在标签“vbody”与“v/body”之间输入表7-12所示

13、的网 页主体布局结构的XHTML代码。表7-12网页0701.html主体布局结构的XHTML代码行号XHTML代码12345678 .在网页中插入代码片断(1)插入“0701代码片断”5XHTML+CSS网页布局与美化案例教程(2)插入“0702代码片断”(3)插入“0703代码片断”.对网页进行优化完善对已插入的代码片断进行优化完善，对XHTML代码进行清理操作。4 .保存网页且浏览其效果7.3拓展实践】【任务7-3-1创立网页index0702. html【任务描述】以“湖南旅游”为主题制作网页index0702.html,该网页整体上分为上、下两个局部, 下半局部为左、右布局结构，其浏

14、览效果如图7-12所示。0 湖南相关景点Rore. . 张家界南岳常山武陵通 桃花谡岳阳樱黄龙洞 天门山宝修湖生藤山0湖南箧游资讯Wor 1叭”群众也之湖南旅游目的地“塌暗 湖南游客可乘浴就赴台 长的条景观街通过出收开街0 湖南旅途漏记.or.二 广州由发乘坐商铁崎游湖南 湖南湘西五大最关风景看点首页中国著名景区湖南旅游攻略I湖南旅游攻略列表口天n山，去邂说一场传奇(01-18)口湘西古城凤凰自助攻略01-22口湖南南山自助游攻略(01-2210湘西古镇德夯地道的苗家风情101-22)口衡山、韶山、岳阳楼自我游01-22O三湘之地长沙旅游谋&大全01-22U奇山异山张家界旅行攻略01-220街山窝雪攻略01-22图7-12网页index0702.html的浏览效果