2.4 在网页中插入图像(课件）-高二《网页设计与制作》同步教学（北京理工版）

2.4 在网页中插入图像 Web中通常使用的图像格式有GIF , JPEG和PNG. GIF以减少显示颜色数目而不降低图像品质的方式来压缩文件的大小，最多为256色，支持透明背景。GIF还支持动画格式。 JPG又称JPEG，是一种有损压缩，图像的细节将被忽略，以缩小图像的大小，在一定的压缩率下，肉眼是很难分辨出区别的。JPG可显示的颜色数目高达16亿7千多万色。 PNG文件可保留所有的原始层、矢量、颜色和效果信息，并且保持可以编辑的状态。它包括对索引色、灰度、真彩色图像以及Alpha通道透明的支持。 返回 下一页 上一页 2.4 在网页中插入图像 2.4.1插入图像 插入图像的方法如下: (1)在文档中单击设置插入点。 (2)打开“插入”工具栏中的“常用”选项卡，单击“图像”下拉按钮，从列表框中选择“图像”命令，如图2-43所示。 (3)在打开的“选择图像源文件”对话框中选择图像文件。 (4)单击“确定”按钮，将打开“图像标签辅助功能属性”对话框，该对话框用于设置图像标签功能选项，如图2-44所示。 (5)单击“确定”按钮。插入图片后的效果如图2-45所示。 返回 下一页 上一页 2.4 在网页中插入图像 2.4.2设置图像的属性 选择文档中的图像，“属性”面板将显示图片的名称和大小等信息，如图2-46所示，可根据需要对图像进行设置，其中各选项的作用如下。 ·宽和高:设置图像的宽度和高度，单位为像素。 ·源文件:输入图像的源文件路径。可以绝对路径，也可以是相对路径。 ·链接:输入图像的内部和外部链接，可以是指向一个文件，或一个网页。 ·替换:输入图像的说明文字。当鼠标停留于图片上或者图像不能正常显示时，在其相应区域将显示说明文字。 返回 下一页 上一页 2.4 在网页中插入图像 类:选择应用已经定义好的CSS样式。 地图:创建图像热点地图，包括矩形热点工具、椭圆形热点工具、多边形热点工具。 垂直边距和水平边距:设置图像在垂直和水平方向上的空白间距，单位默认为像素。 目标:设置链接文件显示的目标位置。 低解析度源:指定在主图像被载入之前打开的低分辨率图像来源。 边框:设置图像的边框宽度，单位为像素，如图2-47所示为将边框设置为3的效果 对齐:默认的对齐方式下，文字沿着图片的底边排列，如选择“右对齐”选项的效果，图片会位于文本的右边，文字从左侧环绕图像。 返回 下一页 上一页 2.4 在网页中插入图像 2.4.3编辑图像 选择页面中的图像后，可以利用“属性”面板中的图像编辑工具，对图像进行编辑，如图2-48所示，其中各按钮的作用如下。 ·编辑 :单击该按钮，打开Photoshop软件图像对进行编辑。前提是已装有Photoshop软件。 ·优化 :单击该按钮，对图像进行优化。 ·裁剪 :单击该按钮，图像上会出现如图2-49所示的虚线区域，用鼠标拖动该虚线区域四周的角点，可以切割图像，如图2-50所示。 返回 下一页 上一页 2.4 在网页中插入图像 ·重新取样 :图像经过放大或缩小后，该按钮由灰色不可用状态变为可用状态，单击该按钮，可重新读取图片文件的信息。 ·亮度和对比度 :可以对当前图像的亮度和对比度进行调整。单击该按钮，打开“亮度/对比度”对话框，如图2-51所示，根据需要调整“亮度”或“对比度”即可。 ·锐化 :可以改变图像的清晰度，单击该按钮，打开“锐化”对话框，如图2-52所示，调整“锐化”前后的效果对比如图2-53所示。 返回 下一页 上一页 2.4 在网页中插入图像 2.4.4设置背景图像 在网页中，可以把图像设置为网页的背景，让页面更加美观。设置背景图像的方法如下。 (1)新建网页文档。 (2)单击“属性”面板中的“页面属性”按钮，打开“页面属性”对话框。 (3)单击“背景图像”文本框右边的“浏览”按钮，打开“选择图像源文件”对话框，从中选择需要的图像文件。 (4)单击“确定”按钮，返回到“页面属性”对话框，如图2-54所示，此时“背景图像”文本框中会显示所选图像的路径。 (5)在“重复”下拉列表框中，可选择图像在网页中的平铺方式，如图2-55所示。其中各选项的功能如下。 返回 下一页 上一页 2.4 在网页中插入图像 ·不重复:选择该选项，将仅显示背景图像一次。 ·重复:选择该选项，横向和纵向重复平铺图像。 ·横向重复:选择该选项，可横向平铺图像。 ·纵向重复:选择该选项，可纵向平铺图像。 (6)单击“确定”按钮，效果如图2-56所示。 2.4.5鼠标经过图像 在网页中，当鼠标移动到某一图像上时，该图像变成了另一幅图像;当鼠标移开时，又立即恢复成原来的图像，这就是所谓的“鼠标经过图像”。 返回 下一页 上一页 2.4 在网页中插入图像 插入鼠标经过图像的方法如下