網頁設計技巧：使用「多變型」編輯器編輯網站內容

本文示範的內容網址：https://jasondemo.bz.com.tw/cgi-bin/cstcnt.cgi?lang=zh-tw&cid=4079

PowerOn 在建立網站內容時，提供了兩種編輯方式，分為「簡易型」與「多變型」兩種，如下圖所示：

這是自訂內容的編輯畫面( Tinymce 編輯器 )：

這是多變型( PowerOn V2 編輯器 )：

使用方式：

大致上使用的方式和版型編輯器一樣，只是要注意的是，版型編輯大部分的元素都是屬於「浮動」的「絕對座標」，而我們在編輯內容的時候，反而比較常用到「相對座標」。

絕對座標與相對座標的不同

所謂絕對座標，就是以其父元素為原點( top=0px, left=0px )基準的座標，所以在父元素內，子元素移動或縮放，都不會影響其他的兄弟元素。而設定為相對座標元素，則會被前一個相對座標的元素(兄)影響(請注意，只會被相對座標的兄元素影響，絕對座標的兄元素不會)，其原點座標會在前一個元素的下方或左右方( 此兄元素 top 和 left 皆為 0px 的位置時，弟元素的原點會剛好貼著兄元素的底部或左右邊界 )，我們直接看影片範例，會更清楚：

說明與示範

在內容的建立上，簡易型與多變型在使用上有很大的差異，簡易型使用上比較像一般文書處理，在過去由於沒有所謂設備適應性的問題，所以使用簡易型來建置網站其實可以滿足大部分的需求，編排的變化也可以不需要像 RWD 網站一樣，須顧慮到太多解析度變化的問題，只要滿足 PC 上瀏覽的舒適性即可。但現在的網頁設計，幾乎不能不顧及多設備瀏覽的適應性，對於編排上所要顧慮到的問題，比過去多了許多，各種解析度都必須要滿足良好的閱覽舒適度。

下面我們先看一段影片示範，之後再來解說影片內容(共五段影片，請先耐心看完)：

影片解說

影片中，我們試著模仿一篇已經完成的內容，藉著模仿這篇內容，我們把重心放在如何使用上，而不是放在「版面構思」與「情境營造」上。當然，當您開始要建立網站內容時，畫面的氣氛營造、編排、比例等要素才是決定您內容成功與否的重要關鍵，但要達成一篇成功的內容，「工具」與「技術」的具備是不可或缺的，所以各位在學習如何做出成功的內容時，要多看，多參考，慢慢養成可以讓他人產生共鳴的審美觀念，才是網頁設計學習上重要的重點。以下就這五段影片，我們大略針對我們要表達的幾個學習重點說明一下，如有任何問題，歡迎您加入我們的官方 Line 來告訴我們：

Part1, 主視覺(編排)

重點一：影片中在編輯的一開始，我們新增了六個方塊，每個方塊的空間設定裡面的「位置座標種類」我們都設定為「相對位置」。這就是我們之前所說明的「相對位置」與「絕對位置」的差異。這裡其實是把方塊當成「內容區塊」元素在使用，因為多變型的文章編輯，並沒有「區塊內容」這個元素，沒有的原因主要是系統規劃時為避免程式判斷過於混亂，所以刻意刪除不使用。而「方塊」本身就是最基本的「容器」元素，所以在這裡我們用來切割整篇內容，以利於我們在編排時候，對於因解析度變化而造成的內容長度變化，畫面能夠讓每個區塊長度自動調整。重點二：請注意六個方塊的排列順序，因為這六個方塊的座標種類是「相對位置」其原點座標會受到前一個一樣是相對位置的元素影響，所以不要搞亂了。重點三：將內容放置在對的方塊內。在編輯器開啟的時候，「以拖放進容器的功能」預設是開啟的狀態，這個功能開啟與關閉可以透過快速鍵「Alt」切換，或是在編輯器右下角圖形按鈕切換。

紅色方形的按鈕，紅色為開啟，灰色為關閉。

所以當您新增或貼上某個元素後，記得開啟拖放進容器功能，以利滑鼠將元素拖放到對的容器內。重點四：寬度為滿版的做法。其實只要將空間設定內的寬度設定為100vw即可，vw = view width, vh = view height。滿版的手法在網頁設計時常使用，所以這邊順帶提一下。

重點五：將方塊(容器)的高度設定為自動調整。方塊在這裡是主要分割區塊容器，當建立在這個方塊內的內容，可能會因為某些原因，例如：解析度改變所以文字方塊內的文字經過擠壓而變長(高)；或是某個元素可能會因為解析度不同而需要常常被調整高度或寬度，這時候我們會把這樣的方塊(容器)設定為「自動調整高(寬)度」，並且在必要的時候，設定其下方底部或右方的間隔(內距)。

