网站开发标准V1.0

页面设计

尺寸规范

1、电脑页面标准按1024*768尺寸制作，推荐尺寸为1002*610px。移动端页面因款式不同需要进行多款设备适配。

Iphone-iphone3GS:320px*480px

iphone4-iphone4S:640px*960px

iphone5-iphone5s:640px*1136px

Andriod版本主流的手机设计尺寸：460px*800px

2、电脑页面长度原则上不超过3屏，宽度不超过1屏 

3、banner高度不要超过150px

4、每个非首页静态页面含图片字节不超过300K，全尺寸banner第一个场景控制在200k以内二个场景在300K，三个场景在400K以此类推。

5、移动端页面2g网络下不超过150K、3G不超过300K、wifi情况下不超过500K。

 

导航规范

1、导航要简单、清晰，建议不超过3层的链接

2、用于导航的文字要简明扼要，字数限制在一行以内

3、首页，各栏目一级页面之间互链，各栏目一级和本栏目二级页面之间互链

4、超过三级页面，在页面顶部设置导航条，标明位置

5、突出最近更新的信息，可以加上更新时间或New标识

6、连续性页面应加入上一页，下一页按钮

7、超过一屏的内容，在底部应有go top按钮

8、超过三屏的内容，应在头部设提纲，直接链接到文内锚点

链接规范

1、新闻、信息类通常用新开窗口方式打开。

2、顶部导航、底部导航通常采取在本页打开，特殊栏目和功能可新开窗口。

3、链接带下划线为链接通常的默认风格，顶部导航或特殊位置为了观赏性可用样式表取消下划线。

4、链接的颜色可配合主题颜色风格改变，通常为蓝色、暗蓝色、黑色，但激活后的链接颜色、鼠标移动其上时的链接颜色要同本身颜色进行区分。

字体规范

1、为了保证不同浏览器上字号保持一致，字号建议用点数pt和像素px来定义，pt一般使用中文宋体的9pt和11pt，px一般使用中文宋体12px 和14.7px 这是经过优化的字号，黑体字或者宋体字加粗时，一般选用11pt和14.7px 的字号比较合适。

2、大小为9pt时，行距为120%；信息类最终页面采用弹出方式，标题及正文字体规定为11pt，行距为140%。所有页面字体大小建议不要超过11pt。

3、考虑字体大小的兼容性，避免使用size=2的方式定义，尽量使用pt或px并用css定义

4、文字颜色与页面配色协调，不使用与背景色相近的颜色。

5、非图像设计的字体一律采用windows标准宋体。（如果做特殊效果需做成图）要

加粗文字用Bold,不要用Strong。

6、页面文本不使用下划线方式，也尽量少采用粗体显示。

CSS书写规范

1、所有的CSS的尽量采用外部调用

2、代码较长的首页和重要栏目首页可直接内嵌CSS，避免调用时间太长，使页面未及时调用CSS风格而显得凌乱。

3、书写时复位义的最先，伪类其次，自定义最后（其中a:linka:visited a:hover a:actived 要按照顺序写）便于自己和他人阅读。

JS调用规范

所有的javascript脚本尽量采取外部调用

错误信息规范

所有程序出错页面、找不到的页面不要使用默认的出错提示，要设计为带网站标识和说明的个性化的出错提示页面。

所有页面必须均需经过浏览器兼容测试，通常须支持主流浏览器IE、Firefox。

标签页

网站信息多时可以采用标签页来进行分类，但标签页中尽量少用图片

图片的分类及命名规则

1、名称分为头尾两两部分，用下划线隔开。

2、头部分表示此图片的大类性质，例如广告、标志、菜单、按钮等等。

3、一般来说:

放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner

标志性的图片我们取名为：logo

在页面上位置不固定并且带有链接的小图片我们取名为button

在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu

装饰用的照片我们取名：pic

不带链接表示标题的图片我们取名：title

依照此原则类推。

4、尾部分用来表示图片的具体含义，如果有类似图片就用数字区别。

