93 【CSS样式】面板的使用 教案

93 【CSS样式】面板的使用 教案 南阳工业学校教案授课班级授课时间教材网页制作基础教程（Dreamweaver CS3）葛艳玲电子工业出版社教学项目9.3【CSS样式】面板的使用教学目标认识CSS样式面板管理样式教学形式一体化课，在一体化教室内教学方法教学做一体化教学、演示教学法教学准备1.课件2.一体化教室教学重点认识CSS样式面板管理样式教学难点认识CSS样式面板管理样式教学过程设计设计流程考勤（2）教学形式实例演示，激发兴趣教学内容设计意图学生到课情况通过样例产生的效果图让学情境引入（5）1.教师展示样例，显示效果，让学生感魅力。 2.提出问题效果图如何产生？学生思考。 3.教师介绍相关的概念。 生在视觉、上得到真实感受，启发学生思考，提高学习兴趣。 9.3.1CSS样式面板 3、管理样式查看“属性”视图的按钮【类别】视图将Dreamweaver支持的CSS属性划分为8个类别。 每个类别的属性都包含在一个列表中，您可以单击类别名称旁边的加号(+)按钮展开或折叠它。 【列表】视图按字母顺序显示Dreamweaver所支持的所有CSS属性。 “设置属性”（蓝色）将出现在列表顶部新课教学【设置属性】视图仅显示那些已设置的属性。 “设置属性”视图为（58）默认视图。 打开“新建CSS样式”对话框定义要创建的CSS样式的类型创建自定义样式（Class）重定义标签使用CSS选择器“选择器”下拉列表中提供的选择器包括aactive、ahover、alink、avisited。 选择定义样式的位置新建样式表文件用于创建外部样式表。 仅对该文档在当前文档中嵌入样式。 9.3.3CSS样式CSS样式有8种类型定义CSS样式类型属性1定义CSS类型属性使用“CSS样式定义”对话框中的“类型”类别可以定义CSS样式的基本字体和类型设置。 9.3【CSS样式】面板的使用2定义CSS样式背景属性使用“CSS样式定义”对话框中的“背景”类型，可以定义CSS样式的背景设置。 可以网页中的任何元素应用背景属性。 9.3【CSS样式】面板的使用3定义CSS样式区块属性使用“CSS样式定义”对话框中的“区块”类别，可以定义标签和属性的间距和对齐设置。 4定义CSS样式方框属性使用“CSS样式定义”对话框中的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。 9.3【CSS样式】面板的使用5定义CSS样式边框属性使用“CSS样式定义”对话框中的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 9.3【CSS样式】面板的使用6定义CSS样式列表属性使用“CSS样式定义”对话框中的“列表”类别可以为列表标签定义列表设置（如项目符号大小和类型）。 4定义CSS样式方框属性使用“CSS样式定义”对话框中的“方框”类别可以为控制元素在页面上的放置方式的标签和属性定义设置。 5定义CSS样式边框属性使用“CSS样式定义”对话框中的“边框”类别可以定义元素周围的边框的设置（如宽度、颜色和样式）。 6定义CSS样式列表属性使用“CSS样式定义”对话框中的“列表”类别可以为列表标签定义列表设置（如项目符号大小和类型）。 3)DropShadow滤镜设置文本或图像的阴影效果，应用在文本上时，其效果更加明显。 其参数格式是DropShadow(Color=?,OffX=?,OffY=?,Positive=?)4)Glow滤镜设置发光效果，其参数格式是Glow(Color=?,Strength=?)5）Shadow滤镜设置阴影效果，其参数格式是Shadow(Color=?,Direction=?)6）Wave滤镜设置波纹效果，其参数格式是Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)9.3.4CSS样式的应用在创建的3种CSS样式类型中“标签”和“高级”的应用HTML标签与之相关联，因此它们的样式属性自动应用于文档中受定义样式影响的任何标签。 “类”的应用“类”样式需在“属性”面板的“样式”或“类”选项中选择应用。 课堂