html网页设计超链接
课程内容
2组织网页内容（HTML基础）
2.5创建表单和层
2.6 添加超链接
计划课时
4课时
一、情景引入
如今网络上的个人博客站点很多，一般个人博客的首页主要包括体现自己风格的Logo、banner、导航条以及文章标题列表等，内页的博文较为简洁以图文为主。
二、教学目标
学生通过完成本案例，达成以下目标：
知识目标：理解HTML中的简单表单元素和div元素的用法；知道HTML的超链接元素，理解内部链接、空链接、邮件链接、锚点链接和外部链接。
能力目标：学会在网页中创建简单的表单，并使用div元素进行网页布局；学会创建页面导航、邮件链接、外部链接和页面内跳转的超链接。
情感目标：激发学生对本课程和本专业学习的浓厚兴趣；培养学生互相帮助、团结协作的精神； 拓展学生的审美观念和想象能力，并具有创新能力。
三、教学重、难点
教学重点：在网页创建简单的表单，创建页面导航、邮件链接、外部链接
教学难点：使用div元素进行网页布局，页面内跳转的超链接
四、教学方法
以案例教学为核心，采用任务驱动式的行为导向教学法。
采取了由浅入深、循序渐进的教学策略，以学生的感知、理解、巩固、运用为教学设计流程。教学互动环节中主要包括六个步骤：明确任务——计划筹备——学生实施——引导组织——评估反馈——巩固实践。
五、教学资源
配套教材：《Web前端开发技术基础案例教程》高等教育出版社 978-7-04-055492-2
多媒体机房、投影仪、电子教学平台、视频演示教程、案例源文件、素材、ppt等。
教学环节
教学过程设计
第一环节：明确任务
一．案例效果展示：
展示本项目的最终网站效果及本次课要完成的效果。
案例：制作个人博客网站
二．案例分析
本案例要制作一个“OO个人博客”网站，包含两个页面，首页的布局用图片代替，背景颜为浅灰，添加导航、表单、超链接和版权文字；内页的文章包含标题、段落、表格等元素，并用水平线分割成几个栏目，整个网站的字体默认大小和颜。
三．网站结构导图
第二环节：计划筹备
这里是案例制作前的准备工作，一方面是案例制作素材的准备，另一方面教师可以引导学生回顾上一个任务的知识点以及完成情况。
第三环节：学生实施
教师分发制作素材，让学生根据练习任务，自主的按照教材中图文结合的“制作过程”，一步步跟学跟做。完成该案例任务。
任务5 创建表单和层
任务目标
掌握HTML 简单表单的创建
学会使用 div元素的网页布局
任务活动
活动1：创建表单
活动2：顶部布局
任务效果
完成内页study.html页面中顶部导航和表单的制作
任务6 添加超链接
任务目标
掌握HTML的超链接元素
●内部链接
●空链接
●邮件链接
●锚点链接
●外部链接
任务活动
活动1：创建首页
活动2：页面导航
活动3：邮件链接
活动4：外部链接
活动5：页面内跳转
任务效果
完成首页index.html页面内容的制作。
完成首页和内页之间的超链接。
完成内页study.html内部锚点链接。
第四环节：引导组织
学生在跟学的过程中会遇到很多疑问和不解，这正是一个探索知识的过程。教师可以在这里解决这些问题，演示指导制作步骤，讲解任务中的“知识链接”：
⑪：表单元素
⑫：布局元素
⑬：超链接元素
第五环节：评估反馈
课程学完后，教师对本节课所学知识要点做一个总结式的梳理：
学生完成教材“学习检测”检验自己的知识掌握情况，并通过“学习评价”表完成对学习过程的评价。
备  注
教师在整个教学环节中除了提供给学生完整的案例文件、素材文件外，还应提供重要任务的录制视频教学资源，这样可以有效的避免教学中基础好的学生速度快等待教学进度，基础差的学生速度慢跟不上教学进度的学习现状，会收到事半功倍的效果。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。