HTML CSS DIV网页设计与布局（第3版）（微课版）-教案 第2章 网页文字和图片

网页设计与制作授课教案学年第学期学院（部）专业（学部）课程名称电子商务网页设计与制作任课教师课内形式理论教学□课内实践□理实一体习题复习□考核评价□其他活动□学习量安排课内：课外形式调查分析小组研讨□实践任务理论探究□考核评价□汇报展示□其他活动课外：序号2授课日期月日月日月日月日授课班级课内教学内容：第2章网页文字和图片课外学习任务：（1）课前：以小组为单位，讨论网页中出现的文本和图片内容并以PPT的形式记录下来。（2）课后：在网页中可以轻松展示文本和图片。教学目标：知识目标掌握文字在网页中的使用；掌握图片在网页中的使用；能力目标能够了解文字在网页中的各种排版方式；能够掌握在网页中添加图片；能够实现对图片样式的设置。素质目标较强的专业知识和技术能力；丰富知识结构，提升专业知识；能高效的掌握网页中文本和图片如何使用的相关内容。重点难点及解决方法：（1）重点：掌握通过HTML对文本样式的的设置解决方法：通过课堂练习+启发式教学的方法，教师通过讲解HTML对文本样式的设置，引导学生积极思考，掌握各种文本相关的标签和属性使用规则；同时通过配套示例，使学生深入掌握HTML中与文本相关的各种标签和属性的使用；培养学生的思维能力和分析问题解决问题的能力。（2）难点：掌握通过HTML设置图片的各种样式解决方法：通过案例解析+启发式教学讲解的方式，细致讲解使用网页中设置图片的相关内容。帮助学生加深掌握图片相关标签和属性的相关知识。从实用的角度帮助学生提高专业知识。课内教学授课地点：教学媒体：微课、PPT课件、网页图片、相关教学视频等。设备及材料：多媒体计算机、多媒体教学广播软件、网页素材图片、教学载体源文件等。其它资源：与本次课相关的专业技术论文电子版。学习效果评价方式：对理论知识学习效果评价：采用课堂提问、课后习题和查阅技术论文研读笔记的方式；对技能的评价：教师对学生上交网页作品按制作要求进行综合性评价；对职业素养的评价：采用学生自评、小组内评价和教师评价相结合的方式。课后小结：填表说明：1.序号，指该课程授课的顺序号，应与授课计划一致；2.授课形式在相应的选项打“√”。课内教学内容及过程时间分配方法及手段1.文字格式（教学重点）【文字大小】在HTML中，<font>标签可以通过属性设置文字的样式，包括文字的大小、颜色、字体等。其中，设置文字大小的属性为size。其语法格式如下。<fontsize="n">文字</font>其中，n的有效范围是1~7。【字体】1．设置网页字体设置网页文字字体可使用<font>标签的face属性，其语法格式如下。<fontface="字体名称">文字</font>其中，face属性值为字体的名称。要想知道自己计算机中安装了什么字体，可以在操作系统所在磁盘的Windows\Fonts目录下看到，如图2.2所示，在“预览、删除或者显示和隐藏计算机上安装的字体”栏下的都是可用的字体。图2.2计算机上安装的字体2．设置浏览器默认字体需要注意的是，在示例2-2中显示的字体在设计者的计算机上可以正常浏览，但是换成在其他计算机上就不一定可以正常浏览了。例如，在该文件中指定了“华文行楷”字体，如果读者的计算机中没有安装这种字体，浏览器就会用默认的字体来显示这种字体。不同的浏览器中都可以设置指定的字体为网页默认字体。【字体颜色】如果没有设置网页文字字体的颜色，那么这个网页中的文字就是黑白的。使用<font>标签的color属性可以为文字设置不同的颜色，其语法格式如下。<fontcolor="颜色">文字</font>颜色可以有两种表示方法：颜色名称与RGB颜色数值。颜色名称就是类似red、blue等颜色的英文名。RGB颜色是由红色、绿色、蓝色的组合来指定的一种颜色，任何一种颜色都可以用0~255的一个数值表示，但必须使用十六进制的数字来表示这些组合。例如，一种颜色的RGB代码为“#FFC0CB”，就代表它是用强度为FF（也就是255）的红色、强度为C0的绿色与强度为CB的蓝色混合成的颜色，也就是粉红色。注意：使用RGB颜色，必须在十六进制组合前加上“#”字符。绝大多数浏览器都能识别以下16种预定义的颜色：red（红色）、yellow（黄色）、blue（蓝色）、navy（深蓝色）、green（绿色）、lime（浅绿色）、aqua（碧绿色）、olive（橄榄绿）、black（黑色）、gray（灰色）、silver（银色）、maroon（栗色）、purple（紫色）、fuchsia（紫红色）、teal（深青色）和white（白色）。【加粗与斜体】通常在处理文字时，都会对比较重要的内容使用加粗、斜体来引起读者的注意。在网页上同样可以使用加粗与斜体来达到相同的效果。在HTML中，可以用<b>标签来加粗文字，用<i>标签来使文字倾斜。除了<b>标签与<i>标签之外，还可以用<strong>标签来加粗文字，用<em>标签来使文字倾斜。设置加粗与斜体的语法格式如下。<b>加粗的文字</b><i>倾斜的文字</i><strong>加粗的文字</strong><em>倾斜的文字</em>【插入线与删除线】在文字展示过程中，我们有时需要强调一些新插入的内容和被删除的内容，此时就需要使用到插入线（在文本下方添加一条横线）和删除线（在文本上覆盖一条横线）来标明插入的文字和删除的文字。在HTML中可以使用<ins>标签实现向指定文字添加插入线的效果，并使用<del>标签实现向指定文字添加删除线的效果。插入线与删除线标签的语法格式如下。<ins>插入的文本内容</ins><del>删除的文本内容</del>【上标与下标】在描述一些复杂的表达式，特别是一些数学公式时，经常会用到上标和下标，如3的平方（32）。在HTML页面中，上标使用<sup>标签实现，下标使用<sub>标签实现。上标和下标标签的语法格式如下。^{作为上标的文字}_{作为下标的文字}2.文字排版【文本缩进】在HTML中，文本缩进使用<blockquote>标签实现。该标签主要用于设置文本的缩进效果，从而使页面的文字布局更加错落有致。文本缩进标签的语法格式如下。<blockquote>需要进行缩排的文字</blockquote>需要注意的是，<blockquote>标签可以嵌套使用，每使用一次，文本就缩进一次。【段落】在HTML中，使用<p>标签可以区分一个段落与另一个段落，在<p>与</p>标签之间的文字是一个段落。其语法格式如下。<p>一段文字</p>【预定义格式】通过前面的学习可以知道，在HTML源代码中，即使文字已经换行，但是只要没有使用<br/>标签，在浏览器里显示出来的文字也不会换行。如果想在浏览器中显示源代码中保留所有文本内容的排版格式，包括文字之间的空白（如空格、制表符等），可以使用<pre>标签。使用<pre>标签相当于设置了一个“块”，这个块中可以保留源代码中的所有文本格式，让文本的格式（除HTML标签外）在浏览器中按原样显示出来。其语法格式如下。<pre>设置了格式的文字</pre>例如，源代码中的文本内容之间有10个空格，在浏览器也会显示这10个空格；源代码中有一个换行，在浏览器中也会显示一个换行，不再需要使用<br/>标签来强制换行。【水平分隔线】当页面内容比较烦琐时，可以在段与段之间插入一条水平分隔线来使页面层次分明、便于阅读。在HTML中可以使用<hr/>标签来创建一条水平分隔线，其语法格式如下。<hralign="对齐方式"width="宽度"size="高度"color="颜色"noshade/><hr/>标签中的属性说明如下。align属性的值可以为left（左对齐）、center（居中）和right（右对齐）3种。width属性代表宽度。其值可以有两种表示法：一种是百分数，代表水平分隔线占浏览器窗口宽度的百分比；另一种是像素，代表水平分隔线宽度占多少像素。size属性代表水平分隔线的高度，其值为数字。color属性代表水平分隔线的颜色，默认为黑色。noshade属性代表水平分隔线不显示阴影，默认情况下水平分隔线是显示阴影的。3.在网页中插入图片（教学难点）在网页中可以插入Logo（网站标志）、Banner（横幅广告）、照片等各种图片。合理应用图片，可以让网页看起来更美观、重点更突出、形式更活泼，也可以使浏览更方便。在HTML中可以通过<img>标签插入图片，其语法格式如下。<imgsrc="url"alt="替代文本"name="名字"width="宽度"height="高度"border="边框"align="对齐方式"id="编号"><img>标签的属性很多，上面的语法格式中只包含了常用的8个属性。这8个属性的具体说明如下。src：用于指定图片所在位置，可以是相对路径或绝对路径。alt：用于指定替代图片的文本。当图片不能正常显示出来时，可以使用该文本替代图片。name：用于设置图片的名称，很多时候可以被省略。width：用于指定图片的宽度。height：用于指定图片的高度。border：用于指定图片的边框大小。该属性的值越大，边框的线条就越粗。align：用于设置图片的对齐方式。该属性有5个值：left、right、top、middle和bottom，分别表示左对齐、右对齐、顶部对齐、居中对齐和底部对齐方式。id：用于设置图片的编号，也可以被省略。在同一个HTML文件中不允许出现相同的id，但可以出现相同的name。4.HTML5文档结构标签HTML5标准中提供了很多个关于文档结构方面的标签，这些标签可以更加准确地表达网页的结构和语义。HTML5新增的文档结构标签可以更好地辅助搜索引擎对网页的结构和内容进行识别，让搜索引擎更容易实现对网页内容的抓取和收录，但是这些标签不能为网页内容添加样式。HTML5的文档结构标签如下所示。<article>：用于定义内容，内容本身必须是有意义的且必须是独立于文件的其余部分，如一篇文章、一个帖子、博客的博文、一段评论等。<header>：用于定义文件或者文件的一部分区域的页眉，如一段介绍内容。<nav>：用于定义页面中的导航部分，导航包括顶部导航、侧边栏导航、页内导航等。<section>：用于定义文件的指定区域，如章节、文件头部、文件底部或者文件的其他区域。<aside>：用于定义页面正文之外的内容。该标签定义的内容要与附近的内容相关，如附属信息、引用、相关推荐、广告等。<footer>：用于定义页脚部分，如该标签会包含文件创作者的姓名、文件的版权信息、使用条款的链接、联系信息等。5.教学评价【组织阶段考核与学生自评互评、展示考核结果】本次课的考核注重过程评价：课上考核包括专业能力与职业素养两方面。展示本次课《职业素养评价表》，组织学生自评、互评。6.上机指导使用<font>标签设置网页中文字的大小、颜色和字体样式。使用与文字排版相关的标签来设置段落文字的样式。7.板书设计文字格式文字排版在网页中插入图片HTML5文档结构标签上机指导课外学习任务及学习指导课前：【教师布置调研任务】调研主题：《了解文字和图片相关标签和属性的使用规则》要求：以小组为单位，通过网络查找的方式了解文字和图片相关标签和属性的使用规则。制作汇报PPT，提交到“微信群”。【学生调研，教师线上指导】学生采用线上调研的方式，开展调研。教师使用“微信群”对学