《规范-Web页面设计和排版.docVIP

文档状态： 文档编号： 规范-web页面设计和排版 [ ] Draft [√] Released [ ] Modifing 编 撰： 编撰日期： 2006-5-21 保密级别： 机密 文档版本： 2.0.0  版 本 历 史 日期 版本 说明 作者 2006-04-08 1.0.0 初稿 2006-04-30 1.0.0 咨询公司审计通过，正式发布 2006-05-21 2.0.0 增加系统集成项目过程 目 录 1. 引言 4 1.1 目的 4 1.2 适用范围 4 2. 规范描述 4 2.1 基础 4 2.2主要技术 5 2.2.1使用层叠样式表 5 2.2.2使用表格控制布局 6 Web页面设计和排版规范 引言 目的 为了使各系统Web程序具有统一的排版风格，开发过程中减少出错，避免重复性工作发生，便于项目组成员信息交流，有利于系统维护，特制定此规范，此规范需要前台组成员共同遵守，协同改进。 适用范围 本规范适用与公司所有软件类B/S结构项目。本规范在执行过程当中，如果出现冲突或不足的地方，将及时修改并更新为新的版本；但是在新的版本出现之前，必须执行旧的版本的约定。 规范描述 2.1 基础 文字 使用css样式表指定文字的样式； 字体一般为宋体，默认大小12px；标题为黑体； 文本左对齐，数字右对齐，长度一致的文字居中；标题居中； 若文字在表格中，居左或居右时在文字前或后增加一个空格。 图片 一般我们把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优化为gif。 表格 表格嵌套层次要尽量少，应该尽量避免将所有元素嵌套在一个表格里。 原因：浏览器在读取网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。 超链接 链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。 用户页面深度不能超过三层。 显示尺寸 一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。 2.2主要技术 2.2.1使用层叠样式表 CSS的作用 将格式与结构分离HTML只定义了网页的结构和各个标记的功能，而让浏览器自己决定网页中的各个元素对象应该以何种样式风格显示出来。????CSS通过将定义结构的部分与定义格式的部分分离便得网页制作者能够对Web页面的布局施加更多的控制——HTML仍可以保持简单明了的原貌，CSS代码独立出来从另一角度控制页面的外观。更容易控制页面的布局HTML标记虽然可以调整字号、生成表格边距、改变颜色等，但不能精确地控制行间距和字间距。然而，CSS却使的这些成为了现实。可以制作出体积更小、下载速度现快的网页CSS是像HTML那样形式的文本。它不需要图像，不需要执行程序，不需要插件。这样可以减少表格标记及其它加大HTML体积的代码，减少图像用量，从而减小了文件尺寸。可以更快更容易地维护和更新网页利用CSS可以使站点上所有的网页都指向一个单一的CSS文件，只要修改CSS文件中某一行，那么整个站点都会随之发生变动。 html head style type=text/css !-- body{color:black;font-size:10pt;text-indent:0.8in} h1{color:red;font-size:15pt;text-align:center} p.strong{font-size:22pt;font-height:bold;text-align:center} .note{font-size:small;color:red} #www{color:fuchsia;font-size:22pt} -- /style /head /html 用HTML标记的style属性内联样式表单 style属性可以应用于HTML文档中的除了basefont、param和script标记之外的任何body标记中（包括body本身）。因此，用HTML标记的style属性内联样式