第12章 页面布局

• 行为标准 • 行为标准主要包括DOM和ECMAScript两部分。 • 1．DOM • DOM是Document Object Model（文档对象模型）的缩写。根据W3C DOM规范，DOM是一种与浏览器、平台和语言的接口，可以访问页面其 他的标准组件。 • 2．ECMAScript • ECMAScript是ECMA（European Computer Manufacturers Association）制定的标准脚本语言（JavaScript）。目前推荐遵循 ECMAScript 262。
• 理解表现和结构相分离 • 了解了Web标准之后，本小节将介绍如何理解表现和结构相分离。 在此以一个实例来详细说明。首先必须先明白一些基本的概念：内容、 结构、表现和行为。 • 内容 • 内容就是页面实际要传达的真正信息，包含数据、文档或图片等。 注意这里强调的“真正”，是指纯粹的数据信息本身，不包含任何辅 助信息，如导航菜单或装饰性图片等，下面一段文本是页面要表现的 信息。
• 单元格布局模式 • 在这一节中将学习创建布局单元格，并对布局单元格进行编辑的方 法。若想在布局模式中插入文本、图像等元素，就必须先创建布局单 元格。因为这些要素只能插入到布局单元格内。 • 添加布局单元格 • 在添加布局表格时，不能直接添加到原有布局表格的旁边，只能添 加到原布局表格的内侧或下方。相反，在布局单元格内不能嵌套其他 布局单元格，而且布局单元格之间不能重叠排列。 • 调整布局单元格的位置和大小
第12章 页面布局
• 布局模式 • 一个主页要想得到众多访问者的认可，最关键是实用、美观。布局 指的是主页构成元素的分布方式。 • 表格布局模式 • 与一般的图表功能相比，利用表格设计网页文档整体布局的操作更 加复杂而烦琐，需要设计者付出更多的努力。而Dreamweaver的布局 模式功能轻松地解决了这一问题，深具革新意义。当利用表格设计特 殊的页面布局时，布局模式起着重要的作用。与一般的表格功能不同， 在任何一个位置拖动鼠标，布局模式都可以自动生成表格和单元格。 另外，它能够自由拖动，所以再复杂的页面布局也可以轻松地制作出 来。
• 3、标题正文型 • 这种类型即最上面是标题或类似的一些东西，下面是正文，比如一 些文章页面或注册页面等就是这种类。 • 4、左右框架型 • 这是一种左右为分别两页的框架结构，一般左面是导航链接，有时 最上面会有一个小的标题或标致，右面是正文。我们见到的大部分的 大型论坛都是这种结构的，有一些企业网站也喜欢采用。这种类型结 构非常清晰，一目了然。 • 5、上下框架型 • 与上面类似，区别仅仅在于是一种上下分为两页的框架。
• 结构化标准语言 • 现在常用的结构化标准语言主要包括XML和XHTML两种。 • 1．XML • XML是The Extensible Markup Language（可扩展标识语言）的简 写。 • 2．XHTML • XHTML是The Extensible HyperText Markup Language（可扩展超 文本标识语言）的缩写。
• Web标准推荐的方法 • 对于内容、结构和表现相分离，最早是在软件开发架构理论中提出 来的。用过QQ的人都知道，QQ面板的皮肤变更但内容却保持不变，仅 是外观在变化。还有，Winamp的skin也是这种原理的典型体现。其实 大多数的设计师已经在实践中都接触过。 • 动态信息发布系统实际上就是基于这个原理制作的。
• 清除 • 清除属性clear可以清除元素的浮动效果。该属性共有三个属性值： left、right和none。当设置为left时，元素的左边不允许出现浮动 定位元素，如果出现浮动定位元素，则自动换行进行下降；当设置为 right时，元素的右边不允许出现浮动定位元素；当设置为none时， 元素的两边不允许出现浮动定位元素。 • 该属性的设置可以为布局带来便利。它会为浮动元素留出空间。当 元素内存在浮动定位时，浮动元素会脱离普通流，从而不会占用父级 元素的空间，如图所示。
• DIV+CSS布局 • 从本节的标题来看，可能会让人费解。DIV是前面学习过的层标签， CSS是层叠样式表的缩写，它们之间会有什么关系，为什么可以联系 到一起？了解Web标准的读者肯定会知道其中的缘由。到目前为止， 大多数网站的布局是采用表格进行定位的，但这种方式会逐渐淡出设 计舞台，取而代之的是符合Web标准的DIV+CSS布局方式。那么，Web 标准是什么，如何进行DIV+CSS布局，就是本节所要介绍的内容。
• 网页布局类型 • 网页可以说是网站构成的基本元素。当我们轻点鼠标，在网海中遨 游，一副副精彩的网页会呈现在我们面前，那么，网页的精彩与否的 因素是什么呢？色彩的搭配、文字的变化、图片的处理等，这些当然 是不可忽略的因素，除了这些，还有一个非常重要的因素——网页的 布局。下面，我们就有关网页布局谈论一下。
• Web标准 • Web标准不是某一个标准，而是一系列标准的集合。网页主要由3部 分组成：结构（Structure）、表现（Presentation）和行为 （Behavior）。对应的标准也分为3个方面：结构化标准语言，主要 包括XHTML和XML；表现标准主要包括CSS；行为标准主要包括对象模 型（如W3C DOM）和ECMAScript等。这些标准大部分由W3C起草和发布， 也有一些是其他标准组织制订的标准，如ECMA（European Computer Manufacturers Association）的ECMAScript标准。从如下的几个方 面进行简单介绍。
• 1、“国”字型 • 也可以称为“同”字型，是一些大型网站所喜欢的类型，即最上面 是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分 列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面 是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在 网上见到的差不多最多的一种结构类型。 • 2、拐角型 • 这种结构与上一种其实只是形式上的区别，其实是很相近的，上面 是标题及广告横幅，接下来的左侧是一窄列链接等，右列是很宽的正 文，下面也是一些网站的辅助信息。在这种类型中，一种很常见的类 型是最上面是标题及广告，左侧是导航链接。
• 定位 • 了解盒模型之后，如何才能把这些盒模型妥当地排列在网页中，这 时需要用到定位技术。在此之前，介绍两个基本概念。在CSS的布局 中，网页元素可分为两类： • 一类是块级框元素，如<DIV>标签和<P>标签等。它们在网页中以块 的形式出现。பைடு நூலகம்非特殊情况，它们之后总会有换行，即它们会占据一 行的位置。 • 另一类是行内框元素，如<span>标签等。它们之后不会有换行，则 多个此类标签共居一行。
• 结构 • 可以看到上面的文本信息本身已经完整，但是混乱一团，难以阅读 和理解，必须将其格式化一下。把其分成标题、作者、章、节、段落 和列表等。
• 表现 • 虽然定义了结构，但是内容还是原来的样式没有改变，例如标题字 体没有变大，正文的颜色也没有变化，没有背景，没有修饰等。所有 这些用来改变内容外观的东西，称之为“表现”。下面是对上面文本 用表现处理过后的效果。
• 行为 • 行为是对内容的交互及操作效果。例如，使用JavaScript可以使内 容动起来，可以判断一些表单提交，进行相应的一些操作。 • 所有HTML和XHTML页面都由结构、表现和行为三方面内容组成。抽象 一点理解，内容是基础层，然后是附加上的结构层和表现层，最后再 对这三个层做点“行为”。
• 6、综合框架型 • 上页两种结构的结合，相对复杂的一种框架结构，较为常见的是类 似于“拐角型”结构的，只是采用了框架结构。 • 7、封面型 • 这种类型基本上是出现在一些网站的首页，大部分为一些精美的平 面设计结合一些小的动画，放上几个简单的链接或者仅是一个“进入” 的链接甚至直接在首页的图片上做链接而没有任何提示。这种类型大 部分出现在企业网站和个人主页，如果说处理的好，会给人带来赏心 悦目的感觉。
• 4．浮动定位 • 浮动定位可以进行左右移动，直到定位元素的边框碰到父级元素或 同级元素的边框，才会停止移动。它也是在CSS布局中常用的定位方 式。浮动定位也会脱离普通流，从而普通流中的元素对浮动定位视而 不见，将其当作不存在。如果需要把元素设置成浮动定位，只需把 float设置为left或right即可。
• DIV+CSS页面规划 • 从前一节的内容可知，DIV+CSS的页面布局不仅仅是设计方式的转 变，而且是设计思想的转变。虽然在设计中使用的元素依然没有改变， 在旧的表格布局中，也会使用到DIV和CSS，但它们却没有被用于页面 布局。这一转变为网页设计带来了许多便利，在前面已经介绍过。那 么究竟如何使用DIV+CSS进行页面布局，使用DIV+CSS需要掌握哪些知 识点，就是本节要介绍的内容。 • 盒模型 • 盒模型是进行和实现DIV+CSS布局的基础，关系到网页元素的排列 和定位。盒模型由内容、边框、内填充和外边距组成，如图所示。
• 指定布局单元格间距和空白区 • 布局表格和布局单元格从根本上说都是表格的一种，所以大部分属 性的设置方法都与一般表格相同。对于无法在布局模式中设置的属性， 可以返回标准模式进行设置之后，再返回布局模式继续操作。 • 将页面布局指定为底层图像 • 利用Dreamweaver中提供的“跟踪图像”功能，可以在网页文档中 插入图像作为底层图像。“跟踪图像”是为了参考网页文档的大小或 设计而插入的图像。在Photoshop中将设计的网页文档整个保存为图 像文件（jpg）之后，可以再Dreamweaver中将其指定为“跟踪图像”。
• 表现标准CSS • CSS是Cascading Style Sheets（层叠样式表）的缩写。目前推荐 遵循W3C于1998年5月12日发布的CSS 2（参考 /TR/CSS2/）。W3C创建CSS标准的目的是以CSS取 代HTML表格样式的布局、帧和其他的表现语言。纯CSS布局与结构式 XHTML相结合能帮助设计师分离外观与结构，使站点的访问及维护更 加容易。