网页中的图像和超级链接

网页中的图像和超级链接第一页，共二十六页，编辑于2023年，星期三一、网页中图像简述

在计算机图形中虽然存在很多种图形文件格式，但网页中一般用到的图像是GIF（GraphicInterchangeFormat）与JPEG（JointPhotographicExpertsGroup），现在许多浏览器还支持PNG（PortableNetworkGroup）格式。GIF格式：GIF格式即图形交换格式，采用无损压缩算法，文件最多使用256种颜色。它适合显示色调不连续或具有大面积单一颜色的图像。Jpg/JPEG格式：JPEG格式即联合图像专家组格式，采用有损压缩算法，是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。PNG格式:PNG格式即可移植网络图形格式，是一种替代GIF格式的无专利权限的格式，采用有损压缩算法，支持真彩色图像及透明背景。（firworks工具的默认格式）第二页，共二十六页，编辑于2023年，星期三需要在图形工具中处理：firworks工具-----新建文件-----文件菜单-----导出向导----jpg格式选择渐进式

----gif格式选择交错式渐进式交错式一般来说，在页面上显示图像时，图像时从上至下显示出来的，如果网速较慢，则显示图像过程中，用户在屏幕上无法看到图像的大致轮廓或整体结构，不能及时了解图像内容。如，一幅图像在页面上显示的过程第三页，共二十六页，编辑于2023年，星期三二、插入图像1.插入普通图像单击“插入”工具栏的“常用”类别中的“图像”图标右侧向下的按钮，从弹出的下拉菜单中选择“图像”命令，或选择“插入”|“图像”命令，或按下Ctrl+Alt+I组合键，打开“选择图像源文件”对话框,选择插入的图像，单击“确定”按钮即可。默认大小是图片的实际尺寸，dw中修改插入图片的height和width只是改变了图片的显示大小，但图片实际大小不会改变，因此下载速度不变。2.插入图像占位符将光标置于要插入图像的位置，单击“插入”工具栏的“常用”类别中的“图像”图标右侧的下三角按钮从中选择“图像占位符”选项，或选择“插入”|“图像对象”|“图像占位符”命令，打开“图像占位符”对话框。在该对话框中进行相关设置后，单击“确定”按钮即可入图像占位符。第四页，共二十六页，编辑于2023年，星期三二、插入图像3.插入鼠标经过时变化的图像（轮替图像）单击“插入”工具栏的“常用”类别中的“图像”图标右侧向下的按钮，从弹出的下拉菜单中选择“鼠标经过图像”命令，或选择“插入”|“图像对象”|“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。4.插入网页背景图像如果要插入网页背景图像，可以选择“修改”|“页面属性”命令，打开“页面属性”对话框，单击“背景图像”文本框右侧的“浏览”按钮，打开“选择图像源文件”对话框。选择要设置为网页背景的图像，也可以在“背景图像”文本框中输入背景图像的路径。单击“确定”按钮，网页背景图像设置完成。第五页，共二十六页，编辑于2023年，星期三三、编辑图像1.替换文本要设置替换文本，只需选择要设置替换文本的图像，在属性面板的“替换”文本框中直接输入即可。除此之外，还可以在插入图像时弹出的“图像标签辅助功能属性”对话框中进行设置。2.调整图像大小选择要调整大小的图像，然后在属性面板中的“宽”与“高”文本框中输入图像的尺寸大小。也可以用鼠标拖动图像右下角的3个控制点（在图像的底部、右侧及右下角出现调整大小的黑点）调整图像的大小。第六页，共二十六页，编辑于2023年，星期三三、编辑图像3.裁剪图像的多余部分选择要裁剪的图像，然后选择“修改”|“图像”|“裁剪”命令，或单击属性面板中“编辑”选项组中的“裁剪”按钮。所选图像的四周出现裁剪框，调整裁剪框到图像要保留的位置，在图像上双击或按Enter键即可将图像的多余部分裁剪掉。4.调整图像的亮度和对比度选择要调整亮度和对比度的图像，然后选择“修改”|“图像”|“亮度/对比度”命令，或单击属性面板“编辑”选项组中的“亮度和对比度”按钮，打开“亮度/对比度”对话框。在此对话框中拖动滑块调整亮度和对比度，调整完成后，单击“确定”按钮。第七页，共二十六页，编辑于2023年，星期三三、编辑图像5.锐化图像选择要锐化的图像，单击图像属性面板中的“锐化”按钮，或者选择“修改”|“图像”|“锐化”命令，打开“锐化”对话框。拖动滑块或在文本框中输入一个0～10间的数值，指定锐化程度。6.图像的对齐将一个图像看成是一个段落，然后对其进行对齐操作即可。7.设置图像间距要调整图像与文字的间距，只需在属性面板上的“垂直边距”与“水平边距”文本框中输入适当的数值即可。默认单位为像素，用户无需进行设置。第八页，共二十六页，编辑于2023年，星期三三、编辑图像8.设置图像边框为图像加上适当的边框可以使图像产生一种立体的感觉。在图像的属性面板上的“边框”文本框中输入适当的数值，即可为图像设置边框。如果为图像创建了超链接，则边框将自动变成蓝色，随默认的超链接文字的颜色而变化。9.使用图像编辑器在Dreamweaver中，如果需要重新编辑插入的图像，选中图像，然后单击图像属性面板中“编辑”选项组中的“编辑”按钮，Dreamweaver将自动打开图像编辑器Fireworks（必须安装了该软件，如果安装的是Photoshop，则打开的是Photoshop），在其中即可对图像进行编辑。第九页，共二十六页，编辑于2023年，星期三*四、创建图像链接1.创建整个图像的链接要为某个图像添加URL，应先选择该图像，然后在属性面板中的“链接”文本框中直接输入要打开文件的路径，或者拖动“指向文件”图标指向“文件”面板中的某个文件，或单击“浏览”文件夹图标，从本地计算机中选择一个已存在的文件。2.为图像添加映射什么是图像映射：图像映射是指将一个图像划分为多个热点，并将每个区域链接到不同的网页、URL或其他资源中。添加热点：为图像添加热点，必须先选择要定义热点的图像，然后单击属性面板中的对应的按钮，将光标置于所选择的图像上。光标变成十字形状，按住鼠标拖动即可绘制出需要的热点形状。第十页，共二十六页，编辑于2023年，星期三四、创建图像链接2.为图像添加映射热点属性面板：为图像添加热点后，选择绘制的热点，在属性面板中会自动显示热点的相关属性。编辑热点:编辑热点包括选择热点、移动热点、删除热点、调整热点大小和对齐热点等。为热点建立链接：应先选择热点，然后在属性面板上的“链接”文本框中输入相应的链接。也可以单击其后的文件夹图标，从本地硬盘上选择链接的文件路径，在“目标”下拉列表框中选择链接文件在浏览器中打开的方式，在“替代”文本框中输入光标移至热点时所显示的文字。第十一页，共二十六页，编辑于2023年，星期三网页中的超级链接

