项目四 编辑网页图像（课件）- 高一《网页设计与制作》同步教学（机工版·2018）

项目四 编辑网页图像 > = = 任务一 插入图像 = 常用网页图像 常用图像处理软件 = 本节提纲 = 常用网页 图像 GIF（图形交换格式） JPEG（联合图像专家组） PNG（可移植网络图形） = 4 常用图像 处理软件 Adobe Photoshop = 【活动实施】 实例网页在【教学资源包】【配套资源】【4.1.1】文件夹中。 = 插入图像 = 选择图像源文件 = 替换文本 = 完成插入 = 自主练习 请打开在【教学资源包】【配套资源】【4.1.1】文件夹中default1.html文件，按照目标样稿，如图4-5，完成导航菜单图像的插入。 = 任务二 设置图像属性 = 图像属性 = 【活动实施】 1.调整图像大小 = 2.图像调整完成 = 自主练习 在以上制作完成的网页基础上继续练级 1、通过可视化调节的方式调整第一张图大小为宽100高100。 2、通过属性面板设置第二张图大小为宽200高200。 3、设置第三张图链接为“http://www.baidu.com/” = 编辑图像 1、重新取样 2、裁剪图像 3、优化图像 4、锐化图像 5、调整图像的亮度和对比度 = 【活动实施】 = 重置图像大小 = 裁剪提醒 = 裁剪图像 = 完成指定大小裁剪 = 自主练习 继续采用上面完成裁剪效果后的网页。 1、调整第一张图的【亮度和对比度】。 2、【锐化】第二张图，查看效果 = 任务三 插入图像对象 = 插入图像 占位符 一、插入图像占位符 二、替换图像占位符 = 【活动实施】 = 插入图像占位符 = 网站logo占位符 = 完成网站logo的图像占位符插入 = 菜单占位符 = 自主练习 请打开【教学资源包】【配套资源】【4.3.1】文件夹中网页index完成1.html，在“【7】”位置需要放入一个flash动画，该动画预计大小为宽451像素、高502像素，请在这个位置插入一个图像占位符，以便直观查看网页效果。 = 鼠标经过 图像 = 【活动实施】 = 完成logo图像替换效果 = 删除图像占位符 = 插入鼠标经过图像 = 设置鼠标经过图像对话框 = 完成网站首页菜单效果 = 自主练习 同样方法设置上面实例文件中其他5个菜单效果，具体参数， “蔬果品种”：原始图像“images\024.png”、鼠标经过图像“images\025.png”、替换文本“蔬果品种”。 “价格行情”：原始图像“images\026.png”、鼠标经过图像“images\027.png”、替换文本“价格行情”。 “有机蔬果”：原始图像“images\028.png”、鼠标经过图像“images\029.png”、替换文本“有机蔬果”。 “礼盒套餐”：原始图像“images\030.png”、鼠标经过图像“images\031.png”、替换文本“礼盒套餐”。 “行情资讯”：原始图像“images\032.png”、鼠标经过图像“images\033.png”、替换文本“行情资讯”。 = 谢谢 = = $