Web Plane Design: Table Method
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立體空間之彈出網頁設計。


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.

vertical alignment of cells 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

社群查詢

網頁內容

使用者自訂

社群新聞

討論區

同類主題

子站著作權

社群著作權


更多資源

http://www.blueprintcss.org/


Web Community Structure 網路社群結構設計

Website  Structure 網站結構

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