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

1第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标签进行重新定义和扩展，甚至创建自己的特效。默认2情况下，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图3-36面板菜单从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。图3-37“文本/CSS样式”菜单4图3-38在页面弹出式菜单中操作CSS样式2．定义样式表选项启动新建样式表后会打开如图3-39所示的“新建CSS样式”对话框。图3-39新建CSS样式对话框在该对话框中有两个选项：“选择器类型”和“定义在”，用于定义样式表选项。其中“选择器类型”用于指定不同的CSS样式的类型，其下各选项功能如下：类（可应用于任何标签）：由用户创建应用于文本范围或文本块的自定义样式，在样式表中自定义的样式可以在整个HTML中被多次调用。选择此类型后，需要在上方的“名称”中填入一个样式名字，需要注意的是，此类名称必须以“．”开头，如果用户没有输入开头的句点，Dreamweaver将自动输入。标签（重新定义特定标签的外观）：重定义特定HTML标签的默认格式，使用该选项我们可以对诸如段落标签p、单元格标签td、水平线标签hr等样式进行重定义，以使其符合我们的设计要求。高级（ID、上下文选择器等）：为具体某个标签组合或所有包含特定Id属性的标签定义格式，在此可对链接的不同状态进行设置。“定义在”选项用于指定CSS样式的应用范围。其中“新建样式表文件”选项将会5把设定的样式保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使用。“仅用该文档”选项把设定的样式仅仅放在当前文件的头文件中，这些样式只能在此文件中使用。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所示。6图3-41设置样式参数单击“确定”按钮，这时在“CSS样式”面板可以看见新建的样式.f1。如图3-42所示。图3-42CSS样式面板中新建的样式在页面编辑区选取要应用的文本或者段落，在“CSS样式”面板中用鼠标右键单击要应用的样式名称.f1，在弹出的菜单中选择“套用”，则选中文本被应用了指定的样式。如图3-43所示。7图3-43被应用了新样式的文本2．外部CSS样式下面我们来制作一个12磅字的外部CSS样式，并应用样式。打开CSS样式面板的面板菜单，单击“新建CSS样式”按钮，弹出“新建CSS样式”对话框。在“名称”文本框中输入样式表名称，如.mystyle；在“选择器类型”选项选择“类”；“定义在”选项处选择“新建样式表文件”。单击“确定”按钮，即打开保存文件的对话框，如图3-44所示。输入外部样式文件名，如mycss，选择保存路径，单击“保存”按钮后弹出“CSS样式定义”对话框。图3-44保存外部CSS样式文件在“分类”列表框中选择“类型”选项，并在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗细”和“修饰”等，设置如图3-45所示。8图3-45设置样式参数单击“确定”按钮，一个外部CSS样式就做好了。这时在“CSS样式”面板可以看见新建的外部样式文件mycss，在“文件”面板中也可以看到该CSS文件。如图3-46和图3-47所示。图3-46CSS样式面板中新建的外部样式图3-47文件面板中显示外部样式链接“外部CSS样式表”文件。打开一个页面文档，在CSS样式面板中单击“附加样式表”按钮，如图3-48所示，就会弹出“链接外部样式表”对话框。9图3-48CSS样式面板中的“附加样式表”按钮在弹出“链接外部样式表”对话框中，点击“浏览”按钮，选择需要的外部CSS样式表文件，然后点击“确定”按钮。如图3-49所示。图3-49“链接外部样式表”对话框这时在CSS样式面板中可以看到附加到该文档的外部样式。选中要应用样式的文字或段落，用鼠标在外部样式名上单击右键，在弹出的菜单中选择“套用”命令，如图3-50所示。这时可看到选择的文字被应用了该样式。图3-50套用外部CSS样式3．“仅对该文档的CSS”转换成“外部CSS样式表”在Dreamweaver中可以把文档中的CSS样式导出成为一个独立的外部CSS样式表文件。10方法如下：在“CSS样式面板”中选择要导出的样式，如.f1，单击鼠标右键，在弹出的菜单中选择“导出”命令，或执行“文件/导出/CSS样式”命令，即打开“导出样式为CSS文件”对话框。如图3-51所示。在“文件名”处输入CSS样式文件名，如myfont，选择存放文件的路径。单击“保存”按钮，则完成导出样式操作。4．“外部CSS样式表”转换成“仅对该文档的CSS”同样可以把一个独立的外部CSS样式表文件转化为文档中的CSS样式。方法如下：双击打开外部CSS样式表文件，在样式表的开头添加styletype=text/css结尾添加/style，把整个CSS代码复制到一个文档的/head前面。这时可看见“CSS样式面板中”出现该样式。图3-51导出样式为外部CSS文件3.7.3定义链接的各种状态Dreamweaver默认的文字链接是蓝色加下划线的宋体字，文字的字体很大，应用到页面时显得非常不美观。但我们浏览页面时，看到的链接形式都不是这种样式，而是与页面风格十分协调的好看的链接。通常设计精良的网站，都会通过CSS样式更改链接样式，以使页面看起来更美观、更清晰。定义链接样式时，需定义链接的各种状态，即定义锚标签a的如下各种状态：“a:link”（没有接触过的链接）：用于定义链接的常规状态。如果希望网站中的各种链接都相同，就只需要定义这种链接状态。这种链接状态是基本的，制作网站至少要定义这种链接。“a:hover”（鼠标放在链接上的状态）：用于定义鼠标放在链接上时产生的视觉效果。鼠标放到一个链接上，链接就会产生变化，当鼠标离开这个链接时，这种状态的链接就消失，多用于讲究视觉效果的网站。“a:visited”（访问过的链接）：设置该链接可以方便用户阅读文章，a:visited”链接状态的颜色要和普通文本链接的其它状态颜色不同，这样读者就能清楚的判断哪些是已经访问过的链接，哪些是没有访问过的链接。11“a:active”（在链接上按下鼠标时的状态）：用于表现鼠标按下时的链接状态。在实际应用中并不十分强调这种链接状态，如果没有特别的需要，可以定义成与“a:link”状态或者“a:hover”状态是一样的。下面通过实例，让大家了解各种链接的状态以及