(精品)第11章CSS样式制作动感文字.ppt

《(精品)第11章CSS样式制作动感文字.ppt》由会员分享，可在线阅读，更多相关《(精品)第11章CSS样式制作动感文字.ppt（32页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、课堂讲解 上机实战 第11课 CSS样式 课堂讲解 CSS样式简介创建CSS样式设置CSS样式 管理CSS样式 应用CSS滤镜效果扩展的CSS支持 CSS样式简介 CSS（Cascading Style Sheets）样式又叫层叠样式，使用它可以对网页中的布局元素，如表格、字体、颜色、背景、链接效果和其他图文效果实现更加精确的控制。CSS样式不仅可以在一个页面中使用，而且可以用于其他多个页面。创建CSS样式自定义CSS样式 HTML标签样式 CSS选择器样式 自定义CSS样式 自定义CSS样式可以对任何文本块或文本区域进行且需要用户手动进行应用。HTML标签样式 该样式是对现有的HTML标记进

2、行重新定义，当创建或改变该样式时，所有应用了该样式的文本格式都会自动更新。CSS选择器样式 该样式是对某些特定的标记组合进行重新定义，如所有包含了特定ID属性的标记，设置完成此样式后Dreamweaver会自动应用该样式。设置CSS样式 类型设置 背景设置 区块设置 方框设置 边框设置 列表设置 定位设置 扩展设置 类型设置 背景设置 “背景”设置包括设置背景颜色、选择背景图像、设置背景图像是否重复及重复的方式、背景图像是否滚动、背景图像相对于应用样式元素的位置。区块设置 “区块”指网页中文本、图像和层等替代元素，主要用于控制块中元素的间距和对齐方式等。方框设置 “方框”设置可以定义控制元素在

3、页面上的放置方式和属性等。边框设置 “边框”设置包括定义元素周围边框的样式、宽度及颜色等。列表设置 “列表”设置主要用于控制列表内各项元素的属性，如项目符号类型、项目符号图像和项目符号位置。定位设置 “定位”设置主要用于控制网页元素，特别是层的位置。扩展设置 “扩展”设置主要用于为打印的页面设置分页和为网页元素设置视觉效果。管理CSS样式 修改CSS样式 删除CSS样式 复制CSS样式 重命名层叠样式 应用CSS样式表 自定义CSS样式的应用 链接外部CSS样式 修改CSS样式 创建层叠样式后，可以修改样式中的某些参数。删除CSS样式 在“CSS样式”面板中，选择要删除的样式名称。单击面板底部

4、的“删除”按钮即可将样式删除。复制CSS样式 复制一个已经创建完成的CSS样式，再对其参数进行修改，即可创建一个全新的CSS样式，这样可以提高工作效率。重命名层叠样式 自定义CSS样式的应用 在CSS样式中的HTML标签样式和CSS选择器样式是自动应用的，只有自定义层叠样式需要用户手动操作。链接外部CSS样式 通过链接外部CSS样式可将其他网页中的样式应用到当前网页中。应用CSS滤镜效果 CSS滤镜是CSS的一个扩展，能把可视化的滤镜和转换效果添加到一个标准的HTML元素上，使应用样式的对象产生模糊、反转、发光等特殊效果。在Dreamweaver 8中，可直接在对话框中添加滤镜的参数，而不用编

