關閉導覽列 Close Menu
數位文創
English
吳統雄
數位美學
電子書
數位視覺
優化網站
微電影
數位文創管理
大學青年網誌
研究目錄
教學課程頁
討論區目錄
站務與協助
☰
More
社群地圖
社群新聞
│吳統雄
履歷
研究
教學
服務
榮譽
│社科
第1類知識
第2類知識
第3類知識
研究方法
統計/多變項分析
投票行為與選舉預測
53237 選民結構
人類取用行為新典範
取用行為國際研究團隊
│資管
管理學‧經濟學
貨幣主義
數位貨幣‧投資行為
資訊系統開發
電子商務
網路教育
數位電視
產學合作
就業進修‧甄選必勝
│文創
數位美學/數位文創導論
數位出版/電子書
視覺設計
優化網站
數位視訊/微電影
數位文創管理
大學青年‧網路雜誌
│電音
統雄 數位音樂作品選
我,被禁唱的民歌手
數位音樂創作教學
統雄的音樂知識美學
歡迎聽歌.點歌.下載樂譜
│人文
公共評論
法律評論
社會評論
教育文化傳媒評論
科技科普評論
美語樂學
文學創作
萬象現代(NBA)
資訊社會
幽默人生
統雄樂水
Automations 1.2

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

留言與討論

Post a public message. 留言

私人來信-Write a private mail

Send me an email. 電子郵件 

note

Notes. 注解

網站實作範例實作範例

設定預設閱覽順序 Pagination Design

在有系列文章的網站中,多以簡單阿拉伯數字設定「預設閱覽順序 Pagination」。但若以「前後」圖示設計,在視覺效果上更佳,圖示宜配合「識別標幟系統」,作個人化設計。

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篇

無限捲軸 Infinite Scroll無限捲軸 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>

點選以下圖示以觀察其應用,同時注意「跳出注解 」效果。

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

Click to enlarge


高級連結應用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

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

上層主題
Web: 什麼是Web?Web虛擬世界的實體環境與虛擬環境 Web: Fundamentals
IIS: 什麼是 IIS?網站部署與IIS基礎應用 IIS: Fundamentals
Web的設計與管理模式 Web Design and Management Models
網路內容的製作與呈現類型 Internet Contents Presentation Types
Web Design Tools 網站開發工具
How to Expression Web/SharePoint Designer 微軟網站開發軟體應用快訣與其機巧
A Quick Canon for Expression Web 網站設計:Expression Web 簡捷建站功法
A Quick Canon for SharePoint 網站設計:SharePoint 簡捷建站功法
How to Html 超文件標註語言的結構、功能、應用快訣與其機巧
網頁語言 HTML5 簡介 HTML5: An Introduction
Web Analysis Framework and Its Formation Elements 網站/網群創作分析架構與建構元素
Web Design: Community Structure 網群結構
Website Structure_Navigation Design/ 網站虛擬結構:Extension Web 導覽設計
Website Structure_Navigation Design/ 網站虛擬結構:SharePoint 導覽設計
Web Design: Website Structure_Folders Design/網站實體結構:資料夾設計
Basics and Borders Method of Web Page Layout 網頁平面設計基礎與邊框法
Table Method of Web Page Layout 網頁平面設計表格法
Frames Method of Web Page Layout 網頁平面設計框架法
CSS Method of Web Page Layout 網頁平面設計CSS法
Web Design: Context- Presentation 意涵-文字視覺設計:字碼‧字型‧字體與字的性格
Web Design: Context- Presentation 意涵-文字視覺設計:字級‧字大小‧字重要性
Web Design: Context- Presentation 意涵-文字視覺設計:其他字特徵的呈現與配樣式
Web Design: Context- CSS 網站/網頁設計:意涵/文字-什麼是CSS
Web Design: Context- CSS Practice 網站/網頁設計:意涵/文字-CSS 實作
CSS Practice Advanced 層疊樣式表 CSS 進階實作_網站/網頁設計:意涵/文字
Web Design: Theme 網站布景主題設計
布景主題個人化 Personalized Theme
Web Design: Blocks- Pictures 網站/網頁設計:圖文框-圖片/影象處理
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格多元應用
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格與邊框設計
Web Design: Blocks- Tables 網站/網頁設計:圖文框-表格進階應用
Web Design: Blocks- Objects 網站/網頁設計:圖文框-非圖表物件
Webpage Layers Design 圖文層設計‧網頁圖層應用
Web Design: Automations-Links 網站/網頁設計:自動化與互動-超連結與導覽
Various Hyperlinks_Automations and Interactivity 各種超連結_自動化與互動
Navigation Bar Design 導覽列設計/微軟網路機器人 Webbot 法
Navigation Bar Design 導覽列設計/互動式按鈕設計法
Navigation Bar Design 導覽列設計/自訂 Java 法
Navigation Bar Design 導覽列設計/Html5 CSS 法
Navigation Bar Design 導覽列設計/下拉選單與樹狀導覽法
Navigation Bar Design 導覽列設計/雙導覽列_多導覽列法
Navigation Bar Design 導覽列設計/固定位置導覽列法
Information Map Design_Web Design 資訊地圖設計
Web Design: Automations-Webbot 網站/網頁設計:自動化與互動-網站機器人
Web Design: Automations- Advanced 網站/網頁設計:自動化與互動-雲端元件
Web Design: Multimedia 網站/網頁設計:多媒體影音應用
Web Design: Multimedia 網站/網頁設計:網路音訊與網路收音機設計
Web Design: Multimedia 網站/網頁設計:嵌入影音播放器標籤
網頁內嵌多媒體當機‧整體優解 QuickTime Plug-ins 7.7.4 has crashed
Web Design: Multimedia 網站/網頁設計:播放清單檔設計
網頁視訊與媒體播放器
在網頁插入微軟視窗媒體播放器
Insert Adobe Flash Player 插入Adobe Flash 播放器
Embed YouTube Player and iframe Tag 嵌入YouTube播放器與遠端影音之標籤
HTML5 Video: A Morning Glare Battlefield/ HTML5 媒體播放器:旭光戰場
Video and Media Player 播放器進階與視訊小工具
Web Design: Dynamic Templates 網站動態範本設計
Web Design: Dynamic Templates 網站動態範本應用
目錄管理與遠端編輯


