者：lucida

鏈接：http://lucida.me/blog/sublime-text-complete-guide/

# 摘要（Abstract）

本文系統全面的介紹了 Sublime Text，旨在成為最優秀的 Sublime Text 中文教程。

# 更新記錄

1.2014/09/27：完成初稿

2.2014/09/28：

更正打開控制臺的快捷鍵為 Ctrl + `

更正全局替換的快捷鍵為 Ctrl + Alt + Enter

3.2016/09/15：作者已全面轉向 Visual Studio Code

# 前言（Prologue）

Sublime Text 是一款跨平臺代碼編輯器（Code Editor），從最初的 Sublime Text 1.0，到現在的 Sublime Text 3.0，Sublime Text 從一個不知名的編輯器演變到現在幾乎是各平臺首選的 GUI 編輯器。而這樣優秀的編輯器卻沒有一個靠譜的中文教程，所以我試圖通過本文彌補這個缺陷。

# 編輯器的選擇（Editor Choices）

從初學編程到現在，我用過的編輯器有 EditPlus、UltraEdit、Notepad++、Vim、TextMate 和 Sublime Text，如果讓我從中推薦，我會毫不猶豫的推薦 Vim 和 Sublime Text，原因有下面幾點：

1.跨平臺：Vim 和 Sublime Text 均為跨平臺編輯器（在 Linux、OS X 和 Windows 下均可使用）。作為一個程序員，切換系統是常有的事情，為了減少重復學習，使用一個跨平臺的編輯器是很有必要的。

2.可擴展：Vim 和 Sublime Text 都是可擴展的（Extensible），并包含大量實用插件，我們可以通過安裝自己領域的插件來成倍提高工作效率。

3.互補：Vim 和 Sublime Text 分別是命令行環境（CLI）和圖形界面環境（GUI）下的最佳選擇，同時使用兩者會大大提高工作效率。

# 個人背景（Personal Background）

我是一名非常典型的程序員：平時工作主要在 Linux 環境下使用 Java 和 Python，偶爾會用 HTML+CSS+JavaScript 編寫網頁；業余時會在 Windows 環境編寫一些 C# 程序（包括控制臺程序（Console Application）和移動應用（Mobile App），也會玩一些非主流語言（比如 Haskell，ML 和 Ruby 等）以拓展見識。

所以這篇文章會我的個人工作內容為主要使用場景（Scenario），盡管無法覆蓋到所有的使用場景，但我認為依然可以覆蓋到絕大部分，如果您認為我遺漏了什么內容，請在文章下面回復，我會盡量更新。

# 本文風格（Writing Style）

受益于 K&R C 的寫作風格，我傾向于以實際案例來講解 Sublime Text 的功能，所以本文中的例子均源于我在實際開發時遇到的問題。

此外，把本文會使用大量動畫（GIF）演示 Sublime Text 的編輯功能，因為我發現圖片難以演示完整的編輯流程（Workflow），而視頻又過于重量級。本文的GIF動畫均使用 ScreenToGif 進行錄制。

# 編輯器（Editor） vs 集成開發環境（Integrated Development Environment，下文簡稱 IDE）

我經常看到一些程序員拿編輯器和 IDE 進行比較，諸如 Vim 比 Eclipse 強大或是 Visual Studio 太慢不如 Notepad++ 好使之類的討論比比皆是，個人認為這些討論沒有意義，因為編輯器和 IDE 根本是面向兩種不同使用場景的工具：

1.編輯器面向無語義的純文本，不涉及領域邏輯，因此速度快體積小，適合編寫單獨的配置文件和動態語言腳本（Shell、Python 和 Ruby 等）。

2.IDE 面向有語義的代碼，會涉及到大量領域邏輯，因此速度偏慢體積龐大，適合編寫靜態語言項目（Java、C++ 和 C# 等）。

我認為應當使用正確的工具去做有價值的事情，并把效率最大化，所以我會用 Eclipse 編寫 Java 項目，用 Vim 編寫Shell，用 Sublime Text 編寫 JavaScript/HTML/Python，用 Visual Studio 編寫C#。

前言到此結束，下面進入正題。

# 安裝（Installation）

Sublime Text 官方網站 提供了 Sublime Text 各系統各版本的下載，目前Sublime Text 的最新版本是 Sublime Text 3。這里以 Windows 版本的 Sublime Text 安裝為例。

注意在安裝時勾選 Add to explorer context menu，這樣在右鍵單擊文件時就可以直接使用 Sublime Text 打開。

# 添加 Sublime Text 到環境變量

使用 Win + R 運行 sysdm.cpl 打開 “系統屬性”。

然后在 “高級” 選項卡里選擇 “環境變量”，編輯 “Path”，增加 Sublime Text 的安裝目錄（例如 D:\Program Files\Sublime Text 3）。

接下來你就可以在命令行里面利用 subl 命令直接使用 Sublime Text 了：

subl file    :: 使用 Sublime Text 打開 file 文件
subl folder  :: 使用 Sublime Text 打開 folder 文件夾
subl .       :: 使用 Sublime Text 當前文件夾

# 安裝 Package Control

前文提到 Sublime Text 支持大量插件，如何找到并管理這些插件就成了一個問題，Package Control 正是為了解決這個問題而出現的，利用它我們可以很方便的瀏覽、安裝和卸載 Sublime Text 中的插件。

進入 Package Control 的 官網，里面有詳細的 安裝教程。Package Control 支持 Sublime Text 2 和 3，本文只給出 3 的安裝流程：

1.使用 Ctrl + ` 打開 Sublime Text 控制臺。

