网站前端开发作业指南
网站前端开发作业指导书
1、目的：
为了更好的满足客户对网站页面的要求；
2、范围：
适应于网页设计师的网站前台开发；
3、前端开发流程图
4、流程说明
4.1客户提出网站设计的要求；
4.2网页设计师根据客户的要求，设计页面效果图；
4.4项目负责人对设计的页面进行审核，如果符合要求交给客户审核，如不符合要求，则返回给设计师重新设计；
4.4 客户对设计的页面进行审核，如果符合要求，须填写版面确认书，如不符合要求，则返回给设计师重新设计；
4.5 设计师把客户审核通过的效果图转换成HTML静态页面；
4.6、网页设计师与后台程序员共同将完成的静态页面和后台程序进行整合。
5、技术要求
5、PSD转HTML编码流程
2设计制作效果图规范
1、尺寸
为能兼容1024*768分辨率的显示器，2、宽度不3、能超过1007像素，4、推荐使用950px，5、960px，6、980px。
7、颜色
由于不同8、的显示器之间存在色差，9、设计是必须只使用218种WEB安全色。、
10、渐变
渐变容易使图片文件体积迅速增大，11、避免过多过于复12、杂的渐变。
13、输出
在不14、明显损坏图片质量时，15、要转换为索引颜色模式，16、最大限度的缩小图片体积。输出使用PNG或GIF格式。
17、图层
相关的图层放到一个组中，18、每个图层和组都要有一个易于理解的名19、字。组可以嵌套。
3XHTML编码规范
1、使用过度的（Transitional）XHTML1.0DTD编写网页。
每个HTML页面的基本结构必须是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标2、题文档</title>
</head>
内容
<body>
</body>
</html>
3、CSS和JavaScript必须使用外部调用的方式。
例如：
<link rel=”stylesheet” rev=”stylesheet” href=”css/style.css” type=”text/css” media=”all” />
<script type=”text/javascript” src=“js.javascript.js”></script>
4、所有的标5、记都必须要有一个相应的结束标6、记。
所有标7、签必须关闭。假如是单独不8、成对的标9、签，10、在标11、签最后加一个"/"来关闭它。例如：
<div>…</div>
或者
<br /><img alt="…" src="…" />
12、所有标13、签的元素和属性的名14、字都必须使用小写。
所有的标15、签和属性都要用小写。例如：
<BODY></BODY>
要写成
<body></body>
onMouseOver=”…”
要写成
onmouseover=””
16、所有的XHTML标17、记都必须合理嵌套。
也就是说所有的标18、签必须对齐。例如不19、能出现
<p><b>…</p></b>
而20、要是
<p><b>…</b></p>
21、所有的属性必须用引号""括起来。
<height=80>必须修改为：<height="80">
22、不23、要在注释内容中使“–”，24、一定要使用可用“=”代替。
“–”只能发生在XHTML注释的开头和结束，25、例如：
<!–这里是注释———–这里是注释–>
要改为
<!–这里是注释============这里是注释–>
26、使用语义标27、签。
28、每个区块的划分必须有注释。
29、表现与结构分离，30、代码中严格控制涉及任何的表现元素。如style、font、bgColor、border等。
31、<img />标32、签必须有alt属性。
4CSS编码规范
1、总体规范
4.1.1CSS代码要按照固定格式编写，4.1.2属性之间不4.1.3换行。
4.1.4属性按照“显示属性”（display ?list-style? position? float?clear）——“自身属性”（width??height? ?margin? padding?border? ?background ）——“文本属性”（color font text-decoration text-align vertical-align white-space other text content）的顺序来编写。
4.1.5按照XHTML的层级来缩进CSS的定义。加强代码的结构性。如：
#nav{}
#nav #sub_nav{}
4.1.6不同4.1.7的块之间要用空行或者注释隔开。
4.1.8编写的样式要在主流浏览器中解析正常。（正常并不4.1.9要求在每种浏览器都有中都有一摸一样的样式，4.1.10但要求在每种浏览器里都比较美观且相差不4.1.11大。）
2、CSS样式表各区块用注释说明
注释的写法:
/* Footer */
内容区
/* End Footer */
3、CSS选择器的命名4、规范
4.4.1id和class命名4.4.2采用该版块的英文单词或组合命名，4.4.3要做到见名4.4.4之意，4.4.5单词之间采用下划线链接new_Release。注意不4.4.6能采用“驼峰标4.4.7识”的写法。
4.4.8颜色:使用颜色的名4.4.9称或者16进制代码,如
.red { color: red; }
.ff8600 { color: #ff8600; }
4.4.10字体大小,直接使用"font_字体大小"作为名4.4.11称,如
.font_12px { font-size: 12px; }
.font_9pt {font-size: 9pt; }
4.4.12对齐样式,使用对齐目标4.4.13的英文名4.4.14称,如
.left { float:left; }
.bottom { float:bottom; }
4.4.15标4.4.16题栏样式,使用"类别_功能"的方式命名4.4.17,如
.bar_news { }
.bar_product { }
4.4.18页面结构
容器布局头部尾部侧栏
#container#layout#head、#header#foot、#footer#sidebar
左边栏右边栏页面主体栏目包装/外套
#sidebar_left#sidebar_right#main#column#wrapper、wrap
内容
#content
4.4.19导航
导航主导航顶导航左导航右导航
#nav#main_nav#top_navleft_navright_nav
下导航二级导航菜单二级菜单下拉
bottom_nav#sub_nav#menu#sub_menu.drop
下拉菜单
. drop_menu
4.4.20功能
标签提示信息小技巧注释热点
.tab、.tag.msg、.message.tips.note.hot
摘要帮助投票指南商标
.summary.help.vote.guild.branding
标签工具条标题LOGO搜索
.label.tool、.tool_bar.title.logo.search
搜索条搜索框搜索输入框搜索输出框搜索结果
.search_bar.search_box.search_input.search_output.search_results
注册登录登录条登录框友情链接
.register.login.login_bar.login_box.friend_link
广告/标语版权信息加入我们合作伙伴服务
.banner.copyright.join_us.partner.service
网站地图缩略图产品产品价格产品描述
.site_map.screen_shotproductsproducts_pricesproducts_description
产品评论最新产品生产商编辑编辑评论
products_reviewnew_productspublishereditoreditor_review
博客论坛新闻下载网站信息
blogbbsnewsdownload.site_info
法律声明信誉列表
.legal.credits.list
4.4.21其他
左中右上中下按钮面包屑滚动
left、center、righttop、middle、bottombtnbread_crumbscroll
当前：图标箭头首页二级页面
currenticonarrowhome_pagesub_page
状态常见问题关键词
statusfaqkeyword
5、CSS文件命名6、规范
4.6.1基本的样式表，4.6.2每个文件都要引用的命名4.6.3为： default.css。
该文件用于定义整站的风格，4.6.4如站点的默认字体大小，4.6.5默认链接样式，4.6.6等。
4.6.7用于布局的样式表命名4.6.8为：layout.css。
一般分为首页布局，4.6.9二级页面布局，4.6.10详细页面布局等几个块，4.6.11块与块之间要用注释隔开。
4.6.12头部，4.6.13底部，4.6.14导航等单独的页面模块要单独的定义一个CSS文件。名4.6.15称和页面名4.6.16称相同4.6.17。如：head.css
4.6.18首页要单独定义一个CSS文件：index.css。
4.6.19其他页面可更具情况共用一个或按照网站栏目共用几个CSS文件。如：page.css、news.css等等。
4.6.20特殊功能可以单独定义一个CSS文件，4.6.21如lightBox.css。
5JavaScript编码规范
1、JavaScript文件
JavaScript程序应独立保存在后缀名2、为.js的文件中。JavaScript代码不3、能被包含在HTML文件中,除非这是段特定只属于此部分的代码。JavaScript引用应尽量放到body的后面。这样可以减少因为载入JavaScript而4、造成其他页面内容载入也被延迟的问题。
5、注释
代码必须有注释。以便给以后需要理解你的代码的人们(或许就是你自己)留下信息。注释要和所注释的代码一样是书写良好且清晰明了。避免冗长或者情绪化。及时地更新注释。避免错误的注释存在于程序中。
6、变量声明
所有的变量必须在使用前进行声明。将var语句放在函数的首部。把每个变量的声明语句单独放到一行,并加上注释说明。
var currentEntry; // 当前选择项
var level;// 缩进程度
var size; // 表格大小
7、函数声明
所有的函数在使用前进行声明。 内函数的声明跟在var语句的后面。
函数名8、与((左括号)之间不9、要有空格。)(右括号)与 开始程序体的{(左大括号)之间应插入一个空格。函数程序体应缩进一个TAB键。}(右大括号)与声明函数的那一行代码头部对齐。
function outer(c, d) {
var e = c * d;
function inner(a, b) {
return (e * a) + b;
}
return inner(0, 1);
}
10、命名11、
变量名12、由26个大小写字母(A..Z,a..z),10个数字(0..9),和_(下划线)组成。大多数的变量名13、和方法命应以小写字母开头。必须与new共同14、使用的构造函数名15、应以大写字母开头。全局变量要全部大写。
16、语句
5.16.1简单语句
每一行最多只包含一条语句。把;(分号)放到每条简单语句的结尾处。注意一个函数赋值或对象赋值语句也是赋值语句,要以分号结尾。
5.16.2复5.16.3合语句
复5.16.4合语句是被包含在{ }(大括号)的语句序列。被括起的语句必须多缩进一个TAB键。 {(左大括号)应在复5.16.5合语句其实行的结尾处。 }(右大括号)应与{(左大括号)的那一行的开头对齐大括号要在所有复5.16.6合语句中使用,即使只有一条语句,当它们是控制结构的一部分时, 比如一个if或者for语句。这样做可以避免以后添加语句时造成的错误。
5.16.7return 语句
一条有返回值的return语句不5.16.8要使用( )(括号)来括住返回值。如果返回表达式,则表达式应与return 关键字在同5.16.9一行。
5.16.10if 语句
if语句应如以下格式:
if (condition){
statements;
}
if (condition) {
statements;
} else {
statements;
}
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}
5.16.11for 语句
for语句应如以下格式:
for (initialization;condition; update) {
statements;
}
for (variable in object)if (filter) {
statements;
}
第一种形式的循环用于已经知道相关参数的数组循环。第二种形式应用于对象中。object原型中的成员将会被包含在迭代器中。通过预先定义hasOwnProperty方法来区分真正的object成员：
for (variablein object) if (object.hasOwnProperty(variable)){
statements;
}
5.16.12while 语句
while语句应如以下格式:
while (condition){
statements;
}
5.16.13do 语句
do语句应如以下格式:
do {
statements;
} while (condition);
不5.16.14像别的复5.16.15合语句,do语句总是以;(分号)结尾。
5.16.16switch 语句
17、switch语句应如以下格式:
switch (expression){
case expression:
statements;
default:
statements;
}
每个 case与switch对齐。每一组statements(除了default应以 break,return,或者throw结尾。不18、要让它顺次往下执行。
5.18.1try 语句
try语句应如以下格式:
try {
statements;
} catch (variable){
statements;
}
try {
statements;
} catch (variable){
statements;
} finally {
statements;
}
5.18.2continue 语句
避免使用continue语句。它容易使得程序的逻辑过程晦涩难懂。
5.18.3with 语句
不5.18.4要使用with语句。
19、空白
用空行来将逻辑相关的代码块分割开可以提高程序的可读性。空格应在以下情况时使用:跟在((左括号)后面的关键字应被一个空格隔开。while (true) {函数参数与((左括号)之间不20、要有空格。这能帮助区分关键字和函数调用。所有的二元操作符,除了.(点) 和((左括号)和 [(左方括号)应用空格将其与操作数隔开。一元操作符与其操作数之间不21、应有空格,除非操作符是个单词,比如typeof。每个在控制部分,比如for 语句中的; (分号)后须跟一个空格。每个,(逗号)后应跟一个空格。
22、根据需求分析利用Photoshop等图形图像工具制作页面PSD效果图。
23、根据效果图利用XHTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。
24、开发JavaScript以及Flash模块，25、增加交互动态功能。致力于通过技术改善用户体验。
26、结合后台程序，27、从后台接口获取数据整合到前台界面显示。
28、WEB前端新技术的调研和学习。
