SlideShare uma empresa Scribd logo
1 de 66
Baixar para ler offline
Sublime Text
by Amos
極速 應用
裝武器
Step 1
外掛管理程式
Sublime
text
搜尋外掛
安裝外掛
移除外掛
Package
Control
其他外掛
其他外掛
其他外掛
安裝package control
搜尋「package control」
點選「install」
複製原始碼 1
複製原始碼 1
在Sublime開啟
View / Show
Console
2
複製原始碼 1
在Sublime開啟
View / Show
Console
2
貼上原始碼後按
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
自訂 snippet
Tools / 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

Mais conteúdo relacionado

Mais procurados

用十分鐘瞭解陳鍾誠的 《課程、教材與學習方法》
用十分鐘瞭解陳鍾誠的  《課程、教材與學習方法》用十分鐘瞭解陳鍾誠的  《課程、教材與學習方法》
用十分鐘瞭解陳鍾誠的 《課程、教材與學習方法》鍾誠 陳鍾誠
 
Raspberry Pi專題製作四旋翼飛行器
Raspberry Pi專題製作四旋翼飛行器Raspberry Pi專題製作四旋翼飛行器
Raspberry Pi專題製作四旋翼飛行器艾鍗科技
 
Migration Guide from Java 8 to Java 11 #jjug
Migration Guide from Java 8 to Java 11 #jjugMigration Guide from Java 8 to Java 11 #jjug
Migration Guide from Java 8 to Java 11 #jjugYuji Kubota
 
Shougoの開発環境
Shougoの開発環境Shougoの開発環境
Shougoの開発環境Shougo
 
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)鍾誠 陳鍾誠
 
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》用十分鐘瞭解《如何避免寫出悲劇的 C 語言》
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》鍾誠 陳鍾誠
 
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱Yuya Rin
 
Introduction to boost test
Introduction to boost testIntroduction to boost test
Introduction to boost testKohsuke Yuasa
 
型安全性入門
型安全性入門型安全性入門
型安全性入門Akinori Abe
 
その ionice、ほんとに効いてますか?
その ionice、ほんとに効いてますか?その ionice、ほんとに効いてますか?
その ionice、ほんとに効いてますか?Narimichi Takamura
 
不遇の標準ライブラリ - valarray
不遇の標準ライブラリ - valarray不遇の標準ライブラリ - valarray
不遇の標準ライブラリ - valarrayRyosuke839
 
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーション
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーションイルカさんチームからゾウさんチームに教えたいMySQLレプリケーション
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーションyoku0825
 
Dynamic Reconfiguration of Apache ZooKeeper
Dynamic Reconfiguration of Apache ZooKeeperDynamic Reconfiguration of Apache ZooKeeper
Dynamic Reconfiguration of Apache ZooKeeperDataWorks Summit
 

Mais procurados (20)

用十分鐘瞭解陳鍾誠的 《課程、教材與學習方法》
用十分鐘瞭解陳鍾誠的  《課程、教材與學習方法》用十分鐘瞭解陳鍾誠的  《課程、教材與學習方法》
用十分鐘瞭解陳鍾誠的 《課程、教材與學習方法》
 
optimal Ate pairing
optimal Ate pairingoptimal Ate pairing
optimal Ate pairing
 
HTML 語法教學
HTML 語法教學HTML 語法教學
HTML 語法教學
 
Raspberry Pi專題製作四旋翼飛行器
Raspberry Pi專題製作四旋翼飛行器Raspberry Pi專題製作四旋翼飛行器
Raspberry Pi專題製作四旋翼飛行器
 
Migration Guide from Java 8 to Java 11 #jjug
Migration Guide from Java 8 to Java 11 #jjugMigration Guide from Java 8 to Java 11 #jjug
Migration Guide from Java 8 to Java 11 #jjug
 
Shougoの開発環境
Shougoの開発環境Shougoの開発環境
Shougoの開発環境
 
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)用十分鐘瞭解  陳鍾誠的程式設計課  (採用JavaScript + C的原因)
用十分鐘瞭解 陳鍾誠的程式設計課 (採用JavaScript + C的原因)
 
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》用十分鐘瞭解《如何避免寫出悲劇的 C 語言》
用十分鐘瞭解《如何避免寫出悲劇的 C 語言》
 
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
構成情報データベースをGitで管理したいネットワーク運用者の憂鬱
 
Introduction to boost test
Introduction to boost testIntroduction to boost test
Introduction to boost test
 
型安全性入門
型安全性入門型安全性入門
型安全性入門
 
KVM+cgroup
KVM+cgroupKVM+cgroup
KVM+cgroup
 
プログラムを高速化する話
プログラムを高速化する話プログラムを高速化する話
プログラムを高速化する話
 
その ionice、ほんとに効いてますか?
その ionice、ほんとに効いてますか?その ionice、ほんとに効いてますか?
その ionice、ほんとに効いてますか?
 
