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>

創作者介紹

神鵰蝦

jck11 發表在 痞客邦 PIXNET 留言(0) 人氣()