Web Structure: Page Design 4

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.

Web Page Layout/ Plane Design 網頁平面設計

網頁結構常用2欄或3欄式，平面設計與分欄方法過去包括邊框法、表格法、框架法，但當前以CSS法為優，必要時可搭配綜合法。頁面導覽，有從單導覽，往雙導覽、多導覽發展的趨勢。另有Pop-up Page立體空間之彈出網頁設計。

邊框法只能配合800*600之解析度，已逐漸過時。框架法雖曾經盛行一時，但不利SEO之搜尋效果。實務上，有不少以表格法為基礎、CSS法為骨幹的綜合法。CSS法應是Web設計的優先選擇，也是未來趨勢。

The popular methods are: by border, by table/grid, by frame, by CSS and by hybrid.
The measurement of size could be fixed (by pixel) or liquid (by %) or hybrid.
However, the CSS method (such as div) may resolve conflicts since it is still under progressive development.

CSS/RWD Design 跨平臺行動裝置網頁設計之CSS/RWD法  

當前強調跨平臺行動裝置，主要就是程式可由電腦、手機與平板共用，即RWD法，均由 CSS 達成，當前更已進入 Psot CSS3 時期。

以下介紹當前最流行、也最適用的1000px，3欄設計，14區的規畫。

網頁欄與區‧規畫的根據

欄，是依據當前一般「顯示器解析度」、「易讀性」而設計的垂直空間。

區，表達的是「結構」中的空間位置，與「意涵」中的特定功能。

14區中，除了「上頂圖」區，是「內容網站類」的必備功能。

「上頂圖」區，是當前許多社交網站、部落格的常見規畫，但觀察其實務表現，視覺設計的深度表現經常不足，徒浪費空間與延緩呈現文字的訴求。然而在潮流趨勢下，仍宜保留功能區，是否使用，則應視素材而定。

優化設計‧強調「結構與意涵」的完整

本系列講義，強調「數位內容類」的「『優化』網群、網站、網頁設計」，目標是創作內容經得起長期考驗，累積點閱率能夠在全球名列前茅，必須強調「結構與意涵」各種功能的完整，而「Google 排行榜」已證明目標的實現。

雙/多首頁．非結構性特定單頁設計

但統雄老師並不反對非完整結構性、而強調重點眩、酷的設計。個人網站除了基本結構的「範本頁」外，可另行設計非結構化的單頁，以「雙首頁」、甚至「多首頁」的設計呈現；或者，也可以加入各種不同平面設計的特定「推廣頁」。

以下14區的規畫，必要時也可以使用2個以上的範本聯合呈現，但不應有所疏漏。

在分區規畫中，也特別提示了語意元素‧意涵式標籤的應用，如<nav>，<header>，<article>，<footer>，<aside>等。

展望顯示器解析度的提升，更大網頁的平面規畫，也可以下述設計為基礎。

黃色區：必須個人化。

紅色區：必須保留。

白色區：自由選擇是否個人化，但如無替換內容，則應保留。

Upper Whole Column 上全欄

上全欄通常包括2區：上導覽、上頂圖。

上導覽

上導覽通常是作為管理導覽、站外導覽，或是網路社群的總導覽，應統一。

注意：各種導覽：社群、站內、同分類…導覽，均可以<nav></nav>規畫。

上頂圖

上頂圖是當前一些社交網站、或部落格的流行作法，在設計上可保留此區，但不一定要使用。

Left Column/ Sidebar 左欄

左欄，在西方出版史上有一個專有名詞 Sidebar，中文譯為報頭、刊頭，一直沿用到電子數位出版與網站設計上。

In-Site Navigation 站內導覽區

左導覽常為主導覽，作為站內導覽，而採用階層式設計。

站內導覽通常以單獨網頁形式存在。

在範本網站中，有2個不同的導覽設計，在以下資料夾內：

!TxTemp/Navi_left.htm

!TxTemp/Navi_css.htm

主導覽列與中央欄的橫幅，是網站識別標幟系統中，最基本的2個物件，應有統一風格的設計。

相關範本，請參考：「橫幅導覽組」系列。

程式碼中的 Webbot 為微軟機器人，在「自動化」篇中再介紹。

News 新聞區

新聞區可以是社群新聞或個別新聞，但必須經常維護，如果無法經常維護，應採用社群新聞。

<aside>應用

在 Html5中，建議可用<aside>設定左欄。

Center Column 中央欄

Main Graphic 主圖區

主圖是網頁文章的主要視覺輔助。至少在首頁，應有個人設計作品。

Banner 橫幅區

橫幅與主導覽列，是網站識別標幟系統中，最基本的2個物件，應有統一風格的設計。

相關範本，請參考：「橫幅導覽組」系列。

