通过Dreamweaver_CS3学习HTML+DIV+CSS_第22章__DIV+CSS.ppt

第22章DIV+CSS,从本章的标题来看，可能会让人费解。DIV是前面学习过的层标签，CSS是层叠样式表的缩写，它们之间会有什么关系，为什么可以联系到一起？了解Web标准的读者肯定会知道其中的缘由。到目前为止，大多数网站的布局是采用表格进行定位的，但这种方式会逐渐淡出设计舞台，取而代之的是符合Web标准的DIV+CSS布局方式。那么，Web标准是什么，如何进行DIV+CSS布局，就是本章所要介绍的内容。,22.1Web标准,Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分为3个方面：结构化标准语言，主要包括XHTML和XML；表现标准主要包括CSS；行为标准主要包括对象模型（如W3CDOM）和ECMAScript等。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，如ECMA（EuropeanComputerManufacturersAssociation）的ECMAScript标准。从如下的几个方面进行简单介绍。,22.1.1结构化标准语言,现在常用的结构化标准语言主要包括XML和XHTML两种。1XMLXML是TheExtensibleMarkupLanguage（可扩展标识语言）的简写。2XHTMLXHTML是TheExtensibleHyperTextMarkupLanguage（可扩展超文本标识语言）的缩写。,22.1.2表现标准CSS,CSS是CascadingStyleSheets（层叠样式表）的缩写。目前推荐遵循W3C于1998年5月12日发布的CSS2（参考/TR/CSS2/）。W3C创建CSS标准的目的是以CSS取代HTML表格样式的布局、帧和其他的表现语言。纯CSS布局与结构式XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。,22.1.3行为标准,行为标准主要包括DOM和ECMAScript两部分。1DOMDOM是DocumentObjectModel（文档对象模型）的缩写。根据W3CDOM规范，DOM是一种与浏览器、平台和语言的接口，可以访问页面其他的标准组件。2ECMAScriptECMAScript是ECMA（EuropeanComputerManufacturersAssociation）制定的标准脚本语言（JavaScript）。目前推荐遵循ECMAScript262。,22.1.4Web标准的优点,大部分人都有深刻的体验，每当主流浏览器版本升级的时候，刚建立的网站就可能变得过时，因此就需要随之升级或重新建造一遍网站。例如，从19961999年，为了兼容Netscape和IE，很多网站不得不为这两种浏览器写不同的代码。同样的，每当新的网络技术和交互设备的出现，也需要制作一个新版本来支持这种新技术或新设备，如支持手机上网的WAP技术。类似的问题举不胜举：网站代码臃肿和繁杂浪费了大量的带宽；针对某种浏览器的DHTML特效，屏蔽了部分潜在的客户；不易用的代码，残障人士无法浏览网站等。这些都是恶性循环，是巨大的浪费。,22.2理解表现和结构相分离,了解了Web标准之后，本小节将介绍如何理解表现和结构相分离。在此以一个实例来详细说明。首先必须先明白一些基本的概念：内容、结构、表现和行为。,22.2.1内容,内容就是页面实际要传达的真正信息，包含数据、文档或图片等。注意这里强调的“真正”，是指纯粹的数据信息本身，不包含任何辅助信息，如导航菜单或装饰性图片等，下面一段文本是页面要表现的信息，如图22.1所示。,22.2.2结构（Structure）,可以看到上面的文本信息本身已经完整，但是混乱一团，难以阅读和理解，必须将其格式化一下。把其分成标题、作者、章、节、段落和列表等，如图22.2所示。,22.2.3表现（Presentation）,虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字体没有变大，正文的颜色也没有变化，没有背景，没有修饰等。所有这些用来改变内容外观的东西，称之为“表现”。下面是对上面文本用表现处理过后的效果，如图所示。,22.2.4行为（Behavior）,行为是对内容的交互及操作效果。例如，使用JavaScript可以使内容动起来，可以判断一些表单提交，进行相应的一些操作。所有HTML和XHTML页面都由结构、表现和行为三方面内容组成。抽象一点理解，内容是基础层，然后是附加上的结构层和表现层，最后再对这三个层做点“行为”，,22.2.5传统的HTML方法,传统的HTML标签中，既有控制结构的标签（如标签和标签），又有控制表现的标签（如标签和标签），还有本意用于结构后来被滥用于控制表现的标签（如标签和标签）。整个结构标签与表现标签混合在一起。1如何改版2数据的利用,22.2.6Web标准推荐的方法,对于内容、结构和表现相分离，最早是在软件开发架构理论中提出来的。用过QQ的人都知道，QQ面板的皮肤变更但内容却保持不变，仅是外观在变化。还有，Winamp的skin也是这种原理的典型体现。其实大多数的设计师已经在实践中都接触过。动态信息发布系统实际上就是基于这个原理制作的。,22.3DIV+CSS页面规划,从前一节的内容可知，DIV+CSS的页面布局不仅仅是设计方式的转变，而且是设计思想的转变。虽然在设计中使用的元素依然没有改变，在旧的表格布局中，也会使用到DIV和CSS，但它们却没有被用于页面布局。这一转变为网页设计带来了许多便利，在前面已经介绍过。那么究竟如何使用DIV+CSS进行页面布局，使用DIV+CSS需要掌握哪些知识点，就是本节要介绍的内容。,22.3.1盒模型,盒模型是进行和实现DIV+CSS布局的基础，关系到网页元素的排列和定位。盒模型由内容、边框、内填充和外边距组成，如图所示。,22.3.2定位,了解盒模型之后，如何才能把这些盒模型妥当地排列在网页中，这时需要用到定位技术。在此之前，介绍两个基本概念。在CSS的布局中，网页元素可分为两类：一类是块级框元素，如标签和标签等。它们在网页中以块的形式出现。除非特殊情况，它们之后总会有换行，即它们会占据一行的位置。另一类是行内框元素，如标签等。它们之后不会有换行，则多个此类标签共居一行。,22.3.2定位,1普通流定位普通流定位是根据元素在XHTML中原本的位置进行确定。块级框元素按从上至下的垂直方式进行定位，而行内框元素按从左至右的水平方式进行定位。在没有指明定位方式的情况下，默认为普通流方式。2相对定位相对定位方式是元素在原来的位置进行偏移,22.3.2定位,3绝对定位绝对定位是相对于其上一级元素来进行的。它会脱离普通流，即普通流中的元素会把它当作不存在。所以绝对定位的改变会影响到普通流中的元素的位置。其示意图如图所示。,22.3.2定位,4浮动定位浮动定位可以进行左右移动，直到定位元素的边框碰到父级元素或同级元素的边框，才会停止移动。它也是在CSS布局中常用的定位方式。浮动定位也会脱离普通流，从而普通流中的元素对浮动定位视而不见，将其当作不存在。如果需要把元素设置成浮动定位，只需把float设置为left或right即可。,22.3.3清除,清除属性clear可以清除元素的浮动效果。该属性共有三个属性值：left、right和none。当设置为left时，元素的左边不允许出现浮动定位元素，如果出现浮动定位元素，则自动换行进行下降；当设置为right时，元素的右边不允许出现浮动定位元素；当设置为none时，元素的两边不允许出现浮动定位元素。该属性的设置可以为布局带来便利。它会为浮动元素留出空间。当元素内存在浮动定位时，浮动元素会脱离普通流，从而不会占用父级元素的空间，如图所示。,22.3.4实现布局规划,了解以上的几个基本概念后，可以实现简单的布局。在此就介绍二栏结构布局实现的方法。首先绘制大概的结构示意图，如图所示，从而方便在布局实现的过程中理清各部分的关系。从示意图可看出，此布局主要是处理导航栏与主体内容之间的关系，以及布局元素居中的问题。导航栏与主体内容并列在同一水平位置，所以需要把它们包含在一个元素中，以便进行居中。在此使用DIV+CSS进行布局，,22.3.4实现布局规划,DIV层之间关系如图所示。,22.3.5美化布局,在传统布局也就是表格布局里可以使用大量的图片进行页面的美化。在DIV+CSS布局中，同样可以使用图片来进行页面的美化。不同的是，在DIV+CSS中使用背景图片的方式，这使得美化工作变得更为简单，在此用一实例来介绍背景图片的美化过程，如图所示。,22.4DIV+CSS在Dreamweaver中实现,DreamweaverCS3是全面地支持DIV+CSS，并且符合Web标准的网页设计。在Dreamweaver中可以实现可视化CSS布局，这使得网页设计更为简单，效率更高。为了方便初学者进行设计，Dreamweaver还提供了许多现成的模板，可以直接在网页中应用。当然，对于熟练的用户可以采用自定义方式进行布局。,22.4.1使用模板布局,DreamweaverCS3中提供了多达32种模板，几乎涵盖了所有的布局模型。模板主要分为1列布局、2列布局和3列布局。每种模型里又分为固定列布局、液态列布局和弹性布局。这些模板可以在设计的过程中稍加改动，从而满足用户的需要来使用。下面将介绍如何使用模板，具体步骤如下：,22.4.2自定义布局,有时，从模板创建的布局页面并不能完全符合要求。那么，用户可以在Dreamweav