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

项目4 制作网页促销模块 ——任务4.1 首页促销模块制作 任务4.1 首页促销模块制作 目录 01 活动1 制作钻展图片轮播效果 02 活动2 设置图片强调效果 任务4.1 首页促销模块制作 01 活动1 制作钻展图片轮播效果 活动1 制作钻展图片轮播效果 在制作首页的促销之前我们要了解轮播，所谓轮播，就是几张图片以一定时间间隔进行循环播放。店铺促销应该放置在网站的首页中最重要的位置，但是因为活动的多样性，几张图片就需要用轮播的方式来呈现，轮播的设置可以是左右切换的，轮播的内容可以是新品的推广或优惠的海报等。小米手机的官方网站中的轮播效果。 小米商城轮播 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 活动1 制作钻展图片轮播效果 （1）在新建好的网页中，插入表格，并使用ap div进行简单布局。 （2）在设置好的div中插入轮播图片。 （3）添加控制轮播的按钮。 （4）使用行为面板中的显示隐藏效果控制每张图片的显示时间。 【作业步骤】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 活动1 制作钻展图片轮播效果 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 【目标样稿】 活动1 制作钻展图片轮播效果 轮播是网页中进行宣传的最得力助手，一般有两种尺寸：窄屏和宽屏。窄屏宽度一般为750像素，宽屏宽度一般为950像素，当然，也有网页为了一些特殊效果而对轮播进行了调整。而高度则没有特别的规定，可根据网页呈现效果设置。 【小助手1】轮播图片的尺寸 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 活动1 制作钻展图片轮播效果 在线下，街边树立着各种广告牌，通过图片、文字或视频来宣传推广商品或者传达企业价值理念，作为最常见的宣传营销方式，吸引着用户对商品和企业关注。 在线上，相比较广告牌和轮播图，它们价值作用基本一致，但是轮播图要重要得多了，它往往出现在商城或店铺的主页，占据着主页最重要的区域，且保证用户进来就一眼能够看得到，把商品和营销信息高效传递给用户。 【知识链接】网页轮播的价值 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 活动1 制作钻展图片轮播效果 此外，轮播形式让它能够展示更多广告内容，在页面空间有限的情况下，多个广告内容共享轮播展示，占据空间小了，却能带来用户体验和广告效果的大大提升！ 轮播图的内容和顺序可以在管理后台轻松设置，无论是单个商品还是主题活动，又或者是外部链接都可以设置；最多可以设置五张轮播图，轮播图的顺序，通过输入数字就可以进行调整。 【知识链接】网页轮播的价值 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动1 制作钻展图片轮播效果 任务4.1 首页促销模块制作 02 活动2 设置图片强调效果 活动2 设置图片强调效果 在设置轮播时，用到了Dreamweaver CS6的一个特殊的面板：行为面板。 行为面板，是在Dreamweaver中用于添加预先编写好的"动作脚本"的操作界面。他主要通过“行为”面板来将行为增加到页面的标签上，并可以对以往增加的行为参数进行修改。 【行为面板】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动2 设置图片强调效果 活动2 设置图片强调效果 行为面板界面，如图4-14所示，分别有【添加行为】按钮、【删除行为】按钮、【上移】按钮和【下移】按钮组成这四个按钮，以及显示行为的窗口组成。 【行为面板】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动2 设置图片强调效果 活动2 设置图片强调效果 行为面板能实现网页中的一些变化功能，这些功能有： 1.调用JavaScript 2.改变属性 2.检查浏览器 3.检查插件 4.控制Shockwave或Flash 5.拖动层 6.显示－隐藏层 【行为面板】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动2 设置图片强调效果 7.打开浏览器窗口 8.播放声音 9.弹出信息对话框 10.预载图像 11.设置文本 12.检查表单 活动2 设置图片强调效果 （1）在新建好的网页中，插入表格和已经做好的优惠券，进行简单布局。 （2）打开行为面板，为优惠券图片添加行为效果。 （3）保存并预览不同的行为效果在网页中的显示。 【作业步骤】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动2 设置图片强调效果 活动2 设置图片强调效果 【目标样稿】 项目4 制作网页促销模块/任务4.1 首页促销模块制作/活动2 设置图片强调效果 活动2 设置图片强调效果 (1)“显示设置事