path: root/files/zh-tw/learn/getting_started_with_the_web/dealing_with_files/index.html

---
title: 與各式各樣檔案打交道
slug: Learn/Getting_started_with_the_web/Dealing_with_files
tags:
  - HTML
  - 初學者
  - 指南
  - 網站
translation_of: Learn/Getting_started_with_the_web/Dealing_with_files
---
<div>{{LearnSidebar}}</div>

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

<div class="summary">
<p>一個網站會包含許多檔案: 文字內容、程式碼、樣式表、影音內容......等。每當你建立一個網站時，你需要將這些檔案在你的電腦上合理架構好。以確保它們能夠互相溝通，並讓內容正常顯示。然後你接著才能<a href="/en-US/Learn/Getting_started_with_the_web/Publishing_your_website">將你的網站發佈上線</a>。本篇文章將探討你應該注意的一些議題，以便讓你能夠為你的網站設定好合理的檔案架構。</p>
</div>

<h2 id="你的網站在哪裡">你的網站在哪裡?</h2>

<p>當你正在你自己的電腦上編輯你的網站時，你應該將所有相關的檔案放在同一個資料夾中，這反映到未來在伺服器上的檔案架構。這個資料夾可以放在任何地方，但你應該會放在一個容易找到的地方，對吧！像是你的桌面，你的家目錄，或是你硬碟的根目錄。</p>

<ol>
 <li>找到一個地方來存放你的網站專案。首先，建立一個新資料夾並命名為 <code>web-projects</code> (或類似名稱)。 這裡將存放你的各種網站專案.</li>
 <li>在上述資料夾底下，建立另一個資料夾來存放你的第一個網站，請將這個資料夾命名為 <code>test-site</code> (或其他有創意的名稱).</li>
</ol>

<h2 id="留意大小寫與空格">留意大小寫與空格</h2>

<p>你將注意到在本篇文章中，我們會要求你在命名檔案或是資料夾時，只使用小寫並且避免使用空格。這是因為：</p>

<ol>
 <li>許多的電腦尤其是網路伺服器，是大小寫區分的(case-sensitive)。所以假設你放了圖片在你的網站上而路徑是 <code>test-site/MyImage.jpg</code>，然後另一個檔案你想放在 <code>test-site/myimage.jpg</code>，這可能是無法運作的。</li>
 <li>瀏覽器、伺服器、以及各種程式語言對於空格的處理並不是一致的。舉例來說，如果你在檔名中使用了空格，有些系統會將其視為兩個檔名，有些伺服器會將空格替換成 "%20" (這是空格在 URIs 中的表示法)，並破壞了你的連結。我們建議使用底線(underscores)與破折號(dashes)來隔開單字。例如：<code>my-file.html</code> 或是 <code>my_file.html</code>.</li>
</ol>

<p>也因為這些原因，你應該盡量在命名資料夾與檔案時使用小寫並避免使用空格，這樣一來將能夠減少一些不必要的錯誤。</p>

<h2 id="你的網站架構應該如何">你的網站架構應該如何?</h2>

<p>下一步，我們要看看我們的測試網站應該具有什麼樣的架構。我們的網站專案最常見的東西就是一個HTML檔案與專門放圖片、樣式檔案、腳本檔案的資料夾們。讓我們來看看下面：</p>

<ol>
 <li><code><strong>index.html</strong></code>: 這個檔案會包含你的首頁內容，也就是別人一進到你的網站時所看到的文字與圖片。使用你的文字編輯器，建立一個新檔案命名為 <code>index.html</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
 <li><strong><code>images</code> folder</strong>: 這個資料夾包含了所有網站會用到的圖片，建立一個新資料夾命名為 <code>images</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
 <li><strong><code>styles</code> folder</strong>: 這個資料夾包含了能夠設計你的網站的CSS碼(例如：設定文字與背景顏色)，建立一個資料夾命名為 <code>styles</code>，並將它存到 <code>test-site</code> 這個資料夾下。</li>
 <li><strong><code>scripts</code> folder</strong>: 這個資料將包含能夠使網站具有互動性的JavaScript程式碼。(例如：按下按鈕後會載入資料)。建立一個資料夾命名<code> scripts</code> ，並將它存到 <code>test-site</code> 這個資料夾下。</li>
</ol>

