files/zh-tw/learn/getting_started_with_the_web/installing_basic_software/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73

---
title: 安裝基本軟體
slug: Learn/Getting_started_with_the_web/Installing_basic_software
translation_of: Learn/Getting_started_with_the_web/Installing_basic_software
---
<div>{{LearnSidebar}}</div>

<div>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</div>

<div class="summary">
<p>在本文中，你會知道有哪些 Web 開發的簡易工具，以及正確的安裝方式。</p>
</div>

<h2 id="專家都用哪些工具？">專家都用哪些工具？</h2>

<ul>
 <li><strong>電腦</strong>，這東西對某些人來說再合理不過了，但可能有人用自己的手機，或在圖書館電腦上讀這篇文章。若要真正著手開發 Web，最好還是弄一台桌電或筆電（Windows、Mac、Linux 都行）。</li>

 <li><strong>文字編輯器</strong>，用來寫程式碼。可以是文字編輯器（如 <a href="https://code.visualstudio.com/">Visual Studio Code</a>、<a href="https://notepad-plus-plus.org/">Notepad++</a>、<a href="https://www.sublimetext.com/">Sublime Text</a>、<a href="https://atom.io/">Atom</a>、<a href="https://www.gnu.org/software/emacs/">GNU Emacs</a>、<a href="https://www.vim.org/">VIM</a>）、也可以是混合式編輯器（如 <a href="https://www.adobe.com/products/dreamweaver.html">Dreamweaver</a> 或 <a href="https://www.jetbrains.com/webstorm/">WebStorm</a>）。辦公室軟體的文件編輯器並不適合，因為它們依賴許多會干擾瀏覽器排版引擎的隱藏元素。</li>
 <li><strong>Web 瀏覽器</strong>，可測試寫好的程式碼。目前最常用的瀏覽器有 <a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="http://windows.microsoft.com/zh-tw/internet-explorer/download-ie">Internet Explorer</a> 與 <a href="https://www.microsoft.com/zh-tw/windows/microsoft-edge">Micrososft Edge</a>。你也可以測試自己網站在行動裝置上呈現的效果，若目標讀者分佈甚廣，你可能必須用舊版瀏覽器（如 IE 6–8）測試。</li>
 <li><strong>圖像編輯器</strong>，如 <a href="http://www.gimp.org/">GIMP</a>、<a href="http://www.getpaint.net/">Paint.NET</a>、<a href="https://www.adobe.com/products/photoshop.html">Photoshop</a> 都可用來為自己的網站添增圖案。</li>

 <li><strong>版本控制系統</strong>，可讓團隊用以協作某個專案、分享程式碼與外部檔案，更可避免編輯作業發生衝突、還可以管理伺服器的檔案。目前 <a href="http://git-scm.com/">Git</a> 是最常見的版本控制工具；<a href="https://github.com/">GitHub</a> 與 <a href="https://gitlab.com">GitLab</a> 則是最常用的程式碼分享服務。</li>
 <li><strong>FTP 程式</strong>，可將網頁上傳至比較老的網路託管伺服器，以利使用者檢視──前述的 <a href="http://git-scm.com/">Git</a> 近年來漸漸取代了 FTP──可用的 (S)FTP 程式有 <a href="https://cyberduck.io/">Cyberduck</a>、<a href="http://fetchsoftworks.com/">Fetch</a>、<a href="https://filezilla-project.org/">FileZilla</a>。</li>
 <li><strong>自動化系統，</strong>如 <a href="http://gruntjs.com/">Grunt</a> 或 <a href="http://gulpjs.com/">Gulp</a> 可自動執行重複性的作業，例如縮減程式碼並執行測試作業。</li>
 <li>範本、函式庫、框架......等等，都能加速寫出一般功能。</li>
 <li>及其他更多工具！</li>
</ul>

<h2 id="我實際需要、立刻需要哪些工具？">我實際需要、立刻需要哪些工具？</h2>

<p>上面一長串看起來好像很嚇人，但其實剛接觸 Web 開發時，不需了解所有的東西。我們先幫你設定最低限度的必要工具：文字編輯器和幾款主流瀏覽器。</p>

<h3 id="安裝文字編輯器">安裝文字編輯器</h3>

<p>你的電腦裡很可能已經提供基本的文字編輯器了。Windows 本身就有 <a href="https://zh.wikipedia.org/wiki/記事本">記事本</a>；OS X 已提供 <a href="https://zh.wikipedia.org/wiki/文字編輯 (應用程式)">文字編輯</a>；Linux 各版本不太一樣：例如 Ubuntu 就有 <a href="https://zh.wikipedia.org/wiki/Gedit">gedit</a>。</p>

<p>而針對 Web 開發，其實有著比 Notepad 或 TextEdit 好很多的工具。我們推薦使用 <a href="https://code.visualstudio.com/">Visual Studio Code</a>，因為這個自由編輯器有提供即時預覽、以及程式碼提示。</p>

<h3 id="安裝常用瀏覽器">安裝常用瀏覽器</h3>

<p>目前我們會安裝數款 Web 瀏覽器的桌面版，以利測試我們所寫的程式碼。先在下方找到自己所用的作業系統，再點擊你愛用的瀏覽器連結：</p>

<ul>
 <li>Linux：<a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://brave.com">Brave</a>。</li>
 <li>Windows：<a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="http://windows.microsoft.com/zh-TW/internet-explorer/download-ie">Internet Explorer</a>、<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Micrososft Edge</a>、<a href="https://brave.com">Brave</a>。（Edge 是 Windows 10 的預設瀏覽器；如果你用的是 Windows 8 或之後版本，可以安裝 IE 10 或更高版本；否則應安裝其他瀏覽器替代）</li>
 <li>macOS：<a href="https://www.mozilla.org/zh-TW/firefox/new/">Firefox</a>、<a href="https://www.google.com/chrome/browser/">Chrome</a>、<a href="http://www.opera.com/">Opera</a>、<a href="https://www.apple.com/safari/">Safari</a>、<a href="https://brave.com">Brave</a>。（Safari 是 iOS 與 OS X 的預設瀏覽器）</li>
</ul>

<p>在著手開發之前，應先安裝至少兩款瀏覽器以利後續測試。</p>

<div class="blockIndicator note">
<p>Internet Explorer 與當今的 web 不相容，可能會讓專案跑不動。</p>
</div>

<h3 id="安裝伺服器軟體">安裝伺服器軟體</h3>

<p>有些例子需要使用伺服器軟體。你可以在 <a href="/zh-TW/docs/Learn/Common_questions/set_up_a_local_testing_server">How do you set up a local testing server?</a> 找到作法。</p>

<p>{{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}}</p>

<h2 id="於本模塊">於本模塊</h2>

<ul>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Installing_basic_software">安裝基本軟體</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/What_will_your_website_look_like">你的網站看起來會是什麼樣子？</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Dealing_with_files">與各式各樣檔案打交道</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/HTML_basics">HTML 基本概念</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/CSS_basics">CSS 基本概念</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/JavaScript_basics">JavaScript 基本概念</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a></li>
 <li><a href="/zh-TW/Learn/Getting_started_with_the_web/How_the_Web_works">網站的運作方式</a></li>
</ul>