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

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