Download - 資訊創意課程 - Create A Personal Website 1
![Page 2: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/2.jpg)
WHO AM I?
• @taichunmin
• 天匠數位娛樂有限公司
• 中興⼤大學資⼯工系103級
• PHP, C++
• http://taichunmin.idv.tw/
![Page 3: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/3.jpg)
需要下載的程式清單
• Sublime Text 3
• Git GUI Tool • Windows - TortoiseGit • All - SourceTree
• SSH Key Tools (簡易說明) • Windows: Putty • Linux & OS X: 已內建, apt-get or yum
![Page 4: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/4.jpg)
Windows: Git,Tortoise,Sublime,Putty
Mac: Sourcetree,Sublime Ubuntu: Sublime
![Page 5: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/5.jpg)
GOAL: PERSONAL WEBSITE
http://taichunmin.idv.tw/
No Dreamweaver! No mobile + desktop version! No User-Agent! Data Flow is IMPORTANT! Grid System! Mobile First! ( iPhone -> iPad -> Desktop )
![Page 7: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/7.jpg)
網站架構
• 使⽤用 Github Pages 作為網⾴頁空間
• Responsive Website Design (Bootstrap 3)
• HTML5 + CSS 3 + jQuery
• No Dreamweaver!
![Page 8: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/8.jpg)
TOOLS & SERVICES
![Page 11: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/11.jpg)
建⽴立GITHUB帳號
![Page 12: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/12.jpg)
使⽤用學校信箱申請 GITHUB EDU
• 使⽤用 [email protected]
• 到 http://github.com/edu
• 還有 Student Developer Pack 可申請
![Page 14: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/14.jpg)
ADD SSH KEY TO GITHUB
• 將 public key 新增即可
• 請記得留好 private key
![Page 15: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/15.jpg)
安裝SUBLIME PACKAGE CONTROL
• Package Control
• Emmet
• ConvertToUTF8
• Sidebar Enhancement
• BracketHighlighter
![Page 16: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/16.jpg)
安裝 PACKAGE CONTROLhttps://sublime.wbond.net/installation
![Page 18: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/18.jpg)
SUBLIME PREFERENCE
• http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/customization/settings.html
• My Setting
![Page 19: 資訊創意課程 - Create A Personal Website 1](https://reader030.vdocuments.net/reader030/viewer/2022013110/547e52225806b5ef5e8b4689/html5/thumbnails/19.jpg)
SUBLIME HOTKEYS
• http://sublime-text-unofficial-documentation.readthedocs.org/en/latest/
• http://zh.lucida.me/blog/sublime-text-complete-guide/
• http://shinychang.net/article/52ce52cf04d725e41fa1b666