2.將下面的代碼粘貼到控制臺里：

import?urllib.request,os,hashlib;?h?=?'7183a2d3e96f11eeadd761d777e62404'?+?'e330c659d4bb41d3bdf022e94cab3cd0';?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://sublime.wbond.net/'?+?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)

3.等待 Package Control 安裝完成。之后使用 Ctrl + Shift + P 打開命令板，輸入 PC 應出現 Package Control：

成功安裝 Package Control 之后，我們就可以方便的安裝使用 Sublime Text 的各種插件：

# 購買（Purchase）

Sublime Text 是一個收費閉源軟件，這在一定程度上成為了我支持 Sublime Text 的理由（我心中的軟件靠譜程度：免費開源 << 免費閉源 < 收費開源 < 收費閉源）：在 這里 購買。

不過不購買 Sublime Text 也可以 “正常” 使用它，只是 Sublime Text 會時不時的彈出一個對話框提醒你購買，此外窗口處會有一個很屌絲很 low 逼的 (UNREGISTERED)。（在高頻操作下，一般 20 分鐘提示一次，個人認為算是很厚道了）

也許不少人會覺著 Sublime Text 70 刀的價格太貴，但相比它的功能和帶來的效率提升，70 刀真的不值一提，如果你不方便使用 Paypal 付款可以郵件聯系我，你支付寶給我打款然后我幫你付款，價格按當日匯率折算（450 元左右）。

概覽（Tour）

# 基本概念（Basic Concepts）

Sublime Text 的界面如下：

1.標簽（Tab）：無需介紹。

2.編輯區（Editing Area）：無需介紹。

3.側欄（Side Bar）：包含當前打開的文件以及文件夾視圖。

4.縮略圖（Minimap）：如其名。

5.命令板（Command Palette）：Sublime Text 的操作中心，它使得我們基本可以脫離鼠標和菜單欄進行操作。