5、下面是几个样例，大家应该能够一眼看明白图片的意义：

banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.giftitle_news.gif

logo_police.gif,title_top01.gif, title_top02.gif

6、小的图标一定做成透明的。

目录结构规范

目录建立的原则：以最少的层次提供最清晰简便的访问结构。

1、目录命名的规范（参照名称约定）

2、根目录一般只存放index.html以及其他必须的系统文件

3、每个主要栏目建立一个相应的独立目录

4、images用于存放各页面都要使用的图片

5、所有JS脚本存放在根目录下的js目录

6、所有CSS文件存放在根目录下css目录

7、每个语言版本存放于独立的目录。例如：简体中文gb，英文en

8、所有flash, avi, ram,quicktime 等多媒体文件建议存放在根目录下的media目录

9、页面下载、解释时间在56k链接速度下不能超过40秒（栏目首页、表单页）或20秒（一般页面）。

易用性设计

　　按钮名称应该易懂，用词准确，屏弃没楞两可的字眼，要与同一界面上的其他按钮易于区分，能望文知意最好。理想的情况是用户不用查阅帮助就能知道该界面的功能并进行相关的正确操作。

易用性细则：

1):完成相同或相近功能的按钮用Frame框起来，常用按钮要支持快捷方式。

2):完成同一功能或任务的元素放在集中位置，减少鼠标移动的距离。

3):按功能将界面划分区域块，用Frame框括起来,并要有功能说明或标题。

4):界面要支持键盘自动浏览按钮功能，即按Tab键、回车键的自动切换功能。

5):界面上首先要输入的和重要信息的控件在Tab顺序中应当靠前,位置也应放在窗口上较醒目的位置。

6):同一界面上的控件数最好不要超过10个，多于10个时可以考虑使用分页界面显示。

7):分页界面要支持在页面间的快捷切换，常用组合快捷键Ctrl+Tab

8):默认按钮要支持Enter及选操作，即按Enter后自动执行默认按钮对应操作。

9):可写控件检测到非法输入后应给出说明并能自动获得焦点。

10):Tab键的顺序与控件排列顺序要一致，目前流行总体从上到下，同时行间从左到右的方式。

11):复选框和选项框按选择几率的高底而先后排列。

12):复选框和选项框要有默认选项，并支持Tab选择。

13):选项数相同时多用选项框而不用下拉列表框。

14):界面空间较小时使用下拉框而不用选项框。

15):选项数较少时使用选项框，相反使用下拉列表框。

16):专业性强的软件要使用相关的专业术语，通用性界面则提倡使用通用性词语。

规范性设计

通常界面设计都按Windows界面的规范来设计，可以说：界面遵循规范化的程度越高，则易用性相应的就越好。小型软件一般不提供工具厢。

规范性细则：

1):常用菜单要有命令快捷方式。

2):完成相同或相近功能的菜单用横线隔开放在同一位置。

3):菜单前的图标能直观的代表要完成的操作。

4):菜单深度一般要求最多控制在三层以内。

5):工具栏要求可以根据用户的要求自己选择定制。

6):相同或相近功能的工具栏放在一起。

7):工具栏中的每一个按钮要有及时提示信息。

8):一条工具栏的长度最长不能超出屏幕宽度。

9): 工具栏的图标能直观的代表要完成的操作。

10):系统常用的工具栏设置默认放置位置。

11):工具栏太多时可以考虑使用工具箱。

12):工具箱要具有可增减性，由用户自己根据需求定制。

13):工具箱的默认总宽度不要超过屏幕宽度的1/5。

14): 状态条要能显示用户切实需要的信息，常用的有：

目前的操作、系统状态、用户位置、用户信息、提示信息、错误信息等，如果某一操作需要的时间较长，还应该显示进度条和进程提示。

15)：滚动条的长度要根据显示信息的长度或宽度能及时变换，以利于用户了解显示信息的位置和百分比。

16)：状态条的高度以放置五好字为宜，滚动条的宽度比状态条的略窄。

