使用Div+CSS布局网页.ppt

《使用Div+CSS布局网页.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第7章使用Div+CSS布局网页Web标准概述认识DivDiv+CSS布局简介使用Spry布局对象7.1Web标准概述7.1.1什么是Web标准Web标准是由W3C（WorldWideWebConsortium）和其他标准化组织制定的一套规范，包括HTML、JavaScript及CSS等一系列标准，其目的在于创建一个统一的用于Web表现层的技术标准，以便能通过不同浏览器或终端设备（计算机、手机等）向用户展示信息内容。7.1.2Web标准的构成1．结构结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是HTML（第1章中已做了简单

2、介绍）。2．表现表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。W3C创建CSS的目的是用CSS来控制整个网页的布局，与HTML所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点的维护更加容易。这也正是“Div+CSS”布局的一大特点。3．行为行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web标准技术主要有下面两个。DOM（DocumentObjectModel）：文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理HTML文档的标准方法，把网页和脚本

3、以及其他的编程语言联系了起来。ECMAScript（JavaScript的扩展脚本语言）：由CMA（ComputerManufacturersAssociation）制定的脚本语言（JavaScript），用于实现网页对象的交互操作。7.2认识DivDiv全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签。我们可以通过手动插入div标签并对它们应用CSS样式来创建网页布局。7.2.1Div简介Div是用来为HTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签

4、e）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表格式化这个块来控制。7.2.2创建DivDiv标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。7.2.3选择Div要对Div执行某项操作，首先需要将其选中。在DreamweaverCS4中选择Div的方法有两种。将鼠标光标移至Div周围的任意边框上，当边框显示为红色实线时单击鼠标左键可将其选中。将插入点置于Div中，然后单击“标签选择器”中相应的