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

《上机五 层叠样式、模板与库》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、1、上机目的与要求（1）掌握附加和编辑外部样式表的方法（2）掌握创建和应用CSS样式表的方法（3）熟悉CSS样式各种特殊效果的用法（4）掌握模板的创建、编辑和应用的方法（5）掌握创建、编辑和使用库对象的方法2、上机内容1）CSS样式和CSS样式表的创建、编辑和应用打开html文件夹中的art.html文件，按下列要求，用CSS样式对网页文字进行格式化。①　在网页编辑器窗口中，打开html文件夹中的art.html文件，创建名为docformat.css的层叠样式表文件，并新建层叠样式.docformat1，设

2、置【字体】为“方正舒体”，【大小】为36像素，【颜色】为#FF0000，【背景图像】为img文件夹中的图像文件bg.jpg，将该样式应用于标题文字“生活与艺术”，并将层叠样式表文件docformat.css保存在本地根文件夹中。②　创建名为.docformat2的层叠样式，将这个样式定义在docformat.css层叠样式表文件中。将其【类型】中的【字体】设置为“方正舒体”，【大小】为36像素，【颜色】为#FF0000，【行高】为40像素，以及【背景色】为#CCCCCC，并将该样式作用于标题文字“生活与艺术”

3、。预览网页后比较与①中网页的不同之处。③　将名为.docformat2的样式复制成名为.docformat3的样式，并将其【类型】中的【字体】设置为“楷体”，【大小】为18像素，【样式】为“正常”，【颜色】为#000099，首行缩进两个字符，行高为30像素，将该样式作用于第一段文字。④　创建名为.docformat4的层叠样式，将其【类型】中的【字体】设置为“仿宋体”，【大小】为18像素，【样式】为“斜体”，【颜色】为#333333，【行高】为20像素。将该样式作用于第2段文字，浏览网页观察效果。⑤　复制层叠

4、样式.docformat4，并将其改名为.docformat5，并将样式的属性修改为【字体】为“方正舒体”，【大小】为16像素，【样式】为“偏斜体”，【颜色】为#000099。将该样式作用于第4段文字，浏览网页观察结果后，保存网页。⑥　在网页编辑窗口中，打开literature.html文件，并链接外部样式表文件docformat.css。⑦　修改名为.docformat2的样式，将【颜色】#FF0000改为#0000CC，并作用于标题文字“中国文学”。浏览网页文档art.html和literature.ht

5、ml，观察标题文字的颜色变化。①　创建名为border1的样式，选择【边框】类型，并将其【样式】设为【点划线】，【宽度】的【上】、【右】、【下】、【左】的值设为4像素，【颜色】设为#99CC33。②　分别以border1、border2、...、border8为名新建层叠样式，选择【边框】类型，并分别定义它们的【样式】为【点划线】、【虚线】、【实线】、【双线】、【槽状】、【脊状】、【凹陷】、【凸出】8种风格，并设置合适的边框宽度和颜色。③　在新建网页exe5-1.htm上创建8个1行1列的表格，表格的宽度和高

6、度是100×40像素。分别以border1、border2、...、border8作用于8个表格，预览网页观察其效果。然后保存样式表文件docformat.css和网页文档exe5-1.html。图5-0单元格样式2）CSS样式表特殊效果的应用（1）创建名为exe5-2.html的网页，在网页的合适位置插入380×285像素的层，并将img文件夹中的图像文件campus3.jpg插入层中，用CSS的Alpha滤镜制作出如图5-1所示的效果。图5-1Alpha滤镜效果图注：定义样式名.filter11，在【分类

7、】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择Alpha选项，并设置参数如下：Alpha（Opacity=100，FinishOpacity=0，Style=2，StartX=0，StartY=0，FinishX=650，FinishY=550）（2）创建名为exe5-3.html的网页，在网页的合适位置插入2行2列4个布局单元格，每个单元格为120×100像素，并在每个单元格中插入img文件夹中的图像文件f01.jpg，如图5-2所示。然后用CSS的翻转滤镜制作出如图5-3所示的效果。注：l定义样式

8、.FlipH，在【分类】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择FlipH选项（水平翻转），将其作用于左上图。l定义样式.FlipV，在【分类】列表框中选择【扩展】类型，在【滤镜】下拉列表框中选择FlipH选项（垂直翻转），将其作用于右下图。l定义样式FF，在【分类】列表框中选择【扩展】类型中，同时输入FlipH和FlipV，中间用空格分隔，将其作用于左下图，完成图像的水平和垂直翻转。图