漂亮的网页除了包含文本之外,往往还采用一些精美别致的图片来装饰,使网页更加生动、形象和美观。网页中的图片主要使用GIF和JPG两种格式,这两种格式的图片因其图形文件被压缩后保存,文件较小,适合于在网上传输,并且大部分浏览器都支持这两种格式。
GIF图片,即图形交换格式的图片,这种图片的文件很小,可以设置为透明的背景,并可以具有动态效果,适用于显示一些不间断色调或大部分为同一色调的图像,但这种格式的图片只能支持256色,因此不适宜用于保存风景类照片。
JPG图片,即文件交换格式的图片,这种图片格式支持16MB色彩,即通常所说的24位颜色或真彩色,色彩非常丰富,色调过渡比较细腻,图片文件也不太大,适用于保存一些具有连续色调的图片,如风景类图片。
在网页中设置图片的方法如下。
(1)插入图片
在网页中插入图片时,首先应将需要用于网页的图片文件存放在网站专用文件夹的图片文件夹中,以便确保网页引用时的正确性,否则不能在网页中正常显示。
在网页中插入图片时,应先将插入点定位于要插入图片的位置,再执行“插入”一“图像”命令,即可将所选图片插入到当前位置。
(2)设置图片属性
插入图片后,可根据页面布局的需要,对插入的图片进行相应的设置和调整。
1)设置图片大小。单击插入的图片,此时,编辑窗口下方的属性面板将显示该图片的相关属性。单击选定插入的图片,在“属性”面板中的“宽”和“高”文本框中输入宽度和高度值(单位:像素),可以设置插入到网页中的图片大小。
2)重新设置插入的图片。如果插入到网页中的图片文件在文件夹中的位置被调整,此时,图片在网页中就不能正常显示,要想重新指定该图片文件的位置,只需要在选定图片时,在“属性”面板的“源文件”栏中单击其右端的“浏览”按钮,重新选择图片文件即可。使用这种方法也可以实现将另一幅图片代替现在的图片,而不需要再重新设置图片的大小等属性。
3)设置图片替代文本。单击选定图片,在“属性”面板中的“替代”文本框,用于输入图片的说明文本,即当鼠标指针移动到图片上时,在图片位置显示该文本的内容。
4)设置边距。单击选定图片,在“属性”面板中的“垂直边距”和“水平边距”文本框中输入设定值(单位:像素),可以设置图片左边或右边与其左方或右方其他页面元素(如文字,其他图片等)的距离,以及设置图片上方或下方与其上方或下方其他页面元素的距离。
5)设置图片链接。单击选定图片,在“属性”面板中的“链接”框中设置链接目标,可以为该图片设置超级链接,并且还可以通过“目标”设置打开该链接时的窗口方式,具体如下。
.blank:在新窗口中打开链接。
.parent:在父级框架中打开链接(适用于框架网页)。
_self:在本窗口打开链接(默认方式)。
_top:在整页中打开链接。
6)编辑图片。单击选定图片,单击“属性”面板“编辑”组中的按钮,可以对图片进行相应的编辑操作,如启动默认的外部图像编辑器,重新编辑并保存图片,网页中的图像将随之自动更新;可以重新设置图片,将其颜色设置为网页安全色,可以设置图片是否透明、更改图片大小或对图片进行裁剪;可以设置图片的亮度、对比度、锐化等。
7)设置图片边框。单击选定图片,在“属性”面板的边框”文本框中,可以设置图
片边框的宽度(单位:像素)。
8)设置图片的对齐方式。单击选定图片,在“属性”面板的“对齐”列表中,可以设置图片与其他对象的对齐方式。
二、任务实施步骤
单击布局中的标准模式,在标准模式下添加banner条。执行菜单中的“插入”峙“图像”命令,将图片插入到页面布局的头部位置
三、任务完成总结
该任务让学生掌握在网页中插入图片以及设置图片属性的方法。