6.控制臺（Console）：使用 Ctrl + ` 調出，它既是一個標準的 Python REPL，也可以直接對 Sublime Text 進行配置。

7.狀態欄（Status Bar）：顯示當前行號、當前語言和Tab格式等信息。

# 配置（Settings）

與其他 GUI 環境下的編輯器不同，Sublime Text 并沒有一個專門的配置界面，與之相反，Sublime Text 使用 JSON 配置文件，例如：

{  
  "font_size": 12,  
    "highlight_line": true,
}

會將默認字體大小調整為 12，并高亮當前行。

JSON 配置文件的引入簡化了 Sublime Text 的界面，但也使得配置變的復雜，一般我會到 這里 查看可用的 Sublime Text 配置。

# 編輯（Editing）

Sublime Text 的編輯十分人性化——它不像 Vim 那樣反人類（盡管我也用 Vim 但我還是要說 Vim 的快捷鍵設定絕壁連代謝產物都不如），少量的快捷鍵就可以完成絕大多數編輯任務。

# 基本編輯（Basic Editing）

↑↓←→ 就是 ↑↓←→，不是 KJHL，（沒錯我就是在吐槽 Vim，尼瑪設成 WSAD 也比這個強啊），粘貼剪切復制均和系統一致。

Ctrl + Enter 在當前行下面新增一行然后跳至該行；Ctrl + Shift + Enter 在當前行上面增加一行并跳至該行。

Ctrl + ←/→ 進行逐詞移動，相應的，Ctrl + Shift + ←/→ 進行逐詞選擇。

Ctrl + ↑/↓ 移動當前顯示區域，Ctrl + Shift + ↑/↓ 移動當前行。

# 選擇（Selecting）

Sublime Text 的一大亮點是支持多重選擇——同時選擇多個區域，然后同時進行編輯。

Ctrl + D 選擇當前光標所在的詞并高亮該詞所有出現的位置，再次 Ctrl + D 選擇該詞出現的下一個位置，在多重選詞的過程中，使用 Ctrl + K 進行跳過，使用 Ctrl + U 進行回退，使用 Esc 退出多重編輯。

多重選詞的一大應用場景就是重命名——從而使得代碼更加整潔。盡管 Sublime Text 無法像 IDE（例如 Eclipse）那樣進行自動重命名，但我們可以通過多重選詞+多重編輯進行直觀且便捷的重命名：

有時我們需要對一片區域的所有行進行同時編輯，Ctrl + Shift + L 可以將當前選中區域打散，然后進行同時編輯：

有打散自然就有合并，Ctrl + J 可以把當前選中區域合并為一行：

# 查找&替換（Finding&Replacing）

Sublime Text 提供了強大的查找（和替換）功能，為了提供一個清晰的介紹，我將 Sublime Text 的查找功能分為 快速查找、標準查找 和 多文件查找 三種類型。

# 快速查找&替換

多數情況下，我們需要查找文中某個關鍵字出現的其它位置，這時并不需要重新將該關鍵字重新輸入一遍然后搜索，我們只需要使用 Shift + ←/→ 或 Ctrl + D 選中關鍵字，然后 F3 跳到其下一個出現位置， Shift + F3 跳到其上一個出現位置，此外還可以用 Alt + F3 選中其出現的所有位置（之后可以進行多重編輯，也就是快速替換）。

# 標準查找&替換

另一種常見的使用場景是搜索某個已知但不在當前顯示區域的關鍵字，這時可以使用 Ctrl + F 調出搜索框進行搜索：

以及使用 Ctrl + H 進行替換：

# 關鍵字查找&替換

對于普通用戶來說，常規的關鍵字搜索就可以滿足其需求：在搜索框輸入關鍵字后 Enter 跳至關鍵字當前光標的下一個位置， Shift + Enter 跳至上一個位置， Alt + Enter 選中其出現的所有位置（同樣的，接下來可以進行快速替換）。

Sublime Text 的查找有不同的模式：Alt + C 切換大小寫敏感（Case-sensitive）模式， Alt + W 切換整字匹配（Whole matching）模式，除此之外Sublime Text還支持在選中范圍內搜索（Search in selection），這個功能沒有對應的快捷鍵，但可以通過以下配置項自動開啟。

"auto_find_in_selection": true

這樣之后在選中文本的狀態下范圍內搜索就會自動開啟，配合這個功能，局部重命名（Local Renaming）變的非常方便：

使用 Ctrl + H 進行標準替換，輸入替換內容后，使用 Ctrl + Shift + H 替換當前關鍵字， Ctrl + Alt + Enter 替換所有匹配關鍵字。

# 正則表達式查找&替換

正則表達式 是非常強大的文本查找&替換工具，Sublime Text中使用 Alt + R 切換正則匹配模式的開啟/關閉。Sublime Text的使用Boost里的Perl正則表達式風格。

出于篇幅原因，本文不會對正則表達式進行詳細介紹，Mastering Regex（中譯本：精通正則表達式）對正則表達式的原理和各語言下的使用進行了詳細介紹。此外網上有大量正則表達式的優秀教程（“正則表達式30分鐘入門教程” 和 MSDN正則表達式教程.aspx)），以及在線測試工具（regexpal 和 regexer）。

# 多文件搜索&替換

使用 Ctrl + Shift + F 開啟多文件搜索&替換（注意此快捷鍵和搜狗輸入法的簡繁切換快捷鍵有沖突）：

多文件搜索&替換默認在當前打開的文件和文件夾進行搜索/替換，我們也可以指定文件/文件夾進行搜索/替換。

# 跳轉（Jumping）

Sublime Text 提供了強大的跳轉功能使得我們可以在不同的文件/方法/函數中無縫切換。就我的使用經驗而言，目前還沒有哪一款編輯器可以在這個方面超越Sublime Text。

# 跳轉到文件

Ctrl + P 會列出當前打開的文件（或者是當前文件夾的文件），輸入文件名然后 Enter 跳轉至該文件。

需要注意的是，Sublime Text使用模糊字符串匹配（Fuzzy String Matching），這也就意味著你可以通過文件名的前綴、首字母或是某部分進行匹配：例如， EIS 、 Eclip 和 Stupid 都可以匹配 EclipseIsStupid.java 。

# 跳轉到符號

盡管是一個文本編輯器，Sublime Text 能夠對代碼符號進行一定程度的索引。Ctrl + R 會列出當前文件中的符號（例如類名和函數名，但無法深入到變量名），輸入符號名稱 Enter 即可以跳轉到該處。

此外，還可以使用 F12 快速跳轉到當前光標所在符號的定義處（Jump to Definition）。

比較有意思的是，對于 Markdown， Ctrl + R 會列出其大綱，非常實用。

# 跳轉到某行

Ctrl + G 然后輸入行號以跳轉到指定行：

# 組合跳轉

在 Ctrl + P 匹配到文件后，我們可以進行后續輸入以跳轉到更精確的位置：

1.@ 符號跳轉：輸入 @symbol 跳轉到 symbol 符號所在的位置

2.# 關鍵字跳轉：輸入 #keyword 跳轉到 keyword 所在的位置

3.: 行號跳轉：輸入 :12 跳轉到文件的第12行。

所以 Sublime Text 把 Ctrl + P 稱之為 “Go To Anything”，這個功能如此好用，以至于我認為沒有其它編輯器能夠超越它。

# 中文輸入法的問題

從 Sublime Text 的初版（1.0）到現在（3.0 3065），中文輸入法（包括日文輸入法）都有一個問題：輸入框不跟隨。

目前官方還沒有修復這個 bug，解決方法是安裝 IMESupport 插件，之后重啟 Sublime Text 問題就解決了。

# 文件夾（Folders）

Sublime Text 支持以文件夾做為單位進行編輯，這在編輯一個文件夾下的代碼時尤其有用。在 File 下 Open Folder ：

你會發現右邊多了一個側欄，這個側欄列出了當前打開的文件和文件夾的文件，使用 Ctrl + K, Ctrl + B 顯示或隱藏側欄，使用 Ctrl + P 快速跳轉到文件夾里的文件。

# 窗口&標簽（Windows & Tabs）

Sublime Text 是一個多窗口多標簽編輯器：我們既可以開多個Sublime Text窗口，也可以在一個Sublime Text窗口內開多個標簽。

# 窗口（Window）

使用 Ctrl + Shift + N 創建一個新窗口（該快捷鍵再次和搜狗輸入法快捷鍵沖突，個人建議禁用所有搜狗輸入法快捷鍵）。

當窗口內沒有標簽時，使用 Ctrl + W 關閉該窗口。

# 標簽（Tab）

使用 Ctrl + N 在當前窗口創建一個新標簽， Ctrl + W 關閉當前標簽， Ctrl + Shift + T 恢復剛剛關閉的標簽。

編輯代碼時我們經常會開多個窗口，所以分屏很重要。Alt + Shift + 2 進行左右分屏， Alt + Shift + 8 進行上下分屏， Alt + Shift + 5 進行上下左右分屏（即分為四屏）。

分屏之后，使用 Ctrl + 數字鍵 跳轉到指定屏，使用 Ctrl + Shift + 數字鍵 將當前屏移動到指定屏。例如， Ctrl + 1 會跳轉到1屏，而 Ctrl + Shift + 2 會將當前屏移動到2屏。

# 全屏（Full Screen）

Sublime Text 有兩種全屏模式：普通全屏和無干擾全屏。

個人強烈建議在開啟全屏前關閉菜單欄（Toggle Menu），否則全屏效果會大打折扣。

F11 切換普通全屏：

Shift + F11 切換無干擾全屏：

# 風格（Styles）

風格對于任何軟件都很重要，對編輯器也是如此，尤其是GUI環境下的編輯器。作為一個程序員，我希望我的編輯器足夠簡潔且足夠個性。

Notepad++ 默認界面

Sublime Text 默認界面

所以在用過 Sublime Text 之后，我立刻就卸掉了 Notepad++。

Sublime Text 自帶的風格是我喜歡的深色風格（也可以調成淺色），默認主題是Monokai Bright，這兩者的搭配已經很不錯了，不過我們還可以做得更好：接下來我將會展示如何通過設置偏好項和添加自定義風格/主題使得 Sublime Text 更加 Stylish。

# 一些設置（Miscellaneous Settings）

下面是我個人使用的設置項。

設置之后的效果如下：

# 主題（Themes）

Sublime Text 有大量第三方主題：[https://sublime.wbond.net/browse/labels/theme]，這里我給出幾個個人感覺不錯的主題：

Soda Light

Soda Dark

Nexus

Flatland

Spacegray Light

Spacegray Dark

# 配色（Color）

colorsublime 包含了大量 Sublime Text 配色方案，并支持在線預覽，配色方案的安裝教程在 這里，恕不贅述。

我個人使用的是 Nexus 主題和 Flatland Dark 配色，配置如下：

"theme": "Nexus.sublime-theme","
color_scheme": "Packages/Theme - Flatland/Flatland Dark.tmTheme",

效果如下：

# 編碼（Coding）

優秀的編輯器使編碼變的更加容易，所以 Sublime Text 提供了一系列功能以提高開發效率。

# 良好實踐（Good Practices）

良好的代碼應該是規范的，所以Google為每一門主流語言都設置了其代碼規范（Code Style Guideline）。我自己通過下面的設置使以規范化自己的代碼。

# 代碼段（Code Snippets）

Sublime Text 支持代碼段（Code Snippet），輸入代碼段名稱后 Tab 即可生成代碼段。

你可以通過Package Control安裝第三方代碼段，也可以自己創建代碼段，參考這里。

# 格式化（Formatting）

Sublime Text 基本的手動格式化操作包括：Ctrl + [ 向左縮進， Ctrl + ] 向右縮進，此外 Ctrl + Shift + V 可以以當前縮進粘貼代碼（非常實用）。

除了手動格式化，我們也可以通過安裝插件實現自動縮進和智能對齊：

1.HTMLBeautify：格式化HTML。

2.AutoPEP8：格式化Python代碼。

3.Alignment：進行智能對齊。

# 自動完成（Auto Completion）

Sublime Text 支持一定的自動完成，按 Tab 自動補全。

# 括號（Brackets）

編寫代碼時會碰到大量的括號，利用 Ctrl + M 可以快速的在起始括號和結尾括號間切換， Ctrl + Shift + M 則可以快速選擇括號間的內容，對于縮進型語言（例如Python）則可以使用 Ctrl + Shift + J 。

此外，我使用 BracketHighlighter 插件以高亮顯示配對括號以及當前光標所在區域，效果如下：

# 命令行（Command Line）

盡管提供了 Python 控制臺，但 Sublime Text 的控制臺僅支持單行輸入，十分不方便，所以我使用 SublimeREPL 以進行一些編碼實驗（Experiments）。

# 其它（Miscellaneous）

盡管我試圖在本文包含盡可能多的 Sublime Text 實用技能，但受限于篇幅和我的個人經驗，本文仍不免有所遺漏，歡迎在評論里指出本文的錯誤及遺漏。

下面是一些可能有用但我很少用到的功能：

1.宏（Macro）：Sublime Text 支持錄制宏，但我在實際工作中并未發現宏有多大用處。

2.其它平臺（Other Platforms）：本文只介紹了 Windows 平臺上 Sublime Text 的使用，不過 Linux 和 OS X 上Sublime Text的使用方式和Windows差別不大，只是在快捷鍵上有所差異，請參考 Windows/Linux快捷鍵 和 OS X 快捷鍵。

3.項目（Projects）：Sublime Text支持簡單的 項目管理，但我一般只用到文件夾。

4.Vim模式（Vintage）：Sublime Text自帶 Vim模式。

5.構建（Build）：通過配置，Sublime Text可以進行 源碼構建。

6.調試（Debug）：通過安裝 插件，Sublime Text 可以對代碼進行調試。

# 快捷鍵列表（Shortcuts Cheatsheet）

我把本文出現的Sublime Text按其類型整理在這里，以便查閱。

通用（General）

1.↑↓←→：上下左右移動光標，注意不是不是 KJHL ！

2.Alt：調出菜單

3.Ctrl + Shift + P：調出命令板（Command Palette）

4.Ctrl + ` ：調出控制臺

