计算机毕业设计源码网：我们提供的源码通过邮箱或者QQ传送,如果有啥问题直接联系客服

---

素材描述：本套java设计包含程序+演示视频＋5k字论文

本套设计要实现的功能如下：

第一部分 目的

1、确保产品前后课程的统一；
2、确保实现方式的专业性、和企业实际开发一致；

第二部分 UI界面和编码规范

一、网站目录结构的规划

  1、网站目录结构规范

      1.1目录建立的原则：以最少的层次提供最清晰、最简便的访问结构；
1.2每个主要栏目开设一个相应的独立目录；
1.3目录的命名以小写英文字母、下划线组成（对于类似VS2008 开发工具，则采用自动生成的结构，保证大小写统一即可）；
      1.4通用的目录结构命名规范及存放内容：
n 中大型项目（较大的项目案例、阶段项目、毕业设计、贯穿案例）
Ø 根目录：只存放网站主页文件（如index.html）及其他必须的系统文件
Ø images：根目录下的images用于存放各页面都使用的公用图片，子目录下的images目录存放本栏目页面使用的私有图片；
Ø templates：存放为保持风格统一的模板页，例如：header页、footer页等。
Ø include：存放为代码重用的源码文件，例如：通用函数（方法）、类的源码等；
Ø css：存放各类样式文件；
Ø js：存放JavaScript脚本文件；
Ø admin：管理后台文件夹，只存放管理后台的程序逻辑文件，不存放模板。
Ø language：语言文件夹，存放不同语言显示文字与变量对应的文件。
Ø plugins：存放扩展插件文件，每个插件一个子目录；
Ø upload：存放用户上传头像等；
Ø media：存放flash、avi等多媒体文件
n 小型项目（平时章节学习用的小案例或小的项目案例）
Ø 根目录：存放组织结构页面，如index.htm，header页、footer页等；
Ø js：存放JavaScript脚本文件；
Ø images：存放网站图片，其下可再分类存放各类图片；
Ø css：存放css文件；
说明：以上只规定通用的文件夹，至于网站的各栏目，则需要在根目录下创建相应的文件夹进行单独存放。
 

  2、网页文件命名的规范

2.1文件命名的原则：必须具有语义化，在此基础上以最少的字母达到最容易理解的意义；
2.2文件名统一采用小写英文字母、数字，用下划线体现层次，层次最多不超过三层；例如：“index.html”、 “search_header.html”；
2.3 多个同类型文件加下划线和数字命名，不够两位数用0补齐。例如：news_01.htm、news_02.htm；
2.4 通用的文件名及其含义：
Ø index.html 首页
Ø header.html 顶部
Ø footer.html 底部
Ø login.html 登录
Ø register.html 注册页
Ø search.html 搜索页
Ø buy.html购买页
说明：网页文件名（动态网页则改文件名后缀，例如：buy.jsp）。

  3、图片文件命名的规范

3.1图片命名的规定：取名必须有意义，并分类存放在对应版块images目录下 ；
3.2通用的图片文件名及其含义：
（1）网站修饰外观图标：
Ø 全局背景图，bg.gif
Ø 全局小图标，icon.gif
 
说明：
推荐将网站用到的多个小图标放到1个背景图中，然后使用背景偏移量技术截取各小图标进行显示，例如右图背景图和下图的显示效果。
源码示例：见附件-导航小图标的流行做法。
 
 
 
 
（2）局部背景图：h_bg.jpg（h为header缩写）
（3）网站中内容图片：
Ø 网站Logo标志：logo.jpg
Ø 登录图标：login.gif
Ø 关闭图标：close.gif
Ø 只有在紧邻并列图片中使用数字：如首页产品图片用promote_01.jpg,promote_02.jpg等

二、网站布局的规范

  1、整体布局的规范

1.1除个别特殊情况外（需各方向负责人确认），均采用DIV+CSS主流布局，尽量少用表格布局；表格仅用于表单布局、规则的结构化数据显示 ；
1.2 网站设计推荐使用如下的基本框架结构，在此基础上进行扩展或精简；
 
