使用Div+CSS布局网.ppt

第7章 使用Div+CSS布局网页,Web标准概述 认识Div Div+CSS布局简介 使用Spry布局对象,7.1 Web标准概述,7.1.1 什么是Web标准,Web标准是由W3C（World Wide Web Consortium）和其他标准化组织制定的一套规范，包括HTML、JavaScript及CSS等一系列标准，其目的在于创建一个统一的用于Web表现层的技术标准，以便能通过不同浏览器或终端设备（计算机、手机等）向用户展示信息内容。,7.1.2 Web标准的构成,1结构,结构技术用于对网页中用到的信息（文本、图像、动画等）进行分类和整理，目前用于结构化设计的Web标准技术主要是HTML（第1章中已做了简单介绍）。,2表现,表现技术用于对已被结构化的信息进行显示上的控制，包括位置、颜色、字体、大小等形式控制。目前用于表现设计的Web标准技术就是CSS。W3C创建CSS的目的是用CSS来控制整个网页的布局，与HTML所实现的结构完全分离。简单来说就是表现与内容完全分离，使站点的维护更加容易。这也正是“Div+CSS”布局的一大特点。,3行为,行为是指对整个文档的一个模型定义和交互行为的编写。目前用于行为设计的Web标准技术主要有下面两个。,DOM（Document Object Model）：文档对象模型，相当于浏览器与内容结构之间的一个接口。它定义了访问和处理HTML文档的标准方法，把网页和脚本以及其他的编程语言联系了起来。 ECMAScript（JavaScript的扩展脚本语言）：由CMA（Computer Manufacturers Association）制定的脚本语言（JavaScript），用于实现网页对象的交互操作。,7.2 认识Div,Div全称Division，意为“区分”，它是用来定义网页内容中逻辑区域的标签。我们可以通过手动插入div标签并对它们应用CSS样式来创建网页布局。,7.2.1 Div简介,Div是用来为HTML文档中的块内容设置结构和背景属性的元素。它相当于一个容器，由起始标签和结束标签之间的所有内容构成。在它里面可以内嵌表格（table）、文本（text）等HTML代码。其中所包含的元素特性由Div标签的属性来控制，或使用样式表格式化这个块来控制。,7.2.2 创建Div,Div标签与表格、图像等网页对象的插入方法类似，所不同的是，在插入Div标签的同时可以为其设置样式。,7.2.3 选择Div,要对Div执行某项操作，首先需要将其选中。在Dreamweaver CS4中选择Div的方法有两种。,将鼠标光标移至Div周围的任意边框上，当边框显示为红色实线时单击鼠标左键可将其选中。 将插入点置于Div中，然后单击“标签选择器”中相应的标签，同样可将其选中,7.3 Div+CSS布局简介,7.3.1 Div+CSS布局的优缺点,“Div+CSS”布局虽然是目前比较流行的网页布局方式，但业界对它的评价却褒贬不一。本节我们就从它所具有的优势和存在的问题两方面入手，来对它做一个公正的评价。,7.3.2 绝对定位与相对定位,1绝对定位,绝对定位在CSS中的写法是“position:absolute;”。其表达的意思是参照浏览器的左上角，配合top、right、bottom、left（上、右、下、左）值来定位元素，如下CSS代码： #lay position:absolute; left:5px; top:5px; ,2相对定位,相对定位在CSS中的写法是“position:relative;”，其表达的意思是以父级对象（它所在的容器）的坐标原点为坐标原点。无父级则以body的坐标原点为坐标原点，配合上、右、下、左（简称TRBL）进行定位，当父级内有padding等CSS属性时，当前级的坐标原点则参照父级内容区的坐标原点进行定位。,7.3.3 浮动定位,浮动定位在CSS中用“float”属性来表示。当“float”值为“none”时，表示对象不浮动；为“left”时，表示对象向左浮动；为“right”时，表示对象向右浮动。,7.4 使用Spry布局对象,7.4.1 Spry菜单栏,Spry菜单栏是一系列导航菜单按钮，当光标指向某个按钮时可以弹出项目的子菜单。使用Spry菜单栏可以在有限的空间内显示大量的导航信息。,7.4.2 Spry选项卡式面板,Spry选项卡式面板是一系列可以在收缩的空间内存储内容的面板。浏览者可以单击相应面板标签在各个面板之间切换。定位插入点后，单击“插入”面板中的“Spry选项卡式面板”即可将其插入。,7.4.3 Spry折叠式,Spry折叠式是一系列可以在收缩的空间内存储内容的面板窗口。浏览者可以通过单击面板标题来显示或隐藏面板内容。定位插入点后，单击“插入”面板中的“Spry折叠式”即可将其插入。,7.4.4 Spry可折叠面板,Spry可折叠面板是一个可以在收缩的空间内存储内容的面板，用户可通过单击面板标签来显示或隐藏面板内容。定位插入点后，单击“插入”面板中的“Spry可折叠面板”即可将其插入。,综合实例用Div+