# 編輯（Editing）

1.Ctrl + Enter：在當前行下面新增一行然后跳至該行

2.Ctrl + Shift + Enter：在當前行上面增加一行并跳至該行

3.Ctrl + ←/→：進行逐詞移動

4.Ctrl + Shift + ←/→進行逐詞選擇

5.Ctrl + ↑/↓移動當前顯示區域

6.Ctrl + Shift + ↑/↓移動當前行

#選擇（Selecting）

1.Ctrl + D：選擇當前光標所在的詞并高亮該詞所有出現的位置，再次 Ctrl + D 選擇該詞出現的下一個位置，在多重選詞的過程中，使用 Ctrl + K 進行跳過，使用 Ctrl + U 進行回退，使用 Esc 退出多重編輯

2.Ctrl + Shift + L：將當前選中區域打散

3.Ctrl + J：把當前選中區域合并為一行

4.Ctrl + M：在起始括號和結尾括號間切換

5.Ctrl + Shift + M：快速選擇括號間的內容

6.Ctrl + Shift + J：快速選擇同縮進的內容

7.Ctrl + Shift + Space：快速選擇當前作用域（Scope）的內容

# 查找&替換（Finding&Replacing）

1.F3：跳至當前關鍵字下一個位置

2.Shift + F3：跳到當前關鍵字上一個位置