说明：
（1）推荐在最外层添加整体的容器层container
（2）各区块及区块下细分的小块，命名要遵守如下通用命名，因为W3C已将部分命名纳入为HTML5的常用标签了：
Ø container：整个页面容器层
Ø header:顶部
Ø main:中间块的内容主体
Ø sidebar：左/右侧栏
Ø content:：内容
Ø footer：底部
Ø logo：公司标志
Ø copyright：版权部分
完整源码示例：见VSS ：$/ACCP6.0/3.课程设计/3.课程内容/S1/3.HTML+CSS/案例代码-
1.3 区域分块使用ID命名；区域中的小块使用class命名，示例如下：
 
<div id="container">
  <div id="header">
    <div class="logo"></div>
    <div class="nav"></div>
  </div>
  <div id="main">
    <div class="cat"></div>
    <div class="content"></div>
    <div class="sidebar"></div>
  </div>
  <div id="footer">
    <div class="copyright"></div>
  </div>
</div>
 
说明：
（１）class和ID推荐的使用场合
n ID使用的场合：ID要求命名唯一，推荐使用场合：
Ø 页面整体布局的大区块划分DIV用ID标识；
Ø 如页面中使用了DIV标签，并希望通过动态改变DIV内的内容（如Tab切换特效、Tips提示特效），则只能使用ID，方便使用JavaScript中的getElementByID方法访问（注意DIV标签没有name属性）；
Ø 表单<form>的标识：W3C XHTML1.0推荐使用ID，而不是name；
Ø 表单控件的命名，JavaScript的客户端验证时，如希望通过getElementByID方法获得表单控件的值，则必须使用ID；
n class 使用的场合：一般用于应用类样式，推荐使用场合：
Ø 整体布局中大区块下的小块，样式放到类样式中，然后使用class应用该类样式
Ø 多个标签或块有相同样式时，将共同的样式放到类样式中，然后使用class应用该类样式；
（２）完整的布局源码示例：见附件-贵美首页布局-
 
1.4不能采用top、left等坐标进行绝对定位的方式进行布局，绝对定位的方式仅用于对联广告等特殊场合；
 
1.5页面尺寸的规范：按“1024*768”分辨率制作，首页宽度推荐大小：960 px左右；页面长度不超过2屏，宽度不超过一屏；

  2、局部布局的规范

2.1页面内容组织原则：层次结构嵌套越少越好，减少多余标签：
2.2页面内容组织优先考虑常用的4种局部布局结构：
Ø div-ul(ol)-li：常用于导航菜单或分类导航等场合；
Ø div-dl-dt-dd：常用于图文混编场合；
Ø table-tr-td：常用于显规则的结构数据的场合；
Ø form-table-tr-td：常用于布局表单的场合；
     说明：
源码示例：见附件-典型的局部布局结构

三、网页编码的规范

  1、HTML的编码规范

1.1 HTML编码原则：遵守W3C XHTML 1.0 规范transitional以上（含）级别，并兼容IE6、IE7、IE8和firefox3.5（IE8菜单下“工具”-）“开发人员工具”可模拟IE7和IE8，IE6后续采用其他软件进行测试）；
1.2推荐使用DW CS4创建静态页面（新建页面选用XHTML 1.0 transitional过度级别），可以使用DW或安装Firefox插件进行W3C规范检查。
        插件地址：$/ACCP6.0/3.课程设计/3.课程内容/S2/5.JavaScript/firebug调试和w3c验证软件
1.3 HTML编码遵守W3C XHTML1.0的基本规范：
Ø 所有标签都应该关闭，例如：<h1>…</h1>、<br/>
Ø 所有标签的元素和属性的名字都必须小写
Ø 所有的标签应该合理嵌套
Ø 所有的属性值必须用引号
Ø 所有属性必须有值，例如：<option checked="checked"></option>；
Ø 特殊符号用编码表示，例如：空格用 或 表示；
Ø 注释使用<!—这里是注释-->，注释内容不能再使用“--”
1.4不使用<b>、<font>、<marqueen>等不符合W3C标准的标签，可以参考w3教程： w3school.com.cn或官方文档：w3c.org；
1.5 <img />标签必须有src及alt属性值，alt值给出图片说明；
1.6样式和内容分离的原则：标签中不出现风格属性（除宽高属性外），颜色、大小等修饰属性均放到CSS中进行设置；
     1.7表单控件的规范：
