任务一构建标准化的页面结构.pdfVIP

任务一 构建标准化的页面结构 按照W3C 标准理解，网页主要由结构（Structure）、表现（Presentation ）和行为（Behavior ） 三部分组成。其中，网页结构是网页中最重要的，也是最核心的一部分。要实现标准化的页 面布局，一个标准化的网页结构自然是必不可少的。 W3C 标准 W3C 标准是万维网联盟（World Wide Web Consortium ）标准的缩写，它不是某一个标 准，而是一系列标准的集合，由结构化标准语言、表现标准语言和行为标准三部分组成。  结构化标准语言在HTML5 出现之前主要包括可扩展标签语言XML 和可扩展超文 本标签语言XHTML 两种。早在前几年，制作网页主要用到的就是XHTML 标签 语言，这是一种基于HTML4.0 朝XML 过渡的一种标签语言，语法上比HTML4 更加严格。但随着HTML5 的出现，这种新的标准越来越被更多的人开始接受。  表现标准语言目前主要是以层叠样式表（CSS ）为代表。现推荐遵循的是万维网联 盟于1998 年5 月12 日推荐CSS2，CSS3 已发布，主流浏览器正在逐渐支持，程 序员也开始利用CSS3 代替以往冗长的旧代码。万维网联盟创建CSS 标准的目的 是以CSS 取代HTML 表格式布局、帧和其他表现的语言。纯CSS 布局与结构式 XHTML 相结合能帮助设计师分离外观与结构，使站点的访问及维护更加容易。  行为标准主要包括文档对象模型（DOM ）和ECMAScript （以JavaScript 为代表） 标准脚本语言。 标准化页面结构的思想 一个标准化的网站构建和页面布局，不仅可以降低网站的后期维护成本，提高长期维护 的效率，也有利于网站在互联网上流畅的运行，并能更快的被查找和搜索出来。故此， DIV+CSS 标准化布局成为目前主流的网页布局方式。 一个页面中，最重要的是数据内容，无论页面的用户体验如何，数据是页面存在的意义 所在，如何将页面的数据内容准确的定义和描述，直接影响到页面的维护与查询。例如下面 所示代码： div这是一行文本内容/div p这是一行文本内容/p 同样是在页面中显示一行文本，p 表示此处是一个段落，而div 却只是一个区域，对文 本的作用没有做出解释，两者表达的含义完全不同。从演示效果来说似乎没有什么较大区别， 但对于设计者和搜索引擎来说，标签传达的思想是不一样的，这会对页面内容的维护和搜索 造成影响。因而，为了更加清楚的表达页面的内容构成，需要根据网页内容的具体作用选择 合适的标签来描述和定义内容。 认识div 标签 学习页面布局，就不得不学习div 标签，曾经流行了多年的DIV+CSS 的组合应用至今 仍然还在被延续着。随着这种技术不断的被使用，大家对DIV+CSS 的认识开始出现了偏差， 甚至有人开始错误的使用DIV+CSS 的组合。那么什么是div 呢？ W3C 标准定义，div （division 的简写），可定义文档中的分区或节（division/section ）， 它可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格 式与其关联。 由定义可以清楚的知道，div 只是作为一个分区标签，有效的组织页面的内容，将页面 的内容结构划分的更加清晰，div 默认的效果就是一个隐形的矩形区域。根据标签的作用， div 是划分区域的最佳选择。而在实际的应用中，许多人过度的滥用div，导致页面的结构 不仅没有改善，反而变得更加的糟糕混乱。 一个页面中有众多的div 标签，为了有效区分，需要进行命名标识。通常采用id 属性 或class 属性命名标识。id 属性通常用于页面的顶层区域，如需对局部内容设置名称，可使 用class 属性，具体作用将会在下个任务中讲到。 设计与制作工具 通达公司网站建设采用网页制作三剑客，主要是DW，同样，本案例的建设也可以使用 DW ，借助其站点管理功能方便我们有效管理站点以及页面建设流程，其可视化“所见即所 得”功能也可以帮助我们减轻一定的工作量，并减少错误。因为DIV+CSS 标准化布局页面 多涉及编写代码的操作，因此，一般是在DW 设计视图与代码视图下交替进行页面设计。 利用DW 进行代码编写式的