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

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

《《网页设计与制作》教案第17讲 使用CSS美化网页一.docx》由会员分享，可在线阅读，更多相关《《网页设计与制作》教案第17讲 使用CSS美化网页一.docx（18页珍藏版）》请在冰豆网上搜索。

《网页设计与制作》教案第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，即CascadingStyleSheet（层叠样式表）的缩写，我们又常称这为风格样式单StyleSheet，顾名思义，是用来进行页面风格设计的。

比如，想让链接文字未点击时是蓝色的，当鼠标移上去时，链接文字变成红色的且带下划线，这就是一种风格。

通过设立样式表，我们可以统一地控制HMTL中各标志的显示属性。

CSS样式可以看作是对HTML语言功能的一种扩展。

很多时候HTML语言的功能是有限的，举一个例子来说。

在HTML语言中，字号（Size）设置只有7种，无法像Word一样采取熟悉的磅值。

使用了样式表，就可以对一些HTML标签进行重新定义和扩展，甚至创建自己的特效。

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

早期创建CSS需要有专门的知识，需要直接编写样式表文件。

如今，Dreamweaver使得这项工作可以在一个统一的界面中进行，通过简单的操作即可完成创建、修改、添加等样式表功能。

这些设置可以影响到任何事物，从普通的文本布局到复杂的多媒体文件控制。

利用Dreamweaver，用户不需要了解CSS烦琐的语法，就可以创建出具有专业水准的CSS样式表。

不仅如此，Dreamweaver还能够识别现存文档中已定义的CSS样式，方便用户对现有文档进行修改。

3.7.1CSS样式基本操作

1．样式表的操作途径

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

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

图3-35CSS样式面板

在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样式的应用范围。

其中“新建样式表文件”选项将会把设定的样式保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使用。

●“仅用该文档”选项把设定的样式仅仅放在当前文件的头文件中，这些样式只能在此文件中使用。

3．CSS编辑器

在“新建CSS样式”对话框中设置好选项，并单击“确定”按钮保存新的CSS文件后，即弹出“CSS样式定义”对话框，如图3-40所示。

在此用户可以详细定制样式的格式，我们称之为“CSS编辑器”。

在CSS编辑器中可以定义包括许多类型的格式，如文本、背景、边框等。

3.7.2“仅对该文档”和“外部”CSS样式表

如前所述，在“新建CSS样式”对话框中的“定义在”选项是用来指定样式的作用范围的，若选择“仅对该文档”，则新建的样式只应用于当前文档，随着该文档的关闭而关闭，所以不能应用于其他任何文档；若选择“新建样式表文件”将建立一个外部CSS样式表，新建的样式以文件的形式保存在当前文档之外，这种外部CSS样式表文件可以被应用到本站点的任何文件。

下面我们来介绍这两种样式的创建。

图3-40CSS编辑器

1．使用“仅对该文档”的CSS样式表

下面我们来建立一个简单的也是最基本的文本样式——9磅字文本样式，并应用样式。

9磅字是页面中常用的文本样式。

打开CSS样式面板的面板菜单，单击“新建CSS样式”按钮

，弹出“新建CSS样式”对话框。

在“名称”文本框中输入样式表名称，如.f1；在“选择器类型”选项选择“类”；“定义在”选项处选择“仅对该文档”。

然后单击“确定”按钮。

在弹出的“CSS样式定义”对话框中的“分类”列表框中选择“类型”选项。

在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗细”和“修饰”等，设置如图3-41所示。

图3-41设置样式参数

单击“确定”按钮，这时在“CSS样式”面板可以看见新建的样式.f1。

如图3-42所示。

图3-42CSS样式面板中新建的样式

在页面编辑区选取要应用的文本或者段落，在“CSS样式”面板中用鼠标右键单击要应用的样式名称.f1，在弹出的菜单中选择“套用”，则选中文本被应用了指定的样式。

如图3-43所示。

图3-43被应用了新样式的文本

2．外部CSS样式

下面我们来制作一个12磅字的外部CSS样式，并应用样式。

打开CSS样式面板的面板菜单，单击“新建CSS样式”按钮

，弹出“新建CSS样式”对话框。

在“名称”文本框中输入样式表名称，如.mystyle；在“选择器类型”选项选择“类”；“定义在”选项处选择“新建样式表文件”。

单击“确定”按钮，即打开保存文件的对话框，如图3-44所示。

输入外部样式文件名，如mycss，选择保存路径，单击“保存”按钮后弹出“CSS样式定义”对话框。

图3-44保存外部CSS样式文件

在“分类”列表框中选择“类型”选项，并在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗细”和“修饰”等，设置如图3-45所示。

图3-45设置样式参数

单击“确定”按钮，一个外部CSS样式就做好了。

