第1章网页制作基础知识选读.ppt

第1章 网页制作基础知识 + 1.4 认识Web标准 1.4.1 什么是Web标准 2．表现标准语言 CSS（Cascading Style Sheet，层叠样式表）是一组用来控制网页外 观的规则。通过CSS可以将样式信息与网页内容分离开来，不仅使站点外观维护变得更为简便，而且还可以使(X)HTML文档代码结构清晰、内容简练。 3．行为标准 （1）DOM DOM（Document Object Model，文档对象模型）是HTML与XML的应用编程 接口，它使脚本语言能够很容易地访问到整个文档的结构、内容和表现。 （2）ECMAScript ECMAScript是ECMA（European Computer Manufacturers Association，欧洲电脑厂商协会）制定的一种基于Netscape JavaScript的标准脚本语言。 第1章 网页制作基础知识 + 1.4 认识Web标准 1.4.2 为什么选择Web标准 1．易用性 2．节约成本 3．增加访问渠道 第1章 网页制作基础知识 + 1.4 认识Web标准 1.4.3 浏览器兼容性问题 浏览器兼容性问题是网页前端开发人员经常遇到的且必须解决的问题，它指的是对于同一段代码用不同浏览器对其解析后，页面显示效果不一致的情况。 此外，即便是同一品牌下不同版本的浏览器也存在兼容性方面的问题，例如IE5/5.5/6/7/8/9之间就存在着很大差别。 这些问题的存在，无疑增加了设计者学习CSS的难度，不过随着时间的推移，其中的一些问题已经得到改善，况且这些问题并不能掩盖Web标准的优势及其推广。 第1章 网页制作基础知识 + 1.5 网页设计的重要理念 1.5.1 重要思想——结构和表现相分离 1．内容 页面中的内容可以是数据、文字和图片等其他类型。这里需要着重理解 的是“真正”二字，其含义是不包含辅助信息（如装饰性图片）在内的数 据本身。 2．结构（Structure） 将内容按照一定的类别和层次进行有机的排列和搭配，进而所呈现出来 的逻辑性称为结构。W3C规范的结构化标准语言主要包括HTML、 XHTML和XML，通过这些语言能够使页面内容具有逻辑性，易用性。 3．表现（Presentation） 用来改变内容外观的样式称为表现。W3C创建表现语言CSS标准的目的 就是希望CSS取代HTML中表格式布局的语言，最终实现表现与结构相 分离。 4．行为（Behavior） 行为指的是对内容的互交及其操作的效果 第1章 网页制作基础知识 + 1.5 网页设计的重要理念 1.5.2 表格布局与CSS布局 1．表格布局 在HTML和浏览器还不是很完善的时候，由于表格可以设置高度和宽度、可以相互嵌套，能够实现像素级的精度控制页面元素，这些优点让表格布局自然而然成为控制页面元素位置的最好方法。 2．表格嵌套与结构混乱 表格存在的真正意义就是组织数据，而并非在布局上的应用。从代码的臃肿方面考虑，即便是最简单的1行1列表格，也需要table、tr和td这3个标签，代码如下：table width=800 border=1 tr td这是最简单的1行1列表格/td /tr /table 第1章 网页制作基础知识 + 1.5 网页设计的重要理念 1.5.2 表格布局与CSS布局 3．CSS布局 CSS布局与表格布局本质的差别在于：表格属于结构叠加结构控制布局; CSS属于表现基于结构控制布局。 第1章 网页制作基础知识 + 1.5 网页设计的重要理念 1.5.3 正确理解Web标准 从使用表格布局到使用CSS布局，有些Web设计者对标准理解不深，很容易步入Web标准的误区，主要表现在以下几方面，希望读者学习后能对Web标准有新的认识。 1．表格布局的思维模式 初学者很容易认为CSS布局就是将原来使用表格的地方用DIV来代替，原来是表格嵌套，现在是DIV嵌套，使用这种思维模式进行设计其效果并不理想，意义也不大。 2．标签的使用 XHTML的标签是用来定义结构的，不是用来实现“表现”的。 3．CSS与ID 在对页面进行布局时，不需要为每个元素都定义一个ID，并且不是每段内容都要用div进行布局，完全可以使用p标签加以代替，这两个标签都是块级元素，使用div标签仅是在浮动时便于操作。 清华大学 清华大学 清华大