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

课程教案授课内容项目七制作美容网站一一应用样式表授课班级授课学时 16课时教学方法与手段讲授法、演示法、讨论法。多媒体教学项目内容本项目的工作内容是为某美容公司建立公司网站，该美容公司主要有基础护理系列、美白保湿系列、控油除痘系列、面膜护理系列等几大类产品；针对的消费者主要是中高端的时尚年轻人。 网站的功能需求有：达到品牌宣传效果、实现在线订单功能、提供会员后台服务。具体的制作要求是：.整体风格高雅、年轻、时尚，色调淡雅、飘逸；.能体现出公司健康、安全、有效的理念；.提供首页和1张二级页面；.在线订单及会员页面达到基本要求即可；.美，要求较高，网页设计强调时尚感。教学目标学生通过本项目的学习，能：1、理解并熟悉样式的类型2、熟练掌握样式的创建方法3、掌握外部样式的使用4、理解并掌握CSS滤镜的使用教学重点与难点教学重点：创建样式教学难点：编辑和应用外部样式项目效果【任务一】为网站首页设置样式一一样式表的基本应用样式表是一个非常灵活的工具，使用它可以将所有有关文档的样式保存在

一个样式文件中。当需要给大量网页定义同样的样式时，只要将样式文件链接到各个网页即可，而不必再把繁杂的样式编写在每个文档结构中。（一）熟悉"CSS样式”面板在DreamweaverCS3中，可以借助"CSS样式”面板来新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”一"CSS样式”菜单，可打开“CSS样式”面板。交1天在I电而可以用用下节前通抨模式-13-■linkL«h阡*r■湃*卜・■战新冰郭种类瑁的口尚式将扑群广式文件储接刮当的文档或嚼H中的「“样技导人例制前更档埔却诙定的c新冰郭种类瑁的口尚式将扑群广式文件储接刮当的文档或嚼H中的「“样技导人例制前更档埔却诙定的c部样式制鸵选定的样式（二）CSS羊式的存在方式CSS样式以外部和内嵌两种方式存在于网页中：外部CSS样式表：为增强CSS样式的通用性，可以创建扩展名为“.css”的样式表文件。利用“CSS样式”面板可将该文件链接至站点中的一个或多个网页中，从而使用户可以直接应用其中定义的样式。内部（或嵌入式） CSS样式表：是一系列包含在 HTML文档head部分style标签内的CSS样式。小提示：与HTML文件一样，CSS样式表文件也是一个文本文件，既可以直接使用Dreamweaver来创建它，也可以使用"记事本”等文本编辑器来编写。（三）CSS羊式的分类根据应用对象的不同， CSS样式被分为以下三类。.类样式类样式又称自定义样式，它是唯一可应用于文档中任何对象的 CSS样式类型，主要用于定义一些特殊的样式。例如，可为网页中的列表项定义样式。对于类样式而言，当修改了所选文本的字体、大小、颜色等属性后，Dreamweaver会自动创建相应的内部样式。此外，也可以使用“ CSS样式”面板来直接创建类样式和其他两种样式。

