第9课 使用CSS与Div设置网页样式与布局（2）（教案）-《网页制作三合一案例教程》同步教学（航空工业出版社）

课题 第9课 使用CSS与Div设置网页样式与布局（2） 课时 2课时（90 min） 教学目标 知识目标： （1）掌握在Dreamweaver中创建和使用CSS的方法 （2）掌握文本、背景、区块和方框样式属性的含义及设置方法 技能目标： （1）能够在Dreamweaver中应用CSS （2）能够设置文本、背景、区块和方框样式 素质目标： 条条大路通罗马，要善于转变思维，勇于创新 教学重难点 教学重点：在Dreamweaver中应用CSS 教学难点：设置文本、背景、区块、方框样式 教学方法 问答法、讨论法、讲授法、练习法 教学用具 电脑、投影仪、多媒体课件、教材 教学设计 第1节课：课前任务→ 考勤（2 min）→  问题导入（3 min）→传授新知（25 min）→课堂实训（15 min） 第2节课：问题导入（3 min）→ 传授新知（30 min）→ 课堂实训（7 min）→ 课堂小结（3 min）→ 作业布置（2 min） 教学过程 主要教学内容及步骤 设计意图 第一节课 课前任务 【教师】让学生上网查询CSS样式有哪些类型 【学生】按照要求完成课前任务 通过课前任务，让学生了解CSS的样式类型 考勤 （2 min） 【教师】使用文旌课堂APP进行签到 【学生】班干部报请假人员及原因 培养学生的组织纪律性，掌握学生的出勤情况 问题导入 （3min） 【教师】提出以下问题，并随机邀请学生进行回答 上节课我们通过记事本来编写和保存CSS样式文件，那么如何通过可视化的操作环境进行创建？ 【学生】聆听、思考、回答 【教师】总结学生的回答，导入本节课内容：在Dreamweaver中应用CSS 通过上节课最原始的方法编写CSS样式，引出其缺点，让学生学会利用Dreamweaver可视化的操作创建CSS样式 传授新知 （25 min） 【教师】讲解新知，介绍在Dreamweaver中应用CSS 任务三 在Dreamweaver中应用CSS 一、任务说明 在Dreamweaver CS5中，可以使用两种方式创建CSS样式表，一种是利用“CSS样式”面板，在可视化的操作环境中进行创建；一种是在“代码”视图中直接编写相关代码。本任务主要学习利用“CSS样式”面板创建CSS样式表的操作。 二、预备知识 （一）CSS样式面板 使用“CSS样式”面板可以非常方便地新建、删除、编辑和应用样式，以及附加外部样式表等。选择“窗口”>“CSS样式”菜单，可打开“CSS样式”面板，如图5-28所示（详见教材）。 “CSS样式”面板的“全部”选项卡包含两个窗格。其中，上面的“所有规则”窗格显示了当前文档中定义的样式和链接到当前文档的样式文件中定义的样式；使用下方的“属性”窗格可以快速编辑“所有规则”窗格中所选CSS样式的属性。 通过单击面板左下角的3个按钮，可控制属性的显示方式，其中，“类别”视图表示按类别分组显示属性（如“字体”“背景”“区块”“边框”等），并且已设置的属性位于每个类别的顶部；“列表”视图表示按字母顺序显示属性，并且已设置的属性排在顶部；单击按钮可只显示已设置的属性。此外，在类别视图和列表视图模式下，已设置的属性将以蓝色显示。要修改属性，可直接单击选择属性，然后进行修改。 【课堂问答】 【教师】随机邀请学生回答以下问题 请对比面板左下角的3个按钮，总结其控制属性的显示方式有何不同？ 【学生】聆听、思考、回答 【教师】总结学生的回答 类别”视图按类别显示属性、“列表”视图按字母顺序显示属性、按钮只显示已设置的属性。 按下“当前”按钮，“CSS样式”面板将显示三个窗格（参见图5-29详见教材），上面是当前所选内容的CSS属性摘要；中间显示了当前属性所属样式的名称；下面显示了CSS样式属性的详细信息，可以在此编辑属性。 （二）创建CSS样式 下面学习在Dreamweaver CS5中可视化创建CSS样式的方法。 【多媒体】演示创建CSS样式的步骤 步骤1在“CSS样式”面板中单击“新建CSS规则”按钮 ，打开“新建CSS规则”对话框。 步骤2在“选择器类型”下拉列表中选择要创建的选择器类型，然后在“选择器名称”编辑框中输入或选择选择器名称。 步骤3在“规则定义”下拉列表中选择添加样式的方式。其中：要添加外部样式表，可选择“新建样式表文件”；要将新建样式保存在当前站点中的现有样式表文件中，可选择相应的样式表文件；要在当前文档中嵌入内部样式，可选择“仅限该文档”。 【课堂问答】 【教师】随机邀请学生回答以下问题 请思考我们创建的样式如何确定添加样式的方式？ 【学生】聆听、思考、回答 【教师】总结学生的回答 在制作网站时，可以将常用的样式保存在外部样式表文件中，而将个别对象用到的