教学课件：任务4-3 制作网页浮动广告.ppt

高等教育出版社 Higher Education Press 项目4 制作网页促销模块 ——任务4.3 制作网页浮动广告 任务4.3 制作网页浮动广告 目录 01 活动1 制作浮动页面版面 02 活动2 设置静止浮动广告特效 03 活动3 设置活动浮动广告特效 任务4.3 制作网页浮动广告 01 活动1 制作浮动页面版面 活动1 制作浮动页面版面 制作网页中的浮动页面，需要用到的是Dreamweaver中的div和css标签。浮动的英文是float，是css样式的属性。通过css定义float（浮动）让div样式层块，向左或向右（靠）浮动。 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 （1）在网页中插入表格并布局网如效果图。 （2）表格：5行1列，宽度为960px，边框为0，居中对齐 （3）设置每个单元格属性垂直于顶端。 （4）根据效果图插入相应的元素。 【作业步骤】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 【目标样稿】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 任务4.3 制作网页浮动广告 02 活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 在网页中，一般会有一个浮动广告，包含网店中推荐的商品。这种广告一般是固定显示在网页中的某个部分，在浏览网页的时候不会随着浏览页面的向下滚动而滚动。 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （1）在建好的网页中，插入原有网页的内容。 （2）添加APdiv标签，在APdiv中添加推荐商品的图片。 （3）制作浮动的效果。 （4）保存并预览不同的行为效果在网页中的显示。 【作业步骤】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 【目标样稿】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 静态的广告就是在网页上显示一幅固定的图片，它也是早年网络广告常用的一种方式。它的优点就是制作简单，并且被所有的网站所接受。广告百科它的缺点也显而易见，在众多采用新技术制作的广告面前，它就显得有些呆板和枯燥。 【作业助手】静态广告 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （1）只选一个主题 选取一个广告要传递的主题，到底我们是要做品牌建设，要卖产品，要展示某场活动还是要突出公司目前正在做的事情?创建一个简单且单一的主题，并且突出它。 （2）要有明确的Call to Action(行动引导) （3）留白 【知识链接】设计静态广告BANNER的10大技巧 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （4）运用20%法则 Facebook广告中的这个规定总是让许多广告设计师郁闷不已：文本信息不可占用超过20%的空间。事实上这是一个伟大的设计理念和约束。 （5）多斟酌一下色彩 （6）来点古怪奇招 【知识链接】设计静态广告BANNER的10大技巧 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （7）使用简洁的字体排版 （8）给用户一点甜头 （9）凸显你的广告 （10）用心选图 【知识链接】设计静态广告BANNER的10大技巧 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 任务4.3 制作网页浮动广告 03 活动3 设置活动浮动广告特效 活动3 设置活动浮动广告特效 相对于静止的广告特效，网页中还会有活动的特效。这种广告一般是随机滚动显示在网页中的，在浏览网页的时候会随着浏览页面的向下滚动而滚动，从而一直显示在当前页面当中。 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动3 设置活动浮动广告特效 活动3 设置活动浮动广告特效 （1）打开上一个活动的网页。 （2）插入选中AP div，可以放入相应的商品广告图。 （3）针对APvdiv添加CSS样式并设置CSS样式中的定位方式为固定在网页中。 （4）保存并预览不同的行为效果在网页中的显示。 【作业步骤】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动3 设置活动浮动广告特效 活动3 设置活动浮动广告特效 【目标样稿】 项目4 制作网页促销模块/任务4.