web前端制作准蓝本.doc

得意生活制作标准要求蓝本 CSS属性应用原则 原则 1：所有页面必须满足XHTML 1.0 Transitional标准,及头部包含以下代码： 原则 2：所有页面文件的编码格式统一为：gb2312或utf-8其中一种，例如： ; 原则 3：首页，子页都出现的块，或相同的表现形式要做包含文件（例如头部、脚注公用部分）。 原则4： 对于浮动所产生的IE6BUG,在全局样式里面应定义.clear{clear:both;height;0px; overflow: hidden; } 原则 5：首页DIV最小块级单位须设置高度或最小高度为保证栏目边框对齐;子页可能添加资料的DIV块不设置高度;详细页面宽度固定,设置隐藏属性; 原则 6：对于尺寸固定（例如调用文章标题列表数目固定）的块须设置属性“overflow:hidden;”防止意外内容造成的块被撑开影响其它布局元素。 原则 7:在进行样式定义的时多使用类class少使用ID，在框架结构、表单以及js部分可以使用ID。 原则 8:所有的插入图片需要定义“alt”属性在图片无法显示时作为说明，所有的文章列表链接增加“title”属性，如图在链接未完全显示时可以作为提示：。 原则9：为避免li以及dd列表前小图标在各浏览器中的显示差异，建议采用将图标作为不重复背景图片显示。 写法例如：dd{background:url(li.gif) no-repeat 10px 12px; padding-left:15px;} CSS样式表命名原则 网站页面不多，一个样式表就可以包含所有页面的样式，因此样式表的命名统一可以是style.css； 若网站页面多，形式复杂，可以采用将样式表分离的形式，有利于单个网页样式的加载速度。 页面框架结构命名 页面容器：＃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 图示： 页面功能命名 列表：list 标题：title 摘要：intro 内容：text 按扭：btn 搜索：search 登陆：login 注册：regsiter 提示信息：msg 小技巧：tips 图标: icon 滚动：scroll 图片: photo 详细信息：detail 页码: page 打印：print 5.导航保留字 导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 下拉菜单：dropmenu 快速菜单：quickmenu 6.根目录文件夹命名存放方式 例如： 网站根目录中文件夹规则： images 存放所有样式图片，或直接插入图片。（包括flash） imagestemp 存放所有网站直接插入，但后期一定被程序替换的图片。(包括广告图片) style 存放样式文件夹 js 存放网站所有的JS效果文件 所有页面，包括包含页面均存放在根目录下面即可 图示： 7.注释 页面内注释格式为 !--header-- 为开始 !--//header-- 为结束 另，涉及到具体的版块，可以以版块的中文命名注释。 例： !—武汉购物-- !—//武汉购物-- 样式表内注释格式为： /*header begin*/ /*header end*/ 8.常见版块命名 topbar 头部最上行的框架 mininav 加入收藏, 设为首页，联系我们… （头部出现的迷你类型导航） banner 页面大的动画（广告） button 页面小广告或链接图片 logo 企业网站的图标,公司名logo mantle 切换图片区域，轮显图片区域 title 栏目标题 cont 栏目正文 product 产品介绍，产品展示，样品介绍，样品展示… notice 最新公告，企业公告，公告信息… search 搜索 about 公司简介，公司介绍，企业概况，公司概况… news 新闻动态，动态新闻，新闻中心，新闻资讯，企业新闻，公司新闻，行业资讯，行业新闻， 新闻发布，新闻讯息… conta