<div class="note">
<p><strong>Note</strong>: 在Windows的電腦上，你可能在設定副檔名上會遇到一些困難。因為Windows預設會將已知的檔案類型名稱隱藏。一般來說你可以將這項設定關掉，只需要去檔案總管，選擇「資料夾選項」並取消選取「隱藏已知檔案類型的副檔名」，並點選 <strong>OK </strong>。有關不同版本的Windows的設定方法，請利用搜尋引擎搜尋。</p>
</div>

<h2 id="檔案路徑">檔案路徑</h2>

<p>要讓一個檔案能夠與另一個檔案"溝通"，你需要提供一個他們之間的相對檔案路徑以讓檔案能夠找到另一個檔案在哪裡。為了要展示，我們將插入一小段的HTML到我們的 <code>index.html</code> 檔案中，並且讓它顯示你在 <a href="/zh-TW/Learn/Getting_started_with_the_web/What_should_your_web_site_be_like">"What will your website look like?" </a>這篇文章中所選的圖片。</p>

<ol>
 <li>複製你選的圖片並放到 <code>images</code> 資料夾中。</li>
 <li>打開你的 <code>index.html</code>，並複製貼上下面這段code。先別擔心這些code代表什麼意思，我們會在後面的時候講解它們代表的意義。
  <pre class="brush: html">&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;My test page&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;img src="" alt="My test image"&gt;
  &lt;/body&gt;
&lt;/html&gt; </pre>
 </li>
 <li><code>&lt;img src="" alt="My test image"&gt;</code> 這行是一段將圖片插入到頁面中的 HTML code，我們必須告訴HTML圖片在哪。我們知道圖片在  <em>images</em> 資料夾中，而  <em>images</em> 資料夾就跟 <code>index.html </code>在同一目錄下。為了要在檔案系統結構中從 <code>index.html</code> 走到我們的圖片，我們需要將檔案路徑設為<code>images/your-image-filename</code>. 舉例來說，我們的圖片命名為 <code>firefox-icon.png，所以這裡的檔案路徑即為 </code><code>images/firefox-icon.png</code>.</li>
 <li>將檔案路徑貼到你的 HTML code 中的<code> src=""</code> 的雙引號之間。</li>
 <li>將你的 HTML 檔案存檔，並且滑鼠雙擊HTML檔案來打開它，你應該會看到一個新的網頁並展示著你的圖片!</li>
</ol>

<p><img alt="A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world" src="https://mdn.mozillademos.org/files/9229/website-screenshot.png" style="display: block; height: 542px; margin: 0px auto; width: 690px;"></p>

<p>一些有關路徑的規則:</p>

<ul>
 <li>要連結一個目標檔案到在同一個目錄下的HTML檔案，只需要檔案名稱就可以了。例如 <code>my-image.jpg</code>。</li>
 <li>為了要參照到在子目錄下的檔案，在路徑前面加上該目錄的名稱，並接著加上一個斜線(/)。例如： <code>subdirectory/my-image.jpg</code>.</li>
 <li>為了要連結到一個在 HTML file 的上層目錄的檔案，你需要使用兩個點點(..)。例如：index.html是在<code>test-site 這個目錄的一個子目錄下，而 my-image.png</code> 是在<code> test-site 這個目錄</code>下，HTML file 要參照 <code>my-image.png</code> 必須使用 <code>../my-image.png</code>。</li>
 <li>你可以混和著使用以上的規則，例如 <code>../subdirectory/another-subdirectory/my-image.png</code>.</li>
</ul>

<p>至此，你已經知道目前需要知道的了。</p>

<div class="note">
<p><strong>Note</strong>: Windows的檔案系統會傾向使用反斜線(\)，而非斜線(/)。例如 <code>C:\windows</code>. 這並沒有關係，即使你是在Windows上開發網站，你仍然應該在程式碼中使用斜線(/)。</p>
</div>

<h2 id="還有什麼需要被完成的">還有什麼需要被完成的?</h2>

<p>目前先這樣吧。你的資料夾裡面現在應該長得像這樣：</p>

<p><img alt="A file structure in mac os x finder, showing an images folder with an image in, empty scripts and styles folders, and an index.html file" src="https://mdn.mozillademos.org/files/9231/file-structure.png" style="display: block; height: 577px; margin: 0px auto; width: 929px;"></p>

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

<p> </p>

<h2 id="In_this_module">In this module</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>

<p> </p>