电子文档交易市场
安卓APP | ios版本
电子文档交易市场
安卓APP | ios版本

网页设计与制作应用教程 第2版 教学课件 ppt 作者 王任华 第16章

34页
  • 卖家[上传人]:E****
  • 文档编号:89497916
  • 上传时间:2019-05-25
  • 文档格式:PPTX
  • 文档大小:1.29MB
  • / 34 举报 版权申诉 马上下载
  • 文本预览
  • 下载提示
  • 常见问题
    • 1、网页设计与制作应用教程(第2版),机械工业出版社同名教材 配套电子课件,主要内容,第一部分 网页设计与制作基础 第二部分 Adobe Dreamweaver CS5 网页制作 第三部分 Adobe Fireworks CS5 网页图片处理 第四部分Adobe Flash CS5 网页动画制作,2,第16章 图像的优化与导出,16.1 图像的优化 16.2 图像的导出 16.3 Fireworks 与其他程序结合使用 16.4 边学边做(设计并导出网页),3,16.1 图像的优化,应用Fireworks 导出图像,要求图像文件在清晰的同时应尽可能小,因此,优化的目的就是根据需要选择岀图片输出的最佳方案。,4,16.1 图像的优化,16.1.1 启动优化命令,5,在工作区中优化,比较具有不同优化设置的视图 1 单击文档窗口左上角的“2 幅” 或“4 幅” 按钮。 2 单击任一拆分视图预览。 3 在“ 优化” 面板中输入设置。 4 选择其它预览并为每个预览指定不同的优化设置,图像文件格式,GIF JPG PNG WBMP TIFF BMP PICT,7,图形交换格式 (GIF) 是一种流行

      2、Web 图形格式,适合于卡通、徽标、包含透明区域的图像以及动画。在导出为 GIF 文件时,包含纯色区域的图像的压缩质量最好。GIF 文件最多包含 256 种颜色。,JPEG 由 Joint Photographic Experts Group (联合图像专家组)专门为照片或增强色图像开发。JPEG 支持数百万种颜色(24 位)。JPEG 格式最适合于扫描的照片、使用纹理的图像、具有渐变颜色过渡的图像和任何需要 256 种以上颜色的图像。,PNG 可移植网络图形 (PNG) 是支持最多 32 位颜色的通用 Web 图形格式,可包含透明度或 Alpha 通道,并且可以是连续的。但是,并非所有的 Web 浏览器都能查看 PNG 图像。虽然 PNG 是 Fireworks 的固有文件格式,但是 Fireworks PNG 文件包含其它应用程序特定的信息,这些信息不会存储在导出的 PNG 文件或其它应用程序中创建的文件中。,无线位图 (WBMP) 是一种为移动计算设备(如手机和 PDA)创建的图形格式。此格式用于无线应用协议 (WAP) 网页。由于 WBMP 是 1 位格式,因此只显示两种颜色:

      3、黑色和白色。,标签图像文件格式 (TIFF) 是一种用于存储位图图像的图形格式。TIFF 文件最常用于印刷出版。许多多媒体应用程序也接受导入的 TIFF 文件。 使用 FIREWORKS CS4 199 优化和导出,Microsoft Windows 图形文件格式。许多应用程序都可以导入 BMP 图像。,由 Apple Computer 公司开发,最常用于 Macintosh 操作系统。大多数 Mac 应用程序都能够导入 PICT 图像。,优化JPG、 GIF、PNG、TIFF、BMP 图像,查看和编辑调色板中的颜色,颜色已经过编辑,仅影响导出文档。编辑颜色不会更改源文档中的颜色。,颜色被锁定。,颜色是透明的。,颜色是网页安全色,颜色具有多种属性。在这种情况下,颜色是网页安全色、已锁定颜色且已编辑。,16.1 图像的优化,优化JPEG格式的图像,9,优化 JPEG,调整 JPEG 品质 JPEG 是一种有损格式,也就是说在压缩图像时会放弃一些图像数据,从而导致最终文件的品质降低。,原始图像;品质设置为 50 的图像;品质设置为 20 的图像,优化 JPEG,选择性地压缩 JPEG 的各

      4、个区域 若要在减小图像总大小的同时保留较重要区域的品质,引人注意的区域可以以较高品质级别压缩,重要性较低的区域(如背景)可以以较低品质级别压缩。,优化 JPEG,选择性地压缩 JPEG 的各个区域 1 在原始视图中,使用“ 选取框” 工具之一选择压缩的图形区域。 2 选择“ 修改”“ 选择性 JPEG”“ 将所选保存为 JPEG 蒙版”。 3 从“ 优化” 面板中的“ 导出文件格式” 弹出菜单中选择“JPEG”。 4 在“ 优化” 面板中单击“ 编辑选择性品质选项” 按钮。 5 选择“ 启动选择性品质” 并在文本框中输入一个值。 输入低值时所选区域的压缩程度高于图像的其余部分,输入高值时所选区域的压缩程度低于图像的其余部分。 6 (可选)更改选择性 JPEG 区域的覆盖颜色。这不会影响输出。 7 若要按较高级别导出所有文本项而不管“ 选择性品质” 值,请选择“ 保持文本品质”。 8 若要按较高级别导出按钮元件,请选择“ 保持按钮品质”。,优化 JPEG,修改选择性 JPEG 压缩区域 1 选择“ 修改”“ 选择性 JPEG”“ 将 JPEG 蒙版恢复为所选”。 2 使用“ 选取框” 工

      5、具或其它选择工具对区域的大小进行更改。 3 选择“ 修改”“ 选择性 JPEG”“ 将所选保存为 JPEG 蒙版”。 4 (可选)更改“ 优化” 面板中的“ 选择性品质” 设置。 注: 若要撤消选择,请选择“ 修改”“ 选择性 JPEG”“ 删除 JPEG 蒙版”。,优化 JPEG,创建连续的 JPEG 图像 连续的 JPEG (如交错式 GIF 和 PNG)最初以较低的分辨率显示,然后随着下载的进行品质逐渐提高。 从“ 优化” 面板的“ 选项” 菜单中选择“ 连续的 JPEG”,16.1 图像的优化,优化GIF 格式的图像,15,优化 GIF,调整压缩 通过更改 GIF 文件的失真设置来压缩它们。较高的失真设置可以产生较小的文件,但是图像品质较低。介于 5 和 15 之间的失真设置通常最佳。,原始 GIF ;失真值为 30 的图像;失真值为 100 的图像,优化 GIF,使区域透明 GIF 和 8 位 PNG 文件中的透明区域使得网页背景能够透过这些区域显示。在 Fireworks 中,文档窗口中的灰白棋盘表示透明区域。,Fireworks 中优化的图像预览;导出具有透明度并放置在具

      6、有彩色背景的网页上的图像,优化,使区域透明 默认情况下,GIF 图像导出时不具有透明度。即使图像或对象后方的画布在 Fireworks 中的原始视图中显示为透明,该图像的背景也可能不是透明的,除非您在导出前选择“ 索引色透明”。 对于 PNG 文件,您可以使用 Alpha 透明度,它通常用在包含渐变透明度和半不透明像素的导出图形中。尽管透明度对于导出到 Web 不是十分有用(因为大多数 Web 浏览器都不支持 PNG 格式),但是它对于导出到 Flash 或 Adobe Director 却非常有帮助,因为这两种应用程序都支持这种类型的透明度。,优化,将图像背景变为透明 1 单击文档窗口左上角的“ 预览”、“2 幅” 或“4 幅” 按钮。在“2 幅” 或“4 幅” 视图中,单击除原始视图之外的某个视图。 2 在“ 优化” 面板(“ 窗口”“ 优化”)中,选择 GIF 或 PNG 8 作为文件格式。然后从“ 请选择透明效果类型” 弹出菜单中选择“ 索引色透明”。 画布颜色在预览中变为透明,图形准备好导出。,优化,为透明度选择一种颜色 1 单击文档窗口左上角的“ 预览”、“2 幅” 或“4

      7、 幅” 按钮。在“2 幅” 或“4 幅” 视图中,单击除原始视图之外的某个视图。 2 在“ 优化” 面板(“ 窗口”“ 优化”)中,选择 GIF 或 PNG 8 作为文件格式。然后从“ 请选择透明效果类型” 弹出菜单中选择“ 索引色透明”。 3 若要选择其它颜色,请单击“ 选择透明色” 按钮。 4 单击“ 优化” 面板颜色表中的颜色样本,或单击文档中的颜色。,优化,添加或删除透明色 1 单击文档窗口左上角的“ 预览”、“2 幅” 或“4 幅” 按钮。在“2 幅” 或“4 幅” 视图中,单击除原始视图之外的某个视图。 注: 尽管您可以在原始视图中添加或删除透明色,但只有在显示预览时才能看到结果。 2 在“ 优化” 面板(“ 窗口”“ 优化”)中,选择 GIF 或 PNG 8 作为文件格式。然后从“ 请选择透明效果类型” 弹出菜单中选择“ 索引色透明”。 3 在面板底部,单击“ 添加颜色到透明效果中 ” 或“ 从透明效果中删除颜色” 按钮 。 4 单击颜色表中的样本,或单击文档预览中的颜色。,四、优化,交错图像以逐渐下载 在 Web 浏览器中查看时,交错式图像会先以低分辨率显示,到下载结束

      8、时,过渡为完整分辨率。 注: 该选项仅适用于 GIF 和 PNG 文件格式。可以通过将图像变为渐进式图像,得到类似于 JPEG 的效果。 从“ 优化” 面板的“ 选项” 菜单中选择“ 交错”。,优化,匹配目标背景色 消除锯齿通过将对象的颜色混合到背景中,使对象看起来更平滑。例如,如果对象是黑色,而它所在的页面是白色,则消除锯 齿将在对象边框周围的像素中添加若干灰色阴影,以便使黑色和白色之间更平滑地过渡。 从“ 优化” 面板的“ 色版” 弹出菜单中选择一种颜色。匹配时使它尽可能地接近将在其中放置图形的目标背景色。,优化,删除光晕 当在以前消除锯齿的图像上将画布颜色变为透明时,消除锯齿的像素保持不变。而当导出(或者,在某些情况下保存)图形并 将其放在具有不同背景色的网页上时,消除锯齿的对象周围的像素可能显示为光晕,在深色背景上尤其明显。,优化,防止 Fireworks PNG 文件和导入的 Photoshop 文件中的光晕 执行下列操作之一: 将“ 属性” 检查器中的“ 画布颜色” 或“ 优化” 面板中的“ 色版颜色” 设为目标网页背景的颜色。 选择了要导出的对象后,从“ 属性” 检查器的

      9、“ 边缘” 弹出菜单中选择“ 实边”。,优化,从 GIF 或其它图形文件中手动删除光晕 1 在 Fireworks 中打开文件后,单击文档窗口左上角的“预览”、“2 幅”或“4 幅”按钮。在“2 幅”或“4 幅”视图中,单击除原始 视图之外的某个视图。 2 从“ 优化” 面板的“ 透明度” 弹出菜单中选择“ 索引色透明”。 3 单击“ 添加颜色到透明效果中” 按钮,然后单击光晕中的一个像素。具有相同颜色的所有像素即在预览中被删除。 4 如果光晕仍然存在,请重复第 3 步,直到光晕消失为,16.2 图像的导出,使用“ 导出向导” “ 导出向导” 带领您逐步完成优化和导出过程。 选择“ 文件”“ 导出向导”。 回答出现的任何问题,并在每个面板中单击“ 继续”。 在第一个面板中选择“ 目标导出文件大小”,以优化到最大的所容许的文件大小。 在向导的“ 分析结果” 窗口中单击“ 退出”。 “ 图像预览” 打开,其中显示建议的导出选项。,27,28,使用“ 图像预览” 可以通过“ 导出向导” 或从“ 文件” 菜单打开“ 图像预览” (“ 文件”“ 图像预览”)。 预览区域所显示的文档或图形与导出时的完全相同,该区域还估算当前导出设置下的文件大小和下载时间。,一、优化和导出概述,所选导出的一组已保存选项 文件大小和下载时间估计 预览选中的导出设 保存活动视图中的导出设置,16.3 Fireworks 与其他程序结合使用,1. 插入Fireworks 图像插入到 Dreamweaver 1)将插入点放在 Dreamweaver 文档窗口中希望图像出现的位置。 2)执行主菜单【插入】/【图像】命令,或者在“插入”栏的“常用”类别中单击“图像”中的“图像”按钮。 3)定位到从 Fireworks 导出的图像,然后单击“确定”按钮,即可将Fireworks 图像以图片的形式插入到Dreamweaver 中。,30,16.3 Fireworks 与其他程序结合使用,2. 将 Fireworks HTML 代码放入 Dreamweaver 1)将 Fireworks HTML 文档导出为 HTML 格式。 2)在 Dreamweaver 中,将文档保存到已定义的站点中。 3)将插入点放在文档中开始插入 HTML 代码的位置。执行主菜单【插入】/【图像对象】/【Firewor

      《网页设计与制作应用教程 第2版 教学课件 ppt 作者 王任华 第16章》由会员E****分享,可在线阅读,更多相关《网页设计与制作应用教程 第2版 教学课件 ppt 作者 王任华 第16章》请在金锄头文库上搜索。

      点击阅读更多内容
    最新标签
    发车时刻表 长途客运 入党志愿书填写模板精品 庆祝建党101周年多体裁诗歌朗诵素材汇编10篇唯一微庆祝 智能家居系统本科论文 心得感悟 雁楠中学 20230513224122 2022 公安主题党日 部编版四年级第三单元综合性学习课件 机关事务中心2022年全面依法治区工作总结及来年工作安排 入党积极分子自我推荐 世界水日ppt 关于构建更高水平的全民健身公共服务体系的意见 空气单元分析 哈里德课件 2022年乡村振兴驻村工作计划 空气教材分析 五年级下册科学教材分析 退役军人事务局季度工作总结 集装箱房合同 2021年财务报表 2022年继续教育公需课 2022年公需课 2022年日历每月一张 名词性从句在写作中的应用 局域网技术与局域网组建 施工网格 薪资体系 运维实施方案 硫酸安全技术 柔韧训练 既有居住建筑节能改造技术规程 建筑工地疫情防控 大型工程技术风险 磷酸二氢钾 2022年小学三年级语文下册教学总结例文 少儿美术-小花 2022年环保倡议书模板六篇 2022年监理辞职报告精选 2022年畅想未来记叙文精品 企业信息化建设与管理课程实验指导书范本 草房子读后感-第1篇 小数乘整数教学PPT课件人教版五年级数学上册 2022年教师个人工作计划范本-工作计划 国学小名士经典诵读电视大赛观后感诵读经典传承美德 医疗质量管理制度 2 2022年小学体育教师学期工作总结 2022年家长会心得体会集合15篇
    关于金锄头网 - 版权申诉 - 免责声明 - 诚邀英才 - 联系我们
    手机版 | 川公网安备 51140202000112号 | 经营许可证(蜀ICP备13022795号)
    ©2008-2016 by Sichuan Goldhoe Inc. All Rights Reserved.