Html+Div+Css页面及命名规范

HTML页面设计规范一、HTML规范1．页面制作完成后需检查是否与设计效果一致。2．页面中严禁出现其他客户的名称、标志及联系方式等信息。3．页面制作必须要保证在多分辨率下的显示效果。4．页面制作必须要保证在多浏览器下的现实效果。至少保证在IE6.0，IE7.0，IE8.0，IE9.0，FireFox等常用浏览器下的显示效果。5.图片文件、flash文件统一放置在images文件夹内，css样式表文件放在css文件夹内，js放在js文件夹内。普通网站原则上不再分设子文件夹；对于复杂的门户型网站，根据需要将图片放在images文件夹的不同子文件夹内。所有测试图片均放于uploads文件夹。二、图片文件1.图片文件的命名应清晰、明了，有明确含义。2.严禁使用中文字符、纯数字序列、汉语拼音、单个字母、含义不明确的缩写等命名图片。3.在保证图片质量的前提下，尽量减小图片的文件大小,以减少加载时间。依据实际情况灵活使用jpg，gif，png格式，透明图片可以使用png4.尽量避免使用半透明的png图片。5.图片命名要有规律，避免后来增补的图片直接更新会覆盖原有图片的情况。6.图片命名的一般原则，【位置单词_功能单词_文件单词_数字.扩展名】常用单词有head、top、left、right、bottom、footer、banner、nav、title、menu、logo、pic、bg、btn、ico等等；对网页中后台可维护的图片，可以简单取用p1、p2、p3等名称。对不同文件中相同位置、相同功能的图片，名称应保持一致性，如：left_menu_about.jpg、left_menu_news.jpg、left_menu_contact.jpg；banner_about.jpg、banner_news.jpg；三、页面文件1.页面文件统一使用UTF-8编码保存，请在软件工具中做好设置。2.页面文件依据其内容和功能，尽量使用标准文件名。没有标准文件名的，可取用含义贴切的英文单词，或取用页面效果的文件名。严禁使用中文或拼音命名文件。注意除news外，其他英文单词结尾一般不加s，如使用product.html，不使用products.html。3.页面文件使用html为后缀名。4.首页：index.html5.关于我们、公司介绍：about.html6.新闻列表：news.html7.新闻内容：news_content.html8.产品列表：product.html9.产品内容：product_content.html10.联系部门：contact.html11.留言本：message.html12.招聘职位：hr.html13.搜索结果：search.html14.客户案例：case.html15.所有网站中需要用到的功能性页面都必须制作，不得缺漏。如搜索结果页、网站地图页等。四、样式表文件1.样式表文件统一使用UTF-8编码保存。2.样式表文件第一行声明如下：@charsetutf-8;3.样式表文件统一命名为style.css，并存放于css文件夹内。对大型网站和有换肤功能的网站，要根据实际情况灵活处理。4.网站使用比较复杂的特效时所用的css，可以独立成一个css文件。五、代码规范--样式表1.样式表中中文字体名,请务必使用英文表示法，或者转码成unicode码,以避免编码错误时乱码，如宋体可以使用SimSun。2.如果出现页面调整，需将新增的样式放在样式表末位，并做注释（标明修改的日期），防止程序员改过样式。注意和程序员积极沟通，保持双方样式表文件内容的一致性。3.样式表中禁止统一设置table{margin-left:auto;margin-right:auto;}，这将导致后台设置的图片居左、居右没有效果。可在需要的样式中单独设置。4.导航、页码等链接的当前状态统一使用class=current，不得命名为position等其他名字。5.样式禁止使用id选择符，可能会和js程序冲突，也不方便复制使用。6.样式表注释；样式表应适当加注释，不同模块之间要适当换行，方便日后修改。7.对于样式的书写，横排竖排均可，但建议使用横排。8.书写代码前,考虑并提高样式重复使用率。六、HTML代码1.文档类型声明及编码:统一为html5声明类型!DOCTYPEhtml;编码统一为metacharset=”utf-8″/,书写时利用IDE实现层次分明的缩进。2.非特殊情况下样式文件、JavaScript文件必须外链至head/head之间，为了兼容低版本ie浏览器的JavaScript文件可以页面底部。3.语义化html,如标题根据重要性用h*(同一页面只能有一个h1),段落标记用p,列表用ul,内联元素中不可嵌套块级元素。4.尽可能减少div嵌套,如divclass=”box”divclass=”welcome”欢迎访问XXX,您的用户名是divclass=”name”用户名/div/div/div完全可以用以下代码替代:divclass=”box”p欢迎访问XXX,您的用户名是span用户名/span/p/div。5.重要图片必须加上alt属性，给重要的元素和截断的元素加上title。6.特殊符号使用:尽可能使用代码替代:比如(<)(>)空格( )等等;7.能做成文字的尽量做成文字，不要做成图片。8.避免在Dreamware中自动生成垃圾代码。9.应使用尽可能少的代码达成页面效果，不得有无用的和无效的代码。避免在代码中产生多余的空行和空格。10.除标准代码外，其他html标签及其属性值一律使用小写字母。11.html标签应拼写正确，属性值应使用双引号括起来，不得出现错误。12.html标签应完整成对，正确闭合。独立标签使用/闭合时，/前要留一个空格。13.复制其他网站的代码时需仔细检查，不得出现多余代码、多余样式、标签未闭合、标签错误、多余的JS函数调用等情况。14.代码缩进，缩进大小为1个制表位，制表位大小为4个空格。提前在Dreamweaver中的：“首选参数”→“代码格式”中做好设置，制作完页面后，在代码视图下格式化代码。七、页面布局1.页面各个模块之间可以根据需要进行class命名，具体命名法则见附录一。2.尽量减少Table的嵌套层数，一般不要超过3层。头部和底部内容应和中间主体部分代码分开，方便做成包含。尤其要尽量避免将整个页面放在一个Table中的情况，特别是首页，应尽量按其效果切成多行，而不是多列。3.避免对同一级别的对象分别使用百分比和象素值控制宽度。4.严禁使用rowspan合并表格。（仅限用table做页面布局）5.排版应使用 留空，严禁使用中文全角空格。较多的空格，或内容与边界之间无意义的空格，应使用样式定义。6.间距尽量使用margin和padding控制，不要使用table占位。亦不得使用如divstyle=”height:10px;”/div这样的空标签占位，尽量用类似margin-top:10px;的方式实现。7.避免为包含后期维护内容的容器设置高度。因为当内容超出容器时，IE浏览器会将容器自动撑开；而FF浏览器会保持容器大小，内容显示到容器之外。八、形象页、页头页尾1.主导航栏各栏目宽度一般应保持一致。2.CopyRight中应使用©符号表示。3.页尾要有备案号链接、要有技术支持:邯郸市连邦软件发展有限公司，必须要链接到正确的网址并在新窗口中打开。4.页面声明及head部分使用统一标准代码。5.页尾的联系信息应制作在一个相对独立的模块中。九、内容显示1.首页动画文件使用标准插入FLASH代码实现，必须要有替换显示图片。2.页面栏目文字应和设计效果保持一致。3.文字标题所在的容器尽量不要控制宽度，防止出现栏目名过长，导致变形。背景尽量做成可重复、自适应的，不要做成固定长度的特殊背景。类似首页-关于我们-公司概况这样的导航要考虑到二级栏目名称较长时不会换行，如果定义了宽度，建议加上overflow:hidden样式。4.需要显示日期的，要注意留有足够的空间，一定要测试类似2009-12-28这样的日期是否可以正常显示。5.内容、新闻列表、图片列表等显示模式必须使用标准div代码来处理，禁止再使用table布局。6.新闻列表页，在文字标题超长换行时，也要保证显示效果。尤其在交替行换色时，注意保持交替行的行高一致性。7.图片列表中要至少有一个图片显示为“暂无图片”，可以根据实际情况选择使用文字或图片达成效果。无图时建议加个细线边框，效果更美观。8.所有带边框修饰的图片，其边框或修饰背景不得与图片切为一张整图，且样式最好不要定义到img标签上，建议定义到外层容器上。9.要避免在图片数量不固定，特别是不能占满一行时，图片列表变形。10.缩略图在网站各个显示的地方要大小一致，最低限度也要保持比例一致。11.可维护的图片长宽尽量取整数，并尽量将长宽比保持在4比3。12.一般在内页不截取标题，所以在内页一定要处理好新闻标题或图片标题过长时导致换行的情况，尤其是背景要处理好。13.纯色直角边框、纯色背景、纯色的实线、虚线等用样式就可以处理的地方，不要用高度1的表格或div来做线，更不要使用图片处理。14.可用1像素背景图平铺的，不得切成一张大图。15.后台编辑器维护的文字块内容，不要把默认文字样式加在p标签上，而是定义在tdp，或divp上，因为编辑器会在维护的文字内容外自动生成p标签。十、页面模块注释可写如下样式：--footer--内容区--Endfooter--十一、表单1.页面上出现的select选择框，应定义其宽度。2.表单必须使用form标签实现。3.表单中的提交、重置等按钮效果为图片时，必须使用inputtype=”submit”标签形式实现，不得做成a标签，也不得做成inputtype=”image”标签。4.几个常规功能，包括在线留言、人才招聘、联系我们的表单，要使用标准代码。5.登陆表单的密码输入框必须使用inputtype=”password”实现，注意保持用户名和密码两个输入框的宽度一致。6.单行文本输入框中的文字必须要保持垂直居中。7.单行文本框(text)和多行文本框(textarea)中的文字要保持字体一致、颜色一致。十二、CSS命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenter登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态态：status投票：vote合作伙伴：partner注释的写法/*Footer*/内容区/*EndFooter*/id的命名容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenterid的命名页面结构容器:container页头：header内容：content/container页面主体：main页尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：leftrightcenter导航导航：nav主导航