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.
實作範例
設定預設閱覽順序
在有系列文章的網站中,多以「前後」圖示設定「預設閱覽順序」。「前後」圖示宜配合「識別標幟系統」,作個人化設計。
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篇 |
|
![]() |
Notes. 注解 |
![]() |
Post a public message. 留言 |
![]() |
Send me an email. 電子郵件 |
將縮圖展開
在圖文框設計章、插入圖片與設定屬性節中,曾把圖片縮小作為圖示。
可以使用連結、目標框架為另開視窗的方法,展示原圖、甚至放大。
程式碼如下:
<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




