閱讀(3.1k) 書(shū)簽贊(0) 我要糾錯(cuò)

文件處理

2018-08-24 14:51 更新

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

網(wǎng)頁(yè)應(yīng)該存放在計(jì)算機(jī)何處？

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

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

一些關(guān)于大小寫(xiě)和空格的提示

你會(huì)注意到在這篇文章里，我們要求你為文件夾和文件命名都是以小寫(xiě)形式并且沒(méi)有空格，這是因?yàn)椋?/p>

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

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

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

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

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

提示：在 Windows 系統(tǒng)中，你可能在查看文件名時(shí)會(huì)遇到些問(wèn)題，因?yàn)?Windows 有一個(gè)很惱人的選項(xiàng)叫隱藏已知文件類型擴(kuò)展名被默認(rèn)開(kāi)啟。通常你可以打開(kāi)Windows資源管理器，選擇文件夾選項(xiàng)，單擊選項(xiàng)，取消隱藏已知文件類型擴(kuò)展名復(fù)選框，然后點(diǎn)擊確定。查看 Windows 版本的詳細(xì)信息，請(qǐng)使用 Google 搜索！

文件路徑

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

拷貝你早先保存的圖像到images文件夾。
打開(kāi)index.html文件，準(zhǔn)確插入以下顯示的代碼。不用擔(dān)心現(xiàn)在不理解代碼的意義——我們將在以后詳細(xì)講解此結(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處于同級(jí)目錄。要從index.html所處一級(jí)目錄進(jìn)入圖片所在目錄，我們所需的文件路徑是 images/your-image-filename。例如，我們的圖像名是firefox-icon.png，所以我們的文件路徑就是images/firefox-icon.png。
在 src＝" " 的雙引號(hào)中插入文件路徑。
保存 HTML 文件，然后使用瀏覽器打開(kāi)（雙擊文件）。你應(yīng)該看到你展示著圖像的新網(wǎng)頁(yè)！

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

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

到此為止，這是你需要知道的全部。

提示：Windows 系統(tǒng)會(huì)使用反斜杠而不是斜杠，比如 C:\windows 。這沒(méi)關(guān)系，就算你在 Windows 上開(kāi)發(fā)你的網(wǎng)頁(yè)，你仍應(yīng)該在你的代碼中使用斜杠。

還有什么需要完成的？

我們差不多都做完了。你的文件夾結(jié)構(gòu)應(yīng)該與下面一樣：

以上內(nèi)容是否對(duì)您有幫助：

← 你的網(wǎng)頁(yè)將呈現(xiàn)什么樣子？

HTML基礎(chǔ) →

寫(xiě)筆記

我要補(bǔ)充