WEB前端页面规范和流程.docx

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