《Web前端工程師修煉之道（原書第4版）》——我需要購買些什麼

本節書摘來自華章社群《web前端工程師修煉之道（原書第4版）》一書中的我需要購買些什麼，作者jennifer niederst robbins，更多章節内容可以通路雲栖社群“華章社群”公衆号檢視

我需要購買些什麼

毫無疑問，專業的web設計師需要很多工具，包括硬體和軟體。我的學生最常問的一個問題是：“我需要購買些什麼呢?”我不能告訴你去買什麼，但是我可以介紹一下這個行業的典型工具。

雖然在這裡我列出的是最受歡迎的商業軟體，但是它們同時都有免費軟體和共享軟體，你可以下載下傳這些軟體（試試看cnet的網站download.com）。稍做一些努力，不必花很多錢，你就可以完全建立一個網站。

xml簡介

如果你經常接觸web設計，你肯定聽過xml（extensible markup language，擴充标記語言）。xml并不是一種特定語言，而是創造其他标記語言的一套強有力的規則。

舉一個簡單的例子，如果你要出版一套食譜，你可能就需要使用xml來建立一套自定義的标記語言，包括元素、和，這些元素是用來描述食譜檔案中資訊的類型。正确标注後，這些資訊就可以當做資料處理。事實上，xml已經成為應用程式之間分享資料的強有力的工具。盡管xml最初設計是用在web中，但是由于它的資料處理功能，它在web之外的領域也産生了巨大影響。越來越多的軟體，如microsoft office、adobe flash和apple itunes都開始在幕後使用xml檔案。

但是依然有很多種xml語言應用在web中。最流行的是xhtml，它是根據xml（在第10章會更多地介紹xhtml）的規則來重寫html得到的。還有一種語言是rss（really simple syndication或rdf site summary，簡易資訊集合），它可以把你的内容當做資料來共享，并且可以使用rss種子閱讀器閱讀；svg（scalable vector graphics，可伸縮矢量圖形）用标簽來描述幾何形狀，mathml是用來描述數學符号的。

作為一個web設計師，你最先接觸的xml可能就是用來創作檔案的xhtml，或者是添加在網站上的rss或svg圖像。開發新的xml語言是程式員或xml專家的職責。

裝置

為了有一個舒适的web開發環境，我建議使用如下裝備：

一台性能穩定的最新的計算機。作業系統可以是macintosh、windows或者linux。在專業的web開發公司，創意部門往往使用蘋果機。雖然最好使用性能非常好的電腦，但是組成網頁的檔案是非常小的，是以在電腦的配置上不必太奢侈。除非你需要編輯音頻和視訊，否則你完全沒必要擔心你的計算機配置不是最新和最強的。

額外的記憶體。由于你需要同時使用多個應用程式，是以你的計算機上最好有足夠的記憶體，這樣才能同時運作幾個對記憶體要求很高的程式。

大一些的顯示器。這個要求雖然不是必需的，但是高清顯示器看起來會舒服得多，尤其對于視覺設計師而言。（我見到過寫代碼的開發者在11寸的macbookair上幹得也不錯。）顯示器越多，你可以同時打開的視窗和控制台數就越多。在進行設計決策時，你也可以同時看到多個頁面。

如果你使用的是高清顯示器，那麼務必記住你是為用小的顯示器和低清晰度的使用者做設計的。

一台掃描器和/或一台數位相機。如果你要制作自己的圖像和文本，你就需要一些工具來建立它們。我知道有一個設計師有兩台掃描器：一台是性能好的掃描器，另一台一般的掃描器則隻用來掃描一些像死魚或者生鏽的平底鍋一樣的東西。

輔助計算機。很多web設計師發現，有一台使用不同平台的計算機做測試是非常有用的（例如，如果你使用mac設計，那麼就在pc機上測試）。由于mac作業系統的浏覽器和windows作業系統上的浏覽器工作原理不同，是以在盡可能多的環境測試是非常重要的，尤其要在windows作業系統上測試。如果你隻是居家工作的web設計愛好者，可以在你朋友的計算機上測試。mac使用者應該看看側欄的“在mac上運作windows”。

移動裝置。web已經進入移動時代了！這意味着在智能手機或平闆裝置的移動浏覽器上測試站點的外觀和性能絕對至關重要。你可能已經有了自己的智能手機。如果你的預算不足以購買多個平台的裝置，可以問問你的朋友看看是否可以花幾分鐘，用他們的裝置來檢視你的站點。我有一個web開發者朋友，他在當地的移動營運商商店來檢視他設計的網站（雖然你可能很快就會不受歡迎）

軟體

建立網頁的軟體應有盡有。在早期，隻有适用于列印機的軟體工具。但是今天，已經有很多工具是專門用來進行web設計的，進而使得web設計的效率大幅度提高。雖然無法列出每一個可用的軟體版本，但是我可以介紹最常用和行之有效的web設計工具。注意，你可以在公司首頁下載下傳這些程式的試用版本，将在本章側欄“看一看：流行的web設計軟體”中列出這些公司網站。

web創作

