第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 样式定义”对话框。编辑当前文档或外部样式表中的任何样式。
1
? 删除CSS样式 素中删除格式。
：删除“CSS 样式”面板中的所选样式，并从应用该样式的所有元
单击CSS样式面板右上角的菜单按钮，可以显示如图3-36所示的面板菜单。通过该菜单，可以完成对CSS样式面板的大部分控制。在CSS样式面板的列表区域中单击鼠标右键，也可以打开同样的菜单。
图3-36 面板菜单
从主菜单选择“文本/CSS样式”命令，选择“新建”也可启动“新建样式表”对话框，如图3-37所示。
在页面空白处单击鼠标右键，在弹出的菜单中一样可以启动“新建样式表”对话框，如图3-38所示。
不管如何启动上述几个样式菜单或面板，他们都包含相同的几个命令：新建样式表、编辑样式表、链接样式表和导出样式表。
2
图3-37 “文本/CSS样式”菜单
图3-38 在页面弹出式菜单中操作CSS样式
2．定义样式表选项
启动新建样式表后会打开如图3-39所示的“新建CSS样式”对话框。
3
《网页设计与制作》教案-第10讲 布局技术之二—Div+CSS(二)
