- Dreamweaver+jQuery移动网页设计从新手到高手
- 张雪玲 刘琳
- 1140字
- 2021-04-04 00:02:10
3.5 综合实战
本章主要讲述了如何在网页中插入图像、设置图像属性、在网页中简单编辑图像和插入其他图像元素等的方法，下面通过实例重温以上所学到的知识。
实战1—创建图文混排网页
文字和图像是网页中最基本的元素，在网页中插入图像会使网页更加生动、形象。创建如图3-26所示的图文混排效果的具体操作步骤如下。
图3- 26
★指点迷津★
如何使文字和图片内容共处？
在Dreamweaver中，图片对象需要独占一行，所以，文字内容只能在与其平行的一行位置上。那么，怎么样才可以让文字围绕着图片显示呢？此时需要选中图片并右击，在弹出的快捷菜单中执行“对齐”|“右对齐”命令，这时会发现文字已均匀地排列在图片的右侧了。
01打开网页文档，如图3-27所示。
图3-27
02将光标置于要插入图像的位置，执行“插入”|Image命令，弹出“选择图像源文件”对话框，在该对话框中选择图像tu.jpg，如图3-28所示。
图3-28
03单击“确定”按钮，插入图像，如图3-29所示。
图3-29
04选中插入的图像并右击，在弹出的快捷菜单中执行“对齐”|“右对齐”命令，如图3-30所示。
图3-30
★高手支招★
修改图像的高度和宽度的值可以改变图像的显示尺寸，但是这并不能改变图像下载所用的时间，因为浏览器是先将图像数据下载，然后再改变图像尺寸。要想缩短图像下载所需要的时间并使图像无论什么时候都显示相同的尺寸，建议在图像编辑软件中，重新处理该图像，这样得到的效果是最好的。
05保存文档，按F12键在浏览器中预览，效果如图3-26所示。
实战2—创建翻转图像导航
导航栏一般由一组图像组成，这些图像的显示内容随鼠标的操作而变化。导航栏可以为页面和文件之间移动提供一条简捷的途径。创建鼠标经过图像导航栏的方法非常简单，鼠标未经过导航栏时的效果如图3-31所示，鼠标经过导航栏时的效果如图3-32所示，具体操作步骤如下。
01打开网页文档，如图3-33所示。
02将光标置于要插入鼠标经过图像导航栏的位置，执行“插入”|HTML|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图3-34所示。
图3-31
图3-32
图3-33
图3-34
03在该对话框中单击“原始图像”右侧的“浏览”按钮，弹出“原始图像：”对话框，在该对话框中选择1.jpg文件，如图3-35所示。
图3-35
04单击“确定”按钮，并在“插入鼠标经过图像”对话框中单击“鼠标经过图像”右侧的“浏览”按钮，在弹出的“鼠标经过图像：”对话框中选择shouye.jpg图像文件，如图3-36所示。
05单击“确定”按钮，添加到“鼠标经过图像”文本框中，如图3-37所示。
图3-36
★提示★
组成鼠标经过图像的两幅图像必须具有相同的大小；如果两幅图像的大小不同，Dreamweaver会自动将第二幅图像的大小调整为与第一幅图像同样的大小。
图3-37
06单击“确定”按钮，插入鼠标经过图像导航栏，如图3-38所示。
图3-38
07用同样的步骤在其他的单元格中插入导航栏图像，如图3-39所示。
图3-39
08保存文档，鼠标未经过导航栏时的效果如图3-32所示，鼠标经过导航栏时的效果如图3-33所示。