网站前端开发作业实操指南

来源：互联网 2026-06-26 08:18:06

近期公司开展网站开发工作，需要编写一份工作指导书。本文档来源于实际项目沉淀，核心解决三个问题：客户需求如何衔接、设计稿如何落地、代码质量如何把控。以下为具体内容。网站前端开发作业指导书 1、目的为更好满足客户对网站页面的要求，建立一套从设计到开发的可复用标准流程。 2、范围适用于网页设计师的网

近期公司开展网站开发工作，需要编写一份工作指导书。本文档来源于实际项目沉淀，核心解决三个问题：客户需求如何衔接、设计稿如何落地、代码质量如何把控。以下为具体内容。

网站前端开发作业指导书

1、目的

为更好满足客户对网站页面的要求，建立一套从设计到开发的可复用标准流程。

长期稳定更新的攒劲资源： >>>点此立即查看<<<

2、范围

适用于网页设计师的网站前台开发工作。

3、前端开发流程图

（此处为流程图占位，实际项目中需根据团队习惯绘制）

4、流程说明

4.1 客户提出网站设计要求。

4.2 网页设计师根据客户要求设计页面效果图。

4.3 项目负责人审核设计页面。符合要求则提交客户审核，不符合则返回设计师重新设计。

4.4 客户审核设计页面。符合要求则填写版面确认书，不符合则返回设计师重新设计。

4.5 设计师将客户审核通过的效果图转换为HTML静态页面。

4.6 网页设计师与后台程序员共同将静态页面与后台程序整合。

5、技术要求

PSD转HTML编码流程

设计制作效果图规范

尺寸：为兼容1024×768分辨率显示器，宽度不宜超过1007像素，推荐使用950px、960px、980px。

颜色：显示器存在色差，设计时必须使用216种WEB安全色。

渐变：渐变容易使图片文件体积迅速增大，应避免过多或过于复杂的渐变。

输出：在不明显损坏图片质量的前提下，应转换为索引颜色模式，最大限度缩小图片体积。输出格式使用PNG或GIF。

图层：相关图层放到一个组中，每个图层和组均需使用易于理解的名字，组可嵌套。

XHTML编码规范

使用过渡型（Transitional）XHTML 1.0 DTD编写网页。每个HTML页面的基本结构必须如下：





无标题文档


内容

CSS和JavaScript必须使用外部调用的方式。例如：

所有标记都必须有结束标记。单独不成对的标签，在标签最后加“/”来关闭。例如：

...

或

、。

所有标签的元素和属性名字必须用小写。例如：应写为；onMouseOver 应写为 onmouseover。

所有XHTML标记必须合理嵌套，不能出现

...

，必须写成 ...。

所有属性必须用引号括起来，例如必须改为。

不要在注释内容中使用“--”，应使用“=”代替。例如应改为。

使用语义标签，每个区块的划分必须有注释。表现与结构分离，代码中严格控制涉及任何表现元素，如style、font、bgColor、border等。标签必须有alt属性。

CSS编码规范

总体规范：CSS代码按固定格式编写，属性之间不换行。属性顺序按“显示属性（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）”编写。按照XHTML层级缩进CSS定义，如 #nav{} #nav #sub_nav{}。不同块之间用空行或注释隔开。编写的样式应在主流浏览器中解析正常（不要求完全一致，但需美观且差异不大）。

CSS样式表各区块用注释说明，写法：/* Footer */ 内容区 /* End Footer */。

