《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)

第10讲布局技术之二—Div+CSS（二）
1.1教学目标：
◆知识目标
1.理解CSS盒子模式。

2.掌握CSS规则设置方法。

◆技能目标
能够理解Div+CSS所体现的表现和内容相分离特性。

◆品质目标
培养学生认真细致、踏实进取的精神
1.2教学重点：
1.掌握CSS规则设置方法
1.3 教学难点
理解CSS规则的作用。

1.4教学方法：讲练结合，任务驱动、分子任务操练
1.5课时安排：2课时
1.6教学对象分析：
这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情况上，培养学生较好的专业基础与创新创作意识。

1.7教学过程：
一、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标签的默认格式，使用该选项我们可以对诸如段落标签<p>、单元格标签<td>、水平线标签<hr>等样式进行重定义，以使其符合我们的设计要求。

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

●“定义在”选项用于指定CSS样式的应用范围。

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

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

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

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

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

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

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

图3-40 CSS编辑器
1．使用“仅对该文档”的CSS样式表
下面我们来建立一个简单的也是最基本的文本样式——9磅字文本样式，并应用样式。

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

打开CSS样式面板的面板菜单，单击“新建CSS样式”按钮，弹出“新建CSS样式”对话框。

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

然后单击“确定”按钮。

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

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

图3-41 设置样式参数
单击“确定”按钮，这时在“CSS样式”面板可以看见新建的样式.f1。

如图3-42所示。

图3-42 CSS样式面板中新建的样式
在页面编辑区选取要应用的文本或者段落，在“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-46 CSS样式面板中新建的外部样式
图3-47 文件面板中显示外部样式
链接“外部CSS样式表”文件。

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

图3-48 CSS样式面板中的“附加样式表”按钮
在弹出“链接外部样式表”对话框中，点击“浏览”按钮，选择需要的外部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样式表文件，在样式表的开头添加<style type="text/css">结尾添加</style>，把整个CSS代码复制到一个文档的</head>前面。

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

1.8归纳总结：
本讲主要介绍了样式表的新建和设置，希望同学们能灵活使用样式表并运用到自己的网页设计中去。

1.9课后作业题：
1.CSS样式表的作用？
2.如何新建CSS样表？
3.如何设置样式表？。