Information Map Design
資訊地圖設計

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

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


Links and Navigation 超連結、導覽與重新導向

超連結:以<a></a>所構成,各種站間、站內物件的相互連結。

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

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


熱區連結 + 選擇性跳出提示

資訊地圖除了是一種圖片連結外,更是數位遊戲的基本設計方法之一。

thememap

網站實作範例實作範例

數位作品主圖:電子書封面、網站頂圖等。

熱區連結 

資訊地圖的「熱區」就是在圖像的局部區域中,設計超連結的應用。可以設計在主圖之上,或下載範例後,實作如下。

〉檢視〉工具列〉圖片

可以顯示「圖片工具列」,其中有:圓形、矩形、和多邊形3種繪製區域的方法。

選擇性跳出提示

設計好熱區後,可以選擇是否要加入跳出提示,這個步驟必須自撰程式。

以統雄老師的熱區為例,語法如下:

<area title="指導老師吳統雄教授 Adviser: Prof. Sean TX Wu" href="http://tx.liberal.ntu.edu.tw/" target="_blank"/>

即在<area>標籤命令之中,加入  title=""屬性,如:

title="指導老師吳統雄教授 Adviser: Prof. Sean TX Wu"

Planning 資訊地圖企畫

Input this demo graphics into a folder, such as 'image', in the web.

Use 'Table' to decide the location of the main graphic.

Adjust desirable size.

Input this demo graphics into a folder, such as 'image', in the web.

Use 'Table' to decide the location of the main graphic........'- rectangular, circular, or polygonal- to decide the shape of object.

Edit the hyperlink.

形式與內容的統一,視覺對主題的啟示

各獨立單位便於適當分割的設計

協調、對比、與畫面的動力

note Warning

You are not able to resize or use 'Hot Spot' with 'Position absolutely'.  You may use 'click and drop' to decide the location.

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