规范Web页面设计和排版.docx

规范Web页面设计和排版.docx

《规范Web页面设计和排版.docx》由会员分享，可在线阅读，更多相关《规范Web页面设计和排版.docx（10页珍藏版）》请在冰点文库上搜索。

规范Web页面设计和排版

Web页面设计和排版

XXXX信息技术公司

文档状态：

文档编号：

规范-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页面设计和排版规范

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.1CSS的作用

1.将格式与结构分离

HTML只定义了网页的结构和各个标记的功能，而让浏览器自己决定网页中的各个元素对象应该以何种样式风格显示出来。

    CSS通过将定义结构的部分与定义格式的部分分离便得网页制作者能够对Web页面的布局施加更多的控制——HTML仍可以保持简单明了的原貌，CSS代码独立出来从另一角度控制页面的外观。

2.更容易控制页面的布局

HTML标记虽然可以调整字号、生成表格边距、改变颜色等，但不能精确地控制行间距和字间距。

然而，CSS却使的这些成为了现实。

3.可以制作出体积更小、下载速度现快的网页

CSS是像HTML那样形式的文本。

它不需要图像，不需要执行程序，不需要插件。

这样可以减少表格标记及其它加大HTML体积的代码，减少图像用量，从而减小了文件尺寸。

4.可以更快更容易地维护和更新网页

利用CSS可以使站点上所有的网页都指向一个单一的CSS文件，只要修改CSS文件中某一行，那么整个站点都会随之发生变动。

2.2.1.2CSS与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属性内联样式表单的例子:

red;font-family:

"宋体","timesnewrom">

把这段代码保存为Web文档后，这一行文字就变成成“红色”的了——如果字体可用的话。

3.使用HTML的link标记连接外部样式表单

外部样式表单是一个单独存在的、扩展名一般为“.css”的文本文件，该文件中只包含有“选择符”和与之对应的“选择符声明”。

引用外部样式表单的方法之一是——使用HTML的link标记连接外部样式表单。

具体做法就是在┄双标记之间通过为内嵌于其中的连接单标记中的超文本引用属性“href”赋值的方法调用外部样式表单。

例如：

/*URL是超链接的外部样式表单文件的路径*/

4.使用CSS的@import声明导入外部样式表单

另一种引用外部样式表单的方法是——使用CSS的@import声明导入外部样式表单。

具体做法是：

在双标记之间使用CSS声明“@import”把外部样式表单引入到HTML文档。

例如：

@importURL；/*URL是导入的外部样式表单文件的路径*/

注意：

@import声明行中最后的符号——分号“；”是绝对不能缺少的！

　2.2.2使用表格控制布局

表格布局的优势在于它能对不同对象加以处理，而又不用担心不同对象之间的影响。

而且表格在定位图片和文本上比起用CSS更加方便。

表格布局唯一的缺点是，当你用了过多表格时，页面下载速度受到影响。

2.2.2.1表格的基本用法

●基本用法

-定义表行

-定义表头

-定义表元（表格的具体数据）

例如：

1

   2

   3 

A

   B

   C 

1

2

3

A

B

C

●table标签参数

border           表格边框

cellspacing 表元之间的空白距离

cellpadding 表元内部的空白距离

width          表格宽度（可以用%或者具体数据表示）

height           表格高度

例如：

123

ABC 

1

2

3

A

B

C

●表格的对齐方式

　　１.表格内的文字对齐。

　　语法：

其中#可以设定的参数有：

left   横向居左

center 横向居中

right  横向居右

top    纵向居顶

middle　纵向居中

bottom 纵向居底

例如：

A

B

C

A

B

C

　　2.表格在页面内的对齐。

　　如果你需要与表格并排放一段文字，就需要用到table标签的另一个个参数：

　　其中#可以设定为left（居左），right（居右）

　　例如：

123

ABC

这里的文字

是和表格并排排放的

1

2

3

A

B

C

这里的文字是和表格并排排放的

●表格的嵌套

　　表格嵌套就是在表格里插入表格，嵌套的排版方法就是将要插入的表格当做文字来处理同样使用语句。

　　例如：

●表格的色彩

　　表格的色彩也在

bgcolor          背景颜色

bordercolor      边框颜色

bordercolorlight 立体边框亮色

bordercolordark  立体边框暗色 

　　语法为：

其中RRGGBB分别为RGB三色的16进制数值

　　例如：

borderColorDark=#ffffffborderColorLight=#000000cellPadding=5 

cellSpacing=0bordercolorlight="#000000">

2.2.2.2使用框架控制布局

　它如同表格布局一样，把不同对象放置到不同页面加以处理，因为框架可以取消边框，所以一般来说不影响整体美观。

Frames最主要功用是"分割"您的视窗，使每个"小视窗"（frame）能显示不同的HTML文件。

不同frame之间可以交换讯息与资料。

例如:

两个frames，第二个frame可显示工具列（toolbar），第一个frame可显示普通HTML文件

以下是此frame的写法:

表示开几个frame

rows将视窗分割成几列

cols将视窗分割成几行

可以用很多组的tags将视窗分割得更复杂。

以下是Netsacpe所提到的一个范例:

上面这个例子产生了两行，而且第二行又分割成三列大小相等的空间。

在第一个tag中的50%，50%两项叁数是用来表是frame的大小。

您可以给每个frame一个"名字"（name）。

frame的名字在javascript语法中的地位非常重要。

.