?? 00418c.htm
字號:
<html><!-- #BeginTemplate "/Templates/zpxs.dwt" -->
<head>
<title>|><| 太平洋電腦網 -> 網絡學院 -> 設計教室</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">
<!--
-->
</style>
<link rel="stylesheet" href="/pcedu/style/text.css"></head>
<body bgcolor="#FFFFFF" topmargin=0 leftmargin=0 marginheight="0">
<script language="JavaScript" src="/pcedu/script/top.js">
</script>
<table width=760 border=0 cellspacing=0 cellpadding=0 align=center>
<tr>
<td width=194 height="56"><a href=http://www.pconline.com.cn><img src=http://www.pconline.com.cn/images/pconlinelogo.gif width=162 height=35 vspace=10 border=0></a></td>
<td width=406 height="56">
<script language="JavaScript" src="/pcedu/script/sj_ad.js">
</script>
</td>
<td width=158 align=right height="56">
<div align="right">
<script language="JavaScript" src="/pcedu/script/sj_ad1.js">
</script>
</div>
</td>
<td align=right width=2 height="56"> </td>
</tr>
</table>
<table border=0 cellpadding=0 cellspacing=0 width=760 align="center">
<tbody>
<tr valign=bottom>
<td rowspan=2 width=172><a href="/pcedu/"><img height=32 src="/pcedu/images/pcedu_lo.gif"
width=172 border="0"></a></td>
<td height=30 rowspan=2>
<table cellpadding=0 cellspacing=0 width="588" bgcolor="#FFA000" background="/pcedu/images/e_menu4.gif"border="0">
<tbody>
<tr valign="bottom">
<td height="17">
<script language="JavaScript" src="/pcedu/script/title_sj.js">
</script>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr></tr>
<tr bgcolor="#303880">
<td colspan=2 height=1 valign=bottom><img height=1
src="/pcedu/images/blank.gif" width=1></td>
</tr>
<tr>
<td colspan=2 height=5 valign=bottom><img height=5
src="/pcedu/images/blank.gif" width=1></td>
</tr>
</tbody>
</table>
<table width="760" cellspacing="0" cellpadding="0" align="center">
<tr>
<td width="170" valign="top">
<table border="0" width="170" height="100%"
cellspacing="1" bgcolor="#000000">
<tr bgcolor="#F8F8D2">
<td width="100%" valign="top">
<script language="JavaScript" src="/pcedu/script/left_sj0.js">
</script>
</td>
</tr>
</table>
</td>
<td width="10"> </td>
<td width="580" valign="top" class="article"> <!-- #BeginEditable "content" -->
<p> </p>
<p align="center"><b><font size="3" class="coffee">網站設計的思考（七）</font></b></p>
<p align="right">作者：<a href="mailto:fujie@163.net">阿捷</a></p>
<p align="right">出處：<a href="http://pageone.yeah.net" target="_blank">《網頁設計師》</a></p>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td rowspan="4"><span class="coffee"><b><span class="green">版面布局的原理</span></b></span><br>
<br>
<br>
<span class="sfont">設計首頁的第一步是設計版面布局。<br>
就象傳統的報刊雜志編輯一樣，我們將網頁看作一張報紙，一本雜志來進行排版布局。<br>
雖然動態網頁技術的發展使得我們開始趨向于學習場景編劇，但是固定的網頁版面設計基礎<br>
依然是必須學習和掌握的。它們的基本原理是共通的，你可以領會要點，舉一反三。<br>
<br>
版面指的是瀏覽器看到的完整的一個頁面（可以包含框架和層）。因為每個人的顯示器<br>
分辨率不同，所以同一個頁面的大小可能出現640*480像素,800*600像素,1024*768像素等不<br>
同尺寸。<br>
<br>
布局，就是以最適合瀏覽的方式將圖片和文字排放在頁面的不同位置。<br>
你可能注意到：“最適合”是一個不確定的形容詞，什么才是最適合的呢？抱歉的是<br>
阿捷不能也不可能給您一個完整的正確的答案。就好比有人希望知道成功的秘訣是什么，<br>
成功者只能建議您用什么方法，什么途徑才能最容易獲得成功，而不可能有一步成功的<br>
"秘訣"告訴您。<br>
<br>
我們在設計思考系列文章第四篇講過站點整體的創意，版面布局也是一個創意的問題，<br>
但要比站點整體的創意容易，有規律的多。讓我們先來了解一下版面布局的步驟：<br>
<br>
一.草案<br>
<br>
新建頁面就象一張白紙，沒有任何表格，框架和約定俗成的東西，你可以盡可能的發揮<br>
你的想象力，將你想到的"景象"畫上去(我們建議您用一張白紙和一支鉛筆，當然用作圖<br>
軟件photoshop等也可以)。這屬于創造階段，不講究細膩工整，不必考慮細節功能，只以<br>
粗陋的線條勾畫出創意的輪廓即可。盡你的可能多畫幾張，最后選定一個滿意的作為繼續<br>
創作的腳本。<br>
<br>
二.粗略布局<br>
<br>
在草案的基礎上，將你確定需要放置的功能模塊安排到頁面上。(注：功能模塊我們在<br>
"首頁設計-引子"中提過，主要包含網站標志,主菜單,新聞,搜索,友情鏈接,廣告條,郵件列表,<br>
計數器,版權信息等)。注意，這里我們必須遵循突出重點、平衡諧調的原則，將網站標<br>
志，主菜單等最重要的模塊放在最顯眼，最突出的位置，然后在考慮次要模塊的排放。<br>
<br>
三.定案<br>
<br>
將粗略布局精細化，具體化。（靠你的智慧和經驗，旁敲側擊多方聯想，才能作出具<br>
有創意的布局。）<br>
<br>
在布局過程中，我們可以遵循的原則有：<br>
<br>
1、正常平衡---亦稱"勻稱"。多指左右、上下對照形式，主要強調秩序，能達到安定<br>
誠實、信賴的效果。<br>
2、異常平衡---即非對照形式，但也要平衡和韻律，當然都是不均整的，此種布局能<br>
達到強調性、不安性、高注目性的效果。<br>
3、對比---所謂對比，不僅利用色彩、色調等技巧來作表現，在內容上也可涉及古與<br>
今、新與舊、貧與富等對比。<br>
4、凝視---所謂凝視是利用頁面中人物視線，使瀏覽者仿照跟隨的心理，以達到注視<br>
頁面的效果，一般多用明星凝視狀。<br>
5、空白---空白有兩種作用，一方面對其他網站表示突出卓越，另一方面也表示網頁品<br>
位的優越感，這種表現方法對體顯網頁的格調十分有效。<br>
6、盡量用圖片解說---此法對不能用語言說服、或用語言無法表達的情感，特別有效。<br>
圖片解說的內容，可以傳達給瀏覽者的更多的心理因素。<br>
<br>
------------(轉載自廣告大師樊志育《廣告制作》) <br>
<br>
<br>
以上的設計原則，雖然枯燥，但是我們如果能領會并活用到頁面布局里，效果就大不<br>
一樣了。比如，<br>
○網頁的白色背景太虛，則可以加些色快；<br>
○版面零散，可以用線條和符號串聯；<br>
○左面文字過多，右面則可以插一張圖片保持平衡；<br>
○表格太規矩，可以改用導角試試。<br>
經過不斷的嘗試和推敲，你的網頁一定會亮麗起來的哦:)<br>
<br>
看看我們經常用到的版面布局形式：<br>
<br>
1."T"結構布局。所謂"T"結構。就是指頁面頂部為橫條網站標志+廣告條，下方左面為主菜單，<br>
右面顯示內容的布局，因為菜單條背景教深，整體效果類似英文字母"T",所以我們稱之為"T"形布<br>
局。這是網頁設計中用的最廣返的一種布局方式。(圖略)<br>
這種布局的優點是頁面結構清晰，主次分明。是初學者最容易上手的布局方法。缺點是規矩<br>
呆板，如果細節色彩上不注意，很容易讓人"看之無味"。<br>
<br>
2."口"型布局。這是一個象形的說法，就是頁面一般上下各有一個廣告條，左面是主菜單，<br>
右面放友情連接等，中間是主要內容。(圖略)<br>
這種布局的優點是充分利用版面，信息量大(我的主頁首頁即屬于這種布局)。缺點是頁面擁擠，<br>
不夠靈活。也有將四邊空出，只用中間的窗口型設計，例如網易壁紙站。<br>
<br>
3."三"型布局。這種布局多用于國外站點，國內用的不多。特點是頁面上橫向兩條色塊，將<br>
頁面整體分割為四部分，色塊中大多放廣告條。<br>
<br>
4.對稱對比布局。顧名思義，采取左右或者上下對稱的布局，一半深色，一半淺色，一般用于<br>
設計型站點。優點是視覺沖擊力強，缺點是將兩部分有機的結合比較困難。<br>
<br>
5.POP布局。POP引自廣告術語，就是指頁面布局象一張宣傳海報，以一張精美圖片作為頁面<br>
的設計中心。常用于時尚類站點，比如ELLE.com。優點顯而易見：漂亮吸引人。缺點就是速度慢。<br>
作為版面布局還是值得借鑒的。<br>
<br>
以上總結了目前網絡上常見的布局，其實還有許許多多別具一格的布局，關鍵在于你的創意和<br>
設計了。對于版面布局的技巧，這里提供四個建議，您可以自己推敲：<br>
<br>
1.加強視覺效果<br>
2.加強文案的可視度和可讀性<br>
3.統一感的視覺<br>
4.新鮮和個性是布局的最高境界<br>
<br>
好了，今天我們就討論到這里，下篇我們將繼續首頁設計的"色彩的搭配"篇，歡迎大家來信<br>
討論。ajie@soim.com </span>
<p> </p>
<p align="center"><a href="00417a.htm">上一篇</a> <a href="00419a.htm">下一篇
</a>
<p align="center"><a href="index3.htm">[返回]</a>
</td>
<td width="2%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="2%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="2%"></td>
</tr>
<tr>
<td width="2%"></td>
<td width="2%"></td>
</tr>
</table>
<p align="left"> </p>
<!-- #EndEditable -->
<table width="100%" border="0">
<tr class="sfont">
<td>
<div align="center"><a href="javascript:history.go(-1)">[返回]</a> </div>
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr noshade size="2" width="760">
<p align="center">
<script language="JavaScript" src="/pcedu/script/title_edu.js">
</script>
<br>
版權所有©2000 太平洋電腦網<br>
<font face="Arial, Helvetica, sans-serif"><a href=mailto:webmaster@pconline.com.cn>
<script>
document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?exp target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=exp&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 alt='網易中文排行榜' width=1 height=1></a>");
</script>
</a></font><font face="Arial, Helvetica, sans-serif"><a href=mailto:webmaster@pconline.com.cn>webmaster@pconline.com.cn
<script language="">document.write("<a href=http://best.netease.com/cgi-bin/view/viewbasic.cgi?pconline1 target=_blank><img src=http://best.netease.com/cgi-bin/log.cgi?user=pconline1&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=1 height=1 ></a>");</script>
</a>
<script language="">
document.write("<a href=http://www0.pconline.com.cn:8810/pccount/index.php target=_blank><img src=http://www0.pconline.com.cn:8810/cgi-bin/test.cgi?user=pcedu&refer="+escape(document.referrer)+"&cur="+escape(document.URL)+" border=0 width=0 height=0 alt='' ></a>");
</script>
</font></p>
</body>
<!-- #EndTemplate --></html>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -