Dealing with files

 

网站由许多文件组成:文本内容,代码,样式表,媒体内容等. 在构建网站时,需要将这些文件组装到本地计算机上的一个合理的结构中,确保它们可以互相通信,并在最终将它们上载到服务器之前使所有内容看起来正确. 处理文件讨论了您应注意的一些问题,因此您可以为网站设置明智的文件结构.

Where should your website live on your computer?

在计算机上本地处理网站时,应将所有相关文件保存在一个文件夹中,该文件夹反映服务器上已发布网站的文件结构. 该文件夹可以放置在您喜欢的任何位置,但是您应该将其放置在容易找到的位置,例如,在桌面上,主文件夹中或硬盘根目录中.

  1. 选择一个位置来存储您的网站项目. 在您选择的位置内,创建一个名为web-projects (或类似名称)的新文件夹. 这是您所有网站项目的所在地.
  2. 在第一个文件夹中,创建另一个文件夹来存储您的第一个网站.将其称为test-site (或更具想象力的名称).

An aside on casing and spacing

您会注意到,在本文全文中,我们要求您完全使用小写字母命名文件夹和文件,没有空格. 这是因为:

  1. 许多计算机,特别是Web服务器,区分大小写. 因此,例如,如果将图像放在网站test-site/MyImage.jpg ,然后在另一个文件中尝试将图像作为test-site/myimage.jpg调用,则该图像可能不起作用.
  2. 浏览器,Web服务器和编程语言不能一致地处理空间. 例如,如果在文件名中使用空格,则某些系统可能会将文件名视为两个文件名. 某些服务器会将文件名中的区域替换为"%20"(URI中空格的字符代码),从而导致所有链接断开. 最好用破折号而不是下划线分隔单词: my-file.htmlmy_file.html .

简短的答案是,文件名应使用连字符. Google搜索引擎将连字符视为单词分隔符,但不会将其视为下划线. 出于这些原因,最好养成将文件夹和文件名写成小写,无空格且单词用短划线隔开的习惯,至少直到您知道自己在做什么为止. 这样一来,您以后就会遇到更少的问题.

What structure should your website have?

接下来,让我们看看测试站点应具有的结构. 在我们创建的任何网站项目中,最常见的内容是索引HTML文件和包含图像,样式文件和脚本文件的文件夹. 现在创建这些:

  1. index.html :此文件通常包含您的首页内容,即人们首次访问您的网站时看到的文本和图像. 使用文本编辑器创建一个名为index.html的新文件,并将其保存在test-site文件夹中.
  2. images文件夹 :此文件夹将包含您在网站上使用的所有图像. 在test-site文件夹内创建一个名为images文件夹.
  3. styles文件夹 :此文件夹将包含用于设置内容样式的CSS代码(例如,设置文本和背景颜色). 在test-site文件夹内创建一个名为styles文件夹.
  4. scripts文件夹 :此文件夹将包含用于向您的站点添加交互功能的所有JavaScript代码(例如,单击时加载数据的按钮). 在test-site文件夹内创建一个名为scripts文件夹.

注意 :在Windows计算机上,您可能看不到文件名,因为Windows默认启用了一个名为" 隐藏已知文件类型的扩展名"的选项. 通常,您可以通过以下方法关闭此功能:转到Windows资源管理器,选择" 文件夹选项..."选项,取消选中" 隐藏已知文件类型的扩展名"复选框,然后单击" 确定" . 有关涵盖您的Windows版本的更多特定信息,您可以在网上搜索.

File paths

为了使文件彼此交谈,您必须在文件之间提供文件路径-基本上是路由,因此一个文件可以知道另一个文件在哪里. 为了说明这一点,我们将一点HTML插入到我们的index.html文件中,并使其显示您在文章"您的网站看起来像什么?"中选择的图像.

  1. 将您先前选择的图像复制到images文件夹中.
  2. 打开您的index.html文件,然后将如下代码完全插入到文件中. 现在不用担心这意味着什么-我们将在本系列的后面部分更详细地介绍这些结构.
      <!DOCTYPE html>
     <html>
       <头>
         <meta charset =" utf-8">
         <title>我的测试页</ title>
       </ head>
       <身体>
         <img src ="" alt ="我的测试图像">
       </ body>
     </ html> 
  3. <img src="" alt="My test image">是将图像插入页面的HTML代码. 我们需要告诉HTML图像在哪里. 该图像位于images目录中,该目录与index.html处于同一目录中. 要将文件结构从index.html移到我们的图像,我们需要的文件路径是images/your-image-filename . 例如,我们的图像称为firefox-icon.png ,因此文件路径为images/firefox-icon.png .
  4. 将文件路径插入src=""代码的双引号之间的HTML代码中.
  5. 保存HTML文件,然后将其加载到Web浏览器中(双击文件). 您应该看到新网页显示您的图像!

A screenshot of our basic website showing just the firefox logo - a flaming fox wrapping the world

文件路径的一些一般规则:

  • 要链接到与调用HTML文件位于同一目录中的目标文件,只需使用文件名,例如my-image.jpg .
  • 要引用子目录中的文件,请在路径前面加上目录名,再加上斜杠,例如subdirectory/my-image.jpg .
  • 要链接到调用HTML文件上方目录中的目标文件,请写两个点. 因此,例如,如果index.html位于test-site的子文件夹中,而my-image.jpg位于test-site ,则可以使用../my-image.jpgindex.html引用my-image.jpg .
  • 您可以随意组合它们,例如../subdirectory/another-subdirectory/my-image.jpg .

目前,这是您需要了解的所有内容.

注意 :Windows文件系统倾向于使用反斜杠,而不是正斜杠,例如C:\windows . 在HTML中这无关紧要-即使您是在Windows上开发网站,也应该在代码中使用正斜杠.

What else should be done?

现在就解决了. 您的文件夹结构应如下所示:

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

 

In this module