17)：菜单和工具条要有清楚的界限;菜单要求凸出显示，这样在移走工具条时仍有立体感。

18)：菜单和状态条中通常使用5号字体。工具条一般比菜单要宽，但不要宽的太多，否则看起来很不协调。

19): 右键快捷菜单采用与菜单相同的准则。

帮助设计

系统应该提供详尽而可靠的帮助文档，在用户使用产生迷惑时可以自己寻求解决方法。

帮助设施细则：

1)：帮助文档中的性能介绍与说明要与系统性能配套一致。(我们的系统帮助文档都是系统的祖先时期的说明，让人困惑)。

2)：打包新系统时，对作了修改的地方在帮助文档中要做相应的修改。

3)：操作时要提供及时调用系统帮助的功能。常用F1。

4)：在界面上调用帮助时应该能够及时定位到与该操作相对的帮助位置。也就是说帮助要有即时针对性。

5)：最好提供目前流行的联机帮助格式或HTML帮助格式。

6)：用户可以用关键词在帮助索引中搜索所要的帮助，当然也应该提供帮助主题词。

7)：如果没有提供书面的帮助文档的话，最好有打印帮助的功能。

8)：在帮助中应该提供我们的技术支持方式，一旦用户难以自己解决可以方便的寻求新的帮助方式。

合理性设计

屏幕对角线相交的位置是用户直视的地方，正上方四分之一处为易吸引用户注意力的位置，在放置窗体时要注意利用这两个位置。

合理性细则：

1)：父窗体或主窗体的中心位置应该在对角线焦点附近。

2)：子窗体位置应该在主窗体的左上角或正中。

3)：多个子窗体弹出时应该依次向右下方偏移，以显示窗体出标题为宜。

4)：重要的命令按钮与使用较频繁的按钮要放在界面上注目的位置。

5)：错误使用容易引起界面退出或关闭的按钮不应该放在易点击的位置。横排开头或最后与竖排最后为易点位置。

6)：与正在进行的操作无关的按钮应该加以屏蔽(Windows中用灰色显示，没法使用该按钮)。

7)：对可能造成数据无法恢复的操作必须提供确认信息,给用户放弃选择的机会。

8)：非法的输入或操作应有足够的提示说明。

9): 对运行过程中出现问题而引起错误的地方要有提示，让用户明白错误出处，避免形成无限期的等待。

10): 提示、警告、或错误说明应该清楚、明了、恰当。

美观与协调性设计

界面应该大小适合美学观点，感觉协调舒适，能在有效的范围内吸引用户的注意力。

美观与协调性细则：

1): 长宽接近黄金点比例，切忌长宽比例失调、或宽度超过长度。

2): 布局要合理,不宜过于密集，也不能过于空旷，合理的利用空间。

3): 按钮大小基本相近，忌用太长的名称，免得占用过多的界面位置。

4): 按钮的大小要与界面的大小和空间要协调。

5): 避免空旷的界面上放置很大的按钮。

6)：放置完控件后界面不应有很大的空缺位置。

7): 字体的大小要与界面的大小比例协调, 通常使用的字体中宋体9-12较为美观，很少使用超过12号的字体。

8): 前景与背景色搭配合理协调，反差不宜太大，最好少用深色，如大红、大绿等。常用色考虑使用Windows界面色调。

9): 如果使用其他颜色，主色调要柔和，具有亲和力与磁力，坚决杜绝刺目的颜色。

10): 大型系统常用的主色有"#E1E1E1"、"#EFEFEF"、"#C0C0C0"等。

11): 界面风格要保持一致，字的大小、颜色、字体要相同，除非是需要艺术处理或有特殊要求的地方。

12): 如果窗体支持最小化和最大化或放大时，窗体上的控件也要随着窗体而缩放；切忌只放大窗体而忽略控件的缩放。

13)：对于含有按钮的界面一般不应该支持缩放，即右上角只有关闭功能。

14): 通常父窗体支持缩放时，子窗体没有必要缩放。

15)：如果能给用户提供自定义界面风格则更好，由用户自己选择颜色、字体等。

