1 / 50
文档名称:

在网页中插入图片学习教案.pptx

格式:pptx   大小:1,544KB   页数:50页
下载后只包含 1 个 PPTX 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

在网页中插入图片学习教案.pptx

上传人:wz_198613 2022/1/24 文件大小:1.51 MB

下载得到文件列表

在网页中插入图片学习教案.pptx

相关文档

文档介绍

文档介绍:网页图像的格式及来源
GIF格式
JPEG格式
PNG格式
网页图像来源
第1页/共49页
第一页,共50页。
GIF格式
GIF全称为“Graphics Interchange Format”,意为可交换图像格式,它是第15页/共49页
第十五页,共50页。
锐化:通过锐化图像,可使图像的边缘更加清晰。单击【锐化】图标,打开【锐化】对话框,拖动【锐化】滑块,可以调整图片的轮廓,滑块越向右图片的轮廓越明显,如图5-29所示。
第16页/共49页
第十六页,共50页。
垂直边距:设置图像距上侧和下侧内容的间距。
水平边距:设置图像左侧和右侧内容的间距。
低解析度源:有些版本中为“低品质原”,其功能是指定一个与当前图像画面内容一致,但图像质量低、文件小的图像作为当前图像的载入前图像。目的是使浏览器快速显示该图像。
边框:确定是否给图像加边框,没有值表示无边框,值越大边框越粗。
对齐:对齐的下拉列表中包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐这10种方式。
第17页/共49页
第十七页,共50页。
插入图像占位符
在制作网页的时候,经常会使用图像占位符。通过插入一个图像占位符,将需要放置图像的位置和大小固定下来,排版完成后,再插入对应的图像。图像占位符不会在浏览器中出现,以最终插入的图像最为最终的显示效果。具体的操作步骤如下:
(1)在编辑页面中用鼠标选择需要插入图像占位符的位置。
(2)单击【插入】图像对象】图像占位符】菜单项,如图5-34所示。
第18页/共49页
第十八页,共50页。
第19页/共49页
第十九页,共50页。
(3)打开【图像占位符】对话框,输入占位符的名称,如图5-35所示。
第20页/共49页
第二十页,共50页。
(4)在【图像占位符】对话框中设置占位符的宽度和高度,并为其选择一种颜色加以区别。
在【图像占位符】对话框各种参数的含义如下:
名称:作为图像占位符的标签文本,可在应用行为、编写脚本时引用。名称必须以字母开头,并且只能包含字母和数字。不使用空格和特殊字符。
宽度和高度:设置占位符的大小,也就是将来插入到占位符中的图像的大小。当然,如果图像比占位符大或小,则占位符的大小以图像的大小为准。
第21页/共49页
第二十一页,共50页。
(5)单击【确定】按钮,即插入一个图像占位符,在编辑页面插入一个图像占位符的效果如图5-36所示。
第22页/共49页
第二十二页,共50页。
(6)完成网页规划以后,用所设计的图像替换图像站位符,按F12键可以预览图片的效果。如图5-37所示。
第23页/共49页
第二十三页,共50页。
插入鼠标经过图像
在网页中,鼠标经过图像时经常被用来制作动态效果。当鼠标移动到图像上时,该图像就变成另外一个图像。这样的效果被广泛的应用到按钮、导航条的制作中。具体操作步骤如下:
(1)将光标定位到一个图的位置。
(2)单击【插入》图像对象》鼠标经过图像】菜单项,打开【插入鼠标经过菜单】对话框。
(3)单击【浏览】按钮,分别设置原始图像和鼠标经过的图像的路径。
第24页/共49页
第二十四页,共50页。
(4)在【替换文本】文本框输入提示文字“风景图”,如图5-38所示。
第25页/共49页
第二十五页,共50页。
在【插入鼠标经过图像】对话框中各个参数的含义如下:
原始图像:输入显示在当前窗口中的图像的路径,或单击【浏览】按钮在弹出的对话框中指定原始图像的路径。
鼠标经过图像:输入在浏览时鼠标经过原始图像后用来替换原图像的替换图象的路径,或单击【浏览】按钮指定路径。
预载鼠标经过图像:选取复选框,在加载页面时鼠标经过图像预先载入到浏览器的缓存中,以使用户将鼠标指针滑过图像时不发生延迟。
替换文本:该项与前面介绍的图像的替换相同。
按下时,前往的URL:输入当前鼠标单击交换图像时要打开的文档路径。如果只需要交换图像,可以不设置该项;如果需要交换图像并跳转到某一个页面,就需要指定该项。
(5)单击【确定】按钮,就完成了插入鼠标经过图像的设置。
(6)保存文档后,按F12浏览制作的交换图像效果,在浏览器中预览的效果如图5-39所示。
第26页/共49页
第二十六页,共50页。
第27页/共49页
第二十七页,共50页。
插入导航条
导航条实际上是由一幅图像或一套图像组成的,每幅图像分别链接到不同的目标文档上。浏览者在需要浏览的标题上单击,就可跳转相应的网页并查看相关的内容。在Dreamweaver 8中可以把导航条中的按钮设置为状态图像、鼠标经过图像、按下图像和按下时鼠标经过图像四种状态。下面就以制作一个网页的导航条为例进行