閱讀(3k) 書簽贊(0) 我要糾錯

文件處理

2018-08-24 14:51 更新

一個網(wǎng)頁由許多文件組成：文本，代碼，樣式表，媒體內(nèi)容等等。當你開發(fā)網(wǎng)頁時，你需要將這些文件以清晰的結(jié)構(gòu)在你的本地計算機中存儲下來，保證它們之間的聯(lián)系，使它們看起來正確，然后才能將它們上傳至服務器。這一節(jié)討論了一些創(chuàng)建清晰的文件結(jié)構(gòu)你應該了解的知識。

網(wǎng)頁應該存放在計算機何處？

當你在本地操作你的網(wǎng)頁時，你應該將所有關聯(lián)的文件放在一個能反映服務器上文件結(jié)構(gòu)的單獨的文件夾里。這個文件夾可以存放在任何你喜歡的位置，不過你應該將它放在你容易找到的位置，或許可以是你的桌面，你的主頁，或是磁盤根目錄。

選擇一個位置存放你的網(wǎng)頁項目。創(chuàng)建一個名為 web-projects（或更簡單）的文件夾。這將是你全部網(wǎng)頁項目存放的位置。
在第一級目錄下，新建另一個文件夾來存放你的第一個網(wǎng)頁。命名為 test-site（或者更加有想象力）。

一些關于大小寫和空格的提示

你會注意到在這篇文章里，我們要求你為文件夾和文件命名都是以小寫形式并且沒有空格，這是因為：

很多計算機，特別是Web服務器，是對大小寫敏感的。舉個例子，如果你將一個圖片放在 test-site/MyImage.jpg，然后在一個不同的文件里你試圖以 test-site/myImage.jpg 來引用這個圖片，這將不會起作用。
瀏覽器，Web服務器，還有程序語言不能一致處理空格。舉個例子，如果你在文件名里使用空格，一些系統(tǒng)會把它這個文件名視為兩個文件名。一些服務器將會把你的文件名里的空格替換為 "%20"（URIs里空格的編碼），破壞你所有的鏈接。最好是使用橫線和下劃線來分離單詞: my-file.html 或是 my_file.html。

由于這些原因，在你為文件夾和文件命名最好養(yǎng)成使用小寫并且省略空格的習慣。那樣你將減少很多問題～

網(wǎng)頁應該使用什么結(jié)構(gòu)？

接下來，看看我們的測試網(wǎng)頁應該擁有什么結(jié)構(gòu)。我們創(chuàng)建的任何網(wǎng)頁項目中最常使用的就是一個索引HTML文件和不同的包括圖像，樣式表和腳本文件的文件夾。讓我們現(xiàn)在創(chuàng)建它們：

index.html：這個文件通常將包括你的主頁內(nèi)容，也就是說，人們第一次進入你的網(wǎng)頁看到的文本和圖像。使用你的文本編輯器，創(chuàng)建一個名為index.html的新文件并將其保存在test-site文件夾。
images folder：這個文件夾包含你網(wǎng)頁上所有使用的圖像。在test-site文件夾內(nèi)創(chuàng)建一個images文件夾。
styles folder：這個文件夾包含了為你的內(nèi)容添加樣式的樣式表（比如，設置文本顏色和背景顏色）。在test-site文件夾內(nèi)創(chuàng)建一個styles文件夾。
scripts folder：這個文件夾包含了所有為你網(wǎng)頁添加交互功能的JavaScript代碼（比如點擊時讀取數(shù)據(jù)的按鈕）。在test-site文件夾內(nèi)創(chuàng)建一個scripts文件夾。

提示：在 Windows 系統(tǒng)中，你可能在查看文件名時會遇到些問題，因為 Windows 有一個很惱人的選項叫隱藏已知文件類型擴展名被默認開啟。通常你可以打開Windows資源管理器，選擇文件夾選項，單擊選項，取消隱藏已知文件類型擴展名復選框，然后點擊確定。查看 Windows 版本的詳細信息，請使用 Google 搜索！

文件路徑

為了關聯(lián)不同文件，你需要為它們提供文件路徑——基本上是一個路線讓一個文件知道另一個文件在哪。為了實現(xiàn)，我們將插入一小段HTML代碼到index.html文件，讓其顯示你在 "你的網(wǎng)頁將呈現(xiàn)什么樣子？" 文章里選擇的圖像。

拷貝你早先保存的圖像到images文件夾。
打開index.html文件，準確插入以下顯示的代碼。不用擔心現(xiàn)在不理解代碼的意義——我們將在以后詳細講解此結(jié)構(gòu)的信息。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image">
  </body>
</html> 
```
這行代碼<img src="" alt="My test image">是插入圖像的 HTML 代碼。我們需要告訴 HTML 圖像在哪里。這張圖片在 images 目錄下，而 images 目錄與index.html處于同級目錄。要從index.html所處一級目錄進入圖片所在目錄，我們所需的文件路徑是 images/your-image-filename。例如，我們的圖像名是firefox-icon.png，所以我們的文件路徑就是images/firefox-icon.png。
在 src＝" " 的雙引號中插入文件路徑。
保存 HTML 文件，然后使用瀏覽器打開（雙擊文件）。你應該看到你展示著圖像的新網(wǎng)頁！

一些文件路徑的通用規(guī)則：

要引用一個位于同級目錄的 HTML 文件，只需直接使用文件名，比如 my-image.jpg。
要引用一下子目錄的文件，在路徑前寫下目錄名并加一個斜杠，比如subdirectory/my-image.jpg。
要引用一個父目錄的 HTML 文件，加上兩個點。舉個例子，如果index.html在test-site子目錄而my-image.png與test-site處于同級目錄，你可以使用../my-image.png 在index.html內(nèi)引用my-image.png。
你可以組合隨意以上方法，比如../subdirectory/another-subdirectory/my-image.png。