第2章用HTML设置文本和图像.ppt

1、网页制作综合技术教程第第1部分部分 HTML网页设计网页设计 文本排版文本排版2.12.1文字列表文字列表2.22.2 HTMLHTML标记与标记与HTMLHTML属性属性2.32.3特殊文字符号特殊文字符号2.52.5 HTMLHTML标记和属性的局限性标记和属性的局限性2.42.4 设置图片的尺寸设置图片的尺寸2.72.7设置图像的替换文本设置图像的替换文本2.82.8 利用利用DreamweaverDreamweaver代码视图提高效率代码视图提高效率2.102.10利用利用DreamweaverDreamweaver设置文本和图像设置文本和图像2.92.9使用图像使用图像2.62.6

2、在各种各样的网页中，文字和图像是最在各种各样的网页中，文字和图像是最基本的两种网页元素。基本的两种网页元素。 文字和图像在网页中可以起到传递信息、文字和图像在网页中可以起到传递信息、导航和交互等作用。导航和交互等作用。 在网页中添加文字和图像并不困难，更在网页中添加文字和图像并不困难，更重要问题是要如何编排这些内容以及控制它重要问题是要如何编排这些内容以及控制它们的显示方式，让文字和图像看上去编排有们的显示方式，让文字和图像看上去编排有序、整齐美观，这就是本章要向读者所介绍序、整齐美观，这就是本章要向读者所介绍的内容。的内容。 通过对本章的学习，读者可以掌握如何通过对本章的学习，读者可以掌握如

3、何在网页中合理使用文字和图像，如何根据需在网页中合理使用文字和图像，如何根据需要选择不同的显示效果。要选择不同的显示效果。2.1 2.1 文文 本本 排排 版版 2.1.1 2.1.1 实现段落与段内换行实现段落与段内换行 2.1.2 2.1.2 设置标题设置标题 图图2.4 段落与标题的效果段落与标题的效果2.1.3 2.1.3 使文字水平居中使文字水平居中图图2.5 居中显示居中显示2.1.4 2.1.4 设置文字段落的缩进设置文字段落的缩进图图2.6 段落缩进段落缩进2.2 2.2 文文 字字 列列 表表 2.2.1 2.2.1 建立无序列表建立无序列表 图图2.7 不带有序号的列表不带

4、有序号的列表2.2.2 2.2.2 建立有序列表建立有序列表图图2.8 带有序号的列表带有序号的列表2.3 HTML2.3 HTML标记与标记与HTMLHTML属性属性 在大多数在大多数HTMLHTML标记中都可以加入属性标记中都可以加入属性控制，属性的作用是帮助控制，属性的作用是帮助HTMLHTML标记进一步标记进一步控制控制HTMLHTML文件的内容，如内容的对齐方式，文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样文字的大小、字体、颜色，网页的背景样式，图片的插入等。式，图片的插入等。 其基本语法为：其基本语法为： 2”2.3.1 2.3.1 控制段落的水平位置控制段落

5、的水平位置图图2.9 段落对齐方式段落对齐方式2.3.2 2.3.2 设置背景颜色设置背景颜色图图2.10 通过通过标记的属性标记的属性控制字体颜色和背景颜色控制字体颜色和背景颜色2.4 HTML2.4 HTML标记和属性的局限性标记和属性的局限性2.5 2.5 特殊文字符号特殊文字符号图图2.13 在网页中使用特殊符号在网页中使用特殊符号 图图2.14 运算式运算式2.6 2.6 使使 用用 图图 像像 图片是网页中不可缺少的元素，巧妙地图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。在网页中使用图片可以为网页增色不少。 这里首先介绍在网页中常用的两种图片这里首先介绍在

6、网页中常用的两种图片格式，然后再介绍如何在网页中插入图片，格式，然后再介绍如何在网页中插入图片，以及设置图片的样式和插入的位置。以及设置图片的样式和插入的位置。 通过对本章的学习，读者可以制作简单通过对本章的学习，读者可以制作简单的图文网页，并根据自己的喜好制作出不同的图文网页，并根据自己的喜好制作出不同的图片效果。的图片效果。 2.6.1 2.6.1 网页中的图像格式网页中的图像格式 2.6.2 2.6.2 简单案例简单案例 图图2.15 在网页中使用图片在网页中使用图片2.6.3 2.6.3 文件路径文件路径 为了更好地说明为了更好地说明“路径路径”这个非常重要这个非常重要的的概念，这里举

7、一个生活中的例子作为类比。概念，这里举一个生活中的例子作为类比。 计算机中的文件都是按照层次结构保存计算机中的文件都是按照层次结构保存在一级一级的文件夹中的，这就好像是学校在一级一级的文件夹中的，这就好像是学校分为若干个年级，每个年级又分为若干个班分为若干个年级，每个年级又分为若干个班级。级。 比如说，在比如说，在3年级年级2班中，有两个学生分班中，有两个学生分别叫别叫“小龙小龙”和和“小丽小丽”，可以画一个示意，可以画一个示意图，图，如图如图2.17所示。所示。 图图2.17 班级结构示意图班级结构示意图 图图2.18 文件系统结构示意图文件系统结构示意图2.7 2.7 设置图片的尺寸设置图

8、片的尺寸图图2.19 在在Windows中查看图像的尺寸中查看图像的尺寸 图图2.20 设置图像的显示尺寸设置图像的显示尺寸 2.8 2.8 设置图像的替换文本设置图像的替换文本图图2.21 alt属性的作用属性的作用2.9 2.9 利用利用DreamweaverDreamweaver设置文本和图像设置文本和图像2.10 2.10 利用利用DreamweaverDreamweaver代码视图提高效率代码视图提高效率 上一节中介绍了如何使用上一节中介绍了如何使用Dreamweaver可视化的方法制作网页，实际上可视化的方法制作网页，实际上Dreamweaver也提供了方便的代码编写功能。也提供了

9、方便的代码编写功能。 前面曾经谈到，页面在浏览器中的最终前面曾经谈到，页面在浏览器中的最终显示效果完全是由显示效果完全是由HTML代码决定的，代码决定的，Dreamweaver只是帮助用户方便地插入或者只是帮助用户方便地插入或者生成必要的代码。生成必要的代码。 在实际工作中，还是经常会遇到通过可在实际工作中，还是经常会遇到通过可视化的方式生成的代码并不能获得最佳效果视化的方式生成的代码并不能获得最佳效果的情况，这时就需要设计师对代码进行手工的情况，这时就需要设计师对代码进行手工调整，这个工作可以在调整，这个工作可以在Dreamweaver文档窗文档窗口的口的“代码代码”视图中完成。视图中完成。2.10.1 2.10.1 代码提示代码提示图图2.32 代码提示功能代码提示功能2.10.2 2.10.2 代码折叠代码折叠 图图2.35 选中一些代码选中一些代码 图图2.36 将代码折叠起来将代码折叠起来2.10.3 2.10.3 拆分视图与代码快速定位拆分视图与代码快速定位图图2.37 使用拆分视图对代码进行快速定位使用拆分视图对代码进行快速定位