9.2使用复制CSS样式快速制作网页 课件 -2022-2023学年高二下学期（中职）《网页设计与制作》（华南理工版）

使用复制CSS样式快速制作网页 准备知识 使用复制CSS样式快速制作网页 设置类型 设置背景 设置区块 设置方框 …… 删除CSS样式 11. 复制CSS样式 任务实施 小江是某网络公司的网站设计师，他需要对已经建立的网站进行CSS样式设置。同时，还要能够快速创建新的网页样式。 任务二：使用复制CSS样式快速制作网页 使用复制CSS样式快速制作网页 任务分析： 理解牢记！ 由于复制一个已经创建完成的CSS样式，然后再对其参数进行修改，可以快速地创建一个全新的CSS样式，提高工作效率。因此，小江决定使用复制CSS样式来完成此任务。 任务二：使用复制CSS样式快速制作网页 任务 实施 使用复制CSS样式快速制作网页 （1）在Dreamweaver中创建一个CSS样式，然后打开“CSS样式”面板，选择要复制的CSS样式，如下左图所示。 （2）在选择的CSS样式上单击鼠标右键，在弹出的快捷菜单中选择“复制”命令，如下右图所示。 （3）在打开的“重制CSS规则”对话框中设置CSS样式的名称和其他参数，如下图所示，然后单击“确定”按钮。 （4）在“CSS样式”面板中可以看到复制的CSS样式，如下图所示。 使 用 CSS 滤 镜 设 置 网 页 文 本 准备知识 使用CSS滤镜设置网页文本 创建CSS链接样式 应用CSS滤镜效果 任务实施 张薇是某网络公司职员，计算机IE猫2010应用程序不被经常使用，为了减少内存容易。要求“添加或删除程序”窗口使用卸载该程序。 使 用 CSS 滤 镜 设 置 网 页 文 本 任务三：使用CSS滤镜设置网页文本 任务分析： 理解牢记！ 由于计算机中的某些应用程序对用户来说没有太大意义，用户需要 任务三：使用CSS滤镜设置网页文本 任务 实施 使用CSS滤镜设置网页文本 1.设置网页文本模糊效果 （1）使用Dreamweaver新建一个网页，然后在其中输入一段文本内容，如下图所示。 （2）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，在“CSS样式”面板中单击“新建CSS规则”按钮。 （3）在打开的 “新建CSS规则”对话框的“选择器类型”栏中选中“类”单选按钮，在“名称”文本框中输入“mohu”，在“定义在”栏中选中“仅对该文档”单选按钮，如下图所示，然后单击“确定”按钮。 （4）在打开的“.mohu的CSS规则定义”对话框中，在“分类”列表中选择“类型”选项，然后设置字体为“黑体”，字体大小为36像素，字体颜色为“#333333”，如下图所示。 （5）在“分类”列表中选择“扩展”选项，进入“扩展”设置界面，如下图所示。 （6）在“扩展”设置界面中的“滤镜”下拉列表中选择“Blur(Add=?, Direction=?, Strength=?)”选项，如下图所示。 （7）将“Add”的值设置为0，“Direction”的值设置为125，“Strength”的值设置为5，如下图所示。 知识点链接 Add：设置是否重复显示“Blur”滤镜效果，0表示不显示，1表示显示。 Direction：设置模糊的方向，取值从0开始，随取值的增大，模糊的方向沿顺时针变动。 Strength：设置模糊的半径大小，单位为像素，默认取值为5。 （8）单击“确定”按钮，完成该样式的设置，在“CSS样式”面板中可以看到新建的“mohu”样式。 （9）在文档中选中开始输入的文本内容，然后在“属性”面板的“样式”下拉列表框中为其应用样式“mohu”，如下图所示。 （10）选择了样式“mohu”后，选中的文本内容会自动应用样式，如下图所示。 （11）保存文件后，按“F12”键在浏览器中预览效果，如下图所示。 2.设置网页文本阴影效果 （1）使用Dreamweaver新建一个网页，然后在其中输入一段文本内容，如下图所示。 （2）选择“窗口”→“CSS样式”命令，打开“CSS样式”面板，在“CSS样式”面板中单击“新建CSS规则”按钮。 （3）在打开的 “新建CSS规则”对话框的“选择器类型”栏中选中“类”单选按钮，在“名称”文本框中输入“yinying”，在“定义在”栏中选中“仅对该文档”单选按钮，然后单击“确定”按钮，如下图所示。 （4）在打开的“.yinying的CSS规则定义”对话框中，在“分类”列表中选择“类型”选项，然后设置字体为“黑体”，字体大小为36像素，字体颜色为“#333333”，如下图所示。 （5）在“分类”列表中选择“扩展”选项，进入“扩展”设置界面，如下图所示。 （6）在“扩展”设置界面中的“滤镜”下拉列表中选择“DropShadow(Color=?, OffX=?, OffY=?, Positive=?)”选项，如下图所示。 （7）将“Color”的值设置为“#CCCCCC”，“Off