2.6.其它CSS文件的引入

【规则内容】可以将多个CSS文件引入至一个CSS文件中。

【补充说明】代码格式：

@import"name.css"；

【示例内容】无

2.7.属性缩写的规则

通过使用CSS属性缩写以及其他的一些简单技巧，可以在很大程度上减少样式表的大小，从而提高页面加载样式文件的速度，进一步提高网站运行速度。

【规则内容】部分CSS样式定义可以采用缩写格式。

【补充说明】有关CSS属性缩写详细内容请参阅：

“附件\附件：

CSS常用缩写语法.doc”。

【示例内容】无

2.8.Hack使用规则

由于不同的浏览器，比如IE6,IE7,Firefox等，对CSS的解析显示不一样，因此会导致生成的页面效果不一样，得不到我们所需要的页面效果。

这个针对不同的浏览器写不同的CSScode的过程，就叫CSShack,也叫写CSShack。

【规则内容】可以针对不同的浏览器，分别编写不同的的CSS代码。

【补充说明】有关CSSHack详细内容请参阅：

“附件\附件：

CSSHack汇总.doc”。

【示例内容】无

2.9.DIV+CSS中常见问题

在制作过程中经常会遇到一些问题，我把其中所知的问题汇总一起，方便大家迅速查看，从而能更高效得解决问题，进一步提高工作效率。

【规则内容】汇总了一些DIV制作时常见问题及解决方案。

【补充说明】详细情况请参阅“附件\附件：

CSS制作常见问题汇总.doc”文件。

【示例内容】无

2.10.CSS文件压缩优化的方法

采用DIV+CSS方法制作页面时，一个普遍的问题就是CSS文件增大，但一些定义又是必不可少的，针对以上问题，建议大家可以采用压缩工具进行有效的压缩。

【规则内容】通过压缩的方法降低CSS文件的大小。

【补充说明】

✓在线压缩工具：

✓在线编辑工具：

（所见即所得）

【示例内容】无

2.11.站点文件的管理

【规则内容】使用工具软件Dreamweaver进行站点管理

【补充说明】可以对文件或目录进行添加、删除、改名、移动，在操作中能自动更新链接；同

时也可以对框架、模板、库文件、图片、动画等进行管理。

【示例内容】

2.12.Frame框架的使用

【规则内容】使用框架（Frame），可以在浏览器窗口同时显示多个网页

【补充说明】

✓框架是由框架组和子框架组成。

框架组只有一个，子框架可以有多个；

✓每个Frame里设定一个网页，每个Frame里的网页相互独立。

【示例内容】应用场景：

社区网站、后台管理网站

2.13.Templates模板的使用

【规则内容】多个页面的整体架构相同，但只有部分内容不同时，可将相同部分内容做成

Templates模板，然后在多个页面中重复使用。

【补充说明】

✓模板的应用能大大提高网站维护的效率，因为更新模板时，能使所有应用该模板的页面同时自动更新。

【示例内容】中小型企业网站可采用模板形式。

2.14.Library库文件的使用

【规则内容】多个页面中少部分内容相同时，可将相同的部分做成库文件，然后在多个页面中

重复使用。

【补充说明】

✓Library库被设计用来使重复性的工作能更快、更容易并尽可能地无差错完成；

✓任何网页中的元素，无论文本还是图形均可以做为库元素，用来放置在同一个站点内的任何页面中。

【示例内容】菜单、翻页等页面中重复性高的内容采用库文件形式。

2.15.超级连接定义

【规则内容】在制作图象或文本超级连接时，尽可能地使用相对超级链接。

【补充说明】

✓站点内链接采用相对超级链接，这样做网页的可移植性比较强；

✓站点外内容采用绝对路径。

比如：

友情链接

✓LOGO可以采用绝对路径或相对路径。

【示例内容】无

2.16.图片的应用格式

不超过256色的保存为GIF

【规则内容】图片要采用GIF和JPG格式

【补充说明】

GIF格式

✓GIF（GraphicsInterchangeFormat）图像互换格式

✓优点：

256色值以内的图片，字节数可以压缩到最小、图像像素低、支持动画格式、支持透明图像，同时已经得到所有主流浏览器的支持。

✓应用场景：

图像色彩不丰富，其色值不超过256以内的图片，例：

单色LOGO、单色的广告条等图片。

✓注意：

压缩算法是有损压缩，会造成图像画面失真；不适合超过256色的色彩图像。

JPG格式

超过256色的保存为JPG

✓JPG（JointPhotographicExpertsGroupFileInterchangeFormat）联合图像专家组文件交换格式

✓优点：

超过256色值的图片，压缩比高、图片字节数小、图像质量高，同时得到所有主流浏览器的支持。

✓应用场景：

图像色彩丰富，其色值超过256的图片，例：

绚丽多彩的照片、丰富的页面插图、渐变色的图片等。

注意：

把握好图片质量和图片字节大小之间的平衡,通常图片质量为80%比较合适。

以上图片格式为页面常用的格式，要了解其它图片格式，请参阅“附件\附件：

XHTML文件图片应用格式.doc”文档。

【示例内容】无

2.17.主题类的图片切割

【规则内容】主题类的图片色彩最丰富，较难切割，所以尽量在不破坏其图片的情况下进行处理。

【补充说明】无

