Web Structure: Site _SP

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

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.

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.

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

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 網頁結構/平面設計