第3章Web 元素的显示.PDFVIP

第 3 章 Web 元素的显示 XHTML 代码结构只是构成了Web 元素本身的内容部分，并非是呈现给Web 终端用户 的最终效果。在Web 应用中，所有的Web 元素都需要采用各种方式重新布局定位，并且 用多种手法进行美化和修整，才能组合成为符合终端用户审美观和使用习惯的用户界面。 在标准化的Web 开发中，为Web 元素布局定位、美化修整都需要使用到CSS 样式表 技术，此技术决定了Web 应用的显示效果，以便为终端用户提供直观而方便的操作界面。 本章将以实用的角度介绍 CSS 样式表技术在现代Web 站点开发过程中的应用，帮助开发 者更快地了解CSS 样式表技术的原理和应用的方式。 3.1 结构和样式的松耦合 传统的Web 站点和Web 应用往往采用旧的HTML 内置标记来实现页面的排版，再通 过对表格单元格的拆分、合并、修改单元格的宽度和高度实现布局。 20 90 这种简陋而粗糙的手法可以做出十分美观的网站，在 世纪 年代，这种手法颇为 流行，很多图像设计软件（例如Adobe Photoshop 、Adobe Fireworks 等）甚至直接提供切 片工具来辅助传统的网站美工、艺术工作者生成这类网页。此时，Web 开发的分工并不明 确，很多中小型 Web 站点或 Web 应用往往由学习美术、艺术专业的 Web 设计师设计和 制作。 随着现代Web 技术的发展，美观已经不再是衡量一个Web 站点或Web 应用的唯一标 准，一个成功的现代Web 站点或Web 应用应该且必须符合以下要求。  可维护性、可扩展性和前瞻性  交互的便捷性  能够被搜索引擎快速抓取内容 以上三点要求中，可维护性、可扩展性和前瞻性决定了Web 站点和Web 应用是否具 有快速更新、修复、改版，不断适应用户新需求和期望的能力；交互的便捷性决定了用户 的操作体验；被搜索引擎快速抓取内容决定了是否能招揽更多的终端用户。 Web HTML 这三方面的需求决定了传统的 开发模式、 表格包打天下的实现方式已经不 再适合开发现代的Web 站点和Web 应用。随着开发Web 站点的复杂度逐渐增加，现代的 Web 设计和开发也逐渐分工，由传统的Web 设计师包揽全部工作转换为Web 设计师设计 用户界面，前端开发者完成前端界面的开发和部署。 基于以上背景，现代的Web 开发引入了CSS 样式表技术和严格模式的XHTML 技术， 将站点的内容和显示效果分离开来，使得站点内容的维护更加便捷，修改更加迅速，同时 也便于更快地改版和形成新的界面效果，结构化的XHTML 更符合XML 标准，可以更容 第3 章 Web 元素的显示 75 易地被搜索引擎检索。 前端开发结构和样式的松耦合的意义在于，将结构和表现完全从依赖关系上分离出 来，结构即结构，表现即表现。通过降低结构和表现之间的依赖性，来提高整体Web 代码 维护的效率。 具体到代码层级，松耦合采用XHTML 的严格型声明（Strict Mode）来编写结构代码， 拒绝任何表现样式的 HTML 标记，编写“纯”结构的数据。然后通过 XHTML 标记的 id class Web id class 或 等核心属性的值建立一个完整的 元素关系表，将各种显示元素的 和 整理记录。最后根据Web 元素关系表进行针对性的Web 元素界面效果代码开发。 在对Web 站点或应用的界面进行更新时，可以针对Web 元素关系表直接编写全新的 CSS 样式表，在不改变结构的情况下构建新的界面样式。 CSS CSS / 作为典型的 松耦合推广站点， 禅意花园（