07两列式网页的布局与美化电子教案_第1页
07两列式网页的布局与美化电子教案_第2页
07两列式网页的布局与美化电子教案_第3页
07两列式网页的布局与美化电子教案_第4页
07两列式网页的布局与美化电子教案_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

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的【代码视图】，在标签“</head>”的前面输入两行链接外部样式表的代码，如下所示：<link href="css/0701common.css" rel="stylesheet" type="text/css" /><link href="css/main0701.css" re

4、l="stylesheet" type="text/css" />6对网页的页面进行布局切换到“代码视图”，在网页0701.html代码区域的<body>与</ body>之间输入表7-3所示的XHTML代码。表7-3网页0701.html布局结构的XHTML代码行号XHTML代码1234<div class="banner"> <div class="baleft"> </div> <div class="baright"

5、> </div></div>7在网页中输入文字和插入图像在网页0701.html代码区域输入文字，然后插入1幅图像。8保存网页单击Dreamweaver CS3“标准”工具栏中的【保存】按钮或【全部保存】按钮，保存网页“0701.html”。9浏览网页效果按快捷键F12，网页的浏览效果如图7-1所示。【任务7-1-2】创建网页0702.html【任务描述】（1）创建样式文件main0702.css，在该样式文件中定义标签及选择符的样式属性。（2）创建网页文档0702.html，且链接外部样式文件main0702.css。（3）对网页0702.html的页面进行布局

6、设计，在网页中插入定义列表和输入文字。网页0702.html的浏览效果如图7-4所示。图7-4网页0702.html的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件main0702.css，定义样式3新建网页文档0702.html4链接外部样式文件main0702.css 5对网页的页面进行布局切换到“代码视图”，在网页0702.html代码区域的<body>与</body>之间输入表7-6所示的XHTML代码。表7-6网页0702.html布局结构的XHTML代码行号XHTML代码123<div class="title1"&g

7、t; </div><div class="nei"> </div><div class="nei"> </div>6在网页中插入定义列表和输入文字在网页0702.html代码区域输入定义列表<dl></dl>和<dt></dt>，然后输入列表项<li></li>，在列表项中输入文字。7保存网页8浏览网页效果【任务7-1-3】创建网页0703.html【任务描述】任务7-3为考核项目，请独立完成以下操作任务：创建如图7-6所示

8、的网页0703.html。图7-6网页0703.html的浏览效果【实施过程】1新建文件夹，准备图像文件2建立样式文件main0703.css，定义样式3新建网页文档0703.html4链接外部样式文件main0703.css 5对网页的页面进行布局切换到“代码视图”，在网页0703.html代码区域的<body>与</ body>之间输入表7-9所示的XHTML代码。表7-9网页0703.html布局结构的XHTML代码行号XHTML代码12<div class="title2"> </div><div class=&

9、quot;nei_xl"> </div>6在网页中插入定义列表和输入文字在网页0702.html代码区域的标签“<div class="nei_xl">”与“</div>”之间输入两对定义列表<dl></dl>、<dd></dd>、<dt></dt>，然后插入图像、输入文字，设置必要的超链接。7保存网页8浏览网页效果【7.2操作实战】【任务7-2-1】创建网页index0701.html【任务描述】以“海南旅游”为主题，制作网页index0701.ht

10、ml。（1）布局结构该网页整体上从上至下分为多个区块，大部分区块都采用两列式布局结构。（2）网页的主要元素文本、定义列表、图像、超链接等。（3）网页色彩网页前景色采用#333、#5a7c0c、#286be6、#f60、#425502、#5e7237、#639fea等多种不同的颜色，背景色主要通过背景图像控制。网页index0701.html的浏览效果如图7-9所示。图7-9网页index0701.html的浏览效果【实施过程】1新建文件夹，准备网页素材2建立样式文件，定义样式3新建代码片断4新建网页文档index0701.html5链接外部样式文件03main.css 6对网页的页面进行布局在

11、“文档”工具栏的“标题”文本框输入网页标题“海南旅游”。然后切换到“代码视图”，在标签“<body>”与“</body>”之间输入表7-12所示的网页主体布局结构的XHTML代码。表7-12网页0701.html主体布局结构的XHTML代码行号XHTML代码12345678<div class="bigdiv"> <div class="banner"> </div> <div class="title1"> </div> <div class="nei"> </div> <div class="nei"> </div> <div class="title2"> </div> <div class="nei_xl"> </div></div>7在网页中插入代码片断（1）插入“0701代码片断”（2）插入“0702代码片断”（3）插入“0703代码片断”8对网页进行

人人文库> 全部分类> 教育资料 > 考试试卷

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论