Sublime的好處我認了，原本很堅持要用DW的
但一天到晚為了修改小細節一直複製貼上一樣的東西，實在是很笨
看著同學們用zencoding(後來改名叫emmet)和Ctrl+D快速改code就覺得有點羨慕
所以囉～
另外附上一張熱鍵表～
了解了這些指令後我根本嚇壞了，快來用用看吧(抖
設定後，每次存檔就會自動存成HTML。
方法：Ctrl+Shift+P打開控制面板→搜尋html→選擇Set syntax:HTML
先去官網下載檔案，現在有分Sublime2、Sublime3兩個版本
我是用版本2，版本2的網路資源齊全一點，但版本3有修正一些bug，新增一些功能
雖然我本來堅持用版本2(有些快捷鍵或套件設定會不一樣)，但畢竟新版本才會有一些持續更新和支援....所以最後我還是用Sublime3哩
套件官網：傳送門
2.輸入以下：
(Sublime2貼這個)
(Sublime3貼這個)
2.輸入Install Package(快捷Ctrl+Shift+P)
3.輸入欲安裝套件的名稱~
用法：試試看輸入以下指令後，按Ctrl+E轉換HTML架構
用法：側欄中文件右鍵點開就會多了許多東西，以前可以用F12預覽但在2014年的某一天我發現不能用了F12預覽了哭
(目前只支援3版，2版的要抓要另外找)
用法：滑鼠游標點到有色碼的地方的反選色會出現對應色
用法：
用法：轉換編碼、另存編碼
路徑：[File]=>Reload with Encoding、Set File Encording to=>選擇邊碼
備註：sublime本身沒有big5，通常文件我們都用utf-8，遇到轉存我是都用Dreamweaver或筆記本轉，所以其實也沒用到這個。
用法：[Preferences] => [setting-Default]，Ctrl+F搜尋"theme"，約在270行修改
"theme": "Soda Light.sublime-theme"
"theme": "Soda Dark.sublime-theme"
用法：要在設定裡加一行程式碼才會換主題,自己去這裡看~(懶
對著HTML中的的class按"Win鍵+Alt+.(注音ㄡ那個)"，就會打開css文件跑到該位置
用法：安裝完需於瀏覽器再安裝LiveReload
用法：叫出Package control面版，輸入相關需求(ex.html、nav、bread)
裝過一次Sublime套件後，記得將檔案備份起來，以後換電腦的時候就直接摳檔案就好囉！
套件路徑: C:\Users\user\AppData\Roaming\Sublime Text 2(3版的話自己改名字)
但一天到晚為了修改小細節一直複製貼上一樣的東西，實在是很笨
看著同學們用zencoding(後來改名叫emmet)和Ctrl+D快速改code就覺得有點羨慕
所以囉～
Sublime介紹
＊Sublime的好處
- 可以同時開兩欄，比對文件，或是一邊看架構HTML一邊看CSS檔案
- 自動保留檔案，不怕沒存到檔案
- 外掛多，無所不能(像是排版、除蟲、檢色器等等)
＊Sublime指令
- F11切換全螢幕
- Ctrl+/註解、取消註解
- Ctrl+左鍵 可於想修改的地方加選好幾個文字標，同時修改
- Ctrl+D向下選取同名字並同步修改code，大量修改超好用
- Ctrl+G直接輸入數字到行數到指定行數
- Alt+F3選取全文同名內容，等於超快速搜尋替代功能
- Shift+右鍵(向垂直方向拉) 同時修改垂直方向內容，根本太強大...
- Ctrl+Shift+L同時選取多行，同步修改內容
- Ctrl+Shift+P管理套件面板(必記)
另外附上一張熱鍵表～
了解了這些指令後我根本嚇壞了，快來用用看吧(抖
＊設定副檔名
如果沒有設定檔案的存檔類型的話，每次存檔後還需要重新命名副檔名。設定後，每次存檔就會自動存成HTML。
方法：Ctrl+Shift+P打開控制面板→搜尋html→選擇Set syntax:HTML
下載Sublime
官網：傳送門先去官網下載檔案，現在有分Sublime2、Sublime3兩個版本
我是用版本2，版本2的網路資源齊全一點，但版本3有修正一些bug，新增一些功能
雖然我本來堅持用版本2(有些快捷鍵或套件設定會不一樣)，但畢竟新版本才會有一些持續更新和支援....所以最後我還是用Sublime3哩
安裝其他套件Package Control
功能：管理、下載套件用的爸爸套件，安裝其他套件都要靠這個。沒有裝套件的Sublime什麼都沒有啊（抖）套件官網：傳送門
＊方法：
1. "Ctrl + `"叫出控制板2.輸入以下：
(Sublime2貼這個)
import urllib2,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler()) ); by = urllib2.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); open( os.path.join( ipp, pf), 'wb' ).write(by) if dh == h else None; print('Error validating download (got %s instead of %s), please try manual install' % (dh, h) if dh != h else 'Please restart Sublime Text to finish installation')
(Sublime3貼這個)
import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
＊執行安裝套件 Install Package
1. 路徑：[Preferences] => [Package Control]2.輸入Install Package(快捷Ctrl+Shift+P)
3.輸入欲安裝套件的名稱~
安裝套件的推薦一覽-必裝推薦
emmet(以前的名字zen coding)
功能：用超簡短指令超快寫架構，堪稱神co，詳細指令自己上網google~用法：試試看輸入以下指令後，按Ctrl+E轉換HTML架構
HTML:4t、HTML:5、link:css、style、script
ul+、ul>li*3、dt+
table+、table>tbody>th>td*3^^tr>td*3
form:get、form:post、input:t*3
div#name、div.name、div.one.two、div#name>li.item$$*4
div+p+p、div#name>p.one+p.two
select>option#item-${opt $}*5
div[title]
a[title="Hello world"]
div#name>p.title
p>{點擊}+a{這裡}+{繼續}
div#page>div.log+ul#nav>li*5>a
ul[data-bind="foreach:customers"]>li*4>span{內容 $$}+input[type="text data-bind="value:$$]
ul+、ul>li*3、dt+
table+、table>tbody>th>td*3^^tr>td*3
form:get、form:post、input:t*3
div#name、div.name、div.one.two、div#name>li.item$$*4
div+p+p、div#name>p.one+p.two
select>option#item-${opt $}*5
div[title]
a[title="Hello world"]
div#name>p.title
p>{點擊}+a{這裡}+{繼續}
div#page>div.log+ul#nav>li*5>a
ul[data-bind="foreach:customers"]>li*4>span{內容 $$}+input[type="text data-bind="value:$$]
SideBarEnhancements
功能：增強側欄功能用法：側欄中文件右鍵點開就會多了許多東西，以前可以用F12預覽但在2014年的某一天我發現不能用了F12預覽了哭
(目前只支援3版，2版的要抓要另外找)
html snippet
基本提示字JQuery
基本提示字Css3
基本提示字color highlighter
功能：色碼提示用法：滑鼠游標點到有色碼的地方的反選色會出現對應色
AutoFileNme
功能：外部連結路徑提字(圖片、CSS、JS)HTML-CSS-JS Prettify、JsFormat
功能：重新排版(縮排整理)文件用法：
- Prettify：需另外手動安裝node.js，然後確定node安裝的路徑跟sublime對應位置是對的(有時候會有x86的差別) 安裝好後，按Prettify Code就ok了!
- JsFormat快捷：Ctrl+Alt+F
安裝套件的推薦一覽-延伸推薦
ConvertToUTF8
功能：解決 Sublime Text 3 預設不支援 Big5 與其他 CJK 編碼的問題用法：轉換編碼、另存編碼
路徑：[File]=>Reload with Encoding、Set File Encording to=>選擇邊碼
備註：sublime本身沒有big5，通常文件我們都用utf-8，遇到轉存我是都用Dreamweaver或筆記本轉，所以其實也沒用到這個。
Theme-Soda
功能：面板的主題用法：[Preferences] => [setting-Default]，Ctrl+F搜尋"theme"，約在270行修改
"theme": "Soda Light.sublime-theme"
"theme": "Soda Dark.sublime-theme"
Theme-Nexus
功能：帥帥的面板主題用法：要在設定裡加一行程式碼才會換主題,自己去這裡看~(懶
goto css declaration
快捷：Win鍵+Alt+.(注音ㄡ那個)對著HTML中的的class按"Win鍵+Alt+.(注音ㄡ那個)"，就會打開css文件跑到該位置
BracketHighlighter
功能：刮弧改高亮度，方便檢查是否有漏LiveReload
功能：存檔就即時更新，不用F5重新整理用法：安裝完需於瀏覽器再安裝LiveReload
Syntax Hightlight for sass
sass文件支援Bootstrap 3 snippets
功能：Bootstrap code外掛(有點像emmet)用法：叫出Package control面版，輸入相關需求(ex.html、nav、bread)
關於套件的管理
＊安裝套件方法2
直接將檔案丟到資料裡面就ok了!裝過一次Sublime套件後，記得將檔案備份起來，以後換電腦的時候就直接摳檔案就好囉！
套件路徑: C:\Users\user\AppData\Roaming\Sublime Text 2(3版的話自己改名字)
![[設計]印刷交稿注意事項](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmusax8PI7NG_a-4ZMZgnCnKYo6ymYlFN1Sk47iG8OTAzvM7IWQW-HMPaQDMlJ4FAXgy_5eUlHs7MAwIlhJFYFsjpfu9VUjO0R6d2yjsiLNsP3FFhumoiXroMGoI7loy2UFBiheMSVWg5T/s72-c/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2018-07-10+%25E4%25B8%258A%25E5%258D%258811.12.52.png)
![[網頁，部落格]Blogger網誌中的圖片於手機版變形問題](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUBxl2j9Av4ouBzUc7_Z7opHkg_lwqloigmNnNPxnCpjIt5gbpB3VcbduC_sTppCLPcvad08FSkc4-Bbnyi9ZUpRNCOpOoEl2MOgwM3s-0QG0gJGh7S7V9nat1913-c8oc_9pRNDuV/s72-c/%25E8%259E%25A2%25E5%25B9%2595%25E5%25BF%25AB%25E7%2585%25A7+2019-04-03+%25E4%25B8%258B%25E5%258D%258810.14.18.png)
![[操作基礎]用Blogger要怎麼寫表格？](https://blogger.googleusercontent.com/img/a/AVvXsEhEd27J4bf71N__qZOJkUAiXgNxHcCv3N4v0OAUFSTEVvVRfIaMM13QU1V53338yZ_RvP-F1WPUhnug-OJWXbjC84mEPT59yEzWosDUXIFLlsbbOp8WHRAFAXnNgDo2YhNy_OmFvUY2BG3mfFnqSoFXVebdoAoI13pOMRtxolCy2oa5O8fLuGtKlH_TLg=s72-c)
沒有留言:
張貼留言