《262编号《网页设计与制作》教案-第10讲布局技术之二—Div+CSS(二)》由会员分享，可在线阅读，更多相关《262编号《网页设计与制作》教案-第10讲布局技术之二—Div+CSS(二)（10页珍藏版）》请在金锄头文库上搜索。
1、1 第 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 教学对象分析： 这个班学生具有基本专业技能，不仅仅是要教会他们方法，最重要的是教会他们的 规范的动手能力与各种事件多方法的灵活处理能力，在保证全班同学教学进度一致的情
2、 况上，培养学生较好的专业基础与创新创作意识。 1.7 教学过程： 一、CSS 样式基本操作 1样式表的操作途径 我们可以通过三种途径来创建、编辑CSS 样式。 从主菜单选择“窗口/CSS 样式”即可打开样式面板，如图3-35 所示。 图 3-35 CSS 样式面板 在 CSS 样式面板的右下角有四个功能按钮，分别为： 附加样式表：用于打开“链接外部样式表”对话框，选择要链接到或导入到当前 文档中的外部样式表。 新建 CSS 样式：打开“新建CSS 样式”对话框，创建新样式。 编辑样式表：打开“ CSS 样式定义”对话框。编辑当前文档或外部样式表中的任 何样式。 2 删除 CSS 样式：删除“
3、 CSS 样式”面板中的所选样式，并从应用该样式的所有元 素中删除格式。 单击 CSS 样式面板右上角的菜单按钮，可以显示如图3-36 所示的面板菜单。 通过该菜 单，可以完成对CSS 样式面板的大部分控制。在CSS 样式面板的列表区域中单击鼠标右键， 也可以打开同样的菜单。 图 3-36 面板菜单 从主菜单选择“文本/CSS 样式”命令，选择“新建”也可启动“新建样式表”对话框， 如图 3-37 所示。 在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如 图 3-38 所示。 不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编 辑样式表、链
4、接样式表和导出样式表。 3 图 3-37 “文本 /CSS 样式”菜单 图 3-38 在页面弹出式菜单中操作CSS样式 2定义样式表选项 启动新建样式表后会打开如图3-39 所示的“新建CSS 样式”对话框。 4 图 3-39 新建 CSS样式对话框 在该对话框中有两个选项：“选择器类型”和“定义在”，用于定义样式表选项。其中 “选择器类型”用于指定不同的CSS 样式的类型，其下各选项功能如下： 类（可应用于任何标签）：由用户创建应用于文本范围或文本块的自定义样式，在 样式表中自定义的样式可以在整个HTML中被多次调用。选择此类型后，需要在上方的“名 称”中填入一个样式名字，需要注意的是，此类
5、名称必须以“”开头，如果用户没有输入 开头的句点，Dreamweaver 将自动输入。 标签（重新定义特定标签的外观）：重定义特定HTML 标签的默认格式，使用该选项 我们可以对诸如段落标签、单元格标签、水平线标签 等样式进行重定义，以使其 符合我们的设计要求。 高级 （ID、上下文选择器等） ：为具体某个标签组合或所有包含特定Id 属性的标签定 义格式，在此可对链接的不同状态进行设置。 “定义在”选项用于指定CSS 样式的应用范围。其中“新建样式表文件”选项将会 把设定的样式保存在一个外部单独的样式表文件中，这个样式表文件可以被其他文件共同使 用。 “仅用该文档”选项把设定的样式仅仅放在当前
6、文件的头文件中，这些样式只能在 此文件中使用。 3CSS编辑器 在“新建CSS 样式”对话框中设置好选项，并单击“确定”按钮保存新的CSS 文件后， 即弹出“ CSS 样式定义”对话框，如图3-40 所示。在此用户可以详细定制样式的格式，我们 称之为“ CSS 编辑器”。 在 CSS 编辑器中可以定义包括许多类型的格式，如文本、背景、边框等。 二、仅对该文档”和“外部”CSS 样式表 如前所述，在“新建CSS 样式”对话框中的“定义在”选项是用来指定样式的作用范围 的，若选择“仅对该文档”，则新建的样式只应用于当前文档，随着该文档的关闭而关闭，所 以不能应用于其他任何文档；若选择“新建样式表文
7、件”将建立一个外部CSS 样式表，新建 的样式以文件的形式保存在当前文档之外，这种外部CSS样式表文件可以被应用到本站点的 任何文件。下面我们来介绍这两种样式的创建。 5 图 3-40 CSS编辑器 1使用“仅对该文档”的CSS样式表 下面我们来建立一个简单的也是最基本的文本样式9 磅字文本样式，并应用样式。9 磅字是页面中常用的文本样式。 打开 CSS 样式面板的面板菜单，单击“新建CSS 样式”按钮，弹出“新建CSS 样式” 对话框。 在“名称”文本框中输入样式表名称，如.f1；在“选择器类型”选项选择“类”；“定 义在”选项处选择“仅对该文档”。然后单击“确定”按钮。 在弹出的“ CSS
8、 样式定义”对话框中的“分类”列表框中选择“类型”选项。 在右边的“类型”选项区中分别设置“字体”、“大小”、“样式”、“颜色”、“粗 细”和“修饰”等，设置如图3-41 所示。 图 3-41 设置样式参数 单击“确定”按钮，这时在“CSS 样式”面板可以看见新建的样式.f1。如图 3-42 所示。 6 图 3-42 CSS 样式面板中新建的样式 在页面编辑区选取要应用的文本或者段落，在“CSS 样式”面板中用鼠标右键单击要应 用的样式名称.f1，在弹出的菜单中选择“套用” ，则选中文本被应用了指定的样式。如图 3-43 所示。 图 3-43 被应用了新样式的文本 2外部 CSS样式 下面我们
9、来制作一个12 磅字的外部CSS 样式，并应用样式。 打开 CSS 样式面板的面板菜单，单击“新建CSS 样式”按钮，弹出“新建CSS 样式” 对话框。 在“名称”文本框中输入样式表名称，如.mystyle；在“选择器类型”选项选择“类”； “定义在”选项处选择“新建样式表文件”。单击“确定”按钮，即打开保存文件的对话框， 如图 3-44 所示。 输入外部样式文件名，如mycss，选择保存路径，单击“保存”按钮后弹出“CSS 样式定 义”对话框。 7 图 3-44 保存外部 CSS样式文件 在“分类”列表框中选择“类型”选项， 并在右边的“类型”选项区中分别设置“字体”、 “大小”、“样式”、
10、“颜色”、“粗细”和“修饰”等，设置如图3-45 所示。 图 3-45 设置样式参数 单击“确定”按钮，一个外部CSS 样式就做好了。这时在“CSS 样式”面板可以看见新 建的外部样式文件mycss，在“文件”面板中也可以看到该CSS 文件。如图3-46 和图 3-47 所 示。 8 图 3-46 CSS样式面板中新建的外部样式 图 3-47 文件面板中显示外部样式 链接“外部CSS 样式表”文件。打开一个页面文档，在CSS 样式面板中单击“附加样式 表”按钮，如图3-48 所示，就会弹出“链接外部样式表”对话框。 图 3-48 CSS样式面板中的“附加样式表”按钮 在弹出“链接外部样式表”对
11、话框中，点击“浏览”按钮，选择需要的外部CSS 样式表 文件，然后点击“确定”按钮。如图3-49 所示。 图 3-49 “链接外部样式表”对话框 这时在CSS 样式面板中可以看到附加到该文档的外部样式。选中要应用样式的文字或段 落，用鼠标在外部样式名上单击右键，在弹出的菜单中选择“套用”命令，如图3-50 所示。 9 这时可看到选择的文字被应用了该样式。 图 3-50 套用外部 CSS 样式 3“仅对该文档的CSS”转换成“外部CSS 样式表” 在 Dreamweaver 中可以把文档中的CSS 样式导出成为一个独立的外部CSS 样式表文件。 方法如下： 在“ CSS 样式面板”中选择要导出的
12、样式，如.f1，单击鼠标右键，在弹出的菜单中选择 “导出” 命令， 或执行 “文件 /导出 /CSS样式” 命令， 即打开 “导出样式为CSS 文件” 对话框。 如图 3-51 所示。 在“文件名”处输入CSS 样式文件名，如myfont ，选择存放文件的路径。单击“保存” 按钮，则完成导出样式操作。 4“外部CSS 样式表”转换成“仅对该文档的CSS” 同样可以把一个独立的外部CSS 样式表文件转化为文档中的CSS 样式。方法如下：双击 打开外部CSS 样式表文件， 在样式表的开头添加 结尾添加 ，把整 个 CSS 代码复制到一个文档的前面。这时可看见“CSS 样式面板中”出现该样式。 10 1.8 归纳总结： 本讲主要介绍了样式表的新建和设置，希望同学们能灵活使用样式表并运用到自己的网 页设计中去。 1.9 课后作业题： 1.CSS 样式表的作用？ 2.如何新建CSS 样表？ 3.如何设置样式表？