重點六：群組。將一個以上的元素群組起來，方便在編排時候的位移或找尋。當然一個元素也是可以自己「群組」，不過它不叫群組，它叫做「加到方塊內」：

Part2, 第二、三部份內容

Part2 比較簡單，主要是圖與文的編排。重點一：您可以發現，我們刻意把某些文字方塊的高設定成 auto，主要是我們希望它的元素寬度可以自動隨著裡面的文字高度變化而調整，當然，我們也把第二部份的方塊( 容器 )設定成自動調整高度，這樣這個方塊就可以隨著文字可能因為解析度的關係而產生高度的變動而隨之調整其容器的高度。

重點二：在第三部份我們用到了「向量圖」元素，在單純的向量圖(就是裡面沒有內嵌點陣圖)不會因為放大縮小而產生失真鋸齒的問題。後台的網路檔案管理員有許多免費的向量圖可以使用，如果沒有找到您要的向量圖，也可以上網搜尋「免費向量圖檔下載」可以找到一些。這裡要特別說明一下，向量圖有一個模式是「內嵌模式」，差別在於是否將向量圖的資料內文嵌在向量圖元素的方塊內。內嵌模式時，您可以透過 V2 編輯器做一些基本的調整，例如顏色、外框線粗細、外框線顏色等。重點三：某些向量圖並不適合內嵌模式，如果要修改這樣的向量圖，請利用「編修圖片」的功能來進行圖檔的修改，系統會呼叫 SVG Editor ( 第三方網頁軟體 )來進行圖檔的匯入，修改完成後，按下「保存圖像」即可回到編輯器來繼續編輯網頁。

重點四：使用輪播展示來顯示分店或據點。輪播展示我們之前已經有一篇文章專門介紹，您有空可以看一下[V2 網頁設計]修改「輪播展示」示範。

Part3, 大事記(陳列元素-捲動)

關於陳列元素的介紹，請參考[V2 網頁設計]修改「陳列」元素示範，此次我們利用陳列元素中的捲動模式來表現我們企業的大事記，您會發現很快就完成了！

不過您一定有發現，一開始我們不是在針對我們大事記的主題，而是加了一個「和」的Logo在前一個影片裡，那是我們之前遺漏的部份，所以這次補上。這個部份您可以發現您可以很容易的控制元素的前後堆疊順序，只需要修改空間設定裡面的元素堆疊設定( z-index )的值即可，並且有可以透過 V2 編輯器裡的「濾鏡」效果做一些變化。您可以自行嘗試看看。 

Part4, 和園地圖與加盟和園(Google map & 相本)

這個部份主要是利用了 V2 內建的 Google map 外掛以及相本元素。利用 Google map 外掛，您可以輕易簡單的使用 Google map 的功能，您可以設定一個或多個地址，可以設定 Google map 的呈現樣式。相本元素主要的資料來源在後台的「展示設定」裡面的「相本設定」，您可以先將圖片與說明在相本設定中新增好後，便可以在 V2 編輯器中使用。

Part5, RWD 調整

當我們在編輯器裡面編輯好「 PC 」版本的內容後，我們會做網頁的各個解析度的調整。V2 編輯器的主要目的就是可以讓您隨心所欲的去調整每個解析度內的網頁呈現( 寬度 1920 ~ 320 px )，以期能夠精確掌握所有元素的狀態，真正達到我們對畫面的要求。您可以從影片中發現，V2 編輯器對於全部元素的掌控是十分精確的，只要您能夠真正了解一些基本的原理，很容易的您也可以獲得一些網頁設計師的技能。

總結

充分利用 V2 編輯器來編輯多變型內容，您會感受到很高的自由度，編輯網頁不再綁手綁腳，而且在擴充上，V2 不會因為您使用免費版本而有所限制，全部的功能都是 On 的。由於此工具當初是 PowerOn 平台自己開發給我們內部網頁設計師使用的，在公開前，已經盡量的簡化並且提高直覺性，如果您有興趣深入 PowerOn 架站的學習，歡迎您馬上申請一個網站來玩玩，同時加入我們官方 Line，當遇到使用上的問題時，可以讓我們提供協助，讓您不用在花太多時間研究新技術。

PS: 本篇內容除了影片製作使用OBS以外，其他( 包含修圖 )沒有使用到任何一個桌上或手機的繪圖或編輯軟體，全部在 PowerOn V2 系統雲端完成。