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

邊框法只能配合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.


advanced Frames Design 網頁設計之框架法

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

框架法雖然也曾流行一時,尤其是作為設計「固定導覽列」,有其方便之處。但因以下因素已逐漸式微:

較不利系統性的設計,在查詢時,平面上的各單元容易破碎。

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

隨著IE本身的功能、易用、與市占率下降。

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

統雄老師有以「大學青年‧網路雜誌」的入口站,作為網頁設計之框架法的應用範例,其特色就是其右導覽可固定,不隨其他欄位移動。

但基本上,不再鼓勵應用框架法作為網頁設計的基礎。

固定導覽列 Fixed Navigation

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

Example

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

使用SharePoint,作網頁平面區塊設計與巢狀平面區塊設計。

Example

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:

<head>
<base target="main">
</head>

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

<HTML>

<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/HTML; charset=big5">
<title>新增網頁</title>
</head>

<frameset cols=<meta HTTP-EQUIV="Content-Type" CONTENT="text/HTML; charset=big5">
<title>新增網頁</title>
</head>

<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">
</frameset>
<frame name="rbottom">
</frameset>
<noframes>
<body>

<p>此網頁使用框架,但是您的瀏覽器不支援框架。</p>

</body>
</noframes>
</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
同類別內相關主題