[课程地图-jsp网站]界面布局html，js和css要求

界面布局要求文档（第一阶段二期工程）


格式要求
1. 所有界面文件现在使用.html/htm后缀名，暂时不适用动态网页格式，服务器端还未建设完全，无法提供实时数据
2. 所有界面元素样式定义文件使用.css后缀名，目前可以暂时不用样式文件定义界面元素，但建议所有界面元素的样式全部定义到css文件中，以减轻后期开发的压力
3. 所有前端脚本文件使用.js后缀名，统一使用javascript前端脚本，且只是用于前端界面元素控制和与服务器数据交互
4. 图片使用.png后缀名，页面的图标使用.ico后缀名（暂时不需要添加网页图标，后期统一添加），对于页面展示内容可以不用太限制，如，png、gif、jpeg等
5. 视频格式由视频开发组定义格式，目前要求必须满足主流视频格式要求，如，flv、mp4、rmvb等

注意：对于界面布局暂时只是使用到了这些格式文件，后期改为动态网站的时候会有相应的修改，请做好心理准备。


命名要求
对于html文件布局：
1. 禁止使用index.heml/htm，所有的界面命名必须有实意，如，专业课程地图，coursemap.html/htm，单词拼接全部小写
2. html内元素命名（此处包含所有元素，），单词拼接使用“_”连接，如，课程介绍的主div，main_div，命名强调可读性
对于javascript文件：
1. 脚本文件名与其对应的界面同名，无论其提供的功能多少，都单独使用一个文件来定义，如，课程地图（coursemap.html），对应的脚本文件就是coursemap.js
2. 脚本文件中每个功能函数命名需要明显的实意解读，如，提交留言函数，submit_msg(..)
对于css样式文件：
1. 类和节点样式命名必须与html元素一一对应，如，界面的主div（id=“main_div”）的样式定义，在css中使用.main_div{}
资源：
1. 对于每个界面使用的静态独立的资源，需要加以域名标石来表明其功能和位置，如，首页的背景图片，img_homepage_bg.png，其中，img_为所有图片资源的前缀，home为首页域限定，bg为背景图片的说明，对于其它资源使用请使用同样的方式


HTML规范
建议直接使用html5,
界面元素要求:
禁止使用table布局（不要问为什么），全部使用div定义区域。
所有的样式和脚本尽量使用外部引用，不在html代码文件内定义、调用。
示例：

!--页面注解--> 
2、 
3、 
4、
5、 
6、 
7、 
8、 
9、 
10、 
11、 
12、
 
13、
页面内容标题
 
14、
页面相关性标题
 
15、
标题系列
 
16、
标题系列
 
17、
标题系列
 
18、
标题系列
 
19、 
20、链接词 
21、重点关键词强调 
22、关键词强调关键词强调关键词强调 
23、
 
25、
 
26、版权部分关键词强调 
27、
 
28、 
29、

JAVASCRIPT规范
1. 效果框架：对于界面的特效，需要使用到开源js框架时，请在文件中解释说明。
2. 对于控制界面元素的功能函数，命名合理，解释说明
3. 对于后台交互脚本，请，命名合理，解释说明

CSS规范
目标，使html代码简介可读，提高公共样式重复利用率。
1. 目前直接绑定html代码元素即可。建议使用
.main_div{}类
和
#main_div_class{}id

注释规范
在每个含代码的界面中，所有自定义功能、控件或者样式都需要详细解释说明在代码前端，注释会出现在html代码中，javascript脚本中以及css样式文件中。

开发和测试工具
建议使用DW、Eclipse 、Notepad++、记事本等开发，建议不使用Axure（不利于开发）

测试工具使用浏览器即可，建议使用火狐浏览器，方便调试前端脚本。测试的浏览器建议多使用一些，如，chrome，opera，IE系列等等。

案例：
login.html

用户登陆




用户名:
.........

CSS文件
login.css
/**
 文本居中样式指定
*/
.center_class{
text-align: center
}

javascript文件
login.js


function login () {
	alert("Submit success!");
}