超链接是网页之间建立联系的基本途径，通常网页上都会有很多超链接，指向各种相关的文件。通过超链接可以将Internet上的各种相关信息有机地联系起来，能很方便地从一个网页跳转到另一个网页，从而可以更加方便地查询到所需的资源。本章介绍超级链接在网页中的应用，主要内容包括：超级链接基础网页中常见的超级链接在网页中创建跳转菜单在网页中创建导航条创建脚本链接网页相册第十二页，共二十六页，编辑于2023年，星期三一、超级链接基础一个网站是由多个网页组成的，站点和页面具备一定的链接关系才能正常运行，在制作网站时，需要建立站点与网页、网页与网页之间的链接关系。利用超级链接可以实现文档间或文档中的跳转，超级链接由两部分组成:链接的载体以及链接的目标地址。许多页面元素可以作为链接载体，如:文本、图像、图像热区、轮替图像、动画…。而链接目标可以是任意网络资源，如:页面、图像、声音、程序、其他网站、Email、锚点(书签,即页面中的某个位置)第十三页，共二十六页，编辑于2023年，星期三图

超级链接的链接载体和链接目标第十四页，共二十六页，编辑于2023年，星期三链接路径:每个网页甚至每个独立的网页元素（图像、声音、动画、视频等），都有一个唯一的地址，称为统一资源定位符（URL）。在网页的超链接中，正是以统一资源定位路径的方式来链接的。一般情况下，路径有3种表示方法：绝对路径、文档相对路径和站点根目录相对路径。三种类型的链接路径:一.绝对路径:绝对路径提供链接文档的完整URL。例如:。必须使用绝对路径来链接其它服务器上的文档。二.文档相对路径:文档相对路径是用于本地链接的路径。只提供不同的那部分路径。要链接的文件与当前文档处在同一文件夹中，只需输入文件名。要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线(/)和文件名。要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加../。三.根相对路径:根相对路径提供从站点根文件夹到文档所经过的路径。/代表站点根文件夹第十五页，共二十六页，编辑于2023年，星期三下拉列表中有4个选项，它们的功能分别如下所述。_blank：将链接的文档载入一个新的、未命名的浏览器窗口。_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。链接目标第十六页，共二十六页，编辑于2023年，星期三二、网页中常见的超级链接本节介绍在网页中常见的几种超级链接的制作方法。1、选择文本或图片，创建至网站等超链接如：链接至网站（Http://)链接至当前站点网页文件链接至图片文件、链接至flash动画、链接至mp3声音文件、缩略图至大图的链接、轮替图像的链接第十七页，共二十六页，编辑于2023年，星期三2、链接到文档内的指定位置(锚点)当浏览很长的网页页面时，需要不断拖动浏览器的滚动条才能浏览下面的内容，很不方便。如果需要寻找特定的内容就会比较麻烦。可以建立一些锚点链接，但浏览者单击锚点链接时就能自动跳转到相应的位置，这样能使浏览者快速找到相应的内容。创建命名锚记：置插入点到需要命名锚点的地方。执行以下任一操作:1)选择插入→命名的锚点。2)在“插入”栏的“常用”类别中，单击“命名锚记”按钮。。在插入命名的锚点对话框的锚点名域中，输入锚点名。如果锚点标记没有出现在插入点位置，选择查看→可视化助理→不可见元素。第十八页，共二十六页，编辑于2023年，星期三3、图片热区超链接图片地图主要用来在一幅图片内部的不同区域上设置超链接，设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。矩形热点工具：创建一个矩形热点。椭圆形热点工具：创建一个圆形热点。多边形热点工具：创建一个不规则形状的热点。1．绘制矩形热点2．绘制椭圆形热点3．绘制多边形热点第十九页，共二十六页，编辑于2023年，星期三三、创建跳转菜单链接跳转菜单是文档中站点访问者可见的一个弹出菜单，列出链接到文档或文件的选项。选择[插入→表单对象→跳转菜单]

第二十页，共二十六页，编辑于2023年，星期三四、在网页中创建导航条导航条是网页中的重要元素，在几乎所有的网站设计中，页面上都需要导航条。本节通过实例介绍两种制作导航条的方法。第二十一页，共二十六页，编辑于2023年，星期三1、创建文字导航条1．创建表格2．输入导航文字并定义超链接2、应用Dreamweaver预设功能创建图片导航条插入-----图像对象-----导航条1．添加导航条2．设