任务2搭建简单学院网站_第1页
任务2搭建简单学院网站_第2页
任务2搭建简单学院网站_第3页
任务2搭建简单学院网站_第4页
任务2搭建简单学院网站_第5页
已阅读5页，还剩4页未读， 继续免费阅读

下载本文档

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

文档简介

教案名称任务2搭建简单学院网站计划学时12学时知识目标掌握HTML5的基本结构熟悉常用的HTML文本标记、列表标记、超链接标记、图像标记能力目标会熟练使用HTML标记创建简单网页素质目标在编写代码中养成精益求精的工匠精神通过案例融入价值观塑造教学重点HTML5文档基本结构HTML文本标记、列表标记、超链接标记、图像标记教学难点使用HTML标记创建简单网页教学模式任务驱动教学法线上+线下混合教学模式教学活动及主要环节思政元素切入点第1、2学时(HTML文本标记)课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）使用HBuilder新建HTML5默认文档时，HTML5文档的基本格式包括哪些标记？每个标记的作用是什么？<!doctypehtml><html><head><metacharset="utf-8"><title>无标题文档</title></head><body></body></html>=2\*ROMANII.重难点内容讲授：一、HTML文本标记（40分钟）1.标题标记（实现example02.html）段落标记（实现example03.html）水平线标记（实现example04.html）单标记换行标记重点强调单标记（实现example05.html）字体样式标记（实现example06.html）特殊字符（实现example07.html）（教师多媒体演示、学生一起操作，实现教学做一体化）二、【任务实现】学院简介页面制作（15分钟）效果图如下：代码如下：三、练习：制作自己的个人介绍页面。（20分钟）教师巡视，答疑=3\*ROMANIII.课堂小结：（5分钟）本次课介绍了HTML文本标记及利用HTML文本标记创建简单的学院简介页面。课后作业：1.课后实训22.超星学习通平台作业第3、4学时（HTML列表标记）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.学生讨论：（10分钟）问题：为什么要学习各种列表标记？各种列表标记之间又有什么区别？=2\*ROMANII.讲授重难点内容：一、无序列表（10分钟）对“无序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“无序列表”时需要注意的问题。二、有序列表（10分钟）对“有序列表”的概念、基本语法格式及常用属性值进行讲解，并列举网页中常见的例子进行说明，进行代码演示。（学生同步操作，教师巡视，答疑）强调：定义“有序列表”时需要注意的问题。三、列表的嵌套应用（15分钟）打开浏览器，输入淘宝网址，对“列表嵌套”在网页中的常见效果进行展示，进行讲解。代码演示嵌套应用。强调：定义“列表嵌套”时需要注意的问题（学生一起操作，教师巡视，答疑）四、【任务实现】学院新闻页面制作（35分钟）【实现步骤】1、新建网页打开HBuilder创建项目，在项目名称上右击，选择“新建”|“html文件”，在“新建html文件”对话框中输入文件名称：news.html，单击“创建”按钮，创建文件。2、分析页面效果，该页面主要由标题和列表文字组成。标题文字使用<h2>，列表文字使用<ul>，编写源码如下。3、保存文件Ctrl+S4、浏览网页Ctrl+R同步练习：使用列表标记列出你的家乡特产。=3\*ROMANIII．课堂小结：（10分钟）掌握有序列表、无序列表、列表嵌套以及自定义列表标记的使用，最常用的是无序列表和无序列表嵌套。课后作业：超星学习通平台作业。预习：HTML超链接标签、图像标签第5、6学时（创建超链接、锚点链接）课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.导入新课：（10分钟）创建超链接的学习中，你遇到了哪些问题？如何解决的？=2\*ROMANII.重难点内容讲授：一、超链接标签（45分钟）1、超链接标签的语法格式：<ahref="目标地址"target="目标窗口"title="提示文字">热点文字</a>（操作演示讲解超链接标签的各个属性，学生同步练习）2、超链接的几种形式：页面间的超链接：该链接指向当前页面以外的其他页面，单击该链接将完成页面之间的跳转。实例讲解（学生同步操作，教师巡视，答疑）锚点链接：该链接指向页面内的某一个地方，单击该链接可以完成页面内的跳转。（师生互动：列举网页浏览需求，引入特殊链接--锚点链接，用户能够快速定位到目标内容）锚点链接创建步骤：第一步：定义锚点；第二步：创建指向锚点的链接。（针对“锚点链接”的作用及创建步骤进行讲解，代码演示说明）（学生一起操作，教师巡视，答疑）对“创建超链接”与“锚点链接”进行对比分析，并总结其注意事项。空链接：单击该链接时不进行任何跳转。<ahref="#">热点文字</a>二、练习：完成专业介绍页面。（30分钟）=3\*ROMANIII.课堂小结：（5分钟）本次课介绍了超链接的语法格式、形式、利用超链接实现页面间、页面内的跳转。课后作业：超星学习通平台作业第7、8学时图像标签、绝对路径课前发布任务：观看学习通平台相关学习视频。做课前测试题。=1\*ROMANI.讨论：（10分钟）在学习图像标记的过程中，你遇到了哪些问题？同学们讨论解决方法。=2\*ROMANII.重难点讲授：一、图像标签（20分钟）1.语法格式：<imgsrc="图像路径"alt="替换文本"title="提示文本"width="图像宽度"height="图像高度">对“图像标记”及其属性进行讲解，代码演示说明。（学生一起操作，教师巡视，答疑）2.绝对路径和相对路径通过文件夹的层级关系对“路径”进行讲解。展示PPT对“绝对路径”进行讲解，并举例说明。展示PPT对“相对路径”进行讲解，并通过“图像文件和html文件”的不同位置进行演示。（学生提问，教师答疑）图像标签应用（15分钟）学生同步练习。三、练习：制作一个图文并茂的个人介绍页面并展示（40分钟）教师巡视答疑=3\*ROMANIII.课堂小结：（5分钟）本次课学习了HTML5图像标记和路径的使用，重点掌握相对路径的表示方法。课后作业：1.课后实训22.学习通平台作业第9~10学时(任务实现：创建简单学校网站)按照课本2.3任务实现步骤，创建简单学校网站。一、创建项目（1）打开HBuilderX工具，选择“文件”｜“新建”选项，再选择“项目”选项，在“新建项目”对话框中输入项目名称school，位置选择一个合适的位置，选择模板“空项目”，单击“创建”按钮。（2）右击项目名称school，选择“新建”|“目录”选项，创建目录images，用于存放图像文件，把本任务提供的素材中的图像复制到该目录中。二、创建网站各页面课后作业：学习通平台作业第11~12学时(实训：创建个人介绍网站)创意设计：创建一个个人网站项目，对自己进行全面介绍，要求如下。（1）包含一个主页和三个子页，主页和子页可以相互链接。（2）在主页中创建友情链接，链接到自己喜欢的两个网站。（3）至少有一个页面包含无序列表。（4）至少有一个页面包含锚点链接。（5）在每个页面中合理使用文字、图像等。课后作业：学习通平台作业通过学习通平台拓展阅读使学生了解HTML5标准规范的制定，激发同学们科技报国的雄心，增强使命担当意识。通过编写HTML5代码，让学生了解代码书

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论