sublime text 極速應用教學

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” }

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