网页制作之网页中的图像和链接.ppt

《网页制作之网页中的图像和链接.ppt》由会员分享，可在线阅读，更多相关《网页制作之网页中的图像和链接.ppt（25页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第3章 网页中的图像和链接 第3章 网页中的图像和链接 n3.1 图像的应用n3.2 3.2 图像的编辑图像的编辑n3.3 3.3 使用外部图像编辑器使用外部图像编辑器n3.4 3.4 实例制作实例制作n3.5 创建超链接 n3.6 3.6 实例制作实例制作 3.1 图像的应用n3.1.1 3.1.1 图像基础图像基础n3.1.2 3.1.2 图像的插入图像的插入3.1.1 3.1.1 图像基础图像基础由于网络对文件的容量要求非常苛刻，因此，网页中只能使用压缩比非常高的GIF（图形交换格式）、JPG（静止图像压缩格式）及PNG（可移植网络图形）三种格式的图像。1.GIF格式（graphics

2、interchange format）是目前网络中应用最为广泛的图像压缩格式，采用LZW无损失压缩算法，不会出现图像效果的失真。它分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，文件很小，可以极大地节省存储空间，因此常常用于保存作为网页数据传输的图像文件。GIF格式的图像最多只能显示256种颜色。对于包含颜色数目较少的图像，可选用GIF格式，如卡通、徽标、包含透明区域的图形以及动画等。2.JPEG格式（Joint Photo graphic Experts Group）简称JPG，是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从

3、而达到较大的压缩比，所以“身材娇小，容貌姣好”，特别受网络青睐。JPEG支持24位真彩色，因此JPEG格式显示图像色彩丰富。对于使用的颜色数较多，含有大量过渡颜色区域，而且追求图像质量的图像应选用JPEG格式，如扫描的照片、使用纹理的图像和任何需要256种以上颜色的图像等。3.PNG格式（Portable Netork Graphics）是一种新兴的网络格式。该格式是目前保证最不失真的格式，它汲取了GIF和JPEG格式的优点，存储形式丰富，兼有GIF和JPEG格式的色彩模式。采用的也是一种无损压缩算法，能真实再现图像原貌，最多可以支持32位的颜色，因此它同时具有GIF格式和JPEG格式的优点。

4、3.1.2 3.1.2 图像的插入图像的插入1.1.直接插入直接插入选择“插入”菜单中的“图像”菜单命令，也可以单击插入栏的“常用”选项卡中的图像按钮，或按Ctrl+Alt+I组合键。2.2.占位符插入占位符插入方法是：选择方法是：选择“插入插入”菜单中的菜单中的“图像对象图像对象”，在级联菜单中单击，在级联菜单中单击“图像占位符图像占位符”，或在，或在“常用常用”插入工具栏中，单击插入工具栏中，单击“图像图像”按钮旁按钮旁边的小三角形，在弹出的下拉菜单中单击边的小三角形，在弹出的下拉菜单中单击“图像占位符图像占位符”，打开，打开“图像占位符图像占位符”对话框，在打开的对话框中设置后插入即可。

5、对话框，在打开的对话框中设置后插入即可。3.2 3.2 图像的编辑图像的编辑n3.2.1 设置图像大小n3.2.2 3.2.2 移动和复制图像移动和复制图像n3.2.3 3.2.3 图片和文本的对齐方式图片和文本的对齐方式n3.2.4 3.2.4 设置设置图像边框图像边框 n3.2.5 为图像设置替换文字 3.2.1设置图像大小 1.1.拖动改变大小拖动改变大小在文档中选择需要调整大小的图像。图像的底部、右侧在文档中选择需要调整大小的图像。图像的底部、右侧及右下角出现调整大小的手柄，拖动图像的这三个控及右下角出现调整大小的手柄，拖动图像的这三个控制点可快速改变图像大小。制点可快速改变图像大小。

6、2.2.使用属性面板使用属性面板用属性面板可以精确调整图像的大小，在用属性面板可以精确调整图像的大小，在“”“”文本框内文本框内输入图像的宽度，系统默认的单位是像素（输入图像的宽度，系统默认的单位是像素（pixelspixels）。）。用同样的方法可在用同样的方法可在“”“”文本框内输入图像的高度。文本框内输入图像的高度。3.3.使用代码编辑器使用代码编辑器3.2.23.2.2移动和复制图像移动和复制图像n选中要编辑的图像，这时图像周围会出现几个黑色方形的小控制柄。如果要移动或复制图像，可以像移动文字那样，用鼠标拖曳图像到目标点，即可移动图像；按住Ctrl键并用鼠标拖曳图像到目标点，即可复制图

