网页设计规范.doc_咨信网zixin.com.cn

资源描述

网站制作 Apple QQ:345374621 网页设计规范参考总论 2 一、目录结构规范 2 1. 网站目录划分 2 2. 多级目录 2 3. 目录、文件的命名规范 2 二、文件命名原则 2 1. 命名原则的指导思想 2 2. 路径/文件名设定 3 3. 各路径下的开始文件 3 4. html 文件的命名原则 3 5. 图片的命名原则 3 三、一般原则 4 1. 表格问题 4 2. 首行缩进 4 3. 图片 4 4. 字号 4 5. 中英文混排时 4 6. 行距 4 7. 网站中的路径 5 四、代码编写规范 5 1. 首页head区代码规范 5 2. 页面内容部分代码规范 5 3. CSS 文件的格式样例代码 6 4. CSS的命名规范及部分简写说明 6 5. CSS和JS尽量采取外部调用 7 总论参考网上的一些文章和部分门户网站规范，结合用户浏览习惯以及实际策划、设计、使用中的经验，制订了《网站设计规范参考》，本规范既是一个开发规范，也是一个脚本语言参考，本规范并不是一个一成不变的必须严格遵守的条文，特殊情况下要灵活运用，做一定的变通。但是，请大家千万不要随意更改规范。如果有任何问题，请及时与我联系，我会及时更改本规范的相关代码样例和文档。一、目录结构规范 1. 网站目录划分在网站根目录中开设images 、js 、css、temp子目录 ☆ images目录中放不同栏目的页面都要用到的公共图片，例如公司的标志、banner 条、菜单、按钮等等； ☆ css 子目录中放css文件，如果站点模板多尽量分成多个css文件调用； ☆ js 子目录中一般放javascript文件； ☆ temp 子目录放客户提供的各种文字图片等等原始资料。temp 目录中的文件往往会比较多，建议以时间为名称开设目录，将客户陆续提供的资料归类整理。 ☆ 广告、交换链接、banner等图片保存到images下adv目录 2. 多级目录在根目录中原则上应该按照首页的栏目结构，给每一个栏目开设一个目录，根据需要在每一个栏目的目录中开设一个images 和media 的子目录用以放置此栏目专有的图片和多媒体文件，如果这个栏目的内容特别多，又分出很多下级栏目，可以相应的再开设其他目录。 3. 目录、文件的命名规范除非有特殊情况，目录、文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文为指导，尽量避免用拼音命名。二、文件命名原则 1. 命名原则的指导思想命名原则的指导思想是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。 2. 路径/文件名设定路径/文件名称需与栏目菜单名称具有相关性。一律采用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；目录的命名请尽量以英文翻译为优先，尽量避免使用拼音作为目录名称 3. 各路径下的开始文件各路径下的开始文件，命名为index.* 静态文件为index.html，动态文件为 index.asp,index.aspx,index.php,index.jsp 4. html 文件的命名原则下面以“新闻”（包含“国内新闻”和“国际新闻”）这个栏目来说明html 文件的命名原则： ☆ 在根目录下开设news目录 ☆ 第一条缺省新闻取名index.htm ☆ 所有属于“国内新闻”的新闻依次取名为：china_1.htm, china_2.htm, … ☆ 所有属于“国际新闻”的新闻依次取名为：internation_1.htm, internation _2.htm, … ☆ 如果文件的数量是两位数，请将前九个文件命名为：china_01.htm, china_02.htm 以保证所有的文件能够在文件夹中正确排序。 ☆需定期更新的页面文件或文本采用：名称缩写＋(年份)＋月份＋日期＋序号，如： news081508.* 5. 图片的命名原则 ☆ 名称分为头尾两两部分，用下划线隔开。 ☆ 头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。 ☆ 一般来说: 放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner 标志性的图片我们取名为：logo 在页面上位置不固定并且带有链接的小图片我们取名为button 在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu 装饰用的照片我们取名：pic 不带链接表示标题的图片我们取名：title 依照此原则类推。 ☆ 尾部分用来表示图片的具体含义。 ☆ 样例如下：banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg 三、一般原则 1. 表格问题在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 <colspan> <rowspan> 两个标记。一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 <tbody>标记，以便能够使这个大表格分块显示。 2. 首行缩进排版中我们经常会遇到需要进行首行缩进的处理，不要使用空格或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记，注意，请不要省略 </p> 结束标记。 3. 图片采用gif,jpg格式，每幅图片要有本图片的说明文字(alt=””)，这样如果图片不能正常显示，也可知道图片处代表什么意思。原则上，禁止用 <img width=? height=?> 来人为干预图片显示的尺寸，而且建议 <img> 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 <img>附上 width 和 height 属性。 4. 字号所有的字号都应该用样式表来实现，尽量不要在页面中出现 <font size=?> 标记。 5. 中英文混排时中英文混排时，我们尽可能的将英文和数字定义为verdana 和arial 两种字体。 6. 行距建议用百分比来定义，常用的两个行距的值是line-height:140%到180%之间。四、代码编写规范我们应该有一个代码整体风格一致的概念，不同时期编写的代码风格应保持一致，以及同一个工作组中不同的开发人员编写的脚本风格保持一致以便随时查找、修改。 1. 首页head区代码规范 head区是指首页HTML代码的<head>和</head>之间的内容。 head区必须加入的标识 1）公司版权注释  2）网页显示字符集例如：简体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=gb2312"> 繁体中文：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=BIG5"> 英语：<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 3）网站简介 <META NAME="DESCRIPTION" CONTENT="网站的简介"> 4）搜索关键字 <META NAME="keywords" CONTENT="关键字1,关键字2..."> 5）网页的css规范 <LINK href="commom/style.css" rel="stylesheet" type="text/css"> 网页标题 <title>网页标题</title> 收藏夹图标 <link rel = "Shortcut Icon" href="favicon.ico"> 2. 页面内容部分代码规范在写 <table> 互相嵌套时，对于单独的一个<table>来说，<table><tr>对齐，<td> 缩进两个半角空格，<td> 中如果还有嵌套的表格，<table>也缩进两个半角空格，如果<td>中没有任何嵌套的表格，</td> 结束标记应该与 <td> 处于同一行，不要换行，如我们注意在源代码中不应有这样的代码： <td><img src=”../images/sample.gif”> </td> 而应该是这样的： <td><img src=”../images/sample.gif”></td> 这是因为浏览器认为换行相当于一个半角空格，以上不规范的写法相当于无意中增加一个半角空格，如果确实有必要增加一个半角空格，也应该这样写： <td><img src=”../images/sample.gif”> </td> 属于同一个级别的 <table> 一定是左首对齐的，另外不允许没有任何内容的空的单元格存在，高度大于等于12px 的单元格应该在 <td> 和 </td> 之间写一个空格。如果高度小于12px, 则应该在 <td> 和 </td> 之间插入一个1*1 大小的透明的gif 图片，这是因为某些浏览器认为空单元格非法而不会予以解释。如果代码顺序较乱，在DW3中可以通过command->apply souce formatting进行重新整理！ 3. CSS 文件的格式样例代码 <style type="text/css"> <!— p { text-indent: 2em; } body { font-family: "宋体"; font-size: 12px; color: #000000; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px} table { font-family: "宋体"; font-size: 12px; line-height: 20px; color: #000000} a:link { font-size: 12px; color: #FFFFFF; text-decoration: none} a:visited { font-size: 12px; color: #99FFFF; text-decoration: none} a:hover { font-size: 12px; color: #FF9900; text-decoration: none} a:active { font-size: 12px; color: #FF9900; text-decoration: none} a.1:link { font-size: 12px; color: #3366cc; text-decoration: none} a.1:visited { font-size: 12px; color: #3366cc; text-decoration: none} a.1:hover { font-size: 12px; color: #FF9900; text-decoration: none} a.1:active { font-size: 12px; color: #FF9922; text-decoration: none} .blue { font-family: "宋体"; font-size: 10.5pt; line-height: 20px; color: #0099FF; letter-spacing: 5em} --> </style> a:link a:visited a:hover a:actived 的排列顺序一定要严格照上面的样例代码。为了保证不同浏览器上字号保持一致，字号建议用像素px来定义，一般使用中文宋体12px 和14.7px。 4. CSS的命名规范及部分简写说明以下结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠； 4.尽量不缩写，除非一看就明白的单词； 5.如果可以话，最好加上中文说明；页头：header 登录条：loginbar 标志：logo 侧栏：sidebar 广告：banner 主导航：mainnav 导航：nav 顶导航：topnav 子导航：subnav 菜单：menu 子菜单：submenu 菜单内容：menucontent 搜索：search 滚动：scroll 页面主体：main 内容：content 标签页：tab 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 热点：hot 新闻：news 下载：download 注册：regsiter 状态：status 按钮：btn 投票：vote 合作伙伴：partner 友情链接：friendlink 页脚：footer 版权：copyright 容器：container/box 搜索关键字：keyword 搜索范围：range 标签文字：tagTitle 标签内容：tagcontent 当前标签：tagcurrent/currenttag 列表：list 当前位置：currentpath 侧边栏：sidebar 图标：icon 注释：note 登录：login 注册：register 列定义：column_1of3 (三列中的第一列) column_2of3 (三列中的第二列) column_3of3 (三列中的第三列) 5. CSS和JS尽量采取外部调用所有的css尽量采取外部调用 <LINK href=" common /style.css" rel="stylesheet" type="text/css"> 所有的javascript脚本尽量采取外部调用 <SCRIPT LANGUAGE="JavaScript" SRC="common/xxxxx.js"></SCRIPT>

展开阅读全文