电子教案-《Dreamweaver网页设计与制作(第二版)》-A06-3954(示例)项目七

课程教案

授课内容 授课班级 教学方法与手段 项目七 制作美容网站——应用样式表 授课学时 16课时 讲授法、演示法、讨论法。多媒体教学 本项目的工作内容是为某美容公司建立公司网站，该美容公司主要有基础护理系列、美白保湿系列、控油除痘系列、面膜护理系列等几大类产品；针对的消费者主要是中高端的时尚年轻人。网站的功能需求有：达到品牌宣传效果、实现在线订单功能、提供会员后台服务。 具体的制作要求是： 项目内容 1. 整体风格高雅、年轻、时尚，色调淡雅、飘逸； 2. 能体现出公司健康、安全、有效的理念； 3. 提供首页和 1 张二级页面； 4. 在线订单及会员页面达到基本要求即可； 5. 美工要求较高，网页设计强调时尚感。 学生通过本项目的学习，能： 1、 理解并熟悉样式的类型 教学目标 2、 熟练掌握样式的创建方法 3、 掌握外部样式的使用 4、 理解并掌握 CSS 滤镜的使用 教学重点与难点 教学重点：创建样式 教学难点：编辑和应用外部样式 项目效果 教学过程设计 【任务一】为网站首页设置样式——样式表的基本应用 样式表是一个非常灵活的工具，使用它可以将所有有关文档的样式保存在一个样式文件中。当需要给大量网页定义同样的样式时，只要将样式文件链接到各个网页即可，而不必再把繁杂的样式编写在每个文档结构中。 （一）熟悉“CSS样式”面板 在 Dreamweaver CS3 中，可以借助“CSS 样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”→“CSS 样式”菜单，可打开“CSS 样式”面板。 （二）CSS样式的存在方式 CSS 样式以外部和内嵌两种方式存在于网页中： ? 外部 CSS 样式表：为增强 CSS 样式的通用性，可以创建扩展名为“.css”的样式表文件。利用“CSS 样式”面板可将该文件链接至站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。 ? 内部（或嵌入式）CSS 样式表：是一系列包含在HTML 文档 head 部分 style 标签内的 CSS 样式。 小提示：与 HTML 文件一样，CSS 样式表文件也是一个文本文件，既可以直接使用 Dreamweaver 来创建它，也可以使用“记事本”等文本编辑器来编写。 （三）CSS样式的分类 根据应用对象的不同，CSS 样式被分为以下三类。 1. 类样式 类样式又称自定义样式，它是唯一可应用于文档中任何对象的 CSS 样式类型，主要用于定义一些特殊的样式。例如，可为网页中的列表项定义样式。 对于类样式而言，当修改了所选文本的字体、大小、颜色等属性后，Dreamweaver 会自动创建相应的内部样式。此外，也可以使用“CSS 样式”面板来直接创建类样式和其他两种样式。 2. 标签样式 用来重定义 HTML 标签的样式。例如，定义 table 标签样式后，网页中所有表格都将自动应用该样式。又如，一旦定义了 body 样式，则网页将自动按照定义的 body 样式更新。 3. 选择器样式 选择器样式又称高级样式，它主要用来定义链接文本的样式，也可用来重定义特定标签组合的样式。例如，每当 h2 标题出现在表格单元格内时都会生成 tdh2 标签组合。因此，如果定义了 tdh2 标签组合样式，则它将影响文档中的全部 tdh2 标签组合。选择器样式还可重定义包含特定 id 属性的所有标签的格式。例如，＃ myStyle 样式将应用于所有包含属性 id=\的标签。 （四）创建样式的一般步骤 步骤1 在“CSS 样式”面板中单击“新建 CSS 规则”按钮，打开“新建 CSS 规则”对话框。 步骤2 在“选择器类型”区选择要创建的 CSS 类型。 ? 要创建可作为 class 属性应用于任何对象的样式，应选择“类（可应用于任何标签）”，然后在“名称”编辑框中输入样式名称。 ? 如果要定义标签样式，应选择“标签”，然后在“标签”下拉列表中选择一个标签。 ? 如果要定义链接或标签组合样式，应选择“高级”，然后在“选择器”编辑框中输入一个或多个 HTML 标签，或在“选择器”下拉列表中选择一个标签（包括 a:active、a:hover、a:link 和 a:visited）。 步骤3 在“定义在”选项组中指定保存样式的位置。要创建外部样式表，可在“定义在”下拉列表中选择“新建样式表文件”；要将新建样式保存在当前站点中的现有样式表文件中，可在“定义在”下拉列表中选择样式表文件；要在当前文档中嵌入样式，可选择“仅对该文档”单选按钮。 步骤4 单击“确定”按钮。 ? 如果在步骤 3 中选择了“新建样式表文件”选项，系统将首先打开 “保存样式表文件为”对话框。用户可利用该对话框设置样式表文件的保存位置和名称。单击“保存”按钮。 ? 如果在步骤 3 中选择了“仅对该文档”选项，则 Dreamweaver 将直接打开 “××× 的 CSS 规则定义”对话框。 步骤5 在“CSS 规则定义”对话框左侧的“分类”列表区选择不同分类，可设置样式的不同属性。最后单击“确定”按钮即可。 CSS 样式的主要属性如下： （1）“类型”属性 用来定义字体、大小、粗细、样式、行高、大小写、颜色等，主要针对网页中的文本。 （2）“背景”属性 用来定义“背景”属性，可以对网页中的任何元素应用“背景”属性，还可以设置背景图像的位置。 （3）“区块”属性 这类属性用来定义文字的排列方式，包括单词间距、字母间距、垂直对齐方式、文本对齐方式、首行文字缩进和空格处理方式等。 （4）“方框”属性 用来定义元素在页面上的放置方式，如元素的高度和宽度，元素内容与边框之间的间距，以及元素边框与另一元素之间的间距等。 （5）“边框”属性 用来定义元素周围的边框，如边框宽度、边框颜色和样式等。可以利用该属性定义带有特殊边线的表格或图像。 （6）“列表”属性 用来定义列表样式，如项目符号类型（可选择系统内置项目符号或将某个图像作为项目符号）、项目文字缩进程度等。 （7）“定位”属性 用于设置“APDiv”定位属性，项目八中将作详细介绍。 （8）“扩展”属性 对样式所控制的对象应用特殊效果，如可以为图片设置阴影或不透明度等。 【任务实施】 在学习了样式的基本知识后，下面为美容网站首页定义样式。该网站首页和一个子页已制作好，只需直接定义样式即可。该首页样式的定义分五部分来完成。 （一）设置“body”样式 所谓“body”样式，就是为“body”标签设置样式，也就是前面所讲的标签样式，这是最常用的一种样式。 步骤1 在开始操作之前将本项目素材中的“cosmetic”文件夹拷贝至本地磁盘，并在 Dreamweaver 中定义站点“cosmetic”。打开其中的“index.html”文档，单击“CSS样式”面板下方的“新建 CSS 规则”按钮，打开“新建 CSS 规则”对话框。 步骤2 在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”，在“定义在”列表区选择“新建样式表文件”，然后单击“确定”按钮。 步骤3 打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在“文件名”编辑框中输入文件名“s1”，然后单击“保存”按钮。 步骤4 打开“body 的 CSS 规则定义”对话框，在“分类”列表中选择“类型”，在“大小”下拉列表中选择“12”，在“行高”编辑框中输入“20”，在“修饰”选项区中选择“无”复选框，设置颜色为灰色“#999999”。 步骤5 在左侧的“分类”列表中选择“方框”，在“边界”区域“上”编辑框中输入“0”，则下方的所有值都变为“0”。 步骤6 在“body 的 CSS 规 则 定 义” 对 话 框 中 单 击“确 定” 按 钮， 则“CSS 样式”面板中生成“body”样式，并且网站主页已自动套用刚设置的 样式。保存网页文档和样式表文件，并按 F12 键预览。