Navigation Bar & Navigation Buttons Design by
MS Webbot
導覽列與導覽按鈕設計4：Html5 CSS法
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links, Navigation and Mata page 超連結、導覽與重新導向
超連結：以<a></a>所構成，各種站間、站內物件的相互連結。
導覽：對具有結構性的內容引導，通常具備按鈕或統一性的視覺設計。
重新導向：是統合標籤(Meta Tag)的一種，可將檔案轉為另一個檔案。
[RwdColorStone/!Related/Navi.htm]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
