第2章使用Web标准设计和制作讲述.pptx

第2章 使用Web标准设计和制作网页 Web标准掀起了国内网页制作的革命，网页设计与制作人员都开始重新审视自己过去的网页作品，并且惊讶地发现那些充满了嵌套表格的HTML代码臃肿而且难以修改，于是一场清理HTML的行动开始了。本章中主要讲解了使用Web标准设计和制作网页的原理和优点，通过学习可以让读者充分理解使用XML替换HTML的理由。 2.1 表格布局 表格布局已经有很多年历史了，在HTML和浏览器还不很完善的时候，要想让页面内的元素能有一个比较好的格局几乎是不可能实现的，由于表格不仅可以控制单元格的宽度和高度，而且可以互相嵌套，所以为了让各个网页元素能够放在预设的位置，表格就成为网页制作中不可缺少的工具。 2.1.1 表格布局的特点 由于对网站外观“美化”要求的不断提高，设计者开始用各种图片来装饰网页。由于大的图片下载速度缓慢，一般制作者会将大图片切分成若干个小图片，这样浏览器会同时下载这些小图片，这样就可以在浏览器上尽快的将大图片打开。因此表格成为了把这些小图片组装成一张完整图片的有力工具。 2.1.2 混乱的逻辑结构和冗余的嵌套表格 采用表格布局的页面内，为了实现设计的布局，制作者往往在单元格标签td内设置高度、宽度和对齐等属性，有时还要加入装饰性的图片，图片和内容混杂在一起。使代码视图显得非常臃肿。 因此当页面布局需要调整时，往往都要重新制作表格。尤其当有很多页面需要修改时，工作量将变得难以想象。 表格在版面布局上很容易掌控，通过表格的嵌套可以很轻易地实现各种版式布局，但是即使是一个1行1列的表格，也需要table、tr和td这3个标签，最简单的表格代码如下所示： table tr td这里是内容/td /tr /table 如果需要完成一个比较复杂的页面时，HTML文档内将充满了tr和td标签。同时，由于浏览器需要把整个表格下载完成后才会显示，因此如果一个表格过长、内容过多的话，那么访问者往往要等很长时间才能看到页面中的内容。 多的冗余代码，对于服务器端也是一个不小的压力，也许一个只有几个页面、每天只有十几个人访问的个人站点对流量不会太在意，但是对于一个每天都有几千人甚至上万人在线的大型网站来说，服务器的流量就是一个必须关注的问题了。 2.2 了解Web标准 Web标准似乎是近两年来在国内出现的一个新兴名词。大概从2003年左右开始，有关Web标准的各类文章与讨论便伴随着网络上大大小小的设计与技术论坛开始展开，也掀起了一股学习Web标准的热潮，以此之后重多网站设计爱好者的网站开始打上了“符合Web标准”的字样。 2.2.1 Web标准的基础概念 Web标准，即网站标准。目前通常所说的Web标准一般指进行网站建设所采用的基于XHTML语言的网站设计语言。Web标准中典型的应用模式是Div+CSS。实际上，Web标准并不是某一个标准，而是一系列标准的集合。 2.2.2 认识W3C W3C组织是对网络标准制定的一个非赢利组织，W3C是World Wide Web Consortium（万维网联盟）的缩写，像HTML、XHTML、CSS、XML的标准就是由W3C来定制。它创建于 1994年，研究Web规范和指导方针，致力于推动Web发展，保证各种Web技术能很好地协同工作。大约500名会员组织加入这个团体。 2.2.3 W3C发布的标准 网页主要由3部分组成：结构（structure）、表现(Presentation)和行为（Behavior）。对应的网站标准也分3方面，即结构化标准语言、表现标准语言和行为标准。 2.2.4 Web标准的优势 Web标准是由W3C（world Web Consortium）和其他标准化组织制定的一套规范集合，包含一系列标准，包含我们所熟悉的HTML，XHTML，javaScript以及CSS等。Web标准的目的在于创建一个统一的用于Web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。相对于目前的网页制作方法，使用Web标准的优势有以下几点。 加速开发 ：在20世纪90年代后期，当互联网和Web逐渐成为主流时，Web浏览器的开发商还没有完全地支持CSS（层叠式样式表，对于Web开发人员来说，他们可以用CSS来控制HTML文档的表现）。 易于维护，增加机会：多年以来，web标准团体一直推荐“保持视觉设计和内容相分离”的优点，这意味着HTML变得非常简单，大部分的XHTM?L页面只有一些富语义的div和p标签，以及一个指向强大的CSS文件的链接。 拓展访问渠道 ：干净的代码带来更多的利益。不支持CSS的浏览器现在可以简单的忽略样式表，换句话说，有语义的XHTML表示可以被任何浏览器呈现，包括非传统的客户端，例如手机、PD