Website Virtual Structure: Navigation
網站虛擬結構:導覽設計 SharePoint Designer


SharePoint Designer 的導覽設計本講義專為介述 SharePoint Designer 的導覽設計。

Expression Web 的導覽設計Extension Web 的導覽設計請按這裡


Web 結構包括3層涵義:網群結構網站結構網頁結構

As a project leader, you want to moderate the interaction among websites in a web community and to develop a full-scaled structure that has a scope of whole picture than to design details.

note However, according to previous experience, many students would have difficulties to comprehend the complications.  If you do not have a full vision in your mind yet, you may go to 'Website Structure' in the first place then come back latter.

Web 結構包括3層涵義:網群結構網站結構網頁結構。網群結構為網站之間的連結,伺服器與後端資料庫的配置。網站結構包括虛擬結構-導覽設計,與實體結構-資料夾設計。網頁結構常用2欄或3欄式,平面設計與分欄方法過去包括邊框法、表格法、框架法,但當前以CSS法為優,必要時可搭配綜合法。頁面導覽,有從單導覽,往雙導覽、多導覽發展的趨勢。另有Pop-up Page立體空間之彈出網頁設計。


網站結構包括虛擬結構-導覽設計,實體結構-資料夾設計,與多導覽設計。

Open a New Site and Check Settings

Navigation : Visual Virtual Structure

虛擬結構-導覽設計

Navigation structure provides a virtual structure of the appearance that your web looks like. It imply that it may not the same as your physical structure.

Navigation starts from the homepage, e.g. index.htm etc.

Tool bar-Create a new blank page

建立首頁作為導覽的中心

導覽是給閱聽人看的,是公開的網站內容組織方式。但考慮:

有公開、也有隱藏的部分。

閱聽人瀏覽的程序和彈性調整的需要。

網路各種多媒體資料管理與流量的效益。

資料與伺服器系統的安全性。

所以,導覽的組織應該與伺服器上的真正實體組織不同,而稱為「虛擬結構」。

Save as 'index.htm' and change its title.

Web Structure

TxWarning You are not able to use "drag-and-drop(dnd)" to setup navigation, if the "Share Borders" is off. However, you may use right click to add new pages under "Homepage". It also will trigger the "dnd" function.

Navigation view

導覽檢視

Designed by the requirement analysis of the community, such as a plan of a web based media:

It is recommended to divide  the unit into couple article pages, if you have a large unit. The unit page will play the role of introduction and unit index. It is as well you can separate your long article into chapter pages. However, you do not have to decide the pages under 3rd level in the first stage of planning.

Web Structure

 

Naming system

導覽的命名

導覽屬於虛擬物件,建議所有虛擬物件都以「當地語文」-也就是以中文命名。

Navigation organizations

導覽組織方式選擇

右鍵〉一般

通常選擇〈首頁下方的子網頁〉

Right click-Link bar properties

Option: Child pages under home.

Check: Home page, parent pages.

導覽結構

Navigation styles

導覽樣式選擇

動態導覽按鈕設計可分作 3 個方案:

1. SP 內嵌導覽按鈕_不可修改

2. SP 導覽按鈕可修改範本

3. 個人化完全自設導覽按鈕

本章先介紹第一種,後兩者在「自動化」篇再詳述。

導覽樣式選擇本程序應作在「動態範本」上。

右鍵〉樣式

Right click-Link bar properties-Style

You can use the page theme or use another one.

導覽樣式

Multiple Navigations Design 多導覽設計

According to the documents of W3C and Google SEO etc, we may suggest the following:

Left navigation: inside web links with hierarchical design.

Top navigation: common links cross web community or management  links.

Right navigation: user defined links, outside web links or subject links with parallel design.

根據各個網站設計規範組織,如W3C,Google SEO 等,綜合建議如下:

左導覽:站內導覽,階層式搜尋設計。

右導覽:站內/社群間導覽,主題式、平行式搜尋設計。

上導覽:站外、社群間導覽,或管理者導覽,連結頁搜尋設計。

多導覽實作多導覽實作


txa Webbot vs. HTML Link Bar

Webbot saves all gif of link bars into the folder of  _derived.

Further info for converting webbot to HTML.


Website Structure- Physical 網站結構-實體結構

Web Community Structure 網路社群結構設計

Web Page Structure: Plane Design 網頁結構/平面設計

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