菜单位置设计

菜单是界面上最重要的元素，菜单位置按照按功能来组织。

菜单测试细则：

1): 菜单通常采用“常用--主要--次要--工具--帮助”的位置排列，符合流行的Windows风格。

2): 常用的有“文件”、“编辑”，“查看”等，几乎每个系统都有这些选项，当然要根据不同的系统有所取舍。

3): 下拉菜单要根据菜单选项的含义进行分组，并且按照一定的规则进行排列，用横线隔开。

4): 一组菜单的使用有先后要求或有向导作用时，应该按先后次序排列。

5): 没有顺序要求的菜单项按使用频率和重要性排列，常用的放在开头， 不常用的靠后放置；重要的放在开头，次要的放在后边。

6): 如果菜单选项较多，应该采用加长菜单的长度而减少深度的原则排列。

7): 菜单深度一般要求最多控制在三层以内。

8): 对常用的菜单要有快捷命令方式，组合原则见8。

9): 对与进行的操作无关的菜单要用屏蔽的方式加以处理，如果采用动态加载方式——即只有需要的菜单才显示——最好。

10): 菜单前的图标不宜太大，与字高保持一直最好。

11): 主菜单的宽度要接近，字数不应多于四个，每个菜单的字数能相同最好。

12): 主菜单数目不应太多，最好为单排布置。

13):菜单条是否显示在合适的语境中？

14):应用程序的菜单条是否显示系统相关的特性（如时钟显示）？

15):下拉式操作能正确工作吗？

16):菜单、调色板和工具条是否工作正确？

17):是否适当地列出了所有的菜单功能和下拉式子功能？

18):是否可能通过鼠标访问所有的菜单功能？

19):相同功能按钮的图标和文字是否一致？

20):是否能够用其他的文本命令激活每个菜单功能？

21):菜单功能是否随当前的窗口操作加亮或变灰？

22):菜单功能是否正确执行？

23):菜单功能的名字是否具有自解释性？

24):菜单项是否有帮助，是否语境相关？

25):在整个交互式语境中，是否可以识别鼠标操作？

26):如果要求多次点击鼠标，是否能够在语境正确识别？

27):如果鼠标有多个按钮，是否能够在语境中正确识别？

28):光标、处理指示器和识别指针是否随操作恰当地改变？ 

独特性设计

此标准适用于应用软件的设计，对网站设计方面只提供借鉴与参考。

如果一味的遵循业界的界面标准，则会丧失自己的个性.在框架符合以上规范的情况下，设计具有自己独特风格的界面尤为重要。尤其在商业软件流通中有着很好的迁移默化的广告效用。

测试细则：

1):　安装界面上应有单位介绍或产品介绍，并有自己的图标。

2):　主界面，最好是大多数界面上要有公司图标。

3):　登录界面上要有本产品的标志，同时包含公司图标。

4):　帮助菜单的“关于”中应有版权和产品信息。

5):　公司的系列产品要保持一直的界面风格，如背景色、字体、菜单排列方式、图标、安装过程、按钮用语等应该大体一致。

8：快捷方式的组合

在菜单及按钮中使用快捷键可以让喜欢使用键盘的用户操作得更快一些在西文Windows及其应用软件中快捷键的使用大多是一致的。

菜单中：

1):面向事务的组合有:

Ctrl-D 删除 ；Ctrl-F 寻找 ；Ctrl –H替换；Ctrl-I 插入 ；Ctrl-N 新记录 ；Ctrl-S 保存 Ctrl-O 打开。

2)：列表:

Ctrl-R ，Ctrl-G定位；Ctrl-Tab下一分页窗口或反序浏览同一页面控件；。

3):编辑:

Ctrl-A全选；Ctrl-C 拷贝；Ctrl-V 粘贴；Ctrl-X 剪切；Ctrl-Z撤消操作；Ctrl-Y恢复操作。

4)文件操作:

Ctrl-P 打印；Ctrl-W 关闭。

5):系统菜单