5、写复杂的代码。应用CSS滤镜效果 1.打开网页文档。打开网页文档。2.执行执行 文本文本/CSS样式样式/新建命令。新建命令。3.打开打开“新建新建CSS规则规则”对话框，在对话框中对话框，在对话框中“选择器选择器类型类型”设置为设置为“类类”，在，在“名称名称”下拉列表中输入下拉列表中输入.gy，“定义在定义在”设置为设置为“仅对该文档。仅对该文档。”4.单击单击“确定确定”按钮，打开按钮，打开“.gy的的CSS规则定义规则定义”对话对话框，在对话框中的框，在对话框中的“分类分类”列表框中选择列表框中选择“扩展扩展”选项，在选项，在“滤镜滤镜”下拉列表中选择下拉列表中选择GLOW(Color

6、=?,strength=?)选项。选项。应用CSS滤镜效果5.将选项中将选项中Color设置为设置为#CC3300，Strength设置为设置为150。6.单击单击“确定确定”按钮，新建样式。选中要应用样式的文按钮，新建样式。选中要应用样式的文字所在的单元格，在字所在的单元格，在“属性属性”面板中的面板中的“样式样式”下下拉列表中选中新建的样式。拉列表中选中新建的样式。Color设置边缘光晕的颜色，可以是颜色英文名称或以设置边缘光晕的颜色，可以是颜色英文名称或以十六进制数设定；十六进制数设定；Strength设置边缘光晕的强度大小，设置从设置边缘光晕的强度大小，设置从1到到255，数，数值越大

7、强度越大。值越大强度越大。应用CSS滤镜效果 Dreamweaver中中CSS滤镜只能应用于有局滤镜只能应用于有局域限制的对象，如表格、单元格、图片等，域限制的对象，如表格、单元格、图片等，而不能直接用于文字，所以要将需要增加而不能直接用于文字，所以要将需要增加特效的文字事先放在表格中，然后让表格特效的文字事先放在表格中，然后让表格应用应用CSS样式，从而使文字产生特殊效果。样式，从而使文字产生特殊效果。应用CSS滤镜效果Shadow滤镜可以使文字产生阴影效果。滤镜可以使文字产生阴影效果。1.打开网页文档。打开网页文档。2.执行执行 文本文本/CSS样式样式/新建命令。新建命令。3.打开打开“

8、新建新建CSS规则规则”对话框，在对话框中对话框，在对话框中“选择器选择器类型类型”设置为设置为“类类”，在，在“名称名称”下拉列表中输入下拉列表中输入.yy，“定义在定义在”设置为设置为“仅对该文档。仅对该文档。”4.单击单击“确定确定”按钮，打开按钮，打开“.yy的的CSS规则定义规则定义”对话对话框，在对话框中的框，在对话框中的“分类分类”列表框中选择列表框中选择“扩展扩展”选项，在选项，在“滤镜滤镜”下拉列表中选择下拉列表中选择Shadow(Color=?,Direction=?)选项。选项。应用CSS滤镜效果5.将选项中将选项中Color设置为设置为#FF0000，Direction

9、设置为设置为120。6.单击单击“确定确定”按钮，新建样式。选中要应用样式的文按钮，新建样式。选中要应用样式的文字所在的单元格，在字所在的单元格，在“属性属性”面板中的面板中的“样式样式”下下拉列表中选中新建的样式。拉列表中选中新建的样式。Shadow滤镜可以使文字产生阴影效果。滤镜可以使文字产生阴影效果。Shadow滤镜的滤镜的格式格式Shadow(Color=?,Direction=?)。Color设置为投影的颜色，可以是颜色英文名称或以十设置为投影的颜色，可以是颜色英文名称或以十六进制数设定；六进制数设定；Direction设置阴影的方向，从设置阴影的方向，从0度开始，并以每度开始，并以

10、每45度为度为一个单位，直到一个单位，直到360度。度。制作滚动图片效果1.打开网页文档。打开网页文档。2.选中第选中第1幅图像，切换到拆分视图，幅图像，切换到拆分视图，在相应的位置输入以下代码在相应的位置输入以下代码。3.选中最后一幅图像，在相应的位置选中最后一幅图像，在相应的位置输入代码输入代码.扩展的CSS支持 在Dreamweaver 8中，CSS面板设计成了统一的面板，我们在此面板中可以快速确认样式、编辑样式、查看应用于页面元素的样式。上机实战 本课上机实战主要练习某公司站点的CSS样式定义。在练习中主要用到CSS样式的创建和添加外部CSS样式的链接等知识点，通过练习读者应充分掌握自定义样式、HTML标签样式等CSS样式的创建。在制作中主要分为创建标签样式、自定义文本样式以及创建超级链接样式这3个部分。