【示例内容】

如下图所示：

切割方法：

✓将图片分三段，以白线分割为界，分为左、中、右三部分；

✓左、中部分切割为JPG格式图片；

✓右部分图片较有规律性，按照纹理可切成一小块图作背景图平铺使用。

2.18.标题类的图片切割

【规则内容】标题类的图片切割时，将展示区域和操作区域分开切割。

【补充说明】无

【示例内容】

如下图所示：

切割方法：

✓

展示区域为：

✓

操作区域为：

✓下面的灰色横线可以用颜色代码进行单独定义。

2.19.背景类图片切割

【规则内容】有规律的背景图片切割时，依纹理切割成较小的图片来使用。

【补充说明】

有规律的图片：

根据其图片纹理切割成较小的GIF格式的图片，进行平铺使用。

整体一张图片：

按照需要进行切割，确实需要全图作背景时要将图片的字节数压缩至最小来使用。

【示例内容】无

2.20.

图标类的图片切割

【规则内容】有规律较密集的图标

【补充说明】无

【示例内容】

标题图标类的图片，可以将小图全部切割成一张GIF格式的图，以减少图片下载次数，然后利用css背景定位的方法来使用这张图片。

2.21.圆角矩形类的图片切割

【规则内容】对于颜色不超过256色的比较规则的矩形图，当长和高都需要扩展的时候可以采

用九宫格的方法进行切割。

【补充说明】无

【示例内容】示例图片样式：

切割方法：

✓采用九宫格形式来切割图片；

✓将圆角单独切割使用，不可以平铺；

✓X轴规则图，取宽1px的图作为背景图平铺使用；

✓Y轴规则图，取高1px的图作为背景图平铺使用。

2.22.渐变效果类的图片切割

【规则内容】对于渐变效果的图片，需要扩展的时时候，可以采用1像素高或宽的图

做为背景图平铺使用。

【补充说明】无

【示例内容】切割方法：

✓X轴重复时，取宽1px的图作为背景图平铺使用；

✓Y轴重复时，取高1px的图作为背景图平铺使用。

2.23.Flash制作方法注意事项

Flash是一种交互式矢量多媒体技术，因其采用向量运算﹙VectorGraphics﹚的方式生成图像，所以制作出来的影片占用存储空间比较小。

【规则内容】

✓在规划制作阶段就要明确Flash文件对搜索引擎友好问题；

✓在制作中删除一些没有用到的元件及图片；

✓保证导入的图片质量的情况下，图片大小尽量控制在15K以内；

✓声音要压缩至10K以内；

✓保持桢动作的连续；

✓整个Flash文件控制在30K以内。

【补充说明】

✓Flash优化工具——FlashOptimizer

✓Flash制作过程中的问题汇总，详细情况请参阅“附件\附件：

Flash制作常见问题汇总.doc”。

【示例内容】应用场景：

✓Banner广告条：

可以用来展示简短的企业标语、产品介绍等；

✓企业宣传画：

可以用来制作较大型的企业文件宣传品；

✓导航条：

页面起导引作用的部分，一般在页面的顶部；

✓菜单条：

可用将菜单制作成可伸缩、隐藏等效果；

✓演示案例：

将案例制作成动画进行操作演示；

✓多媒体播放器：

可用来制作播放器，现在WEB上已很多采用此形式。

2.24.搜索引擎优化（SEO）

2.24.1.站点外的SEO

SEO是SearchEngineOptimization的缩写，用英文描述是tousesometechnicstomakeyourwebsiteinthetopplacesinSearchEnginewhensomebodyisusingSearchEnginetofindsomething，翻译成中文就是“搜索引擎优化”，一般可简称为搜索优化。

【规则内容】

✓提高自身站点内容质量

✓登记在分类目录网站中

✓互相交换站点链接

【补充说明】无

【示例内容】无

2.24.2.站点内的SEO

【规则内容】

✓站点结构设计：

搜索引擎更喜欢有好的网页结构，无误的代码和明确导航的站点；

✓在元标签（meta标签）放入关键词，密度最好在5-20%之间；

✓有规律的更新页面内容；

✓良好的友情链接；

✓明智的选择域名，尽量包括关键词；

✓写适宜长度的文章，太短的文章不能获得较高的排名，同时避免内容的重复；

✓目录的数量越多，搜索引擎搜索的也就越全面

✓将站点提交到搜索引擎，更快的方法还是得到已经被搜索引擎收录的站点的链接；

✓关键词应该出现在网页标题标签里面；

✓URL里面有关键词，即目录名文件名可以放上一些关键词；

✓在网页导出链接的链接文字中包含关键词；

✓图像ALT标签可以放入关键词；

✓整个文章中都要包含关键词，但最好在第一段第一句话就放入。

✓可以自己进行页面评测，详细内容请见“附录：

SEO自我检测.doc”

【补充说明】无

【示例内容】无

3.意见反馈

在使用过程中，如果遇到问题或有任何的意见、建议可按以下方式联系规范编写人员，我们会对您的问题以及意见、建议做出及时的反馈。

UE研究与设计中心界面标准部

郭福恩电话：

58022727-719E-mail：

guofuen@fuen2005@（MSN）

邓国梁电话：

58022727-348E-mail：

dengguoliang@dgl0816@（MSN）