Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links, Navigation and Mata page 超連結、導覽與重新導向
超連結:以<a></a>所構成,各種站間、站內物件的相互連結。
導覽:對具有結構性的內容引導,通常具備按鈕或統一性的視覺設計。
重新導向:是統合標籤(Meta Tag)的一種,可將檔案轉為另一個檔案。
導覽列與導覽按鈕的設計方法
導覽列與導覽按鈕的設計方法,常用的有以下類型:
導覽列設計/微軟網路機器人 Webbot 法
導覽列設計/互動式按鈕設計法
導覽列設計/自訂 Java 法
導覽列設計/Html5 CSS 法
其中以互動式按鈕設計法、與 Html5 CSS 法在效果與未來性上較優。當然,如果程式與美工能力均強,則 Html5 CSS 法應是第一選擇。
除此之外,還有進階的:
導覽列設計/下拉選單與樹狀導覽法
導覽列設計/雙導覽列_多導覽列法
導覽列設計/固定位置導覽列法
Html5 CSS 導覽設計法
Html5 CSS 導覽設計有以下策略:
1. 使用導覽互動式按鈕專用類別(class)之連結CSS設計(如!TxTemp 內之 tx-14.css)。
2. 應在共用資料夾內(如 !Related),設定1導覽頁(如 Navi_css.htm)。
3. 導覽頁應內嵌在「動態範本」上。
4. 互動式按鈕應使用個人化設計,存在共用工具夾內(如 !TxTemp),並可隨時置換按鈕圖形。
導覽頁(Navi_css.htm)程式示例
<table style="width: 140px;">
<tr>
<td class="navi-icon"
style="width: 140px; height: 35px"><span class="navi-text">
<a
class="navi" href="../index.htm">站名</a></span></td>
</tr>
<tr>
<td class="navi-icon" style="width: 140px; height: 35px"><span
class="navi-text">
<a class="navi" href="../CollegeYouth.htm"
target="_blank">大學青年</a></span></td>
</tr>
<tr>
<td
class="navi-icon" style="width: 140px; height: 35px"><span
class="navi-text">
<a class="navi"
href="../Planning.htm">企畫管理</a></span></td>
</tr>
<tr>
<td
class="navi-icon" style="width: 140px; height: 35px"><span
class="navi-text">
<a class="navi"
href="../Assignment.htm">分工管理</a></span></td>
</tr>
<tr>
<td class="navi-icon" style="width: 140px; height: 35px"><span
class="navi-text">
<a class="navi"
href="../Gantt.htm">進度管理</a></span></td>
</tr>
<tr>
<td
class="navi-icon" style="width: 140px; height: 35px"><span
class="navi-text">
<a class="navi"
href="../VideoStoryboard_blank.htm">劇本設計</a></span></td>
</tr>
</table>
導覽專用CSS設計
在共用工具夾內(如 !TxTemp)tx-14.css 檔案中之設計。
導覽專用之按鈕圖形與文字
其中特別要指定的,是按鈕圖形檔案的名稱,而位址通常放在同一共用資料夾內。
.navi-icon {
background-image: url('TxNavi.gif');
font-family: "Arial Narrow",Impact,微軟正黑體;
font-size: 20px;
font-weight: bold;text-align: center;
vertical-align: central;
}
導覽專用之文字
如果不使用圖形,可僅設導覽專用之文字如下。
.navi-text {
font-family: "Arial Narrow",Impact,微軟正黑體;
font-size: 20px;
font-weight: bold;
text-align: center;
}
在共用工具夾內(如 !TxTemp)之 TxNavi.gif,就是個人化之導覽專用之按鈕圖形。
導覽專用之互動式連結
由「數位調色制度‧數位色輪‧數位調色盤」之 RGB 設計,可知:
a.navi:link {color:#FFFF00;text-decoration:none;}
黃色
a.navi:visited {color:#FFFFFF;text-decoration:none;}
白色
a.navi:hover {color:#D2FF78;text-decoration:none;}
淺綠色
其中:a.navi: 後面的,都是 CSS Pseudo-classes 偽類別/特定格式標籤/副標籤。
link:預設連結色彩
visited:已去過之連結色彩
hover:游標滑過、但未點選之連結色彩
以上色彩 color,可按網站「選色與配色」方法調整。
專用導覽頁
專用導覽頁之應用,包括:設計、修改、新增
專用導覽頁之設計
參考 Navi_css.htm,使用表格設計法。
故所有設計工作,與表格設計相同。
專用導覽頁之修改
如將預設「站名」,改為個人化站名。
直接滑鼠反白修改。
專用導覽頁之新增
專用導覽頁之新增,可有2種方式選1:複製導覽按鈕法或插入導覽按鈕法。
複製導覽按鈕法(初學者方案)
複製導覽按鈕法,即複製任一導覽按鈕,貼到預訂排序位置,再修改導覽名稱與連結。
插入導覽按鈕法(適熟悉
css 應用者)
插入導覽按鈕法,就一般表格設計,是正規的方法,如在「總目錄」下,插入本站文章,則按〈插入〉〈下方列〉,再設定連結文章。
但設定連結後,必須加設專用之互動式連結之 class="navi"。
<a class="navi" href="位址">導覽名稱</a>
Other Html/Css Navigation Button Design 其他Html/Css 按鈕設計法
以Html/Css 為基礎,導覽按鈕設計的其他方法。
最簡 HTML 法:只適合小型網站
http://www.creationguide.com/ch07/extras/index.HTML
其他 CSS 法
http://www.w3schools.com/css/css_navbar.asp
CSS 進階法
http://woork.blogspot.tw/2008/02/elegant-navigation-bar-using-css.HTML




