1、项目6 活动页面的布局与实现,信息工程系,课程：网页设计与制作,主讲：吴 丰,项目6 活动页面的布局与实现,项目介绍及必备知识,页面布局基本流程,实例：变形金刚电影宣传页面,1,2,3,页面布局的基本流程,CSS定位的实际应用,重点：,难点：,课程安排,项目6 活动页面的布局与实现,活动页面：在某一时间段内围绕某一主题进行宣传的页面。 一般出现在大型网站中，小型企业网站不会有活动页面出现。 对于孤立的页面，都可以采用相同的方法制作。,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,项目6 活动页面的布局与实现,项目6 活动页面的布局与实现,周期短,页面美,内容少,为吸引浏览者目光
2、，设计师一般采用很多图片素材，并且设计非常精美。,根据活动时效性，最多不超过3个月，个别情况除外。,为迎合页面整体效果，页面内容一般仅包含必要活动信息和相关超链接。,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,背景（background）是CSS中使用率很高的属性。在网页设计中，无论是纯色背景，还是加载的背景图片，都能给整个页面带来丰富的视觉效果。,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,A. 背景色（background-color）属性：用纯色填充背景。,id=“box”,#box background-color: b
3、lue;,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,B. 背景图（background-image）属性：用图像填充背景。,id=“box”,#box background-color: blue; background-image: url（01.jpg）;,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,当某一元素同时具有背景色属性和背景图属性时，背景图属性优于背景色属性。即，背景图像覆盖在背景色之上。,项目6 活动页面的布局与实现,C. 背景重复（background-repeat）属性：设置背景图片以何种方式在网页中显示。
4、,background-repeat 属性常见的4种平铺方式,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,no-repeat,repeat-x,1,2,4,3,repeat,repeat-y,项目6 活动页面的布局与实现,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,CSS样式中background属性的优化,项目6 活动页面的布局与实现,1 项目介绍及其必备技术知识,在CSS中使用position属性对元素进行定位。它允许元素相对于原有位置、父一级元素，或浏览器窗口进行定位。,position: relative；,positi
5、on: absolute；,（相对定位）,（绝对定位）,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,相对定位：通过设置水平或垂直位置的值，让这个元素“相对于”原始起点进行移动。,#box position: relative; left: 30px; top: 20px; ,1 项目介绍及其必备技术知识,position: relative；,包含元素,20px,30px,1 项目介绍及其必备技术知识,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,#box position: absolute; le
6、ft: 30px; top: 20px; ,position: absolute；,绝对定位：使用绝对定位的对象可以放置在页面的任何位置，如果元素没有已定位的祖先元素，那么其位置相对于浏览器左上角开始计算。,30px,20px,相对定位的祖先元素,1 项目介绍及其必备技术知识,1 项目介绍及其必备技术知识,1 项目介绍及其必备技术知识,1. 项目介绍及其必备技术知识,项目6 活动页面的布局与实现,2. 页面布局实现的基本流程,网页布局实现基本流程,基本流程,布局分析,框架搭建,内容实现,1,2,3,4,结构分析,一般将页面结构分为头部、主体等,进一步精细地对页面划分出详细内容区域,用CSS+DIV方式,搭建规划好的版块,增加详细内容，实现活动页面的制作,项目6 活动页面的布局与实现,3. 实战案例：变形金刚电影宣传页面的实现,id=“head”定义头部,ul id=“a”无序列表a,ul id=“c”无序列表c,ul id=“d”无序列表d,ul id=“b”无序列表b,id=“box”定义主体,项目6 活动页面的布局与实现,课程小结与作业,本项目借助CSS对图像控制和定位知识，通过页面布局的基本流程，快速实现了活动页面的布局,整个思维过程具有代表性和可复制性。,“春茶上市”活动页面,“QQ输入法”宣传活动页面,敬请各位专家批评指正！,
