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

1. Sublime Text
by Amos
極速 應用

2. 裝武器
Step 1

3. 外掛管理程式
Sublime
text
搜尋外掛
安裝外掛
移除外掛
Package
Control
其他外掛
其他外掛
其他外掛

4. 安裝package control
搜尋「package control」
點選「install」

5. 複製原始碼 1

6. 複製原始碼 1
在Sublime開啟
View / Show
Console
2

7. 複製原始碼 1
在Sublime開啟
View / Show
Console
2
貼上原始碼後按
Enter3

8. 使用 Package Control
安裝其他外掛

9. 使用 Package Control
安裝其他外掛
開啟「命令⾯面板」 1

10. 使用 Package Control
安裝其他外掛
輸⼊入「ins」
選擇「Install Pakage」
並執⾏行
2
開啟「命令⾯面板」 1

11. 輸⼊入「emmet」
選擇並執⾏行
即開始安裝
1
[= ]
出現[= ]左右彈跳時
表⽰示正在安裝中

12. 火力清單
• convertToUTF8 (讓中⽂文正常顯⽰示)
•emmet (建原始碼超快)
• html5 (就HTML5啊)
• CSS3 (就CSS3啊)
• Color highlighter (顯⽰示⾊色碼⾊色彩)
• AutoFileName (可抓取檔案路徑)

13. •ChineseLoremIpsum (中⽂文假⽂文產⽣生器)
•All autocomplete (⾃自動取得class)
•view in browser (開啟瀏覽器預覽)
•HTML Beautify (原始碼⾃自動排列)
•Javascript Beautify (原始碼⾃自動排列)
•FTPsync (FTP功能)
•package Resource Viewer

14. 常用Package Control指令
• 安裝已裝外掛 install package
• 移除已裝外掛 remove package
• 查看已裝外掛 list package
• 停⽤用已裝外掛 Disable package
• 啟⽤用已裝外掛 Enable package
• 查看外掛資料 Browse package

15. 編輯 . 網頁

16. 選擇文件格式

17. 選擇文件格式
html5

18. 選擇文件格式
html5
按這裡

19. 建立網頁原始碼

20. 建立網頁原始碼
html5 + tab

21. 不夠懶
! + tab

22. 標籤 + tab
加標籤

23. 標籤.類別名
標籤＃ID
加class、ID

24. 標籤[屬性＝屬性值 ]
加屬性

25. 標籤[屬性＝屬性值 ]
加屬性
不必寫引號

26. 標籤{我是內⽂文}
加內文

27. 標籤>標籤
加子層標籤

28. 標籤>標籤
加子層標籤
左右不能有空格

29. 標籤＋標籤
接續標籤

30. 標籤＋標籤
接續標籤
左右不能有空格

31. h1.title+p{內⽂文}
例：

32. h1.title+p{內⽂文}
例：
<h1 class="title"></h1>
<p>我是內⽂文</p>
結果：

33. 例：
h1.title{標題}+p{內⽂文}

34. 例：
<h1 class="title">標題</h1>
<p>內⽂文</p>
結果：
h1.title{標題}+p{內⽂文}

35. (標籤>標籤)＋(標籤>標籤)
標籤群組

36. (標籤>標籤)＋(標籤>標籤)
標籤群組
左右不能有空格

37. (.header>.logo)+(.nav>ul>li)
例：

38. 結果：
<div class=“header”>
<div class=“logo”></div>
</div>
<div class=“nav”>
<ul>
<li></li>
</ul>
</div>

39. 標籤*10
一次打十個

40. 實際操作

41. 兩欄版型
實際操作

42. 兩欄版型
實際操作
單層選單

43. 兩欄版型
實際操作
單層選單
雙層選單

44. 兩欄版
.wrapper>.header+
(.nav>ul>li*6>a)+.main+.footer

45. 片段
snippet

46. 自訂 snippet
Tools / New snippet

47. 片段內容

48. 更換[ 這裡 ]
片段內容

49. 設定關鍵字

50. 設定[ 這裡 ]
並移除註解
設定關鍵字

51. 儲存片段

52. 使⽤用預設路徑
並建⽴立⼀一個資料夾
較⽅方便管理
儲存片段

53. 片段副檔名

54. 副檔名
.sublime-snippet
片段副檔名

55. 管理 snippet
編碼規則

56. 識別字
分類
名稱
＋
＋

57. amos_cdn_JQ
amos_cdn_jqUI
amos_cdn_bootstrap
amos_cdn_cssReset

58. amos_html_導覽列
amos_css_導覽列
amos_js_導覽列

59. amos_html_分頁
amos_css_分頁

60. 主題
Theme

61. 內建主題
preferences / Color Scheme
Sublime Text / preferences / Color
Scheme
PC
MAC

62. 其它推薦主題
Seti ui
Material
Theme - Spacegray
Predawn

63. 自訂快速鍵
hotkey

64. 內建快速鍵
Key bindings-Default

65. 自訂快速鍵
Key bindings-User
{ "keys": ["f12"], "command":
“open_in_browser” }

66. 謝謝我是 Amos 是我
https://www.facebook.com/banPrint