
Website Virtual Structure: Navigation
網站虛擬結構:導覽設計 SharePoint Designer
本講義專為介述
SharePoint Designer 的導覽設計。
Extension
Web 的導覽設計,請按這裡。
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.
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.

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.
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 等,綜合建議如下:
左導覽:站內導覽,階層式搜尋設計。
右導覽:站內/社群間導覽,主題式、平行式搜尋設計。
上導覽:站外、社群間導覽,或管理者導覽,連結頁搜尋設計。
多導覽實作
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 網頁結構/平面設計




