[课程地图-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代码文件内定义、调用。
示例：
JAVASCRIPT规范
1. 效果框架：对于界面的特效，需要使用到开源js框架时，请在文件中解释说明。
2. 对于控制界面元素的功能函数，命名合理，解释说明
3. 对于后台交互脚本，请，命名合理，解释说明
CSS规范
目标，使html代码简介可读，提高公共样式重复利用率。
1. 目前直接绑定html代码元素即可。建议使用
.main_div{}类
和
#main_div_class{}id
注释规范
在每个含代码的界面中，所有自定义功能、控件或者样式都需要详细解释说明在代码前端，注释会出现在html代码中，javascript脚本中以及css样式文件中。
开发和测试工具
建议使用DW、Eclipse 、Notepad++、记事本等开发，建议不使用Axure（不利于开发）
格式要求
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、<html> 3、<head> 4、<title>页面标题</title> 5、<meta http-equiv=Content-Language content=zh-cn> 6、<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 7、<meta name="keywords" content="关键词"> 8、<meta name="description" content="网站描述"> 9、<link href="css/*.css" type="text/css" rel="stylesheet"> 10、</head> 11、<body> 12、<div> 13、<h1>页面内容标题</h1> 14、<h2>页面相关性标题</h2> 15、<h3>标题系列</h3> 16、<h4>标题系列</h4> 17、<h5>标题系列</h5> 18、<h6>标题系列</h6> 19、<img src="xxx.jpg" alt="图片说明"> 20、<a href="/" title="链接说明">链接词</a> 21、<strong>重点关键词强调</strong> 22、<b>关键词强调</b><u>关键词强调</u><i>关键词强调</i> 23、</div> 25、<div> 26、版权部分关键词强调 27、</div> 28、</body> 29、</html>
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>${ system } 登陆</title>
<link rel="stylesheet" type="text/css" href="login.css">
<script src="login.js" type="text/javascript"></script>
</head>
<body style="background: #BEBEBE ; ">
<br/>
<!-- 使用到自定义样式，文本居中，center_class,在login.css文件中申明 -->
<div class="center_class"><h1 style="font">用户登陆</h1></div><br/>
<hr/>
<!-- 提交时调用login函数，在login.js中定义 -->
<form action="#" method="POST" enctype="application/x-www-form-urlencoded" target="_parent" onsubmit="return login()">
<div style="text-align: center">用户名:<input type="text" name="name" value="请输入用户名" style="border:0" onclick="this.value=''" /></div>
<div style="text-align: center">.........</div>
<div style="text-align: center"><input type="submit" name="submit_action" value="登陆" /></div>
</form>
</body>
</html>
CSS文件
login.css
/**
文本居中样式指定
*/
.center_class{
text-align: center
}
javascript文件
login.js
<!-- 提交登陆信息，此函数是测试用例，暂无实际意义，只是弹出提示框 -->
function login () {
alert("Submit success!");
}