第9次课 CSS初接触（二）（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS初接触（二） 课次 9 教学 目标 知识目标 1. 掌握在HTML中引入CSS的方法（行内样式、内部样式、链接式、导入式） 2. 掌握CSS与浏览器的关系 能力目标 1. 能够利用CSS进行网页样式的定义； 2. 能够利用CSS进行网页元素的排版与定位。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经具备了一定的计算机操作能力和Photoshop、Dreamweaver软件的基本操作技能，对HTML标记语言与CSS的语法结构有一些基本的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．前续内容的知识绝大部分同学掌握较好，少部分同学操作不太熟练。 3．解决复杂问题能力弱，缺乏知识迁移能力。 教学 重点 1. 行内样式 2. 内部样式 3. 链接式 4. 导入式 5. 各种方式的优先级问题 6. CSS和浏览器的关系 教学 难点 在HTML引入CSS的四种方式的比较与优先级。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（12min） 1、先选人再抢答：什么CSS？ 2、先选人再抢答：CSS的语法结构是怎样的？写出来拍照回复。 3、先选人再抢答：连连看。 4、先选人再抢答：图中的CSS样式选择符属于哪种类型？ 5、先选人再抢答：图中的CSS样式交集选择符形式正确吗？若不正确，错在哪里呢？ 6、设置文字颜色为红色的声明如：color:red;现要设计如下样式：设置h1的文字为红色，设置段落p的文字为红色，设置应用#ys的文字为红色，如何定义这些样式可以代码最优化？答案写在纸上，拍照回复。 【课堂活动】 1.教师发布签到活动，选“值日生”指令； 2.值日生拍照上传，教室左前，左后，右前，右后和全景图5张，并拍摄一段全景视频；3.教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 知识准备 （30min） （一）在HTML中引入CSS的方法 （1） 行内样式 （2） 内部样式 （3） 链接式 （4） 导入式 链接式与导入式最大的区别在于链接式使用HTML的标签引入外部CSS文件，而使用导入式则是使用CSS的规则引入外部CSS文件。 （5） 各种方式的优先级问题 如果以上四种方式同时运用到一个HTML文件的同一个标记上时，将会出现优先级的问题。 如果所引入的CSS没有冲突，则所有样式都表现出来；如果样式发生冲突，按照以下规则表现： · 行内式的优先级最高：行内样式（Style=””）>ID选择符样式>类选择符样式>标签样式>浏览器默认样式； · 当CSS选择器同名的时候，HTML会按照CSS在网页中出现的顺序，至上而下的表现，后面的CSS样式覆盖前面的CSS样式。 （二）CSS与浏览器 就我们目前主流的两大浏览器IE（Internet Explorer）和Firefox（火狐）而言，在某些细节的处理上就不尽相同。而IE本身在其不同的版本上如IE6、IE7、IE8、IE9、IE10对相同的页面的浏览效果都会存在一些差异。 注意：一般建议大家在电脑上安装多个主流浏览器，如IE、Firefox、Opera等。使用CSS制作网页时，通常的做法是一边编写HTML和CSS代码，一边在不同的浏览器上进行预览测试，及时调整各个细节，这对深入掌握CSS也是很有好处的。对于不同版本的IE浏览器我们可以在电脑上装一个高版本的IE浏览器，然后使用IEtest进行测试。另外Dreamweaver里面的设计视图模式只能作为设计时候的参考使用，绝对不能作为最终的显示效果的依据，只有在浏览器中看到的效果才是真正大家看到的效果。 （3） CSS的继承性 微课学习：学生自主观看微课视频，掌握“CSS的继承性”知识内容。 （4） CSS的层叠性 微课学习：学生自主观看微课视频，掌握“CSS的层叠性”知识内容。 1.【知识讲授】教师讲解在HTML中引入CSS的四种方式、各种方式的优先级问题等知识点。 2.【课堂讨论1】：网页引入CSS样式的方式有哪些？ 3.【微课学习1】 学生自主观看微课视频，掌握“CSS的继承性”知识内容。 4.【微课学习2】 学生自主观看微课视频，掌握“CSS的层叠性”知识内容。 1.听取教师讲解知识点； 2.积极参与课堂活动。 知识检测（15min） 1、先选人再抢答：内部样式使用哪个标签插入在网页的哪个部分呢？ 2、先选人再抢答：以链接的方式引入外部样式使用的是哪个标签放在网页的哪个部分呢？(link head) 3、先选人再抢答： （1）下图中网页的预览效果会是怎样的？ 现在有一个外部样式表文件ys.css如下图 （2） 链入一个外部样式会有什么变化呢？ （3）导入一个外部样式会有什么变化呢？ 1.【发布任务】教师在学习通发布活动。 2.【归纳总结】来回巡视，及时帮助学生解决问题。 完成知识检测。 技能训练 （30min） 1、新建一个外部样式表文件，名为mycss.css，内容如下： 2、新建一个HTML文件，在DW中实现如下效果： 第四步：保存为html文件，分成1个文件或者多个文件保存皆可。 第五步：通过不同浏览器查看网页效果。 第六步：将网页效果截图上传。 1.【实操演示】教师分析效果网页，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.观看实操演示，掌握CSS语法与选择符的应用。 2.完成技能训练题。 课堂小结（3min） 通过对本次课的学习，让学生掌握在HTML中引入CSS的四种方法，为以后课程的学习奠定一个基础。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 教学反思 学科网（北京）股份有限公司 $$