版型修改教學 - 修改版型的 Logo 示範
當我們選擇好要套用的版型之後，第一個可能會想要改掉 Logo 換成自己的 Logo，這篇文章要示範怎麼修改 Logo，也會順帶提一些操作方式的要訣。為求讓您可以容易吸收此文內容，我們會盡量段落化，讓您可以更容易了解如何使用 V2 編輯器。
首先進入版型設定( 上方選單「基本設定」->「版型設定」 )
點選首頁的「修改版型」的按鈕。
.jpeg)
接下來，我們準備要將 Logo 換成下面的 Logo
1. 上傳要使用的圖片( Logo )
首先新增一張圖片，我們要將 Logo 圖檔到編輯器來。此時 Logo 的圖檔還在我們的電腦裡，透過「網路檔案管理員」選取檔案上傳到伺服器來。這裡有一個基本觀念，就是要利用資料夾分類，將檔案分類存放，以後比較好找。由於我們只是一個範例，我們在此只新增了一個資料夾，命名為「page_content」，當然您也可以依照您商品或文章分類來分別設定資料夾。資料夾命名可以是中文，一般會建議使用英文命名，主要是怕過去某些瀏覽器對於中文或其他多位元組字元解析會有一些問題，而且中文路徑在網頁裡會被編碼過( URI encode )，路徑的字串長度會變長，可能在網頁檔案量的縮減上會比較不好，不過現在比較沒有這樣的問題( 瀏覽器多國語言相容性有提升，網路環境頻寬也比以前高很多 )。
.jpeg)
| 注意 | 當您把檔案上傳到某個位置後，並且已經將路徑指定到網頁上某個元件，如果您在「網路檔案管理員」內移動了該檔案，此時該檔案路徑便會和網頁不相同，這樣會造成檔案無法顯示在網頁上。所以除非您知道您在做什麼，否則請盡量不要隨便移動已經在網頁上使用的檔案( 如果一定要移動該檔案，您必須在移動完後，修改網頁上的檔案路徑或連結 )。 |
2. 選取 Logo，並且放到指定位置
當點取「選取」後，Logo 便會出現在畫面，我們接下來要做的事情有兩個：一是要把他放到指定的位置，二是要改變他原本的大小。新增的元素( Element )預設會是「變形選取」的狀態，V2 編輯器選取的狀態有兩種，一是「一般選取」滑鼠點一下元素即可；另一種是「變形選取」，滑鼠在元素快速點兩下( Double click )即可選取。選取後的物件都可以利用鍵盤上下左右鍵來移動元素，但如果要用滑鼠拖曳元素，則必須是變形選取的狀態下才行。關於更多「選取元素」的主題，按此獲得更多資訊。
.jpeg)
放置 Logo 到指定的方塊內，我們先刪掉原本在方塊內的 Logo ( 像骰子的五點 Logo )然後選取我們剛剛放入畫面的新 Logo 圖檔，按下下方的指令行的「剪下」，之後選取原本放 Logo 的方塊，按下滑鼠右鍵，此時會跳出選單，選取「複製內容貼到此元素內」，即可完成 Logo 的放置。
.jpeg)
| 注意 | V2 編輯器中的元素種類，某些元素具備「容器」的屬性。具備容器屬性的元素，可以接受其他元素成為他的子元素。是否為容器屬性，可以透過選取時候觀察下方「元素階層選擇器」，如果該元素有黃色框框，則代表該元素具備容器屬性。順帶一提如果是半透明黃色底的元素，指的是該元素包含( 或自己就是 )共用元素( SSI )之中。( P.S. SSI 全名為 server side include, 當您將區塊元素( section )或是方塊元素( div box )設定為共用元素後，如果也將這個元素新增到別的版型檔案，在未來因需要所以修改這個區塊，則其他使用了這個區塊的版型檔案也會跟著更動。這樣的好處是，您不用因為要修改某一個長駐的版型區塊，而去開啟每一個檔案來修改，只要修改其中一個檔案即可。關於 SSI 我們未來會提及到 )
|
.jpeg)
.jpeg)
3. 改變 Logo 的大小
Logo 在選取的狀態下，您可以利用以下方式修改這個 Logo 的大小：
- 按下滑鼠右鍵，在選單上選擇「變形」( 當然，快速在元素上點兩下也行 )，然後利用滑鼠拖拉四邊四角的圓點進行調整。
- 按下滑鼠右鍵，在將滑鼠移到選單上的「元素編修」，此時次選單會出現，選擇次選單上的「元素空間設定」便會跳出該元素的「編輯工具視窗」。
| 注意 | 幾乎所有的編輯項目都在「編輯工具視窗」內。您可以透過最上方的「編輯項目下拉選單」直接切換。
|
.jpeg)
4. 修改 Logo 旁邊的文字
修改標題文字，選取要修改的標題文字，按下滑鼠右鍵( 或直接在未選取的狀態下以滑鼠右鍵選取標題文字元素 )，此時跳出選單，點選「編輯文字」，此時跳出編輯工具視窗，便可以開始修改文字內容。修改好後，我們要調整標題文字的大小，調整的方式與 Logo 的調整方式雷同。
| 注意 | V2 編輯器裡面與文字相關的元素有四種：
|
.jpeg)
5. 檢查每一個解析度呈現的狀態( RWD 調整 )
有一個重點希望大家記在心裡，就是 V2 RWD 網頁的編輯，一定要先確定 PC ( 桌機 )版本之後，在往下調整其他設備解析度版本。V2 解析度共分為五個範圍區間( 解析度由大到小 )：
- 1200 ~ 1920 以上 ( PC 桌機 )
- 980 ~ 1199 ( 平板橫向 )
- 768 ~ 979 ( 平板直向 )
- 480 ~ 767 ( 手機橫向 )
- 320 以下 ~ 479 ( 手機直向 )
在調整好版面後，一定記得預覽各個解析度，看看是否有超出預期的地方，適當調整。在編輯版型的過程中，您可以隨時使用編輯畫面右方中間的直立拖拉把( 解析度預覽與切換鍵 )，直接拖拉，或是按右鍵直接點選各個解析度選項。
.jpeg)
如果您已經存檔，可以使用下方指令選單中的「預覽」功能，來達到更擬真的預覽效果。
.jpeg)
6. 總結
V2 編輯器方便讓您調整版型或網站內容( 商品或自訂內容 )，而且快速呈現編修好的樣式，這次先示範 Logo 修改，下一篇我們來玩看看輪播展示要怎麼改。
有任何問題歡迎來訊息告知，我們會盡力詳盡的為您解答或解決您的問題。
