CSS网站改版谈

网站改版工程终于竣工了。

此次改版有几大特点：内容的重组（增减归类），动态调用，全面CSS重构。改版中处处体现了以用户为中心的设计理念，如首页的数据库排行榜，多合一的检索窗口等。

CSS网站重构的全流程在阿捷（《网站重构》一书编译）的网站有完整的套餐，及其丰盛。而我这里谈的是个人的改版体会－－一些重构过程中出现的问题和总结的小经验。

网站从全静态转变为动态，要求CSS样式表和HTML的templete必须在.aspx为后缀的文件中实现。实践过程中也就不可避免的出现了－－

XHTML规则与.NET的冲突

1.DOCTYPE声明

最初制作的css（HTML)页面的DOCTYPE声明

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

是在代码页面的首行，在转换为.aspx文件时，.NET的声明往往会抢占首行的位置。

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="index.aspx.vb" Inherits="LibWeb3.index"%>

这样会导致本来设置页面紧靠上边的反而会无端出现一行空格。

2.规则关闭

所有的HTML规则都有开始和结束（以/结束）。除了必须成对出现的<body>和</body>、<p>和</p>等，没有成对出现的<br>、<img>要相应写为<br />、<img />。此外，<li>在未成对时也能正常运行，但是通过W3C验证时会报错。

3.样式表

页面对CSS样式表的使用有内嵌法（将样式表直接写在页面代码的head区）和外联法（将样式表写在一个独立的.css文件中，然后在head区加入调用语句），而外联法则可以采用link方式或者important方式。

<link rel="stylesheet" rev="stylesheet" href="css/style.css" type="text/css" media="all" />

<style type="text/css">@import url( temple-css/index-temp01.css ); </style>

当多个文件调用同一个css样式表时，只需加载一次，对反问者而言大大加快了页面打开的速度。所以尽量少的使用样式表的数量，也就是尽可能将所有页面的格式都由一个样式表控制。这样将样式表抽出，代码重构之后，页面大小一般降为原大小的1/3，而样式表的一次载入也加快了速度。

4.小写问题

XHTML对代码的大小写很敏感，所以要求代码必须小写。通过dreamweaver生成的属性代码有些会默认大写或首字母大写，而由.NET生成的代码一般全部都是大写，所以必须进行大小写转换。（在ultraedit里可以进行，但是转换区域要避开中文，否则会出现乱码，这也为重构工作增加了不小的工作量。）

5.“ ”问题

所有样式属性必须在“”之中，如经常用到的有链接图片属性

<a href="http://www.thinkjam.org/mercury"><img scr="../imgs/001.jpg" width="400" height="300" border="0" /></a>

一般属性中的单位都默认为px（有些CSS属性，如lineheight等无单位的数值是比数，lineheight：1.5；是1.5倍行距）。

6.图片的背景化

用阿捷的话叫“辅助图片一律用背景处理”。也就是除了具有链接属性的图片之外，其他图片尽量放在背景中，可以通过调节div的margin，padding控制图片与其上文字的关系。如h1，h2的背景样式等，如<li>列表的符号图片等。

这样做的原因有2点：

1.将表现与结构彻底相分离(参考阅读另一篇文章：《理解表现与结构相分离》)，用CSS控制所有的外观表现，便于改版。
2.使页面更具有易用性，更有亲和力。例如：盲人使用屏幕阅读机，用背景技术实现的图片就不会被朗读出来。

抛弃表格全面CSS重构网站是为了力求表现和结构相分离，在样式规划和布局中走了不少弯路，遇到许多问题，归结原因为学艺不精就上阵。奉上前车鉴希望对初学者有帮助。

div布局和样式规划

1.尽量简单的规划区块

一般的div布局将全页分为横向的三块，各块中再细分列，能两列的不要使用三列，列数的增加会令工作变得复杂，技术难度增大。

2.尽量少的使用div

CSS采用div布局就是用div嵌套（id属性）来确定区块的布局和位置，而对div属性的定义也最好只用于位置属性，嵌否则套越多区块和CSS都加倍复杂，控制最内层的样式的因素也随之增加，不利于调整和查错。一些其他规则也有区块划分的功能，如h1/2/3，p，li等。如这样的代码：
<div>
<div><h1>CSS重构</h1></div>
<div><p>重构的好处</p></div>
</div>

可以简化为：

<div>
<h1>CSS重构</h1>
<p>重构的好处</p>
</div>

省去了两个div区块，使页面结构更简单。

