制作图文网页
学习要点:
●网页中图像的常见格式
●在网页中插入图像
●使用图像编辑器
●在网页中插入其他图像元素
美观的网页页是图文并茂的，一幅幅图像、一个个漂亮的按钮和标记不但使网页更加美观、形象和生动，而且使网页中的内容更加丰富多彩。可见，图像在网页中的作用是非常重要的。作为一名网页设计者，掌握好网页图像的运用就显得尤为重要。
一、网页中图像的常见格式
对于网络世界来说，图像应该既精美又小巧，以便于传播。大多数网页都采用以下几种图像格式：GIF、JPG、BMP和PNG，但是当今大多数的浏览器只支持前两种文件格式。
1、GIF是英文单词Graphic Interchange format的缩写，即图像交换格式，使用该格式的文件最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，便如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像。
GIF格式的最大优点就是制作动态图像，可以将数张静态文件作为动画帧串联起来，转换成为一个动画文件。
GIF格式的另一优点就是可以将图像以交错的方式在网页中呈现。所谓交错显示，就是当图像尚未下载完成时，浏览器会先以马赛克的形式将图像慢慢显示，让浏览者可以大略猜出下载图像的雏形。
2、JPEG是英文单词Joint Photographic Experts Group的缩写，它是一种图像压缩格式，该文件格式是用于摄影或连续色调图像的高级格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。
JPEG格式是一种压缩得过且过非常紧凑的格式，专门用于不含大色块的图像。JPEG 的图像有一定的失真度，但是在正常的损失下肉眼分辨不出JPEG和GIF图像的区别，而JPEG文件的大小只有GIF文件大小的四分之一。JPEG对图标之类的含大色块的图像不是很有效，并且不支持透明图和动态图，但它能够保留全真的色调板格式。如果图像需要全彩模式才能表现出效果，那么JPEG无疑是最佳的选择。
3、PNG是英文单词Portable Network Graphic的缩写，即便携网络图像，它是一种替代GIF格式的无专利权限制的格式，支持索引色、灰度、真彩色图像以及Alpha透明通道。PNG 是Macromedia Fireworks固有的文件格式。PNG文件可保留所有原始层、矢量、颜色和效果信息，并且在任何时候所有元素都是可以完全编辑的。文件必须具有.png文件扩展名才能补Dreamweaver识别为PNG文件。
4、BMP图像格式是微软公司制定的用于在Windows操作系统中存储图像的格式，一般的Windows程序都支持该图像格式。该图像分为黑白图像、16位图像、32位图像等。BMP 位图格式采用RLE无压缩的编码，该编码的格式既不损坏图像的色彩信息，又可以节省大量的存储空间。
二、在网页中插入图像
将图像插入Dreamweaver文档时，Dreamweaver会自动在HTML源代码中生成对该图像文件的引用。使用Dreamweaver既可以在文档中插入图像，也可以将图像设置为文档的背景图像。
（一）、插入图像
1、使用“插入”菜单
“插入>图像”命令，在“选择图像源文件”对话框中选择需要的图像文件，单击“确定”
2、使用插入栏
单击“常用”插入栏中的图片按钮，弹出“选择图像源文件”对话框，同上操作。
3、使用“资源”面板
选择“窗口>资源”命令打开“资源”面板，在“资源”面板中单击图片按钮，展开图像子面板，在其中选择图像文件，然后用鼠标将图像文件拖动到网页中合适的位置。（二）、设置图像属性
在窗口中加入图像后，在图像的“属性”面板中可以设置图像的属性。各参数含义如下：
名称：在缩略图右侧的文本框中为图像设置名称，在用于行为时可以调用其名称。
“宽”和“高”：设置在浏览器中所显示的图像的宽度和高度数值。
源文件：指定图像的路径。
链接：指定图像文件的链接文件。
“左对齐”按钮、“居中对齐”按钮、“右对齐”按钮：指定图像周围文本的对齐方式。
替换：图像的说明性文字，如果浏览器无法显示图像，则在图像的位置会显示输入的替代性说明文字。
地图：用于创建客户端图像地图。
“垂直边距”和“水平边距”：垂直边距用于设置图像上下的空白，水平边距用于设置图像左右两边的空白。
目标：指定链接所指向的网页加载到哪个帧或窗口。
低解析度源：指定在图像下载完成之前显示的低质量图像。
边框：设置图像周围边框的宽度。
编辑：打开设定的图像编辑器来编辑所选图像。
对齐：设置图像和文字的对齐方式。
三、使用图像编辑器
通过图像编辑器可以对图像进行复杂的编辑。在图像的编辑器中修改完毕后，回到Dreamweaver中，图像会自动更新。
（一）、裁剪图像
选中要裁剪的图像，在“属性”面板中单击“裁剪”按钮，弹出提示对话框“您要执行的操作。。。。。。”点击“确定”按钮，即可在“属性”面板中将“宽”、“高”进行相应设置，然后在图像上双击鼠标左键，完成对图像的裁剪。
（二）、使用Fireworks优化图像
选中要优化的图像，然后单击“属性”面板中的“使用Fireworks最优化”按钮，弹出“查找源”对话框，单击“使用此文件”按钮，弹出Fireworks图像优化窗口，优化设置完毕后，单击“更新”按钮。
（三）调整图像的亮度和对比度
选中图像，单击“属性”面板中的“亮度和对比度”按钮，弹出提示对话框“你要执行的操作。。。。。。”单击“确定”按钮，弹出“亮度和对比度”对话框，在对话框中将“亮度”和“对比度”进行相应设置，单击“确定”关闭对话框。
（四）锐化图像
锐化将增加对象边缘像素的对比度，从而增加图像清晰度或锐度。
选中图像，单击“图像”面板中的“锐化”按钮，弹出提示对话框“您要执行的操作。。。。。。”单击“确定”按钮，弹出“锐化”对话框，在对话框中将“锐化”进行相应设置，“确定”关闭对话框。
四、在网页中插入其他图像元素
（一）、插入图像占位符
有时候根据页面布局的需要，会在网页中插入一幅图片。这个时候可以先不制作图片，而是使用占位符来代替图片位置，布局好网页后再使用占位符启动Fireworks创建图片。插入图像占位符的具体方法如下：
将光标位置放在要插入图像占位符的位置，选择“插入>图像对像>图像占位符”命令，弹出“图像占位符”对话框，在对话框的“名称”文本框中输入要插入图片的名称，在“高度”和“宽度”文本框中输入图片的高度和宽度的数值，在“颜色”选择器中设置占位符的颜色，最后单击“确定”按钮。
（二）、插入鼠标经过图像
鼠标经过图像是一种在浏览器中查看并在鼠标指针移过它时发生变化的图像。在创建前，需要使用主图像和次图像两个图像文件创建鼠标经过图像。主图像是指首次载入页面时显示的图像，次图像是鼠标指针经过主图像时显示的图像。方法如下：
选择“插入>鼠标对象>鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，在对话框的“图像名称”文本框中输入一个名称，然后单击“原始图像”文本框右侧的“浏览”按钮，再在弹出的Original Image对话框中选择鼠标经过前的原始图像，也可以直接输入图像的名称或路径，“确定”；单击“鼠标经过图像”文本框右侧的“浏览”按钮，在弹出的Rollover Image对话框中选择鼠标经过原始图像时显示的图像，也可以直接输入图像的名称或路径，“确定”；在“替换文本”文本框中输入相应文字，并选择“预载鼠标经过图像”复选框；单击“确定”按钮关闭对话框，然后保存文档。F12预览效果。
作业4：将作业4文件夹复制至桌面，用Dreamweaver编辑作业4文件夹中的index.html文档，将“幼儿简介”中的文字资料放入网页相应位置并将字号设定为17，再在文本中插入图片（images文件夹下的4.jpg）,最终得到end的效果。以“work4.html”保存至作业4文件夹，最后将整个作业4文件夹复制至自己服务器的文件夹中。
作业5：将作业5文件夹复制至桌面，用Dreamweaver编辑作业5文件夹中的index.html文档，将光标放置在“幼儿园”后，选择“插入表格”命令，插入一个一行七列的表格；将光标放置在第一列单元格中，选择“插入--图像对象--鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，在对话框中进行相应设定，做出鼠标经过图像效果。重复操作设定其余各列。最终得到end的效果。以“work5.html”保存至作业5文件夹，最后将整个作业5文件夹复制至自己服务器的文件夹中。
1、在HTML中，（）标记不可出现在
和标记符之间。（C） （Ａ）