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


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.

advanced Frames Design 網頁設計之框架法

框架法是微軟的專門方法,曾經只能在 IE 上應用,目前也已被各瀏覽器所支援。



也因此不利於SEO, 與 SERP 的查詢排行榜。


Frames Design 網頁設計框架法範例:大學青年‧網路雜誌



固定導覽列 Fixed Navigation

The advantage is you do not have to scroll the page to access the navigation bar.


There are two caveats. First, the very old browser can not read it. Next, it needs more deliberated design for multiple layers and/or inter-web communities' navigation.

Multiple Frames with System Default Navigation

With User Defined Navigation  


Multiple-Frame Design



To avoid the conflict of two different of page design, you may design and publish your exercise to another web. Otherwise you have to  cancel the common borders.

Open a new page for navigation.



note Note: the "l 

note Note: the "long description (file)" is functioning as the "Alt Text" for accessiblity.

note Warning

Make sure the target frame (when click the Navigation) is correct.

The HTML syntax is:

<base target="main">

If the target is blank or wrong, click the pencil button to enter it. Otherwise the default (blank) is the same frame that will display the new page in the Navi frame.

TX advanced topics Advanced: HTML for Nested Design


<meta HTTP-EQUIV="Content-Type" CONTENT="text/HTML; charset=big5">

<frameset cols=<meta HTTP-EQUIV="Content-Type" CONTENT="text/HTML; charset=big5">

<frameset cols="150,*">
<frame name="left" scrolling="no" noresize target="rtop">
<frameset rows="20%,*">
<frameset cols="*,49%">
<frame name="rtop" target="rbottom">
<frame name="rtop1">
<frame name="rbottom">


</frameset>is not "RTo</HTML>

note Warning: the frame name is "case sensitive" so that "rtop" is not "RTop".

Note:  To combine two navigation bars, it will resolve in conflicts as the follows.

You have to remove the common borders separately.

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