本節(jié)書摘來自異步社區(qū)《HTML5+CSS3網(wǎng)頁設(shè)計入門必讀》一書中的第1章，第1.7節(jié),作者： 【美】Julie Meloni更多章節(jié)內(nèi)容可以訪問云棲社區(qū)“異步社區(qū)”公眾號查看。

1.7 使用FTP傳輸文件

就像你迄今為止所學(xué)到的，必須把Web內(nèi)容放到Web服務(wù)器上，才能使之為其他人訪問。這個過程通常是使用文件傳輸協(xié)議（File Transfer Protocol，FTP）發(fā)生的。要使用FTP，需要一個FTP客戶端，這個程序用于把你的計算機上的文件傳輸?shù)絎eb服務(wù)器上。

FTP客戶端需要3份信息來連接到Web服務(wù)器。在你建立了賬戶之后，你的托管提供商將把這些信息發(fā)送給你。

• 你將連接到的主機名或地址。
• 你的賬戶的用戶名。
• 你的賬戶的密碼。
  當(dāng)你具有了這些信息后，就準(zhǔn)備好使用FTP客戶端，把內(nèi)容傳輸?shù)絎eb服務(wù)器。

1.7.1 選擇FTP客戶端
無論使用的FTP客戶端是什么，它們一般都會使用相同的界面。圖1.4顯示了一個FireFTP示例，它是Firefox Web瀏覽器使用的FTP客戶端。本地機器（你的計算機）的目錄清單出現(xiàn)在屏幕左邊，遠程機器（Web服務(wù)器）的目錄清單則出現(xiàn)在右邊。通常會看到右箭頭和左箭頭按鈕，右箭頭把所選的文件從計算機發(fā)送到Web服務(wù)器上；左箭頭則把文件從Web服務(wù)器發(fā)送到計算機上。許多FTP客戶端還允許簡單地選擇文件，然后把那些文件拖放到目標(biāo)機器上。

許多FTP客戶端可以免費使用，但是也可以通過File Manager（文件管理）工具傳輸文件，它很可能是Web服務(wù)器的控制面板的一部分。不過，這種文件傳輸方法通常會在過程中引入更多的步驟，并且?guī)缀醪幌裨谀阕约旱挠嬎銠C上安裝FTP客戶的過程那樣流線化（或簡單）。

下面列出了一些流行的免費FTP客戶端。

• 用于Mac和Windows的Classic FTP。
• 用于Mac的Cyberduck。
• 用于Mac的Fetch。
• 用于所有平臺的FileZilla。
• 用于所有平臺的FireFTPFirefox擴展。
  當(dāng)選擇一個FTP客戶端并在計算機上安裝它時，就準(zhǔn)備好從Web服務(wù)器上傳和下載文件。在下一節(jié)中，將使用程序清單1.1中的示例文件解釋這個過程的工作方式。

1.7.2 使用FTP客戶端
下面的步驟說明了如何使用Classic FTP連接到Web服務(wù)器并傳輸文件。不過，所有的FTP客戶端都使用類似的（如果不是完全相同的話）界面。如果理解了下面的步驟，就應(yīng)該能夠使用任何FTP客戶端。

記住，首先需要主機名、賬戶的用戶名和賬戶的密碼。

1．啟動Classic FTP程序，并單擊Connect按鈕，將提示你填寫與你想連接到的站點相關(guān)的信息，如圖1.5所示。

https://yqfile.alicdn.com/970dd69eab1c9eb1e377c18bcc891d8a195815f5.png" >

2．填寫圖1.5中顯示的每個項目，如下所示。

• FTP服務(wù)器是需要發(fā)送Web頁面的Web服務(wù)器的FTP地址，你的托管提供商將給你提供這個地址。它可能是yourdomain.com，但是要檢查你在簽訂服務(wù)合同時接收到的信息。
• 使用托管提供商提供的信息完成User Name框和Password框。
  3．你可能要切換到Advanced選項卡，并修改以下可選的項目，如圖1.6所示。
• Site Label是你將用于稱呼自己站點的名稱。其他任何人都不會看到這個名稱，因此可以輸入你想要的任何名稱。
• 可以更改Initial Remote Directory on First Connection和Initial Local Directory on First Connection的值，但是你可能想等待，直到你習(xí)慣了使用FTP客戶端并且建立了工作流程為止。
  4．完成設(shè)置后，單擊Add Site保存設(shè)置。然后可以單擊Connect，建立一條與Web服務(wù)器的連接。

你將看到一個對話框，指示Classic FTP嘗試連接到Web服務(wù)器。一旦成功連接，將會看到一個如圖1.7所示的界面，在左邊顯示本地目錄的內(nèi)容，并在右邊顯示W(wǎng)eb服務(wù)器的內(nèi)容。

https://yqfile.alicdn.com/991ca57c47f5b14fe957a441a1ee2d9d9cd15775.png" >

5．現(xiàn)在幾乎就準(zhǔn)備好將文件傳輸?shù)絎eb服務(wù)器，剩余的全部工作是把目錄改為所謂的Web服務(wù)器的文檔根目錄（document root）。Web服務(wù)器的文檔根目錄被指定為Web內(nèi)容的頂級目錄，它是目錄結(jié)構(gòu)的起點，在本章后面將了解關(guān)于它的更多信息。通常，這個目錄被命名為public_html、www（因為www被創(chuàng)建為public_html的別名）或htdocs。你自己不必創(chuàng)建這個目錄，托管提供商將為你創(chuàng)建它。

雙擊文檔根目錄名稱以打開它。FTP客戶界面的右邊將變成顯示該目錄的內(nèi)容（此時它可能是空的，除非Web托管提供商代表你在該目錄中放置了占位符文件）。

6．目標(biāo)是把你以前創(chuàng)建的 sample.html 文件從你的計算機傳輸?shù)絎eb服務(wù)器上。在FTP客戶端界面的左邊列出的目錄中查找文件（如果需要，可以進行導(dǎo)航），并單擊它一次，以高亮顯示文件名。

7．單擊FTP客戶端界面中間的右箭頭按鈕，把文件發(fā)送到Web服務(wù)器。當(dāng)文件傳輸完成時，客戶界面的右邊將會刷新，以顯示發(fā)送到目的地的文件。

8．單擊Disconnect按鈕關(guān)閉連接，然后退出Classic FTP程序。

無論何時你想通過FTP把文件發(fā)送到Web服務(wù)器上，從概念上講都要采取這些類似的步驟。也可以使用FTP客戶端在遠程Web服務(wù)器上創(chuàng)建子目錄。要使用Classic FTP創(chuàng)建子目錄，可以單擊Remote菜單，然后單擊New Folder。不同的FTP客戶端具有不同的界面選項，來實現(xiàn)相同的目標(biāo)。

總結(jié)

以上是生活随笔為你收集整理的《HTML5+CSS3网页设计入门必读》——1.7 使用FTP传输文件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。