.标签样式用来重定义HTML标签的样式。例如，定义table标签样式后，网页中所有表格都将自动应用该样式。又如，一旦定义了 body样式，则网页将自动按照定义的body样式更新。.选择器样式选择器样式又称高级样式，它主要用来定义链接文本的样式，也可用来重定义特定标签组合的样式。例如，每当h2标题出现在表格单元格内时都会生成tdh2标签组合。因此，如果定义了 tdh2标签组合样式，则它将影响文档中的全部tdh2标签组合。选择器样式还可重定义包含特定 id属性的所有标签的格式。例如，#myStyle样式将应用于所有包含属性 id="myStyle"的标（四）创建样式的一般步骤步骤1在“CSS样式”面板中单击“新建CSS规则”按钮，打开“新建CSS规则”对话框。步骤2在“选择器类型”区选择要创建的 CSS类型。要创建可作为class属性应用于任何对象的样式， 应选择“类（可应用于任何标签）”，然后在“名称”编辑框中输入样式名称。如果要定义标签样式，应选择“标签”，然后在“标签”下拉列表中选择一个标签。如果要定义链接或标签组合样式，应选择“高级” ，然后在“选择器”编辑框中输入一个或多个HTML标签，或在“选择器”下拉列表中选择一个标签（包括a:active、a:hover、a:link和a:visited）。步骤3在“定义在”选项组中指定保存样式的位置。要创建外部样式表，可在“定义在”下拉列表中选择“新建样式表文件” ；要将新建样式保存在当前站点中的现有样式表文件中，可在“定义在”下拉列表中选择样式表文件；要在当前文档中嵌入样式，可选择“仅对该文档”单选按钮。步骤4单击“确定”按钮。如果在步骤3中选择了“新建样式表文件”选项，系统将首先打开 “保存样式表文件为“对话框。用户可利用该对话框设置样式表文件的保存位置和名称。单击“保存”按钮。如果在步骤3中选择了“仅对该文档”选项，则Dreamweaver将直接打开“xxx的CSS规则定义”对话框。步骤5在“CSS规则定义”对话框左侧的“分类”列表区选择不同分类，可设置样式的不同属性。最后单击“确定”按钮即可。CSS样式的主要属性如下：“类型”属性用来定义字体、大小、粗细、样式、行高、大小写、颜色等，主要针对网页中的文本。“背景”属性用来定义“背景”属性，可以对网页中的任何元素应用“背景”属性，还可以设置背景图像的位置。“区块”属性这类属性用来定义文字的排列方式，包括单词间距、字母间距、垂直对齐方式、文本对齐方式、首行文字缩进和空格处理方式等。“方框”属性用来定义元素在页面上的放置方式，如元素的高度和宽度，元素内容与边框之间的间距，以及元素边框与另一元素之间的间距等。“边框”属性用来定义元素周围的边框，如边框宽度、边框颜色和样式等。可以利用该属性定义带有特殊边线的表格或图像。“列表”属性用来定义列表样式，如项目符号类型(可选择系统内置项目符号或将某个图像作为项目符号)、项目文字缩进程度等。“定位”属性用于设置“APDiv”定位属性，项目八中将作详细介绍。“扩展”属性对样式所控制的对象应用特殊效果， 如可以为图片设置阴影或不透明度等。【任务实施】在学习了样式的基本知识后，下面为美容网站首页定义样式。该网站首页和一个子页已制作好，只需直接定义样式即可。该首页样式的定义分五部分来完成。(一)设置“body”样式所谓“body”样式，就是为“body”标签设置样式，也就是前面所讲的标签样式，这是最常用的一种样式。步骤1在开始操作之前将本项目素材中的“ cosmetic”文件夹拷贝至本地磁盘，并在Dreamweaver中定义站点“cosmetic”。打开其中的"index.html”文档，单击“CSS样式”面板下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。

步骤2在“选择器类型”区选择“标签”，在“标签”下拉列表中选择“body”,在“定义在”列表区选择“新建样式表文件” ，然后单击“确定”按钮。步骤3打开“保存样式表文件为”对话框，在“保存在”下拉列表中选择网站根文件夹，在“文件名”编辑框中输入文件名、1”，然后单击“保存”按钮。步骤4打开“body的CSS规则定义”对话框，在“分类”列表中选择“类型”，在“大小”下拉列表中选择“12”，在“行高”编辑框中输入“20”，在“修饰”选项区中选择“无”复选框，设置颜色为灰色" #999999”。步骤5在左侧的“分类”列表中选择“方框” ，在“边界”区域“上”编辑框中输入“0”，则下方的所有值都变为“ 0”。Mt* 她」［一聊 ।期管步骤6在“body的CSS规则定义”对话框中单击“确定”按钮,则“CSS样式”面板中生成“body”样式，并且网站主页已自动套用刚设置的样式。保存网页文档和样式表文件，并按F12键预览。（二）设置边框样式步骤1继续在前面的文档中操作，单击“CSS样式”面板下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。步骤2在“选择器类型”区选择“类”，在“名称”编辑框中输入“t1”，在“定义在”列表区选择前面创建的样式文件 “sl.css”，然后单击“确定”按钮。步骤3打开“.t1的CSS规则定义”对话框，在“分类”列表中选择“边框”，取消选择“样式”“宽度”和“颜色”列表区的“全部相同”复选框，在“样式”列表区“上”下拉列表中选择“实线”，在“宽度”列表区“上”编辑框中输入1,在“颜色”列表区“上”编辑框中设置颜色为白色"#FFFFFF’，然后单击“确定”按钮。步骤4在“巴掌小脸专题”所在图片上单击，按键盘上的向右方向键，将插入点置于单元格中，然后在“属性”面板上“样式”下拉列表中选择“t1”，设置单元格中¥式为“t1”。

步骤5按照同样的方法，设置下方几个单元格样式。（三）设置列表样式步骤1继续在前面的文档中操作，单击“CSS样式”面板下方的“新建CSS规则”按钮，打开“新建CSS规则”对话框。步骤2在“选择器类型”区选择“类”，在“名称”编辑框中输入“11”，在“定义在”列表区选择前面创建的样式文件 “sl.css”，然后单击“确定”按钮。步骤3打开“.11的CSS规则定义”对话框，设置“大小”为12像素，“行高”为20像素，“修饰”为“无”，颜色为白色"#fffffF'。步骤4在“分类”列表区选择“列表”选项，然后单击“项目符号图像”编辑框右侧的“浏览”按钮，打开“选择图像源文件”对话框，在“查找范围”下拉列表中选择图像文件所在文件夹，在文件列表中选择图像文件，然后单击“确定”按钮。步骤5回到“.11的CSS规则定义”对话框，在“位置”下拉列表中选择“外”，然后单击“确定”按钮。