There are "System Theme Banner" and "User Designed Banner". However, the System Theme Banner is going to be deprecated in the near future.

User Designed Banner 橫幅的個人化視覺設計

Contents 網頁內容區

內容區以中央呈現為基本原則。

討論區

討論區可以是社群討論或個別討論，但必須經常維護，如果無法經常維護，應採用社群討論。

同類主題

同類主題是放「虛擬導覽」第二層以下的子導覽，通常採用簡單視覺的自動化設計，於「網站自動化」篇再介紹。

Copyright and Announcement 子站著作權區

宣示包括：指導老師：吳統雄，總編輯：姓名，其他共同事項。

The bottom border provides the function of 'foot note' such as copyright, acknowledgement, credits and common information. For a web magazine, there will be the name of the Publisher/ Publishing Advisor (the legal representative) and, sometimes, the Editor-in-chief.

Warning: All students must take the responsibility of the copyrights of the multimedia that have been used in their works.

A message, as follows or "Creative Commons", must be included in the announcement of their works.

著作權聲明可以選擇保護，或採用分享-「創用CC」觀念。

本站著作人員[共用本社群統一之著作權聲明，分享][接受申請使用][保留]本站所有著作物之權利。並由[總編輯某某]與[全體著作人員]負擔本站所有著作物的合法責任。

申請「創用CC」標章貼紙 

If you want an individual page to have a specific foot note, you can apply to 'current page' to that page late on. 

著作權聲明實作

在以下資料夾中，請作修改。

!Related/copyrights.htm

社群著作權區

這是社群的統一著作權區，不可改動。

著作權保護程式

保護網頁著作權 http://wayne-fu.blogspot.tw/2011/09/blog-post_28.HTML

如何用語法保護網頁文章著作權 http://wayne-fu.blogspot.tw/2012/06/protect-copyright-1.HTML

Right Column 右欄

社群標章

標示同一社群，視覺可個人化。

社群查詢

在社群查詢，節省篇幅，視覺可個人化。

Issue Navigation/User Defined 主題導覽/使用者自訂區

相對於主（左）導覽為站內/階層式導覽，右導覽為主題/平行式導覽，或可提供其他使用者自訂功能。商業網站，則多作為廣告應用。

使用者自訂區實作

範本網站的使用者自訂區網頁，在以下資料夾中，可作不同方式修改。

/!TxTemp/TxComm-top-navi.htm

/!TxTemp/TxComm-top_present.htm

使用者自訂區可置換或保留

使用者自訂區均可置換，但不要留空白；若無其他資料，應保留。

CSS 網站結構實作

網頁平面設計與區塊規畫，如何達到靈活彈性，最重要的技巧，就是<div>中的float和clear屬性。

CSS 網站結構實作，屬於CSS較高階的應用，故從教學觀點，可由文字/意涵的CSS層疊樣式表/選取器/格式標籤設計與實作後，再回頭學習以下的CSS 網站結構實作。

Add the following HTML to the JSP inside the <form> component. I wish we have the HTML elements as components in the palette so that we can drag and drop it in to the designer. Unfortunately we don't have them yet in the palette, so you need to type it in the JSP.

<div id="container">
<div id="header">
Header
</div>
<div id="leftBar">
Left Bar
</div>
<div id="content">
Main Content
</div>
<div id="rightBar">
Right Bar
</div>
<div id="footer">
Footer
</div>
</div>Step2: Create the CSS rules for layouting

‧Right click on the resources folder and select New -> Other. From the New File dialog select Other -> Cacscading Style Sheet.
‧Provide the Style sheet name layout
‧Drag and drop Advanced -> Link component on to the designer
‧Select the link component in the outline and from the property sheet, set the URL as layout.css
Add the following CSS rules to the layout.css

#container {
margin:auto;
width: 760px;
background: #ffffff;
}

#header {
background: #DDDDDD;
}

#leftBar {
float: left;
width: 150px;
background: #EBEBEB;
}

#content {
float:left;
width:450px;
background-color: #cdcde6;
}

#rightBar {
float:right;
width: 160px;
background: #EBEBEB;
}

#footer {
clear:both;
background:#DDDDDD;
}

Give attention to the CSS properties highlighted with blue. They are responsible for placing the containers (<div>) at the correct place. The footer CSS rule has the property clear:both which gives the hint to the browser that both of its ends should be cleared (does not allow floating elements on both sides), so it is always placed beneath the other floating elements.

Deploy the application and it should look like the following:

使用以上規畫獲得的網頁

Double/Multi navigation bar 雙/多導覽設計

第二導覽通常是站外導覽，亦即是「網路社群」導覽。有時也作為「管理導覽」。

Example

You may add one or more navigation bar for multiple layers' structure. The process is almost the same as above.

Design: English Version

Web Community Structure 網路社群結構設計

Website  Structure 網站結構