Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-3_第1页
Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-3_第2页
Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-3_第3页
Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-3_第4页
Web前端技术项目式教程电子教案 第2章 使用HTML5搭建中国传统文化网站首页结构 任务二教案-3_第5页
已阅读5页，还剩1页未读， 继续免费阅读

下载本文档

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

文档简介

PAGE1PAGE第2章使用HTML5搭建中国传统文化网站首页结构课程名称网页设计项目名称使用HTML5搭建网页任务名称HTML5标签课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用HTML文档的声明标签、头部标签、主体标签等构建网页基本结构。2.掌握使用文本标签、图像、列表、表格等搭建静态网页。3.掌握使用超链接完成页面跳转。4.掌握使用<iframe>标签嵌入子窗口页面。知识目标：1.熟悉HTML常用标签及其属性。2.了解网站目录结构的创建方法。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同2.培养学生良好的编程习惯和严谨的工作态度。教学内容1.任务描述2.任务展示与实现（1）创建云景旅游公司首页目录结构（2）使用HTML5标签搭建云景旅游公司首页顶层结构（3）使用HTML5标签添加网页内容（4）学生动手操作3.教师讲解本任务涉及的知识点4.任务小结教学重点1.网站目录结构规划2.使用HTML5标签搭建网页基本结构教学难点1.HTML5标签搭建网页结构的方法教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．制作广东云景旅游公司二级页面“公司概况”的HTML5页面。教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别介绍网站目录规划的方法、分析根据网页效果图搭建HTML5网页结构的流程。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。一、规划网站目录结构二、分析首页文档结构三、构建首页结构HTML5提供网页文档内容的上下文结构和含义。因此要尽可能使用语义化分段元素写出网页的结构代码。在对首页结构分析的基础之上，写出首页的结构代码。四、添加网页内容(1)添加<header>区域内容(2)添加<banner>区域内容(3)添加<main>区域内容(4)添加<footer>区域内容四、任务拓展中华传统文化网站二级页面“传统建筑”结构搭建在files文件夹下新建build.html文件，编写代码如下。<body> <header> <h1> <ahref="index.html"><imgsrc="../images/logo.png"></a> </h1> <nav> <ul> <li><ahref="../index.html">首页</a></li> <li><ahref="literature.html">传统文学</a></li> <li><ahref="festival.html">传统节日</a></li> <li><ahref="build.html">传统建筑</a></li> <li><ahref="feedback.html">意见反馈</a></li> </ul> </nav> </header> <div> <ahref="#"><imgsrc="../images/build/banner1.jpg"></a> </div> <main> <section> <h2>北京故宫</h2> <imgsrc="../images/build/jing.jpg"class="huayang"> <div> <h3>中国古代宫廷建筑之精华</h3> <p>北京故宫是中华民族的骄傲，也是全人类的珍贵文化遗产。如今，北京故宫不仅是一座宏伟的古代建筑群，更是一座活生生的历史博物馆，收藏了大量的珍贵文物。</p> </div> </section> <section> <h2>更多古建筑</h2> <ul> <li> <figure> <imgsrc="../images/build/yi.jpg"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>颐和园</figcaption> </figure> </li> <li> <figure> <imgsrc="../images/build/bu.jpg"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>布达拉宫</figcaption> </figure> </li> <li> <figure> <imgsrc="../images/build/wan.png"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>万里长城</figcaption> </figure> </li> <li> <figure> <imgsrc="../images/build/su.jpg"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>苏州园林</figcaption> </figure> </li> <li> <figure> <imgsrc="../images/build/yue.jpg"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>岳阳楼</figcaption> </figure> </li> <li> <figure> <imgsrc="../images/build/tan.jpg"/> <figcaption><iclass="fafa-tree"aria-hidden="true">

</i>天坛</figcaption> </figure> </li> </ul> </section> </main> <footer> <div> <span>©2024中国传统文化网站</span> <span><ahref="#">回到顶部</a></span> </div> <div> <ulclass="clearfix"> <li><ahref="#">友情链接</a></li> <li>|</li> <li><ahref="#">隐私与安全</a></li> <li>|</li> <li><ahref="#">法律声明</a></li> </u

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

温馨提示

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

最新文档

评论

0/150

提交评论