网页中的图像和超级链接幻灯片.ppt

网页中的图像和超级链接第1页，共26页，编辑于2022年，星期二一、网页中图像简述 在计算机图形中虽然存在很多种图形文件格式，但网页中一般用到的图像是GIF（Graphic Interchange Format）与JPEG（Joint Photographic Experts Group），现在许多浏览器还支持PNG（Portable Network Group）格式。GIF格式：GIF格式即图形交换格式，采用无损压缩算法，文件最多使用256种颜色。它适合显示色调不连续或具有大面积单一颜色的图像。Jpg/JPEG格式：JPEG格式即联合图像专家组格式，采用有损压缩算法，是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。PNG格式:PNG格式即可移植网络图形格式，是一种替代GIF格式的无专利权限的格式，采用有损压缩算法，支持真彩色图像及透明背景。（firworks工具的默认格式）第2页，共26页，编辑于2022年，星期二需要在图形工具中处理：firworks工具-新建文件-文件菜单-导出向导-jpg格式选择渐进式 -gif格式选择交错式渐进式交错式一般来说，在页面上显示图像时，图像时从上至下显示出来的，如果网速较慢，则显示图像过程中，用户在屏幕上无法看到图像的大致轮廓或整体结构，不能及时了解图像内容。如，一幅图像在页面上显示的过程第3页，共26页，编辑于2022年，星期二二、插入图像1.插入普通图像 单击“插入”工具栏的“常用”类别中的“图像”图标右侧向下的按钮，从弹出的下拉菜单中选择“图像”命令，或选择“插入”|“图像”命令，或按下Ctrl+Alt+I组合键，打开“选择图像源文件”对话框,选择插入的图像，单击“确定”按钮即可。默认大小是图片的实际尺寸，dw中修改插入图片的 height和width只是改变了图片的显示大小，但图片实际大小不会改变，因此下载速度不变。2.插入图像占位符 将光标置于要插入图像的位置，单击“插入”工具栏的“常用”类别中的“图像”图标右侧的下三角按钮从中选择“图像占位符”选项，或选择“插入”|“图像对象”|“图像占位符”命令，打开“图像占位符”对话框。在该对话框中进行相关设置后，单击“确定”按钮即可 入图像占位符。第4页，共26页，编辑于2022年，星期二二、插入图像3.插入鼠标经过时变化的图像（轮替图像）单击“插入”工具栏的“常用”类别中的“图像”图标右侧向下的按钮，从弹出的下拉菜单中选择“鼠标经过图像”命令，或选择“插入”|“图像对象”|“鼠标经过图像”命令，打开“插入鼠标经过图像”对话框。4.插入网页背景图像 如果要插入网页背景图像，可以选择“修改”|“页面属性”命令，打开“页面属性”对话框，单击“背景图像”文本框右侧的“浏览”按钮，打开“选择图像源文件”对话框。选择要设置为网页背景的图像，也可以在“背景图像”文本框中输入背景图像的路径。单击“确定”按钮，网页背景图像设置完成。第5页，共26页，编辑于2022年，星期二三、编辑图像1.替换文本 要设置替换文本，只需选择要设置替换文本的图像，在属性面板的“替换”文本框中直接输入即可。除此之外，还可以在插入图像时弹出的“图像标签辅助功能属性”对话框中进行设置。2.调整图像大小 选择要调整大小的图像，然后在属性面板中的“宽”与“高”文本框中输入图像的尺寸大小。也可以用鼠标拖动图像右下角的3个控制点（在图像的底部、右侧及右下角出现调整大小的黑点）调整图像的大 小。第6页，共26页，编辑于2022年，星期二三、编辑图像3.裁剪图像的多余部分 选择要裁剪的图像，然后选择“修改”|“图像”|“裁剪”命令，或单击属性面板中“编辑”选项组中的“裁剪”按钮。所选图像的四周出现裁剪框，调整裁剪框到图像要保留的位置，在图像上双击或按Enter键即可将图像的多余部分裁剪掉。4.调整图像的亮度和对比度 选择要调整亮度和对比度的图像，然后选择“修改”|“图像”|“亮度/对比度”命令，或单击属性面板“编辑”选项组中的“亮度和对比度”按钮，打开“亮度/对比度”对话框。在此对话 框中拖动滑块调 整亮度和对比度，调整完成后，单击“确定”按钮。第7页，共26页，编辑于2022年，星期二三、编辑图像5.锐化图像 选择要锐化的图像，单击图像属性面板中的“锐化”按钮，或者选择“修改”|“图像”|“锐化”命令，打开“锐化”对话框。拖动滑块或在文本框中输入一个010间的数值，指定锐化程度。6.图像的对齐 将一个图像看成是一个段落，然后对其进行对齐操作即可。7.设置图像间距 要调整图像与文字的间距，只需在属性面板上的“垂直边距”与“水平边距”文本框中输入适当的数值即可。默认单位为像素，用户无需进行设置。第8页，共26页，编辑于2022年，星期二三、编辑图像8.设置图像边框 为图像加上适当的边框可以使图像产生一种立体的感觉。在图像的属性面板上的“边框”文本框中输入适当的数值，即可为图像设置边框。如果为图像创建了超链接，则边框将自动变成蓝色，随默认的超链接文字的颜色而变化。9.使用图像编辑器 在Dreamweaver中，如果需要重新编辑插入的图像，选中图像，然后单击图像属性面板中“编辑”选项组中的“编辑”按钮，Dreamweaver将自动打开图像编辑器Fireworks（必须安装了该软件，如果安装的是Photoshop，则打开的是Photoshop），在其中即可对图像进行编辑。第9页，共26页，编辑于2022年，星期二*四、创建图像链接1.创建整个图像的链接 要为某个图像添加URL，应先选择该图像，然后在属性面板中的“链接”文本框中直接输入要打开文件的路径，或者拖动“指向文件”图标 指向“文件”面板中的某个文件，或单击“浏览”文件夹图标，从本地计算机中选择一个已存在的文件。2.为图像添加映射什么是图像映射：图像映射是指将一个图像划分为多个热点，并将每个区域链接到不同的网页、URL或其他资源中。添加热点：为图像添加热点，必须先选择要定义热点的图像，然后单击属性面板中的对应的按钮，将光标置于所选择的图像上。光标变成十字形状，按住鼠标拖动即可绘制出需要的热点形状。第10页，共26页，编辑于2022年，星期二四、创建图像链接2.为图像添加映射热点属性面板：为图像添加热点后，选择绘制的热点，在属性面板中会自动显示热点的相关属性。编辑热点:编辑热点包括选择热点、移动热点、删除热点、调整热点大小和对齐热点等。为热点建立链接：应先选择热点，然后在属性面板上的“链接”文本框中输入相应的链接。也可以单击其后的文件夹图标，从本地硬盘上选择链接的文件路径，在“目标”下拉列表框中选择链接文件在浏览器中打开的方式，在“替代”文本框中输入光标移至热点时所显示的文字。第11页，共26页，编辑于2022年，星期二网页中的超级链接网页中的超级链接 超链接是网页之间建立联系的基本途径，通常网页上都会有很多超链接，指向各种相关的文件。通过超链接可以将Internet上的各种相关信息有机地联系起来，能很方便地从一个网页跳转到另一个网页，从而可以更加方便地查询到所需的资源。本章介绍超级链接在网页中的应用，主要内容包括：超级链接基础网页中常见的超级链接在网页中创建跳转菜单在网页中创建导航条创建脚本链接网页相册第12页，共26页，编辑于2022年，星期二一、一、超级链接基础超级链接基础一个网站是由多个网页组成的，站点和页面具备一定的链接关系才能正常运行，在制作网站时，需要建立站点与网页、网页与网页之间的链接关系。利用超级链接可以实现文档间或文档中的跳转，超级链接由两部分组成:链接的载体以及链接的目标地址。许多页面元素可以作为链接载体，如:文本、图像、图像热区、轮替图像、动画。而链接目标可以是任意网络资源，如:页面、图像、声音、程序、其他网站、Email、锚点(书签,即页面中的某个位置)第13页，共26页，编辑于2022年，星期二图 超级链接的链接载体和链接目标第14页，共26页，编辑于2022年，星期二链接路径:每个网页甚至每个独立的网页元素（图像、声音、动画、视频等），都有一个唯一的地址，称为统一资源定位符（URL）。在网页的超链接中，正是以统一资源定位路径的方式来链接的。一般情况下，路径有3种表示方法：绝对路径、文档相对路径和站点根目录相对路径。三种类型的链接路径:一.绝对路径:绝对路径提供链接文档的完整URL。例如:http:/。必须使用绝对路径来链接其它服务器上的文档。二.文档相对路径:文档相对路径是用于本地链接的路径。只提供不同的那部分路径。要链接的文件与当前文档处在同一文件夹中，只需输入文件名。要链接的文件位于当前文档所在文件夹的子文件夹中，提供子文件夹名，然后是一正斜线(/)和文件名。要链接的文件位于当前文档所在文件夹的父文件夹中，文件名前加./。三.根相对路径:根相对路径提供从站点根文件夹到文档所经过的路径。/代表站点根文件夹第15页，共26页，编辑于2022年，星期二下拉列表中有4个选项，它们的功能分别如下所述。_blank：将链接的文档载入一个新的、未命名的浏览器窗口。_parent：将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。链接目标链接目标第16页，共26页，编辑于2022年，星期二二、二、网页中常见的超级链接网页中常见的超级链接本节介绍在网页中常见的几种超级链接的制作方法。1、选择文本或图片，创建至网站等超链接、选择文本或图片，创建至网站等超链接如：链接至网站（Http:/)链接至当前站点网页文件 链接至图片文件、链接至flash动画、链接至mp3声音文件、缩略图至大图的链接、轮替图像的链接第17页，共26页，编辑于2022年，星期二2、链接到文档内的指定位置、链接到文档内的指定位置(锚点锚点)当浏览很长的网页页面时，需要不断拖动浏览器的滚动条才能浏览下面的内容，很不方便。如果需要寻找特定的内容就会比较麻烦。可以建立一些锚点链接，但浏览者单击锚点链接时就能自动跳转到相应的位置，这样能使浏览者快速找到相应的内容。创建命名锚记：置插入点到需要命名锚点的地方。执行以下任一操作:1)选择插入命名的锚点。2)在“插入”栏的“常用”类别中，单击“命名锚记”按钮。在插入命名的锚点对话框的锚点名域中，输入锚点名。如果锚点标记没有出现在插入点位置，选择查看 可视化助理 不可见元素。第18页，共26页，编辑于2022年，星期二3、图片热区超链接、图片热区超链接图片地图主要用来在一幅图片内部的不同区域上设置超链接，设置图片地图时，要在图片上添加一系列的“热点”，这些热点可以具有各自不同的形状，而且可以为它们分别设置超链接。矩形热点工具：创建一个矩形热点。椭圆形热点工具：创建一个圆形热点。多边形热点工具：创建一个不规则形状的热点。1绘制矩形热点绘制矩形热点2绘制椭圆形热点绘制椭圆形热点3绘制多边形热点绘制多边形热点第19页，共26页，编辑于2022年，星期二三、三、创建跳转菜单链接创建跳转菜单链接跳转菜单是文档中站点访问者可见的一个弹出菜单，列出链接到文档或文件的选项。选择插入表单对象跳转菜单第20页，共26页，编辑于2022年，星期二四、四、在网页中创建导航条在网页中创建导航条 导航条是网页中的重要元素，在几乎所有的网站设计中，页面上都需要导航条。本节通过实例介绍两种制作导航条的方法。第21页，共26页，编辑于2022年，星期二1、创建文字导航条创建文字导航条1创建表格2输入导航文字并定义超链接2、应用应用Dreamweaver预设功能创建图片导航条预设功能创建图片导航条插入-图像对象-导航条1添加导航条2设置导航项目3添加更多的导航条项目4修改导航条第22页，共26页，编辑于2022年，星期二五、五、创建脚本链接创建脚本链接关闭网页窗口关闭网页窗口制作一个关闭网页窗口的脚本链接。当单击网页中的“关闭窗口”文字链接时，弹出一个提示关闭窗口的对话框，效果如图所示。单击“是”按钮即可关闭网页窗口。图 关闭网页窗口的脚本链接选中文本-在【属性面板】的【链接】文本框中输入：javascript:window.close()第23页，共26页，编辑于2022年，星期二六、六、网页相册网页相册使用Dreamweaver提供的网页相册功能，制作一个电子相册网页。相册首页效果如图所示，页面中显示一些图片的缩略图，每行显示5个。每个缩略图指向原始对应图像的超链接，单击缩略图将显示完整图。选择【命令】|【创建网站相册】图 相册首页效果第24页，共26页，编辑于2022年，星期二练习练习1 纵向文字导航条纵向文字导航条制作一个纵向文字导航条，效果如图所示。在制作这个实例时，需要先用表格布局并设置表格属性，然后输入纵向的导航文字，添加超级链接。第25页，共26页，编辑于2022年，星期二练习练习2纵向动态导航条纵向动态导航条 利用Dreamweaver预设的插入导航条功能，制作一个动态的纵向导航条。第26页，共26页，编辑于2022年，星期二