上QQ阅读APP看书，第一时间看更新
4.7 实战——图文混排网页
文字和图像是网页中最基本的元素，在网页中插入图像会使得网页更加生动形象。在网页中创建图文混排网页的方法非常简单，如图4-48所示的是图文混排的效果，具体操作步骤如下。
图4-48 图文混排网页效果
原始文件：原始文件/04/实战/index.html 最终文件：最终文件/04/实战/index1.html
★提示★
如何使文字和图片内容共处？
在Dreamweaver中，图片对象是需要独占一行的，那么文字内容只能在与其平行的一行的位置上，怎么样才可以让文字围绕着图片显示呢？需要选中图片，单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”选项，这时会发现文字已经均匀地排列在图片的右边了。
步骤01 打开网页文档，如图4-49所示。
图4-49 打开网页文档
步骤02 将光标置于页面中，输入相应的文字，如图4-50所示。
图4-50 输入文字
步骤03 将光标置于文字中，执行“插入”|“图像”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像images/guoyuan.jpg，如图4-51所示。
图4-51 “选择图像源文件”对话框
步骤04 单击“确定”按钮，插入图像，如图4-52所示。
图4-52 插入图像
步骤05 选中插入的图像，单击鼠标右键，在弹出的快捷菜单中选择“对齐”|“右对齐”选项，如图4-53所示。
图4-53 设置图像的对齐方式
步骤06 保存文档，按F12键在浏览器中预览，效果如图4-48所示。
★提示★
修改图像的高度和宽度的值可以改变图像的显示尺寸，但是这并不能改变图像下载所用的时间，因为浏览器是先将图像数据下载，然后才改变图像尺寸的。要想减少图像下载所需要时间并使图像无论什么时候都显示相同的尺寸，建议在图像编辑软件中重新处理该图像，这样得到的效果将是最好的。