中职高教版高二《网页设计与制作》任务4.2 详情页促销模块制作课件

项目4 制作网页促销模块 ——任务4.2 详情页促销模块制作 任务4.2 详情页促销模块制作 目录 01 活动1 制作gif动态图片 02 活动2 制作网页flash元素 任务4.2 详情页促销模块制作 01 活动1 制作gif动态图片 活动1 制作gif动态图片 在一个好的详情页中，应该包含的信息的顺序为：产品属性 → 细节展示 → 模特实拍 → 搭配建议 →同行对比 → 品牌介绍 → 促销建议 →关联营销 → 购物（须知）保障。顾客是因为产品而进来的 应该要从产品属性到展示到实拍到建议，让顾客先了解我们的产品，再进行对比，在推荐品牌和关联营销。 从整体来说，网店中的促销信息要符合店铺风格，无形之中让客户融入品牌氛围里，从细节来说，前两屏要良好按照店铺目前的运营状况利用，比如店铺在搞大促或者有主题营销，则好好利用，切忌不能过于复杂，一定要有一屏用来表现产品整体。 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 第三屏开始着重描述产品细节，最好是能以简单明了的方式体现产品的基础属性，然后通过模特或细节图配上说明的方式来让买家更加直观的理解产品和品牌的特点，最后结尾可以跟上感性化描述来做最后一击，以及关注微博或微淘等社会化媒体账号来为以后可能存在的购买做铺垫。 那么网页中的促销元素可以是什么类型的呢？他可以是文字、图片、动图、flash等等，只要能清晰的显示活动信息，就可以成为详情页中的促销元素。 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 （1）打开Photoshop CS6，新建一个740X370像素的文件。 （2）制作三张不同效果的图片。 （3）打开时间轴，为不同图层添加不同时间的动作。 （4）通过“保存为web所有格式”的方式进行图片的导出。 【作业步骤】 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 【目标样稿】 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 首先思考，要做一个图层的颜色变化的动作，是属于时间轴上的哪个动作属性，我们可以很轻易的知道是样式，而如果改变图层图像本身的颜色，则无法产生动画。 先用形状工具画一个圆，然后到时间轴面板点击样式旁边的一个小钟启用关键帧（出现棱形）动画→给图层加上图层样式→颜色叠加打上勾并任意给个颜色。 【小助手1】时间轴新版界面的操作 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 然后回到时间轴拖动时间线到想要的位置→双击图层调出图层样式→在颜色叠加设置另一种颜色。 这个时候已经制作好颜色变化的动画了，接下来你可以调整关键帧的位置，动画的长度，剪辑的长度（导出的时候生效） 【小助手1】时间轴新版界面的操作 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 GIF 图片以 8 位颜色或 256 色存储单个光栅图像数据或多个光栅图像数据。GIF 图片支持透明度、压缩、交错和多图像图片（动画 GIF）。GIF 透明度不是 alpha 通道透明度，不能支持半透明效果。GIF 压缩是 LZW 压缩，压缩比大概为 3:1。 【知识链接】gif动画 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 GIF的优缺点： 优点： GIF 广泛支持 Internet 标准。支持无损耗压缩和透明度。动画 GIF 很流行，易于使用许多 GIF 动画程序创建。 【知识链接】gif动画 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 活动1 制作gif动态图片 GIF的优缺点： 缺点：GIF 只支持 256 色调色板，因此，详细的图片和写实摄影图像会丢失颜色信息，而看起来却是经过调色的。 ·在大多数情况下，无损耗压缩效果不如 JPEG 格式或 PNG 格式。 GIF 支持有限的透明度，没有半透明效果或褪色效果（例如，alpha 通道透明度提供的效果）。 【知识链接】gif动画 项目4 制作网页促销模块/任务4.2 详情页促销模块制作/活动1 制作gif动态图片 任务4.2 详情页促销模块制作 02 活动2 制作网页flash元素 活动2 制作网页flash元素 在学会了使用Photoshop制作gif图片之后，小李发现，网店中的信息呈现除了图片还可以有更多其他的方式。如果要使网页显示更加活泼