7、像。3.2.3 3.2.3 图片和文本的对齐方式图片和文本的对齐方式1 1图像与文字相对位置的调整图像与文字相对位置的调整在图像属性工具栏内的“对齐”下拉列表框中有10个列表项，用来进行图像与文字相对位置的调整。这些列表项的含义如下。“默认值”列表项：使用浏览器默认的对齐方式，不同的浏览器会稍有不同。“基线”列表项：图像的下沿与文字的基线水平对齐。“顶端”列表项：图像的顶端与当前行中最高对象（图像或文本）的顶端对齐。“中间”列表项：图像的中线与文字的基线水平对齐。“底部”列表项：图像的下沿与文字的基线水平对齐。“文本上方”列表项：图像的顶端与文本行中最高字符的顶端对齐。“绝对中间”列表项：图像

8、的中线与文字的中线水平对齐。“绝对底部”列表项：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字的最下边，而基线不到文字的最下边。“左对齐”列表项：图像在文字的左边缘，文字从右侧环绕图像 2 2图像与文字间距的调整图像与文字间距的调整图像与文字的间距是指图像与文字水平方向和垂直方向的间距，可以在属性面板中改变“水平边距”和“垂直边距”文本框内的数值来实现，数值的单位是像素 3.2.4设置图像边框 n常常可以给图像添加一个边框来美化图像，选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，单位为像素，“0”表示无边框，默认图像无边框 3.3使用外部图像编辑器 为现有的文件类型设置P

9、hotoshop外部图像编辑器的具体操作步骤如下。1.单击“编辑”菜单中的“首选参数”，打开“首选参数”对话框，从中选择图像的编辑器，从左边的“分类”列表中选择“文件类型/编辑器”，2.在“扩展名”列表中，选择要为其设置外部编辑器的文件扩展名，选择了名为.jpg.jpeg 的扩展名。3.单击“编辑器”列表上方的加号按钮。在出现的“选择外部编辑器”对话框中，游览要作为此文件类型的编辑器启动的应用程序，选择Photoshop。4.单击“打开”按钮，回到参数对话框，如果希望该编辑器成为此文件类型的主编辑器，单击“设为主要”按钮，Photoshop后面加入了“主要”字样。3.43.4实例制作实例制作n

10、3.4.1 3.4.1 在网页中插入图片实例在网页中插入图片实例n3.4.2 3.4.2 鼠标经过图像的效果鼠标经过图像的效果 n3.4.3 3.4.3 精美的网站相册精美的网站相册3.4.1 3.4.1 在网页中插入图片实例在网页中插入图片实例n一个漂亮的网页中，必然少不了漂亮的图片作为点缀。接下来我们要在“数学与计算机系”网站的主页中插入两幅图片。3.4.2 3.4.2 鼠标经过图像的效果鼠标经过图像的效果n鼠标经过图像是一种在浏览器中查看网页时，鼠标光标经过该图像时，图像发生变化的动态图像。利用这种图像，可以在页面中实现丰富的交互效果，例如常见的按钮变化、导航栏效果的变化、图片变化。3.

11、4.3 3.4.3 精美的网站相册精美的网站相册n在网上申请了自己的主页空间，并且制作好个人主页后，很多朋友想把自己的、朋友的或者自己喜欢的一些照片放到上面以供欣赏。Dreamwear8.0提供了这样的一项制作网站相册的功能，让我们可以迅速地创建自己的相册。3.5创建超链接 n3.5.13.5.1超级链接的类型超级链接的类型n3.5.23.5.2创建超链接的方法创建超链接的方法n3.5.33.5.3创建锚点链接创建锚点链接n3.5.43.5.4创建创建E-mailE-mail链接链接n3.5.53.5.5创建导航条创建导航条n3.5.6 3.5.6 网页中的图像热点链接网页中的图像热点链接 3

12、.5.13.5.1超级链接的类型超级链接的类型1.根据链接载体的特点，一般把链接分为文本链接和图像链接两大类。（1）文本链接：用文本作为链接载体，简单实用。（2）图像链接：用图像作为链接载体，可使网页美观、生动活泼，它既可以指向单项链接，也可以根据图像不同的区域建立多个链接。2.如果按链接目标分类，可以将超级链接分为以下几种类型：（1）内部链接：同一网站之间的链接。（2）外部链接：不同网站文档之间的链接。（3）锚点链接：同一网页或不同网页中指定位置的链接。（4）E-mail链接：发送电子邮件的链接。3.5.23.5.2创建超链接的方法创建超链接的方法在属性面板中建立超级链接有3种方法：n直接输

