网页设计与制作初识chapter3-图像课件.ppt

《网页设计与制作初识chapter3-图像课件.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、1、网页图像文件的格式图形图像文件大致上可以分为两大类：一类为位图文件；另一类称为描绘类、矢量类或面向对象图形图像文件。前者以点阵形式描述图形图像，后者是以数学方法描述的一种由几何元素组成的图形图像。一般说来，后者对图像的表达细致、真实，缩放后图形图像的分辨率不变，在专业级的图形图像处理中应用较多。在网页中经常使用的只有3种，即GIF、JPG（也写为JPEG）和PNG。（1）GIF（GraphicsInterchangeFormat图形交换格式）GIF为图像交换格式，最多只能有256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，如站点图标Logo、广告条banne

2、r及网页背景图像等。GIF是一个支持网页的图像格式，并且支持透明效果和动画效果，所以GIF图像格式是制作网页时大量使用的图片格式之一。（2）JPG(JointPictureGroup联合图像专家组)JPG（JPEG）通常用来显示照片或连续色调的图像。由于JPG格式采用的是有损压缩方式对图像进行压缩，所以在使用JPG格式的图像时需要在图像质量和文件大小之间寻找一个平衡点。（3）PNG(PortableNetworkGraphic可移植网络图形)PNG为可移植网络图形，是一种集JPG和GIF格式优点于一身的图像格式，它可以实现256级的透明效果，具有JPG处理精美图像的优势，并

3、且可保留所有图层、矢量、颜色和效果信息（例如阴影），并且在任何时候所有元素都是可以编辑的。目前MicrosoftInternetExplorer（4.0和更高版本）和NetscapeNavigator（4.04和更高版本）只能支持部分PNG图像的显示。因此，除非是专门为支持PNG格式的浏览器的特定目标用户设计网页，一般还是只能使用GIF或JPG格式的图像。2、在网页中插入图像直接插入图像选择【插入】/【图像】命令即可。"插入”栏→"常用”→"图像”按钮。插入图像占位符如果需要在网页的某个位置插入一个图像，但还没有确定插入哪幅图像时可以先插入一个图像占位符占据图像的位置，当图

4、像确定后再在占位符中插入图像。步骤1将光标插入点定位到需要插入图像的位置，选择【插入】/【图像对象】/【图像占位符】命令。步骤2在弹出的“图像占位符”对话框中设置图像占位符的“名称”、“宽度”、“高度”和“颜色”，如图5-6所示。步骤3设置完成后单击确定按钮，即可在页面中插入图像占位符。步骤4双击图像占位符将弹出“选择图像源文件”对话框，此后使用直接插入图像的方法进行操作即可插入图像。3、设置图像属性1．为图像命名在“图像”文本框中可以为图像命名，这样在使用行为或编写脚本程序时，可以引用该图像。2．设置图像大小在“宽”和“高”文本框中显示图像的当前大小，单位为像素（dpi）

5、。在其中输入新数据可以改变图像的宽度和高度。如果设置图像的宽度或高度不是图像的原始大小，在“宽”或“高”文本框中将以黑体显示，并且在文本框的右侧显示一个图标，单击该图标可以将图像还原为原始大小。4、设置对齐方式“对齐”下拉列表框中各项的含义如下：默认值：取决于浏览器，一般指基线对齐。基线：将文本基准线对齐图像底端。顶端：将文本中最高字符的顶端和图像顶端对齐。居中：将文本基准线和对象的中部对齐。底部：将文本和图像进行底端对齐。文本上方：将文本行中最高字符和图像的上端对齐，一般和“顶端”对齐的效果没有多大区别。绝对居中：将图像的中部和文本中部对齐。绝对底部：将文本的绝对底部和图

6、像对象对齐。左对齐：将图像放置在左边，右边绕排文本。右对齐：将图像放置在右边，左边绕排文本。在“垂直边距”和“水平边距”文本框中可以设置图像与文本的距离。“垂直边距”用于设置图像顶部和底部与文本之间间隔的距离；“水平边距”用于设置图像左侧和右侧与文本之间间隔的距离。5、设置边距6、设置图像说明在“替换”下拉列表框中可以输入图像的说明。这样在浏览该网页时，当鼠标移动到该图像上就会在鼠标指针右下方显示该图像的说明；当图像无法显示时，也可在图像的位置上显示该图像的说明。7、插入鼠标经过图像插入鼠标经过图像需要准备两幅图像（原始图像和鼠标经过图像），默认情况下显示原始图像；当鼠标指

7、针移到图像的范围时，显示鼠标经过图像；鼠标移出图像范围时则恢复原始图像。8、插入导航条在Dreameaver中制作的导航条实际是由多个按钮组成，在制作时可以为每个按钮准备1～4张图片，分别对应按钮的不同状态，当鼠标指针经过或单击这些按钮时，将显示相应的按钮图片并跳转到对应的网页。9、创建网站相册创建网站相册一般在图像处理软件中为每张图片制作一张缩略图，然后在网页中插入这些缩略图，然后制作显示放大后的图片网页，整个过程非常复杂而且容易出错。而使用Dreamweaver的创建网站相册功能，只需要一个简单的操作，就可以同