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

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

1、教学单元1　体验网页的布局与美化教学单元1　体验网页的布局与美化【教学要点】（1）熟练创建本地站点（2）熟悉Web标准的设计规则（3）熟悉CSS的选择符及属性设置（4）熟悉CSS属性值的缩写（5）熟悉DreamweaverCS3中CSS的属性设置（6）体验DreamweaverCS3对CSS的支持（7）体验网页中结构与表现的分离（8）体验XHTML+CSS布局网页（9）了解CSS的盒模型【1.1　前导训练】【任务1-1-1】创建本地站点1．在本地硬盘中创建文件夹2．启动DreamweaverCS33．创建名称为“01

2、体验XHTML+CSS布局与美化网页”的本地站点（1）启动建立站点向导（2）定义站点名称（3）选择是否使用服务器技术（4）确定使用文件的方式，设置文件存储位置（5）设置如何连接到远程服务器（6）查看站点信息【任务1-1-2】建立网页0101.html1．新建网页文档（1）创建文件夹（2）设置DreamweaverCS3“新建文档”的初始参数（3）新建一个网页文档（4）保存该网页（5）分析空白网页的XHTML文档结构由DreamweaverCS3生成的空白网页的XHTML代码如图1-15所示。11教学单元1　体验网页的

3、布局与美化图1-15　由DreamweaverCS3生成的空白网页的XHTML代码2．准备样式文件3．在网页插入div标签在网页0101.html代码区域的与之间插入多个div标签，插入多个div标签后的XHTML代码如表1-3所示。4．在网页中插入图像和输入文字在网页0101.htm中插入图像，输入相应的文字，且设置必要的超链接。完整的XHTML代码如表1-4所示。5．保存网页6．浏览网页效果【任务1-1-3】准备网页0102.html且浏览其效果（1）在DreamweaverCS3工作界

4、面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-2”，然后在文件夹“任务1-2”中建立子文件夹“css”和“images”。（2）将样式文件main0102.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。（3）将网页文档0102.html拷贝到“任务1-2”文件夹中。（4）打开网页文档0102.html。（5）按快捷键F12浏览网页0102.html，其浏览效果如图1-17所示。【任务1-1-4】准备网页0103.html且浏览其效果（1）在Dreamweave

5、rCS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-3”，然后在文件夹“任务1-3”中建立子文件夹“css”和“images”。（2）将样式文件0101common.css、main0103.css、top0103.css和bottom0103.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。（3）将网页文档0103.html拷贝到“任务1-3”文件夹中。（4）打开网页文档0103.html。（5）按快捷键F12浏览网页0103.html，其浏览效果如图

6、1-18所示。【任务1-1-5】准备网页0104.html且浏览其效果（1）在DreamweaverCS3工作界面【文件】面板中的文件夹“0101前导训练”11教学单元1　体验网页的布局与美化中建立子文件夹“任务1-4”，然后在文件夹“任务1-4”中建立子文件夹“css”和“images”。（2）将样式文件0101common.css和main0104.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。（3）将网页文档0104.html拷贝到“任务1-4”文件夹中。（4）打开网页文档0

7、104.html。（5）按快捷键F12浏览网页0104.html，其浏览效果如图1-19所示。【1.2　操作实战】【任务1-2-1】体验网页中结构与表现的分离网页主要由三个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），对应Web标准也分为三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（例如W3CDOM）、ECMAScript等。网页index0101.html中内容、结构、表现和行为综合作用的XHTML代码如

8、图1-20所示。所有网页都是由“内容、结构、表现和行为”这四个方面组成的，其中内容是基础，然后是结构和表现，最后再加点“行为”。内容是浏览者所关注的信息，设计者使用XHTML标签控制网页的结构，使用CSS代码控制网页的表现，使用JavaScript代码及其他方式控制网页的行为，三者综合作用保证网页美观、实用。【任务1-2-2】体验符合Web标准