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

WebWeb 页面设计和排版页面设计和排版 XXXXXXXX 信息技术公司信息技术公司 文档状态 文档编号 规范 web 页 面设计和排 版 编 撰 编撰日期 2006 5 21 保密级别 机密 Draft Released Modifing 文档版本 2 0 0 版版 本本 历历 史史 日期日期版本版本说明说明作者作者 2006 04 081 0 0 初稿 2006 04 301 0 0 咨询公司审计通过 正式发布 2006 05 212 0 0 增加系统集成项目过程 目目 录录 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 页面设计和排版规范页面设计和排版规范 1 1 引言引言 1 11 1 目的目的 为了使各系统 Web 程序具有统一的排版风格 开发过程中减少出错 避免重复性工作发生 便于 项目组成员信息交流 有利于系统维护 特制定此规范 此规范需要前台组成员共同遵守 协同改进 1 21 2 适用范围适用范围 本规范适用与公司所有软件类 B S 结构项目 本规范在执行过程当中 如果出现冲突或不足的地 方 将及时修改并更新为新的版本 但是在新的版本出现之前 必须执行旧的版本的约定 2 2 规范描述规范描述 2 1 基础 文字文字 使用 css 样式表指定文字的样式 字体一般为宋体 默认大小 12px 标题为黑体 文本左对齐 数字右对齐 长度一致的文字居中 标题居中 若文字在表格中 居左或居右时在文字前或后增加一个空格 图片图片 一般我们把有较为复杂颜色变化的小块优化为 jpeg 而把那种只有单纯色块的卡通画式的小块优 化为 gif 表格表格 表格嵌套层次要尽量少 应该尽量避免将所有元素嵌套在一个表格里 原因 浏览器在读取网页 html 原代码时 是读完整个 table 才将它显示出来的 如果一个大表格 中含有多个子表格 必须等大表格读完 才能将子表格一起显示出来 超链接超链接 链接文本的颜色最好用约定俗成的 未访问的 蓝色 点击过的 紫色或栗色 用户页面深度不能超过三层 显示尺寸显示尺寸 一般分辨率在 800 x600 的情况下 页面的显示尺寸为 780 x428 个象素 分辨率在 640 x480 的情 况下 页面的显示尺寸为 620X311 个象素 分辨率在 1024X768 的情况下 页面的显示尺寸为 1007x600 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 属性内联样式表单属性内联样式表单 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 的的 import import 声明导入外部样式表单声明导入外部样式表单 另一种引用外部样式表单的方法是 使用 CSS 的 import 声明导入外部样式表单 具体做法是 在 双标记之间使用 CSS 声明 import 把外部样式表单引入到 HTML 文档 例 如 import URL URL 是导入的外部样式表单文件的路径 注意 注意 import 声明行中最后的符号 分号 是绝对不能缺少的 2 2 22 2 2 使用表格控制布局使用表格控制布局 表格布局的优势在于它能对不同对象加以处理 而又不用担心不同对象之间的影响 而且表格在 定位图片和文本上比起用 CSS 更加方便 表格布局唯一的缺点是 当你用了过多表格时 页面下 载速度受到影响 2 2 2 12 2 2 1 表格的基本用法表格的基本用法 基本用法 定义表格 定义表行 定义表头 定义表元 表格的具体数据 例如 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 居右 例如 123 ABC 这里的文字 是和表格并排排放的 这里的文字是和表格并排排放的 表格的嵌套 表格嵌套就是在表格里插入表格 嵌套的排版方法就是将要插入的表格当做文字来处理 同样使用语句 1 12 23 3 ABC 例如 表格的色彩 表格的色彩也在标签里设置 参数有 bgcolor 背景颜色 bordercolor 边框颜色 bordercolorlight 立体边框亮色 bordercolordark 立体边框暗色 语法为 其中 RRGGBB 分别为 RGB 三色的 16 进制数值 例如 2 2 2 22 2 2 2 使用框架控制布局使用框架控制布局 它如同表格布局一样 把不同对象放置到不同页面加以处理 因为框架可以取消边框 所以一 般来说不影响整体美观 Frames 最主要功用是 分割 您的视窗 使每个 小视窗 frame 能显示不同的 HTML 文件 不同 frame 之间可以交换讯息与资料 例如 两个 frames 第二个 frame 可显示工具列 toolbar 第一个 frame 可显示普通 HTML 文件 以下是此 frame 的写法 Frames 表示开几个 frame rows 将视