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開啟文件路徑


RitaTeaching

sublime - 6

Sublime \

Color Picker 套件

Color Picker 開啟檢色器


啟動快速鍵∶ Ctrl + shift + c

*註：Color Picker與 ConvertToUTF8快速鍵重覆，需更改其中一個套件快速鍵才可正常使用。

Color Highlighter 套件

Color Highlighter 顯示設定之色彩於色碼上

RitaTeaching

sublime - 7

Sublime \

ConvertToUTF8修改快速鍵

Sublime 套件設定

修改 ConvertToUTF8快速鍵路徑

瀏覽套件

MACWindows

RitaTeaching

sublime - 8

Sublime \

ConvertToUTF8修改中文自動辨識順序


打開套件預設值

打開套件使用者設定值

拷貝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


RitaTeaching

sublime - 10

Sublime \

END.

RITA TEACHING Sublimtutorial.jumpdesign.tw/handouts/web/5-1sublime.pdf ·...

Documents

Transcript of RITA TEACHING Sublimtutorial.jumpdesign.tw/handouts/web/5-1sublime.pdf ·...