Hyperlinks, Navigation and Redirection
各種超連結、導覽與Meta重新導向

統雄社群-相關主題
數位出版設計:意涵/樣式篇Web Design: Automations - Epistemological/Digital Aesthetics - Formation Methodology

數位出版設計:意涵/樣式篇網站/網頁設計:自動化實作-知識美學/數位美學建構方法


超連結:以<a></a>所構成,各種站間、站內物件的相互連結。連結方式分作相對位址 Relative Address,與絕對位址 absolute address。

導覽:由超連結所組織而成,具有結構性的內容。通常具備按鈕或統一性的視覺導引形式。

重新導向:是統合標籤(Meta Tag)的一種,可將檔案轉為另一個檔案,或重新導向到不同的位址。這種標籤必須在<head></head>之內,所以在程式設計時,出現早於超連結和導覽。


Hyperlinks: Addresses

超連結的位址格式

You can set hyperlink both on text or picture or any object.

There are 2 ways for between webs hyperlink: relative address and absolute address.

warning Warning

Relative Address is a very flexible, effective, and portable method to organize multi-web structure. However, after FrontPage 2003, the webbot will change relative address into absolute address automatically and produce wrong link eventually. A possible reason may some ordinary users are not able to identify what is 'relative' while 'absolute' is easier to understand.

The following example is for advanced user to program manually.

LinkGo to next topic

Relative AddressRelative Address 相對位址

Relative Address 相對位址是網頁所在,網站實體結構與路徑上的檔案。

It is useful for the web communities under 'hierarchical model'.

Relative address describes the 'parental-child' relation that is defined by the common standard  of disc management.

Such as:

..\..\MyWeb\TX\ColorStone\Web\WebDesign-Auto.htm

It is good, and only good, for a stable physical web structure and has higher performance to link.

Absolute AddressAbsolute Address 絕對位址

Absolute Address 絕對位址是網頁伺服器所在,網站虛擬結構上的檔案。

Absolute address is set by the URL (http://) management standard.

Such as:

http://tx.liberal.ntu.edu.tw/ColorStone/Docs/WebDesign-Auto.htm

This address is not only valid for the web communities under 'relational model' but also able to apply to any links.

 

Meta, Relational Navigation & Redirection

統合標注標籤、關聯式導覽與Meta重新導向

For an example:

You have a page 'Series' that contains all contents of past and current issues. Since you do not want a redundant work, you will not design this page in your web. You will make it link back to the main web instead. This process will also make this page become a 'relation' to organize your web community.

Using Meta Tag 統合標注標籤

什麼是Meta Tag

Tag 是標注語言的標注命令,Meta 直譯是「超」,大陸習慣譯「元」,真正的意義是「標注的標注」,用途不是一般作為網頁呈現的標注命令,而是對網頁描述、行為的標注。所以譯為「統合標注」似可達意,正如 Meta Analysis的用法。

Meta Tag SEO 與網站管理影響深遠,但對一般使用者而言,實務需求應用就較少,常用的為Meta重新導向。

Meta 重新導向 meta http-equiv="refresh" 應用

meta http-equiv 標籤,在 html5 之前有多個用途,在 html5 之後一般僅作為Meta 重新導向,且有 3 種應用:

關聯式導覽 Relational Navigation多重首頁設計 Multiple Homepages版本、檔名更新 Versions Filenames Updates,將舊檔案連結到新檔案。


Relational Navigation 關聯式導覽

關聯式導覽就是利用重新導向的方式,將本站內的網頁,重新導向為另一個站內、或站外的網頁。

HTML View Tab

Meta Tag 統合標注標籤實作範例

以下是「大學青年‧網路雜誌」群中之各子網站,使用關聯頁,導回總目錄的範例。

命令中 content 屬性的第一個值為數字,表示在原頁面停留若干秒後再導向,此處為 0,表示立刻重新導向。

 content 屬性的第二個值為所導向的網頁。

Insert a command between <title> and <body>, as follows:

<meta http-equiv="refresh" content="0; url=http://...">

And an example could be:

The 0 following =" and followed by ; is the seconds of pause. In this case, it will automatically link to the followed target page without pause. You can change the number to make it stay longer before linking to other page.

web automation


多重首頁設計 Multiple Homepages

如果考慮「Google 排行榜」排名,必須使用「內容網站」設計、強調版面分區豐富;但如果考慮「跨平臺使用者」,必須使用「跨平臺網站(即回應式網站)」設計、強調版面分區簡化。此時折衷方案就是作多重首頁設計,第一個簡化首頁,再使用Meta 重新導向,自動再轉為分區豐富的首頁。

或是有時候,網站中的某一個專題,希望專題的首頁有特色視覺設計,不想使用固定範本;但由於「風格一致性」的原則,專題內容宜回歸風格,亦可採用 <meta http-equiv>法。

Meta Tag 統合標注標籤應用範例

如「第3類知識:人類行為研究 計量思想的發展與前瞻」專題,是應用圖形作專題首頁,設定:

content="12; url=http://..."

如瀏覽者不點選,也會於12秒後,自動導向簡報首頁。


版本、檔名更新 Versions Filenames Updates

將舊檔案連結到新檔案

檔案名稱變更後,如何使舊檔案名稱連結到新檔案?

檔案名稱變更後,如果修改過去所有檔案之間的連結名稱,工程非常浩大。

而過去外站對本站的連結是一種資產,不可能通知所有外站修改,也將全部損失。

故應使用以上「關聯式導覽」方法,將舊檔案名稱連結到新檔案。

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