网站建设标准_网站实施规范
一、网站建设目录规范
《网站建设目录规范试行》（以下简称《规范》）目的是从整体上规范网站建设过程中的统一性和可扩展性，方便于团队中更好的协作及设计者以后的维护。请注意《规范》中的用词，以确定哪些是“必须”哪些是“参考”。
此《规范》为试行版，内容在不断完善更新中。如果你有什么意见和建议，或发现内容有什么错误请积极指正，我们将及时改进修正。
网站建设标准,网站制作,网页设计,网站建设公司
二、网站建设基本流程规范
网站建设（或者升级改版）应包含下列基本流程：
1、制定网站规划方案：包括网站预期目标、行业竞争状况分析、网站栏目结构、用户行为分析及内容规划、网页模版设计、网站服务器技术选型、网站运营维护规范等基本内容；
3、网站测试；
4、网站内容发布；
5、网站维护及管理。
三、网站优化规范
网站优化的最终目的是为用户获取有价值信息提供方便，网站优化包括三个方面：对用户获取信息优化、搜索引擎优化、网站维护优化。
1、网站栏目结构合理，栏目设置不要过于复杂；
2、网站导航清晰且全站统一，通过任何一个网页可以逐级返回上一级栏目直到首页；
3、网页布局设计合理，网站设计符合用户浏览习惯；
4、重要文字信息尽可能出现在网页靠前位置；
5、字体清晰，CSS风格协调一致；
6、最多3次点击可到达产品详细内容页面；
7、通过网站任何一个网页不超过3次点击可达到站内其他任何一个网页；
8、遵照搜索引擎为管理员提供的网站优化指南，通过网站结构和内容等基本要素的优化为搜索引擎检索信息提供方便，不采用任何被搜索引擎视为垃圾信息的方法和欺骗搜索引擎的方式（如堆积关键词、用户不可见文本、页面跳转、复制网页等等）；
9、网站首页、栏目首页及产品内容页面均有一定的文字信息量；
10、每个网页有独立的、可概括说明该网页核心内容的网页标题（而不是全站或者一个栏目共用一个网页标题）；
11、每个网页有独立的、与该网页内容相关的META标签设计（包括description和keywords）；
12、每个网页有独立的URL；
13、产品内容页面URL尽可能简短且体现出产品属性；
14、产品/企业新闻详细内容页面是独立网页不是弹出窗口；
15、对于产品品种多的企业网站，要有合理的产品分页方式；
16、网站内容保持适当的更新周期。
四、网站建设实施规范
A、网站建设尺寸规范
1、页面标准按800*600分辨率全屏制作，每个页面的宽度为778象素；页面标准按1024*768分辨率全屏制作，每个页面的宽度为1004象素； 1024*768分辨率，建议宽度使用960像素。
2、全尺寸Banner统一规格为470×70px，半尺寸banner为234*60px，小banner为88*31px ；部分banner可根椐实际情况设置尺寸；
3、Logo统一为160*70px；
B、网站建设目录规范
遵从原则：以最少的层次提供最清晰简便的访问结构；以最少的字母达到最容易理解的意义。
1、 目录以代表此目录文件内容含义的英文单词命名，目录名若为单个单词，均须小写，目录名若大于等于两个单词，从第二个单词起的每个单词的首字母大写，其余字母小写。
2、 网站根目录：只允许存放网站缺省命名文件索引文件（如default.shtml）一个，以及其它必备的文件（如golas.asa, Web.config）。
3、 网站根目录下开设images子目录，用以存放不同栏目的页面都要用到的公共图片，例如网站标识、导航栏图片、按钮等。每个目录下私有图片存放于各自独立images目录。
4、 在网站根目录下开设Templates目录，用以存放各栏目的模板文件；Templates 中另建与网站根目录下对应的栏目目录，存放不同栏目对应的模板文件，每个目录中默认文件：content.htm , list.htm 分别是内容页的模板、列表页的模板，其他需要用到的模板根据实际用处按规定命名，在文件命名规则中详细阐述。
5、 在网站根目录下开设styles、scripts目录，分别存放样式表文件与客户端脚本文件。
6、 在网站根目录下开设upload子目录，用以存放网站后台上传的文件；
根据实际需要建立download目录，用以存放提供给浏览者下载的文件。
7、 在网站根目录下开设include目录，存放公用的包含文件（如top.htm、head.htm、foot.htm）。
8、在网站根目录下开设plus目录，存放所有网站建设中用到的服务器端的程序文件（如 search.asp、function.asp）。
9、每个语言版本存放于独立的目录。已有版本语言设置为：
简体中文 \gb
繁体中文 \big5
英 语 \en
韩 语 \kr
日 语 \jp
俄 语 \ru
10、在网站根目录下按照栏目结构，为每个主要功能(主菜单)建立一个相应的独立目录。目录名为此栏目的英文翻译（例如：关于我们 \aboutus信息反馈 \feedback产 品 \product），根据需要在每一个栏目目录中开设images子目录，用以放置此栏目专用图片。(例如：\aboutus\images；\ product\images)。
总结：
所有的js文件存放在根目录下下的scripts目录；
所有的CSS文件存放在根目录下的styles目录；
所有的程序存放在根目录下的plus目录；
所有公用的包含文件存放在根目录下的include目录；
所有的模板文件存放在根目录下的Templates目录；
所有的公用的图片文件存放在根目录下的images目录；
所有的上传文件存放在根目录下的upload目录；
所有的提供给浏览者下在的文件存放在根目录下的download目录；
如果建设中的网站为多语言版本的，根据其语言版本存放于独立的目录，
目录命名规则以国家英文简码为准；
C、网站建设文字，标点规范
1、非正文页面每页内容尽量在1000字以内网页的文字必须采用样式定义，以避免由于显示器的差异造成页面差异；
2 、文章正文内容，CSS样式设置应该有交互性，可以让访问者自已调整文字的大小及行距等；（以适应不同访问者访问，增加网站的友好性。）默认为：字号用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14，黑体字或者宋体字加粗时，一般选用11pt和14.7px；行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.
3 、中文版中正文默认使用宋体；
4 、英文版中正文默认使用Arial字体；
5 、中文段首要空2个汉字的位置，西文段首不空；
6 、西文中一定要用西文半角标点符号，西文中不得使用全角符号（请注意空格）；
D、网站建设导航规范
1、每一个页面都因该出现的固定信息：
内容包括：主页，网站介绍，站点视图，联系方式，反馈，搜索工具，常见问题解答，实际内容栏目(包括相关站点链接、新闻页)；
2、每页必须有导航条，格式例：首页->频道名称->栏目名称->文章标题；菜单名称要统一：标题栏目前后一致；
3、栏目如果采用图标, 图片的ALT属性要写本图片或按钮的名称，以避免图像表达不清或图像无法下载。
4、无任何链接内容的不做成按钮的形式。
5、每个页面底端都需要加注《版权声明》，要根据不同的语言版本调用。标注方法：中文版—中英文；英文版—中英文；法文版—中法文；日文版—中日文；韩文版—中韩文；（标注内容需用图片，防止访问者字符编码不全显示不正常）；
6、网站文字链接的颜色在点击前和点击后要有区别。让访问者知道哪些内容是看过的，哪些内容还未访问；
E、网站建设文件命名规范
遵从原则：以最少的字母达到最容易理解的意义。
文件的名称全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想：一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义;二是当我们在文件夹中使用按名称排序时能够排列在一起，以便查找、修改、替换、计算负载量等等操作；
1、网站主页，各栏目主页的名称一定要用“default.扩展名”命名；
2、文件以代表此文件内容含义的英文单词命名，文件名为单个单词，均须小写，文件名大于等于两个单词，从第二个单词起的每个单词的首字母大写，其余字母小写。如aboutLeftMenu.htm
3、图片的命名原则遵循以下几条规范：
1) 图片名称为首、尾两部分，尾部分第一个字母大写以作区分。
2) 首部分表示图片大类性质。如广告（banner）、标志（logo）、菜单（menu）、按钮（button）、标题图片（title）等。有onmouse效果的图片，两张分别在原有文件名后加"_on"和"_off"命名。(可进一步完善此规范，并把一系列命名规则整理成条款列出)
3) 尾部分表示图片的具体含义。
4) 图片文件命名举例如下：menuAboutUs.gif、menuNews.gif、logo.gif、bannerYahoo.gif、bannerSina.gif、buttonSearch.gif
F、网站建设文件格式规范
1、图片的使用以JPG及GIF为主，颜色较丰富变化较多的图片使用JPG文件，其他则建议使用GIF文件；
2、静态网页及被调用和包含的网页文件均以.htm为扩展名
G、网站建设文件存放规范
这部分内容与网站目录规范基本相同，
1、如果建设中的网站为多语言版本的，文版主文件夹必须用英文简码命名。如：韩文版的所有内容都必须放到kr文件夹中。其他的子文件夹或文件要和中文版的名字一一对应；
2、各页面所用的图片要放到相应的images文件夹中；子栏目页面用到的图片放到栏目目录的images文件夹中；
3、站点中所使用到的JavaScript文件都存放在根目录下的scripts目录中；
4、站点中所使用的样式表文件都放到根目录下的styles目录中，原则上是每个栏目都要有自己的样式表文件，并有一个公用的样式表文件，但在具体使用中可以根据站点规模的大小灵活操作；
5、所有的程序及应用文件都放在站点根目录下的plus目录中；
6、所有公用的包含文件和被调用的文件都放在include目录中，每个栏目私有的包含及调用文件可放各自的栏目目录中；
7、站点中使用的模板文件都放在站点根目录下的Templates目录中，并按照其所属栏目分别放在对应的目录中，Templates目录中的目录结构应该与站点中的主栏目结构一致，保证目录的对应；
8、通过网站后台上传的文件均放在站点根目录的upload目录中，并设置目录权限为不可执行脚本；
9、所有提供给浏览者下载的文件存放在根目录下的download目录中，如果这个目录中的文件可以通过后台上传，要设置目录权限为不可执行脚本；
H、网站链接结构规范
遵从原则：用最少的链接，使浏览最有效率
1、首页与一级页面间，使用星状链接结构
2、一级页面与二级页面间，使用树状链接结构
4、 超过三级页面，在页面显眼位置，设置导航，回到首页或相关栏目。
I、HTML书写规范
head区代码规范
1、 版权注释
<!--- The site is designed by --->
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="author" content="mail@mail.com">
4、 网站简介
<META NAME="DESCRIPTION" CONTENT="当前页的介绍">
5、 搜索关键字
<META NAME="keywords" CONTENT="关键字,关键字1,关键字2,关键字3">
6、网页的css规范
<LINK href="xxx/xxx.css" rel="stylesheet" type="text/css">
7、 内容页标题
<title>内容标题 - 栏目名称 - 网站名称</title>
列表栏目页标题
<title>栏目名称 - 网站名称</title>
8、所有的javascript调用尽量采取外部调用
<SCRIPT LANGUAGE="JavaScript" SRC="xxx/xxxxx.js"></SCRIPT>
可选加入标签
1、 设定网页的到期时间。一旦网页过期，必须到服务器上重新调阅。
<META HTTP-EQUIV="expires" CONTENT="Wed, 18 Feb 2004 08:21:57 GMT">
2、 禁止浏览器从本地机的缓存中调阅页面内容。
<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
3、防止其它网站在框架里调用本站页面。
<META HTTP-EQUIV="Window-target" CONTENT="_top">
4、自动跳转。<META HTTP-EQUIV="Refresh" CONTENT="5;URL=http://www.****. **">
5、网页搜索机器人向导，告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。用以保护需点数才能浏览的页面。
<META NAME="robots" CONTENT="none">
CONTENT的参数有all,none,index,noindex,follow,nofollow。默认是all。
6、 收藏夹图标 <link rel = "Shortcut Icon" href="***.ico">
内容的代码书写规范
html中javascript的书写：
<head>
…..
<script type="text/javascript">
<!—
…..
-->
</script>
</head>
html中元素的书写：
1、 元素属性值必须包含在双引号中；
<font color=”#000000” size=”3” face=”Arial”>
2、 form 中必须加action属性，并且不能为空。
<form action=”/r/add.cgi” method=”post”>
如果不需要使用action属性，也必须定义：
<form action=”no” >
3、 img的alt属性不可以缺少；
<img src="/q/img/btn_style.gif" border="0" alt="Select”>
4、 head与</head>之间必须有title；
<head>
……
<title>your title </title>
……
</head>
5、 tr、td必须定义在table之间；
<table>
<tr>
<td>……</td>
….
</tr>
</table>
6、 button按钮必须定义在form之间，否则netscape不支持；
<form action=”……” method=”post”>
<input type=”button” name=”but” value=”back”>
</form>
7、 在javascript中的字符串中出现的“/”前要用转义符“\”：
<script type=”text/javascript”>
<!—
function check(str) {
var str=”\/r\/add.cgi”;
……
}
-->
</script>
8、 onclick 属性必须和 onkeypress 成对写( onmousedown + onkeydown、onmouseup + onkeyup)
<a href=”javascript:void[0]” onClick=”javascript:wopen(….);return false” onkeypress=”javascript:wopen(…);return false”>mm</a>
9、 用URL传值时直接写&是不可以的，可用&替换：
<a href=”/r/add.cgi?uid=sqz&sid=1&pid=1”></a>
缩近规则：
<table>中<td></td>,<tr></tr>等必须保持严格的缩近规则，以"Tab"键为准：
<table>
<tr>
<td>
<table>
<tr>
<td>…</td>
…
</tr>
</table>
</td>
….
</tr>
</table>
程序代码规范
程序注释规范
数据库使用规范
附一、当网站注重百度优化时，网站中的路径尽量全部采用相对路径。
因为在目前搜索引擎中百度对绝对路径比较排斥。
附二、CSS样式表命名规则
样式命名
登录条:loginBar
标志:logo
侧栏:sideBar
广告:banner
导航:nav
子导航:subNav
菜单:menu
子菜单:subMenu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
友情链接:friendLink
页脚:footer
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
版权:copyRight
CSSID的命名
外套:wrap
主导航:mainNav
子导航:subnav
页脚:footer
整个页面:content
页眉:header
页脚:footer
商标:label
标题:title
主导航:mainNav(globalNav)
顶导航:topnav
边导航:sidebar
左导航:leftsideBar
右导航:rightsideBar
旗志:logo
标语:banner
菜单内容1:menu1Content
菜单容量:menuContainer
子菜单:submenu
边导航图标:sidebarIcon
注释:note
面包屑:breadCrumb(即页面所处位置导航提示)
容器:container
内容:content
搜索:search
登陆:login
功能区:shop(如购物车，收银台)
当前的current
样式文件命名
主要的:master.css
布局版面:layout.css
专栏:columns.css
文字:font.css
打印样式:print.css
主题:themes.css
注释的写法
/* Footer */
内容区
/* End Footer */
关于匠人匠心
匠人匠心科技核心技术团队组建于2015年8月，于2016年注册于天津市北辰区，公司专注于高端网站建设，APP定制开发，网络推广运营等互联网专业服务。在竞争激烈的网站建设行业，始终坚持以技术为核心，组建强大的技术开发团队，研发独立且具有自主版权的网站管理系统CMS，CMF，安全稳定、简单易用；在业内具有强大的竞争力。匠人匠心科技的近期目标是打造一流的网站建设及运营团队，把商务和文化、技术和艺术完美地结合在一起，为企业塑造品牌、创造效益。做网站，就找匠人匠心科技！期待与您的合作。点击了解更多：价格高的网站与价格低的网站有何区别？
匠人匠心科技秉承“追求卓越、开拓创新、团结进取、共创未来”的企业精神，致力于为企业提供全面的网络传播与技术应用整体解决方案，真正实现企业互联网信息智能化，提高企业在网络科技时代的市场竞争力。以客户为中心，以技术为基础，以质量求生存，以诚信求发展，我们为您提供一个无懈可击的展示空间，为您的企业订做有竞争力的展示平台！
匠人匠心科技每天都会不定时更新有关天津网站制作以及网络营销推广的文章，希望对您有用，您也可以关注我们的微信账号二维码，咨询任何关于网站建设方面的问题。
我们的微信二维码
