规范Web页面设计和排版

文档状态：文档编号：规范-web页面设计和排版 Draft Released Modifing编 撰：编撰日期：2006-5-21保密级别：机密文档版本：2.0.0版 本 历 史日期版本说明作者2006-04-081.0.0初稿2006-04-301.0.0咨询公司审计通过，正式发布2006-05-212.0.0增加系统集成项目过程目 录1.引言41.1目的41.2适用范围42.规范描述42.1 基础42.2主要技术52.2.1使用层叠样式表52.2.2使用表格控制布局6Web页面设计和排版规范1. 引言1.1 目的为了使各系统Web程序具有统一的排版风格，开发过程中减少出错，避免重复性工作发生，便于项目组成员信息交流，有利于系统维护，特制定此规范，此规范需要前台组成员共同遵守，协同改进。1.2 适用范围本规范适用与公司所有软件类B/S结构项目。本规范在执行过程当中，如果出现冲突或不足的地方，将及时修改并更新为新的版本；但是在新的版本出现之前，必须执行旧的版本的约定。2. 规范描述2.1 基础文字使用css样式表指定文字的样式；字体一般为宋体，默认大小12px；标题为黑体；文本左对齐，数字右对齐，长度一致的文字居中；标题居中；若文字在表格中，居左或居右时在文字前或后增加一个空格。图片一般我们把有较为复杂颜色变化的小块优化为jpeg，而把那种只有单纯色块的卡通画式的小块优化为gif。表格表格嵌套层次要尽量少，应该尽量避免将所有元素嵌套在一个表格里。原因：浏览器在读取网页html原代码时，是读完整个table才将它显示出来的。如果一个大表格中含有多个子表格，必须等大表格读完，才能将子表格一起显示出来。超链接链接文本的颜色最好用约定俗成的：未访问的，蓝色；点击过的，紫色或栗色。用户页面深度不能超过三层。显示尺寸一般分辨率在800x600的情况下，页面的显示尺寸为：780x428个象素；分辨率在640x480的情况下，页面的显示尺寸为:620X311个象素；分辨率在1024X768的情况下，页面的显示尺寸为：1007x600。2.2主要技术2.2.1使用层叠样式表2.2.1.1 CSS的作用1. 将格式与结构分离HTML只定义了网页的结构和各个标记的功能，而让浏览器自己决定网页中的各个元素对象应该以何种样式风格显示出来。 CSS通过将定义结构的部分与定义格式的部分分离便得网页制作者能够对Web页面的布局施加更多的控制HTML仍可以保持简单明了的原貌，CSS代码独立出来从另一角度控制页面的外观。2. 更容易控制页面的布局HTML标记虽然可以调整字号、生成表格边距、改变颜色等，但不能精确地控制行间距和字间距。然而，CSS却使的这些成为了现实。3. 可以制作出体积更小、下载速度现快的网页CSS是像HTML那样形式的文本。它不需要图像，不需要执行程序，不需要插件。这样可以减少表格标记及其它加大HTML体积的代码，减少图像用量，从而减小了文件尺寸。4. 可以更快更容易地维护和更新网页利用CSS可以使站点上所有的网页都指向一个单一的CSS文件，只要修改CSS文件中某一行，那么整个站点都会随之发生变动。2.2.1.2 CSS与HTML文档的四种结合方式1. 在HTML文档头部嵌入样式表单将CSS与HTML文档结合在一起的比较常用的方法就是嵌入样式表单即在头部标记的内嵌样式双标记之中来定义样式。例如： 2. 用HTML标记的style属性内联样式表单style属性可以应用于HTML文档中的除了basefont、param和script标记之外的任何body标记中（包括body本身）。因此，用HTML标记的style属性内联样式表单的具体做法就是：除了basefont、param和script标记之外，使任何一个内嵌于之间的HTML标记（包括body本身）的样式属性style被赋予任意数目的CSS声明作为其属性值，且要在作为CSS声明的相邻属性对之间用分号“；”隔开。其语法为： 下面是一个用HTML标记的style属性内联样式表单的例子: 把这段代码保存为Web文档后，这一行文字就变成成“红色”的了如果字体可用的话。 3. 使用HTML的link标记连接外部样式表单外部样式表单是一个单独存在的、扩展名一般为“.css”的文本文件，该文件中只包含有“选择符”和与之对应的“选择符声明”。引用外部样式表单的方法之一是使用HTML的link标记连接外部样式表单。具体做法就是在双标记之间通过为内嵌于其中的连接单标记中的超文本引用属性“href”赋值的方法调用外部样式表单。例如： /*URL是超链接的外部样式表单文件的路径*/ 4.使用CSS的import声明导入外部样式表单另一种引用外部样式表单的方法是使用CSS的import声明导入外部样式表单。具体做法是：在双标记之间使用CSS声明“import”把外部样式表单引入到HTML文档。例如： import URL； /*URL是导入的外部样式表单文件的路径*/ 注意：import声明行中最后的符号分号“；”是绝对不能缺少的！2.2.2使用表格控制布局表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。而且表格在定位图片和文本上比起用CSS更加方便。表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。2.2.2.1表格的基本用法l 基本用法. - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据)例如：1 2 3A B C 123ABCl table标签参数border 表格边框cellspacing 表元之间的空白距离cellpadding 表元内部的空白距离width 表格宽度（可以用%或者具体数据表示）height 表格高度例如：123ABC123ABCl 表格的对齐方式.表格内的文字对齐。语法： 其中#可以设定的参数有：left 横向居左center 横向居中right 横向居右top 纵向居顶middle纵向居中bottom 纵向居底例如：ABCABC2.表格在页面内的对齐。如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数： 其中#可以设定为left(居左)，right(居右)例如：123ABC这里的文字是和表格并排排放的 123ABC这里的文字是和表格并排排放的l 表格的嵌套表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理同样使用语句。例如： l 表格的色彩表格的色彩也在标签里设置，参数有：bgcolor 背景颜色bordercolor 边框颜色bordercolorlight 立体边框亮色bordercolordark 立体边框暗色语法为：其中RRGGBB分别为RGB三色的16进制数值例如：2.2.2.2使用框架控制布局它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。Frames最主要功用是分割您的视窗，使每个小视窗(frame)能显示不同的HTML文件。不同frame之间可以交换讯息与资料。例如:两个frames，第二个frame可显示工具列(toolbar)，第一个frame可显示普通HTML文件以下是此frame的写法:Frames 表示开几个framerows 将视窗分割成几列cols将视窗分割成几行可以用很多组的tags将视窗分割得更复杂。以下是Netsacpe所提到的一个范例: 上面这个例子产生了两行，而且第二行又分割成三列大小相等的空间。在第一个 tag中的50%，50%两项叁数是用来表是frame的大小。您可以给每个frame一个名字(name)。frame的名字在javascript语法中的地位非常重要。