CH3 網頁設計與導覽
一、使用彈性或固定的版面規劃
理想情況下，網頁配置必須盡量減少使用者移動滑鼠或捲軸的機會，並且避免網頁內容超出瀏覽器右側的可見範圍。在800X600的桌面環境下，扣除瀏覽器包含的選單和捲軸占用的空間，瀏覽器真正能夠顯示網頁內容的地方(又稱為視點viewpoint)大約只剩740x410個像素。
●固定寬度的版面：適合網頁需要包含大量資訊或功能時。
●彈性版面：較好控制。「假性彈性版面」，把所有內容集中在一個置中對齊的區塊裡，當使用者增加視窗大小時，這個區塊會自動向右移，這樣空白會被分到左右兩側。
●混合版面：使用百分比設定外側區塊，用固定寬度方式設定中間區塊，藉此讓中間區塊的寬度固定。
參考資訊：瞭解每種不同瀏覽器的真實大小「Tracking Visitor's Browser Size」
二、建立色彩結構
●跟隨現有材料的腳步
●使用不會影響文字可見度的背景色
●總是指定文字和連結的顏色
●挑選並使用可以凸顯資訊的顏色
環上相鄰的二個顏色叫作「調和色」，如藍色和藍綠色，適合用在低對比、較溫和的結構裡。
環上相對的二個顏色稱為「互補色」，如紫色和綠色，適合較亮眼的結構。
如使用三角形的方式組合色彩(三合色)，能夠得到更豐富的色彩變化。
大自然是最好的色彩專家，到戶外走走可能會發覺可以套用在網站上的色彩組合，此外每天接觸到的事物也是很好的靈感來源。
三、保留空間給導覽
參考資訊：「A Few Helpful Definitions」、「Keeping it Under Control」
四、設計廣告頁面
Interactive Advertising Bureau(IAB)組織在2002年末建立的廣告標準樣式。
下面是從http://www.iab.net/standards/adunits.asp取得的資料
New! Half Page Ad Standard
(see below)
--------------------------------------------------------------------------------
Rectangles and Pop-Ups
300 x 250 IMU - (Medium Rectangle) View IMU
250 x 250 IMU - (Square Pop-Up) View IMU
240 x 400 IMU - (Vertical Rectangle) View IMU
336 x 280 IMU - (Large Rectangle) View IMU
180 x 150 IMU - (Rectangle) View IMU
Banners and Buttons
468 x 60 IMU - (Full Banner) View IMU
234 x 60 IMU - (Half Banner) View IMU
88 x 31 IMU - (Micro Bar) View IMU
120 x 90 IMU - (Button 1) View IMU
120 x 60 IMU - (Button 2) View IMU
120 x 240 IMU - (Vertical Banner) View IMU
125 x 125 IMU - (Square Button) View IMU
728 x 90 IMU - (Leaderboard) View IMU
Skyscrapers
160 x 600 IMU - (Wide Skyscraper) View IMU
120 x 600 IMU - (Skyscraper) View IMU
300 x 600 IMU - (Half Page Ad) View IMU
五、擴展網站
網站的設計程序應該只會進行一次，而不是每次加入新網頁就要重新設計。
●把共用的程式區塊獨立成引入檔
●利用CSS樣式表將內容和顯示規則區分開來
●學習並善用網站管理程式的樣板系統
一致性是網站成功的關鍵因素之一，寫會讓使用者獲得流暢有效的瀏覽感受，進而對網站產生信賴感。使用者第一次光臨你的網站時一定得適應你的設計和導覽方式，習慣之後使用者就會知道如何在網站裡找到他需要的資訊。因此網站內每個網頁的配置都必須前後一致，使用者才不會無所適從。
參考資訊：「CSS Zen Garden」、「Layout Reservoir」、,「Intensivsation」、「inknoise」
六、增加背景圖片
使用CSS的background-image, background-position, background-attachment, background-repeat屬性來規範背景的顯示方式。
若您的IE無法處理固定式背景，可參考下列的JavaScript：http://doxdesk.com/software/js.fixed.html
七、建立串接式的連結
使用PHP程式依照網站目錄即時產生一連串的連結。(串接的範例如： Home > Product > industrial > Widgets)
當網頁比較深的時候，串接式的連結是個比較好的操作選擇。
下面的PHP程式碼可以利用網站目錄的名稱，建立一個可以連接到目前網頁任何上層目錄的連結：
<?
$full_path=substr(getenv("REQUEST_URI"), 1); ##取得完整路徑，但不包含http://和網域名稱
$full_path=trim($full_path, "\/"); ##將路徑最前面的/去除
$bc=split("\/", $full_path); ##將路徑字串轉換為陣列
if(strstr(end($bc), "index")){ ##判斷最後一個陣列元素是否包含了index字串
$j=2;
}else{
$j=1;
}
for($i=0;$i<(sizeof($bc)-$j);$i++){ ##
$bc_start=strpos($full_path, $bc[$i]);
$bc_length=$bc_start+strlen($bc[$i]);
$bc_link=substr($full_path, 0, $bc_length);
$bc_text=ucfirst($bc[$i]);
$bc_path.=" > <a href=".$bc_link."/>".$bc_text."</a>";
}
echo "<p><a href=\"/\">Home</a> ".$bc_path."</p>";
?>
註：這個程式應該比較適合英文的網頁，若是中文網頁可能目錄也要中文的或再配合一個中文目錄的陣列。
八、建立連向其他網頁的連結選單
<script type="text/javascript" language="javascript">
<!--
function goToPage(url){
if(url != ''){
window.location=url;
}
}
//-->
</script>
透過下拉選單來觸發上面的javascript程式
<form name="jmenu" method="post">
<select name="jchoices">
<option label="-Jump to another page-" value="" select>-Jump to another page-</option>
<option labe="widgets" value="http://yoursite.com/widgets/">widget</option>
<option labe="Doo-Dads" value="http://yoursite.com/doodas/">Doo-Dads</option>
<option labe="Things" value="http://yoursite.com/things/">Things</option>
</select>
<input type="submit" value="Go" onClick="goToPage(jmenu.jchoices.options[jmenu.jchoices.selectedIndex].value);return false;">
</form>
九、建立不會連到自己的導覽
PHP版本
<?
$color_urls=array('/colors/purple.php', '/colors/green.php', '/colors/orange.php');
$color_links=array('purple', 'green', 'orange');
function makeMenu($urls, $links){
$full_path=getenv("REQUEST_URI");
for($i=0; $i<sizeof($links); $i++){
if(! strstr($full_path, $urls[$i])){
$menu.='<p><a href="'.$urls[$i].'">'.$links[$i].'</a></p>';
}else{
$memu.='<p>'.$links[$i].'</p>';
}
}
echo $menu;
}
?>
在適當處呼叫：
<? makeMenu($color_urls, $color_links); ?>
Javascript版本
<script type="text/javascript" language="javascript">
<!--
var colorURLs=new Array('/colors/blue/index.html','/colors/red/index.html','/colors/yellow/index.html');
var colorLinks=new Array('blue', 'red', 'yellow');
function makeMenu(URLs, Links){
var Menu='';
for(var i=0; i<URLs.length; i++){
if(location.href.indexOf(URLs[i]) == -1){
Menu += "<p><a href=\"" + URLs[i] + "\">" + Links[i] + "</a></p>";
}else{
Menu += "<p>" + Links[i] + "</p>";
}
}
document.write(Menu);
}
//-->
</script>
在適當處呼叫：
<script language="javascript">makeMenu(colorURLs, colorLinks);</script>
留言列表
