上机五 层叠样式、模板与库.doc

1、 上机目的与要求（1） 掌握附加和编辑外部样式表的方法（2） 掌握创建和应用CSS样式表的方法（3） 熟悉CSS样式各种特殊效果的用法（4） 掌握模板的创建、编辑和应用的方法（5） 掌握创建、编辑和使用库对象的方法2、 上机内容1） CSS样式和CSS样式表的创建、编辑和应用打开html文件夹中的art.html文件，按下列要求，用CSS样式对网页文字进行格式化。1 在网页编辑器窗口中，打开html文件夹中的art.html文件，创建名为docformat.css的层叠样式表文件，并新建层叠样式.docformat1，设置【字体】为“方正舒体”，【大小】为36像素，【颜色】为#FF0000，【背景图像】为img文件夹中的图像文件bg.jpg，将该样式应用于标题文字“生活与艺术”，并将层叠样式表文件docformat.css保存在本地根文件夹中。2 创建名为.docformat2的层叠样式，将这个样式定义在docformat.css层叠样式表文件中。将其【类型】中的【字体】设置为“方正舒体”，【大小】为36像素，【颜色】为#FF0000，【行高】为40像素，以及【背景色】为#CCCCCC，并将该样式作用于标题文字“生活与艺术”。预览网页后比较与中网页的不同之处。3 将名为.docformat2的样式复制成名为.docformat3的样式，并将其【类型】中的【字体】设置为“楷体”，【大小】为18像素，【样式】为“正常”，【颜色】为#000099，首行缩进两个字符，行高为30像素，将该样式作用于第一段文字。4 创建名为.docformat4的层叠样式，将其【类型】中的【字体】设置为“仿宋体”，【大小】为18像素，【样式】为“斜体”，【颜色】为#333333，【行高】为20像素。将该样式作用于第2段文字，浏览网页观察效果。5 复制层叠样式.docformat4，并将其改名为.docformat5，并将样式的属性修改为【字体】为“方正舒体”，【大小】为16像素，【样式】为“偏斜体”，【颜色】为#000099。将该样式作用于第4段文字，浏览网页观察结果后，保存网页。6 在网页编辑窗口中，打开literature.html文件，并链接外部样式表文件docformat.css。7 修改名为.docformat2的样式，将【颜色】#FF0000改为#0000CC，并作用于标题文字“中国文学”。浏览网页文档art.html和literature.html，观察标题文字的颜色变化。8 创建名为border1的样式，选择【边框】类型，并将其【样式】设为【点划线】，【宽度】的【上】、【右】、【下】、【左】的值设为4像素，【颜色】设为#99CC33。9 分别以border1、border2、.、border8为名新建层叠样式，选择【边框】类型，并分别定义它们的【样式】为【点划线】、【虚线】、【实线】、【双线】、【槽状】、【脊状】、【凹陷】、【凸出】8种风格，并设置合适的边框宽度和颜色。10 在新建网页exe5-1.htm上创建8个1行1列的表格，表格的宽度和高度是10040像素。分别以border1、border2、.、border8作用于8个表格，预览网页观察其效果。然后保存样式表文件docformat.css和网页文档exe5-1.html。图5-0 单元格样式2） CSS样式表特殊效果的应用（1） 创建名为exe5-2.html的网页，在网页的合适位置插入380285像素的层，并将img文件夹中的图像文件campus3.jpg插入层中，用CSS的Alpha滤镜制作出如图5-1所示的效果。图5-1 Alpha 滤镜效果图注：定义样式名.filter11，在【分类】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择Alpha选项，并设置参数如下：Alpha（Opacity=100，FinishOpacity=0，Style=2，StartX=0，StartY=0，FinishX=650，FinishY=550）（2） 创建名为exe5-3.html的网页，在网页的合适位置插入2行2列4个布局单元格，每个单元格为120100像素，并在每个单元格中插入img文件夹中的图像文件f01.jpg，如图5-2所示。然后用CSS的翻转滤镜制作出如图5-3所示的效果。注：l 定义样式 .FlipH，在【分类】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择FlipH选项（水平翻转），将其作用于左上图。l 定义样式 .FlipV，在【分类】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择FlipH选项（垂直翻转），将其作用于右下图。l 定义样式FF，在【分类】列表框中选择【扩展】类型中，同时输入FlipH和FlipV，中间用空格分隔，将其作用于左下图，完成图像的水平和垂直翻转。图5-2 四幅相同的图像图5-3 CSS翻转效果图（3） 创建名为exe5-4.html的网页，在网页合适位置插入1行3列3个布局单元格，每个单元格为100220像素，并在每个单元格中插入img文件夹中的图像文件campus4.jpg，然后用CSS的波浪滤镜制作出如图5-4所示的效果。l 左图参数为Wave(Add=1，Freq=2，LightStrength=70，Phase=50，Strength=10）；l 右图参数为Wave(Add=0，Freq=3，LightStrength=10，Phase=75，Strength=10）；l 中间为原始图像。图5-4 CSS波浪滤镜效果图注：滤镜Wave的参数意义如下：l Add为是否将原始图像加入变形后的图像，0表示“否”，1表示“是”。l Freq表示扭曲效果中出现的波形数目。l LightStrength确定波形亮度的深浅，取值越大则越亮。取值范围为0100的整数。l Phase表示波形的初相位，该值决定了波形的形状。取值范围为0100的整数。l Strength表示波形的强度。取值为0100的整数。（4） 创建名为exe5-5.html的网页，然后用CSS的翻转滤镜制作出如图5-5所示的效果。预览网页后，以exe5-5.html为名将网页保存在MySite文件夹中。图5-5 CSS翻转滤镜效果图3） 模板的应用（1） 将htm文件夹中的flower.html文档改变为模板，将其中7幅图像所处的区域设置为可编辑区，可编辑区的名字为img1、img2、.、img7，如图5-6所示，模板文件名为flower.dwt，将模板文件保存在本地网站的Template文件夹中。图5-6 模板创建示意图（2） 利用模板文件flower.dwt，创建网页文档exe5-6.html，其中可编辑区域插入的图像分别是img文件夹下的tu1.jpg，tu2.jpg、.、tu7.jpg，预览网页后用exe5-6.html保存文件。（3） 将模板文件flower.dwt改名为grid.dwt，保存后，更新站点中所有基于该模板的网页文件。（4） 修改模板文件grid.dwt，将其背静图像修改为bg0021.gif，保存修改后的模板文件。用这个模板文件更新站点中所有基于该模板的网页文档，观察网页文件flower.html和exe5-6.html背景图像的变化情况。4） 创建、编辑修改与使用库对象（1） 打开网页文件exe5-7.html，将网页中的七幅图像用菜单命令方式或鼠标拖动方式添加到库中，分别用img1、img2、.、img7给库项目命名。将网页底部的图像文件close1.gif以close为名设为库项目。（2） 打开网页文件art