网页设计与制作cs8第3章课件.ppt

《网页设计与制作cs8第3章课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第3章网页中的图像和链接第3章网页中的图像和链接3.1图像的应用3.2图像的编辑3.3使用外部图像编辑器3.4实例制作3.5创建超链接3.6实例制作3.1图像的应用3.1.1图像基础3.1.2图像的插入3.1.1图像基础由于网络对文件的容量要求非常苛刻，因此，网页中只能使用压缩比非常高的GIF（图形交换格式）、JPG（静止图像压缩格式）及PNG（可移植网络图形）三种格式的图像。1.GIF格式（graphicsinterchangeformat）是目前网络中应用最为广泛的图像压缩格式，采用LZW无损失压缩算法，不会出现图像效

2、果的失真。它分为静态GIF和动画GIF两种，支持透明背景图像，适用于多种操作系统，文件很小，可以极大地节省存储空间，因此常常用于保存作为网页数据传输的图像文件。GIF格式的图像最多只能显示256种颜色。对于包含颜色数目较少的图像，可选用GIF格式，如卡通、徽标、包含透明区域的图形以及动画等。2.JPEG格式（JointPhotographicExpertsGroup）简称JPG，是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比，所以“身材娇小，容貌姣好”，特别受

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

4、G格式的优点。3.1.2图像的插入1.直接插入选择“插入”菜单中的“图像”菜单命令，也可以单击插入栏的“常用”选项卡中的图像按钮，或按Ctrl+Alt+I组合键。2.占位符插入方法是：选择“插入”菜单中的“图像对象”，在级联菜单中单击“图像占位符”，或在“常用”插入工具栏中，单击“图像”按钮旁边的小三角形，在弹出的下拉菜单中单击“图像占位符”，打开“图像占位符”对话框，在打开的对话框中设置后插入即可。3.2图像的编辑3.2.1设置图像大小3.2.2移动和复制图像3.2.3图片和文本的对齐方式3.2.4设置图像边框3.2.5

5、为图像设置替换文字3.2.1设置图像大小1.拖动改变大小在文档中选择需要调整大小的图像。图像的底部、右侧及右下角出现调整大小的手柄，拖动图像的这三个控制点可快速改变图像大小。2.使用属性面板用属性面板可以精确调整图像的大小，在“”文本框内输入图像的宽度，系统默认的单位是像素（pixels）。用同样的方法可在“”文本框内输入图像的高度。3.使用代码编辑器3.2.2移动和复制图像选中要编辑的图像，这时图像周围会出现几个黑色方形的小控制柄。如果要移动或复制图像，可以像移动文字那样，用鼠标拖曳图像到目标点，即可移动图像；按住Ctr

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

7、文本行中最高字符的顶端对齐。“绝对中间”列表项：图像的中线与文字的中线水平对齐。“绝对底部”列表项：图像的下沿与文字的下沿水平对齐。文字的下沿是指文字的最下边，而基线不到文字的最下边。“左对齐”列表项：图像在文字的左边缘，文字从右侧环绕图像2．图像与文字间距的调整图像与文字的间距是指图像与文字水平方向和垂直方向的间距，可以在属性面板中改变“水平边距”和“垂直边距”文本框内的数值来实现，数值的单位是像素3.2.4设置图像边框常常可以给图像添加一个边框来美化图像，选取图像后，在属性面板的“边框”文本框中可以设置图像边框的宽度，

8、单位为像素，“0”表示无边框，默认图像无边框3.3使用外部图像编辑器为现有的文件类型设置Photoshop外部图像编辑器的具体操作步骤如下。1.单击“编辑”菜单中的“首选参数”，打开“首选参数”对话框，从中选择图像的编辑器，从左边的“分类”列表中选择“文件类型/编辑器”，2.在“扩展名”列表中，选择要为