Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Sublime text 極速應用教學

38.305 visualizaciones

Publicado el

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

Publicado en: Software
  • Get access to 16,000 woodworking plans, Download 50 FREE Plans... ▲▲▲ http://tinyurl.com/y3hc8gpw
       Responder 
    ¿Estás seguro?    No
    Tu mensaje aparecerá aquí

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

×