版型教學，今天來示範一下「選單」怎麼改

首先我們來看一下幾個類型的選單：

1. 橫式選單：橫式選單又分成兩種，一種是等邊距的橫式選單，一種是等寬度的橫式選單。等邊距選單指的是選單項目內的按鈕元素與選單項目元素的邊距相等，所以即使按鈕寬度不一樣，但按鈕與按鈕之間距離是一樣的。而等寬度的橫式選單指的是不管按鈕寬度多少，選單項目寬度都保持一樣的寬度( 平均分配寬度 )。來看一下下面的兩個選單比較看看。

2. 直式選單：

按照慣例，我們來看一下版型編輯的影片：( 建議在 PC 上看，記得放大全螢幕播放喔 )

本文重點

1. 選單元素的組成架構
2. 了解按鈕元素
3. 修改選單上的文字
4. 修改選單上的小圖示
   
5. 快速套用給其他選單項目
6. 新增一個選單項目
7. 補充：向下刪除樣式設定
8. 補充：選單項目的排序
9. 補充：次選單基本介紹
   

1. 選單元素的組成架構

選單元素是由「選單」( 最外部容器，只能裝選單項目 )、「選單項目元素」、「按鈕元素」：

選單是由數個選單項目組成，選單項目各配一個專屬的按鈕元素，此按鈕元素大致上與一般的按鈕元素一樣，唯二的差別在於，選單項目的按鈕不可以設定連結，連結的設定必須在選單元素內完成；以及無法脫離選單項目( 無法退出父元素 )。

選單項目也有一些規定：選單項目可以新增其他元素，例如圖片、方塊等，但無法新增其他按鈕元素。選單項目無法被直接刪除，但選單項目可以在選單的編修工具視窗內被新增、刪除、編輯和排序。

2. 了解按鈕元素

按鈕元素內包含了一個圖形元素和一個文字元素，圖形元素可分為三種：點陣圖、向量圖、文字圖示。而文字元素可分為兩種：標題文字與文字方塊兩種元素。一個按鈕可以是「點陣圖」+「標題文字」或是「向量圖」+「文字方塊」，您可以依照自己的需求自行切換。

3. 修改選單上的文字

選單上的文字是按鈕的內部文字，所以您可以直接在按鈕文字上修改，也可以透過選單元素的編修工具來修改。

網頁設計上，主選單的文字基本上不宜過長，但也不要忽長忽短，所以在設計編排上要稍微注意一下。

4. 修改選單上的小圖示

過去( n 年前設計風格 )在主選單上，小圖示是不可或缺的，但最近這類設計似乎比較不常見，不過即使如此，編輯器應該能夠提供小圖示使用的功能，這樣才不會侷限了創作上的可能性。以本影音檔所使用的按鈕元素，它是「圖示文字」加上「標題文字」為組成，由於本範例篇幅有限，所以偷懶的只示範更換圖示文字。然而，您也可以自行創作自己的按鈕，甚至可以搭配一些「滑鼠移入」效果的編輯，讓你的網站互動上更增添趣味。

5. 快速套用給其他選單項目

當我們修改了選單的文字，或是調整了圖文間距，或是某些原因需要調整選單項目的寬度時，就必須要跟著調整整個選單的選單項目寬度與選單項目內部按鈕的外部間距。這個時候假設我們已經調整了其中一個選單項目以及其內的按鈕元素，我們可以利用「內容套用到其他」這個功能，來把整個設定複製到其他選單項目內。

使用步驟：1. 先選取將要被複製的「選單項目元素」；2. 按下滑鼠右鍵，跳出功能選單；3. 選取「內容套用到其他」；4. 稍微等一下，讓程式自動複製以及自動調整每個解析度的選單項目間距。

6. 新增一個選單項目

假設我們新增了一個服務功能，想把他放在首頁主選單上，在 V2 編輯器上是一件很容易的事情。如影片裡的操作方式，我們開啟選單編修工具視窗，上方「+新增選單項目」的下拉選單有可以新增兩種不同的項目：

1. 一般選單項目：一般選單項目可以放在第一層主選單上，也可以放在次選單( 第一層次選單或第二層次選單 )
2. 商品或內容分類：只能放在次選單內，屬於自動資料匯入的選單項目，可有透過指定網站內容( 商品或自訂內容文章 )的分類，讓程式自行匯入您網站的商品分類或文章分類。

7. 補充：向下刪除樣式設定

「向下刪除樣式設定」，其實只做一個動作，就是將目前所選的元素，從目前解析度到最小( 手機寬度 )的 CSS 設定全部刪除。網頁設計中的 CSS ( Cascading Style Sheets 階層式樣式表 )記載了網頁元素裏面的各種設定，例如：位置、顏色、大小、粗細等等。而 RWD 網頁設計又可以根據設備解析度，分別記錄元素的狀態，一般來說，大的解析度會涵蓋小的解析度，例如：PC 版本設定了某個字串顏色為紅色，假設平板或手機解析度的對此元素並無另外設定，則在平板或手機上看到此字串顏色會和 PC 版本一樣。但假設說，我們在平板解析度的狀態上把字串顏色設定為藍色，此時 PC 版本上預覽到的顏色還是紅色，但在平板以及手機版本的網頁，看到的會是藍色。

向下刪除在執行的時候，如果您目前在 PC 版本，他會刪除「平板」和「手機」版本的解析度設定，但如果目前處於平板或手機解析度的時候，他會連同目前解析度一起刪除，所以使用時要注意。

「向下刪除樣式設定」的使用時機，就是在於我們可能在編輯過程中，於某個元素在某個解析度做了多餘的設定，例如：假設說我們將原本靠左的 Logo 改成設定為置中，但可能我們在其他解析度的時候針對 Logo 做了調整，原本我們只要修改 PC 版本就可以直接蓋掉其他解析度版本，但因為其他解析度有了自己的設定，所以我們變成必須要去修改每個解析度的 Logo。我們為了避免每次修改 Logo 的位置，都要這麼麻煩，所以此時就可以執行向下刪除樣式的動作。

8. 補充：選單項目的排序

排序方式很簡單，只要按住拖拉要排序的選單項目，上下移動到指定的位置，或是要移到某個選單項目內，成為該項目的次選單項目也可以。

將「最新消息」移到「產品與服務」前面

將聯絡我們放到最新消息裡面，成為最新消息的次選單項目之一

9. 補充：次選單基本介紹

當您的選單內有設定次選單時，在選單編修工具視窗內會出現編修「次選單」的頁籤：

讓我們直接看影片比較快：

您可以看到有許多的調整項目在上面，這可以讓您做出許多次選單的樣式，當然，如果您只是要像影片裡面那樣，改改底色，調調位置，其實只要不到一兩分鐘的時間就可以完成。

總結

選單在網站設計裡面十分重要，對於使用者操作體驗上，影響很大。V2 在選單編修的工具上，有很大的彈性，我們盡可能的讓您花最少的時間，完成複雜的工作。

下一篇我們來看看「陳列」元素的編修方式。