3.Alt + F3：選中當前關鍵字出現的所有位置

4.Ctrl + F/H：進行標準查找/替換，之后：

5.Alt + C：切換大小寫敏感（Case-sensitive）模式

6.Alt + W：切換整字匹配（Whole matching）模式

7.Alt + R：切換正則匹配（Regex matching）模式

8.Ctrl + Shift + H：替換當前關鍵字

9.Ctrl + Alt + Enter：替換所有關鍵字匹配

10.Ctrl + Shift + F：多文件搜索&替換

# 跳轉（Jumping）

1.Ctrl + P：跳轉到指定文件，輸入文件名后可以：

2.@ 符號跳轉：輸入 @symbol 跳轉到 symbol 符號所在的位置

3.# 關鍵字跳轉：輸入 #keyword 跳轉到 keyword 所在的位置

4.: 行號跳轉：輸入 :12 跳轉到文件的第12行。

5.Ctrl + R：跳轉到指定符號

6.Ctrl + G：跳轉到指定行號

# 窗口（Window）

1.Ctrl + Shift + N：創建一個新窗口

2.Ctrl + N：在當前窗口創建一個新標簽

3.Ctrl + W：關閉當前標簽，當窗口內沒有標簽時會關閉該窗口

4.Ctrl + Shift + T：恢復剛剛關閉的標簽

