授课课件——活动页面获奖课件吴丰.pptVIP

项目6 活动页面的布局与实现 信息工程系 课程：网页设计与制作 主讲：吴 丰 项目6 活动页面的布局与实现 项目介绍及 必备知识 页面布局 基本流程 实例： 《变形金刚》 电影宣传页面 1 2 3 页面布局的基本流程 CSS定位的实际应用 重点： 难点： 课程安排 项目6 活动页面的布局与实现 什么是活动页面 (1) 活动页面：在某一时间段内围绕某一主题进行宣传的页面。 一般出现在大型网站中，小型企业网站不会有活动页面出现。 对于孤立的页面，都可以采用相同的方法制作。 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 项目6 活动页面的布局与实现 项目6 活动页面的布局与实现 周期短 页面美 内容少 为吸引浏览者目光，设计师一般采用很多图片素材，并且设计非常精美。 内容 相对较少 页面精美 “存活”周期短 根据活动时效性，最多不超过3个月，个别情况除外。 为迎合页面整体效果，页面内容一般仅包含必要活动信息和相关超链接。 什么是活动页面 (1) 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 CSS对图像的控制 (2) 背景（background）是CSS中使用率很高的属性。在网页设计中，无论是纯色背景，还是加载的背景图片，都能给整个页面带来丰富的视觉效果。 1 项目介绍及其必备技术知识 背景background 背景色 背景图 背景 重复 CSS对图像的控制 (2) 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 A. 背景色（background-color）属性：用纯色填充背景。 id=“box” #box { background-color: blue; } CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS对图像的控制 (2) 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 B. 背景图（background-image）属性：用图像填充背景。 id=“box” #box { background-color: blue; background-image: url（01.jpg）; } CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS对图像的控制 (2) 1. 项目介绍及其必备技术知识 当某一元素同时具有背景色属性和背景图属性时，背景图属性优于背景色属性。即，背景图像覆盖在背景色之上。 项目6 活动页面的布局与实现 C. 背景重复（background-repeat）属性：设置背景图片以何种方式在网页中显示。 background-repeat 属性常见的4种平铺方式 CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS对图像的控制 (2) 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 no-repeat repeat-x 1 2 4 3 repeat 垂直和水平方向重复 background-repeat: repeat； repeat-y 垂直方向重复 background-repeat: repeat-y； 无重复 background-repeat: no-repeat； 水平方向重复 background-repeat: repeat-x； 项目6 活动页面的布局与实现 #box { background-color: blue; background-image: url（01.jpg）; background-repeat: no-repeat; } CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS对图像的控制 (2) 1. 项目介绍及其必备技术知识 CSS样式中background属性的优化 项目6 活动页面的布局与实现 CSS定位 (3) 1 项目介绍及其必备技术知识 在CSS中使用position属性对元素进行定位。它允许元素相对于原有位置、父一级元素，或浏览器窗口进行定位。 CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS定位 (3) 1. 项目介绍及其必备技术知识 项目6 活动页面的布局与实现 相对定位：通过设置水平或垂直位置的值，让这个元素“相对于”原始起点进行移动。 #box { position: relative; left: 30px; top: 20px; } CSS定位 (3) 1 项目介绍及其必备技术知识 包含元素 20px 30px id=“box” CSS定位 (3) 1 项目介绍及其必备技术知识 CSS对图像的控制 (2) 1 项目介绍及其必备技术知识 CSS定位 (3) 1.