Web 设计相关概念教学课件

1、Web 设计相关概念内容HTML与XHTML；DHTML ；DIV；CSSXML；SHTML；XHTML是什么？HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言，看起来与HTML有些相象，只有一些小的但重要的区别，XHTML就是一个扮演着类似HTML的角色的XML，所以，本质上说，XHTML是一个过渡技术，结合了XML（有几分）的强大功能及HTML（大多数）的简单特性。2000年底，国际W3C(WorldWideWebConsortium)组织公布发行了XHTML1.0版本。XHTML1.0是一种在HTML4.0基础上优化和改进的的新语言，目的是基于XML应用。XH

2、TML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。XHTML解决什么问题？下面是W3C的HTML工作组主席StevenPemberton回答的关于XHTML的常见基础问题。（1）XHTML解决HTML语言所存在的严重制约其发展的问题。HTML发展到今天存在三个主要缺点：不能适应现在越多的网络设备和应用的需要，比如手机、PDA、信息家电都不能直接显示HTML；由于HTML代码不规范、臃肿，浏览器需要足够智能和庞大才能够正确显示HTML；数据与表现混杂，这样你的页面要改变显示，就必须重新制作HTML。因此HTML需要发展才能解决这个问题，于是W3C又制定了XHTML，

3、XHTML是HTML向XML过度的一个桥梁。（2）XML是web发展的趋势，所以人们急切的希望加入XML的潮流中。XHTML是当前替代HTML4标记语言的标准，使用XHTML1.0，只要你小心遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面。这个意思就是说，你可以立刻设计使用XML，而不需要等到人们都使用支持XML的浏览器。这个指导方针可以使web平滑的过渡到XML。XHTML解决什么问题？ （3）使用XHTML的另一个优势是：它非常严密。当前网络上的HTML的糟糕情况让人震惊，早期的浏览器接受私有的HTML标签，所以人们在页面设计完毕后必须使用各种浏览器来

4、检测页面，看是否兼容，往往会有许多莫名其妙的差异，人们不得不修改设计以便适应不同的浏览器。（4）XHTML是能与其它基于XML的标记语言、应用程序及协议进行良好的交互工作。（5）XHTML是Web标准家族的一部分，能很好在无线设备等其它用户代理上。（6）在网站设计方面，XHTML可助你去掉表现层代码的恶习，帮助你养成标记校验来测试页面工作的习惯。什么是DHTML？DHTML只是一种制作网页的概念，实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范，DHTML只是一种将目前已有的网页技术、语言标准整和运用，制作出能在下载后仍然能实时变换页面元素

5、效果的网页的设计概念。DHTML大致包含以下网页技术、标准或规范HTML4.0网页的基础语言标准。CSSL注意！不是CSS，是CSSL，它是Clent-SidescrptingLanguage的缩写，译作“客户端脚本语言”，主要有Javascrpt(JS)，VBscrpt(VBS)，Jscrpt。Netscape主要支持JS，IE主要支持JS，VBS和Jscrpt。DOMDocumentObjectModel的缩写，译作“文档对象模型”，是W3C日前极力推广的web技术标准之一，它将网页中的内容抽象成对象，每个对象拥有各自的属性(Properties)、方法(Method)和事件(Events

6、)，这些都可以通过上面讲到的CSSL来进行控制。IE和NS的对象模型都是以W3C的公布的DOM为基准，加上自己的ExtendedObject(扩展对象)来生成的。CSS这才是CascadingStyleSheets(层叠样式表单)的缩写，它是HTML的辅助设计规范，用来弥补HTML在排版上的所受的限制导致的不足，它是DOM的一部分。理论上说通过CSSL动态地改变CSS属性可以做出任何你想要的页面视觉效果。所以，简单地说，要实现DHTML，就是以HTML为基础，运用DOM将页面元素对象化，利用CSSL控制这些对象的CSS属性以达到网页的动态视觉效果。什么 是DIV？网页中的层；div和span都

7、是CSS里头的层，由全球广域网协会W3C的Positioning HTML Elements with Cascading Style Sheets（使用级联样式表确定HTML元素的定义）定义。DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。Internet Explorer和Netscape的浏览器都支持DIV标签。DIV和SPAN很多开发人员都把DIV元素同SPAN元素弄混淆了。尽管它们在特性上相同

8、，但是SPAN是用来定义内嵌内容而不是大块内容的。你可以对段落使用DIV标签，但是SPAN对于为段落内的一个或者多个字赋予特殊的特性很有用。DIV标签允许你分割一个Web页面，以此来进行格式化和演示。可以将它和可视性的技巧组合起来使用，用以分割页面的内容，并显示你所选择的内容。什么是CSS？CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通