Ø 表单控件的提示文字推荐使用label标签实现，label标签要和对应控件绑定；
Ø <form>表单推荐使用ID而不用name标识，例如：<form id=”mailForm” ……>
Ø 除单选按钮组外，控件的命名一般同时用id和name属性，两者取值相同。
Ø 控件的ID或name命名要求语义化，可以使用单个单词（或常见缩写）或多个单词组合，如多个单词，则第二个单词首字母大写。例如：age、userName等。
1.8 注释的规范：对于复杂的HTML组织结构或页面布局，推荐使用<!—  -->添加必要的说明，提供代码的可读性和可维护性。

  2、CSS的编码规范

1.1采用样式和内容分离的原则，多页面复用的样式必须采用外部样式文件的方式，单个页面使用的CSS采用内部样式的方式；尽量少用行内样式（内联样式）的方式（允许类似ASP.NET中，存在控件自动生成的客户端行内样式，但手写代码则不能使用行内样式）
1.2为增加可读性，添加样式尽量按块添加，添加缩进体现层次关系，并添加注释说明，示例如下：
/*头部 从logo到服务热线*/
#header {
width:100%;
height:136px;
margin:0px auto;
background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}
 
.logo {
  width:280px;
  height:100px;
  float:left;
  background:url(../images/h_bg.jpg) no-repeat -22px 0px;
}

/*右上方菜单 购物车 帮助中心 加入收藏 设为首页等，.pic1至.pic4分别为菜单前的小图标，btn为注册登录按钮，h_text为头部文本*/
  .upright_menu {float:right;padding:15px 20px 0px 0px;}
     .pic{width:28px;height:26px;background:url(../images/icon.gif) no-repeat;}
     .pic2{background-position:-28px 0px;}
     .pic3{background-position:-84px 0px;}
     .pic4{background-position:-112px 0px;}
     .h_text{padding:6px 5px 0px 5px; padding-top:8px\0;text-align:center;}
        .btn {width:38px;background-position:0px -25px;}
 
1.3推荐class的命名使用块名_子块名体现层次感、增加可读性：
为各块顶部起名类名，类名数尽量少。以块“.nav”为例，命名时，遵循如下规则：
Ø 块内列表项 nav_list
Ø 如布局零散则制定具体位置，如 menu_upright_
Ø 共同系列风格定义时，可出现数字，遵循如下规则：共用风格不用加数字，如.pic，如列表第一个与通用风格相同则可略过不命名，但第二个风格必须命名为.pic2
1.4推荐使用的通用CSS风格：
将多个页面公用的风格定义为通用的类样式（如放入到global,css），然后在对应标签中使用 class  引用，提高代码复用，例如：
Ø .f_l{float:left;} 左浮动
Ø .f_r{float:right;} 右浮动
Ø .f_n{float:none;} 取消浮动
Ø .a_l{text-align:left;} 左对齐
Ø .a_r{ text-align:right;} 右对齐
Ø .a_c{ text-align:center;} 居中
Ø .b{font-weight:bold}粗体
使用方法：例如：<li  class=”f_l”>菜单项1</li>
1.5通用的CSS文件命名规范：
n 中大型项目（较大的项目案例、阶段项目、毕业设计、贯穿案例）
Ø global.css: 全局样式，存放网站多个页面共用的CSS风格，例如统一的字体、大小、左浮动样式定义等；
Ø layout.css：整体布局样式，存放页面整体布局的CSS代码；
n 小型项目（平时章节学习用的小案例或小的项目案例）
Ø style.css：存放所有的CSS代码
1.6推荐先定义多个标签或DIv块的共同样式，然后再分别定义各标签或块的特有样式，增加CSS的代码复用、方便修改维护，例如：
#mainMenu，#subMen { /*…….两个div块的共同样式……*/}
#mainMenu{/*…….单独定义#mainMenu块的独特样式……*/  }
#subMenu{/*…….单独定义# subMenu块的独特样式……*/  }
 
