DwMX第4章图像和超连接06_2.pptVIP

Dreamweaver MX 第4章 图像和超连接 在页面中插入图像 4.1 在页面中插入图像 由于图像具有直观、生动的特点，几乎所有的网页都是用图像来点缀， 特别是商品广告、电子商务网页， 图像的作用往往是文字或其它媒体所不能替代的。 在页面中插入图像 但是由于一般图像文件较大，过多的使用图像会大大增加网页的下载时间。 浏览速度对于网站而言也是至关重要的， 一个网页文件一般控制在50K以内为宜。 因此适当的使用图像，以及选择合适的图像文件格式， 是设计页面时应当考虑到的。 图像文件格式 4.1.1 图像文件格式 网页通常使用GIF、JPEG和PNG三种图像， 目前GIF和JPEG文件格式的支持情况最好， 大多数浏览器都可以正常显示它们。 由于GIF和JPEG文件都是压缩的图像文件格式， 所以文件的信息量小，适合网络传输。 图像文件格式 1. GIF文件 GIF文件采用非失真的压缩格式，在压缩图像的过程中，“图形”的像素信息不受损失。 但是压缩掉一些图像的“色彩”，最多只能保留256种颜色(8位)。 它最适合显示色调不连续或具有大面积单一颜色的图像， 例如导航条、按钮、图标、徽标 或其它具有统一色彩和色调的图像。 图像文件格式 2. JPEG文件 JPEG文件采用失真的压缩格式，因为在压缩图像文件的过程中，“图形”的像素信息会损失一些，因此图形会失真。 但是图像的“色彩”信息不损失， 图像彩色不失真，能支持24bit真彩色图像。 图像文件格式 在压缩时可以选择压缩品质，但是随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。 通常可以通过控制，使压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。 图像文件格式 3. PNG文件 PNG文件格式是一种GIF格式的替代格式， 它是Macromedia Fireworks MX默认的文件格式， 但是现在还有一部分浏览器不完全支持PNG格式。 在页面中插入图像 4.1.2 在页面中插入图像 在当前打开的页面，插入图像的操作如下： (1)在“设计”视图，执行以下任一种操作： 选择菜单“插入” “图像”命令， 弹出“选择图像源”对话框； 或在“插入” “常用”工具栏中，单击“图像”图标。 在页面中插入图像 (2)在“选择图像源文件”对话框中，选择“文件系统”单选按钮，来选择图像文件； 通过浏览选择要插入的图像文件； “URL”可以选择相对于文档或站点根目录。 注意，图像文件必须位于当前站点中。 (3)再在属性面板中，设置该图像的属性。 在页面中插入图像 还可以执行以下操作插入图像: 在“插入” “常用”工具栏中， 将“图像”图标拖入文档窗口的设计视图或代码视图中； 或者将图像文件从“站点”面板， 直接拖到“文档”窗口中。 或将图像文件从“资源”面板(选择图像)， 直接拖到“文档”窗口中； 调整图像大小 4.1.3 调整图像大小 可以在“文档”窗口的“设计”视图中，可视化的调整图像的大小。 选择图像后，图像底部、右侧及右下角出现调整大小的手柄。 拖动手柄调整图像的宽度和高， 在调整尺寸时若要保持图像的宽高比例， 可以按住Shift键的同时拖动右下角的选择控制点。 设置图像属性 4.2 设置图像属性 可以在属性面板详细设置图像属性，图像属性主要包括： 名称、宽、高、源文件、超链接、边距、边框、对齐方式等。 图像属性的设置如下： 首先在“文档”窗口中选择图像 设置图像属性 在属性面板显示了图像略图和图像大小， 可以在文本框中输入图像元素名称， 作为在元素的name和Id的的属性； 在“宽”、“高”文本框中可以修改像素值，改变图像大小； 设置图像属性 若要更换图像，可以“源文件”文本框中输入图像文件的URL， 或用后面的浏览按钮进行选择, 也可以用指向文件按钮指向另一图像。 在“替代”下拉列表中输入替代文字， 当浏览器不能显示图像时，将显示替代文字。 设置图像属性 如果要通过图像实现超链接， 可以在“链接”文本框中输入目标网页的URL， 或用后面的浏览按钮进行选择； 设置图像边距,及图像与周围元素的距离， 可以在“垂直边距”和“水平边距”文本框中输入像素值； 设置图像属性 设置图像与周围元素的对齐方式，可以在“对齐”下拉列表中选择，包括： 基线、顶端、中间、底部、文本上方、绝对中央、绝对底部、左对齐、右对齐； 设置图像边框，在“边框”文本框中输入像素值， 设置为“0”不显示边框。 图像的HTML标记 4.3 图像的HTML标记 图像元素的HTML标记格式及主要属性： img src=“图像源” alt=“替代文字” name=“名称” id=“标识” width=“宽度” height=“高度” bord