（中职）Web前端设计基础 项目二-1电子教案

1、教学课题工程2网页中的文本的排版一2.1工程描述、2.2知识准备授课班级授课时间教学目标知识目标.掌握在网页中添加各种文本的方法；.掌握文本排版常用的标签。能力目标.培养学生自主学习、分析问题和解决问题的能力；.培养学生熟练运用所学知识的能力。德育目标L鼓励学生主动学习，提高学习兴趣，提升学生的专业素质； 2 .培养学生的团队合作精神。学情分析通过工程1的学习，已经掌握了 HTML基本概念和编写方法及浏览 HTML文件的方法，初步了解了 HTML。网页的外观是否美观，很大程度上取决于其排版。在页面中出现大 段的文字，通常采用分段进行规划，对换行也有极其严格的划分。本项 目从添加文字、图片、列表

2、等细节设置开始，让大家学习后能利用标签 自如地处理大段文字的排版和简单的图文混排。教学重点.网页中各种文本的添加；.文本格式化标签；.文字的排版标签。教学难点.添加特殊字符文本；.文本格式化标签；.文字的排版标签。教学方法工程教学法、多媒体辅助教学法、讲练结合法教学过程教学环节教学内容师生活动新课导入给学生展示一个网页页面，通过页面中文本及文本格式, 导入本节课的内容。教师提巾问题，学 生可分组讨论，协作探 究。技能学习一、添加文本.添加普通文本两种方法，一是在需要的位置直接输入汉字或字符:，二 是使用复制、粘贴的方法。.添加特殊字符文本在HTML代码中输入该特殊字符相对应的代码。这些特 殊字

3、符相对应的代码都是以开头，以（注意是英文 分号）结束的。如不断行的空格用“”来表示。教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借 此查看教学效果。特殊符号名称HTML代码II双引号（英文）左单引号右单引号X乘号键盘。*除号小于号大于号&与符号&长破折号1竖线|分节符版权符注册商标TM商标欧元英镑日元O度对于局部键盘上没有的字符，可以借助中文输入法的软教师操作演示，学 生观看、实训。必要时 要求一个具有典型特 质的学生与老师互动， 共同完成操作任务，借此查看教学效果。3 .文本格式化标签粗体标签、斜体标签、上标标签（sup和下标标签删除线

4、标签vs和下划线标签vu【例2-1】文本格式化标签实例，代码如下所示。文本格式化标签标签实例v/title粗体标签v/pvb使用标签的粗体文本v/b使用<strong>标签的粗体文本斜体标签vp使用<i>标签的斜体文本vp使用<em>标签的斜体文本上标、下标标签/p使用<sup>标签的上标文本使用<sub>标签的下标文本删除线标签使用<s>标签的删除线标签教师操作演示，学下划线标签生观看、实训。必要时使用<u>标签的vu下划线标签v/u要求一个具有典型特质的学生与老师互动，共同完成操作任务，借在浏览器中预览效果如下图。此查看教学效果。V

5、0文本格式化标签标筌实例C D file：/D:/Deino/2/2-l.html =粗体标签使用标签的粗体文本使角strong标姿的粗体文本斜体标签使用标签的斜体文本使用代出标签的斜体文本上标、下标标签使用标签的上标文本使用标签的下标文本删除线标签使用标签的剧除续标签下划线标签使用心标符的下划线标签二、文本排版1 .换行标签vbr换行标签vbr是一个单标签，作用是将文字在一个段内 强制换行。一个标签代表一个换行，连续的多个标签可 以实现屡次换行。.段落标签vp段落标签是双标签，即vpv/p,在vp开始标签和v/p 结束标签之间的内容形成一个段落。段落标签会自动换行， 并且段落与段落之间有一定

6、的空隙。.标题标签vh1vh6各种级别的标题由vh6元素来定义，其中vh1标 题的重要性最高，标题最低。一般一个页面只能有一个 ,而可以有多个。【例2-2标题标签实例，代码如下所示（例如文件 2-2.html ）o1 title标题标签实例v/titlevh1山不在高，有仙那么名v/h1vh2水不在深，有龙那么灵v/h2斯是陋室，惟吾德馨v/h3vh4苔痕上阶绿，草色入帘青v/h4谈笑有鸿儒,往来无白丁vh6可以调素琴，阅金经v/h6f一口二丁口1 X- IC i file:/D:/Demo/2/2-2. html .三山不在高，有仙那么名水不在深，有龙那么灵斯是陋室，惟吾德馨苔痕上阶绿，草色

7、入市青谈笑有鸿隹，往来无白丁可以调素琴，阅金经知识归纳本节课学习了在网页中添加文本标签元素内容，掌握了 vbr等标签的使用方法。教师讲授，学生归 纳总结，并作适当的笔 记。标签格式说明-vhn标题文字v/hn(n 为 1,2,3,4,5,6)标题vp段落内容段落换行标记加粗的内容心加粗strong标记加粗的内容/strong加粗vi标记倾斜的内容v/i斜体vem标记倾斜的内容斜体上标文字v/sup上标下标文字v/sub下标删除线标记内容v/s删除线下划线标记内容v/u下划线课后作业一、选择题1 .以下是换行标签。A B C D 2.HTML文件的源代码中含有123,其作用是学生上机完成任 务并提交，进行分组互 评。OA将123以斜体显示B在123前划一条水平线C将123与其前后内容分成不同段D将123以粗体显示.如果