开发部Web界面设计标准
版本修订历史
起止日期
作者/修订人
更改章节
修改描绘
版本/状态
1.目录构造标准
1)目录建立原那么：以最少的层次提供最明晰的访问构造。
2)目录的命名以小写英文字母、下划线组成。
3)根目录一般只放index.html已经其他必须的系统文件。
4)根目录下的images用于存放各页面都要使用的公用图片。
5)所有JS等脚本存放在根目录下的scripts或js目录。
6)所有CSS文件存放在根目录下的style或css目录。
2.设计命名标准
页面根本框架构造
      container
                            header
                                                          navbar
    menu
                                                          main
                                                          sidebar
                              footer
container—就是将页面中的所有元素包在一起的部分
header—是页面的头部区域，一般来讲，它包含网站的logo和其他一些元素
navbar—等同于横向的导航栏，是最典型的页面元素，也可以命名为nav
menu—此区域包含一般的链接和菜单，也可以命名为subNav,links
main—是网站的主要区域，也可以命名为content
sidebar—此区域包含网站的次要内容，例如最近更新内容列表等。
footer—包含一些附加信息，也可以命名为copyright
命名规那么注意点
1)尽量考虑为元素命名其本身的作用或用意，到达语义化不要使用外表形式命名，如：red/left/big等
2)组合命名规那么：[元素类型]-[元素作用/内容]。如搜索按钮btn-search、登录表单form-login。
3)凡涉及交互行为的元素通常会有正常、悬停、点击和已经阅读等不同款式。参考：搜索按钮btn-search、btn-search-hover、btn-search-visited
常用命名汇总
名称
命名标准
页头
header  top
登录条
loginbar
标志
logo
侧栏
sidebar
导航
nav
子导航
subNav
菜单
menu
子菜单
submenu
工具条
toolbar
表单
form
栏目
column
箭头
arrow
搜索
search
滚动条
scroll
内容
content
标签页
tab
列表
list
提示
tips
栏目的题
title
网页设计padding是什么意思
链接
links
页脚
footer  end
效劳
service
下载
download
注册
register    reg
状态
status
按钮
btn
上传
upload
登录
login
合作伙伴
partner
版权
copyright
网站地图
sitemap
图片命名规那么
1)图片名称分为头尾两部分，用下划线隔开。制止用中文名。
2)头部分表示此图片的大类性质。
例如：放置在顶部的长方形图片可以取名banner；标志图片取名logo；位置不固定并且带有链接的小图片取名button；做栏目链接的图片取名menu；不带链接表示标题的取名title；装饰的照片取名pic；等。
3)尾部分用来表示图片的详细含义，用英文字母表示，如banner_ad.gif  logo_firefox.gif  button_next.gif  menu_aboutus.gif  title_news.gif  pic_people.jpg
4)有onmouse效果的图片，两张分别在原有文件名后加〞_on〞和〞_off〞命名。
3.布局标准
推荐使用CSS+DIV来布局页面，少用table，table只用于数据处理。优势如下：
1.表现和内容相别离，将布局放在一个独立的款式文件中，html文件只存放文本信息。
2.进步页面阅读速度，采用CSS+DIV构造的页面容量比table的页面容量小得多，且<table>标签要等</table>下载完后才可以显示，而使用CSS+DIV标签不用等待</div>下载好就可以显示，所有速度快。
3.易于维护和改版，只要简单的修改几个CSS文件就可以重新设计整个网站的页面。例如
layout.css
body { font-family:Verdana; font-size:14px; margin:0;}
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#menu { height:30px; background:#693; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:200px; height:500px; background:#cf9;}
#sidebar2 { float:right; width:200px; height:500px; background:#cf9;}
#content { margin:0 205px !important; margin:0 202px; height:500px; background:#ffa;}
#footer { height:60px; background:#9c6;}
index.html
<html>
<head>
<link href="layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
  <div id="header">This is the Header</div>
  <div id="menu">This is the Menu</div>
  <div id="mainContent">
    <div id="sidebar">This is the sidebar</div>
    <div id="sidebar2">This is the sidebar2</div>
    <div id="content">3列左右侧固定，中间列自适应居中+头部+导航+尾部</div>
  </div>
  <div id="footer">This is the footer</div>
</div>
</body>
</html>
效果
4.边距标准
页、表格都应该有边距，防止紧贴边沿的情况发生，最小边距值为“3px〞，默认边距值应在CSS中设定。
5.字体标准
1)字体尺寸使用pt为单位，对象和线条使用px为单位。基准字体为9pt；
2)字体尽量采用Verdana, Arial, Helvetica, sans-serif, 宋体。一个页面最多包含两种字体；
3)所有字体设定应该在CSS中完成。
6.颜标准
1)尽可能通过选择适宜的主题颜或系统颜来选择颜；
2)不要混用颜类型。也就是说，不要同时运用多个主题颜。使用主题颜外的颜时最好从主题颜派生，而不是硬编码颜值；
3)尽量限制彩的数目。
4)应当根据对象的重要性来选择颜，重要对象用醒目的颜表示；
5)使用颜的时候应当保持一致性，如错误提示用红表示就要在其他时候保持一致；
7.输入框标准
1)当翻开一个页面光阴标默认停留在第一个输入的文本框。
2)中选择下拉框存在默认值时要默认选中。不存在默认值时，那么默认为“请选择〞，不要空着。
   

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。