網站/網頁：自動化與互動設計 1.2
Various Hyperlinks 各種超連結與設定
Web Design:
Automations - Epistemological/Digital Aesthetics
- Formation Methodology
網站/網頁設計:自動化實作-知識美學/數位美學之建構方法
Links and Navigation 各種超連結、導覽與重新導向
超連結：以<a></a>所構成，各種站間、站內物件的相互連結。
導覽：由超連結所組織而成，具有結構性的內容。通常具備按鈕或統一性的視覺導引形式。
重新導向：是統合標籤(Meta Tag)的一種，可將檔案轉為另一個檔案，或 重新導向到不同的位址。這種標籤必須在<head></head>之內，所以在程式設計時，出現早於超連結和導覽。
Link: Mark Object-Insert-Hyperlink
實作範例
子導覽設計
網站虛擬結構第二層以下的目錄，特稱為「子導覽」，也就是該階層、單元中文章間的連結。
連結對象
a href 的意思: anchor's horizontal reference
以上連結的程式為：
<a href="Article_1.htm">
其中標籤 a 的意思是 anchor 錨點、也就是連結的意思。
屬性 href 的意思是 horizontal reference 水平連結（參考），其實 horizontal 有點贅語。
整個 html 的命名，由於希望創造「抽象的廣度」，結果有時不容易立刻掌握，如前面介紹過的 selector 命名一樣。
Insert Link and its Dialogue Box
如何決定 Target Frame 目標框架
預設為相同框架，常用選擇方案：
連結到相同框架
連結到另開視窗
外站、外頁連結。
The most popular are default (none or _self) and new window (_blank or _new).
全頁預設目標框架
Choose _blank and check the "Default" checkbox will produce the following code:
<base target="_blank"/>
before the </head>
that will define all links behaviors of the whole page.
超連結的名稱 id‧HTML5 的重大變動
超連結的名稱，從前由 name="" 設定，在HTML5 後，有重大變動，改為由 id="" 設定‧
注意：EW 的超連結的名稱，還由 name="" 設定，故應手動修正。
Email Address 連結電子郵件
實作範例
在「著作權宣告」中，設定「總編輯」連絡方式。
設定收件人與主旨。
Icon: Visual Link 圖示連結/圖片連結
連結功能可以昨在各種圖示/圖片上，以實現視覺提示的互動功能。
It is recommended to design icons for visual links.
 |
Post a public message. 留言 |
 |
Send me an email. 電子郵件 |
|
|
Notes. 注解 |
實作範例
設定預設閱覽順序 Pagination Design
在有系列文章的網站中，多以簡單阿拉伯數字設定「預設閱覽順序 Pagination」。但若以「前後」圖示設計，在視覺效果上更佳，圖示宜配合「識別標幟系統」，作個人化設計。
Icons are appropriate for common links as an idea of coherence, such as:
 |
Go to the top of this page. 到頁首 |
|
|
Go to the next topic. 下1篇 |
|
|
Back to the previous topic. 上1篇 |
無限捲軸 Infinite Scroll
無限捲軸 infinite scroll 就是在網頁讀取資料時，按照以上設定預設閱覽順序 Pagination 自動讀入的技術，當使用者到網頁的最下方時，會自動載入新下1篇頁面。常見的範例，就是 Google 的圖片搜尋。
設計上，多採用網路上以 Java 為基礎的套件。
將縮圖展開
在圖文框設計章、插入圖片與設定屬性節中，曾把圖片縮小作為圖示。
可以使用連結、目標框架為另開視窗的方法，展示原圖、甚至放大。
程式碼如下：
<p><a target="_blank" href="../!Cache/TxComm.gif"><img alt="Click to enlarge" title="點選可以放大本「統雄社群標章」" src="../!Cache/TxComm.gif" style="width:58px; height:51px" class="border0"/></a></p>
點選以下圖示以觀察其應用，同時注意「跳出注解 」效果。
Tip: Show the original or another size of a pic.
Click the minimized icon and choose _blank. It will result the original size in another window.
Link on a image 圖片連結邊界格式
圖片連結邊界格式， Html5 預設為 0px 直線，Html4預設為 2px 直線，為避免版本影響，通常會使用CSS 自訂，改為無邊線之 class "border0"。
The default border of a image is "0" while of a linked-image is "2". Thus, you want to setup a "border0" class for the images that you do not want them with solid borders.
Bookmark: Link Within Page 書籤設計
HTML5 之後
書籤設計是HTML5 版本之後，最大的改變之一。原因：不是改屬性、設定值，而是連標籤、觀念、用法整個改了。
EW 的書籤名稱，還由 name="" 設定，故不建議使用；一定要用，也要手動改為 id=""。
實作範例
書籤設計可以分作頁內書籤、與頁外書籤。
在同一頁中，設定跳到標題、段落、大綱、物件連結位置。
譬如：本文介紹到「頁外書籤」，如果想要知道內容，直接跳到「頁外書籤設計」之「標題」，則在該「標題」設計時，應加上 id，如：
<h3 id="ouside" class="backyellow">Specify Bookmark for an Outside Page 頁外書籤設計</h3>
然後在連結文字「頁外書籤」4個字上作書籤連結，以 # 表示：
<a href="#outside">頁外書籤</a>
就會直接跳到該標題位置。
Specify Bookmark for an Outside Page 頁外書籤設計
實作範例
在首頁序言、編者的話中，連結站內特定主題。
linkpage.htm#bookmark
書籤宜同一字串
亦即宜 #bookmark
不宜 #book mark
在某些網站環境、或應用程式中，如 Faccbook 已證實可能會誤讀。
HTML 4 之前
實作範例
在同一頁中，設定大綱連結位置。
Insert-Bookmark
書籤設計技巧
書籤經常是連結到一個標題，不要把書籤設訂在標題前面，而應設在標題中間。
否則，在標題前插文、插物件時，書籤會移位到錯誤位置。
Specify Bookmark for an Outside Page 頁外書籤設計
實作範例
在首頁序言、編者的話中，連結站內特定主題。
linkpage.htm#bookmark
書籤宜同一字串
亦即宜 #bookmark
不宜 #book mark
在某些網站環境、或應用程式中，如 Facebook 已證實可能會誤讀。
書籤與標題順序
程式碼之書籤必須在標題標籤之後，如
<h4><a name="intro"></a>標題</h4>
若書籤在前，有可能定位錯誤。這應是 HTML5 要大改革的原因之一。
Advanced
Links 高級連結應用
Link external pics 站外圖片連結
如何連結到其他網站的圖片？
在 src="" 中設定網路位址，並可設定顯示格式。
For the legal issues or the save of disc space, you may manually link the external pics by the syntax as the follows.
<img src="http://site/images/pic.jpg" width="123">
<base target>：連結與內置框架<iframe>共同應用
<base target="parent"/>
會顯示在插入該內置框架的頁面中，而非內置框架本身。
範例：http://tx.liberal.ntu.edu.tw/GreenCot/
中央框架
〉總導覽/大學青年‧網路雜誌總目錄
頁尾「大學青年社掌」名單（內置框架）的設計。
Link Management
連結管理
僅適用 sharepoint, frontpage。
>Tab Web
>Hyperlink
>Right click the target page
