ForumID
myemail@bz.com.tw
進入會員專區 進入會員專區
clear
person
按鈕文字
local_grocery_store
0
按鈕文字
clear_all
按鈕文字
search
開始搜尋
申請網站
申請網站
image/svg+xml
image/svg+xml 會員專區,修改會員資料,修改密碼,購物紀錄,紅利查詢等
image/svg+xml
image/svg+xml 會員專區,修改會員資料,修改密碼,購物紀錄,紅利查詢等
回首頁>V2 網頁設計教學>初階課程>[V2 網頁設計]介面介紹系列:指令列功能介紹

介面介紹:V2 編輯器下方的指令列介紹

從這篇文章開始,我們要來介紹 V2 編輯器的細部功能,會適時配合一些影音讓各位快速了解,讓大家在使用上能夠更加得心應手。首先我們先看一下指令列的 13 個部分:

  1. 目前編修
    指出目前編修的版型檔案,下面會有更詳細說明
  2. 重新整理
    V2 編輯器在某些時候會因為更新不同步而造成編輯內容的替代物件沒有更新到最新狀態,此時按下「重新整理」來更新狀態。
  3. 儲存( Ctrl + S )
    儲存目前編修過的版型檔案。
  4. 新增
    新增新的元素到版型,下面會簡介個別的元素
  5. 刪除( Del )
    刪除一個或是多個元素。
  6. 回復( Ctrl + Z )
    Undo,回復上一個狀態。
  7. 重作( Ctrl + Y )
    取消之前的 Undo。
  8. 剪下( Ctrl + X )
    剪下一個或多個元素。程式會先複製後再執行刪除所選元素。
  9. 複製( Ctrl + C )
    複製一個或是多個元素。複製的元素可跨檔案貼上( 須在同一個網域 )
  10. 貼上( Ctrl + V )
    貼上一個或多個元素到目前的區塊內容裡面。( 請注意,是區塊內容,如果要複製到指定的容器,比如說某個「方塊元素」,請用滑鼠右鍵選單中的「複製內容貼到此元素內」功能 )
  11. 停用/啟用元素拖放入容器
    停用或是啟用拖拉的方式到指定的容器內,在取消拖拉功能時候,功能同 Alt 快速鍵。[ 請參考快速鍵 ]
  12. 常用工具
    一些網路上收集來的線上圖檔處理工具。
  13. 協助
    會連結到 help.bz.com.tw 網站去,是 PowerOn 的協助服務中心。

 

 目前編修

PowerOn 網站的建置方式與一般單頁客製方式不同,但與大部分模組式的網站建構方式雷同,就是以版型+個別內容來產生網站。所謂版型是指網頁畫面上的框架,把某個功能( 例如:商品分類陳列展示的功能、商品項內容呈現功能 )用一個或數個檔案組成,而個別變動內容的部分再利用 PowerOn 後台的商品或自訂內容設定功能來分別建立,在前台呈現時候,系統會讀取版型檔案與個別的商品或自訂內容( 從檔案或是資料庫 )來進行組合,完成後傳送到瀏覽者的設備上。

PowerOn 目前規劃的版型檔案共有 13 個必要項目,分別是:

 

  1. 首頁
  2. 特價商品頁面
    特價商品為一般預設的商品,可以自由的在網站上被訂購,搭配樣式選擇( 例如挑選顏色、大小、種類等 )以及合購( 例如商品A與商品B合購,商品B原價800元,合購價為740元 ),同一筆訂單可以多筆特價商品。
  3. 預購商品頁面
    預購商品為預約型商品,買家付款後等待商家出貨,商家可在商品說明裡註明發貨規則與時間等。預購商品為單獨結帳商品,通常商家可運用於寄賣或是零庫存銷售模式的商業行為。
  4. 紅利商品頁面
    紅利商品可以全部紅利兌換或部分紅利加上現金兌換,商家可以運用在某一些行銷活動推廣上。
  5. 詢價商品頁面
    詢價商品可運用在大量訂購,由商家專人報價,屬於專案型的銷售。後台可直接透過 Email 報價給買家,有後台管理,方便追蹤。
  6. 商品列頁面 》
    商品列頁面可以依照商品分類不同而個別設計版型。
  7. 網站搜尋頁面
    網站站內字串比對搜尋。
  8. 自訂內容頁面
    自訂內容文章版型,資料來源:後台 > 自訂內容 > 新增修改文章。
  9. 自訂內容分類頁 》
    自訂內容分類頁面可依照自訂內容分類而個別設計版型。
  10. 最新消息頁面
    最新消息版型,資料來源:後台 > 展示設定 > 活動訊息設定( 新聞跑馬燈設定 )。
  11. 最新消息陳列頁面
    最新消息列表的頁面。
  12. 會員註冊頁面
    會員申請帳號的頁面設定,如無使用會員機制,可略過。
  13. 會員專區頁面
    會員服務的功能頁面,如修改基本資料、密碼、頭貼;查詢訂單、紅利點數等。

 

