情境二 制作纯文本网页（教案）-《网页设计与制作》同步教学（电子工业版）

情境二 制作纯文本网页 课程名称 网页设计与制作 学时 授课时间 授课章节 情境二 制作纯文本网页 授课班级 授课教师 网页设计与制作课程组 教学目的 专业理论知识 1、 掌握网页的相关概念和术语 2、 了解网页设计的基本流程 3、 网页文件和文件夹命名规则和注意事项 4、 重要HTML标签<p>、<br>、<hr> 实际操作技能 1、 掌握HTML基本结构、单双标签、标签属性、标签嵌套规则、注释 2、 掌握标题、段落标签 3、 掌握HTML5新增元素 思政元素目标 1、 引导学生对国家相关政策的关注，培养学生的社会责任心 2、 培养学生的职业素养 知识、技能重点 1、 掌握网页的相关概念和术语 2、 了解网页设计的基本流程 3、 网页文件和文件夹命名规则和注意事项 知识、技能难点 1、 重要HTML标签<p>、<br>、<hr> 教学方法 课前、课中、课后“三课一体”螺旋渗透教学法 教具 学习通APP、腾讯会议、学习强国APP 教学过程设计 2.1 HBuilder X的工作环境 启动HBuilder X HBuilder X的界面结构 2.2 制作网页文本(模仿型任务制作) 网页效果展示 新建与设置本地站点 创建并设置站点目录结构 2.3 开放型任务制作 教学过程 【组织教学】 1、准备教学设备、软件等； 2、点名检查学生出勤情况，填写教学情况记录表； 3、发布教学资料 【复习旧课、导入新课】 1、提问：什么是网页它由哪些元素组成？最主要的元素是什么？ 2、展示两个网页，一个文本经过了格式化处理，另外一个则没有； 3、教学目的：掌握使用HBuilder X创建并设置建立站点目录结构、创建网页文档、设置首选参数、设置页面的整体属性、在网页中输入与编辑文本、对网页文件进行格式化处理的方法。 【讲授新课】 知识储备 1.1学习路线，如图2.1 图2.1纯文本学习路线 1.2 知识小天地 HTML语法基础和基本结构 前面章节已经学过HTML的基本概念，作为制作网页的基础语言，HTML是初学者必学的内容。虽然现在有许多所见即所得的网页制作工具，但是这些工作生成的代码仍然是以HTML为基础的，因此学习HTML代码端设计网页非常重要。 一个完整HTML文档分为头部和主体两部分，在文档头部对文档进行一些必要的定义，主体部分是文档要显示的信息。其基本结构如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>HTLE文档结构</title> </head> <body> <p>HTML文档结构由head,body标签组成</p> <h2>标题2</h2> </body> </html> 浏览效果如下： 图2.2 效果图 1.2.1 <!DOCTYPE>标记 <!DOCTYPE>标记位于文档的最前面，用于向浏览器说明当前文档使用哪种 HTML或 XHTML 标准规范。上面的示例使用的是 Hbuilder默认的HTML5文档。 必须在文档开头处使用<!DOCTYPE>标记为所有的XHTML文档指定 XHTML版本和类型，只有这样浏览器才能将该网页作为有效的XHTML文档，并按指定的文档类型进行解析。 1.2.2 <html>标记 <html>标记处于文档最前面，标志着HTML文档的开始，即浏览器从<html>开始解释，直到遇到</html>标记，标志着HTML文档的结束。每个HTML文档均以<html>开始，以</html>结束。在它们之间的是文档和主体内容。 语法格式如下： <html>HTML文档的内容</html> 1.2.3 <head>标记 <head>标记用于定义 HTML 文档的头部信息，也称为头部标记。<head>标记紧跟在<html>标记之后，主要用来封装其他位于文档头部的标记,如<title>、<meta>、<link>和<style>等，用来描述文档的标题、作者以及样式表等。 文档只能含有一对<head>标记。 语法格式如下： <head>头部的内容</head> 1.2.4 文档编码 为了被浏览器正确解释和通过W3C代码标准，所有的HTML文档都必须声明它们所使用的编码语言。文档声明的编码应该与实际编码一致，否则会成乱码。 文档编码格式如下： <meta charset="utf-8"/> 1.2.5 <body>标签 <body>标记用于定义 HTML.文档所要显示的内容，也称为主体标记。浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内。 它定义网页上显示的主要内容与显示格式，是整个网页的核心，网页中要真正显示的内容都包含在主体内。 一个 HTML文档只能含有一对<body>标记，且 <body>标记必须在<html>标记内,位于<head>头部标记之后，与<head>标记是并列关系。 语法格式如下： <body>网页的内容</body> 1.2.6 <title>标签 <title>标签是页面标题标签。它将 HTML文件的标题显示在浏览器的标题栏中，用以说明文件的用途。这个标签只能应用于<head>与</head>之间。<title>标签是对文件内容的概括。一个好的标题能使读者从中判断出该文件的大概内容。 网页的标题不会显示在文本窗口中，而以窗口的名称显示出来，每个文档只允许有一个标题。网页的标题能给浏览者带来方便，如果浏览者喜欢该网页，将它加入书签中或保存到磁盘上，标题就作为该页面的标志或文件名。另外，使用搜索引擎时显示的结果也是页面的标题。 <title>标签位于<bead>与</head>中，用于标示文档标题，格式如下： <title>标题</title> 打开网页后，在网页文档头部定义的标题内容不在浏览器窗口中显示，而是在浏览器的标题栏中显示，尽管文档头部定义的信息很多，但能在浏览器标题栏中显示的信息只有标题内容。 1.2.7 <link>标签 <link>标签用于连接外部资源和当前HTML文档，它只在首部标签<head>和</head>中，通常用于连接外部样式表。<link>标签并不将其他实际链接到当前文档中，只是提供链接该文档的一个路径，link标签最常用的是用来链接CSS样式文件，语法格式如下： <link rel="stylesheet" href="外部样表文件名.css" type="text/css"/> 如果需要同时引入多个外部样式表文件，则需要为每一个CSS样式表文件单独使用一次<link>标签。 1.2.8 <script>标签 <script>标签是脚本标签，用于为HTML文档定义客户端脚本信息。此标签可以在文档中包含一段客户端脚本程序，可以位于文档中任何位置，但常位于<head>标签内，以便于维护。语法格式如下： <script type="text/javascript" src="脚本文件名.js"></script> HTML标记及其属性 网页中控制文本的标记有标题标记<h1>~<h6>、段落标记<p>、水平线标记<hr/>、换行标记<br/>、字体标记<font>、字符样式标记<strong>、<em>等。下面详细讲解这些标记和相应的属性设置。 1.2.9 标题标记 标题标记语法格式如下 <hn align="对齐方式">标题文字</hn> 【小说明】 使用该标记符设置文档中的标题，其中n表示1-6的数字，分别表示一到六级标题，h1表示一级标题，h6表示六级标题。 用hn表示的标题文字在浏览器中显示时默认都以黑体显示，而且标题文字单独显示为一行。 align属性表示标题文字的对齐方式，其取值如下。 (1) left：左对齐。 (2) center：居中对齐。 (3) right：右对齐。 (4) justify：两端对齐。 <hn>标记省略align属性时，默认为左对齐。 【练一练】你知道冬奥会的吉祥物是什么吗？ <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>冬奥会吉祥物</title> </head> <body> <h1>冰墩墩</h1> <h2>冰墩墩</h2> <h3>冰墩墩</h3> <h4>冰墩墩</h4> <h5>冰墩墩</h5> <h6>冰墩墩</h6> <hr /> </body> </html> 图2.3 效果图 1.2.10 段落标记 段落标记语法格式如下。 <p align="对齐方式">段落文字</p> 【小说明】 “p”是英文“paragraph（段落）”的缩写。<p>和</p>之间的文字表示一个段落，多个段落需要用多对<p>标记。 align属性表示段落的对齐方式，其取值同标题标记的align属性取值。 <p>标记省略align属性时，默认为左对齐。 【练一练】全国两会上的“基层声音” <!DOCTYPE> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>全国两会</title> </head> <body> <p>全国人大代表 马慧娟：让基层的代表把普通老百姓的心声，在全国两会上直观地展现给全国人民，也给了我们展现自己、展现家乡、展现地方的这样一个机会。 就像马慧娟在通道上讲述的那样，新时代，每个人都有成为不平凡、成就不平凡的机会。</p> <p>全国人大代表 柴闪闪：把我们劳动者的心声畅通无阻地反映上来，实际上就是全过程人民民主的体现。 代表们的故事，还吸引了一位特殊的观众。在发布厅门口，我们见到了一位并不陌生的面孔，2018年两会代表通道第一次开启时，她就曾经走上通道。</p> <p>全国人大代表 杨昌芹：证明国家要倾听民声民意，让更多的老百姓最真实的声音传递给国家和世界。全过程人民民主就是老百姓的话、老百姓的思想能够直接从最基层到最顶端，这是我理解的。</p> </body> </html> 运行如下图2.4所示。 图2.4 效果图 1.2.11 水平线标记 水平线标记语法格式如下。 <hr align="对齐方式" width="长度" size="粗细" color="颜色" /> 【小说明】 “hr”是英文“Horizontal Rule（水平线）”的缩写。其作用是绘制一条水平直线。该标记为单标记。 hr标记的主要属性如下。 （1）align：表示水平线的对齐方式，其取值有三种——left（左对齐）、center（居中对齐）、right（右对齐），默认为center，居中对齐。 （2）width：设置水平线的长度，单位可以是像素或百分比。 （3）size：设置水平线的粗细，单位是像素。 （4）color：设置水平线的颜色，可以用颜色的英文单词，也可以用十六进制#RGB表示。 1.2.12 换行标记 换行标记语法如下 <br /> 【小说明】 “br”是英文“break”的缩写。其作用是强制换行。该标记为单标记。 【注意】 （1） 使用标记<br/>换行后，换行后的文字和上面的文字保持相同的属性，仍然是同一个段落，也就是说<br/>使文字换行不换段。 （2） 在Dreamweaver CS6的设计视图下，输入一段文字后，按回车键会将文字进行分段，代码中会自动添加<p>段落标记；若按“Shift+回车键”，则给文字分行，即自动添加<br/>标记，换行不分段。 1.2.13 字体标记 字体标记语法格式如下。 <font face="字体名称" color="文字颜色" size="文字大小">文本内容</font> 【小说明】 设置网页中的文本字体、字号和颜色。 字体标记的主要属性如下。 （1） face属性：设置文字中的字体，例如，宋体、黑体和微软雅黑等。 （2） color属性：设置文字的颜色。 （3） size属性：设置文字的大小，取值范围是1-7，7号最大，1号最小，默认是2号字。 【练一练】大家学过李商隐的《无题》吗？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>字体标记</title> </head> <body> <h1 align="center"><font color="#FF0000">无题</font></h1> <hr /> <h2 align="center">李商隐</h2> <p align="center"> <font face="微软雅黑" size="4" color="#0000FF"> 昨夜星辰昨夜风，<br /> 画楼西畔桂堂东。<br /> 身无彩凤双飞翼，<br /> 心有灵犀一点通。 </font> </p> </body> </html> 运行如下图2.5所示。 图2.5 效果图 1.2.14 字体样式标记 字体样式标记可以设置文字的粗细、斜体、删除线或下划线效果，主要属性如下。 <strong>文本内容</strong>:文本以粗体显示。 <em>文本内容</em>:文本以斜体显示。 <del>文本内容</del>:文本以添加删除线方式显示。 <ins>文本内容</ins>:文本以添加下划线方式显示。 【练一练】大家学过李商隐的《无题》吗？ <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>字体标记</title> </head> <body> <h1 align="center"><font color="#FF0000">无题</font></h1> <hr /> <h2 align="center">李商隐</h2> <p align="center"> <font face="微软雅黑" size="4" color="#0000FF"> <strong>昨夜星辰昨夜风，</strong><br /> <em>画楼西畔桂堂东。</em><br /> <del>身无彩凤双飞翼，</del><br /> <ins>心有灵犀一点通。</ins> </font> </p> </body> </html> 运行如下图2.6所示。 图2.6 效果图 二、模仿型任务讲解 分析案例效果，根据案例需求，搜集一些经典的红色革命根据地作为文本内容，结合本章所学的网页标签，并完成资讯表。 制作纯文本网页资讯单 学习情景 制作红色革命根据地纯文本网页 学习任务 学时 6学时 案例描述 搜集渠道 素材要求 小组成员 参考资料 完成时间 表3-1 资讯单 2. 1红色革命根据地网页 案例学习目标 · 能够熟练建立站点 · 能够熟练使用段落标签、水平线标签、标题标签、换行标签 · 能够正确设置水平线属性 案例知识要点 · 段落标签、水平线标签、标题标签、换行标签 · 水平线标签及属性设置 红色革命根据地是党和国家红色基因库，具有很强的学习、教育功能。可以将革命历史知识、革命传统和革命精神以旅游的方式传输给广大青少年，潜移默化，行之有效。 本次红色革命根据地网页的制作，旨在让学生在搜集素材的过程中，能得到心灵的震撼、精神的激励和思想的启迪，从而更加满怀信心的投入到建设中国特色社会主义事业之中。 实现探究 2.2 案例设计思路 在具体实现过程中，可以查找一些典型的革命根据地，传递更多的红色精神；同时，网页整体设计主题要突出，内容要丰富，能给人留下深刻印象。 具体页面设计思路如下： 文字素材整理 页面设计 编码实现 测试运行 【思考】 （1）如何设置水平线的宽度、粗细和颜色？ （2）如何设置段落首行缩进两个字符？ 三、实操示范 操作步骤 打开开发工具“HBuilder X”，选择“文件”------> “新建”------>“项目”，打开如下图2.7所示对话框： 图 2.7 项目创建 写好相应的项目名称后，选择基本的HTML项目，点击创建，即可完成项目的创建。 Step02<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html> 在body标签中开始编写代码，注意代码编写要规范，统一小写。部分代码参考如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">南昌八一起义纪念馆</h3> <p> 南昌八一起义纪念馆成立于1956年，1959年10月1日正式对外开放，1961年被国务院公布为全国首批重点文物保护单位(所辖五处革命旧址-总指挥部旧址、贺龙指挥部旧址、叶挺指挥部旧址、朱德军官教育团旧址和朱德旧居)。南昌八一起义是中国共产党为反击国民党当权派屠杀共产党人和工 农群众，挽救革命，于1927年8月1日在江西省城南昌发动的武装起义。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html> Step03<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html> 编写好代码后，开始运行，选择自己安装的浏览器，建议使用谷歌浏览器。如下图所示 图 2.8 项目运行Step04<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h3 align="center">部分早期马列主义传播地</h3> <p> 十九世纪中后期，马克思恩格斯经典著作书信里，谈论过中国的对外贸易， 户部大臣王茂荫，镇江抗英军队等等，大都对中国人表示同情或赞许。 二十世纪俄国十月革命后，中国少数先进知识分子，从大城市到农村， 宣传马列主义和民主科学，唤醒民众觉悟。通常顺序是，他们走进受 压迫的大中型工矿企业，开办工人夜校培养骨干，领导罢工等运动。 但照搬欧洲革命的方法，运用到农业中国来是行不通的，要实事求是。 </p> <hr size="3px" width="620px" color="#AA0000" /> </body> </html> 案例最终效果如下图所示： 图2.9 案例综合效果图 【课堂小结】 通过本次任务的学习，我们学会了如何使用HBuilder X创建本地站点、建立站点目录结构、创建网页文档、设置首选参数、设置页面的整体属性、在网页中输入与编辑文本、对网页文件进行格式化处理得方法。 【布置作业】 1. 怎样将文本设置为粗体显示？ 2. 怎样在网页中添加特殊字符和连续的空格？ 3. 怎样插入水平线并给它设置高度和宽度及对齐？ 【创新型任务】 分小组选择制作科技强国、红色之旅、绿水青山为主题的文本网页。通过推送学习强国学习视频的绿水青山栏目、看科技栏目、看党史的红色故事栏目，搜集相关文本素材，分小组设计科技强国、红色之旅、绿水青山文本网页，渗透革命文化和社会主义先进文化教育、生态文明教育多个“思政元素点”。培养学生爱国情、强国志。 教学评价 考核要点 考核内容 标准分 计分 知识考核 (1)课前观看学习通微视频及完成微课下方进阶练习题 20   (2)能正确建立站点目录结构 (3)会正确设置页面的整体属性 (4)熟练在网页中输入与编辑文字 能力考核 (5)熟练地对网页文本进行格式化处理 30   思政考核 (6)考查学生的态度端正、时间观念强，有写作精神等方面综合评价 20   (7)搜索科技强国、红色之旅、绿水青山的文本素材，体现革命文化、社会主义先进文化、生态文明等方面进行评价分析 30   总计 100   评价方式 自我评价 小组评价 教师评价 考核得分       学科网（北京）股份有限公司 $$