程式編輯器sublime 3 介紹

 

Sublime Text3 的介面非常的簡潔明瞭，初學者打開來不會有那種「哇⋯這些功能都是什麼，看起來好複雜，我該怎麼用？」的感覺。 雖然介面非常的基本簡單，但最大的優勢就是它有著大量實用的外掛程式，每個人可以根據自己使用上的需求，安裝其所需的外掛，讓這套軟體更為完備且發揮更大的功效。

它是一款輕量級、能夠快速啟動，擁有漢化功能，同時也支援Windows、Mac OS 這些作業系統。Sublime Text3 雖然是付費軟體，但它的試用期是無限的，因此可以從官方網站免費下載來使用。


1. 如何下載sublime

下載網址 :  https://www.sublimetext.com/3

並且找到自己的作業系統 , 點選後下載 


2. 如何將sublime中文化

步驟一

Preferences -> Package Control 或者 shift+ctrl+p 叫出視窗

步驟二

打上 install 找到 install Package 後點選

步驟三

會再跳出一個視窗 , 打上ChineseLocalization後點選

步驟四

 點選上方 Help ->Language


3. 出現錯誤

There are no packages available for installation


解決辦法 :

請點選上方 "Preferences -> Package Settings -> Package Control -> Settings User" 中新添加一个项 "channels" 

"channels":
[
	"https://raw.githubusercontent.com/SuCicada/channel_v3.json/master/channel_v3.json"
],



4. 刪除sublime套件

Preferences -> Package Control 或者 shift+ctrl+p 叫出視窗 ,點選 remove Package




就會列出你現在所擁有的套件 , 點選後直接移除

5. sublime常用套件

Emmet

提供了一種非常簡練的語法規則，然後立刻生成對應的 HTML 結構或者 CSS 程式碼，同時還有多種實用的功能幫助進行前端開發。

AutoFileName

輸入路徑或url時，自動抓取檔案路徑

ConvertToUTF8

Sublime Text 3預設不支援中文編碼，開啟big5會亂碼，因此需要安裝此套件來解決問題。

Sublimerge Pro

可以快速比對兩個檔案的內容差異，雖然Sublime Text本身就可以開兩欄或多欄，但必須以人工方式比對內容太耗時間，此套件可快速標示出兩檔案的差異之處。
先安裝此套件-->將要比對的檔案開啟-->在檔案按右鍵Sublimerge > Compare to你要比對的另一個檔案



兩邊不同的地方會被框起來，對照查看相當方便。

6. sublime常用快捷鍵

檔案

Ctrl + P快速開啟檔案
Ctrl + Shift + T  還原最後關閉的分頁

搜尋/取代

Ctrl + F搜尋
Ctrl + H取代
Ctrl + Shift + F檔案間搜尋

文字操作

Ctrl + K + U轉換為大寫
Ctrl + K + L轉換為小寫

其他常用列表

Ctrl + C複製
Ctrl + V貼上
Ctrl + X剪下
Ctrl + Y下一步
Ctrl + Z上一步
Ctrl + /註解與移除註解
Ctrl + K + K刪除游標後方所有文字
Ctrl + K + Backspace刪除游標前方所有文字
Tab向內縮排
Shift + Tab向外縮排

留言

張貼留言

這個網誌中的熱門文章

網頁入門教材目錄

  0.網頁運作原理 網頁運作原理與專業名詞 1.程式編輯器sublime 3 介紹 sublime 3 使用介紹 2. PHP開發環境介紹  Xampp介紹 3. 認識HTML HTML介紹 4. 認識CSS CSS基礎篇 CSS基礎語法 5.認識 Javascript Javascript基礎 6. 認識 Jquery Jquery與ajax介紹 7. Bootstrap 4 基礎介紹 Bootstrap 4 介紹 Bootstrap 4 範例製作 8. 資料庫入門 MariaDB入門教學 9. PHP介紹 PHP基礎用法 - 1 PHP基礎用法 - 2 PHP物件導向 PHP與資料庫連線 10. Laravel框架入門 Laravel 基礎概念 Laravel下載安裝、MVC流程編寫、資料庫設定 Laravel 新增資料與顯示資料 Laravel 資料修改與刪除 Laravel 完整筆記本範例
閱讀完整內容

什麼是HTML?

