网页布局与设计

10条回复

制作网页缘于制作自己的Homepage，如果追朔起来要到1999年了，当时一个在一家公司专职做网页的朋友告诉我，做网页的第一步是要会用表格，于是从表格开始了Web Page的制作，整个页需要用表格来进行布局加上表嵌套完成页布局，跟PS或者其他设计工具展现的效果达到一致，从而完成整个Web Page的设计跟制作，中间像各种字体的展现风格（e.g.： font size、color…）以及其他的风格（e.g. ：margin、padding），总之整个Web Page包罗万象，从整体页面的布局到内容及内容表现风格全部都体现在整个页中，看起来让人头晕眼花，随着计算机软件开发及基于Web Page开发语言的的发展，逐渐出现了新的Web标准，逐渐的将结构、表现、动作加以分离，形成了新的网页设计布局方法（Div＋CSS）。

一直以来从事的工作并不是职业网页开发人员，陆续也听到这种新的设计方法，也大体上了解怎么使用，但一直没有好好钻研一下，昨天抽出一天时间好好看了看这部分的内容，记录下来加以总结。

理解新的Web标准首先要理解的应该就是将表现跟结构分离了，以一个例子来说明：

Example：制作一个页面来说明Delphi中循环语句While的应用说明。

While 语法 while Expression do Statement

说明

while语句的作用跟标准的pascal中一样，当Expression表达式为True时，Delphi便会重复执行Statement语句。一旦Expression为False，Statement就不再执行了。  相关信息：Boolean类型、Continue、Break、Do、For。

采用Table进行布局代码如下

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td><h1><font color="#660000">While</font></h1></td>
 </tr>
 </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
 <td height="1" bgcolor="#000066"></td>
 </tr>
 </table>
 <table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr> 
 <td><font color="#000099">语法</font></td>
 </tr>
 <tr> 
 <td><font color="#FF6600">while Expression do Statement</font> </td>
 </tr>
 <tr> 
 <td><font color="#000099">说明</font></td>
 </tr>
 <tr> 
 <td><font color="#FF6600">while语句的作用跟标准的pascal中一样，当Expression表达式为True时，Delphi便会重复执行Statement语句。一旦Expression为False，Statement就不再执行了。</font></td>
 </tr>
 <tr> 
 <td><font color="#000099">相关信息</font></td>
 </tr>
 <tr>
 <td><font color="#FF6600">Boolean类型、Continue、Break、Do、For</font></td>
 </tr>
 </table>

而采用Div＋CSS的方法达到与使用Table同样效果，首先分析整个内容的结构

1级标题： While

2级标题1： 语法

语法正文：while Expression do Statement

2级标题2： 说明

说明正文：while语句的作用跟标准的pascal中一样……

2级标题3：相关信息

相关信息正文：Boolean类型、Continue、Break、Do、For…

分析最终展现界面得到Web页内容

<h1>While</h1>
 <h2>语法</h2>
 <div id="content">while Expression do Statement</div>
 <h2>说明</h2>
 <div id="content">while语句的作用跟标准的pascal中一样……</div>
 <h2>相关信息</h2>
 <div id="content">Boolean类型、Continue、Break、Do、For</div>

针对该Web页面定义CSS样式

h1{
 font:16px Arial;
 color:#660000;
 border-bottom:1px solid #000066
 }
 h2{
 font:14px Arial;
 color:#000099;
 }
 #content{
 width:auto;
 font-size:12px Arial;
 color:#FF6600;
 }

同样的道理，对于设计比较复杂的呈现风格，进行分析逐渐层层分离，最终都可以采用Div＋CSS或者Div嵌套＋CSS来完成结构跟表现的分离，这样的好处是当页面的表现发生改变的时候而内容不变的情况下可以轻松调整表现风格，同时也使得整个页面的结构比较清晰。

CSS语言有专门的教程跟讨论帖子，具体深入使用可参考相应的教材。