fitness club 範例網站建置
DESCRIPTION
展示PSD切版與使用SASS編譯能力TRANSCRIPT
![Page 1: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/1.jpg)
PSD>HTML+SASS+jQuery
![Page 2: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/2.jpg)
“ “ P h o t o S h o p
I l l u s t r a t o r
H T M L C S S j Q u e r y
http://www.mollylin.net
http://github.com/MollyLin
https://www.facebook.com/mollylin2014
![Page 3: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/3.jpg)
• Index.html
• Trainings.html
• Timetable.html
•Nutrition.html
• Contacts.html
• _varible.sass
• _extend.sass
• _mixin.sass
• _reset.sass
• _layout.sass
• _各網頁名稱.sass
• default.sass
• default.css
• bjqs.css
• Jquery-latest.min.js
• Bjqs-1.3.js
![Page 4: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/4.jpg)
設定好環境並PSD切版
PSD 切版並匯出為影像檔
![Page 5: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/5.jpg)
建立專案夾
_extend.sass _mixin.sass _reset.sass _variable.sass _index.sass default.sass config.rb
default.css
bg.jpg logo.png slider-1.png . . .
![Page 6: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/6.jpg)
建立@ import列表
設定全域變數
default.sass
_mixin.sass _variable.sass _extend.sass
自動算出圖片寬高 設定常用樣式
![Page 7: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/7.jpg)
建立_layout.sass寫入表頭表尾
![Page 8: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/8.jpg)
開始寫入各頁樣式
![Page 9: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/9.jpg)
.sass .css
compile/編譯
進階語法 同步生成
![Page 10: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/10.jpg)
加速開發時程、方便維護與修改
![Page 11: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/11.jpg)
![Page 12: Fitness Club 範例網站建置](https://reader034.vdocuments.mx/reader034/viewer/2022042506/5592a3601a28ab63798b4579/html5/thumbnails/12.jpg)
引入jQuery實作Benner輪播
jquery-latest.min.js
bjqs-1.3.js
bjqs-1.3.css