Web Plane Design: Table Method
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立體空間之彈出網頁設計。 |
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.
Table/Grid Design 網頁設計之表格法
The basic design is 3-column, 5+-grid design.
網頁設計之表格法是應用期間最長，效益卓著，至今仍被採用的方法。
大獲成功的社交網站，如 facebook-在問世早期（目前已改為CSS法），與許多內容網站，都是採用這樣的結構設計。
雖然W3C仍然支援網頁設計表格法，也提供這方面的教學，但正式技術文件還是提醒：<table></table>的功能還是製作表格物件，視覺呈現，應使用CSS為正格。
The suggested column widths are 140 px, 620 px and 240 px with total width is 1000 px.
The 1st column has navigation and news grids. The 2nd column includes banner, content and common bottom grids. The 3rd column is user defined area and may be divided into more grids.
You may use:
>Table
to setup the plane design by table. However, you do not want borders for real work.
Remember: the vertical alignment of cells has to be "top".
Or, you may copy the following HTML.
表格法實作
與 CSS 規畫相同的網頁，而使用表格規畫的方式如下：
上導覽 1000px |
||||
上頂圖 |
||||
站內導覽140px |
10 px |
頂圖 600px |
10 px |
社群標章240px |
橫幅 600*80px |
社群查詢 |
|||
網頁內容 |
使用者自訂 |
|||
社群新聞 |
討論區 |
|||
同類主題 |
||||
子站著作權 |
||||
社群著作權 |
||||
更多資源
Web Community Structure 網路社群結構設計
Website Structure 網站結構
