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)的一種,可將檔案轉為另一個檔案。

導覽列與導覽按鈕的設計方法導覽列與導覽按鈕的設計方法

導覽列與導覽按鈕的設計方法,常用的有以下類型:

導覽列與導覽按鈕的設計方法導覽列設計/微軟網路機器人 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>

Html5 CSS 導覽設計法

 

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

回頁首 Up to page head 至相關主題 Go to related pages
上一頁 Back to previous page 回頁首 Up to page head 下一頁 Go to nex page  
請點這裡看所有留言分類 Please click here to view categories of comments
同類別內相關主題