不遇の標準ライブラリ - valarray
不遇の標準ライブラリ - valarray不遇の標準ライブラリ - valarray
不遇の標準ライブラリ - valarray
 
No skk, no life.
No skk, no life.No skk, no life.
No skk, no life.
 
明日使えないすごいビット演算
明日使えないすごいビット演算明日使えないすごいビット演算
明日使えないすごいビット演算
 
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーション
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーションイルカさんチームからゾウさんチームに教えたいMySQLレプリケーション
イルカさんチームからゾウさんチームに教えたいMySQLレプリケーション
 
Stack pivot
Stack pivotStack pivot
Stack pivot
 
Dynamic Reconfiguration of Apache ZooKeeper
Dynamic Reconfiguration of Apache ZooKeeperDynamic Reconfiguration of Apache ZooKeeper
Dynamic Reconfiguration of Apache ZooKeeper
 

Destaque

Sublime Text 入門
Sublime Text 入門Sublime Text 入門
Sublime Text 入門Kah Wai Liew
 
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技Amos Lee
 
Sublime 外掛安裝教學
Sublime 外掛安裝教學Sublime 外掛安裝教學
Sublime 外掛安裝教學蘇姵欣 PeiSu
 
JavaScript 從零開始
JavaScript 從零開始JavaScript 從零開始
JavaScript 從零開始Adam Hung
 
Open Cart 模組架站教學
Open Cart 模組架站教學Open Cart 模組架站教學
Open Cart 模組架站教學蘇姵欣 PeiSu
 
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計Marie Chang
 
安裝Sublime text 3
安裝Sublime text 3安裝Sublime text 3
安裝Sublime text 3騰泓 王
 
好的網頁設計概念
好的網頁設計概念好的網頁設計概念
好的網頁設計概念蘇姵欣 PeiSu
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式Will Huang
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]Kuro Hsu
 
WordPress shortcode應用教學
WordPress shortcode應用教學WordPress shortcode應用教學
WordPress shortcode應用教學蘇姵欣 PeiSu
 
WordPress客製化模板教學
WordPress客製化模板教學WordPress客製化模板教學
WordPress客製化模板教學蘇姵欣 PeiSu
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練Joseph Chiang
 
IT工程師的職涯發展規劃 2016427
 IT工程師的職涯發展規劃 2016427 IT工程師的職涯發展規劃 2016427
IT工程師的職涯發展規劃 2016427艾鍗科技
 
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程zhangdaiping
 
深入淺出C語言
深入淺出C語言深入淺出C語言
深入淺出C語言Simen Li
 
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Shengyou Fan
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 KEN studio
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Tim (文昌)
 

Destaque (20)

Sublime Text 入門
Sublime Text 入門Sublime Text 入門
Sublime Text 入門
 
智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技智慧行動App跨國推廣經驗談 by 天橋科技
智慧行動App跨國推廣經驗談 by 天橋科技
 
Sublime 外掛安裝教學
Sublime 外掛安裝教學Sublime 外掛安裝教學
Sublime 外掛安裝教學
 
JavaScript 從零開始
JavaScript 從零開始JavaScript 從零開始
JavaScript 從零開始
 
Open Cart 模組架站教學
Open Cart 模組架站教學Open Cart 模組架站教學
Open Cart 模組架站教學
 
深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計深入淺出RWD自適應網頁設計
深入淺出RWD自適應網頁設計
 
安裝Sublime text 3
安裝Sublime text 3安裝Sublime text 3
安裝Sublime text 3
 
好的網頁設計概念
好的網頁設計概念好的網頁設計概念
好的網頁設計概念
 
使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式使用 Visual Studio Code 建構 JavaScript 應用程式
使用 Visual Studio Code 建構 JavaScript 應用程式
 
第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]第一次用 Vue.js 就愛上 [改]
第一次用 Vue.js 就愛上 [改]
 
WordPress shortcode應用教學
WordPress shortcode應用教學WordPress shortcode應用教學
WordPress shortcode應用教學
 
WordPress客製化模板教學
WordPress客製化模板教學WordPress客製化模板教學
WordPress客製化模板教學
 
CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練CSS 入門 - 前端工程開發實務訓練
CSS 入門 - 前端工程開發實務訓練
 
IT工程師的職涯發展規劃 2016427
 IT工程師的職涯發展規劃 2016427 IT工程師的職涯發展規劃 2016427
IT工程師的職涯發展規劃 2016427
 
基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程基于原型的JavaScript面向对象编程
基于原型的JavaScript面向对象编程
 
深入淺出C語言
深入淺出C語言深入淺出C語言
深入淺出C語言
 
Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南Visual Studio Code 快速上手指南
Visual Studio Code 快速上手指南
 
響應式網頁教學
響應式網頁教學響應式網頁教學
響應式網頁教學
 
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
阿肯 - UI & UX 從核心資訊與路徑設計談起 (2015/01/27)
 
Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索Frontend django, Django Web 前端探索
Frontend django, Django Web 前端探索
 

Sublime text 極速應用教學