一、目的
为提高工作效率，规范黄河科技学院网站前端开发的一致性，提高页面加载速度，保持优良的用户体验，保证页面的可维护性，更有效的保障SE0，特针对学校网站建设中的各项工作制定此规范，请遵照执行。
二、网站目录结构
网站根目录 ┎—doc/ (网站说明类文档目录) ├—ad/ (广告相关图片等目录) ├—images/ (图片目录) ├—js/ (网站JS文件目录) ├—css/ (网站样式文件目录) ├—channels (二级页面：栏目页所在目录) ├—contents (二级页面：内容页所在目录) ┖—index.htm (网站首页) |
设计者应以此目录结构为基准，在设计网站时，保持同样的目录结构。
黄色底纹部分的目录名称，可能会因站群不同，有所区别。
三、文件命名说明
1、各网站根目录下所有的网页文件都以html扩展名，其中首页为index.html。
2、文件及命名必须全部用小写英文字母、数字、下划线的组合，其中不得包含汉字、空格和特殊字符。
3、目录名应以英文、拼音为主，命名尽量切合文件的用途等，用一些易懂的词汇。
4、图片名称尽量用英文或拼音，为便于区分图片用途，可分为头尾两部分，用下划线隔开。具体命名规则举例如下：
标志性的图片 log_
导航图片 nav_
菜单图片 menu_
装饰用的图片取名 pic_
不带链接表示标题的图片取名 tit_
小图标ico_
背景图片 bg_
尾部用来表示图片的具体含义。
menu_aboutus.gif、menu_job.gif、pic_people.jpg
Doc目录下为网站使用文档，以“x院专（部门）_网站说明.doc”命名。
四、静态页面规则
1、网站编码统一使用utf-8。
<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />
2、CSS链接调用：
非特殊情况下必须把CSS外部链接放到页面的顶部(<head... </head标签之间)；
在<head>中使用<link href=" base.css" rel="stylesheet" type="text/css" />进行样式连接。
3、尽量减少页面的HTTP请求：
合并压缩多个JS到一个文件中；
合并压缩多个CSS到一个文件中，能写成样式背景的图片，必须写在样式中。
4、<script>标签使用：
非特殊情况下，必须把JS代码或外部链接放到页面的底部(</body>标签之前)；
引用文件，直接使用<script type="text/javascript" src="文件路径"></script>
写JS脚本，直接使用<script type="text/javascript">脚本代码</script>
5、使用正确的注释方法，加上必要的注释。
必须在区块代码和套程序的循环的第一条数据加上注释内容，并且为较复杂或不易懂的内容书写标准的注释代码。
五、XHTML标准
1、每个页面页首必须声明使用XHTML 1.0 Transitional DTD。
2、所有XHTML代码必须全部小写；ID命名全部小写，禁止使用“_”、“-”等字符。
3、XHTML标签的属性值，必须用双引号(“”)括起来，并且一定要有值，不能简写缩写，不能使用“'”单引号或不使用引号。
4、双标记签都要有开始和结束标签，单标记标签的后面一定要加“/”，并且有正确的层次。
5、页面内容和样式分离，代码中尽量不出现表现样式的元素，例如：style、font等。
6、id属性，同一页面不要重复使用同一id。
7、尽量减少DIV的嵌套层数。所有标签必须进行合理嵌套，体现文档的结构，并有利于搜索引擎的抓取。
8、<img>标签不要添加显式的width和height。
9、行距建议用百分比来定义。
10、非特殊情况，不能使用表格。必须使用的情况下要提前规划好，避免使用合并单元格的形式。
11、同一域名下的页面链接使用相对路径。
12、网站设计和制作完毕后，代码需要格式化，静态页面XHML代码应采用自动缩进的形式编写，保证代码层次结构清晰。
六、CSS文件命名规则
1、CSS文件命名
主要的main.css
首页index.css
基本共用base.css
布局，版面layout.css
文字font.css
表单forms.css
补丁append.css
2、XHTML文件中class的命名
(1)颜色：使用颜色的名称或者16进制代码，如：
.red { color: red; }
.ff8600 { color: #ff8600; }
(2)字体大小，直接使用“font+字体大小”作为名称，如：
.font12px {font -size:12px;}
(3)对齐样式，使用对齐目标的英文名称，如：
.left {float:left; }
(4)标题栏样式，使用“类别+功能”的方式命名，如：
.barnews { }
.barproduct{}
3、XHTML文件中id的命名
(1)页面结构
容器：container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：collumn
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav子导航：subnav
顶导航：topnav 边导航：sidebar
左导航：leftsidebar 右导航：rightsidebar
菜单：menu 子菜单：submenu 标题：title 摘要：summary
(3)功能
标志：logo广告：banner
登陆：login登录条：loginbar
注册：regsiter按钮：btn
标题：title搜索：search
标签页：tab
文章列表：list提示信息：msg
当前的：current图标：icon
指南：guild服务：service
热点：hot新闻：news
投票：vote合作伙伴：partner
友情链接：link版权：copyright
七、JavaScript书写规范
1、书写过程中，每行代码结束必须有分号；
2、库引入：原则上仅引入jQuery库，若需引入第三方库，须与团队其他人员讨论诀定；
3、变量命名：驼峰式命名，原生JavaScript变量要求是纯英文字母，首字母须小写，jQuery变量要求首字符为“_”，其他与原生JavaScript规则相同，变量要集中声明，避免全局变量；
4、类命名：首字母大写，驼峰式命名；
5、函数命名：首字母小写，驼峰式命名；
6、命名语义化，尽可能利用英文单词或其缩写；
7、尽量避免使用存在兼容性及消耗资源的方法或属性，比如eval0&innerText；
8、代码结构明了，加适量注释，提高函数重用率。
八、SE0针对性规范
1、meta标签说明
为了能够更好的为搜索引擎准备内容，meta标签采用如下的定义方式，允许搜索机器人搜索站内所有链接。
<meta name="robots" content="all"/>
设置站点作者信息
<meta name="author" content=" " />
设置站点版权信息
<meta name="Copyright" content="版权" />
2、标题规范
为所有页加上标题。标题简短精练、高度概括，标题长度一般不超过30个汉字；
标题要含有关键字，关键字个数不超过3个；
频道首页标题格式：<title> {$频道名}_站点名</title>；
栏目首页标题格式：</title>{$栏目名}首页_ {$频道名}_站点名</title>；
新闻最终页标题格式：</title> {$网页标题}_ {$频道名}_站点名</title>；
非新闻最终页标题格式：</title>核心关键字_ {$栏目名}_ {$频道名}_站点名</title>；
专题标题格式：</title>专题名_ {$频道名}_站点名</title>；
3、元标签Description规范
为所有页加上描述标签，<meta name="description" content=" ">。
描述要清晰明了地写出网页内容，连贯通顺，描述中出现关键字，与正文内容相关。这部分内容是给人看的，要写得详细，让人感兴趣，吸引用户点击。
遵循简短原则，字数一般不超过120个汉字。
4、关键字规范
每个频道和栏目可以加keyword标签，页面关键词只涉及当前页面的内容，而不涉及整个网站、所在频道等内容。
在关键词选择上，可以采取具体关键词+主关键词的形式，在某种情况下，标题也可以作为一个较具体的关键词。
站在访客的角度考虑，结合用户的一-些搜索习惯，填写适当的关键词。(可参照百度的相关搜索)。不同的关键词一定要用英文下的逗号(, )隔开。
关键词以3-5个为宜。
5、图片规范
在保持图片质量的情况下，尽量压缩图像的文件大小；
ALT属性，为图片加上ALT属性文字说明，<img src=" " alt="说明">，ALT说明应包含该页的核心关键字；为重要的元素和截断的元素加上title。
为图片链接加上ALT属性说明，ALT说明加入和目标页主题相关的热门关键字。
尽量在图片和图片链接的上方或下方，加上包含核心关键字的图片文字说明。
为频道logo增加ALT说明。
同时为图片加上title标签。
6、链接规范
确保每个页面都可通过链接到达。
避免链接错误，比如链接到不存在的网页和调用不存在的图片。
制作专门的404错误引导页，引导用户跳转其它页面，比如网站地图页，不建议全部跳转到首页。
建议文章内部链接为绝对路径的URL，这样被转载后可以增加外链，也可避免链接错误。
友情链接等要寻找相似性高，质量高的网站链接。尽量减少不必要的友情链接。
导航清晰，所有页面都能回到首页、频道首页，使用文字链接，不要使用嵌入JS文件的方式实现网站导航，尽量避免使用flash及图片导航。为所有内容页加上“当前位置”小导航，使用文字链接，列出当前页的所有上级页(逻辑结构)的名称及链接，包括频道名、栏目名、子栏目名(或专题名)
九、URL规范
1、缩短URL长度：长度保持在65个英文字母之内。调整网站结构，避免不必要地设置过多层次的目录，目录最好不要超过三级。动态页面的URL的参数要尽量少于3个。
2、首页带斜扛，不加index后缀。
十、代码优化规范
1、代码严格遵守HTML规范，确保搜索引擎能够正确分析页面代码。
2、用Web标准(DIV+CSS)重构页面模板，不使用table控制排版，不使用table嵌套。
3、字体设置，文章、段落标题等用<h1><h2>……<h6>，依此显示重要性的递减。
4、CSS、JS代码采用外部调用。
5、尽量少使用frame框架结构。如果网页使用了框架( frame)， 则必须在代码中使用“Noframes”标签进行优化。在<Noframes></Noframes>区域中包含指向frame页的链接以及带有关键字的描述文本。
6、广告和与正文无关的内容尽量用iframe、JS等方式调用显示。
补充：
1、网站IIS日志放到根目录，网站还未修改完整的时候，要用robots屏蔽蜘蛛，避免过早的被搜索引擎收录，影响网站在搜索引擎中的权重。
2、网站上线之后，ftp中多余的文件都应删除，避免蜘蛛抓取一些无关紧要的页面。
附件：
基本CSS命名规则参考
头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner
说明：如果网页中某个元素的主要名称为以上词汇的某个单词，则应以该单词命名或命名开始部分。
例如：有个导航在侧边，则命名为.sidenav (侧边导航) sidebar采用简写，主元素为导航
例如：网站有几个菜单，顶部菜单命名为： .topmenu
例如：网站有10个热点，则每个热点命名为：.hot数字(hot1,hot2,ho3…hot10)
注释的写法
/* Footer */
内容区
/* End Footer */
说明：注释一般用来说明CSS的用途，在比较难懂的地方需要加入注释。
id的命名
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
class的命名
(1)颜色:使用颜色的名称或者16进制代码，如：
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称，如：
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称，如：
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名，如：
.barnews { }
.barproduct { }
注意事项
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词。
主要的master.css
模块module.css
布局，版面layout.css
主题themes.css
专栏columns.css
文字font.css
表单forms.css
补丁mend.css
打印print.css
