网页文本和图像要点分析.pptVIP

《网页设计与制作案例教程》（第2版） 5.3 学习任务：网页图像 ?本节学习任务 了解网页中常用的图像格式及特点，掌握在网页中添加图像及图像对象的方法，掌握设置图像属性，以及用CSS设置图像样式的方法。 5.3.1 网页中常用的图像格式 虽然存在很多种图像文件格式，但网页中使用的通常只有3种，即GIF、JPEG和PNG。 GIF（图形交换格式）：GIF文件最多使用256种颜色，适合显示色调不连续或具有大面积单一颜色的图像，GIF文件的扩展名为.gif。 《网页设计与制作案例教程》（第2版） 5.3 学习任务：网页图像 JPEG（联合图像专家组）：JPEG文件格式是用于摄影或连续色调图像的较好格式，这是因为JPEG文件可以包含数百万种颜色。随着JPEG文件品质的提高，文件的大小和下载时间也会随之增加。通常可以通过压缩JPEG文件在图像品质和文件大小之间达到良好的平衡。JPEG文件的扩展名为.jpg或.jpeg。 PNG（可移植网络图形）：PNG文件格式是一种替代GIF格式的无专利限制的格式，它包括对索引色、灰度、真彩色图像以及Alpha通道透明度的支持。PNG文件可保留所有原始层、矢量、颜色和效果信息（如阴影），所有元素都是可以完全编辑的。PNG文件的扩展名为.png。 《网页设计与制作案例教程》（第2版） 5.3 学习任务：网页图像 5.3.2 插入图像 插入图像方法。 选择“插入→图像”菜单命令。 单击“插入”面板“常用”类别中的【图像】按钮 ，或将该按钮拖到文档窗口中。 使用Ctrl+Alt+I组合键。 在“文件”或“资源”面板中选择所需图像，直接拖动图像到文档窗口中。 《网页设计与制作案例教程》（第2版） 5.3.3 设置图像属性 插入图像后，选中图像，对应“属性”面板： ID：输入图像名称，以便在使用Dreamweaver行为或脚本语言时可以引用该图像。 宽、高：指定图像被载入浏览器时所显示的宽度、高度，单位是像素。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 源文件：指定插入图像文件的路径。 替换：指定图像无法正常显示时代替图像显示的替换文本。 类：显示当前应用于图像的类样式。 垂直边距：指定沿图像的顶部和底部添加的边距，以像素为单位。 水平边距：指定沿图像的左侧和右侧添加的边距，以像素为单位。 边框：指定图像边框的宽度，以像素为单位。默认为无边框。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 从文件更新按钮：在Photoshop中对原始图像进行更改操作后，可以通过从文件更新按钮在Dreamweaver中对智能对象进行更新。 裁剪按钮：可以对图像进行裁切，删除不需要的区域。 重新取样按钮：可以对已调整大小的图像进行重新取样，提高图片在新尺寸下的品质。 亮度和对比度按钮：可以调整图像的亮度和对比度。 锐化按钮：可以调整图像的锐度。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 5.3.4 用CSS设置图像样式 1．用CSS调整图像显示尺寸 用CSS调整图像的显示尺寸也需要设置图像对象的width和height属性。在CSS规则中，不仅可以使用“px”为单位，还可以使用“%”、“cm”、“in”等单位。 2．用CSS调整图像图像边距 在img标签的CSS规则定义对话框的“方框”类别中，在margin属性集合中，分别设置“top”、“right”、“bottom”和“left”的值与单位。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 3．用CSS设置图像边框 在CSS规则定义对话框的“边框”类别中，在style属性集合中，为四边设置样式；在width属性集合中，设置四边的粗细。 4．用CSS设置网页背景 在CSS规则定义对话框的“背景”类别中，在background-color属性中设置背景颜色；在background-image属性中输入背景图像的路径或选择背景图像；通过background-repeat属性设置背景图像的重复方式；通过background-attachment属性设置背景图像的附着性；通过background-position属性设置背景图像的位置。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 5.3.5 插入图像占位符和鼠标经过图像 1．插入图像占位符 选择“插入→图像对象→图像占位符”菜单命令，或单击“插入”面板“常用”类别中的【图像占位符】图标按钮 ，打开“图像占位符”对话框。 5.3 学习任务：网页图像 《网页设计与制作案例教程》（第2版） 使用图像占位符的目的