1、网页制作综合技术教程 第1部分HTML网页设计 第2章用HTML设置文本和图像 在各种各样的网页中 文字和图像是最基本的两种网页元素 文字和图像在网页中可以起到传递信息 导航和交互等作用 在网页中添加文字和图像并不困难 更重要问题是要如何编排这些内容以及控制它们的显示方式 让文字和图像看上去编排有序 整齐美观 这就是本章要向读者所介绍的内容 通过对本章的学习 读者可以掌握如何在网页中合理使用文字和图像 如何根据需要选择不同的显示效果 2 1文本排版 2 1 1实现段落与段内换行2 1 2设置标题 图2 4段落与标题的效果 2 1 3使文字水平居中 图2 5居中显示 2 1 4设置文字段落的缩进
2、 图2 6段落缩进 2 2文字列表 2 2 1建立无序列表 图2 7不带有序号的列表 2 2 2建立有序列表 图2 8带有序号的列表 2 3HTML标记与HTML属性 在大多数HTML标记中都可以加入属性控制 属性的作用是帮助HTML标记进一步控制HTML文件的内容 如内容的对齐方式 文字的大小 字体 颜色 网页的背景样式 图片的插入等 其基本语法为 2 3 1控制段落的水平位置 图2 9段落对齐方式 2 3 2设置背景颜色 图2 10通过标记的属性控制字体颜色和背景颜色 2 4HTML标记和属性的局限性 2 5特殊文字符号 图2 13在网页中使用特殊符号 图2 14运算式 2 6使用图像 图
3、片是网页中不可缺少的元素 巧妙地在网页中使用图片可以为网页增色不少 这里首先介绍在网页中常用的两种图片格式 然后再介绍如何在网页中插入图片 以及设置图片的样式和插入的位置 通过对本章的学习 读者可以制作简单的图文网页 并根据自己的喜好制作出不同的图片效果 2 6 1网页中的图像格式2 6 2简单案例 图2 15在网页中使用图片 2 6 3文件路径 为了更好地说明 路径 这个非常重要的概念 这里举一个生活中的例子作为类比 计算机中的文件都是按照层次结构保存在一级一级的文件夹中的 这就好像是学校分为若干个年级 每个年级又分为若干个班级 比如说 在3年级2班中 有两个学生分别叫 小龙 和 小丽 可以
4、画一个示意图 如图2 17所示 图2 17班级结构示意图 图2 18文件系统结构示意图 2 7设置图片的尺寸 图2 19在Windows中查看图像的尺寸 图2 20设置图像的显示尺寸 2 8设置图像的替换文本 图2 21alt属性的作用 2 10利用Dreamweaver代码视图提高效率 上一节中介绍了如何使用Dreamweaver可视化的方法制作网页 实际上Dreamweaver也提供了方便的代码编写功能 前面曾经谈到 页面在浏览器中的最终显示效果完全是由HTML代码决定的 Dreamweaver只是帮助用户方便地插入或者生成必要的代码 在实际工作中 还是经常会遇到通过可视化的方式生成的代码并不能获得最佳效果的情况 这时就需要设计师对代码进行手工调整 这个工作可以在Dreamweaver文档窗口的 代码 视图中完成 2 10 1代码提示 图2 32代码提示功能 2 10 2代码折叠 图2 35选中一些代码 图2 36将代码折叠起来 2 10 3拆分视图与代码快速定位 图2 37使用拆分视图对代码进行快速定位
