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

下载本文档

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

文档简介

PAGE1PAGE第2章使用HTML5搭建中国传统文化网站首页结构课程名称网页设计项目名称HTML5标签任务名称HTML5标签课时2项目性质□演示性□验证性□设计性√综合性授课班级授课日期授课地点教学目标能力目标：1.掌握使用HTML文档的声明标签、头部标签、主体标签等构建网页基本结构。2.掌握使用文本标签、图像、列表、表格等搭建静态网页。3.掌握使用超链接完成页面跳转。4.掌握使用<iframe>标签嵌入子窗口页面。知识目标：1.熟悉HTML常用标签及其属性。2.了解网站目录结构的创建方法。素质目标：1.培养学生对中华优秀传统文化的深刻理解和认同2.培养学生良好的编程习惯和严谨的工作态度。教学内容1.任务描述2.任务展示与实现（1）编写HTML5标题、段落和文本格式化标签（2）编写HTML5的图片标签（3）编写HTML5列表标签（4）编写HTML5的超链接标签和iframe标签（5）学生动手操作3.教师讲解本任务涉及的知识点4.任务小结教学重点1.HTML5标签的含义2.HTML5标签的准确使用教学难点1.HTML5标签的准确使用教学准备1.装有VScode的电脑2.教学课件PPT3.教材：《Web前端技术项目式教程（HTML5+CSS3+Flex+Bootstrap）》作业设计1．制作一个包含所学标签的HTML页面教学过程教学内容与过程（教学内容、教学方法、组织形式、教学手段）做好课前“5分钟”教学管理（多媒体、实训室），做好上课前的各项准备工作（打开电脑、打开课件、打开软件、打开U盘中的素材位置、打开授课计划、教案等），吸引学生注意力。【课前说明】分别从HTML5标题标签、段落标签、文本的格式化标签、图片标签、列表标签、超链接标签、iframe标签等知识点进行初步的了解。【目的】使学生从了解本单元的学习目标、学习重点、考评方式等方面明确学习本单元知识的要求和目标。一、HTML5标题、段落和文本格式化标签1、标题标签<h1>至<h6>用来定义6个级别的章节标题，<h1>是一级标题，字体最大；<h6>是六级标题，字体最小。2、段落标签段落标签主要有<p><br/>和<hr/>3种。<p>标签：表示文本的一个段落。在浏览器中显示时会自动在段落前后创建一些空白。<br/>标签：在文本中产生换行符（回车符），用于段落中的强制换行。<hr/>标签：被用来分隔HTML页面中的内容（或者定义一个变化），并显示为一条水平线。文本的格式化标签主要包括<b><i><em><strong>4种。<b>标签：显示加粗文本效果，表示相对于普通文本字体上的区别，不表示任何特殊的强调。<i>标签：显示斜体文本效果。<em>标签：把文本定义为强调的内容。<strong>标签：把文本定义为语气更强的强调的内容。二、HTML5的图片标签（1）<img>标签<img>标签用于向网页中添加相关图片，网页中常见的图片格式有：JPG、PNG和GIF。向网页中插入图像的方法如下。<imgsrc="smiley-2.gif"alt="Smileyface"width="42"height="42"/>（2）<figure>标签<figure>标签是HTML5的新增标签。<figure>标签用来表示网页上一块独立的内容，将其从网页上移除后不会对网页上的其他内容产生影响。<figure>所表示的内容可以是图片、统计图或代码示例。<figcaption>标签定义<figure>元素的标题，应该被置于<figure>元素的第一个或最后一个子元素的位置。HTML5列表标签列表分为有序列表、无序列表和定义列表。有序列表<ol>：列表项符号默认为阿拉伯数字序列。列表项用<li>定义。无序列表<ul>：列表项默认为黑色实心圆点。列表项用<li>定义。定义列表<dl>：当页面上每个列表项都需要标题和内容时，需要使用<dl>定义列表。HTML5的超链接标签<a>标签定义超链接，用于从一个页面跳转到另一个页面，有两个重要的属性：href和target。iframe标签<body><p><ahref=""target="iframe_a">广东轻工职业技术学院</a></p><iframesrc=""name="iframe_a"width="800"height="400"></iframe></body>1.文本段落标签的使用参考代码：<body><p>公司介绍</p><hr/> <p>云景旅游以集团公司战略发展为目标，围绕集团公司战略部署，贯彻广东省产业转型级，大力发展旅游文化产业。通过建设开发旅游资源，促进广东省旅游环境的发展。目前，我公司致力于建设东莞市麻涌镇岭南水乡文化旅游景区项目，以华阳湖湿地公园为核心，向周边开发建设，通过扩大湿地恢复，完善旅游服务功能，将本项目打造成为具有浙江乌镇模式和丽江古镇模式，体现岭南水乡文化特色建筑风格的国家5A级景区。</p> <p>公司现有旅游中心、置业中心等多个部门协同合作，按照集团公司指示，开发建设旅游产业项目，提高公司建设品质，提升公司形象。公司成立以来，在集团公司领导下，突破市场资源制约瓶颈，努力在更大范围开发建设、拓展市场，改善旅游资源的开发与建设。<br/>业务涵盖房地产开发及销售、旅游宣传促销策划、旅游商品（工艺品）销售、旅游景区配套设施建设、景区游览服务、旅游项目投资等。</p></body>2、figure标签的使用<body> <figure> <imgsrc="images/img1.jpg"alt="湿地公园"/> <figcaption>湿地公园</figcaption> </figure></body>3、列表标签的使用<body>云景旅游公司主要景区：<ol><li>华阳湖景区</li><li>岭南水乡小镇</li></ol>主要招聘岗位有：<ul><li>造价主管</li><li>网络编程</li><li>网站责任编辑</li</ul>华阳湖景区主要景点介绍：<dl><dt>花海田园</dt><dd>通过引水形成小的溪流以及水田，利用挖沟渠，造湿地的土方进行适当的堆填形成坡地地形，其次进行农产品种植规划，种植花卉形成花海河花坡景观，种植蔬菜、水果形成农田景观，并规划设计了瓜果长廊，游客可参与农耕体验项目。此外，在花海田园区域依托花海及农田景观，以点缀的形式，规划设计了岭南建筑风格的休闲度假特色农庄，在该区域还规划设计农耕文化展示馆——农耕历史文化，生产工具用品等。</dd><dt>大型水上风情</dt><dd>龙舟赛是一年一度的热闹盛事，麻涌河两岸被围得水泄不通，而麻涌河上，各村的龙船锣鼓喧天，游龙游得不亦乐乎！</dd><dt>水上森林</dt><dd>水上森林在变农田为生态湿地的基础上栽种适应水中生长的乔木，营造湿地水上森林景观，游客可乘船在树林水道中划行，也可以漫步于森林中，在水上森林还规划设计了相应的休闲设施，在水上森林的西面规划设计了湿地核心区，依托湿地景观规划设计了游览项目，游客可乘船或步行穿梭在犹豫迷宫般的湿地景观中。</dd></dl

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

温馨提示

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

最新文档

评论

0/150

提交评论