元智大學工作坊 設計樣板套用 講義

1. 網站製作⼯工作坊
設計樣板套⽤用
2015/05/02 元智⼤大學資訊傳播學系 陳俊安

2. 這堂課你將會學到
• 如何使⽤用樣板
• 內容編輯
• 排版調整
• 增加元件
• 樣式修改

3. 下載樣板
• StartBootstrap
http://startbootstrap.com/template-overviews/
agency/
• GOOGLE “free bootstrap template”

4. 樣板結構
樣式表⺫⽬目錄
圖⽰示⽂文字⺫⽬目錄
字型⺫⽬目錄
圖⽚片⺫⽬目錄
⾸首⾴頁檔案
Javascript⺫⽬目錄
less樣式表⺫⽬目錄
版權資訊
聯絡我們⾴頁⾯面程式
樣板說明⽂文件

5. Font-Awesome
• 無需啟⽤用JavaScript
• 可免費運⽤用在商業⽤用途
• 兼容Bootstrap
• 核⼼心是⼀一套圖⽰示字型
• 可縮放的向量圖標
• 可透過CSS設定外觀

6. Font-Awesome
<i class="fa fa-calculator"></i>

7. 內容編輯
• 確認HTML結構
• 修改⽂文字
• 找標籤內的⽂文字修改
• 修改圖⽚片
• 找<img>裡⾯面的src路徑屬性

8. 排版調整
• Row & Column ⾏行＆欄的觀念
• Bootstrap預設⼀一⾏行12欄
.col-對應螢幕寬度-欄位寬
只在⼩小於768px寬度套⽤用、佔12欄
只在⼤大於768px寬度套⽤用、佔4欄
只在⼤大於992px寬度套⽤用、佔5欄
只在⼤大於1200px寬度套⽤用、佔8欄
.col-xs-12
.col-sm-4
.col-md-5
.col-lg-8

9. 排版調整
BEFORE
AFTER

10. 排版調整
BEFORE
AFTER

11. 增加元件
• 必須是相容於Bootstrap的樣板
• 樣板通常會針對Bootstrap的原有元件做設計
• 英⽂文官網：http://getbootstrap.com/
• 中⽂文官網：https://kkbruce.tw/bs3

12. 增加元件-Label
BEFORE
AFTER

13. 增加元件-Youtube

14. 樣式修改
• 務必新增⾃自⼰己的樣式表
• 便於管理和維護
• 直接針對元素覆寫樣式
• 需注意樣式的套⽤用順序：
• link檔案的順序：越後⾯面越⼤大
• 選擇器的優先順序：
!important > style > #ID > 屬性 >樣式和元素

15. 樣式覆寫的實務經驗
• 越複雜的選擇器越⼤大
• 寫在Style的⼀一定最⼤大
• 掛了!important的⼜又⽐比style裡的⼤大
• 遇到無法修改的樣式，請使⽤用chrome開發者
⼯工具找到⺫⽬目前套⽤用的樣式規則，直接針對其
樣式規則重寫

16. 樣式調整
BEFORE
AFTER