Dreamweaver CS5网页制作高级案例教程项目六.pptVIP

项 目 六 创 建 “ 伊 韵 ” 手 机 网 站 项 目 六 创 建 “ 伊 韵 ” 手 机 网 站? ? 应 用Div+CSS 布 局 网 页? ? 应 用Div+CSS 布 局 网 页 一、学习目标 一、学习目标 二、理论指导 二、理论指导 三、任务实践 三、任务实践一、学习目标 一、学习目标了解什么是Web标准,以及Web 标准的构成。了解什么是Web标准,以及Web标准的构成。认识Div ,掌握创建和选择Div 的方法。认识Div ,掌握创建和选择Div 的方法。? 了解Div+CSS 布局的优缺点,掌握绝对定位、 了解Div+CSS 布局的优缺点,掌握绝对定位、 相对定位与浮动定位的用法。 相对定位与浮动定位的用法。? 掌握常用 掌握常用S Sp pr ry y 布局对象的用法。 布局对象的用法。能够应用Div+CSS 构建网页布局。能够应用Div+CSS 构建网页布局。二、理论指导 二、理论指导 ( 一 )Web 标 准 概 述 ( 一 )Web 标 准 概 述 1 .什么是Web 标准 1 .什么是Web 标准 Web 标准是由W3C (World Wide Web Consortium ) 和其他标准化组织制定的一套规范,包括HTML 、 JavaScript 及CSS 等一系列标准,其目的在于创建一个 统一的用于Web 表现层的技术标准,以便能通过不同浏 览器或终端设备(计算机、手机等)向用户展示信息内 容。2.Web标准的构成 2.Web标准的构成 目前来说,Web 标准由结构(Structure )、表现 (Presentation )和行为(Behavior )三部分组成。 (1 ) 结 构 结 构 技 术 用 于 对 网 页 中 用 到 的 信 息 ( 文 本 、 图 像 、 动 画 等 ) 进 行 分 类 和 整 理 , 目 前 用 于 结 构 化 设 计 的Web 标 准 技 术 主 要 是 HTML 。 (2 ) 表 现 表 现 技 术 用 于 对 已 被 结 构 化 的 信 息 进 行 显 示 上 的 控 制 , 包 括 位 置 、 颜 色 、 字 体 、 大 小 等 形 式 控 制 。 目 前 用 于 表 现 设 计 的Web 标 准 技 术 就 是CSS 。 (3 ) 行 为 行 为 是 指 对 整 个 文 档 的 一 个 模 型 定 义 和 交 互 行 为 的 编 写 。(二)认识Div (二)认识Div 1 1 . .D Di iv v 简介 简介 Div 是用来为HTML 文档中的块内容设置结构和背景属 性的元素。它相当于一个容器,由起始标签 和结 束标签 之间的所有内容构成。在它里面可以内嵌 表格(table )、文本(text )等HTML 代码。其中所包 含的元素特性由Div 标签的属性来控制,或使用样式表 格式化这个块来控制。2.创建Div 2.创建Div Div 标签与表格、图像等网页对象的插入方法类似,所 不同的是,在插入Div 标签的同时可以为其设置样式。3.选择Div 3.选择Div 要对Div 执行某项操作,首先需要将其选中。在 Dreamweaver CS5 中选择Div 的方法有两种。将鼠标光标移至Div 周围的任意边框上,当边框显示 为红色实线时单击鼠标左键可将其选中。将插入点置于Div 中,然后单击“标签选择器” 中相应 的 标签,同样可将其选中。(三) “Div+CSS ”布局中的常见定位方式 (三) “Div+CSS ”布局中的常见定位方式 “Div+CSS” 布局,就是使用Div 布局网页和 定位网页中的元素,而使用CSS 样式来控制 这些元素的显示方式。这种布局是目前比较 流行的网页布局方式。1 .绝对定位与相对定位 1 .绝对定位与相对定位 (1 ) 绝 对 定 位 (1 ) 绝 对 定 位 绝对定位在CSS 中的写法是“position:absolute;” 。 其表达的意思是参照浏览器的左上角,配合top 、 right 、bottom 、left (上、右、下、左)值来定位 元素。(2 )相对定位 (2)相对定位 相对定位在CSS 中的写法是“position:relative;” ,其表达 的意思是以父级对象(它所在的容器)的坐标原点为坐 标原点。无父级则以body 的坐标原点为坐标原点,配合 上、右、下、左(简称TRBL )进行定位,当父级内有 padding 等CSS 属性时,当前级的坐标原点则参照父级内 容区的坐标原点进行定位。2.浮动定位 2 .浮动定位 浮动定位在CSS 中用“float” 属性来表示。当 “float” 值为“none” 时,表示对象不浮动;为 “left” 时,表示对象向左浮动;为“right” 时, 表