设计web页面(龙流平整理).docVIP

设计Web页面 前两章创建的页面看起来相当单调而无趣。那是因为它们缺少样式化信息，默认应用浏览器的标准布局。要把页面打扮得漂漂亮亮的，需要用某种办法来改变它们在浏览器中的表现(presentation)。最常用的办法是使用CSS(Cascading Style Sheet，层叠样式表)语言。CSS是Web(包括ASP.NET Web页面)上用来格式化和设计信息的实际语言。使用CSS可以快速改变Web页面的外观。 虽然Visual Web Developer的早期版本缺少CSS方面的优秀工具，但是Visual Web Developer 2008大力支持CSS，它能把页面呈现得与它们最终出现在浏览器中的样子非常接近。这些新工具有助于可视化地创建CSS，使得页面的样式化更加容易，不需要知道或记得CSS的所有细枝末节。 本章主要内容有： 什么是CSS及需要CSS的原因 CSS语言简介及如何编写CSS 向ASP.NET页面和外部文件添加CSS代码的各种不同方式。 VWD提供的大量快速编写CSS的工具 要了解CSS在ASP.NET项目中的实用性和必要性，需要先了解HTML的缺点。下一节将指出纯HTML表现存在的问题，以及CSS如何克服这些问题。 3.1 需要CSS的原因 在Internet出现伊始，Web页面主要由文本和图像组成。文本是用纯HTML格式化的，用b这样的标记使文本加粗，并用font标记影响字体、大小和颜色。Web开发人员很快就发现他们需要更强大的功能来格式化页面，因此诞生了CSS，以弥补HTML在样式方面的缺陷。 3.1.1 HTML格式化的问题 用HTML进行格式化的问题之一是它提供的样式化页面的选项很有限。可以用i、b及font这样的标记来修改文本的外观，用bgcolor这样的属性来修改HTML元素的背景颜色。还有几个属性用来修改链接出现在页面中的方式。 显然，这个功能集不足以创建符合用户的期望与需求的生动Web页面。 HTML影响Web页面构建的另一个问题是样式化信息应用到页面的方式。在设计时，HTML会强制要求在HTML文档中嵌入格式化信息，因此以后难以对设计进行重用或修改。如下面这个示例： pfont face=Arial color=red size=+1 This is red text, in an Arial type face and slightly larger than the default text /font/p 这段代码的问题在于实际数据与表现(在本例中是用font标记格式化的文本)混淆在一起。理想情况下，这两者应当分开，以便各自能轻松地修改而不会互相影响。 假设在Web站点的各个页面中用p和font标记作为第一段。很显然，这样的代码难以维护。在决定把字体的颜色从红色改为深灰色时，会发生什么状况呢？或者，如果公司标识规定用Verdana字体而不是用Arial字体，会出现什么情况呢？结论是在作必要的修改时就要访问站点的每个页面。 除了维护性问题外，HTML格式化的另一个问题是：在用户的浏览器中，不能轻松地在运行时修改格式。至于上面的代码片段中的HTML，没有什么方式可以让访问者修改字体大小或颜色这样的属性，而对视觉有障碍的人来说常常有这样的要求。如果想给访问者提供另一种采用较大的字体和不同颜色的版本，就需要为原始页面创建一个副本，再进行必要的修改。 HTML格式化的最后一个问题是，页面中的所有附加标记大大增加了页面的大小。这样，当需要从站点中的各个页面下载信息时，下载和显示就会变慢。而且，当需要滚动HTML文件来查找需要的内容时，页面也会变得难以维护。 简言之，用HTML格式化存在以下这些问题： 它的有限功能集远远满足不了页面的需要。 数据与表现混合在相同的文件中。 HTML没法在浏览器中于运行时轻松地切换格式。 必需的格式化标记与属性使页面更大，因此加载和显示更慢。 幸运的是，CSS能解决所有这些问题。 3.1.2 CSS如何解决格式化问题 CSS几乎能在所有可能的方面格式化Web页面，它提供了一套丰富的选项，可以修改Web页面的各个细微方面，包括字体(大小、颜色、字体等)、颜色和背景色、围绕HTML元素的边框、元素在页面中的位置，还有其他很多方面。当今的所有主流浏览器基本都能接受CSS，因此它就是Web页面可视化表现的语言，而且在Web开发人员中非常流行。 CSS允许在外部文件中定义所有格式化信息，从而解决了数据与表现混合在一起的问题。然后，ASPX或HTML页面就能引用这些文件，浏览器会应用正确的样式。有了这样的分离，HTML文档中就仅含有要显示的内容，而CSS文件会定义显示方式。因而，可以修改或切换这两个文档之一，而让另一个文档保持不变。下一节将介绍它的内部工作机制。此外