Alt-A文件；Alt-E编辑；Alt-T工具；Alt－W窗口；Alt－H帮助。

6):MS Windows保留键:

Ctrl-Esc 任务列表 ；Ctrl-F4 关闭窗口； Alt-F4 结束应用；Alt-Tab 下一应用 ；Enter 缺省按钮/确认操作；Esc 取消按钮/取消操作 ；Shift-F1 上下文相关帮助。

按钮中：

可以根据系统需要而调节，以下只是常用的组合。

Alt-Y确定(是)；Alt-C取消；Alt-N 否；Alt-D删除；Alt-Q退出；Alt-A添加；Alt-E编辑；Alt-B浏览；Alt-R读；Alt-W写。

这些快捷键也可以作为开发中文应用软件的标准,但亦可使用汉语拼音的开头字母。

安全性考虑

在界面上通过下列方式来控制出错几率，会大大减少系统因用户人为的错误引起的破坏。开发者应当尽量周全地考虑到各种可能发生的问题,使出错的可能降至最小。如应用出现保护性错误而退出系统,这种错误最容易使用户对软件失去信心。因为这意味着用户要中断思路,并费时费力地重新登录,而且已进行的操作也会因没有存盘而全部丢失。

安全性细则：

1)：最重要的是排除可能会使应用非正常中止的错误。

2)：应当注意尽可能避免用户无意录入无效的数据。

3)：采用相关控件限制用户输入值的种类。

4)：当用户作出选择的可能性只有两个时,可以采用单选框。

5)：当选择的可能再多一些时,可以采用复选框,每一种选择都是有效的,用户不可能输入任何一种无效的选择。

6)：当选项特别多时，可以采用列表框，下拉式列表框。

7)：在一个应用系统中,开发者应当避免用户作出未经授权或没有意义的操作。

8)：对可能引起致命错误或系统出错的输入字符或动作要加限制或屏蔽。

9):对可能发生严重后果的操作要有补救措施。通过补救措施用户可以回到原来的正确状态。

10):对一些特殊符号的输入、与系统使用的符号相冲突的字符等进行判断并阻止用户输入该字符。

11)：对错误操作最好支持可逆性处理，如取消系列操作。

12):在输入有效性字符之前应该阻止用户进行只有输入之后才可进行的操作。

13):对可能造成等待时间较长的操作应该提供取消功能。

14)：特殊字符常有；;’”><,｀‘：“［”｛、\|｝］+=)-(_*&&^%$#@!,.。?/还有空格。

15)：与系统采用的保留字符冲突的要加以限制。

16)：在读入用户所输入的信息时，根据需要选择是否去掉前后空格。

17)：有些读入数据库的字段不支持中间有空格，但用户切实需要输入中间空格，这时要在程序中加以处理。

10:多窗口的应用与系统资源：

设计良好的软件不仅要有完备的功能，而且要尽可能的占用最底限度的资源。

1)：在多窗口系统中，有些界面要求必须保持在最顶层，避免用户在打开多个窗口时，不停的切换甚至最小化其他窗口来显示该窗口。

2)：在主界面载入完毕后自动卸出内存，让出所占用的WINDOWS系统资源。

3)：关闭所有窗体，系统退出后要释放所占的所有系统资源 ，除非是需要后台运行的系统。

4)：尽量防止对系统的独占使用。

5)：窗口能否基于相关的输入或菜单命令适当地打开？

6)：窗口能否改变大小、移动和滚动？

7)：窗口中的数据内容能否使用鼠标、功能键、方向箭头和键盘访问？

8)：当被覆盖并重调用后，窗口能否正确地再生？

9)：需要时能否使用所有窗口相关的功能？

10)：所有窗口相关的功能是可操作的吗？

11)：是否有相关的下拉式菜单、工具条、滚动条、对话框、按钮、图标和其他控制可为窗口可用，并适当地显示？

12)：显示多个窗口时，窗口的名称是否被适当地表示？

13)：活动窗口是否被适当地加亮？

14)：如果使用多任务，是否所有的窗口被实时更新？