这时在“CSS样式”面板可以看见新建的外部样式文件mycss，在“文件”面板中也可以看到该CSS文件。

如图3-46和图3-47所示。

图3-46CSS样式面板中新建的外部样式

图3-47文件面板中显示外部样式

链接“外部CSS样式表”文件。

打开一个页面文档，在CSS样式面板中单击“附加样式表”按钮，如图3-48所示，就会弹出“链接外部样式表”对话框。

图3-48CSS样式面板中的“附加样式表”按钮

在弹出“链接外部样式表”对话框中，点击“浏览”按钮，选择需要的外部CSS样式表文件，然后点击“确定”按钮。

如图3-49所示。

图3-49“链接外部样式表”对话框

这时在CSS样式面板中可以看到附加到该文档的外部样式。

选中要应用样式的文字或段落，用鼠标在外部样式名上单击右键，在弹出的菜单中选择“套用”命令，如图3-50所示。

这时可看到选择的文字被应用了该样式。

图3-50套用外部CSS样式

3．“仅对该文档的CSS”转换成“外部CSS样式表”

在Dreamweaver中可以把文档中的CSS样式导出成为一个独立的外部CSS样式表文件。

方法如下：

在“CSS样式面板”中选择要导出的样式，如.f1，单击鼠标右键，在弹出的菜单中选择“导出”命令，或执行“文件/导出/CSS样式”命令，即打开“导出样式为CSS文件”对话框。

如图3-51所示。

在“文件名”处输入CSS样式文件名，如myfont，选择存放文件的路径。

单击“保存”按钮，则完成导出样式操作。

4．“外部CSS样式表”转换成“仅对该文档的CSS”

同样可以把一个独立的外部CSS样式表文件转化为文档中的CSS样式。

方法如下：

双击打开外部CSS样式表文件，在样式表的开头添加结尾添加，把整个CSS代码复制到一个文档的前面。

这时可看见“CSS样式面板中”出现该样式。

图3-51导出样式为外部CSS文件

3.7.3定义链接的各种状态

Dreamweaver默认的文字链接是蓝色加下划线的宋体字，文字的字体很大，应用到页面时显得非常不美观。

但我们浏览页面时，看到的链接形式都不是这种样式，而是与页面风格十分协调的好看的链接。

通常设计精良的网站，都会通过CSS样式更改链接样式，以使页面看起来更美观、更清晰。

定义链接样式时，需定义链接的各种状态，即定义锚标签a的如下各种状态：

●“a:

link”（没有接触过的链接）：

用于定义链接的常规状态。

如果希望网站中的各种链接都相同，就只需要定义这种链接状态。

这种链接状态是基本的，制作网站至少要定义这种链接。

●“a:

hover”（鼠标放在链接上的状态）：

用于定义鼠标放在链接上时产生的视觉效果。

鼠标放到一个链接上，链接就会产生变化，当鼠标离开这个链接时，这种状态的链接就消失，多用于讲究视觉效果的网站。

●“a:

visited”（访问过的链接）：

设置该链接可以方便用户阅读文章，a:

visited”链接状态的颜色要和普通文本链接的其它状态颜色不同，这样读者就能清楚的判断哪些是已经访问过的链接，哪些是没有访问过的链接。

●“a:

active”（在链接上按下鼠标时的状态）：

用于表现鼠标按下时的链接状态。

在实际应用中并不十分强调这种链接状态，如果没有特别的需要，可以定义成与“a:

link”状态或者“a:

hover”状态是一样的。

下面通过实例，让大家了解各种链接的状态以及创建的方法。

1．单击“CSS样式”面板右下角的“新建CSS样式”按钮，则打开“新建CSS样式”对话框。

在“类型”中选择“高级（ID、上下文选择器等）”，定义在“仅对该文档”。

如图3-52所示。

图3-52使用CSS选择器定义链接样式

2．点击“选择器”旁边的下拉按钮，弹出各种状态的锚标签。

选择“a:

link”标签。

如图3-53所示。

图3-53定义链接的各种状态

3．单击“确定”按钮，在弹出的对话框中定义字体为宋体，大小为12像素，修饰选择“无”以去掉下划线，行高为20像素，颜色为#333333灰色。

如图3-54所示。

图3-54定义“a:

link”标签样式

按F12键打开浏览器，可以看见原来默认的蓝色下划线文字链接已被改变。

4．重复1～2步，在“新建CSS样式”对话框的选择器处选择a:

hover标签。

定义字体为宋体，大小为12像素，行高为20像素，颜色为红色#FF3300。

这时可以看见在浏览器中，鼠标放在链接上面，链接变成红色。

5．同理选择“a:

active”标签，定义字体为宋体，大小为12像素，行高为20像素，修饰为“无”，颜色为灰色#999999。

定义好后按F12，可以看见在浏览器中，鼠标在链接上按上时，链接变成灰色。

