项目五在DreamweaverCS3中录入页面元素.ppt

项目五 录入页面元素 任务一 录入图像 【知识目标】 1．了解网页中常用的图像格式。 2．熟悉图像的属性设置。 3．掌握插入图像、图像占位符及创建网站相册的方法。 任务一 录入图像 【技能目标】 1．能够在网页中灵活的使用图像。 2．会在Fireworks中编辑图像。 任务一 录入图像 【项目描述】 图像是网页中必不可少的元素之一，任何精美的网页中可以没有文本，但不能没有图像等多媒体元素。用户不但可以在网页中添加静态的插图，也可以插入动态图像，还可以将图像用做网页背景，以增加网页的美感。 5.1.1 项目准备 计算机图像可分为矢量图形和位图图像。 　　　矢量图形也称为向量图形，是由线条和节点组成的图像。矢量文件中的图形元素称为对象，每个对象都是一个自成一体的实体，具有颜色、形状轮廓、大小和屏幕位置等属性。矢量图形的文件大小与图像大小无关，只与图像的复杂程度有关，因此简单图像所占的存储空间很小；矢量图形可以无损缩放，不会产生锯齿或模糊现象。 　 位图图像也称为点阵图像，是由多个像素组成的图像。位图图像的每个像素点都包含有位置和颜色信息，一幅位图图像是由成千上万个像素点组成的。如果位图图像被放大会出现马赛克，整个图像会变得模糊。对于位图图像，它的清晰度与像素点的多少有关，单位面积内像素点数目越多，图像越清晰，存储所需的空间也会变大。 图像的文件格式 ： GIF格式是英文Graphics Interchange Format(图形交换格式)的缩写。这种格式最多使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像。GIF采用的是一种“无损”数据压缩格式。GIF可以同时存储若干静止图像，进而形成连续的动画。 JPEG格式是英文Joint Photographic Experts Group（联合图像专家组标准）的缩写。这种格式是用于摄影或连续色调图像的高级格式。 PNG格式是英文Portable Network Graphics（可移植网络图形）的缩写。它是一种替代GIF格式的无专利权限的格式，包括对索引角、灰度、真彩色图像以及alpha通道透明的支持，它是Fireworks图片处理程序的源文件。 　 插入图像及其属性设置 1．插入图像 常用的插入图像的方法有以下五种： （1）选择【插入记录】/【图像】命令，弹出【选择图像源文件】对话框，如图5-2所示。 （2）单击插入面板中的【常用】选项卡，选中【图像】按钮右侧的向下箭头，从弹出的下拉菜单中选择【图像】命令，弹出【选择图像源文件】对话框。 （3）从【资源】面板（【窗口】/【资源】）拖动图像到【文档】窗口中的指定位置。 （4）从【文件】面板拖动图像到【文档】窗口中的指定位置。 （5）从桌面拖动图像到【文档】窗口中的指定位置。 2．设置图像属性 　　 选中一幅图像或单击状态栏上的img标签时，在属性检查器上会显示该图像的属性，如图5-3所示。 　　 图5-3 图像的属性检查器 背景图像 选择【修改】/【页面属性】命令，弹出【页面属性】对话框，在【外观】选择卡中设置背景图像。单击【浏览】按钮，可以选择所需的图像并将其选中。或者在【背景图像】框中输入背景图像的路径，如图5-5所示。如果图像尺寸小于整个窗口，Dreamweaver 会平铺（重复）背景图像，如图5-6所示。 图像映射 1．图像属性检查器中的3个热点工具 （1） 圆形工具：在属性检查器中单击【圆形热点工具】按钮，然后在图像的指定位置绘制一个圆形热点。 （2）矩形工具：在属性检查器中单击【矩形热点工具】按钮，然后在图像的指定位置绘制一个矩形热点。 （3）多边形工具：在属性检查器中单击【多边形热点工具】按钮，然后在图像的指定位置的各个顶点上单击一下，定义一个不规则形状的热点。再单击箭头工具封闭此形状。图5-7所示的是为一幅图像设置了3种不同形状热点的效果。 　　图5-7 设置了热点的图像 　　创建了热点后，属性检查器中将显示关于热点的选项，如图5-8所示，热点的属性检查器。 2．设置热点属性 链接：用于设置图片热点区域链接的地址。 目标：用于设置目标对象打开的方式。 替换文本：用于输入希望在纯文本浏览器或设置了手动下载图像的浏览器中作为替换文本出现的信息文字，或当鼠标停于该热点之上时，以工具提示的形式显示文本。 5.1.2 项目实现 1．插入背景图像 打开站点中index.html网页，在已设计好的网页布局中选择顶部单元格，在单元格属性检查器中选择背景文本框，单击右侧的【浏览】按钮，选择本站点images文件夹中的05.jp