网页制作之页面布局设计心得（绝对原创）

庆阳在线

我的第一个帖被加了16分，最后因为我转贴，没有及时修改原帖标题，被扣20分，今天我又来发帖了，赚分吧，啥也别说了！<br /><br />设计网页不仅仅是把相关的内容放到网页中就行了，它还要求网页设计者能够把这些内容合理安排，给浏览者以赏心悦目的感觉，这样才能<br /><br />达到内容与形式的完美结合，增强网站的吸引力。因此说，设计网页不但是一项技术性的工作，它还是一项艺术性的工作，要求设计者具有较高<br /><br />的艺术修养和审美情趣，这样才能够设计出高水平的网页来。网页的排版布局就是决定你的网站美观与否的一个重要方面，通过合理的、有创意<br /><br />的布局，你可以把文字、图像等内容完美地展现在浏览者面前，而布局的好坏在很大程度上取决于你的艺术修养水平和创新能力。然而这并不是<br /><br />说网页布局无章法可循，完全是灵感之作，它也有自己内在的规律和要求，你只要按照这些要求去做，再加上你的奇特创意，一个吸引人的网页<br /><br />布局是会出现的。<br /><br />下面，详细介绍一下相关细节。<br /><br />首先，网页排版布局的步骤 <br /><br /><br />1.构思：根据网站的内容整体风格，设计版面布局。你可以参考其他优秀的网站，调用自己的各种知识储备，特别是艺术方面的，在大脑中不断<br /><br />地酝酿、碰撞，往往不经意间就有闪光的思想出现。这时你就要抓紧时间把它变成文字的东西，用笔在纸上粗略地勾画出布局的轮廓，不要讲究<br /><br />细节，只要有一个轮廓就行。当然你也可能有多种想法，尽量都把它们画出来，然后再比较，采用一种比较满意的方案。 ??<br /><br />2.初步填充内容：这一步就要把一些主要的内容放到网页中，例如网站的标志、广告条、菜单、导航条、计数器等，要注意重点突出，把网站标<br /><br />志、广告条、菜单放在最突出、最醒目的位置，然后再考虑其它元素的放置。<br /><br />3.细化：在将各主要元素确定好之后，下面就可以考虑文字、图像、表格等页面元素的排版布局了。在这一步，你可以利用网页编辑工具把草案<br /><br />做成一个简略的网页，当然对每一种元素所占的比例也要有一个详细的数字，以便以后修改。<br /><br />??经过以上几步，相信你的网页布局已经初具规模了，让别人看一下，给你提些建议，再不断修改，一个很有特色的网页就要浮出水面<br /><br />了：） <br /><br /><br />其次：网页排版布局的原则<br /><br />??上面我们简要介绍了设计网页布局的步骤，事实上，在构思和设计的过程中，你还必须要掌握以下几项原则：<br /><br />1.平衡性：一个好的网页布局应该给人一种安定、平稳的感觉，它不仅表现在文字、图像等要素的空间占用上分布均匀，而且还有色彩的平衡，要给人一种协调的感觉。<br /><br />2.对称性：对称是一种美，我们生活中有许多事物都是对称的。但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制<br /><br />造一点变化。 ??<br /><br />3.对比性：让不同的形态、色彩等元素相互对比，来形成鲜明的视觉效果。例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。<br /><br />4.疏密度：网页要做到疏密有度，即平常所说的“密不透风，疏可跑马”。不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。<br /><br />5.比例：比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。<br /><br />[<i> 本帖最后由 庆阳在线 于 2007-5-31 14:43 编辑 </i>]

xiaoyeah

这些都是虚的，关键还是审美和实战，多看看好网站，什么专业审美都有了，<a href="http://www.yi2.net" target="_blank">www.yi2.net</a>，推荐个酷站欣赏的

唏嘘

模板 如衣服

周润发周星驰

好复杂，我不会用DW<img src="images/smilies/tongue.gif" smilieid="8" border="0" alt="" />

quotient

不错啊，现在DZ上面就没有一个好风格，看来我只有自己做一个了。<br />他们都没有艺术审美。

sinosoho

我看的还是内容与推广

stuffy

<img src="images/smilies/ohh.gif" smilieid="19" border="0" alt="" /> <img src="images/smilies/ohh.gif" smilieid="19" border="0" alt="" /> <img src="images/smilies/ohh.gif" smilieid="19" border="0" alt="" />

TeliuTe

学习下，老弄不好这些..