2016网页设计与制作DreamWeaver教案：第十八讲CSS基本语法.doc

第十八讲　CSS基本语法 授课日期 班级名称 授课地点 教学课题 第十八讲CSS基本语法 课时 2学时 教学目的 （1）理解CSS样式表的概念 （2）掌握CSS样式表的基本语法 知识目标 （1）CSS样式表的概念 （2）CSS样式表的基本语法 能力目标 利用CSS更好来美化页面 素质目标 培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能力。 重点 （1）CSS样式的基本语法 难点 CSS样式的基本语法 课型 讲授型＋操作型 教学方法 边讲、边练、讲练结合 教学手段 多媒体教学 教参 《网页设计与制作教程》 人民邮电出版社 教学环节 及 板书设计 时间安排 (分钟) 1．复习提问 怎样使用HTML语言中的表格标记插入表格？ 2 2．新课引入 怎样能让网页在各种平台上都能够正常显示？这就要使用CSS样式。 3 3．项目展示 展示使用CSS样式的网页 5 4．知识技能目标说明 应用CSS样式 5 详细讲解各知识点 45 6．问题探讨 分析使用CSS样式的优越性 5 7．课堂实践 使用CSS样式设置网页背景 15 疑难解析 5 9.课堂小结 CSS样式弥补了HTML语言的不足，可以实现HTML代码一些无法实现的效果，使CSS美化页面更加简洁、方便。通过本讲的学习应该掌握CSS的概念、CSS样式的基本语法。 3 作业布置 2 总计 90 新授内容 CSS的概念 CSS样式表的应用举例 CSS样式表的基本语法 CSS样式表的定义位置 CSS样式定义在HEAD内 CSS样式嵌入BODY内部 在独立的外部文件中定义 CSS样式表的定义形式 定义标签样式 定义高级样式 定义类样式 案例09使用CSS样式格式化页面——青岛教育在线网 案例综述： 为了使网页具有统一的风格，通常在网页中使用CSS样式，并且一般都将CSS样式的设置放在网页制作的第一步，当然也可以边制作网页边进行设置，然后将CSS样式应用到网页中即可。本案例将在已完成页面布局的网页上添加CSS样式，进一步美化、格式页面，从而达到统一风格，快速格式化网页的目的。同时使学生掌握使用CSS样式格式化页面的方法。 操作步骤： 打开HTML网页 将D：\ch9设置为本地站点根目录，D：\ch9\images\为默认图像文件夹。 打开站点文件夹下的网页文件index.htm。 设置页面属性——添加嵌入头部的CSS?样式 打开“页面属性”。 选择“分类”列表框中“外观”选项，字体大小：12px，文本颜色：#000000，背景图像：选择images/bg.gif。左、右、上、下边距设置为0。 选择“分类”列表框中“标题/编码”选项，“标题”文本框中输入“青岛教育在线”，编码为“简体中文（GB2312）。 切换到代码视图，查看头部信息中的样式代码。 用“CSS样式”面板创建CSS样式 创建表格文字样式td。 窗口/CSS样式 新建CSS规则按钮，选择“选择器类型”中的“标签”单选按钮，在下方“标签”下拉列表中选择td，在“定义在”中选择“新建样式表文件”选项。 确定，保存style.css。在“CSS样式”面板中可以看到新添加了style.css文件。 在出现的“CSS规则定义”对话框中，设置字体大小为12px，颜色为#000000。 创建表格边框样式.redline 点新建CSS规则按钮，选择“选择器类型”中的“类”，名称为.redline（注意：类名称前的“.”不能省略）。但要注意的是，在“定义在”选项中要选择style.css文件，将所定义的CSS样式写入一个样式表文件中。 在“CSS规则定义”中，选择“分类”中的“边框”，设置样式、宽度和颜色。 创建用于版权信息文字的样式.white 制作中想使版权信息部分的文字有别于正文，在此定义一个类样式，类样式是唯一可以应用于文档中任何文本的CSS样式类型。 点新建CSS规则按钮，选择“选择器类型”中的“类”，名称为.white，在“定义”中选择“仅对该文档”文件，在当前文档中嵌入样式。 在“CSS规则定义”对话框中，选择分类中的“类型”，设置颜色为白色#FFFFFF)。 创建用于超链接的高级样式：a:link，a:vistited，a:hover。 将页面中的超链接设置为默认的链接是黑色、宋体、12px，没有下划线，而访问过后的链接又恢复为黑色、宋体、12px，没有下划线。 新建CSS规则，在“定义在”中选择style.css文件，“选择器类型”为“高级”，在“选择器”下拉列表中选择a:link（超链接的正常显示状态，没有任何动作）。 “分类”中选择“类型”，设置“修饰”为“无”，颜色为#000000。 再新建CSS规则，在“定义在”中选择style.css文件，“选择器类型”为“高级”，在“选择器”下拉列表中选择a