web前端制作标准蓝本.doc

得意生活制作标准要求蓝本1. CSS属性应用原则原则 1：所有页面必须满足XHTML 1.0 Transitional标准,及头部包含以下代码：原则 2：所有页面文件的编码格式统一为：gb2312或utf-8其中一种，例如：;原则 3：首页，子页都出现的块，或相同的表现形式要做包含文件（例如头部、脚注公用部分）。原则4： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clearclear:both;height;0px; overflow: hidden; 原则 5：首页DIV最小块级单位须设置高度或最小高度为保证栏目边框对齐;子页可能添加资料的DIV块不设置高度;详细页面宽度固定,设置隐藏属性;原则 6：对于尺寸固定（例如调用文章标题列表数目固定）的块须设置属性“overflow:hidden;”防止意外内容造成的块被撑开影响其它布局元素。原则 7:在进行样式定义的时多使用类class少使用ID，在框架结构、表单以及js部分可以使用ID。原则 8:所有的插入图片需要定义“alt”属性在图片无法显示时作为说明，所有的文章列表链接增加“title”属性，如图在链接未完全显示时可以作为提示：。原则9：为避免li以及dd列表前小图标在各浏览器中的显示差异，建议采用将图标作为不重复背景图片显示。写法例如：ddbackground:url(li.gif) no-repeat 10px 12px; padding-left:15px;2. CSS样式表命名原则网站页面不多，一个样式表就可以包含所有页面的样式，因此样式表的命名统一可以是style.css；若网站页面多，形式复杂，可以采用将样式表分离的形式，有利于单个网页样式的加载速度。3. 页面框架结构命名页面容器：wrap页面头部：#header页面中心内容：#content页面底部：#footer横向方位容器1：main，side 2.minimain,miniside横向方位容器2：leftframe，midframe，rightframe横向分段容器：section，field，column盒子模型：mod盒子中间属性：mod_m盒子内容属性：contbg盒子上方属性：mod_t盒子下方属性：mod_b 盒子左边属性：mod_l盒子右边属性：mod_r图示：4. 页面功能命名列表：list标题：title摘要：intro内容：text按扭：btn搜索：search登陆：login注册：regsiter提示信息：msg小技巧：tips图标: icon滚动：scroll图片: photo详细信息：detail页码: page打印：print5.导航保留字导航：nav主导航：mainnav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu下拉菜单：dropmenu快速菜单：quickmenu6.根目录文件夹命名存放方式例如：网站根目录中文件夹规则：images存放所有样式图片，或直接插入图片。（包括flash）imagestemp存放所有网站直接插入，但后期一定被程序替换的图片。(包括广告图片)style存放样式文件夹js存放网站所有的JS效果文件所有页面，包括包含页面均存放在根目录下面即可图示：7.注释页面内注释格式为 -为开始 -为结束另，涉及到具体的版块，可以以版块的中文命名注释。例：样式表内注释格式为：/*header begin*/*header end*/8.常见版块命名topbar头部最上行的框架mininav加入收藏, 设为首页，联系我们 （头部出现的迷你类型导航）banner页面大的动画（广告）button页面小广告或链接图片logo企业网站的图标,公司名logomantle切换图片区域，轮显图片区域title栏目标题cont栏目正文product产品介绍，产品展示，样品介绍，样品展示notice最新公告，企业公告，公告信息search搜索about公司简介，公司介绍，企业概况，公司概况news新闻动态，动态新闻，新闻中心，新闻资讯，企业新闻，公司新闻，行业资讯，行业新闻，新闻发布，新闻讯息contact联系我们, 联系方式message留言版，留言信息，在线留言，留言反馈，反馈信息，客户留言，客户反馈，在线咨询，网上留言，请您留言，在线交流service服务项目，服务内容，售后服务culture企业文化, 公司文化partner合作伙伴project / case工程案例, 成功案例range应用范围，应用领域，经营范围如遇有特殊版块 可以使用版块的英文含义或则拼音缩写命名，例如：武汉购物：wh_shop靓女型男：man_girl武汉美食：wh_ Delicious武汉休闲：wh_xiuxian武汉是我家：wh_home商业街：street。9.内页样式命名内页页面命名可以使用英文或拼音缩写，列如婚嫁栏目ny_hunjia 内页列表页(ny_list) 内页产品页面(ny_product) 单页面(ny_dan)10.网站制作大致流程：1. 查看浏览页面，准确找到页面的公共版块，包含版块以及JS效果部分。2. 建立根目录，按根目录文件命名方式把各文件夹建立好。3. 然后切片，把样式图片最小化切下来。（保留切片痕迹另存下来。防止后期更改时可以查阅。）4. 制作页面。准确，快速的完成页面的制作，并检验兼容性。保证页面在IE6.0,IE7.0,IE8.0,FIREFOX以及CHROME主流浏览器中显示正常，整体差别不大。查看JS效果是否兼容。5. 对于制作的各个细节要有清晰的认识和了解。保证页面后期的更改要能及时准确的完成。6. 最后把所有网站页面文件信息填写进readme里面，存放在根目录下，readme文本文件说明页面文件与栏目的对应关系以及引用的样式以及js文件。（页面制作过程中对设计意图，或者效果区域有疑问，应及时向设计师，或程序员了解详细情况，避免不必要的错误）备注：A 使用全局样式消除各浏览器间默认差异以及添加常用公用样式:/*全局样式 begin*/body font-family: 宋体;font-size: 12px;color: #000;margin: 0px;padding: 0px;div,ul,li,h1,h2,h3,h4,h5,h6,img,p,dl,dt,dd,ol,th,tdmargin: 0px;padding: 0px;li list-style-type: none;form,input,button,option,textarea,select margin: 0px;padding: 0px;input,button,textarea,selectfont:100% Tahoma,Helvetica,Arial,sans-serif;a color: #000;text-decoration: none;a:link text-decoration: none;a:visited text-decoration: none;a:hovertext-decoration: underline;a:active text-decoration: underline;table font-size:inherit;font:100%;th font-weight:normal;img border: 0;h3 font-size: 14px; color: #000;h4 font-size: 12px;.clear clear: both; height: 0px; overflow: hidden;.section width: 100%; clear:both; padding-bottom: 12px; float: left;.column width: 100%; clear: both; float: left;.field width: 100%; clear: both; float: left;.font_red color: #990912;.font_bule color: #115385;.font_orange color: #FF6800;/*全局样式 end*/B 常用代码半透明background:#000000; filter:alpha(opacity=80); opacity:0.8;图片高亮.pictures img filter: alpha(o