《网页设计与制作(活页式)》 教案 项目2HTML5简介_第1页
《网页设计与制作(活页式)》 教案 项目2HTML5简介_第2页
《网页设计与制作(活页式)》 教案 项目2HTML5简介_第3页
《网页设计与制作(活页式)》 教案 项目2HTML5简介_第4页
《网页设计与制作(活页式)》 教案 项目2HTML5简介_第5页
已阅读5页,还剩23页未读 继续免费阅读

下载本文档

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

文档简介

《网页设计与制作》教学设计课程名称:网页设计与制作授课年级:20年级授课学期:20学年第一学期教师姓名:老师

20年月日课题名称项目二HTML5简介计划课时课时内容分析用户对网页的直观感受,决定了整个网页达到的效果。网页信息阅读的舒适感、颜色配色要在第一时间直接地传递给用户,因此网页设计的设计细节有三方面:用户的阅读效率、视觉舒适度和网页的品质感。熟练掌握网页设计技巧,培养动手操作能力,才能设计出优秀的网页。教学目标了解HTML5的优势。掌握标签的使用。掌握文本控制标签和图像标签的使用方法。重点及措施教学重点:正确使用头部相关标签;正确使用标题标签;正确使用图像标签措施:通过上机操作加强学习和补充案例进行巩固。难点及措施教学难点:标签,文本控制标签,图像标签措施:通过上机操作加强学习和补充案例进行巩固。教学方式教学采用教师课堂讲授为主,使用教学PPT讲解。教学过程任务2.1HTML5的优势内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:HTML5相较于以前的版本有什么优势?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:HTML5是HTML的传递和延续。从HTML4.0、XHTML再到HTML5,从某种意义上讲,这是HTML的更新与规范过程。HTML5并没有给用户带来多大的冲击,其他版本的大部分标签在HTML5版本中依然适用。相比于其他版本的HTML,HTML5的优势主要体现在兼容、合理、易用和新增标签。知识点讲解讲解HTML5的优势(1)教师展示PPT,对静态网页进行具体讲解。1.兼容HTML5并不是对之前HTML语言的颠覆性革新,它的核心理念是保持与过去技术完美衔接,因此HTML5有很好的兼容性。例如,实例1的代码中缺少结束标签</p>,在HTML5中并没有把这种情况作为错误来处理,而是在允许这种写法的同时,定义了一些可以省略结束标签</p>的标签。2.合理HTML5中新增的很多标签、属性都是根据实际开发中已经存在的各类网页标签进行提炼和归纳,通过这样的方式让HTML5的标签结构更加合理。例如,W3C(WorldWideWebConsortium,万维网联盟)分析了上百万的页面,发现很多网页制作人员使用<divid="header">来定义网页的头部区域,于是在HTML5中添加了一个<header>标签。3.易用HTML5作为当下流行的标签语言,严格遵循“简单至上”的原则,主要体现在简化的字符集声明、简化的DOCTYPE、简单而强大的API和以浏览器原生能力替代复杂的JavaScript代码。为了易于使用,HTML5的规范比以前更加细致、精确。4.新增标签HTML5新增了许多特性,比如新的语义标签、新的表单控件、强大的图像支持等。新增内容丰富了HTML5实现的功能,比如在游戏开发中可以实现更多的互动。实例1缺少</p>标签(2)学生自主提问,教师对疑难问题进行解答。任务2.2HTML5的结构内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:XHTML文档和HTML5的结构有什么不同?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:在其他版本的HTML中,各浏览器对HTML的支持不统一,这就造成同一个页面在不同浏览器中可能显示不同的样式。HTML5通过详细分析各个浏览器所具有的功能,制定了一个通用的标准,并要求浏览器支持这个标准。知识点讲解讲解实例2新建XHTML文档和实例3新建HTML5文档格式(1)教师展示PPT,对实例2新建XHTML文档和实例3新建HTML5文档格式进行具体讲解。实例2新建XHTML文档实例3新建HTML5文档通过对比可以看出,HTML5的结构相较于XHTML的结构简洁明了。除上述的文档结构标签外,HTML5还简化了<meta>标签,让定义字符编码的格式变得更加简单。(2)学生自主提问,教师对疑难问题进行解答。任务2.3标签概述2.3.1标签的分类内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:什么是标签?是商场衣服上那个标签吗?是超市货架上的标签吗?HTML中的标签是怎样的?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:在HTML5页面中,带有“<>”符号的元素被称为HTML标签,如上面提到的<html><head><body>都是HTML标签。HTML标签是放在“<>”符号中表示某个功能的编码命令,也称为HTML元素。知识点讲解讲解标签的分类(1)教师展示PPT,对标签的分类进行具体讲解。根据标签的组成特点,通常将HTML标签分为两大类,分别是双标签和单标签。1.双标签双标签也被称为体标签,是指由开始和结束两个标签符号组成的标签。双标签的基本语法格式如下:<标签名>内容<标签名>2.单标签单标签也被称为空标签,是指用一个标签符号即可完整地描述某个功能的标签,其基本语法格式如下:<标签名/> 3.注释标签在HTML5中还有一种特殊的标签——注释标签,该标签就是一种特殊功能的单标签。如果需要在HTML5文档中添加一些便于阅读和理解,但又不需要显示在页面中的注释文字,就需要使用注释标签。注释标签的语法格式如下:<!--注释语句-->需要注意的是,注释内容不会显示在浏览器窗口中,但是作为HTML5文档内容的一部分,注释标签可以被用户上传到计算机上,用户查看源代码时也可以看到注释标签。提示查看网页源文件的方式打开网页后,右击网页空白处,弹出快捷菜单,选择“查看源文件”命令,搜狗浏览器如下:谷歌浏览器如下Edge浏览器如下火狐浏览器如下(2)学生自主提问,教师对疑难问题进行解答。2.3.2标签的关系内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:标签之前都有什么关系?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:标签的关系主要有嵌套关系和并列关系两种。知识点讲解讲解标签的关系(1)教师展示PPT,对标签的关系进行具体讲解。1.嵌套关系嵌套关系也称为包含关系,可以简单地理解为一个双标签里面包含其他的标签。例如,在HTML5的结构代码中,<html>标签和<head>标签(或<body>标签)就是嵌套关系。需要注意的是,在标签的嵌套过程中,必须先结束最靠近内容的标签,再按照由内到外的顺序依次关闭标签。在嵌套关系的标签中,通常把最外层的标签称为父级标签,里面的标签称为子级标签。只有双标签才能作为父级标签。2.并列关系并列关系也称为兄弟关系,是指两个标签处于同一级别,并且没有包含关系,例如,在HTML5的结构代码中,<head>标签和<body>标签就是并列关系。在HTML标签中,无论是单标签还是双标签,都可以拥有并列关系。(2)学生自主提问,教师对疑难问题进行解答。2.3.3标签属性内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:如何让HTML标签提供更多的信息?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:HTML5制作网页时,如果想让HTML标签提供更多的信息。例如,希望标题文本的字体为“微软雅黑”并且居中显示,段落文本中的某些名词显示为其他颜色加以突出,用户仅仅依靠HTML标签的默认显示样式是不够的,这时可以通过为HTML标签设置属性的方式来增加更多的样式。。知识点讲解讲解标签属性(1)教师展示PPT,对标签属性进行具体讲解。HTML标签设置属性的基本语法格式如下:<标签名属性1=“属性值1”属性2=“属性值2”…>内容</标签名> 在上面的语法中,标签可以拥有多个属性,属性必须写在开始标签中,位于标签名后面。属性之间不分先后顺序,标签名与属性、属性与属性之间均以空格分开。其中<p></p>标签用于定义段落文本,align为属性名,center为属性值,表示文本居中对齐,对于<p>标签还可以设置文本左对齐或右对齐,对应的属性值分别为left和right。需要注意的是,大多数属性都有默认值。(2)学生自主提问,教师对疑难问题进行解答。2.3.4头部相关标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:头部相关标签有什么用?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:网页制作时,经常需要设置页面的基本信息,如页面的标题、作者、与其他文档的关系等。为此HTML5提供了一系列的标签,这些标签通常都写在<head>标签中,被称为头部相关标签。知识点讲解讲解头部相关标签(1)教师展示PPT,对头部相关标签进行具体讲解。1.设置页面标题标签<title><title>标签用于定义HTML5页面的标题,即给网页取一个名字,该标签必须位于<head>标签之中。一个HTML5文档只能包含一对<title></title>标签,<title></title>之间的内容将显示在浏览器窗口的标题栏中,如“苏轼全集”。2.定义页面元信息标签<meta/><meta/>标签用于定义页面的元信息(元信息不会显示在页面中),可重复出现在<head>头部标签中。在HTML5中,<meta/>标签是一个单标签,本身不包含任何内容,仅仅表示网页的相关信息。通过<meta/>标签的两组属性,可以定义页面的相关参数。例如,为搜索引擎提供网页的关键字、作者姓名、内容描述,以及定义网页的刷新时间等。<meta/>标签的基本语法格式如下:<metaname="名称"content="值"/><metahttp-equiv="名称"content="值"/>在<meta/>标签中使用name和content属性可以为搜索引擎提供信息,其中name属性用于提供搜索内容的名称,content属性提供对应的搜索内容值。在<meta/>标签中使用http-equiv和content属性可以设置服务器发送给浏览器的HTTP头部信息,为浏览器显示该页面提供相关的参数标准。其中,http-equiv属性提供参数类型,content属性提供对应的参数值。默认会发送<metahttp-equiv="Content-Type"content="text/html"/>,通知浏览器发送的文件类型是HTML。具体应用如下。①设置网页关键字,name属性的值为keywords,用于定义搜索内容名称为网页关键字,content属性的值用于定义关键字的具体内容,多个关键字内容之间可以用逗号分隔,如“苏轼,苏东坡,苏轼全集,苏东坡全集,苏轼词,宋词,水调歌头,东坡居士”。②设置网页描述,name属性的值为description,用于定义搜索内容名称为网页描述,content属性的值用于定义描述的具体内容,如“苏轼(1037年1月8日—1101年8月24日),字子瞻,又字和仲,号东坡居士,世称苏东坡,汉族,眉州眉山(今属四川省眉山市)人,祖籍河北栾城,北宋文学家,书法家,画家。”③设置网页作者,name属性的值为author,用于定义搜索内容名称为网页作者,content属性的值用于定义具体的作者信息,如“苏轼”。④设置字符集,http-equiv属性的值为Content-Type,content属性的值为text/html和charset=gbk,两个属性值中间用分号隔开,用于说明当前文档类型为HTML,字符集为gbk(中文编码)。常用的国际化字符集编码格式是utf-8,常用的国内中文字符集编码格式是gbk和gb2312。当用户使用的字符集编码与当前浏览器不匹配时,网页内容就会出现乱码。⑤设置页面自动刷新与跳转,http-equiv属性的值为refresh,content属性的值为数值和url,用分号隔开,用于指定在特定的时间后跳转至目标页面,该时间默认以秒为单位。(2)学生自主提问,教师对疑难问题进行解答。任务2.4文本控制标签2.4.1页面格式化标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:怎么对网页内容进行排版?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:一篇结构清晰的文章通常会通过标题、段落、分隔线等进行结构排列,HTML5网页也不例外,为了使网页中的文字有条理地显示出来,HTML5提供了相应的页面格式化标签,如标题标签、段落标签、水平线标签和换行标签。知识点讲解讲解标题标签(1)教师展示PPT,对标题标签进行具体讲解。标题标签的基本语法格式如下:<hnalign="对齐方式">标题文本</hn>为了使网页更具有语义化(语义化是指赋予普通网页文本特殊的含义),我们经常会在页面中用到标题标签,HTML5提供了6个等级的标题,即<hl>、<h2>、<h3>、<h4>、<h5>和<h6>。默认情况下标题文字是加粗左对齐显示的,并且从<h1>到<h6>标题字号依次递减。如果想让标题文字右对齐或居中对齐,就需要使用align属性设置对齐方式。align属性的使用注意:1)一个页面中只能使用一个<h1>标签,常常被用在网站的logo部分。2)由于<h>标签拥有特殊的语义,要选择恰当的标签来构建文档结构。3)HTML5中不建议使用<h>标签的align对齐属性,一般使用CSS样式设置。(2)学生自主提问,教师对疑难问题进行解答。讲解段落标签(1)教师展示PPT,对段落标签进行具体讲解。在网页中要把文字有条理地显示出来,离不开段落标签。在网页中使用<p>标签来定义段落。<p>标签是HTML5文档中常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。<p>标签的基本语法格式如下:<palign="对齐方式">段落文本</p>在上面的语法中,align属性为<p>标签的可选属性,和标题标签<h>一样,同样可以使用align属性设置段落文本的对齐方式。通过实例9来演示段落标签<p>的用法。第8行、第9行代码分别为<h2>标签和<p>标签添加align的“center”属性值,设置居中对齐。第10行代码中的<p>标签为段落标签的默认对齐方式。(2)学生自主提问,教师对疑难问题进行解答。讲解水平线标签(1)教师展示PPT,对水平线标签进行具体讲解。在网页中我们常常会看到一些水平线将段落与段落之间隔开,使文档结构清晰,层次分明。水平线可以通过<hr/>标签来定义,基本语法格式如下:<hr属性="属性值"/><hr/>是单标签,在网页中输入一个<hr/>,即添加了一条默认样式的水平线。此外通过为<hr/>标签设置属性和属性值,可以更改水平线样式。第9行代码将<hr/>标签设置了不同的颜色、对齐方式、粗细和宽度值。第14行代码修改了<hr/>标签的颜色。(2)学生自主提问,教师对疑难问题进行解答。讲解换行标签(1)教师展示PPT,对换行标签进行具体讲解。在Word软件中,按Enter键可以将一段文字换行显示,但在网页中,如果想要将某段文本强制换行显示,就需要使用换行标签<br/>。第8行代码在文本里面显示是在同一行,但是使用了<br/>标签,而第9行、第10行代码在文本中是换行显示的,采用了按Enter键的方式换行。(2)学生自主提问,教师对疑难问题进行解答。2.4.2文本样式标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:如何对文本进行排版?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:文本样式标签可以设置一些文字效果(如字体、加粗、颜色),让网页中的文字样式变得更加丰富。知识点讲解讲解文本样式标签(1)教师展示PPT,对文本样式标签进行具体讲解。文本样式标签可以设置一些文字效果(如字体、加粗、颜色),让网页中的文字样式变得更加丰富,其基本语法格式如下:<font属性="属性值">文本内容</font>第1个段落中的文本设置为默认段落样式,第2~4个段落文本分别使用<font>标签设置了不同的文本样式。其效果如图2-19所示。(2)学生自主提问,教师对疑难问题进行解答。2.4.3文本格式化标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:什么是文本格式标签?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:在网页中,有时需要为文字设置粗体、斜体或下画线等一些特殊显示的文本效果,为此HTML5提供了专门的文本格式化标签,使文字以特殊的方式显示。。知识点讲解讲解动态网页(1)教师展示PPT,对文本格式化标签进行具体讲解。第8行代码设置段落文本正常显示,第9~13行代码分别给段落文本应用不同的文本格式化标签,使文字产生特殊的显示效果。(2)学生自主提问,教师对疑难问题进行解答。2.4.4文本语义标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:什么是文本语义标签?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:文本语义标签主要用于向浏览器和开发者描述标签的意义,它是供机器识别的标签,浏览者只能看到显示样式的差异。有些文本语义标签可以突出文本内容的层次关系,方便搜索引擎查找,提高浏览器的解析速度。在HTML5中,文本语义标签有很多。知识点讲解讲解<time>标签(1)教师展示PPT,对<time>标签进行具体讲解。<time>标签用于定义时间或日期,可以代表24小时中的某一时间。<time>标签不会在浏览器中呈现任何特殊效果,但是该元素能够以机器可读的方式对日期和时间进行编码,用户能够将生日提醒或其他事件添加到日程表中,搜索引擎也能够生成更智能的搜索结果。<time>标签有以下两个属性。datetime属性,用于定义相应的时间或日期。取值为具体时间(如9:00)或具体日期(如2020-09-01),不定义该属性时,由文本的内容给定日期或时间。pubdate属性,用于定义<time>标签中的文档(或article元素)发布日期。取值一般为“pubdate”。(2)学生自主提问,教师对疑难问题进行解答。讲解<mark>标签(1)教师展示PPT,对<mark>标签进行具体讲解。<mark>标签的主要功能是在文本中高亮显示某些字符,该标签的用法与<em>标签和<strong>标签有相似之处,但是使用<mark>标签在突出显示样式时更随意灵活。(2)学生自主提问,教师对疑难问题进行解答。讲解<cite>标签(1)教师展示PPT,对<cite>标签进行具体讲解。<cite>标签可以创建一个引用,用于对文档引用参考文献的说明,一旦在文档中使用了该标签,被标注的文档内容将以斜体的样式展示在页面中,以区别于段落中的其他字符。(2)学生自主提问,教师对疑难问题进行解答。2.4.5特殊字符标签内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:特殊字符标签有什么用?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:在浏览网页时常常会看到一些包含特殊字符的文本,如数学公式、版权信息等。在网页上显示这些包含特殊字符的文本时,需要特殊字符标签。知识点讲解讲解常用的特殊字符标签(1)教师展示PPT,对常用的特殊字符标签进行具体讲解。(2)学生自主提问,教师对疑难问题进行解答。任务2.5图像标签2.5.1常见的图像格式内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:常见的图像格式有哪些?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:GIF格式、PNG格式、JPG格式。知识点讲解讲解常见的图像格式(1)教师展示PPT,对常见的图像格式进行具体讲解。1.GIF格式GIF格式突出的特点是支持动画,同时GIF也是一种无损的图像格式,也就是说修改图片之后,图片质量没有损失。再加上GIF支持透明,因此很适合在浏览器上使用,但GIF只能处理256种颜色,因此在网页制作中GIF格式常常用于Logo、小图标及其他色彩相对单一的图像。2.PNG格式PNG包括PNG-8和真色彩PNG(PNG-24和PNG-32)。它的优势是体积小,支持透明(全透明、半透明、全不透明),并且颜色过渡更平滑,但PNG不支持动画。其中PNG-8和GIF类似,只能支持256种颜色。3.JPG格式JPG所能显示的颜色比GIF和PNG-8丰富,可以用于保存超过256种颜色的图像,但是JPG是一种有损压缩的图像格式,这就意味着每修改一次图片都会造成一些图像数据的丢失。JPG是特别为照片图像设计的文件格式,网页制作过程中类似于照片的图像,比如横幅广告(banner)、商品图片、较大的插图等都可以保存为JPG格式。(2)学生自主提问,教师对疑难问题进行解答。2.5.2图像标签及常用属性内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:网页中如何插入图像?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:在网页中显示图像就需要使用图像标签。知识点讲解讲解图像标签及常用属性(1)教师展示PPT,对图像标签及常用属性进行具体讲解。在网页中显示图像就需要使用图像标签,接下来将详细介绍图像标签<img/>和与它相关的属性。图像标签的基本语法格式如下:<imgsrc="图像url"/>在上面的语法中,src属性指定图像文件的路径和文件名,是<img/>标签的必需属性。要想在网页中灵活地使用图像,除src属性外,HTML还为<img/>标签提供了常用属性。1.alt属性有时页面中的图像可能无法正常显示,如图片加载错误,浏览器版本过低等。因此,为页面上的图像添加替换文本是个很好的方式,在图像无法显示时告诉用户该图片的信息,这就需要使用图像的alt属性。2.width和height属性通常情况下,如果不为<img/>标签设置宽度和高度属性,图片会按照它的原始尺寸显示。通过width和height属性可以自定义图片的宽度和高度。通常我们只设置其中的一个属性,另一个属性则会依据前一个属性将原图等比例缩放显示。如果同时设置两个属性,且其比例和原图大小的比例不一致,显示的图像就会变形或失真。3.border属性网页默认情况下图像是没有边框的,通过border属性可以为图像添加边框,设置边框的宽度。通过实例18来演示使用border、width和height属性同时对图像进行修饰。4.vspace和hspace属性在网页中,由于排版需要,有时候还需要调整图像的边距。HTML5中通过vspace和hspace属性可以分别调整图像的垂直边距和水平边距。5.align属性图文混排是网页中很常见的排版方式,默认情况下图像的底部会与文本的第一行文字对齐。注意:(1)网页制作中并不建议图像标签<img/>直接使用border、vspace、hspace及align属性,而是用CSS样式替代。(2)网页制作中装饰性的图像不直接插入<img/>标签,一般通过CSS设置背景图像来实现。(2)学生自主提问,教师对疑难问题进行解答。2.5.3相对路径和绝对路径内容学习分组讨论对新课进行讲解前,先让学生分组讨论以下问题:计算机中文件的位置怎么表示?请小组代表对以上问题发表见解。教师对上述问题进行解释:答案:文件在计算机中的位置是通过路径来表示的,网页中的路径通常分为绝对路径和相对路径两种。知识点讲解讲解相对路径和绝对路径(1)教师展示PPT,对相对路径和绝对路径进行具体讲解。1.绝对路径绝对路径就是网页上的文件或目录在硬盘上的真正路径,如实例20所示的图片路径即为绝对路径。实例20绝对路径C:\Users\Administrator\Desktop\网页设计与制作\项目二案例\实例19使用align属性2.相对路径相对路径就是相对于当前文件的路径。相对路径没有盘符,通常是以网页文件为起点,通过层级关系描述目标图像的位置。相对路径的设置分为以下3种。(1)图像文件和网页文件位于同一个文件夹中,只需输入图像文件的名称即可,如<imgsrc="logo.gif"/>。(2)图像文件位于HTML文件的下一级文件夹,上下级文件之间用“/”隔开,如<imgsrc="img/img01/logo.gif"/>。(

温馨提示

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

评论

0/150

提交评论