1.7推荐采用样式的简写形式，、方便修改维护，例如：常见的背景（background）、边框（border）、边界（marin）、填充（padding）常需要进行缩写，示例如下：
/*---------------------------背景样式的简写示例-------------------------------*/
.search{
   background-color: #333;
   background-image: url(../images/icon.gif);
background-repeat:no-repear;
background-position:50% 50%
}
/*--简写为--*/
.search{background:#333 url(../images/icon.gif)  no-repear 50% 50%}
 
/*--------------------------边框样式的简写示例---------------------------*/
.logo{
   ……
   border-width:5px;
   border-color:#666;
   border-style:solid
}
/*--简写为--*/
.logo{
……
border:5px solid #666;
}
 
/*--------------------------边界样式的简写示例---------------------------*/
.logo{
……
margin-top:30px;
margin-left:auto;
margin-bottom:30px;
margin-left:auto;
}
/*--简写为--*/
.logo{
……
margin:30px auto;;
}
 
/*--------------------------填充样式的简写示例---------------------------*/
.logo{
……
padding-top:10px;
padding -left:20px;
padding -bottom:40px;
padding -left:80px;
}
/*--简写为--*/
.logo{
……
padding:10px 20px 40px 80px;;
}
 
1.8 在定义CSS常用属性时，为方便团队开发和后期维护，推荐使用以下顺序：显示与定位-》元素自身-》文本外观：
Ø 显示与定位常用属性有：display,  position,  float，list-style 等
Ø 元素自身：margin, padding, width, height,  border,  background 等
Ø 文本外观：color, font,  line-height,  text-align,  text-decoration, 其他
Ø 同一类属性先后顺序不做要求，如元素自身：width, height,  margin, padding, border,  background  
1.9  网页中通用字体为宋体：
Ø 局部可使用 黑体，Arial，Tahoma；
Ø 网页字体大小必须使用12px或14px，黑体可使用18px；
Ø 网页中需要重点强调或突出的部分可加粗，黑体任何时候都不加粗。

3、JavaScript的编码规范

3.1原则：尽量遵守ECMAScript-262 标准（可以参考W3shool.com.cn中的JavaScriot教程）
 3.2命名规范
Ø 普通变量：除循环变量i,j,k等外，均采用：类型缩写+变量名，第二个单词字母大写。各种数据类型的前缀推荐使用如下：
ü iAge(整型)
ü strMessage(字符串)，
ü fPrice（浮点），
ü dtDate（日期），
ü objDiv（对象），
ü arrTag（数组），，
ü bLogic（逻辑值）
Ø 常量：全部大写
Ø 函数（方法）的命名：首字母小写； 多个单词间不使用间隔，第二个单词首字母大写。例如： function delTable（）{ ……}。
3.3注释规范：对于如下情况必须使用注释，包括：
Ø 关键性语句(如关键的变量声明，条件判断 等)；
Ø 具有复杂参数列表的方法；
3.4代码要有缩进，体现层次感。
 3.5声明规范
Ø 一行声明一个变量
Ø 不要将不同类型变量的声明放在同一行
Ø 只在代码块的开始处声明变量
Ø 方法与方法之间以空行分隔
  3.6 语句规范
Ø 每行至多包含一条简单语句
Ø 一个带返回值的return语句不使用小括号"()"
Ø if语句总是用"{"和"}"括起来
3.7 if else swith for while逻辑语句的写法：
Ø 如果用到常量判断条件，推荐将常量放在等号或不等号的左边，避免逻辑错误。例如：if ( 6 == iErrorNum ) ；
3.8 true/false和0/1判断,遵循以下规则：
Ø 不能使用0/1代替true/false；
Ø 不要使用非零的表达式、变量或者方法直接进行true/false判断，而必须使用严格的完整true/false判断；
例如：不使用if (变量) 或者if (函数()) ，而使用if (false != 变量)或者 if (false!= 函数())

四、UI界面规范

1. 原则

1.1界面美观，能够吸引用户
1.2内容健康，不涉及政治色彩、暴力、色情内容；

2.界面风格规范

2.1多个页面的网站风格保持一致，使用统一的CSS；
2.2不同界面中的同一功能应该使用同样的图标和图片。图标、图片的色调、风格尽量保持一致；
2.3推荐整个网站必须定义统一的字体和字符集。例如：宋体、utf-8
2.4网站的每个页面均出现logo标志。