如何使用 Sublime 來建立 HTML 文件 跳到主要內容

如何使用 Sublime 來建立 HTML 文件

 

▲開新檔案


如何開始第一份文件

剛入門的新手大多不知道如何開始使用 Sublime 的各項功能，網路爬了許多文章還是不知道出了什麼問題，這邊來向大家做個簡單的教學。

首先第一步是先點擊左下選項，選擇 HTML 來開始使用（這個步驟非常地重要），如果是要撰寫其他不同語言的程式也可以在這邊來做選擇。


▲選擇所要撰寫的程式語言


這邊要注意一下，如果沒正確的選擇文件語言，是會造成 Emmet 不會正常運作的。



▲使用快捷來建立文件

輸入 ! + tab鍵插件就會自動地載入 HTML5 文件標準格式。


▲快速建立內容

這時候就可以開始撰寫想要寫的網頁內容了！


這邊注意一下，如果 Emmet 沒有正常運作的話，可以到 Plugins 裡面檢查插件是否有正常安裝，首先一樣開啟 Command + Shift + P 尋找 PackageControl 中去找 Package List 。


▲檢查插件是否有正確安裝






標籤：

留言

張貼留言

這個網誌中的熱門文章

如何在網頁中加入一個回到頂端的按鈕

網頁Top按鈕 (網頁回到頂端)
張貼留言
閱讀完整內容

HTML前端學習的第一步

一個好的編輯器能幫助我們輕鬆地進行學習程式撰寫 大部分剛接觸電腦程式的人，會對編輯器產生一些疑問，下面來帶大家一步步認識 什麼是編輯器？ 電腦儲存文字的方式是透過文字編碼的方式，用位元來表示文字。而如果一個檔案是以文字編碼的形式儲存的，稱為文字檔。  在我們的電腦裡面，檔案被分為兩大部分： 文字檔：以文字編碼的形式儲存 二進位檔：其他編碼形式儲存 而文字編輯器，顧名思義就是用來讓我們輸入文字可以進行編輯的應用程式，Word、記事本、Pages…等或是線上的 Google Docs 都可以算是文字編輯器。 為什麼要用編輯器？ Microsoft 的 Front Page 和 Adobe Dreamweaver 都是非常快速且容易入門的軟體，但是遇到複雜結構的HTML時，設計頁面往往都不是很正確的顯示，最重要的一點是這兩款都是付費的軟體，公司不見得都會提供使用。 我過去個人的經驗是使用  Dreamweaver 來製作 wireframe ，當時不算是做正式的網頁，只是快速的製作與RD溝通的介面來討論後台介面，而  Dreamweaver 在對應一些簡單的畫面時是蠻方便的，可以快速的選取以及修改，但當頁面越來越多層的時候畫面就開始不明原因的跑掉，後面都是直接開html使用瀏覽器來做確認，這樣的情況下軟體就沒什麼使用價值了。 而近年來的編輯器除了撰寫 HTML 以及 CSS 之外，也提供了非常多的插件供不同的語法使用，非常方便。 編輯器選擇 編輯器種類其實蠻多的，包括常見的  Visual Studio Code 、  Notepad++ 、   Brackets 、 Sublime  等等，  Survery的過程中，我首先選澤了 Sublime 作為第一次學習接觸的工具，最後選擇  Sublime 的原因其實也蠻簡單的，就只是買的線上課程講師使用這個編輯器XD，不過當然也是想使用看看來做比較，後續應該也會嘗試著使用  Visual Studio Code 以 及  Brackets 來做比較。 Sublime 官網下載點 https://www.sublimetext.com/3 ▲Sublime官網 另外其實也有蠻多線上編輯器可以選擇，我個人是推薦...
張貼留言
閱讀完整內容

Sublime編輯器環境安裝教學

  環境安裝 安裝好 Sublime 之後，在未安裝 P lugins  之前 Sublime 與一般文字編輯器沒有其他差別，然而 安裝 plugins 之前，我們必須先安裝 PackageControl 這個插件，這個插件可以快速地下載以及管理所有其他的插件。 ▲未安裝 Plugings  第一步：安裝PackageControl 本文採用 mac OS 來作為我們說明的系統環境，首先我們在編輯器上使用快捷鍵 Command + Shift + P 可以叫出選項。 Open the command palette Win/Linux:  ctrl+shift+p , Mac:  cmd+shift+p Type  Install Package Control , press  enter 補充說明一下這是 Sublime text3 最新版的安裝方式，網路上有很多舊的文章還是 text2 版本須貼上語法的方式。 ▲開啟介面  ▲輸入 PackageControl 並點擊 Install Package 第二步：安裝必要插件 待安裝完畢後，會看到跳到下方這個畫面，此時就可以來安裝各種 Plugins。還記得上一篇： HTML前端學習的第一步  中有提到在 PackageControl官網  中的 popular中可以看到目前最常被下載使用到的插件。 首先我們來看看有哪些推薦的插件： 1.Emmet 功能：編碼快捷鍵，可以快速完成編碼，實用性非常高。 說明頁面： https://packagecontrol.io/packages/Emmet ▲輸入 Emmet 並點擊安裝 ▲Emmet功能展示 2.AutoFileName 功能：快速自動輸入文件名稱。 說明頁面： https://packagecontrol.io/packages/AutoFileName ▲AutoFileName功能展示 3.ConvertToUTF8 功能：文件自動轉碼成UTF-8。 說明頁面： https://packagecontrol.io/packages/ConvertToUTF8 4.JQuery 功能：JQuery函數提示。 說明頁面： https://packagecontro...
張貼留言
閱讀完整內容