about web design

1. { 個人網站建置介紹
mollylin.net

2. WordPress Bootstrap
Brackets
Inmotion
使用工具介紹

3. 佈景簡介
使用 WordPress 為架構，樣式以 CSS為主CSS3為輔，並搭配使用 Bootstrap框架技術及
CSS斷點處理，使網站在不同寬度之瀏覽器及行動裝置下能呈現不同的版面以配合使用者
之觀看視角。
而本佈景在 Chrome 36.0、Firefox 31.0、Opear 12.11、IE 11等瀏覽器皆可完美瀏覽。
* 簡潔風格
* 線上字型
* 簡潔風格
* 響應式設計
* Icon Font

4. 網站架構與功能

5. 1280px以下 1170px以下 980px以下
線框圖

6. 網站元素設計

7. CSS選擇器標示

8. 各裝置瀏覽器預覽

9. 各牌瀏覽器預覽截圖

10. 實際裝置瀏覽照片
HTC One 4.7吋iPhone5 4吋 華為平版 7吋

11. 在寬度480px以下即置換成小尺寸LOGO
:hover
正常顯示LOGO及滑鼠移入轉換影像效果
特色頁面截圖說明

12. 選單列在寬度550px以下換為下拉式選單
頁尾小工具於各寬度之呈現方式
1200px以上: 水平 568~1200px: 垂直
568px以下: 隱藏
特色頁面截圖說明

13. UI Icon
    
作品頁呈現與分類為「Portfolio」之文章串連
頁碼變化
特色頁面截圖說明

14. 支援各裝置最適顯示
投影片輪播示意圖

15. 圖片皆支援響應式設計

16. 外掛列表

17. 簡易SEO優化
使用「分類+文章代稱」的方式命名文章網址，
有助於SEO優化，並提升鏈結的美觀、易用與相容性
使用Google自訂搜尋特點:
• 減輕網站在執行搜尋功能時的負擔
• 更快、更容易的找到想要的資訊
• 讓Google更認識你的網站提昇
SEO效益