CSS选择器命名规范：id和class采用该版块的英文单词或组合命名，做到见名知意，单词之间用下划线连接（如new_release），不能采用驼峰标识。颜色使用名称或16进制代码，如 .red { color: red; }、.ff8600 { color: #ff8600; }。字体大小直接用“font_字体大小”命名，如 .font_12px。对齐样式使用目标英文名称，如 .left { float:left; }。标题栏样式用“类别_功能”方式命名，如 .bar_news。

页面结构命名参考：容器—#container/#layout，头部—#head/#header，尾部—#foot/#footer，侧栏—#sidebar，左边栏—#sidebar_left，右边栏—#sidebar_right，页面主体—#main，栏目—#column，包装—#wrapper/wrap，内容—#content。

导航命名参考：导航—#nav，主导航—#main_nav，顶导航—#top_nav，左/右导航—left_nav/right_nav，下导航—bottom_nav，二级导航—#sub_nav，菜单—#menu，二级菜单—#sub_menu，下拉—.drop/.drop_menu。

功能命名参考：标签—.tab/.tag，消息—.msg/.message，提示—.tips，注释—.note，热点—.hot，摘要—.summary，帮助—.help，投票—.vote，指南—.guild，商标—.branding，工具条—.tool/.tool_bar，标题—.title，LOGO—.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_shot，产品—products，产品价格—products_prices，产品描述—products_description，产品评论—products_review，最新产品—new_products，生产商—publisher，编辑—editor，编辑评论—editor_review，博客—blog，论坛—bbs，新闻—news，下载—download，网站信息—.site_info，法律声明—.legal，信誉列表—.credits.list。

其他命名：左/中/右—left/center/right，上/中/下—top/middle/bottom，按钮—btn，面包屑—bread_crumb，滚动—scroll，当前—current，图标—icon，箭头—arrow，首页—home_page，二级页面—sub_page，状态—status，常见问题—faq，关键词—keyword。

CSS文件命名规范：基本的样式表（每个文件都要引用）命名为default.css，用于定义整站风格（默认字体、链接样式等）。布局样式表命名为layout.css，一般分为首页布局、二级页面布局、详细页面布局等，块间用注释隔开。头部、底部、导航等单独模块要定义单独的CSS文件，名称与页面名称相同，如head.css。首页单独定义index.css。其他页面可共用一个或按栏目共用多个CSS文件，如page.css、news.css等。特殊功能单独定义，如lightBox.css。

JavaScript编码规范

JavaScript程序应独立保存在后缀为.js的文件中。除非代码只属于特定部分，否则不能被包含在HTML文件中。JavaScript引用尽量放到body的后面，以减少延迟加载。

注释：代码必须有注释，且与代码一样清晰明了，避免冗长或情绪化。注释需及时更新。

变量声明：所有变量必须在使用前声明。将var语句放在函数首部，每个变量声明单独一行并加注释。例如：

var currentEntry; // 当前选择项
var level;        // 缩进程度
var size;         // 表格大小

函数声明：所有函数在使用前声明。内函数的声明跟在var语句后面。函数名与左括号之间不要有空格，右括号与开始程序体大括号之间应插入一个空格。函数体缩进一个TAB键。右大括号与声明函数那一行头部对齐。例如：

function outer(c, d) {
    var e = c * d;
    function inner(a, b) {
        return (e * a) + b;
    }
    return inner(0, 1);
}

命名：变量名由字母、数字和下划线组成。大多数变量名和方法名以小写字母开头，构造函数名以大写字母开头。全局变量全部大写。

语句规范：

简单语句：每行最多只包含一条语句，以分号结尾。函数赋值或对象赋值也是赋值语句，要以分号结尾。

复合语句：被包含在大括号内的语句序列，被括起的语句必须多缩进一个TAB键。左大括号应在复合语句起始行的结尾处。右大括号与左大括号那一行的开头对齐。即使只有一条语句，在控制结构（如if或for）中也要使用大括号，避免添加语句时出错。

return语句：有返回值的return不要用括号括住返回值。如果返回表达式，表达式应与return关键字在同一行。

if语句格式：

if (condition) {
    statements;
}
if (condition) {
    statements;
} else {
    statements;
}
if (condition) {
    statements;
} else if (condition) {
    statements;
} else {
    statements;
}

for语句格式：

for (initialization; condition; update) {
    statements;
}
for (variable in object) if (filter) {
    statements;
}

对象循环中，通过 hasOwnProperty 区分真正的成员：for (variable in object) if (object.hasOwnProperty(variable)) { statements; }。

while语句：

while (condition) {
    statements;
}

do语句：

do {
    statements;
} while (condition);

与其他复合语句不同，do语句总是以分号结尾。

switch语句：

switch (expression) {
case expression:
    statements;
default:
    statements;
}

每个case与switch对齐。每一组statements（除了default）应以break、return或throw结尾，不要顺次往下执行。

try语句：

try {
    statements;
} catch (variable) {
    statements;
}
try {
    statements;
} catch (variable) {
    statements;
} finally {
    statements;
}

避免使用continue语句，它易使程序逻辑晦涩。不要使用with语句。

空白使用：用空行分割逻辑相关的代码块。空格使用规则：关键词与左括号之间（如while (true)）；函数参数与左括号之间不要有空格（以区分关键字与函数调用）；所有二元操作符（除了点、左括号、左方括号）应用空格与操作数隔开；一元操作符与操作数之间无空格（除非操作符是单词如typeof）；for语句分号后须跟空格；逗号后须跟空格。

实际工作流程补充：

根据需求分析，利用Photoshop等图形工具制作PSD效果图。然后根据效果图，利用XHTML/CSS/JavaScript/DOM/Flash等技术进行界面开发。开发JavaScript及Flash模块增加交互功能，致力于通过技术改善用户体验。最后结合后台程序，从后台接口获取数据整合到前台界面显示。同时，需持续进行WEB前端新技术的调研和学习。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述