《Web前端开发》教学讲义 Web前端设计基础 项目二-1.docxVIP

教学课题 项目2 网页中的文本的排版—2.1项目描述、2.2知识准备 授课班级 授课时间 教学目标 知识目标 1.掌握在网页中添加各种文本的方法； 2.掌握文本排版常用的标签。 能力目标 1.培养学生自主学习、分析问题和解决问题的能力； 2.培养学生熟练运用所学知识的能力。 德育目标 1.鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2.培养学生的团队合作精神。 学情分析 通过项目1的学习，已经掌握了HTML基本概念和编写方法及浏览HTML文件的方法，初步了解了HTML。 网页的外观是否美观，很大程度上取决于其排版。在页面中出现大段的文字，通常采用分段进行规划，对换行也有极其严格的划分。本项目从添加文字、图片、列表等细节设置开始，让大家学习后能利用标签自如地处理大段文字的排版和简单的图文混排。 教学重点 1.网页中各种文本的添加； 2.文本格式化标签； 3.文字的排版标签。 教学难点 1.添加特殊字符文本； 2.文本格式化标签； 3.文字的排版标签。 教学方法 项目教学法、多媒体辅助教学法、讲练结合法 教学过程 教学环节 教学内容 师生活动 新课导入 给学生展示一个网页页面，通过页面中文本及文本格式，导入本节课的内容。 教师提出问题，学生可分组讨论，协作探究。 技能学习 一、添加文本 1.添加普通文本 两种方法，一是在需要的位置直接输入汉字或字符，二是使用复制、粘贴的方法。 2.添加特殊字符文本 在HTML代码中输入该特殊字符相对应的代码。这些特殊字符相对应的代码都是以“”开头，以“;”（注意是英文分号）结束的。如不断行的空格用“nbsp;”来表示。 特殊符号 名称 HTML代码 双引号（英文） quot; ‘ 左单引号 lsquo; ’ 右单引号 rsquo; × 乘号 times; ÷ 除号 divide; 小于号 lt; 大于号 gt; 与符号 amp; — 长破折号 mdash; | 竖线 #124; § 分节符 sect; ? 版权符 copy; ? 注册商标 reg; ? 商标 trade; € 欧元 euro; ￡ 英镑 pound; ￥ 日元 yen; ° 度 deg; 对于部分键盘上没有的字符，可以借助中文输入法的软键盘。 3.文本格式化标签 ①粗体标签b、strong ②斜体标签i、em ③上标标签sup和下标标签sub ④删除线标签s和下划线标签u 【例2-1】文本格式化标签实例，代码如下所示。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title文本格式化标签标签实例/title 6 /head 7 body 8 p粗体标签/p 9 b使用ltbgt标签的粗体文本/bbr 10 strong使用ltstronggt标签的粗体文本/strong 11 hr 12 p斜体标签/p 13 p使用ltigt标签的斜体文本/p 14 p使用ltemgt标签的斜体文本/p 15 hr 16 p上标、下标标签/p 17 p使用ltsupgt标签的sup上标文本/sup/p 18 p使用ltsubgt标签的sub下标文本/sub/p 19 hr 20 p删除线标签/p 21 p使用ltsgt标签的s删除线标签/s/p 22 hr 23 p下划线标签/p 24 p使用ltugt标签的u下划线标签/u/p 25 /body 26 /html 在浏览器中预览效果如图所示。 二、文本排版 1.换行标签br 换行标签br是一个单标签，作用是将文字在一个段内强制换行。一个br标签代表一个换行，连续的多个标签可以实现多次换行。 2.段落标签p 段落标签是双标签，即p/p，在p开始标签和/p结束标签之间的内容形成一个段落。段落标签会自动换行，并且段落与段落之间有一定的空隙。 3.标题标签h1~h6 各种级别的标题由h1~h6元素来定义，其中h1标题的重要性最高，h6标题最低。一般一个页面只能有一个h1，而h2~h6可以有多个。 【例2-2】标题标签实例，代码如下所示（示例文件2-2.html）。 1 !DOCTYPE html 2 html lang=en 3 head 4 meta charset=UTF-8 5 title标题标签实例/title 6 /head 7