第三章网页文本的设计

1、列 1 号共 5 页HTML网页设计教案章节课题第三章 网页文本的设计授课日期2015年3月16日 第二周 授课时数4学时教学目的1.掌握HTML中文本的排版方法2.熟悉HTML中特殊文本的添加；3.掌握HTML文字列表的建立方法；4.熟悉HTML与文本相关的标记与属性。教学方法多媒体网络教室，采用“演播”教学法。教学重点本阶段的重点是让学生掌握HTML文档添加文本的方法及其对于文本排版修饰的手段。教学难点1.HTML特殊字符文本添加2.网页文本排版3.无序列表、有序列表及其自定义列表的创建教具、挂图 见课前准备工作作业题号 见教案：附加题教学过程及时间分配主要教学内容及步骤课前准备工作图样演

2、示素材1.第三章网页文本的设计PPT演示文稿；2.实时网站登陆演示3.HTML代码书写HTML网页设计教案（续页） 第 2 页教学过程及时间分配教学内容一、普通文本的添加1.通过键盘直接输入示例1：无标题文档2.通过复制粘贴的方式（注意的DW中选择性粘贴的方法）示例2：二、特殊字符文本的添加1特殊符号以&开头后面跟相关特殊字符示例3：在网页中展示“”代码：<；1>；（1） 半角大空白：&ensp；（2） 全角大的空白：&emsp；（3） 不断行的空白： ；（4） 小于：<；（5） 大于：>；（6） &符号：&；（7） 双引号："；（8） 版权：©；

3、（9） 已注册商标：®；（10） 乘号：×；（11） 除号：÷s；（12） 加减号：±；（13） 千分比：&permil；（14） 双向箭头：&harr；2特殊公式标记（1）为上标标记，用于将数字缩小后显示于上方；（2）为下标标记，用于将数字缩小后显示于下方；练习1：写出(63+36)21=?结果以千分比表示HTML网页设计教案（续页） 第 3 页教学过程及时间分配教学内容练习2：H2+O2=H2O运算式 (63+36)÷2±1=? 结果以&permil；表示。运算式 H2+O2↔H2O二、HTML网页文本的修饰1.

4、重要文本（1）加粗文本;（2）强调文本;（3）加强调文本2.倾斜文本倾斜文本3.设置文本旁注的文字大小4.设置已删除文本已删除文本5.设置文本方向 标签（1）从左向右显示：属性dir值为 “ltr”（2）从右向左显示：属性dir值为 “rtl”二、HTML网页文本的排版1.实现段落与段内换行（） 浏览器解释HTML代码时会忽略多余的空格和换行，不管输入多少个空格，都将HTML网页设计教案（续页） 第 4 页教学过程及时间分配教学内容被视为一个空格。按回车键换行也是无效的，如果需要换行需要使用一个标记来告诉浏览器这里需要回车操作。示例4：段落标记.用来定义网页中的一段文本，文本在一个段中会自动换

5、行。换行标记是一个单个使用的标记，“break”的缩写，作用是将文字在一个段内强制换行；2.设置标题（）类似于word文档不同级别的标题，HTML中共有6个标题标记，数字越小级别越高文字也相应越大。（3）使文字水平居中（）浏览器默认显示方式从靠左的位置开始显示文字（4）设置文字段落的缩进（）对某段文字进行缩进显示，正文的左右两侧都会距离浏览器边界增加一定的距离。（5）为网页添加水平线（）为了让网页内容更有条理的显示可以添加水平线，该标记也是单个使用的。四、设置文字列表（1）建立无序列表（）项目列表使用的一对标记是,其中每一个列表项使用结构如下：第一项第二项第三项（2）建立有序列表类似于word

6、中的自动编号功能，使用标记，每一个列表项前使用结构：第一项第二项第三项（3）建立不同类型的无序列表前面的标记符号的变化Disc项目符号列表结构：HTML网页设计教案（续页） 第 5 页教学过程及时间分配教学内容 项目1项目2项目3Circle项目符号列表结构： 项目1项目2项目3square项目符号列表结构： 项目1项目2项目3（4）建立不同类型的有序列表数字列表结构： 项目1项目2项目3字母列表结构： 项目1项目2项目3（5）建立嵌套列表HTML网页设计教案（续页） 第 6 页教学过程及时间分配教学内容示例： 第一章 第一节第二节 知识点1知识点2第二章第三章（6）自定义列表（）用来创建一个普通的列表，用来创建列表中的上层项目，用来创建列表中最下层项目，和都必须放在标志对之间。总的来说标记定义了一个定义列表，定义列表中的条目是通过使用标记(“definition title”，定