Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sublime text 極速應用教學

38,059 views

Published on

Sublime text3 速成上手教學 by Amos
教學影片
https://course.cool3c.com/p/sublime-amos

Published in: Software
  • Want to preview some of our plans? You can get 50 Woodworking Plans and a 440-Page "The Art of Woodworking" Book... Absolutely FREE ♣♣♣ http://tinyurl.com/yy9yh8fu
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Get access to 16,000 woodworking plans, Download 50 FREE Plans... ▲▲▲ http://tinyurl.com/y3hc8gpw
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Sublime text 極速應用教學

  1. 1. Sublime Text by Amos 極速 應用
  2. 2. 裝武器 Step 1
  3. 3. 外掛管理程式 Sublime text 搜尋外掛 安裝外掛 移除外掛 Package Control 其他外掛 其他外掛 其他外掛
  4. 4. 安裝package control 搜尋「package control」 點選「install」
  5. 5. 複製原始碼 1
  6. 6. 複製原始碼 1 在Sublime開啟 View / Show Console 2
  7. 7. 複製原始碼 1 在Sublime開啟 View / Show Console 2 貼上原始碼後按 Enter3
  8. 8. 使用 Package Control 安裝其他外掛
  9. 9. 使用 Package Control 安裝其他外掛 開啟「命令⾯面板」 1
  10. 10. 使用 Package Control 安裝其他外掛 輸⼊入「ins」 選擇「Install Pakage」 並執⾏行 2 開啟「命令⾯面板」 1
  11. 11. 輸⼊入「emmet」 選擇並執⾏行 即開始安裝 1 [= ] 出現[= ]左右彈跳時 表⽰示正在安裝中
  12. 12. 火力清單 • convertToUTF8 (讓中⽂文正常顯⽰示) •emmet (建原始碼超快) • html5 (就HTML5啊) • CSS3 (就CSS3啊) • Color highlighter (顯⽰示⾊色碼⾊色彩) • AutoFileName (可抓取檔案路徑)
  13. 13. •ChineseLoremIpsum (中⽂文假⽂文產⽣生器) •All autocomplete (⾃自動取得class) •view in browser (開啟瀏覽器預覽) •HTML Beautify (原始碼⾃自動排列) •Javascript Beautify (原始碼⾃自動排列) •FTPsync (FTP功能) •package Resource Viewer
  14. 14. 常用Package Control指令 • 安裝已裝外掛 install package • 移除已裝外掛 remove package • 查看已裝外掛 list package • 停⽤用已裝外掛 Disable package • 啟⽤用已裝外掛 Enable package • 查看外掛資料 Browse package
  15. 15. 編輯 . 網頁
  16. 16. 選擇文件格式
  17. 17. 選擇文件格式 html5
  18. 18. 選擇文件格式 html5 按這裡
  19. 19. 建立網頁原始碼
  20. 20. 建立網頁原始碼 html5 + tab
  21. 21. 不夠懶 ! + tab
  22. 22. 標籤 + tab 加標籤
  23. 23. 標籤.類別名 標籤#ID 加class、ID
  24. 24. 標籤[屬性=屬性值 ] 加屬性
  25. 25. 標籤[屬性=屬性值 ] 加屬性 不必寫引號
  26. 26. 標籤{我是內⽂文} 加內文
  27. 27. 標籤>標籤 加子層標籤
  28. 28. 標籤>標籤 加子層標籤 左右不能有空格
  29. 29. 標籤+標籤 接續標籤
  30. 30. 標籤+標籤 接續標籤 左右不能有空格
  31. 31. h1.title+p{內⽂文} 例:
  32. 32. h1.title+p{內⽂文} 例: <h1 class="title"></h1> <p>我是內⽂文</p> 結果:
  33. 33. 例: h1.title{標題}+p{內⽂文}
  34. 34. 例: <h1 class="title">標題</h1> <p>內⽂文</p> 結果: h1.title{標題}+p{內⽂文}
  35. 35. (標籤>標籤)+(標籤>標籤) 標籤群組
  36. 36. (標籤>標籤)+(標籤>標籤) 標籤群組 左右不能有空格
  37. 37. (.header>.logo)+(.nav>ul>li) 例:
  38. 38. 結果: <div class=“header”> <div class=“logo”></div> </div> <div class=“nav”> <ul> <li></li> </ul> </div>
  39. 39. 標籤*10 一次打十個
  40. 40. 實際操作
  41. 41. 兩欄版型 實際操作
  42. 42. 兩欄版型 實際操作 單層選單
  43. 43. 兩欄版型 實際操作 單層選單 雙層選單
  44. 44. 兩欄版 .wrapper>.header+ (.nav>ul>li*6>a)+.main+.footer
  45. 45. 片段 
 snippet
  46. 46. 自訂 snippet Tools / New snippet
  47. 47. 片段內容
  48. 48. 更換[ 這裡 ] 片段內容
  49. 49. 設定關鍵字
  50. 50. 設定[ 這裡 ] 並移除註解 設定關鍵字
  51. 51. 儲存片段
  52. 52. 使⽤用預設路徑 並建⽴立⼀一個資料夾 較⽅方便管理 儲存片段
  53. 53. 片段副檔名
  54. 54. 副檔名 .sublime-snippet 片段副檔名
  55. 55. 管理 snippet 編碼規則
  56. 56. 識別字 分類 名稱 + +
  57. 57. amos_cdn_JQ amos_cdn_jqUI amos_cdn_bootstrap amos_cdn_cssReset
  58. 58. amos_html_導覽列 amos_css_導覽列 amos_js_導覽列
  59. 59. amos_html_分頁 amos_css_分頁
  60. 60. 主題 
 Theme
  61. 61. 內建主題 preferences / Color Scheme Sublime Text / preferences / Color Scheme PC MAC
  62. 62. 其它推薦主題 Seti ui Material Theme - Spacegray Predawn
  63. 63. 自訂快速鍵 
 hotkey
  64. 64. 內建快速鍵 Key bindings-Default
  65. 65. 自訂快速鍵 Key bindings-User { "keys": ["f12"], "command": “open_in_browser” }
  66. 66. 謝謝我是 Amos 是我 https://www.facebook.com/banPrint

×