chevron_right
chevron_right
Body
Header ( 版頭 )
Section 1 ( 內容區塊 1 )
Section 2 ( 內容區塊 2 )
...
Main ( 版身 )
Section 1 ( 內容區塊 1 )
Section 2 ( 內容區塊 2 )
...
Footer ( 版腳 )
Section 1 ( 內容區塊 1 )
Section 2 ( 內容區塊 2 )
...

PowerOn V2 版型架構說明 - 網頁框架構成元素

 

有寫過 HTML 網頁的人都知道,一個網頁分成兩大部分,一個是 head (<head/>) 另一個是 body (<body/>),這兩個部分會被一個 html (<html/>) 包起來,這樣就構成了一個網頁。而 head 裡面主要是放網頁的一些表頭資訊,例如語系、編碼、Javascript、css 等等。而這篇文章主要討論 PowerOn V2 編輯器所專注的區塊:Body。Body 內的元素組成並沒有特別限定一定要如何架構,而我們參考了一些網站以及自身經驗,依照左圖的架構方式架構:Body 內的主要三大區塊為版頭( header )、版身( main )和版腳( footer )。要注意的是這裡的版頭不是指網頁(html)的表頭( head ),所以不要搞錯了。而這三個區塊再以內容區塊( section )來分區管理,而主要的內容也是放置在 section 內。

了解基本架構,有助於操作過程中的思考

當您了解了基本的 HTML 原理,您就會發現元素之間的階層關係,當您移動某個元素的父元素時,該元素也會跟著移動,就像父親帶著小孩一樣的意思。下圖為編輯器內與階層相關的介面:

 

[1. 元素階層選擇器:點選元素後按下滑鼠右鍵,可跳出選單]

 

[2. 物件檢視視窗:可直接拖拉元素類別標籤排序]

 

順便介紹一下物件檢視與選擇視窗的排序功能:

父子關係的產生

所謂產生「父子關係」指的是元素以手動的方式加到其他「容器元素」內,或是自我產生父元素。所謂容器,在 PowerOn 編輯器內的容器有:內容區塊( section )、方塊( box )、選單( menu )、輪播展示( Slide )、陳列容器( list )、表單( form )。除非特殊限制,否則容器也可以包含其他容器。產生父子關係的方式有:

 

[1. 拖放到容器內]

 

[2. 群組]

 

[3. 加到方塊內]