网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第3章.ppt

《网页制作技术——Dreamweaver Flash Fireworks 教学课件 作者 赵丰年 第3章.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第3章使用图像3.1Web图像基础3.2在网页中使用图像3.1.1矢量图与位图在图像处理过程中，用户需要区分矢量图和位图。1．矢量图矢量图形使用称为矢量的线条和曲线（包括颜色和位置信息）描述图像。例如，一片叶子的图像可以使用一系列的点（这些点最终形成叶子的轮廓）描述；叶子的颜色由轮廓（即笔触）的颜色和轮廓所包围的区域（即填充）的颜色决定，如图3.1所示。返回目录3.1Web图像基础图3.1矢量图2．位图位图图形由排列成网格的称为像素的点组成。例如，在一个位图的叶子图形中，图像由网格中每个像素的位置和颜色值决定；每个点被指定一种颜色；在以正确的分辨率查看时，这些点就像马

2、赛克那样拼合在一起形成图像，如图3.2所示。3.1.1矢量图与位图在图像处理过程中，用户需要区分矢量图和位图。1．矢量图矢量图形使用称为矢量的线条和曲线（包括颜色和位置信息）描述图像。例如，一片叶子的图像可以使用一系列的点（这些点最终形成叶子的轮廓）描述；叶子的颜色由轮廓（即笔触）的颜色和轮廓所包围的区域（即填充）的颜色决定，如图3.1所示。返回目录2．位图位图图形由排列成网格的称为像素的点组成。例如，在一个位图的叶子图形中，图像由网格中每个像素的位置和颜色值决定；每个点被指定一种颜色；在以正确的分辨率查看时，这些点就像马赛克那样拼合在一起形成图像，如图3.2所示。3

3、.1.2常用Web图像格式虽然有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式只包括以下3种：GIF、JPEG和PNG。1．GIF格式2．JPEG格式3．PNG格式（3）如果所选择的图像文件不是站点中的文件，则将打开“MacromediaDreamweaverMX”对话框，如图3.3所示。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。图3.3“MacromediaDreamweaverMX”对话框图3.2位图3.1.2常用Web图像格式虽然

4、有很多种计算机图像格式，但由于受网络带宽和浏览器的限制，在Web上常用的图像格式只包括以下3种：GIF、JPEG和PNG。1．GIF格式2．JPEG格式3．PNG格式3.1.3Web图像的处理流程1．创建图形图像2．创建Web对象3．优化图像4．导出图形3.1.4Web图像使用要点1．确保文件较小2．控制图像的数量和质量3．合理使用动画3.2在网页中使用图像3.2.1插入图像在Dreamweaver中插入图像的步骤如下。（1）将光标置于要插入图像的位置，在“插入”栏的“常用”选项卡中单击“图像”按钮或选择“插入”菜单中的“图像”命令。（2）此时将打开“选择图像源”对话

5、框，选取存放在站点中的图像文件，最后单击“确认”按钮即可将图片插入到指定区域。返回目录（3）如果所选择的图像文件不是站点中的文件，则将打开“MacromediaDreamweaverMX”对话框，如图3.3所示。提示是否将图像文件保存到根目录下，单击“是”按钮，然后打开“拷贝文件为”对话框，定位到站点中用于存放图像文件的文件夹，最后单击“保存”按钮即可。图3.3“MacromediaDreamweaverMX”对话框3.2.2修改图像属性将图像插入指定位置后，可以利用“属性检查器”设置图像的属性，如图3.4所示。图3.4图像的“属性检查器”3.2.3图像与超链接1．图

6、像超链接在网页中指定图像作为超链接非常简单，步骤如下。（1）在文档窗口中，单击插入的图像，然后在“属性检查器”中的“链接”文本框旁单击“浏览文件”按钮。（2）打开“选择文件”对话框，定位到要跳转的文件后单击“确认”按钮即可。2．图像映射图像映射就是指在一幅图像中定义若干个区域（这些区域被称为热点），每个区域中指定一个不同的超链接，当单击不同区域时可以跳转到相应的目标页面，图3.5所示就是一个图像映射的效果。图3.5图像映射效果3.2.4动态图像效果通常网页中的动态图像效果需要编写JavaScript脚本程序才能获得，不过Dreamweaver能够使用户不用编写一行代码

7、，就能生成某些很好的图像效果，例如鼠标经过图像、网站相册等。1．制作鼠标经过图像鼠标经过图像就是指当访问者的鼠标经过图像时，图像变为另一幅图像；而鼠标离开时，图像又恢复为原始图像。它由两幅图像组成，即首次载入时显示的图像即原始图像和鼠标经过后翻转的图像即鼠标经过图像。在创建鼠标经过图像时应使用相同大小的两幅图像，可以使用Fireworks或Photoshop等图像处理软件制作出要用的图像。一般鼠标经过图像通常用于按钮导航，图3.6所示就是一个鼠标经过图像在按钮导航中的应用效果。图3.6鼠标经过图像效果制作鼠标经过图像的步骤如下。（1）将插入点定位到要