內容網站:提供與分享各種知識、資訊、作品。互動群組:社員可以討論、展示、交流、企畫、分工、管理、投票決策。合作群組:Web2.0的民主自治精神,社員可以參與決定群組的內容與表現形式。

吳統雄的音樂-Sean TX Wu's Music  笑話中學美語-Humor and American English Learning   私人來信-Write a private mail to Sean TX Wu  留言與討論 Leave Comments/ Forum 吳統雄的相簿-Sean TX Wu's Album

只在「統雄社群」內查詢以下主題 Search in TXCommunity

統雄網群的Google排行本站Google排行榜‧全球冠軍
統雄社群-相關主題

各種超連結與導覽

Link Between Webs,站間連結
Meta tag, Redirection,統合標注與重新導向
Target Frame,目標框架
Bookmark: Within Page,頁內書籤
Email Address 連結電子郵件
Icon: Visual Link,圖示連結
閱覽順序 Pagination
無限捲軸 Infinite Scroll
Link on a image 圖片連結格式
Link external pics,站外圖片連結
Link Management,連結管理

導覽列與按鈕設計

微軟網路機器人 Webbot 法
導覽列設計/互動式按鈕設計法
導覽列設計/自訂 Java 法
導覽列設計/Html5 CSS 法
導覽列設計/下拉選單與樹狀導覽法
導覽列設計/雙導覽列_多導覽列法
導覽列設計/固定位置導覽列法
Information Map,資訊地圖設計

微軟網站機器人與表現方式

Common Contents,共用內容
Marquee,跑馬燈
Common Contents,共用內容
Navigation History導覽歷史管理
Using Behaviors, 基本Java應用
Redirecting users to a new window 導向新視窗
Messages in status bar狀態列訊息

網路互動與雲端元件應用

Search,搜尋引擎設定
Pop-up Page,彈出網頁
Rotating Banners,動態橫幅
FB Apps,臉書外掛程式
Web Counter 網站計數器
npm: java Node 模組
Other Java Apps,其他Java程式