用HTML设置文本和图像

《用HTML设置文本和图像》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、网页制作综合技术教程第1部分HTML网页设计第2章用HTML设置文本和图像文本排版2.1文字列表2.2HTML标记与HTML属性2.3特殊文字符号2.5HTML标记和属性的局限性2.4设置图片的尺寸2.7设置图像的替换文本2.8利用Dreamweaver代码视图提高效率2.10利用Dreamweaver设置文本和图像2.9使用图像2.6在各种各样的网页中，文字和图像是最基本的两种网页元素。文字和图像在网页中可以起到传递信息、导航和交互等作用。在网页中添加文字和图像并不困难，更重要问题是要如何编排这些内容以及控制它们的显示方式，让文

2、字和图像看上去编排有序、整齐美观，这就是本章要向读者所介绍的内容。通过对本章的学习，读者可以掌握如何在网页中合理使用文字和图像，如何根据需要选择不同的显示效果。2.1文本排版2.1.1实现段落与段内换行2.1.2设置标题图2.4段落与标题的效果2.1.3使文字水平居中图2.5居中显示2.1.4设置文字段落的缩进图2.6段落缩进2.2文字列表2.2.1建立无序列表图2.7不带有序号的列表2.2.2建立有序列表图2.8带有序号的列表2.3HTML标记与HTML属性在大多数HTML标记中都可以加入属性控制，属性的作用是帮助HTML标记进

3、一步控制HTML文件的内容，如内容的对齐方式，文字的大小、字体、颜色，网页的背景样式，图片的插入等。其基本语法为：<标记名称属性名1=“属性值1”属性名2=“属性值2”……>2.3.1控制段落的水平位置图2.9段落对齐方式2.3.2设置背景颜色图2.10通过标记的属性控制字体颜色和背景颜色2.4HTML标记和属性的局限性2.5特殊文字符号图2.13在网页中使用特殊符号图2.14运算式2.6使用图像图片是网页中不可缺少的元素，巧妙地在网页中使用图片可以为网页增色不少。这里首先介绍在网页中常用的两种图片格式，然后再介绍如

4、何在网页中插入图片，以及设置图片的样式和插入的位置。通过对本章的学习，读者可以制作简单的图文网页，并根据自己的喜好制作出不同的图片效果。2.6.1网页中的图像格式2.6.2简单案例图2.15在网页中使用图片2.6.3文件路径为了更好地说明“路径”这个非常重要的概念，这里举一个生活中的例子作为类比。计算机中的文件都是按照层次结构保存在一级一级的文件夹中的，这就好像是学校分为若干个年级，每个年级又分为若干个班级。比如说，在3年级2班中，有两个学生分别叫“小龙”和“小丽”，可以画一个示意图，如图2.17所示。图2.17班级结构示意图图2

5、.18文件系统结构示意图2.7设置图片的尺寸图2.19在Windows中查看图像的尺寸图2.20设置图像的显示尺寸2.8设置图像的替换文本图2.21alt属性的作用2.9利用Dreamweaver设置文本和图像2.10利用Dreamweaver代码视图提高效率上一节中介绍了如何使用Dreamweaver可视化的方法制作网页，实际上Dreamweaver也提供了方便的代码编写功能。前面曾经谈到，页面在浏览器中的最终显示效果完全是由HTML代码决定的，Dreamweaver只是帮助用户方便地插入或者生成必要的代码。在实际工作中，还是经

6、常会遇到通过可视化的方式生成的代码并不能获得最佳效果的情况，这时就需要设计师对代码进行手工调整，这个工作可以在Dreamweaver文档窗口的“代码”视图中完成。2.10.1代码提示图2.32代码提示功能2.10.2代码折叠图2.35选中一些代码图2.36将代码折叠起来2.10.3拆分视图与代码快速定位图2.37使用拆分视图对代码进行快速定位