川物而 一瀛 ■i而面―步骤6首先将“公告信息”中的内容分段，然后选中分段后的内容，并单击“属性”面板上的“项目列表”按钮，将文本设置为项目列表形式。步骤7选中应用项目列表的内容，在“属性”面板上的“样式”下拉列表中选择“11”，对项目列表应用前面设置的样式，保存网页文档和样式文件，并按F12键预览。（四）设置链接样式默认情况下，网页中的链接文本为蓝色且有下划线，这里需要设置文本在默认状态下为白色，而在鼠标经过时为浅紫色。步骤1继续在前面的文档中操作。首先为前面设置的项目文字中日期左侧的文本设置链接，然后打开“新建CSS规则”对话框。步骤2在“选择器类型”区选择“高级”单选钮，在“选择器”下拉列表中选择"a：link”，在“定义在”列表区选择样式文件“sl.css”，然后单击“确定”按钮。TOC\o"1-5"\h\z感*郭二型*同1施附于性偏林性）on .矍原式只稀宗书美的H包1斤；,高用（口卜的为道川*尊1慎1 '一——融*兴农：* »■0位时皿档 帮加步骤3打开“a：link的CSS规则定义”对话框，在“修饰”选项区选择“无”复选框，设置“颜色”为白色"#fffffF’，然后单击“确定”按钮。★匕骑 -产 唱期归w ft#廊 -朽小耳斯 *1j»OI/TWMrtJi £2r上网城筋IVWUd）1—I !ripLjwlJL—n」步骤4再次打开“新建CSS规则”对话框，在“选择器类型”区选择“高级”单选钮，在“选择器”下拉列表中选择“a:visited”，其余同上，然后单击“确定”按钮。…叫一「一iisasa以同住用于传属曲娄〕点廿 匚瓯-然壁景晶宣片组1扑双：口） ' ',林杂tR、他工选u号蒋1w 3消i_™一步骤5打开“a:visited的CSS规则定义”对话框，在“修饰”选项区选择“下划线”复选框，设置“颜色”为白色" #fffffF’，然后单击“确定”按钮。步骤6参照上面的方法，打开“a:hover的CSS规则定义”对话框。在“修饰”选项区选择“下划线”复选框，设置“颜色”为浅紫色“#E1CCE8,然后单击“确定”按钮。

步骤7回到网页文档，可以看到链接文本自动套用了刚才设置的样式。保存网页文档和样式文件，并按 F12键预览文档，当将光标置于链接文本上方时,文本颜色变为浅紫色。（五）设置第2种链接样式为将文本右侧的日期与文本区分开来，可为日期设置不同于文本的链接样式。步骤1继续在前面的文档中操作，依次为项目文字中右侧的日期设置链接。打开“新建CSS规则”对话框，在“选择器类型”区选择“高级”单选钮；在“选择器”下拉列表中选择“a：link”，并在其左侧输入“.m”；在“定义在”列表区选择“仅对该文档”，然后单击“确定”按钮。步骤2打开“.ma：link的CSS规则定义”对话框，在“修饰”选项区选择“无”复选框，设置颜色为浅紫色“ #CBACEF,然后单击“确定”按钮。

步骤3按照同样的方法，打开“.ma:visited的CSS规则定义”对话框，在“修饰”选项区选择“无”复选框，设置颜色为浅紫色“#CBACEF。步骤4按照同样的方法，打开“.ma:hover的CSS规则定义”对话框，在“修饰”选项区选择“下划线”复选框，设置颜色为白色" #fffffF'。步骤5拖动鼠标选中第1行中的日期，然后在“属性”面板上的“样式”下拉列表中选择"mao步骤6参照上面的方法，为下面两行中的日期设置同样的样式。最后保存文档和样式文件，并按F12键在浏览器中预览文档。

【任务二】为网站子页设置样式一一样式表的高级应用（一）、附加外部样式如果网站中多个网页文档用到了同一个样式，可以将该样式保存在外部样式文件中，然后将样式文件链接至各个网页文档，就可以对各文档应用该样式了。步骤1在Dreamweaver中打开本项目素材"lily"文件夹下的“pro1_b.html”文档。步骤2单击“CSS样式”面板下方的“附加样式表”按钮，打开“链接外部样式表”对话框，单击“文件/URL”编辑框后的“浏览”按钮。步骤3打开“选择样式表文件”对话框，在“查找范围”下拉列表中选择样式文件所在文件夹（此处为“lily”站点下的“style”文件夹），在文件列表中单击选择样式文件（此处为“ s2”），然后单击“确定”按钮。步骤4回到“链接外部样式表”对话框，在“添加为”列表区选择“链接”单选钮，然后单击“确定”按钮。

步骤5在“CSS样式”面板中可看到刚才链接的样式。切换至代码视图，可看到链接样式的代码。步骤6保存文档并按F12键预览网页，可以看到网页中的文本自动套用了“s2.css”中的样式。（二）、CSS^镜简介应