圖片
  1. HTML 是什麼呢 ? html介紹 HTML 的英文原文是 HyperText Markup Language ，中文譯為「超文字標示語言」。為什麼要說「 超文字 」呢？如果你曾經用過 Windows 上的「記事本」打過字，你應該知道一般的純文字輸入是無法顯示不同的字型大小、不同的文字顏色、甚至插入與文字說明相關的圖片的。而 超文字則可包含這些不同的文字變化、加入圖片或影音多媒體、畫表格、甚至可做一些基本的排版功能 。而「標記語言」指的是 HTML 透過一些定義好的結構化標籤 (Tag) 語法，讓你把超文字放到你所想要的位置、或去指定它的呈現方式。因此，再簡單的說， HTML 就是可以讓你將您所想要呈現給別人看的資料，儘可能以較豐富的方式去呈現。 我可以用什麼工具編寫 HTML 網頁？ 很簡單，用 Windows 內建的「記事本」小軟體，就可以拿來練習編寫網頁了。但如果可以的話，真心推薦您使用以下其中一套「免費的進階版記事本」小軟體：  Notepad++  、  sublime ，因為它們可以幫您將 HTML 語法和您的網頁文章內容用不同的顏色做一些區隔，讓您更方便閱讀 HTML 內容，並且也可以及早讓您發現可能的編寫錯誤，讓您的學習之路更為順暢。 我要如何瀏覽及測試我的 HTML 網頁呢？ 當您使用前述的「記事本」工具編寫完內容後， 可以將檔案儲存成 test.html 這樣的檔名 ， test 即是您網頁的主檔名，而 .html 則為網頁的副檔名。假設您的檔案是儲存在「桌面」，您可用檔案總管或是任何可能的方式到桌面去找到 .html 的檔案，例如前述的 test.html 檔，然後用 滑鼠在 test.html 檔案上按左鍵快速點選兩下 ，則電腦即會自動以您系統預設的  網頁瀏覽器  開啟這個練習的網頁 2. HTML 基本語法 基本的HTML文件格式 < HTML > 　 < HEAD > 　　 < TITLE > 網頁主題 </ TITLE > 　　 < Meta > 　 </ HEAD > 　 < BODY > 　　網頁內容的主要呈現部分 　 </ BODY > </ H...
閱讀完整內容

網頁是怎麼運作的呢?

圖片
  短期來看，在撰寫網站程式碼時，這些理論並不是非懂不可，但在之後，了解這些背後原理，對你會很有幫助。 網頁know-how : 用戶端與伺服器端 用戶端 是網路用戶的典型上網設備（像是連到 Wi-Fi 的電腦、或是連到手機網路的手機），這些設備通常有能夠上網的軟體（通常是 Firefox 或 Chrome 之類的瀏覽器）。 伺服器端 是放著網頁、網站、或著 app 的電腦。當用戶端設備要訪問網頁時，網頁的副本會從伺服器下載到用戶端，以便顯示在用戶的瀏覽器。 IP位址 為Internet Protocol Address的縮寫，中文被稱為網際協議位址。 是一種在Internet上的給主機編址的方式。  IP位址可以說是網頁伺服器的門牌 讓系統可以透過這個號碼找到正確的網頁伺服器在哪裡。 DNS Domain Name System的縮寫，中文又稱領域名稱解析系統。 是網際網路的一項的服務，是個可將網址和IP位址相互對應的資料庫，能夠使人更方便的存取網際網路。( 不用記長長一串的數字啦！ ) 伺服器 伺服器作為硬體來說，通常是指那些具有較高計算能力，能夠提供給多個使用者使用的電腦。伺服器與PC機的不同點太多了，例如PC機在一個時刻通常只為一個使用者服務。伺服器與主機不同，主機是透過終端給使用者使用的，伺服器是透過網路給用戶端使用者使用的。 而近期 雲端伺服器 越來越盛行,常見的雲端服務有 AWS , GCP , AZURE 等.... , 雲端伺服器擁有非常多的服務, 可以節省開發時間 , 直接使用服務(但通常都不便宜...) 、擁有高擴展的硬體資源, 隨時調整你的硬體資源、安全性高等等.... , 想必之後會成為伺服器的主流 網頁伺服器 又叫做 Web Server 。 Apache是接洽的服務員負責將網頁畫面傳遞給瀏覽器，只要網頁中有需要資料的部分Apache就會向DB索取資料後一起交給瀏覽器。 DB(Data Base)就是存放資料的地方。 web server 的種類有： apache、nginx、iis apache 和nginx的差別在於nginx可能速度會比較快，用的資源少。 iis是微軟做的，如果是寫 asp.net  就可用這套iis但環境就是要在window server上。 瀏覽器輸入網址的流程 :...
閱讀完整內容