15)：多次或不正确按鼠标是否会导致无法预料的副作用？

16)：窗口的声音和颜色提示和窗口的操作顺序是否符合需求？

17)：窗口是否正确地关闭？

页面切割

页面中的图片要以GIF格式保存

1. 在排布表格之前，请大家一定要好好思考一个最佳的方案，表格的嵌套尽量控制在三层以内，并且应该尽量避免 两个标记，经验表明，这两个标记会带来许多麻烦。

2. 一个网页要尽量避免用整个一张大表格，所有的内容都嵌套在这个大表格之内，因为浏览器在解释页面的元素时，是以表格为单位逐一显示，如果一张网页是嵌套在一个大表格之内，那么很可能造成的后果就是，当浏览者敲入网址，他要先面对一片空白很长时间，然后所有的网页内容同时出现。如果必须这样做，请使用 标记，以便能够使这个大表格分块显示。

3. 排版中我们经常会遇到需要进行首行缩进的处理，不要使用 或者全角空格来达到效果，规范的做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上

标记，注意，一般情况下，请不要省略

结束标记 。

4. 原则上，我们禁止用 来人为干预图片显示的尺寸，而且建议 标签中不要带上width 和height 两个属性，这是因为制作过程中，图片往往需要反复的修改，这样可以避免人为干预图片显示的尺寸，尽可能的发挥浏览器自身的功能；但是这样的一个副作用是当网页还未加载图片时，不会留出图片的站位大小，可能会造成网页在加载过程中抖动（如果图片是插在一个固定大小的表格里的，不会有这个现象），尤其是当图片的尺寸较大时，这种现象会很明显，所以当预料到这种会明显导致网页抖动的情况会发生时，请大家务必在最后给 附上 width 和 height 属性。

5. 为了最大程度的发挥浏览器自动排版的功能，在一段完整的文字中请尽量不要使用
来人工干预分段。

6. 不同语种的文字之间应该有一个半角空格，但避头的符号之前和避尾的符号之后除外汉字之间的标点要用全角标点，英文字母和数字周围的括号应该使用半角括号。

7. 所有的字号都应该用样式表来实现，禁止在页面中出现 标记。

8. 请不要在网页中连续出现多于一个的也尽量少使用全角空格（英文字符集下，全角空格会变成乱码），空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。

9. 中英文混排时，我们尽可能的将英文和数字定义为verdana和arial 两种字体。

10. 行距建议用百分比来定义，常用的两个行距的值是line-height:120%/150%.

11. 网站中的路径全部采用相对路径，一般链接到某一目录下的缺省文件的链接路径不必写全名，如我们不必这样： 而应该这样：

12. 嵌入图形文本的使用较大的字体，建议不要在图形中包括文本。

13.“网页大小”定义为网页的所有文件大小的总和，包括HTML文件和所有的嵌入的对象。用户喜欢快的而不是新奇的站点。对于解调器用户，网页大小保持在34K以下为合适。

页面切割中能少用图片的尽量少用图片，如下图所示，效果图中的表格右侧是一个渐近的效果，其实在切割页面时完成用表格来替代渐近效果，具体事例如下：

原图：

放大后的图片：

放大后发现图片后面的渐变效果只是3个像数的不同颜色组成的，所以在切图时，此部分不应该直接切成图片，应该在表格后面加上3列，每列取不同的颜色值，每列的宽度为1，即可实现上面的效果。

网页显示时是以Table到结束Table为一个单元显示的，所以在网页切割中要考虑网站显示的效果，多个表格可以连接在一起，尽量少用表格套表格的形式组织页面。

原图：

切割示意图：

红色是一个表格，兰色是表格中的行，也就是，中间需要左右分离的就再套一个表格，一行，两列即可，红格中灰色部分的文字就需要再套一个表格居中，间区为1，表格背景颜色做成深灰色，然后td的背景色是浅灰色即可，不要用图片来代替，由于网页中的显示是以表格为主，也就是加载到时网页才显示出里面的东西，所以一个表格中不要套太多的tr，除非tr中的信息都是文字，那样可以多套一些，如上图，如果涉及到的中有图片，就少用tr，再建一个表格即可，根据页面内容的统一性，掌握好表格的数量。