在目前編修的下拉選單,我們可以看到最後一個是「獨佔視窗」,它不是版型,而是自訂網頁,只是這個網頁是專門讓網站建立獨佔視窗用的。所謂獨佔視窗,請按下方按鈕呼叫一個預載的獨佔視窗:

呼叫獨佔視窗
clear_all
呼叫獨佔視窗
說明如果您的網站不需要某些功能,可以不需要處理該版型( 例如:不需要會員功能,就不需要處理會員註冊與專區頁面 )。

V2 編輯器可以新增的元素

  1. 內容區塊
    編輯器裡面最大的容器,是分割網頁的大區塊,全部的元素都必須放置在裡面。[ 更多說明 ]
  2. 方塊
    方塊是最基本的元素,和人體的幹細胞很像,幾乎全部的元素都是由方塊產生。它也是最常用的容器,可以利用方塊做出很多效果,例如自訂按鈕、複合式的動態、畫面合成等等。
  3. 標題文字
    是一種可以拉高壓扁的文字,通常我們會把他當成一種圖形來看,可輕易的在主視覺中區塊中做出很不一樣的效果。
  4. 文字方塊
    和Word的文字方塊很像,可以隨意擺放在畫面上任何位置。透過一些空間設定,可以在 RWD 網頁上做出自動調整的效果。
  5. 文章方塊
    文章方塊操作方式與 Word 類似,可以在文章方塊內製作表格、設定文字與圖形連結、項目列表、設定文字顏色等。本文便是用了很多文章方塊。
  6. 圖示文字
    是一種顯示為圖示文字,由 Google 提供的服務。在製作網頁上,圖示的表現可以讓網頁感覺更加好閱讀。
  7. 圖片
    一般點陣圖片,可以放 jpg、gif、png 等。
  8. 向量圖
    V2 支援了 SVG 檔案類型,SVG 檔案是一種向量格式的檔案,但它也可以內嵌點陣圖,是一種十分好用的網頁元素。
  9. 選單
    提供了橫式與直式的選單,詳細介紹請按此
  10. 輪播展示
    大多用在網頁主視覺,有許多過場效果可以使用。[ 詳細介紹 ]
  11. 相本
    可提供四種呈現方式,資料來源為後台的「展示設定」>「相本設定」
  12. 影音
    支援 mp4 檔案、Youtube、vimeo、dailymotion、facebook等來源。
  13. 陳列容器
    透過設定資料來源,可自動將商品或文章帶到陳列容器內。[ 詳細介紹 ]
  14. 表單
    目前提供以下幾種類型的表單:

  15. 表單輸入元素
    主要是提供上面表單元素內的子元素,例如:單行輸入框、多行輸入框、Check box、下拉選單等。當然也可以單獨使用。

  16. 按鈕
    V2 提供了多種功能與樣式的按鈕,例如:社群分享按鈕、購物車按鈕、回到頁面頂端按鈕等。
  17. Google map
    透過輸入地址即可定位的 Google map 工具,可定義多個位置,可用於分店標示。
  18. 自訂編碼
    可自行 Coding,將 HTML 或 Javascript 內嵌到版型內,適合懂程式語言的人。
  19. 共用元素( SSI )
    在版型內,把共用的區塊設定成共用元素,在未來維護網站上可避免許多重複性的工作。目前可設定為共用元素的有「內容區塊」和「方塊」兩種元素。