XHTML+CSS网页布局与美化的案例教程电子教案01体验网页的布局与美化.docVIP

教学单元1　体验网页的布局与美化 【教学要点】 （1）熟练创建本地站点 （2）熟悉Web标准的设计规则 （3）熟悉CSS的选择符及属性设置 （4）熟悉CSS属性值的缩写 （5）熟悉Dreamweaver CS3中CSS的属性设置 （6）体验Dreamweaver CS3对CSS的支持 （7）体验网页中结构与表现的分离 （8）体验XHTML+CSS布局网页 （9）了解CSS的盒模型 【1.1　前导训练】 【任务1-1-1】创建本地站点 1．在本地硬盘中创建文件夹 2．启动Dreamweaver CS3 3．创建名称为“01体验XHTML+CSS布局与美化网页”的本地站点 （1）启动建立站点向导 （2）定义站点名称 （3）选择是否使用服务器技术 （4）确定使用文件的方式，设置文件存储位置 （5）设置如何连接到远程服务器 （6）查看站点信息 【任务1-1-2】建立网页0101.html 1．新建网页文档 （1）创建文件夹 （2）设置Dreamweaver CS3“新建文档”的初始参数 （3）新建一个网页文档 （4）保存该网页 （5）分析空白网页的XHTML文档结构 由Dreamweaver CS3生成的空白网页的XHTML代码如图1-15所示。 图1-15　由Dreamweaver CS3生成的空白网页的XHTML代码 2．准备样式文件 3．在网页插入div标签 在网页0101.html代码区域的body与/ body之间插入多个div标签，插入多个div标签后的XHTML代码如表1-3所示。 4．在网页中插入图像和输入文字 在网页0101.htm中插入图像，输入相应的文字，且设置必要的超链接。完整的XHTML代码如表1-4所示。 5．保存网页 6．浏览网页效果 【任务1-1-3】准备网页0102.html且浏览其效果 （1）在Dreamweaver CS3工作界面【文件】面板中的文件夹“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）在Dreamweaver CS3工作界面【文件】面板中的文件夹“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，其浏览效果如图1-18所示。 【任务1-1-5】准备网页0104.html且浏览其效果 （1）在Dreamweaver CS3工作界面【文件】面板中的文件夹“0101前导训练”中建立子文件夹“任务1-4”，然后在文件夹“任务1-4”中建立子文件夹“css”和“images”。 （2）将样式文件0101common.css和main0104.css拷贝到“css”文件夹中，将所需要的图像文件拷贝到“images”文件夹中。 （3）将网页文档0104.html拷贝到“任务1-4”文件夹中。 （4）打开网页文档0104.html。 （5）按快捷键F12浏览网页0104.html，其浏览效果如图1-19所示。 【1.2　操作实战】 【任务1-2-1】体验网页中结构与表现的分离 网页主要由三个部分组成：结构（Structure）、表现（Presentation）和行为（Behavior），对应Web标准也分为三个方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（例如W3C DOM）、ECMAScript等。 网页index0101.html中内容、结构、表现和行为综合作用的XHTML代码如图1-20所示。所有网页都是由“内容、结构、表现和行为”这四个方面组成的，其中内容是基础，然后是结构和表现，最后再加点“行为”。内容是浏览者所关注的信息，设计者使用XHTML标签控制网页的结构，使用CSS代码控制网页的表现，使用JavaScript代码及其他方式控制网页的行为，三者综合作用保证网页美观、实用。 【任务