# 屏幕（Screen）

1.F11：切換普通全屏

2.Shift + F11：切換無干擾全屏

3.Alt + Shift + 2：進行左右分屏

4.Alt + Shift + 8：進行上下分屏

5.Alt + Shift + 5：進行上下左右分屏

6.分屏之后，使用 Ctrl + 數字鍵 跳轉到指定屏，使用 Ctrl + Shift + 數字鍵 將當前屏移動到指定屏

　用HTML怎么制作網頁呢?靜態網站的編寫主要是用HTML DIV+CSS JS等來完成頁面的排版設計 ? ,常用的網頁設計軟件有Dreamweaver、EditPlus、HBuilderX、VScode 、Webstorm、Animate等等，用的最多的還是DW，當然不同軟件寫出的前端Html5代碼都是一致的。

　　一、網站布局方面：計劃采用目前主流的、能兼容各大主流瀏覽器、顯示效果穩定的浮動網頁布局結構。

　　二、網站程序方面：計劃采用最新的網頁編程語言HTML5+CSS3+JS程序語言完成網站的功能設計。并確保網站代碼兼容目前市面上所有的主流瀏覽器，已達到打開后就能即時看到網站的效果。

　　三、網站素材方面：計劃收集各大平臺好看的圖片素材，并精挑細選適合網頁風格的圖片，然后使用PS做出適合網頁尺寸的圖片。

　　四、網站文件方面：網站系統文件種類包含：html網頁結構文件、css網頁樣式文件、js網頁特效文件、images網頁圖片文件;

　　五、網頁編輯方面：網頁作品代碼簡單，可使用任意HTML編輯軟件(如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html編輯軟件進行運行及修改編輯等操作)。 其中： (1) html文件包含：其中index.html是首頁、其他html為二級頁面; (2) css文件包含：css全部頁面樣式,文字滾動, 圖片放大等; (3) js文件包含：js實現動態輪播特效, 表單提交, 點擊事件等等(個別網頁中運用到js代碼)。