13、入链接地址URL；n拖曳指向文件图标到“站点”窗口要链接的文件上；n单击该文本框右边的文件夹按钮，弹出“选择文件”对话框，利用该对话框选定文件，在属性面板中设置链接的位置。3.5.33.5.3创建锚点链接创建锚点链接1.单击页面内要设置锚点的地方，将光标移至此处。再单击“插入”面板中“常用”选项卡内的“命名锚记按钮”，弹出“命名锚记”对话框，2.在“锚记名称”文本框内输入锚点的标记名称（例如MD1）。再单击“确定”按钮，退出该对话框。同时，在页面光标处会产生一个锚点标记。3.选中页面内的文字或图像，再按照下述的方法之一建立它们与锚点的链接。（1）在“属性”面板栏内的“链接”文本框内输入“和锚点

14、的名字”。例如，输入“#MD1”，即可完成选中的文字或图像与锚点的链接。（2）用鼠标拖曳“链接”栏的指向图标到目标锚点上，再松开鼠标左键，即可完成选中的文字或图像与锚点的链接。3.5.43.5.4创建创建E-mailE-mail链接链接n创建电子邮件链接的方法：首先定位光标，然后单击“插入”工具栏上的“电子邮件链接”图标，打开“电子邮件链接”对话框。在第一个文本框中输入要链接的文字，在第二个文本框里输入收件人的邮箱地址。按“确定”按钮，返回编辑窗口，完成操作。3.5.53.5.5创建导航条创建导航条1.定位光标，在“常用”插入工具栏中，单击“图像”按钮旁边的小三角形，在弹出的菜单中单击“导航条

15、”按钮，弹出“插入导航条”对话框。然后在该对话框中设置各个参数，2.在导航条中，每个图像链接被称为一个项目，所有的项目都显示在“导航条元件”列表框中，刚开始只存在一个默认的导航条按钮。在“项目名称”文本框中输入第一个导航条元件的名称为“button1”。3.在“状态图像”文本框中输入图像文件的路径和名称，也可以通过单击文本框右侧的“浏览”按钮，从磁盘上选择已有的图像文件。同插入图像的操作一样，如果图像文件不在站点根文件夹内，会弹出对话框询问是否将图片复制到站点文件夹中。使用同样的方法，为“鼠标经过图像”、“按下图像”、“按下时鼠标经过图像”分别选择图像。4.在“替换文本”文本框中输入项目的描述

16、性名称。替换文本在纯文本浏览器或设为手动下载图像的浏览器中，替代图像出现在应显示图像的位置。屏幕阅读器读取替换文本，而且有些浏览器在用户鼠标滑过导航条项目时显示替换文本。5.在“按下时，前往的URL”的文本框中输入以选择要打开的链接文件，单击“浏览”按钮，然后从弹出菜单中选择打开文件的位置。6.选择“预先载入图像”复选框，可在载入页面时下载图像。如果未选择此选项，在用户将鼠标指针滑过鼠标经过图像时可能会出现延迟。7.对于“页面载入时就显示鼠标按下图像”复选框，如果选中它，访问者浏览该网页时，会先显示在“按下图像”文本框中设置的图像；如果取消对该复选框的选择，浏览该网页时，会先显示在“状态图像”

17、文本框中设置的图像。8.在“插入”下拉列表框中可以选择导航条的排列方式，有两个选项：“水平”和“垂直”。如果选择“水平”，则导航条将水平排列；如果选择“垂直”，则导航条将垂直排列。这里选择“水平”。9.对于“使用表格”复选框，如果选中它，则使用表格来排列导航条中的元件。10.单击加号按钮向导航条添加另一个项目，然后重复上述步骤定义该项目。完成导航条项目的添加及定义后，单击“确定”按钮关闭“插入导航条”对话框。11.保存网页文档，然后按F12快捷键浏览该网页。3.5.6 网页中的图像热点链接 创建图像热点链接，执行以下操作：1.在“文档”窗口中，插入一张图像，2.在属性检查器中，在属性面板左下角选择“绘制热点工具”，根据需要选择不同形状的热点区域绘制工具，3.创建热点后，出现热点属性面板，在热点属性面板的“链接”文本框中，输入链接的目标，也可以通过“指向文件”按钮或者通过游览文件按钮来定位链接。3.63.6实例制作实例制作n3.6.1 3.6.1 锚点制作实例锚点制作实例n3.6.2 热点链接制作实例 n3.6.3 去掉超链接的下划线