1、Dreamweaver MX,第4章 图像和超连接,在页面中插入图像,4.1 在页面中插入图像由于图像具有直观、生动的特点，几乎所有的网页都是用图像来点缀， 特别是商品广告、电子商务网页，图像的作用往往是文字或其它媒体所不能替代的。,在页面中插入图像,但是由于一般图像文件较大，过多的使用图像会大大增加网页的下载时间。 浏览速度对于网站而言也是至关重要的， 一个网页文件一般控制在50K以内为宜。因此适当的使用图像，以及选择合适的图像文件格式， 是设计页面时应当考虑到的。,图像文件格式,4.1.1 图像文件格式网页通常使用GIF、JPEG和PNG三种图像， 目前GIF和JPEG文件格式的支持情况最
2、好， 大多数浏览器都可以正常显示它们。由于GIF和JPEG文件都是压缩的图像文件格式， 所以文件的信息量小，适合网络传输。,图像文件格式,1. GIF文件GIF文件采用非失真的压缩格式，在压缩图像的过程中，“图形”的像素信息不受损失。 但是压缩掉一些图像的“色彩”，最多只能保留256种颜色(8位)。它最适合显示色调不连续或具有大面积单一颜色的图像， 例如导航条、按钮、图标、徽标 或其它具有统一色彩和色调的图像。,图像文件格式,2. JPEG文件JPEG文件采用失真的压缩格式，因为在压缩图像文件的过程中，“图形”的像素信息会损失一些，因此图形会失真。 但是图像的“色彩”信息不损失， 图像彩色不失
3、真，能支持24bit真彩色图像。,图像文件格式,在压缩时可以选择压缩品质，但是随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。 通常可以通过控制，使压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。,图像文件格式,3. PNG文件PNG文件格式是一种GIF格式的替代格式， 它是Macromedia Fireworks MX默认的文件格式， 但是现在还有一部分浏览器不完全支持PNG格式。,在页面中插入图像,4.1.2 在页面中插入图像在当前打开的页面，插入图像的操作如下： (1)在“设计”视图，执行以下任一种操作： 选择菜单“插入” “图像”命令， 弹出“选择图像源”对话框；
4、 或在“插入” “常用”工具栏中，单击“图像”图标。,在页面中插入图像,(2)在“选择图像源文件”对话框中，选择“文件系统”单选按钮，来选择图像文件； 通过浏览选择要插入的图像文件； “URL”可以选择相对于文档或站点根目录。 注意，图像文件必须位于当前站点中。 (3)再在属性面板中，设置该图像的属性。,在页面中插入图像,还可以执行以下操作插入图像: 在“插入” “常用”工具栏中， 将“图像”图标拖入文档窗口的设计视图或代码视图中； 或者将图像文件从“站点”面板， 直接拖到“文档”窗口中。 或将图像文件从“资源”面板(选择图像)， 直接拖到“文档”窗口中；,调整图像大小,4.1.3 调整图像大
5、小可以在“文档”窗口的“设计”视图中，可视化的调整图像的大小。 选择图像后，图像底部、右侧及右下角出现调整大小的手柄。 拖动手柄调整图像的宽度和高， 在调整尺寸时若要保持图像的宽高比例， 可以按住Shift键的同时拖动右下角的选择控制点。,设置图像属性,4.2 设置图像属性可以在属性面板详细设置图像属性，图像属性主要包括： 名称、宽、高、源文件、超链接、边距、边框、对齐方式等。图像属性的设置如下： 首先在“文档”窗口中选择图像,设置图像属性,在属性面板显示了图像略图和图像大小， 可以在文本框中输入图像元素名称， 作为在元素的name和Id的的属性；在“宽”、“高”文本框中可以修改像素值，改变图
6、像大小；,设置图像属性,若要更换图像，可以“源文件”文本框中输入图像文件的URL， 或用后面的浏览按钮进行选择, 也可以用指向文件按钮指向另一图像。在“替代”下拉列表中输入替代文字， 当浏览器不能显示图像时，将显示替代文字。,设置图像属性,如果要通过图像实现超链接， 可以在“链接”文本框中输入目标网页的URL， 或用后面的浏览按钮进行选择；设置图像边距,及图像与周围元素的距离， 可以在“垂直边距”和“水平边距”文本框中输入像素值；,设置图像属性,设置图像与周围元素的对齐方式，可以在“对齐”下拉列表中选择，包括： 基线、顶端、中间、底部、文本上方、绝对中央、绝对底部、左对齐、右对齐；设置图像边框
7、，在“边框”文本框中输入像素值， 设置为“0”不显示边框。,图像的HTML标记,4.3 图像的HTML标记图像元素的HTML标记格式及主要属性：src: 图像文件URL； alt: 替代文字； name、id：图像元素的名称及标识；,图像的HTML标记,width、height：图像的宽度和高度，用像素值表示； border：图像边框宽度，用像素值表示， 0不显示边框，为默认值； align：图像与周围元素的对齐方式。 例如， ,插入图像占位符,4.4 插入图像占位符在设置页面的布局时，若要在某个位置插入图像，而当前图像内容还为确定， 这时可以先插入图像占位符，以后在用具体的图像来替换。插入图
8、像占位符后，可以在属性面板设置它属性， 这与图像的操作相同。,插入图像占位符,插入图像占位符的步骤如下：在“文档”窗口，执行以下任一种操作： 选择菜单“插入” “图像对象”“图像占位符”命令； 或在“插入” “常用”工具栏中，选择“图像占位符”图标； 或在“插入” “常用”工具栏中，将“图像占位符”图标拖入文档窗口中。,插入图像占位符,这时将弹出“图像占位符”对话框，在对话框中选择选项： 在“名称”文本框中，输入图像占位符元素的名称(可选)； 在“宽度”和“高度”文本框中，以像素为单位输入数字以设置图像大小(必需)； 在“颜色”选择器中选择显示颜色(可选)；,插入图像占位符,在“替换文本”中，
9、输入描述该图像的文本(可选)。 单击“确定”按钮，文档中即会出现图像占位符。图像占位符的HTML标记与图像的HTML标记相同， 只是由于未指定具体的文件src属性为空。,插入鼠标经过图像,4.5 插入鼠标经过图像在浏览网页时，经常会看到， 当鼠标移到图像上时，图像将发生变化， 而当鼠标移出图像又恢复原状，我们可以插入这样的鼠标经过图像。插入鼠标经过图像，可执行以下操作：,插入鼠标经过图像,(1)可以在站点的Images文件夹中准备两个图像文件， 一个为原始图像文件， 另一个为鼠标经过图像文件。 (2) 在“文档”窗口，使用以下任一种方法插入鼠标经过图像：,插入鼠标经过图像,选择菜单“插入”“图
10、像对象”“鼠标经过图像”命令； 或在“插入” “常用”工具栏中，选择“鼠标经过图像”图标； 或在“插入” “常用”工具栏中，将“鼠标经过图像”图标拖到“文档”窗口所需的位置；随即显示“插入鼠标经过图像”对话框。,插入鼠标经过图像,(3)在“插入鼠标经过图像”对话框中，完成以下选项： 在“图像名称”文本框中，输入鼠标经过图像的名称； 在“原始图像”文本框中，单击“浏览”按钮，选择要在页面中显示的图像， 在“鼠标经过图像”文本框中，单击“浏览”按钮，选择要在鼠标指针移到原始图像时显示的图像，,插入鼠标经过图像,若选择“预先载入图像”选项，可以使鼠标经过图像预先载入浏览器缓存中， 将不会发生延迟；
11、“替代文本”中输入描述图像的文本(可选)；,插入鼠标经过图像,如果要为图像建立超链接，可在“单击时，转到 URL”文本框中， 单击“浏览”按钮，选择超链接网页文件， 或者输入单击鼠标经过图像时要打开的文件的URL。单击“确定”关闭“插入鼠标经过图像”对话框。,插入鼠标经过图像,注意：插入鼠标经过图像一般用于超链接，为实现鼠标经过图像时，图像发生变化， Dreamweaver MX 在HTML源代码中插入了有关的JavaScript脚本程序， 并在图像超链接HTML标记中插入了鼠标onMouseOut和onMouseOver事件函数。,插入鼠标经过图像,如果不为该图像设置超链接，图像超链接HTM
12、L标记依然产生，只是插入一个空超链接(#)， 鼠标经过图像附加的onMouseOut和onMouseOver事件函数，仍然包含在超链接HTML标记中。 因此不能删除该空超链接，否则鼠标经过图像将不再起作用。,超 链 接,4.6 超链接Web站点是网页和其它相关文件的集合， 站点是有组织的，各网页之间有一定逻辑关系。从一个网页去访问另一个网页，主要是通过超链接来完成的。,超 链 接,通过网页中的超链接，就可以访问站点中任意相应页面， 也可以连接到其他站点的网页。此外通过书签，还可以建立连接到文档内部任何位置的超链接。,超 链 接,一般是通过文本和图像建立超链接。Dreamweaver可以使用站点
13、地图，直观地查看文件之间的超链接。 可以在“文件”面板，从视图下拉列表中选择“地图视图”,超链接与URL,4.6.1 超链接与URL 一个超链接包括两个端点(又称锚)以及一个方向， 超链接由开始端(称为源锚)指向目标端(称为目标锚)。目标端可以是Web中的任意资源， 而开始端是页面中的文本或图像。,超链接与URL,在Internet上每个网页都有一个唯一的地址，称作统一资源定位器(URL)。 URL 是Internet上统一格式的信息资源地址表示法。在浏览Web网页或超链接时URL， 前面部分形式是http:/(超文本协议)， 接着是Web服务器网络域名或IP地址， 之后为文件路径及文件名称。,超链接与URL,在网页中创建一个超链接时，它的目标端URL将包含在超链接的HTML标记中。当创建本地超链接(站点内文档间的链接)， 通常不使用链接到的文档的完整URL， 而是指定一个从当前文档或站点根目录到目标锚的相对路径。,
