网页制作之网页中的图像和链接
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
3.3使用外部图像编辑器
为现有的文件类型设置Photoshop外部图像编辑器的具体操作步骤 如下。
1.单击“编辑”菜单中的“首选参数”,打开“首选参wenku.baidu.com”对话框, 从中选择图像的编辑器,从左边的“分类”列表中选择“文件类 型/编辑器”,
2.在“扩展名”列表中,选择要为其设置外部编辑器的文件扩展名, 选择了名为.jpg .jpeg 的扩展名。
第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(可移植网络图形) 三种格式的图像。
3.4.1 在网页中插入图片实例 3.4.2 鼠标经过图像的效果 3.4.3 精美的网站相册
3.4.1 在网页中插入图片实例
一个漂亮的网页中,必然少不了漂亮的图片作为点缀。 接下来我们要在“数学与计算机系”网站的主页中插 入两幅图片。
3.4.2 鼠标经过图像的效果
鼠标经过图像是一种在浏览器中查看网页时,鼠标光 标经过该图像时,图像发生变化的动态图像。利用这 种图像,可以在页面中实现丰富的交互效果,例如常 见的按钮变化、导航栏效果的变化、图片变化。
3.1.2 图像的插入
1.直接插入 选择“插入”菜单中的“图像”菜单命令,也可以单击插入栏的“常
用”选项卡中的图像按钮,或按Ctrl+Alt+I组合键。 2.占位符插入 方法是:选择“插入”菜单中的“图像对象”,在级联菜单中单击
“图像占位符”,或在“常用”插入工具栏中,单击“图像”按钮 旁边的小三角形,在弹出的下拉菜单中单击“图像占位符”,打开 “图像占位符”对话框,在打开的对话框中设置后插入即可。
3.单击“编辑器”列表上方的加号按钮。在出现的“选择外部编辑 器”对话框中,游览要作为此文件类型的编辑器启动的应用程序, 选择Photoshop。
4.单击“打开”按钮,回到参数对话框,如果希望该编辑器成为此 文件类型的主编辑器,单击“设为主要”按钮,Photoshop后面 加入了“主要”字样。
3.4实例制作
1.GIF格式(graphics interchange format)是目前网络中应用最为广泛的图 像压缩格式,采用LZW无损失压缩算法,不会出现图像效果的失真。它分为 静态GIF和动画GIF两种,支持透明背景图像,适用于多种操作系统,文件 很小,可以极大地节省存储空间,因此常常用于保存作为网页数据传输的 图像文件。
3.2.2移动和复制图像
选中要编辑的图像,这时图像周围会出现几个黑色方 形的小控制柄。如果要移动或复制图像,可以像移动 文字那样,用鼠标拖曳图像到目标点,即可移动图像; 按住Ctrl键并用鼠标拖曳图像到目标点,即可复制图 像。
3.2.3 图片和文本的对齐方式
1.图像与文字相对位置的调整 在图像属性工具栏内的“对齐”下拉列表框中有10个列表项,用来
GIF格式的图像最多只能显示256种颜色。对于包含颜色数目较少的图像,可选 用GIF格式,如卡通、徽标、包含透明区域的图形以及动画等。
2.JPEG格式(Joint Photo graphic Experts Group)简称JPG,是应用最广泛 的图片格式之一,它采用一种特殊的有损压缩算法,将不易被人眼察觉的 图像颜色删除,从而达到较大的压缩比,所以“身材娇小,容貌姣好”, 特别受网络青睐。
JPEG支持24位真彩色,因此JPEG格式显示图像色彩丰富。对于使用的颜色数较 多,含有大量过渡颜色区域,而且追求图像质量的图像应选用JPEG格式, 如扫描的照片、使用纹理的图像和任何需要256种以上颜色的图像等。
3.PNG格式(Portable Netork Graphics)是一种新兴的网络格式。该格式是 目前保证最不失真的格式,它汲取了GIF和JPEG格式的优点,存储形式丰富, 兼有GIF和JPEG格式的色彩模式。采用的也是一种无损压缩算法,能真实再 现图像原貌,最多可以支持32位的颜色,因此它同时具有GIF格式和JPEG格 式的优点。
进行图像与文字相对位置的调整。这些列表项的含义如下。 “默认值”列表项:使用浏览器默认的对齐方式,不同的浏览器会
稍有不同。 “基线”列表项:图像的下沿与文字的基线水平对齐。 “顶端”列表项:图像的顶端与当前行中最高对象(图像或文本)
的顶端对齐。 “中间”列表项:图像的中线与文字的基线水平对齐。 “底部”列表项:图像的下沿与文字的基线水平对齐。 “文本上方”列表项:图像的顶端与文本行中最高字符的顶端对齐。 “绝对中间”列表项:图像的中线与文字的中线水平对齐。 “绝对底部”列表项:图像的下沿与文字的下沿水平对齐。文字的
下沿是指文字的最下边,而基线不到文字的最下边。 “左对齐”列表项:图像在文字的左边缘,文字从右侧环绕图像
2.图像与文字间距的调整
图像与文字的间距是指图像与文字水平方向和垂直方向 的间距,可以在属性面板中改变“水平边距”和“垂 直边距”文本框内的数值来实现,数值的单位是像素
3.2.4设置图像边框
常常可以给图像添加一个边框来美化图像,选取图像 后,在属性面板的“边框”文本框中可以设置图像边 框的宽度,单位为像素,“0”表示无边框,默认图像 无边框
3.2 图像的编辑
3.2.1 设置图像大小 3.2.2 移动和复制图像 3.2.3 图片和文本的对齐方式 3.2.4 设置图像边框 3.2.5 为图像设置替换文字
3.2.1设置图像大小
1.拖动改变大小 在文档中选择需要调整大小的图像。图像的底部、右侧
及右下角出现调整大小的手柄,拖动图像的这三个控 制点可快速改变图像大小。 2.使用属性面板 用属性面板可以精确调整图像的大小,在“”文本框内 输入图像的宽度,系统默认的单位是像素(pixels)。 用同样的方法可在“”文本框内输入图像的高度。 3.使用代码编辑器