第4章在网页中插入图片

向下向上末页首页调音返回结束课堂讲解上机实战第4课为网页添加图像向下向上末页首页调音返回结束课堂讲解网页图像的格式及来源插入图像设置图像属性图像高级设置向下向上末页首页调音返回结束网页图像的格式及来源GIF格式JPEG格式PNG格式网页图像来源向下向上末页首页调音返回结束GIF格式GIF全称为“GraphicsInterchangeFormat”，意为可交换图像格式，它是第一个支持网页的图像格式，在PC机和苹果机上都能被正确识别。它最多支持256种颜色，可以使图像变得容量相当小。GIF图像可以在网页中以透明方式显示，还可以包含动态信息，即GIF动画。向下向上末页首页调音返回结束JPEG格式JPEG全称为“JointPhotographicExpertsGroup”，意为联合图像专家组，它可以高效地压缩图片，丢失人眼不易察觉的部分图像，使文件容量在变小的同时基本不失真，通常用来显示颜色丰富的精美图像。向下向上末页首页调音返回结束PNG格式PNG全称为“PortableNetworkGraphics”，意为便携网络图像，它是逐渐流行的网络图像格式。PNG格式既融合了GIF能透明显示的特点，又具有JPEG处理精美图像的优势，且可以包含图层等信息，常常用于制作网页效果图。向下向上末页首页调音返回结束网页图像来源网页图像的素材有很多来源，如可以使用图形处理软件（如Photoshop、Fireworks和FreeHand等软件）制作；可以购买网页素材光盘；可以从网络上下载等。向下向上末页首页调音返回结束插入图像直接插入占位符插入图像的放大显示向下向上末页首页调音返回结束5.4制作图像页面直接插入插入图像图像可以在Dreamweaver8中的【设计】视图或者【代码】视图中被插入到文档里。在Dreamweaver8的文档中添加图像时，可以设置或者修改图像属性并可直接在文档窗口中查看所作的修改，插入图像的具体步骤如下：（1）用鼠标指针确定图像的插入点。（2）单击【插入》图像】菜单项，打开【选择图像源文件】对话框，如图所示，在此对话框中选择需要插入的图像文件。或者按【Ctrl+Alt+I】键向下向上末页首页调音返回结束向下向上末页首页调音返回结束（3）单击【确定】按钮，如果图像文件在站点外面，就会弹出一个对话框，如图5-23所示。向下向上末页首页调音返回结束（4）单击【确定】按钮，图像就能插入到网页中并将其复制到站点的根目录下。（5）打开【图像标签辅助功能属性】对话框，如图5-24所示，在此对话框的【替换文本】下拉列表框中可以替换替代图片的文字。向下向上末页首页调音返回结束5.4.2设置图像属性选中插入的图像，可以在【属性】面板中查看该图像的属性，如图5-25所示。下面介绍【属性】面板中各个参数的含义：文本框：用于设置图像的名称，以便在应用行为、编辑脚本时引用，如制作交换图像、导航条时使用。宽和高：用于设置图像在当前文档中的大小。源文件：显示插入的图像所在的位置，通过它可以将当前的图像更换成其他图像。单击其右边的图标更换图像。替换：设置当图像不能正常显示时的提示文字，如图5-26所示。向下向上末页首页调音返回结束类：在类右边的下拉列表中存放的是图像样式，可以选择需要的样式应用于当前的图像，现在该下拉列表中没有任何东西，但在学习CSS样式后，它的作用就很明显的体现出来了。链接：是将当前图像与其他位置的内容链接，实现页面的跳转。其下方的目标是对链接内容的打开方式的设定。编辑：单击【编辑】按钮，启动Fireworks程序，在Fireworks窗口中对当前的图像进行编辑。编辑完毕后，单击Fireworks中的【完成】按钮，将保存所做的修改并应用到Dreamweaver8的当前图像中，通过该功能可使图像快速得到修改。使用Fireworks最优化：单击【使用Fireworks最优化】图标，利用Fireworks对图像进行最优化处理。剪裁：用于剪裁当前的图像。单击【剪裁】图标后，图像上出现剪裁的选取框，如图5-27所示。向下向上末页首页调音返回结束向下向上末页首页调音返回结束中间亮的部分是需要保留的区域，四周较暗的部分是要裁掉的部分。用鼠标指针拖动四周的控制点调整剪裁范围，调整好后在图片上双击即可完成裁剪。亮度与对比度：调整图像的明暗度与对比度，单击【亮度/对比度】图标，打开【亮度/对比度】对话框。在亮度项中拖动滑块即可调整图像的明暗度，滑块越向右图片越亮；在对比度项中拖动滑块即可调整图像的对比度，滑块越向右对比度越强，如图5-28所示。向下向上末页首页调音返回结束向下向上末页首页调音返回结束锐化：通过锐化图像，可使图像的边缘更加清晰。单击【锐化】图标，打开【锐化】对话框，拖动【锐化】滑块，可以调整图片的轮廓，滑块越向右图片的轮廓越明显，如图5-29所示。向下向上末页首页调音返回结束垂直边距：设置图像距上侧和下侧内容的间距。水平边距：设置图像左侧和右侧内容的间距。低解析度源：有些版本中为“低品质原”，其功能是指定一个与当前图像画面内容一致，但图像质量低、文件小的图像作为当前图像的载入前图像。目的是使浏览器快速显示该图像。边框：确定是否给图像加边框，没有值表示无边框，值越大边框越粗。对齐：对齐的下拉列表中包括默认值、基线、顶端、居中、底部、文本上方、绝对居中、绝对底部、左对齐、右对齐这10种方式。向下向上末页首页调音返回结束5.4.4插入图像占位符在制作网页的时候，经常会使用图像占位符。通过插入一个图像占位符，将需要放置图像的位置和大小固定下来，排版完成后，再插入对应的图像。图像占位符不会在浏览器中出现，以最终插入的图像最为最终的显示效果。具体的操作步骤如下：（1）在编辑页面中用鼠标选择需要插入图像占位符的位置。（2）单击【插入】图像对象】图像占位符】菜单项，如图5-34所示。向下向上末页首页调音返回结束向下向上末页首页调音返回结束（3）打开【图像占位符】对话框，输入占位符的名称，如图5-35所示。向下向上末页首页调音返回结束（4）在【图像占位符】对话框中设置占位符的宽度和高度，并为其选择一种颜色加以区别。在【图像占位符】对话框各种参数的含义如下：名称：作为图像占位符的标签文本，可在应用行为、编写脚本时引用。名称必须以字母开头，并且只能包含字母和数字。不使用空格和特殊字符。宽度和高度：设置占位符的大小，也就是将来插入到占位符中的图像的大小。当然，如果图像比占位符大或小，则占位符的大小以图像的大小为准。向下向上末页首页调音返回结束（5）单击【确定】按钮，即插入一个图像占位符，在编辑页面插入一个图像占位符的效果如图5-36所示。向下向上末页首页调音返回结束（6）完成网页规划以后，用所设计的图像替换图像站位符，按F12键可以预览图片的效果。如图5-37所示。向下向上末页首页调音返回结束5.4.5插入鼠标经过图像在网页中，鼠标经过图像时经常被用来制作动态效果。当鼠标移动到图像上时，该图像就变成另外一个图像。这样的效果被广泛的应用到按钮、导航条的制作中。具体操作步骤如下：（1）将光标定位到一个图的位置。（2）单击【插入》图像对象》鼠标经过图像】菜单项，打开【插入鼠标经过菜单】对话框。（3）单击【浏览】按钮，分别设置原始图像和鼠标经过的图像的路径。向下向上末页首页调音返回结束（4）在【替换文本】文本框输入提示文字“风景图”，如图5-38所示。向下向上末页首页调音返回结束在【插入鼠标经过图像】对话框中各个参数的含义如下：原始图像：输入显示在当前窗口中的图像的路径，或单击【浏览】按钮在弹出的对话框中指定原始图像的路径。鼠标经过图像：输入在浏览时鼠标经过原始图像后用来替换原图像的替换图象的路径，或单击【浏览】按钮指定路径。预载鼠标经过图像：选取复选框，在加载页面时鼠标经过图像预先载入到浏览器的缓存中，以使用户将鼠标指针滑过图像时不发生延迟。替换文本：该项与前面介绍的图像的替换相同。按下时，前往的URL：输入当前鼠标单击交换图像时要打开的文档路径。如果只需要交换图像，可以不设置该项；如果需要交换图像并跳转到某一个页面，就需要指定该项。（5）单击【确定】按钮，就完成了插入鼠标经过图像的设置。（6）保存文档后，按F12浏览制作的交换图像效果，在浏览器中预览的效果如图5-39所示。向下向上末页首页调音返回结束向下向上末页首页调音返回结束5.4.6插入导航条导航条实际上是由一幅图像或一套图像组成的，每幅图像分别链接到不同的目标文档上。浏览者在需要浏览的标题上单击，就可跳转相应的网页并查看相关的内容。在Dreamweaver8中可以把导航条中的按钮设置为状态图像、鼠标经过图像、按下图像和按下时鼠标经过图像四种状态。下面就以制作一个网页的导航条为例进行讲解。首先准备好素材图片，具体的操作步骤如下：（1）根据需要在页面中插入一个1行4列的表格，并且设置单元格的宽度与素材图片相同，如图5-40所示。向下向上末页首页调音返回结束（2）选中第一个单元格。（3）单击【插入》图像对象》导航条】菜单命令，打开【插入导航条】对话框，如图5-41所示。向下向上末页首页调音返回结束在【插入导航条】对话框中各种参数的含义如下：导航条元件：该列表中显示添加的导航条项目。每个项目都对应一个具有一组状态图像的按钮，状态最多可达4个。项目名称：输入导航条项目的名称，只能输入英文和数字，不能输入汉字。项目名称在【导航条元件】列表中显示。单击右边的箭头按钮可排列项目在导航条中位置。状态图像：用户未单击或尚未与此项目交互时所显示的图像。鼠标经过图像：指鼠标经过图像时所显示的图像。项目的外观发生变化，以便让用户知道可与这个项目进行交互。按下图像：指项目被单击后所显示的图像。按下时鼠标经过图像：指在项目被单击后，鼠标按下时所显示的图像。向下向上末页首页调音返回结束替换文本：与图像属性中的替代功能相同。按下时，前往的URL：输入单击导航条时要跳转到的页面的路径，并在右边的下拉列表中选择文档打开的目标窗口。选择【主窗口】表示在同一个窗口中打开。如果是框架页面，则要选择在那个框架页面中显示。预先载入图像：与交换图像中的预载鼠标经过图像相同。页面载入时就显示“鼠标按下图像”：即在也面被浏览器载入时，就将图像显示为按下状态。插入：在该栏中设置创建好的导航条在页面中放置的位置。使用表格：选中复选框，则将创建的导航条的各项目放置于表格中，否则直接挨个排列。向下向上末页首页调音返回结束（4）单击【浏览】按钮，打开【选择图像源文件】对话框，选择要插入的图片，如图5-42所示。向下向上末页首页调音返回结束（5）单击【确定】按钮，用相同的方法为每种状态图像设置路径，如图5-43所示。向下向上末页首页调音返回结束（6）单击【确定】按钮，在选中的单元格中插入一个导航条的按钮，如图5-44所示。（7）用同样的方法插入导航条的每一个按钮，如图5-45所示。向下向上末页首页调音返回结束（8）完成后在浏览器中预览的效果如图5-46所示。按下时鼠标经过：鼠标按下时：鼠标经过时：初始化时的效果：向下向上末页首页调音返回结束设置图像属性在网页中插入图像后可通过属性面板对其属性进行修改等设置。图像命名图像大小编辑图片源文件设置文本说明图像与文本的对齐图像边距图像边框向下向上末页首页调音返回结束图像命名为了在使用Dreamweaver行为（如交换图像）或脚本撰写语言（如JavaScript或VBScript）时可以引用该图像，可在属性面板的“图像”文本框中为图像命名。向下向上末页首页调音返回结束图像大小在Dreamweaver8中插入图像后系统会自动将图像的原始大小显示在“宽”和“高”文本框（以像素为单位）中。向下向上末页首页调音返回结束编辑图片在网页中选择图像之后，单击属性面板中的按钮，打开图像处理软件，对图像进行处理。如果安装了Fireworks，那么Fireworks将被默认为图