第4章 图像（36）（课件)-《网页设计与制作》同步教学（人民邮电出版社）

第 4 章 图像 1 第 4 章　图像 知识要点 （1）理解矢量图和位图的区别，了解常用的Web图像格式 （2）理解图像在网页中的作用和Web图像的使用原则 （3）理解Web图像的处理流程，初步掌握基本的Web图像处理操作 （4）掌握在网页中插入和设置图像的方法 本章目标 1 第 4 章　图像 （1）不同类型的图像 1．位图与矢量图 1 第 4 章　图像 （1）不同类型的图像 1 第 4 章　图像 （1）不同类型的图像 2．常用Web图像格式 01 GIF 02 JPEG 03 PNG 1 第 4 章　图像 （1）不同类型的图像 GIF GIF（Graphics Interchange Format，图形交换格式） GIF 无损压缩 01 最多256色 02 能够使用透明色 03 交错式Gif（interlaced gif） 04 动画Gif 05 1 第 4 章　图像 （1）不同类型的图像 JPEG JPEG（Joint Photographic Expert Group，联合图形专家组） 01 有损压缩 02 没有颜色限制 03 可以控制压缩比 04 渐进式JPEG（progressive JPEG） 1 第 4 章　图像 （1）不同类型的图像 PNG PNG（Portable Network Graphics，可移植的网络图形） 01 无损压缩 02 没有颜色限制 03 支持透明度 1 第 4 章　图像 （1）不同类型的图像 3．使用网页图像的要点 确保文件较小 使图像具有所需的像素大小 采用正确的格式进行优化处理 控制图像的数量和质量 重复使用图像 使用图像时一定要有充分的理由 合理使用动画 1 第 4 章　图像 （1）不同类型的图像 4．关键问题 1 是否真正需要这个图片？ 设计（一致的风格） 信息（有效传达） 2 因为它好看？ 杜绝用好看图片填充网页的倾向 1 第 4 章　图像 （1）不同类型的图像 5．Web 图像的处理流程 GIF 打开或创建图像 01 修改图像和添加图像效果 02 创建Web对象 03 优化图像 04 导出图像 05 1 第 4 章　图像 （1）不同类型的图像 6．如何获得图像素材 Part 1 直接在网上下载 Part 2 使用图像资源网站/光盘 Part 3 自行创建 使用图形图像软件 使用扫描仪（扫描全能王） 使用手机/数码相机 捕捉屏幕图像（print screen键） 1 第 4 章　图像 （2）图像处理 1．常用图像处理软件 Windows 画图 照片编辑器 PhotoShop（推荐） Fireworks Freehand CorelDraw Illustrator Visio 1 第 4 章　图像 （2）图像处理 Photoshop图像处理 GIF PS界面 01 修改图像大小 02 图像颜色调整 03 图像修补与抠像 04 保存为不同格式 05 1 第 4 章　图像 （2）图像处理 界面 菜单栏 工具箱 选项栏 图像窗口 状态栏 选项面板 1 第 4 章　图像 （2）图像处理 修改图像大小 1 第 4 章　图像 （2）图像处理 图像颜色调整 1 第 4 章　图像 （2）图像处理 图像颜色调整 1 第 4 章　图像 （2）图像处理 图像修补 1 第 4 章　图像 （2）图像处理 抠像 1 第 4 章　图像 （2）图像处理 用适当格式保存图像 1 第 4 章　图像 （3）插入与设置图像 1．在网页中插入图像 IMG 标记符 src 属性用于指定要插入的图像的文件名（包括路径） alt 属性表示图像的简单文本说明 align属性设置对齐方式 *hspace属性设置水平方向的空白 *vspace属性设置垂直方向的空白 *width 和height属性指定图像的显示大小 *border 属性指定图像的边框 1 第 4 章　图像 （3）插入与设置图像 设置图像格式 宽高 边框 空白 水平对齐 垂直对齐 图文混排 图像的透明度 1 第 4 章　图像 （3）插入与设置图像 2．垂直对齐 1 第 4 章　图像 （3）插入与设置图像 3．图文混排 1 第 4 章　图像 （3）插入与设置图像 4．图像透明度 1 第 4 章　图像 （4）综合实例 1．首页 1 第 4 章　图像 （4）综合实例 2．二级页面-花卉植物 1 第 4 章　图像 （4）综合实例 3．二级页面-文玩雅赏 1 第 4 章　图像 （4）综合实例 4．三级页面-梅 1 第 4 章　图像 拓展：使用多媒体 1．多媒体对象的类型 音频 MP3、wave、midi等 视频 MP4、mov等 其他 Flash Java applet 1 第 4 章　图像 拓展：使用多媒体 2．使用多媒体对象 链接 嵌入 <audio controls="controls" src="秋日的私语.mp3"></audio> <video controls="controls" src="秋日的私语.mp4"></video> <embed src="秋日的私语.mp3" width="100" height="50" autostart="false"/> <object>...</object> 1 第 4 章　图像 拓展：使用多媒体 嵌入音频 & 背景音乐 1 第 4 章　图像 拓展：使用多媒体 嵌入视频(mp4&flv) 1 第 4 章　图像 拓展：使用多媒体 嵌入Flash动画 1 第 4 章　图像 THANKS 1 第 4 章　图像 $$