5.2.1用CSS美化网页.doc_第1页
5.2.1用CSS美化网页.doc_第2页
5.2.1用CSS美化网页.doc_第3页
5.2.1用CSS美化网页.doc_第4页
全文预览已结束

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

城南高级中学网络技术应用教案备课人编号备课日期课题5.2.1用CSS美化网页 上课日期教学三维目标知识与能力(1)理解什么是CSS样式表; (2)掌握运用CSS进行样式设置的方法和格式; (3)掌握在 HTML 中加入CSS的三种方法。过程与方法培养学生独立思考、动手实践的能力;培养学生自主探究性、协作性学习能力;激发学生学习信息技术的兴趣,培养学生发现美、创造美的能力,提高学生的综合素质。情感态度价值观通过学习运用CSS样式表优化网页制作,让学生学习正确、合理运用技术,了解技术服务于内容的原则教材分析教材“CSS样式表”这一节是在学生了解了客户端脚本语言的基础上的学习,要求学生了解CSS基本知识、掌握运用CSS进行样式设置的方法和格式。本部分是本章的重点内容。 教学重点在HTML中加入CSS的三种方法教学难点CSS 样式设置的方法和格式教学方法讲授法、小组讨论法、问题激励法教学媒体多媒体微机教室、网络广播软件教学过程一、 导入展示CSS实例 代码: 设计在线 提示学生观察上面代码。二、 教学过程今天我们来学习CSS样式表,这是制作动态网页的另一核心技术。 那么,什么是 CCS 样式表呢?使用CSS的优点有哪些? 请同学们学习教材第112 113页内容。 然后小组汇报。 展示以下例子:如果我们想做出上面这样一个文字样式,那么可以用如下的 HTML 样式来实现。 欢迎进入机器人做学玩网站 ! 讲解CSS的实现。 分析CSS与 HTML 代码的不同。 讲解使用CSS的注意事项:有的比较老的浏览器不支持样式表语法,不会将 和 之间的文本显示出来,若要避免这种情况的发生,就要加入 代码。 学生观察文字样式 在教师指导下 用CSS样式表来对 HTML 文档进行编辑,在 标签前加入下面CSS代码, 学生实践:1用 FrontPage 打开“机器人做学玩”网站的首页,观察在这张网页上,是否利用CSS进行了样式设置,如果有,请仔细观察它的语句。 2请大家在自己做的网站上,编写一到两个CSS文字样式,来替换原有的 HTML 文字样式,并观察其效果。演示 在 HTML 中加入CSS的三种方法 1嵌入式样式表 2内联式样式表 3外联式样式表 给出部分CSS代码,由学生用不同方法实现其效果。 学生自主实践探究在 HTML 中加入CSS的三种方法。 1试着用CSS来改变“机器人做学玩”网站中浏览器默认的超链接样式,可以用任意一种加入 HTML 的CSS方式。 2要求样式:当鼠标划过时,设为超链接的文字,变成淡蓝色,字体由 9pt 变成 10pt,并出现下

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

评论

0/150

提交评论