SlideShare una empresa de Scribd logo
1 de 66
Descargar para leer sin conexión
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

Más contenido relacionado

La actualidad más candente

デザイナのためのGit入門
デザイナのためのGit入門デザイナのためのGit入門
デザイナのためのGit入門dsuke Takaoka
 
ノンプログラマでも今日から使える「Git」でバージョン管理
ノンプログラマでも今日から使える「Git」でバージョン管理ノンプログラマでも今日から使える「Git」でバージョン管理
ノンプログラマでも今日から使える「Git」でバージョン管理H2O Space. Co., Ltd.
 
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようPHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようShohei Okada
 
15分でわかるGit入門
15分でわかるGit入門15分でわかるGit入門
15分でわかるGit入門to_ueda
 
コンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドコンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドktateish
 
マルチコア時代の並列プログラミング
マルチコア時代の並列プログラミングマルチコア時代の並列プログラミング
マルチコア時代の並列プログラミングAkihiko Matuura
 
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニックinfinite_loop
 
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8y_taka_23
 
第二回CTF勉強会資料
第二回CTF勉強会資料第二回CTF勉強会資料
第二回CTF勉強会資料Asuka Nakajima
 
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話JustSystems Corporation
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersShota TAMURA
 
Git超入門_座学編.pdf
Git超入門_座学編.pdfGit超入門_座学編.pdf
Git超入門_座学編.pdf憲昭 村田
 
無料で仮想Junos環境を手元に作ろう
無料で仮想Junos環境を手元に作ろう無料で仮想Junos環境を手元に作ろう
無料で仮想Junos環境を手元に作ろうakira6592
 
JIT のコードを読んでみた
JIT のコードを読んでみたJIT のコードを読んでみた
JIT のコードを読んでみたy-uti
 
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例National Cheng Kung University
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜Takashi Uemura
 

La actualidad más candente (20)

いつやるの?Git入門
いつやるの?Git入門いつやるの?Git入門
いつやるの?Git入門
 
デザイナのためのGit入門
デザイナのためのGit入門デザイナのためのGit入門
デザイナのためのGit入門
 
ノンプログラマでも今日から使える「Git」でバージョン管理
ノンプログラマでも今日から使える「Git」でバージョン管理ノンプログラマでも今日から使える「Git」でバージョン管理
ノンプログラマでも今日から使える「Git」でバージョン管理
 
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしようPHP-FPM の子プロセス制御方法と設定をおさらいしよう
PHP-FPM の子プロセス制御方法と設定をおさらいしよう
 
15分でわかるGit入門
15分でわかるGit入門15分でわかるGit入門
15分でわかるGit入門
 
コンセプトから理解するGitコマンド
コンセプトから理解するGitコマンドコンセプトから理解するGitコマンド
コンセプトから理解するGitコマンド
 
マルチコア時代の並列プログラミング
マルチコア時代の並列プログラミングマルチコア時代の並列プログラミング
マルチコア時代の並列プログラミング
 
入門 シェル実装
入門 シェル実装入門 シェル実装
入門 シェル実装
 
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
大規模ソーシャルゲーム開発から学んだPHP&MySQL実践テクニック
 
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
思ったほど怖くない! Haskell on JVM 超入門 #jjug_ccc #ccc_l8
 
第二回CTF勉強会資料
第二回CTF勉強会資料第二回CTF勉強会資料
第二回CTF勉強会資料
 
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
Spring Boot の Web アプリケーションを Docker に載せて AWS ECS で動かしている話
 
About GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginnersAbout GStreamer 1.0 application development for beginners
About GStreamer 1.0 application development for beginners
 
Git超入門_座学編.pdf
Git超入門_座学編.pdfGit超入門_座学編.pdf
Git超入門_座学編.pdf
 
無料で仮想Junos環境を手元に作ろう
無料で仮想Junos環境を手元に作ろう無料で仮想Junos環境を手元に作ろう
無料で仮想Junos環境を手元に作ろう
 
JIT のコードを読んでみた
JIT のコードを読んでみたJIT のコードを読んでみた
JIT のコードを読んでみた
 
Glibc malloc internal
Glibc malloc internalGlibc malloc internal
Glibc malloc internal
 
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例
LLVM 總是打開你的心:從電玩模擬器看編譯器應用實例
 
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
もしWordPressユーザーがGitを使ったら 〜WordPressテーマを共同編集しよう〜
 
CTFとは
CTFとはCTFとは
CTFとは
 

Destacado

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 (文昌)
 

Destacado (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 極速應用教學