RITA TEACHING Sublimtutorial.jumpdesign.tw/handouts/web/5-1sublime.pdf ·...
Transcript of RITA TEACHING Sublimtutorial.jumpdesign.tw/handouts/web/5-1sublime.pdf ·...
SublimRITA TEACHING
ENTER
網頁設計
v6.0
RitaTeaching
sublime - 1
Sublime \
Package Control 是功能相當完整的 套件管理員,讓搜尋、安裝跟移除 Sublime Text package 變得相當方便,協助自動更新外掛,也因此幾乎所有的外掛開發者,都會將自己的作品主動提交到 Package Control 上。
步驟 1、呼叫命令視窗:Tools > Command Palette ( Ctrl+Shift+P )步驟 2、安裝套件管理員:選擇 Install Package Control
安裝 Sublime
安裝 Package Control https://packagecontrol.io/installation
https://www.sublimetext.com/
免安裝版
RitaTeaching
sublime - 2
Sublime \
選擇檔案類型
Sublime 使用方式
RitaTeaching
sublime - 3
Sublime \
Sublime 常用指令
1、預覽:滑鼠右鍵 > open in Browier2、命令視窗:Tools > Command Palette ( Ctrl+Shift+P )3、視窗檢視方式:view > Layout >4、語法換行:view > word wrap
步驟 1、呼叫命令視窗:Tools > Command Palette ( Ctrl+Shift+P )步驟 2、使用「Install Package」功能安裝套件:選擇 Package Control: Install Package步驟 3、搜尋欲安裝之套件
Sublime 套件安裝步驟
使用 Package Control (使用「命令視窗」呼叫指令 )
1、安裝套件:Package Control: Install Package2、套件列表:Package Control: List Packages3、移除套件:Package Control: remove package
RitaTeaching
sublime - 4
Sublime \
Emmet套件常用快速鍵
ConvertToUTF8 套件
1、Tab:展開縮寫2、Ctrl+D:選取一整個標籤。3、Ctrl+Alt+←:將游標移動到上一個可以輸入屬性或值的地方。4、Ctrl+Alt+→:將游標移動到下一個可以輸入屬性或值的地方。5、Shift+Ctrl+.:選取下一個標籤或屬性。6、Shift+Ctrl+,:選取上一個標籤或屬性。7、Ctrl+/:將選取的部分變成註解。 8、「!」>「Tab」:HTML5標準模板。
Sublime Text 預設不支援中文編碼,安裝 ConvertToUTF8套件使其支援中文編碼。
Emmet包含許多網頁開發者所需的功能,包含程式碼縮寫等,大大增加網頁開發效率。
搜尋 ConvertToUTF8套件
搜尋 Emmet套件
ConvertToUTF8安裝成功畫面
Emmet安裝成功畫面
官方網站:http://docs.emmet.io/
官方網站:https://github.com/seanliang/ConvertToUTF8
Sublime 常用套件
RitaTeaching
sublime - 5
Sublime \
Auto File Name 套件
Auto File Name開啟文件路徑
Sublime 常用套件
RitaTeaching
sublime - 6
Sublime \
Color Picker 套件
Color Picker 開啟檢色器
Sublime 常用套件
啟動快速鍵∶ Ctrl + shift + c
*註:Color Picker與 ConvertToUTF8快速鍵重覆,需更改其中一個套件快速鍵才可正常使用。
Color Highlighter 套件
Color Highlighter 顯示設定之色彩於色碼上
RitaTeaching
sublime - 7
Sublime \
ConvertToUTF8修改快速鍵
Sublime 套件設定
修改 ConvertToUTF8快速鍵路徑
瀏覽套件
MACWindows
RitaTeaching
sublime - 8
Sublime \
ConvertToUTF8修改中文自動辨識順序
Sublime 套件設定
打開套件預設值
打開套件使用者設定值
拷貝ConvertToUTF8中文辨識順序
貼上ConvertToUTF8預設值修改順序
MAC
MAC
Windows
Windows
RitaTeaching
sublime - 9
Sublime \
Emmet快速鍵使用方式
<body> ul#nav>li.item$*4>a{Item $}</body>
<body> <ul id="nav"> <li class="item1"><a href="">Item 1</a></li> <li class="item2"><a href="">Item 2</a></li> <li class="item3"><a href="">Item 3</a></li> <li class="item4"><a href="">Item 4</a></li> </ul></body>
官方網站:http://docs.emmet.io/
{ "snippets": { "variables": { "lang": "zh-hant-TW" } }}
Emmet lang修改
修改 Emmet 預設 lang
MACWindows
Sublime 套件設定
RitaTeaching
sublime - 10
Sublime \
END.