《网页设计与制作》教案-第17讲 使用CSS美化网页一

第17讲使用CSS美化网页一

1.1教学目标：

◆知识目标

1.熟练掌握CSS样式表的创建与编辑。

2.掌握CSS样式表的基本语法和定义位置。

3.理解CSS样式表的标签样式、高级样式、类样式的定义方法。

◆技能目标

1.能合理创建和管理样式表文件，在网页设计中能够灵活利用CSS样式对页

面元素变换不同的视觉效果

◆品质目标

培养学生认真细致、踏实进取的精神

1.2教学重点：

1.掌握CSS样式表的创建与编辑。

2.掌握CSS样式表的基本语法和定义位置。

1.3 教学难点

1.理解CSS样式表的标签样式、高级样式、类样式的定义方法。

1.4教学方法：讲练结合，任务驱动、分子任务操练

1.5课时安排：2课时

1.6教学对象分析：

这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：

一、激趣导入，揭示课题

对于一个网站的多个页面文件，经常出现布局一致的情况，甚至网页的一些部分是完全相同的，比如导航栏、标题栏等，利用Dreamweave中的模板可以方便快捷地创建大量风格统

一、布局一致的网页，运用方便灵活的库文件，可省去设计者大量的重复工作。

二、使用样式表

在Internet的汪洋大海之中，怎样才能使自己的页面独树一帜？怎样使自己的页面保持统一的风格？怎样免除众多HTML标志属性设置的烦恼？Dreamweaver中的CSS（层叠样式表）可以使我们很方便地完成页面风格的设置。利用CSS不仅可以控制一篇文档中的文本格式，而且可以控制多篇文档的文本格式。因此使用CSS样式表定义页面文字，将会使设计制作工作量大大减小。一些好的CSS样式表的建立，使我们可以更进一步地对页面进行美化，对文本格式进行精确定制。

什么是样式表？样式表的英文缩写为CSS，即Cascading Style Sheet（层叠样式表）的缩写，我们又常称这为风格样式单Style Sheet，顾名思义，是用来进行页面风格设计的。比如，想让链接文字未点击时是蓝色的，当鼠标移上去时，链接文字变成红色的且带下划线，这就是一种风格。通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。CSS样式可以看作是对HTML语言功能的一种扩展。很多时候HTML语言的功能是有限的，举一个例子来说。在HTML语言中，字号（Size）设置只有7种，无法像Word一样采取熟悉的磅值。使用了样式表，就可以对一些HTML标签进行重新定义和扩展，甚至创建自己的特效。默认

情况下，Dreamweaver使用CSS（层叠样式表）设置文本格式。

早期创建CSS需要有专门的知识，需要直接编写样式表文件。如今，Dreamweaver使得这项工作可以在一个统一的界面中进行，通过简单的操作即可完成创建、修改、添加等样式表功能。这些设置可以影响到任何事物，从普通的文本布局到复杂的多媒体文件控制。利用Dreamweaver，用户不需要了解CSS烦琐的语法，就可以创建出具有专业水准的CSS样式表。不仅如此，Dreamweaver还能够识别现存文档中已定义的CSS样式，方便用户对现有文档进行修改。

3.7.1 CSS样式基本操作

1．样式表的操作途径

我们可以通过三种途径来创建、编辑CSS样式。

从主菜单选择“窗口/CSS样式”即可打开样式面板，如图3-35所示。

图3-35 CSS样式面板

在CSS样式面板的右下角有四个功能按钮，分别为：

●附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前文档中的外部样式表。

●新建CSS样式：打开“新建CSS 样式”对话框，创建新样式。

●编辑样式表：打开“CSS 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。

●删除CSS样式：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元素中删除格式。

单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。通过该菜单，可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。

图3-36 面板菜单

从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。

在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。

不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。

图3-37 “文本/CSS样式”菜单

图3-38 在页面弹出式菜单中操作CSS样式

2．定义样式表选项

启动新建样式表后会打开如图3-39所示的“新建CSS样式”对话框。

图3-39 新建CSS样式对话框

在该对话框中有两个选项：“选择器类型”和“定义在”，用于定义样式表选项。其中“选择器类型”用于指定不同的CSS样式的类型，其下各选项功能如下：

●类（可应用于任何标签）：由用户创建应用于文本范围或文本块的自定义样式，在样式表中自定义的样式可以在整个HTML中被多次调用。选择此类型后，需要在上方的“名称”中填入一个样式名字，需要注意的是，此类名称必须以“．”开头，如果用户没有输入开头的句点，Dreamweaver将自动输入。

●标签（重新定义特定标签的外观）：重定义特定HTML标签的默认格式，使用该选项我们可以对诸如段落标签

、单元格标签、水平线标签

---

等样式进行重定义，以使其符合我们的设计要求。

●高级（ID、上下文选择器等）：为具体某个标签组合或所有包含特定Id属性的标签定义格式，在此可对链接的不同状态进行设置。

●“定义在”选项用于指定CSS样式的应用范围。其中“新建样式表文件”选项将会