web創作工具類似于桌面出版工具，隻是它最終的産品是網頁（一個html檔案及其相關的檔案）。這些工具提供一種“所見即所得”的界面和捷徑，為你節省編寫html和css的大量時間。這些工具可以使你避免陷入html學習中。雖然即便最好的工具也無法生成與手動編寫一樣的幹淨、專業的html，但是如果你清楚要做什麼，使用它們可以加快進度。

下面是一些流行的web創作程式：

adobe dreamweaver。由于這個軟體的簡潔和進階性能，它已經成為行業标準。

microsoft expression web（隻限windows）。這是微軟專業設計工具套裝軟體的一部分，它的強項是标準相容代碼和基于css的布局。

nvu（linux、windows和mac os x）。不想購買一個所見即所得的編輯器麼？那麼你可以選擇nvu（叫做n-view，表示“new view”），這是一個開源工具，它實作了dreamweaver中的很多功能，可以免費從nvu.com下載下傳。

html編輯器

html編輯器（不同于所見即所得的創作工具）可以加快手寫html的速度。它不允許可視化地編輯頁面，是以你需要在浏覽器中檢視你的工作。實際上很多專業的web設計師更喜歡手寫html檔案，他們強烈推薦以下工具：

textpad（隻限windows）。textpad是windows上的一種簡單又便宜的文本編輯器。

sublime text（windows，mac，linux）。這個軟體不貴，看起來像毫無裝飾的文本編輯器一樣，但是由于有很多功能（如色彩編碼和全碼檢視）受到開發者的喜愛而日益變得重要。

panic軟體制作的coda（隻限macintosh）。代碼工作者喜歡它的工作流、檔案管理工具和内置的終端通路工具。

textmate by macromates（隻限macintosh）。這個進階的文本編輯器具有項目管理工具和一個接口，這個接口是與mac作業系統內建的。由于它很容易使用、功能豐富且價格低廉，是以越來越受歡迎。

bare bones 軟體制作的bbedit（隻限macintosh）。大量的快捷方式使其成為基于mac的web開發者的主要編輯器。

圖像編輯和繪制軟體

你很可能需要在你的頁面上添加圖檔，這樣就需要一個圖檔編輯程式。将在第四部分詳細了解一些備受歡迎的程式。現在，你可能想要看一些很受歡迎的網頁圖檔建立工具：

adobe photoshop。毋庸置疑，在印刷和網站方面，photoshop都是圖檔建立的行業标準。

adobe photoshop elements。這個輕量級的photoshop是用來進行照片編輯和管理的，但是一些愛好者會發現，它具有在網頁上釋出圖檔時所需的所有工具。

adobe illustrator。由于設計師需要建立各種大小和分辨率的商标、圖示和矢量圖，很多設計師以在illustrator中的矢量圖開始尋求最大的靈活度。你可以使用illustrator直接輸出web圖像，或者在photoshop中稍微調整。

adobe fireworks。這個web畫圖程式由一個圖檔編輯器和建立插圖的矢量工具內建。此外，在輸出web圖形上，它也是先進的工具。

corel paint shop pro photo（隻限windows）。這是一個全功能的圖檔編輯器，對于使用windows的使用者來說，這個軟體非常受歡迎，首要原因是它的價格低廉。

gimp，“gnu圖像控制程式”（unix、windows、mac）。這個免費的圖像編輯器類似于photoshop。

網際網路工具

由于你将要與網際網路打交道，是以你需要一些專用的工具，以便在網際網路上檢視和移動檔案：

各種浏覽器。由于各種浏覽器表現頁面的方式不同，是以你需要在盡可能多的浏覽器上測試你的頁面，無論是桌上型電腦還是移動裝置。市場上有數百種浏覽器，下面這些是windows和macintosh作業系統上最常應用的最好的浏覽器：

windows: macintosh os x：

internet explorer (目前版本和至少前兩個版本) safari

chrome chrome

firefox firefox

safari opera

opera

而且你不該忽視手機浏覽器！下面的清單是寫本書時最常見的一些手機浏覽器（沒人知道當你讀到本書的時候，什麼樣的手機浏覽器會變得重要）：

移動版safari（ ios）

安卓浏覽器（android）

黑莓浏覽器（rim）

諾基亞40系列和塞班系統的諾基亞浏覽器

移動和迷你裝置的opera（可以安裝在任何裝置上）

移動internet explorer（windows phone）

silk（kindle fire）

檔案傳輸程式（ftp）。ftp程式使你可以在電腦和web伺服器之間上傳和下載下傳檔案。前面列出的web創作工具都有内置的 ftp程式。當然一些專用的 ftp程式，如下：

windows: macintosh os x:

終端應用程式。如果你使用過unix作業系統，你會發現終端（指令行）應用程式是非常有用的，它可以使你在伺服器上輸入unix指令。這對設定檔案權限、移動或複制檔案和目錄以及管理服務端軟體是非常有用的。

windows使用者可以安裝一個linux模拟器，叫做cygwin，以便進行指令行通路。還有一個程式是putty，這是一個免費的telnet/ssh用戶端。mac os x包含一個名叫terminal的程式，這是一個完全成熟的終端應用程式，它可以讓你通路底層的unix系統，并且可以使用ssh來通路網際網路上的其他指令行系統。