WEB前端页面规范及流程.docxVIP

WEB前端开发规范 2015/06/05 目录  TOC \h \z \t CSS00001,1  HYPERLINK \l _Toc421277235 前期准备工作  PAGEREF _Toc421277235 \h 1  HYPERLINK \l _Toc421277236 制作网页效果图  PAGEREF _Toc421277236 \h 2  HYPERLINK \l _Toc421277237 制作网页静态页面  PAGEREF _Toc421277237 \h 3  网站策划 网站类型 网站导航 网站风格 网站功能 网页布局 网页效果图设计 前期准备工作 主要收集整理网站相关文字、图片或视频等资料 网站logo（最好有logo的源文件） 可以提出一些网站主色调、风格方案的要求 根据信息归纳出标题作为页面的主导航，根据主导航信息 需要提供详细的文字信息 各个导航主模块需要按类型提供至少需要10张高清图片（当然越多越好），图片要分类清楚，以免张冠李戴 需要提供多个网站的推广标语 首页面：根据信息总结出需要在首页展示的模块 例如：banner展示、公司介绍、新闻动态、联系我们、合作伙伴……等等 登陆页面： 是否需要第三方登录，（是，需提供第三方信息） 是否需要微信、微博、论坛等推广账号（是，需要公众账号信息） 是否需要客服热线（是，需要提供客服信息） 二级页面：需要展示的具体模块的详细信息 例如：个人中心除去基本的个人信息和账号安全以外，是否需要展示交易记录、账户明细流水……等等 网站的帮助中心页面（如果有需提供） 需要提供常见问题解答 需要提供网站须知条例 END 制作网页效果图 根据提供的网站信息资料构思 网页主色调 logo制作，使用已有的（如果没有，企划部配合制作） 网页基础的排版 运用作图软件（主要是Photoshop、Illustrator……等）制作效果图必须要做到细节处 每个模块的位置排版务必要整齐、统一、精细，细节能影响的整个页面效果 字体大小，12px、14px、16px居多，不能过大或过小（尽量在40px以内，特殊特殊情况除外） 选择字体，要以常规字体为主，如有非常规字体（手写体等）要明确指出，制作网页静态页时要切成图片（因为浏览器中自带的只有常规字体） 现下网站多为扁平化形式，尽量不要太花哨和添加样式，如果确实需要样式时，也要适可而止，不要太过明显（切记最好不要给字体加类似投影等之类的效果，真的很丑的） 根据要求先制作首页的效果图（最好多种方案，最终选择最佳方案） 根据首页版式方案风格，制作各二级、三级……等的效果图 根据整体所有页面效果图进行微调，修改细节，增删模块……等 END 制作网页静态页面 制作HTML的前期工作（注：在整套页面中个类命名时必须是英文，包括类名、文件夹名） 新建一个项目文件夹 在项目文件中分类新建CSS（样式文件夹）、images（图片文件夹）、jquery（js文件夹）、html（页面文件夹） 根据情况可以在各类文件下建立子类文件夹 根据效果图源文件，把页面中出现的图片、icon、部分背景图或部分特殊字体部分切图出来以图片的形式保存到相应的文件夹中 根据效果图进行网页排版（严格以效果图为准） 用Dreamweaver新建HTML5类型的页面文件，保存到相应的文件夹中 要明确规划好各个模块，搭建结构，每块结构之间不能有交叉，一定要先搭建机构，再调整样式 每个结构中的父级和子级之间需要明确却别，一般是需要换行，子级用Tab键缩进一个单位，以此类推，一定要保证页面整洁，及代码的可读性高 书写每个标签时都要有始有终 例如：div……/div、a……/a等等 但是，单标签除外：img、 input 、 link 等等 每个结构标签的命名，一定要清楚明了（英文字母，切记不能使用汉字命名） 在适当的位置添加注释，用来解释或标记此模块的内容 CSS样式制订 初始化样式，包括body、a、img、input、select……等的样式初始化 相同样式和结构的模块尽量用统一的Class类名，以免代码冗余 注意添加注释，增强代码可读性和可维护性 jQuery效果添加 初始化效果，一定写在【$(function)】中 一定要写清注释，以便修改和阅读 每个函数（事件）由大括号【{}】包含，每段语句都要相较于主体用Tab缩进一个单位 每段语句换行时都要以分号【;】结尾 测试语句是否执行时，可以用弹窗形式，使用弹出框语句【alert(123);】弹出框123 所有语句中的符号都必须为英文半角 以上的CSS样式和jQuery文件必须要单独列出，然后在HTML页面引用，每个页面可以引用多个CSS和jQuery文件