注意：

在链接上按下时有虚线框。

如图3-55所示。

图3-55鼠标在链接上按下时的状态

6．同理选择“a:

visited”标签。

定义字体为宋体，大小为12像素，下划线为“无”，行高为20像素，颜色为黑色#000000。

在浏览器中点击链接，鼠标离开链接后，链接颜色就变成黑色。

注意：

如果是定义成外部CSS样式表文件，就需要把每种链接状态的定义都保存在同一个CSS文件里面，需要应用时，链接这个CSS文件就可以了。

3.7.4重定义HTML标签

在“新建CSS样式”对话框中的“选择器类型”中选择“标签（重新定义特定标签的外观）”选项后，就可以对页面中的HTML标签样式进行定义。

这个选项将使得文件中具有统一标签的所有内容使用相同的外观。

例如使所有的段落起始位置缩进两个字可以按照下面的方法重新定义

标签。

1．在“CSS样式”面板中单击“新建CSS样式”按钮，弹出“新建CSS样式”对话框。

在“选择器类型”中选择“标签（重新定义特定标签的外观）”选项，然后在“标签”处的下拉列表中选择

标签。

如图3-56所示。

2．单击“确定”按钮。

文字的大小等定义同上面的方法，而段落首行缩进可以按图3-57所示进行定义。

注意：

如果你的字体定义的大小为10pt，则这里的首行缩进可以定义为20pt既两个中文字。

由于所有的相同类型标签使用的样式相同，所以这种方式适合于大量的相同元素的样式定义，例如对页面中所有的段落统一字体、颜色、大小、行距、段首缩进。

图3-56重定义HTML标签

图3-57为

标签定义文字缩进

3.7.5管理样式表

如果对已建立的样式表还需要修改某些地方，或者想把不需要的样式表删掉，这时就需要对已有的样式表进行删除、修改、复制的操作。

1．修改样式表

在“CSS样式”面板中单击“编辑样式表”按钮

，如图3-58所示。

如果在“CSS样式”面板中没有选择任何样式，单击“编辑样式表”按钮后将弹出的“编辑样式表”对话框，列出所有样式文件，如图3-59所示。

选择一个样式表文件后单击“编辑”按钮，又会弹出一个对话框，列出该样式表文件下的所有样式，如图3-60所示。

图3-58CSS样式面板

图3-59“编辑样式表”对话框图3-60样式表文件对话框

在对话框中选择要编辑的样式，单击“编辑”按钮后就会打开“CSS样式定义”对话框。

如图3-61所示。

重新定义CSS样式，完成后单击“确定”按钮，将退回到“编辑样式表”对话框，单击“完成”按钮就完成了对样式的编辑。

注意：

如果编辑的是一个内部CSS样式，或直接在“CSS面板”中选择样式名后单击“编辑”按钮，将直接打开“CSS样式定义”对话框，而不会出现“编辑样式表”对话框。

同样，如果直接选择外部CSS样式表文件后单击“编辑”按钮，将直接打开该样式文件对话框，而不会出现“编辑样式表”对话框。

图3-61重新定义CSS样式

2．删除样式表

打开“CSS样式”面板，在面板中选择要删除的样式表，在面板中单击“删除”按钮

，或直接在键盘上按Delete键就可以将不需要的样式删除。

另外，也可在“编辑样式表”对话框中选择要删除的样式，单击“删除”按钮后删除。

如图3-62所示。

图3-62删除已有的样式

3．复制样式表

打开CSS样式面板，选择要复制的样式，然后单击鼠标右键，在弹出的CSS样式下拉样式列表中，选择其中的“重制”命令，此时弹出如图3-63所示的窗口，让您选择目标文件或者是建立新样式文件。

选择好目标文件后，单击“确定”按钮就完成了样式的复制。

图3-63重制CSS样式

另外，也可在如图3-62所示的“编辑样式表”对话框中选择要复制的样式，单击“重制”按钮后也可完成样式的复制。

一般来说，复制的样式表应为自定义的样式，当所需要的样式表与自定义的样式表在大部分样式上相同时，可以复制自定义的样式表，然后再加以修改得到需要的样式表。

而复制重新定义的标签和利用选择器创建的样式，因为定义的目标已明确了，所以复制无太大的意义。

1.8归纳总结：

本节介绍了对网页进行统一的一个有效工具——样式表，内容包括了从创建、管理到定制各种不同的样式表，可以根据自己的喜好设计自己的样式表并运用到自己的网页设计中去。

　①设置样式表类型；

　②设置背景；

　③复制样式表。

通过这节的学习我们对网页制作更深入了一步，还需要举一反三反复练习。

1.9课后作业题：

1.样式表的作用？

2.样式表类型？

3.如何应用样式表美化网页？