Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Sublime text 極速應用教學

38.577 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/t63rcqf } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/t63rcqf } ......................................................................................................................... Download Full doc Ebook here { https://tinyurl.com/t63rcqf } ......................................................................................................................... Download PDF EBOOK here { https://tinyurl.com/t63rcqf } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/t63rcqf } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/t63rcqf } ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Get access to 16,000 woodworking plans, Download 50 FREE Plans... ▲▲▲ http://tinyurl.com/y3hc8gpw
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×