前言
學習頁面設計的最好方式，就是拿一個網站來「模仿」，有人手把手帶你從首頁開始，把每一頁都模仿做一遍，進步就很快，成效會很明顯且很有成就感。
首頁，有時候是最後才設計的，為何？因首頁一般會把其它各頁面的資料「摘要」一些置入首頁，以達到「入口頁」的作用，故有時候會等其它頁面完成後才來設計首頁。
模仿對象
準備工作
後台安裝免費圖庫外掛 : Instant Images
實作
第1區塊:Banner區
▍ 使用元素工具 :
標題、內容編輯器。
▍ 設計提示 :
- 容器:外層全寬100%，並替容器設定適當高度。
- 背景圖 :挑選可左右滿版的大圖背景的寬度至少要3000px以上為佳。
- 替元素加上載入動畫。
第2區塊:最新消息
▍ 使用元素工具 :
標題、內容編輯器、分隔線、圖示列表。
▍ 設計提示 :
- 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
- 背景:大容器設定純白色背景。
- 切版:從80%容器再切左右兩欄。
- 最新消息標題:標題，用絕對定位讓它壓在框線上。
- 最新消息內容:新手練習用純文字(內容編輯器)，進階學習時用Post載入列表標題。
- 簡介標題:用分隔線做出標題+線條。
- 簡介內容:用純文字(內容編輯器)。
- 保證標題:用分隔線做出標題+線條。
- 保證內容:用圖示列表。
- 背景文字:標題填上Interior Design ，再用絕對定位(用%控制)、z-index調-1。(新手覺得太難可略過)
第3區塊:服務項目與流程
▍ 使用元素工具 :
標題、分隔線、圖示、媒體輪播、內容編輯器、錨點。
▍ 設計提示 :
- 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
- 背景:大容器設定淺灰色背景。
- 切版:80%容器再製一個，則會有2個80%容器上下垂直排列。
- (上)主要服務內容:用水平排列數個小容器，再置入圖示與標題。
- (下)細切:從下方80%容器中再切左右兩欄, 左30%右70%。
- 服務流程步驟:右邊會有兩個區塊，兩個區塊中各自再切小容器並置入標題、內文編輯器(加上左框線)。
- 主選單錨點:加上「服務項目」的錨點連至本區塊。
第4區塊:精選案例
▍ 使用元素工具 :
標題、內容編輯器、媒體輪播、按鈕。
▍ 設計提示 :
- 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
- 背景:大容器設定白色背景。
- 置入2個媒體輪播。
- 按鈕:連結至「作品集」之頁面;加上陰影效果。
第5區塊:影片動畫
▍ 使用元素工具 :
內容編輯器、按鈕。
▍ 設計提示 :
- 容器: 外層全寬100%，內層600px。
- 外容器設「背景影片」( youtube.com/watch?v=RkZSyUBu2xU ) 。
- 外容器設定垂直置底、水平靠右，即可把內容器置於右下角。
- 內容器背景設置微透明黑色、弧角。
- 內容器置入內容編輯器、按鈕。
第6區塊:心得見證
▍ 使用元素工具 :
標題、評分、內容編輯器、見證輪播。
▍ 設計提示 :
- 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
- 內層容器置入標題、評分、內容編輯器、見證輪播等元素。
第7區塊:常見問題
▍ 使用元素工具 :
標題、切換、按鈕。
▍ 設計提示 :
- 容器: 切版起手式，外層全寬100%，內層80%，以做出左右留白。
- 內層容器再切成左右兩欄。
總結
以上的實作，可以發現切版很重要，如果版型切不出想要的排列區塊，就無法置入元素，另也可以發現我們常用的元素工具就那幾個在交替，但只要運用得宜，就能排列出有質感、客製化的版型，就不必仰賴套版主題那種改不太動又不知怎麼改的瓶頸。
