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

1、网页制作综合技术教程,第1部分 HTML网页设计,第2章 用HTML设置 文本和图像,在各种各样的网页中，文字和图像是最 基本的两种网页元素。 文字和图像在网页中可以起到传递信息、导航和交互等作用。,在网页中添加文字和图像并不困难，更 重要问题是要如何编排这些内容以及控制它 们的显示方式，让文字和图像看上去编排有 序、整齐美观，这就是本章要向读者所介绍 的内容。,通过对本章的学习，读者可以掌握如何 在网页中合理使用文字和图像，如何根据需 要选择不同的显示效果。,2.1 文 本 排 版,2.1.1 实现段落与段内换行 2.1.2 设置标题,图2.4 段落与标题的效果,2.1.3 使文字水平居中,

2、图2.5 居中显示,2.1.4 设置文字段落的缩进,图2.6 段落缩进,2.2 文 字 列 表,2.2.1 建立无序列表,图2.7 不带有序号的列表,2.2.2 建立有序列表,图2.8 带有序号的列表,2.3 HTML标记与HTML属性,在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进一步控制HTML文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样式，图片的插入等。,其基本语法为： ,2.3.1 控制段落的水平位置,图2.9 段落对齐方式,2.3.2 设置背景颜色,图2.10 通过标记的属性控制字体颜色和背景颜色,2.4 HTML标记和属性的局限性,2

3、.5 特殊文字符号,图2.13 在网页中使用特殊符号,图2.14 运算式,2.6 使 用 图 像,图片是网页中不可缺少的元素，巧妙地 在网页中使用图片可以为网页增色不少。,这里首先介绍在网页中常用的两种图片 格式，然后再介绍如何在网页中插入图片， 以及设置图片的样式和插入的位置。,通过对本章的学习，读者可以制作简单 的图文网页，并根据自己的喜好制作出不同 的图片效果。,2.6.1 网页中的图像格式 2.6.2 简单案例,图2.15 在网页中使用图片,2.6.3 文件路径,为了更好地说明“路径”这个非常重要的 概念，这里举一个生活中的例子作为类比。,计算机中的文件都是按照层次结构保存 在一级一级

4、的文件夹中的，这就好像是学校 分为若干个年级，每个年级又分为若干个班 级。,比如说，在3年级2班中，有两个学生分 别叫“小龙”和“小丽”，可以画一个示意图， 如图2.17所示。,图2.17 班级结构示意图,图2.18 文件系统结构示意图,2.7 设置图片的尺寸,图2.19 在Windows中查看图像的尺寸,图2.20 设置图像的显示尺寸,2.8 设置图像的替换文本,图2.21 alt属性的作用,2.9 利用Dreamweaver设置文本和图像,2.10 利用Dreamweaver代码视图提高效率,上一节中介绍了如何使用Dreamweaver 可视化的方法制作网页，实际上 Dreamweaver也提供了方便的代码编写功能。,前面曾经谈到，页面在浏览器中的最终 显示效果完全是由HTML代码决定的， Dreamweaver只是帮助用户方便地插入或者 生成必要的代码。,在实际工作中，还是经常会遇到通过可 视化的方式生成的代码并不能获得最佳效果 的情况，这时就需要设计师对代码进行手工 调整，这个工作可以在Dreamweaver文档窗 口的“代码”视图中完成。,2.10.1 代码提示,图2.32 代码提示功能,2.10.2