網站/網頁:自動化與互動設計 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

網站實作範例實作範例

子導覽設計

網站虛擬結構第二層以下的目錄,特稱為「子導覽」,也就是該階層、單元中文章間的連結。

web automation

連結對象

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).

advanced 全頁預設目標框架

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:

回頁首 Up to page head

Go to the top of this page.  到頁首

下一頁 Go to nex page

Go to the next topic. 下1篇

上一頁 Back to previous page

Back to the previous topic. 上1篇

note

Notes. 註解

留言與討論

Post a public message. 留言

私人來信-Write a private mail

Send me an email. 電子郵件

高級連結應用Link on a image 圖片連結邊界格式

圖片連結邊界格式預設為 2px 直線,通常會使用CSS ,改為無邊線 "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

在某些網站環境、或應用程式中,如 FacEBook 已證實可能會誤讀。


HTML 4 之前

網站實作範例實作範例

在同一頁中,設定大綱連結位置。

Insert-Bookmark

web automation

書籤設計技巧

書籤經常是連結到一個標題,不要把書籤設訂在標題前面,而應設在標題中間。

否則,在標題前插文、插物件時,書籤會移位到錯誤位置。

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 ManagementLink Management 連結管理

僅適用 sharepoint, frontpage。

>Tab Web

>Hyperlink

>Right click the  target page

link   

回頁首 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
同類別內相關主題