建议采用CSS+div形式，替代

标签

理解CSS盒子模型

什么是CSS的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。

CSS盒子模式 这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

由“盒子”堆出来的网页版面

现在对CSS盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它转变我们的思路

传统的前台网页设计是这样进行的：根据要求，先考虑好主色调，要用什么类型的图片，用什么字体、颜色等等，然后再用Photoshop这类软件自由的画出来，最后再切成小图，再不自由的通过设计HTML生成页面，改用CSS排版后，我们要转变这个思想，此时我们主要考虑的是页面内容的语义和结构，因为一个强CSS控制的网页，等做好网页后，你还可以轻松的调你想要的网页风格，况且CSS排版的另外一个目的是让代码易读，区块分明，强化代码重用，所以结构很重要。如果你想说我的网页设计的很复杂，到后来能不能实现那样的效果？我要告诉你的是，如果用CSS实现不了的效果，一般用表格也是很难实现的，因为CSS的控制能力实在是太强大了，顺便说一点的是用CSS排版有一个很实用的好处是，如果你是接单做网站的，如果你用了CSS排版网页，做到后来客户有什么不满意，特别是色调的话，那么改起来就相当容易，甚至你还可以定制几种风格的CSS文件供客户选择，又或者写一个程序实现动态调用，让网站具有动态改变风格的功能。

实现结构与表现分离

在真正开始布局实践之前，再来认识一件事——结构和表现相分离，这也用CSS布局的特色所在，结构与表现分离后，代码才简洁，更新才方便，这不正是我们学习CSS的目的所在吗？举个例来说P是结构化标签，有P标签的地方表示这是一个段落区块，margin是表现属性，我要让一个段落右缩进2字高，有些人会想到加空格，然后不断地加空格，但现在可以给P标签指定一个CSS样式：P {text-indent: 2em;}，这样结果body内容部分就如下，这没有外加任何表现控制的标签：

加进天涯社区有一段时间了，但一直没有时间写点东西，今天写了一篇有关CSS布局的文章，并力求通过一种通俗的语言来说明知识点，还配以实例和图片，相信对初学CSS布局的人会带来一定的帮助。

如果还要对这个段落加上字体、字号、背景、行距等修饰，直接把对应的CSS加进P样式里就行了，不用像这样来写了：

段落内容

这个是结构和表现混合一起写的，如果很多段落有统一结构和表现的话，再这样累加写下去代码就繁冗了。

再直接列一段代码加深理解结构和表现相分离：

用CSS排版

不用CSS排版

第一种方法是结构表现相分离，内容部分代码简单吧，如果还有更多的图片列表的话，那么第一种CSS布局方法就更有优势，我打个比喻你好理解：我在BODY向你介绍一个人，我只对你说他是一个人，至于他是一个什么样的人，有多高，是男是女，你去CSS那里查下就知道。这样我在BODY的工作就简单了，也就是说BODY的代码就简单了。如果BODY有一个团队人在那里，我在CSS记录一项就行了，这有点像Flash软件里的组件和实例的概念，不同的实例共享同一个组件，这样动画文件就不大了，把这种想法移到CSS网页设计中，就是代码不复杂，网页文件体积小能较快被客户端下载了。演示地址：用CSS排版减小网页文件体积

像上面我做的那个版面，一共分为四个区块，每个区块的框架是一样的，这个框架就是用CSS写出来的，样式写一次，就可以被无数次调用了(用class调用，而不是ID)，只要改变其中的文字内容就可以生成风格统一的众多板块了，它的样式和结构代码是（请不要直接复制生成网页，把下面代码分别粘贴到网页中它们应在的位置）：

前言

正文内容

CSS盒子模式

正文内容

转变思想

正文内容

熟悉步骤

正文内容

熟悉工作流程

在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“

文字块一

文字块二

文字块三

