现代网页设计理论-项目操作规范

WEB前端项目规范云创科技专注IT教育现代网页设计项目规范项目设计规范：适用于WEB产品线的项目开发管理和人机界面设计的指导手册。规范的信息分类和整理，方便开发团队进行协作化管理，提高团队项目开发的效率。项目设计规范意义：*统一识别：规范能使页面相同单元识别统一，防止混乱。*节约资源：除活动专题等个性化页面外，可以减少其它页面的开发时间*标准化重复利用：标准化可以使同类型的页面或专栏重复使用标准模块，减少人力成本。*上手简单：在新开发者加入时，标准化可以让新手上手更快，减少磨合时间。项目管理规范目录规范：*相关目录及命名：原则上以英文小写命名，各别可用中文命名*另：根据具体项目需要，可以按情况设置，但应在根目录写详细的“项目说明.txt”文档*注：web\images\下面不要放无意义的图片，页面完成后应该将无意义的图片删除项目管理规范文件命名规范：*用小写英文全称或者中文实际含义的名称*Web目录中不得出现中文名称*对于页面初稿和修改，要保留源文件在修改的时候文件名后加日期，确定文件将日期删除做为最终文件，切勿删除和覆盖。如：index0709.psdindex0710.psdindex.psd项目管理规范网页规范：*格式：html*命名：首页(index)，栏目页(该栏目英文全称)*为保证没有歧义和项目操作方便，命名不要使用中文、中文拼音简介、引文缩写项目管理规范CSS规范：*格式：css*命名：以项目名称命名，如Vipoo，命名为vipoo.css*个栏目中的css命名：除延用总的css以外，各栏目如有特殊的样式，可以以栏目名称命名，并链接到改栏目的页面，如：about.css项目管理规范图片、flash规范：*格式：gif，一般用于颜色少的网页定位、布局图片*格式：jpg，一般用于颜色比较多的照片、广告等大幅图片*格式：png，一般用于logo和需要用与半透明地方的图片但在IE6下不支持半透明*命名：采用小写英文方式，用有实际含义的英文命名，如logo.png,banner.jpg*命名：采用模块位置类型_模块名称的方式命名，如title_bg.gif,title_list.gif等*命名：不能采用无意义的名称命名，如123.gifabc.gif等*命名：为保证图片不被浏览器屏蔽，文件名中不得出现“ad”“gg”等广告词汇网页设计规范页面规范：*页面精度为72dpi页面单位px页面颜色RGB*浏览器IE比重较大在IE下，宽度减22px（滚动条20px+边框2px），如1280-22=1258px如果分辨率是1280PX，网页宽度设成1258PX，内页设成980px；专题网页宽度可以设成1440PX，内页设成980px;颜色规范*设计时请使用256WEB安全色，在PS中选择RGB/8位，避免屏幕失色。网页设计规范字体字号规范*网页正文一律采用宋体12号（12px）字体，黑体一般很少作为正文，主要用在标题。建议用12px+14px进行混搭，避免大面积使用加粗字体。*英文字体从9px就清晰可见了，选择性很大，10px、11px、12px、13px都是常见的字体大小，字体请使用系统自带字体，如：Tahoma,Arial,Verdana网页设计规范页面布局规范版块排版在视觉上要符合纵向分割，横向模块间距统一，纵向分割可格局要求适当区分,页面必须包含头部和底部。网页设计规范页面栅格规范页面栅格要制定栅格宽度和栏间距。页面宽度980px，栏目间距：10px网页设计规范产品栅格规范页面栅格要制定栅格宽度和栏间距。产品宽度：160px，产品间距：40px/30px网页设计规范表单规范表单要制定边框颜色，宽、高、间距及按钮样式等。边框默认颜色：#A0A0A0网页设计规范表单规范网页设计规范Bar规范网页设计规范规定Bar的字体（通常宋体）、大小（12px）、宽高及颜色Tab规范网页设计规范规定Tab的字体（通常宋体）、大小（12px）、对其方式、宽高及颜色留白规范网页设计规范规定版块内容之间的间距，通常为10px按钮规范网页设计规范规定按钮颜色、字体、宽高、圆角、内边距等的尺寸图文规范网页设计规范规定图文大小、字体、间距、颜色等图文规范网页设计规范规定文本大小、字体、间距、颜色等，最佳的文本长度在45-75个字符（包括标点符号和空白）图标规范网页设计规范规定*统一视角、倒角、材质、尺寸，颜色尽量不超过3种*图标必须会意直观命名规范网页设计规范规定*标签元素命名要规范图片规范网页设计规范规定*图片输出格式jpeggifpngBanner规范网页设计规范规定*字体、大小、宽高、间距等*真实性、主题明确、形式美其它规范网页设计规范页面编码：采用UTF-8格式。页面注释：!--header开始--...!—header结束--页面禁忌:不得出现font标签，加粗的文字不使用b/b而使用strong/strong斜体问题不使用i/i，而使用em/em为每个标签设置增加结束符号“/”如br/其它规范网页设计规范命名规范：命名全部使用小写字母，单词间使用“-”分隔，比如user-list模块设置id，以英文全称命名，样式表中设置布局，不能重复样式增加class，并且可以重复使用代码结构：*div：主要用于布局，分割页面的结构*ul/ol：用于无序/有序列表*dl,dt,dd：当页面中出现第一行为类似标题/简述，然后下面为详细描述的内容时应该使用该标签，标签不要设置宽高，要设置内外边距网页设计与SEO网页设计规范*在XHTML网站设计标准中，不再使用表格定位技术，而是采用DIV+CSS的方式实现各种内容的定位。*完善标签，关键词描述不可少，添加META标签有keyword(关键词)、Description(页面描述)、robots(搜索引擎抓取器)等，图片使用alt标签进行标注说明*合理设计，避免堆砌关键词，一个页面的关键词密度保持在2%-8%之间，密度过低会导致没有好的的排名，而密度过高那么则很有可能导致被搜索引擎降权，起到相反的效果*精简冗余代码，在设计的时候要学会不留垃圾代码，可将JS放在页面代码的底部以降低对搜索引擎的影响。*尽量使用静态导航