第20次课 CSS设置网页链接（教案）《电子商务网页设计与制作》（电子工业出版社）

授课章节及主题 CSS设置网页链接 课次 20 教学 目标 知识目标 掌握CSS设置网页菜单的方法。 能力目标 能够掌握CSS美化网页元素的方法。 素养目标 1. 培养学生清晰有序的逻辑思维； 2. 培养学生数据分析与总结的意识； 3. 培养学生系统分析与解决问题的能力。 学情 分析 知识基础 学生已经CSS的盒子结构与图像设置规则有了一定的了解。 学生特点 1.学生爱学习爱思考爱表达，喜欢动手实践，但学生自律性不强，遇到困难时畏难。 2．解决较复杂问题能力比较弱，知识迁移能力有待加强。 教学 重点 掌握CSS设置链接的方法。 教学 难点 掌握如何通过伪类对象定义CSS链接设置。 教学 方法 讲授法 案例演示法 讨论法 实践法 线上线下混合式 教学资源与平台 教学平台 超星学习通https://www.xueyinonline.com/detail/221724252 参考书 1.《电子商务网页设计与制作》，电子工业出版社 2.《HTML5+CSS3网页设计与制作》，人民邮电出版社 参考网络资源 1.菜鸟教程：https://www.runoob.com/ 2.虎课网：https://huke88.com/ 教学过程设计 环节 教学内容 教师活动 学生活动 知识回顾（10min） 第1题（单选题）:请将正确答案的字母序号填写右边与之对应的括号里。 第2题（多选题）：老师要求同学们完成如下图1所示的网页呈现效果，可李四同学却怎么也做不出来，图2为李四同学编写的代码及网页呈现效果，大家来一起找找看，从下列众多问题中筛选出哪些是李四同学作业的问题（ ）。 A. 没有清除默认的边距 B. 没有清除默认列表符号 C. 没有设置列表项的左外边距 D. 没有设置列表项的右外边距 E. 没有设置列表项的左内边距 F. 没有设置列表项的右内边距 图1：老师发布的网页作业效果图 图2：李四同学的作业代码及效果图 第3题：在第2题里我们已经为李四同学找出了问题所在，请帮他将问题里对应的代码写出来，并拍照回复。 第4题：下图红色框中的代码是什么意思呢？它们的作用是什么呢？ 1.【课堂活动】教师通过开展各种课堂活动回顾上次课知识点。 1.学生积极参与课堂活动。 任务导入（2min） 小明的网页设计水平得到了青山文学社读者的认可，新改版的网站浏览量增加了很多，这给了小明很大的信心。小明所在学校旁边有一家名为“湘果贸易有限公司”的水果公司，主要销售各种国内外水果产品。有一天，该公司的市场主管找到了小明，想要小明帮他设计一个网站，以此打开网络销售渠道的大门。 1.【任务导入】教师通过案例导入本次课的学习目标。 1.学生了解本次课学习的目标。 任务描述（3min） 本任务是利用公司提供的素材与图片，制作一个“湘果”主题的网上商城页面，网页效果如图所示。 图1 湘果网页效果 1.【任务描述】讲师引入与描述任务内容与效果。 1.学生了解本次课要完成的任务。 知识准备 （30min） （一）链接伪类对象（重难点） 网页中的超级链接用a元素来设置，a元素的语法如下： <a href="http://www.baidu.com" target="_blank" title="百度">百度</a> CSS控制超链接样式主要通过以下四个伪类对象进行定义的。 · a:link：设置a对象在未被访问前（未点击过和鼠标未经过）的样式属性。 · a:visited：设置a对象在链接地址已被访问过时的样式属性。 · a:hover：设置a对象在鼠标悬停时的样式属性。 · a:active：设置a对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式属性。 注意：以上四个伪类对象在设置时必须遵循一个顺序，a:hover 必须位于 a:link 和 a:visited 之后，a:active 必须位于 a:hover 之后，否则得不到正确的链接样式。而a:active很少使用，因为用户在点击链接时，会很快跳转到目标网页，一般会忽略点击时链接效果的设置。 随堂测试：同学们完成“CSS设置链接”随堂测试任务点。 （二）CSS设置链接效果 （1） 网页整体超链接效果 （2） 网页中不同超链接效果 （3） 按钮式超链接效果 （4） 背景图片超链接效果 课堂讨论：请写出正常链接时显示“bg1.jpg”背景图片，鼠标悬停时切换成“bg2.jpg”背景图片的超链接效果？拍照回复。 1.【知识讲授】教师讲解CSS的字体和文本属性、文字截断与首字下沉等知识点。 2.组织观看微课视频。 3.组织发布【课堂讨论】。 4.组织发布【随堂测试】。 1.听取教师讲解知识点； 2.积极参与课堂活动。 技能训练（40min） 技能训练：组织学生完成作业“3.2.1 CSS设置链接效果之知识准备 操作题”，并按要求提交作业。 1.【实操演示】教师技能训练任务，并进行实操演示。 2.【发布任务】教师在学习通发布技能任务。 3.【实践指导】来回巡视，及时帮助学生解决问题。 1.学生查看技能训练任务。 2.完成技能训练题。 课堂小结（5min） 本次课主要学习通过定义4个伪类对象的CSS规则，就可以得到了丰富的连接效果，并用CSS实现按钮式超链接效果和背景图片超链接效果，并运用到实际制作过程中去，真正做到融会贯通。 作业布置 1.继续完成技能训练任务，并提交至学习通 2.预学下一次课的内容 3. 课后讨论：在刚才的学习与实践中，你学会了什么？你的难点在哪里？ 教学反思 学科网（北京）股份有限公司 $$