![网页设计与网站建设完全实战手册](https://wfqqreader-1252317822.image.myqcloud.com/cover/459/27110459/b_27110459.jpg)
6.8 综合实战
可以使用Dreamweaver中的可视化工具向页面添加各种内容,包括文本、图像、影片、声音和其他媒体形式等。在本章中学习了图像和多媒体的添加,本节将通过实例来讲述具体的应用。
综合实战1——创建图文混排网页
文字和图像是网页中最基本的元素,在网页中插入图像会使网页更加生动形象。在网页中创建图文混排网页的方法非常简单,如图6-46所示的是图文混排的效果,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0245_0001.jpg?sign=1739675723-5ks6Id81pk40pH9Y0IRB3MdZLHP6b3oL-0-b8ec44475aed6f51a407317a5caa56d1)
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00259.jpg?sign=1739675723-GfTOfcgv2VxsMR98fxuFHsLna11M8pLq-0-9c5190d50f883e169f5f3cb0a79d3e89)
图6-46 图文混排网页效果
★指点迷津★
如何使文字和图片内容共处?
在Dreamweaver中,图片对象是需要独占一行的,那么文字内容只能在与其平行的一行的位置上,怎么样才可以让文字围绕着图片显示呢?需要选中图片,单击鼠标右键,在弹出的快捷菜单中选择“对齐”|“右对齐”命令,这时会发现文字已均匀地排列在图片的右边了。
01 打开网页文档,如图6-47所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00260.jpg?sign=1739675723-wrd1H1eXcPTzzB6hqUSXqYhEBtjWGITE-0-f6332c7b94476ec52aee06ec402df158)
图6-47 打开网页文档
02 将光标置于页面中,输入相应的文字,如图6-48所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00261.jpg?sign=1739675723-FZMb2H64nDnhCMtcLplzzvT15hxXCJ1N-0-5d7a43db4f9ba694d0354fcc953bf674)
图6-48 输入文字
03 将光标置于文字中,执行“插入”“|图像”“|图像”命令,弹出“选择图像源文件”对话框,在对话框中选择图像images/tu.jpg,如图6-49所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00262.jpg?sign=1739675723-EwIxhYKojcrdXnHeqGv6hUSOkMYPtIWh-0-892ed2c2241c2cde2b596892c8f2973b)
图6-49 “选择图像源文件”对话框
04 单击“确定”按钮,插入图像,如图6-50所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00263.jpg?sign=1739675723-C4aZYUtJvteZrWJ9C2ZXmznR4cVUlT61-0-d0cd4f34f269c84f033701e7354e7da4)
图6-50 插入图像
05 选中插入的图像,单击鼠标右键,在弹出的快捷菜单中选择“对齐”|“右对齐”命令,如图6-51所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00264.jpg?sign=1739675723-fe5iHfkwKrYAUH8FAA4ESRF3A2hujQ3n-0-8c8a67b927554e8d3109e6b47268236b)
图6-51 设置图像的对齐方式
06 保存文档,按F12键在浏览器中预览,效果参见图6-46所示。
★高手支招★
修改图像的高度和宽度可以改变图像的显示尺寸,但是这并不能改变图像下载所用的时间,因为浏览器是先下载图像数据,然后才改变图像尺寸的。要想减少图像下载所需要时间并使图像无论什么时候都显示相同的尺寸,建议在图像编辑软件中,重新处理该图像,这样得到的效果将是最好的。
综合实战2——网页中插入媒体
下面通过实例讲述在网页中插入背景音乐和Flash动画的步骤,效果如图6-52所示,具体操作步骤如下:
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00265.jpg?sign=1739675723-P4Triz3KLxqIeHsTJaxzXh60gSewwHhY-0-cc53dcdac67801972233751f2866b040)
图6-52 在网页中插入多媒体文件的效果
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/figure_0251_0001.jpg?sign=1739675723-UOr2pRwMuQrcvJEWQNV9aClNzseGuGm0-0-200373a8ed3450a98b8db9782885df1d)
01 打开网页文档,将光标置于要插入Flash动画的位置,如图6-53所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00266.jpg?sign=1739675723-11w3UBuqKabh3wyhxiEOIrgSbPgkQMXm-0-0ed6d5ee3e48c860a191644a237a8d1d)
图6-53 打开网页文档
02 执行“插入”|“媒体”|“Flash SWF”命令,弹出“选择SWF”对话框,在对话框中选择文件top.swf,如图6-54所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00267.jpg?sign=1739675723-rd0br8cj4F2tPDqenuYKM9awbfap15dp-0-02d6add2db5a810ba2b71ebe85c44c72)
图6-54 “选择SWF”对话框
03 单击“确定”按钮,插入SWF动画,如图6-55所示。
![](https://epubservercos.yuewen.com/163668/15477638404524106/epubprivate/OEBPS/Images/00268.jpg?sign=1739675723-xESbi7bvKcGMEbaeAWz3ZTnOmju9FHno-0-b9f7002975eadf1d062b2bb2d1017dc3)
图6-55 插入动画
04 保存文档,按F12键在浏览器中预览,效果参见图6-52所示。