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. 加到方塊內]