3.尽量少定义div的字体

div定义的字体样式不仅增加了代码量，还不利于修改和调整。建议最好通过定义普遍样式，如p，table，img，li，ul等，以及选用class类样式，和h1,h2,h3，而避免在div中定义字体。通常在网站改版前应该设计好页面的级数，标题样式的种类，链接样式等，当然在改版完之后再整理代码也是可以的，只是大费周章了。

4.尽量少使用绝对属性

精确定义布局的位置虽然严谨，但微小的调整和改动都会牵一发而动全身－－造成布局混乱，因此建议用relative和百分比（%）定义宽度和位置。一般网站设计的标题和文字是14/12px，全文字的页面，字体会相应增大为16/18px。CSS规则建议使用small，middle属性定义文字，这样文字大小就可以根据用户的需求随浏览器的设置变化。但是变大的文字往往会打乱设计方案（撑破区域），因此慎重选择之外还需权衡。

5.注意导航菜单的兼容性

一般导航菜单使用js或者active技术，而有些在firefox中无法正常使用。破坏其他整体页面布局事小，造成功能的无法使用就得不偿失了。我本来使用DHTMLMenu制作了非常绚的横向导航菜单，但在firefox中无法显示，还是弃之不用了。虽然非IE的用户占不到总数的1%，但在可达到的条件下也应该考虑到他们，至少以不影响正常阅读为标准。

此外，改版还考虑到显示器大小，尽量避免横向滚动条，在开始CSS重构前规划好字体和区块的属性，从存储格式上入手减小背景图片的大小，保留图片的完整性方便div布局等。

除了以上经验，还遇到一些个别性问题，未必具有普遍意义，希望对“同惑”的朋友有参考价值。

个案问题

1.背景左右长度不同造成背景缺失

分别给left和right的div设定背景边线，则内容短的一边背景就会缺失；在left和right外层的div里将短边（left）的背景放入（居左），则右边长时保证左边的背景和右边一样，但少又出现少数左边内容长而右边内容短的情况，右边背景缺失，解决办法在left和right外再多套一个无其他多余属性的div，设置右侧的背景就可以了。

2.自动换行问题

可以设置右侧边距，padding-right:40px;来确定div内文字换行的位置。中文字符系统会默认分段，英文字符则以空格为截断标准，有些长串无空格的英文标题会使右边距换行无效。如进行数据库字母索引设置时，系统默认将前26字母和中文愤慨，无端撑大div宽度，造成布局的新问题。解决方法，统一样式在每个字母之后加空格，自动截断就有效了。

3.title属性

数据库排行榜调用了数据库简称，我们利用title属性在鼠标移到简称之上时可以显示全称，学科类别，数据年限等数据库的信息。但是发现有些信息显示不完整。经查是由于后台提交中出现的空格令系统自动截断。解决方法：尽量不要使用空格，应为全称的空格建议 用下划线“_”替代。

展望

网站改来改去，以用为本的方向不变。“网络的软件化，软件的网络化”－－让人看到了网络的发展方向。我们的网站设计就是要向做软件一样－－从UI到功能，从人体工学到使用习惯，每一个原则都是约束指导我们做的更好的准绳。接下来，个人认为网站的重点就是接口，和汇文系统，和邮件推送，和新书荐购，和期刊导航，以及和各个数据库。

笑笑同学认为我们网站还是大有前途的－－归结为资源的网络化，用户的网络化，必须增加服务网络化的砝码，因此网络服务，用户研究，个性化都是可以深入的主题。当然服务的网络化并不只是单纯的硬件投入加大。就象以前打比方说“网站像沟通知识和读者的桥梁”，现在看来远远不够，桥是死的，用户不过桥知识无法送达，而我们要思考的应该是“如何将知识送交到用户的手中”，叫“网络快递”更合适而保证服务的根本就在于技术，要通过技术来突破屏障，令所能想到的服务都可以顺利实现－－或许这才是技术服务的根本所在吧。

记得老槐那篇RSS自恋的文章提到在CNKI里用RSS关键词订阅，听竞争情报讲座时就觉得这个大有所用（只是一些网站未必开通此服务），而我们图书馆网站是否可以这些各家数据库的RSS关键词统一到我们这里订阅－－相当于在网站订阅一个关键词，网站有转将这个关键词在所有相关数据库采取了订阅－－那么用户只需动动手指点击订阅，来自各个数据库的他需要的知识就通过我们网站源源不断的定期传发过去。