9、常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。CSS解决什么问题？样式解决了一个普遍的问题 HTML 标签原本被设计为用于定义文档内容。通过使用 、 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。为了

10、解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。所有的主流浏览器均支持层叠样式表。 样式表极大地提高了工作效率样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的

11、任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地什么是XML？XML（Extensible Markup Language）即可扩展标记语言，它与HTML一样，都是SGML(Standard Generalized Markup Language,标准通用标记语言)。Xml是Internet环境中跨平台的，依赖于内容的技术，是当前处理结构化文档信息的有力工具。扩展标记语言XML是一种简单的数据存储语言，使用一系列简单的标记描述数据，而这些标记可以用方便的方式建立，虽然XML占用的空间比二进制数据要占用更多的空间，但XML极其简单易于掌握和使用。XML特性X

12、ML与Access,Oracle和SQL Server等数据库不同，数据库提供了更强有力的数据存储和分析能力，例如：数据索引、排序、查找、相关一致性等，XML仅仅是展示数据。事实上XML与其他数据表现形式最大的不同是：他极其简单。这是一个看上去有点琐细的优点，但正是这点使XML与众不同。 XML与HTML的设计区别是：XML是用来存储数据的，重在数据本身。而HTML是用来定义数据的，重在数据的显示模式。XML的简单使其易于在任何应用程序中读写数据，这使XML很快成为数据交换的唯一公共语言，虽然不同的应用软件也支持其它的数据交换格式，但不久之后他们都将支持XML，那就意味着程序可以更容易的与Wi

13、ndows、Mac OS, Linux以及其他平台下产生的信息结合，然后可以很容易加载XML数据到程序中并分析他，并以XML格式输出结果。为了使得SGML显得用户友好，XML重新定义了SGML的一些内部值和参数，去掉了大量的很少用到的功能，这些繁杂的功能使得SGML在设计网站时显得复杂化。XML保留了SGML的结构化功能，这样就使得网站设计者可以定义自己的文档类型，XML同时也推出一种新型文档类型，使得开发者也可以不必定义文档类型。 因为XML是W3C制定的，XML的标准化工作由W3C的XML工作组负责，该小组成员由来自各个地方和行业的专家组成，他们通过email交流对XML标准的意见，并提出

14、自己的看法 (/TR/WD-xml)。因为XML 是个公共格式， (它不专属于任何一家公司)，你不必担心XML技术会成为少数公司的盈利工具，XML不是一个依附于特定浏览器的语言什么是SHTML？SHTML不是HTML而是一种服务器API，shtml是服务器动态产成的html。虽然两者都是超文本格式,但shtml是一种用于SSI技术的文件。也就是ServerSideInclude-SSI服务器端包含指令。如果WebServer有SSI功能的话(大多数（尤其是基于Unix平台）的WEB服务器如NetscapeEnterpriseServer等均支持SSI命令)。会对shtml文件特殊招待。先扫一次

15、shtml文件看没有特殊的SSI指令现在。有就按WebServer设定规则解释SSI指令。解释完后跟一般html一起掉去客户端。SHTML使用SSI(ServerSideInclude)的html文件扩展名，SSI（ServerSideInclude)，通常称为服务器端嵌入或者叫服务器端包含，是一种类似于ASP的基于服务器的网页制作技术。SSI工作原理将内容发送到浏览器之前，可以使用“服务器端包含(SSI)”指令将文本、图形或应用程序信息包含到网页中。例如，可以使用SSI包含时间/日期戳、版权声明或供客户填写并返回的表单。对于在多个文件中重复出现的文本或图形，使用包含文件是一种简便的方法。将内

16、容存入一个包含文件中即可，而不必将内容输入所有文件。通过一个非常简单的语句即可调用包含文件，此语句指示Web服务器将内容插入适当网页。而且，使用包含文件时，对内容的所有更改只需在一个地方就能完成。因为包含SSI指令的文件要求特殊处理，所以必须为所有SSI文件赋予SSI文件扩展名。默认扩展名是.stm、.shtm和.shtmlWeb服务器在处理网页的同时处理SSI指令。当Web服务器遇到SSI指令时，直接将包含文件的内容插入HTML网页。如果“包含文件”中包含SSI指令，则同时插入此文件。除了用于包含文件的基本指令之外，还可以使用SSI指令插入文件的相关信息（如文件的大小）或者运行应用程序或shell命令。网站维护常常碰到的一个问题是，网站的结构已经固定，却为了更新一点内容而不得不重做一大批网页。SSI提供了一种简单、有效的方法来解决这一问题，它将一个网站的基本结构放在几个简单的HTML文件中（模板），以后我们