sublime text 極速應用教學
TRANSCRIPT
Sublime Textby Amos
極速 應用
裝武器Step 1
外掛管理程式
Sublime text
搜尋外掛 安裝外掛 移除外掛
PackageControl
其他外掛
其他外掛
其他外掛
安裝package control
搜尋「package control」
點選「install」
複製原始碼 1
複製原始碼 1
在Sublime開啟View / Show
Console2
複製原始碼 1
在Sublime開啟View / Show
Console2
貼上原始碼後按Enter3
使用 Package Control 安裝其他外掛
使用 Package Control 安裝其他外掛
開啟「命令⾯面板」 1
使用 Package Control 安裝其他外掛
輸⼊入「ins」選擇「Install Pakage」
並執⾏行2
開啟「命令⾯面板」 1
輸⼊入「emmet」選擇並執⾏行即開始安裝
1
[= ] 出現[= ]左右彈跳時表⽰示正在安裝中
火力清單• convertToUTF8 (讓中⽂文正常顯⽰示)
•emmet (建原始碼超快)
• html5 (就HTML5啊)
• CSS3 (就CSS3啊)
• Color highlighter (顯⽰示⾊色碼⾊色彩)
• AutoFileName (可抓取檔案路徑)
•ChineseLoremIpsum (中⽂文假⽂文產⽣生器)
•All autocomplete (⾃自動取得class)
•view in browser (開啟瀏覽器預覽)
•HTML Beautify (原始碼⾃自動排列)
•Javascript Beautify (原始碼⾃自動排列)
•FTPsync (FTP功能)
•package Resource Viewer
常用Package Control指令
• 安裝已裝外掛 install package • 移除已裝外掛 remove package • 查看已裝外掛 list package • 停⽤用已裝外掛 Disable package • 啟⽤用已裝外掛 Enable package • 查看外掛資料 Browse package
編輯 . 網頁
選擇文件格式
選擇文件格式
html5
選擇文件格式
html5按這裡
建立網頁原始碼
建立網頁原始碼
html5 + tab
不夠懶! + tab
標籤 + tab加標籤
標籤.類別名 標籤＃ID
加class、ID
標籤[屬性＝屬性值 ]
加屬性
標籤[屬性＝屬性值 ]
加屬性
不必寫引號
標籤{我是內⽂文}
加內文
標籤>標籤
加子層標籤
標籤>標籤
加子層標籤
左右不能有空格
標籤＋標籤
接續標籤
標籤＋標籤
接續標籤
左右不能有空格
h1.title+p{內⽂文}例：
h1.title+p{內⽂文}例：
<h1 class="title"></h1> <p>我是內⽂文</p>
結果：
例：h1.title{標題}+p{內⽂文}
例：
<h1 class="title">標題</h1> <p>內⽂文</p>
結果：
h1.title{標題}+p{內⽂文}
(標籤>標籤)＋(標籤>標籤)
標籤群組
(標籤>標籤)＋(標籤>標籤)
標籤群組
左右不能有空格
(.header>.logo)+(.nav>ul>li)
例：
結果：<div class=“header”> <div class=“logo”></div> </div>
<div class=“nav”> <ul> <li></li> </ul> </div>
標籤*10
一次打十個
實際操作
兩欄版型實際操作
兩欄版型實際操作
單層選單
兩欄版型實際操作
單層選單雙層選單
兩欄版.wrapper>.header+(.nav>ul>li*6>a)+.main+.footer
片段 snippet
自訂 snippetTools / New snippet
片段內容
更換[ 這裡 ]
片段內容
設定關鍵字
設定[ 這裡 ] 並移除註解
設定關鍵字
儲存片段
使⽤用預設路徑 並建⽴立⼀一個資料夾較⽅方便管理
儲存片段
片段副檔名
副檔名 .sublime-snippet
片段副檔名
管理 snippet編碼規則
識別字
分類
名稱
＋
＋
amos_cdn_JQ
amos_cdn_jqUI
amos_cdn_bootstrap
amos_cdn_cssReset
amos_html_導覽列
amos_css_導覽列
amos_js_導覽列
amos_html_分頁
amos_css_分頁
主題 Theme
內建主題
preferences / Color Scheme
Sublime Text / preferences / Color Scheme
PC
MAC
其它推薦主題Seti ui Material Theme - Spacegray Predawn
自訂快速鍵 hotkey
內建快速鍵
Key bindings-Default
自訂快速鍵
Key bindings-User{ "keys": ["f12"], "command":
“open_in_browser” }
