中职高教版高二《网页设计与制作》任务4.3 制作网页浮动广告课件

项目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）设置css样式：宽度为300px，高度为200px，运用给所有文字和图片。 （3）设置css样式：背景为蓝色，宽度为120px，居右浮动，运用给文字内容。 （4）设置图片居左浮动div+css样式。 【作业步骤】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 【目标样稿】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 DIV标签，称为区隔标记。作用是设定字、画、表格等的摆放位置。当你把文字、图象，或其他的放在 DIV 中，它可称作为“DIV block”，或“DIV element”或“CSS-layer”，或干脆叫“layer”。而中文我们把它称作“层次”。 Div标签在页面中是独占一行的，自上而下排列。 【小助手1】div标签 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 因为div的布局让一行只能显示一个div标签，于是就有一个问题：如何在一行显示多个div元素，这个时候就用到了浮动。 假如我们把div2、div3、div4都设置成左浮动； 假如把div2、div3、div4都设置成右浮动。 【小助手2】float浮动属性 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 （1）背景不能显示 由于浮动产生，如果对一块内容设置了CSS背景颜色或CSS背景图片，而内容不能被撑开，所以导致CSS背景不能显示。 【知识链接】浮动产生的副作用 项目4 制作网页促销模块/任务3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 （2）边框不能撑开 如果一块内容设置了CSS边框属性（css border），由于其中有部分内容里使用了float属性，产生浮动，主体的全部内容不能被撑开，导致边框不能随内容而被撑开。 【知识链接】浮动产生的副作用 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 活动1 制作浮动页面版面 （3）解决方式 使用清除浮动的方式来解决，使用属性clear消除浮动带来的不良影响。 【知识链接】浮动产生的副作用 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动1 制作浮动页面版面 任务4.3 制作网页浮动广告 02 活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 在网页的右侧，一般会有一个浮动广告，包含网店中推荐的商品。这种广告一般是固定显示在网页中的某个部分，在浏览网页的时候不会随着浏览页面的向下滚动而滚动。 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （1）在新建好的网页中，插入原有网页的内容。 （2）添加div标签，在div中添加推荐商品的图片。 （3）制作右侧浮动的效果。 （4）保存并预览不同的行为效果在网页中的显示。 【作业步骤】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 【目标样稿】 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 静态的广告就是在网页上显示一幅固定的图片，它也是早年网络广告常用的一种方式。它的优点就是制作简单，并且被所有的网站所接受。广告百科它的缺点也显而易见，在众多采用新技术制作的广告面前，它就显得有些呆板和枯燥。 【作业助手】静态广告 项目4 制作网页促销模块/任务4.3 制作网页浮动广告/活动2 设置静止浮动广告特效 活动2 设置静止浮动广告特效 （1）只选一个主题 选取一个广告要传递的主题，到底我们是要做品牌建设，要卖产品，要展示某场活动还是要突出公司目前正在做的事情?创建一个简单且单一的主题，并且突出它。