”，而用“

文字块一

文字块二

文字块三

”更合适。

用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：

 

用div来定义语义结构

上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这个盒子就是BODY，这样代码就变成:

最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，并复位义其宽度为760像素，同时加上边框，那么它的样式是：

body{

font-family:Arial,Helvetica,sans-serif;

font-size:12px;

margin:0pxauto;

height:auto;

width:760px;

border:1pxsolid#006633;

}

页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为：

#header{

height:100px;

width:760px;

background-image:url(headPic.gif);

background-repeat:no-repeat;

margin:0px0px3px0px;

}

导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下：

#nav{

height:25px;

width:760px;

font-size:14px;

list-style-type:none;

}

#navli{

float:left;

}

#navlia{

color:#000000;

text-decoration:none;

padding-top:4px;

display:block;

width:97px;

height:22px;

text-align:center;

background-color:#009966;

margin-left:2px;

}

#navlia:hover{

background-color:#006633;

color:#FFFFFF;

}

内容部分主要放入文章内容，有标题和段落，标题加粗，为了规范化，我用H标签，段落要自动实现首行缩进2个字,同时所有内容看起来要和外层大盒子边框有一定距离，这里用填充。内容区块样式代码为：

#content{

height:auto;

width:740px;

line-height:1.5em;

padding:10px;

}

#contentp{

text-indent:2em;

}

#contenth5{

font-size:16px;

margin:10px;

版权栏，给它加个背景，与页头相映，里面文字要自动居中对齐，有多行内容时，行间距合适，这里的链接样式也可以单独指定，我这里就不做了。其样式代码如下：

#footer{

height:50px;

width:740px;

line-height:2em;

text-align:center;

background-color:#009966;

padding:10px;

}

最后回到样式开头大家会看到这样的样式代码：

*{

margin:0px;

padding:0px;

}

这是用了通配符初始化各标签边界和填充，（因为有部分标签默认会有一定的边界，如Form标签）那么接下来就不用对每个标签再加以这样的控制，这可以在一定程度上简化代码。最终完成全部样式代码是这样的：

结构代码是这样的：

首页

文章

相册

Blog

论坛

帮助

前言

第一段内容

理解CSS盒子模式

第二段内容

关于华升|广告服务|华升招聘|客服中心|QQ留言|网站管理|会员登录|购物车

Copyright©2006-2008TangGuohui.AllRightsReserved

HTML规范

本编程规范适用于需要编写HTML代码的网页程序开发人员。

HTML并不是一种编程语言，而是一种标记语言，它没有任何真正的编程语言中的循环或是流程控制语句。然而，HTML代码的格式和风格是非常重要的，因为要经常对HTML代码进行维护和修改，因此HTML代码必须有很清晰的逻辑结构和布局，而使其易懂和易于维护。

标记的书写

HTML语言是不区分大小写的，但一般来说，标记使用大写书写，如

, ,

等；标记中的属性一般使用小写，如, 等。

标记的换行规范

一般一个HTML代码都会很长很复杂，因此不要把代码写得很密，这样的可读性非常差，HTML对回车和空格都不敏感，因此可以使用回车和空格，使代码的格式和结构更清晰，这样才能易于维护。很多标记一般来说要占用一行，除了同一标记的关闭标记外，最好不出现两个标记在同一行的情况。如：

<TABLE><TR><TD>textTD>TR>TABLE>

应写成：

<TABLE>
    <TR>
        <TD>textTD>
    TR>
TABLE>

 

1  通常情况下，应该换行的标记有：

 

 

 

 

 当段落内容比较长时，

也应各占一行

 各种列表标记

 表格的相关标记

 

和

 

和

 和

 

2  通常情况下，需要将开始和关闭标记放在一行的标记有：

 和

 和

 和

 各种标题标记，如

…

等

 和

标记的关闭规范

1、HTML文档的正文都应在标记中间，而标记则应包含在和标记之间，如：

<HTML>
<BODY>
…………
BODY>
HTML>

 

2  对于需要关闭标记的标记，如,