WEB入门-准备各式各样文件

最新推荐文章于 2024-09-09 21:14:24 发布

九州代理-娜娜kwk3589

最新推荐文章于 2024-09-09 21:14:24 发布

阅读量432

点赞数 13

文章标签：前端

本文链接：https://blog.csdn.net/Toan1234/article/details/140994533

版权

准备各式各样文件

一个网站会包含许多档案: 文字内容、程式码、样式表、影音内容......等。每当你建立一个网站时，你需要将这些档案在你的电脑上合理架构好。以确保它们能够互相沟通，并让内容正常显示。然后你接着才能将你的网站发布上线。本篇文章将探讨你应该注意的一些议题，以便让你能够为你的网站设定好合理的档案架构。

你的网站打算设置到哪边？

当你正在你自己的电脑上编辑你的网站时，你应该将所有相关的档案放在同一个资料夹中，这反映到未来在伺服器上的档案架构。这个资料夹可以放在任何地方，但你应该会放在一个容易找到的地方，对吧！像是你的桌面，你的家目录，或是你硬碟的根目录。

找到一个地方来存放你的网站专案。首先，建立一个新资料夹并命名为web-projects(或类似名称)。这里将存放你的各种网站专案.
在上述资料夹底下，建立另一个资料夹来存放你的第一个网站，请将这个资料夹命名为test-site(或其他有创意的名称).

留意大小写以及空格处

你将注意到在本篇文章中，我们会要求你在命名档案或是资料夹时，只使用小写并且避免使用空格。这是因为：

许多的电脑尤其是网路伺服器，是大小写区分的(case-sensitive)。所以假设你放了图片在你的网站上而路径是test-site/MyImage.jpg，然后另一个档案你想放在test-site/myimage.jpg，这可能是无法运作的。
浏览器、伺服器、以及各种程式语言对于空格的处理并不是一致的。举例来说，如果你在档名中使用了空格，有些系统会将其视为两个档名，有些伺服器会将空格替换成"%20" (这是空格在URIs 中的表示法)，并破坏了你的连结。我们建议使用底线(underscores)与破折号(dashes)来隔开单字。例如：my-file.html或是my_file.html.

也因为这些原因，你应该尽量在命名资料夹与档案时使用小写并避免使用空格，这样一来将能够减少一些不必要的错误。

你的网站架构应应如何？

下一步，我们要看看我们的测试网站应该具有什么样的架构。我们的网站专案最常见的东西就是一个HTML 档案与专门放图片、样式档案、脚本档案的资料夹们。让我们来看看下面：

index.html: 这个档案会包含你的首页内容，也就是别人一进到你的网站时所看到的文字与图片。使用你的文字编辑器，建立一个新档案命名为index.html，并将它存到test-site这个资料夹下。
imagesfolder : 这个资料夹包含了所有网站会用到的图片，建立一个新资料夹命名为images，并将它存到test-site这个资料夹下。
stylesfolder : 这个资料夹包含了能够设计你的网站的CSS 码(例如：设定文字与背景颜色)，建立一个资料夹命名为styles，并将它存到test-site这个资料夹下。
scriptsfolder : 这个资料将包含能够使网站具有互动性的JavaScript 程式码。 (例如：按下按钮后会载入资料)。建立一个资料夹命名scripts，并将它存到test-site这个资料夹下。

档案路径

要让一个档案能够与另一个档案"沟通"，你需要提供一个他们之间的相对档案路径以让档案能够找到另一个档案在哪里。为了要展示，我们将插入一小段的HTML 到我们的index.html档案中

复制你选的图片并放到images资料夹中。
打开你的index.html，并复制贴上下面这段code。先别担心这些code 代表什么意思，我们会在后面的时候讲解它们代表的意义。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My test page</title>
  </head>
  <body>
    <img src="" alt="My test image" />
  </body>
</html>

3.<img src="" alt="My test image">这行是一段将图片插入到页面中的HTML code，我们必须告诉HTML 图片在哪。我们知道图片在images资料夹中，而images资料夹就跟index.html在同一目录下。为了要在档案系统结构中从index.html走到我们的图片，我们需要将档案路径设为images/your-image-filename. 举例来说，我们的图片命名为firefox-icon.png，所以这里的档案路径即为images/firefox-icon.png.

4.将档案路径贴到你的HTML code 中的src=""的双引号之间。

5.将你的HTML 档案存档，并且滑鼠双击HTML 档案来打开它，你应该会看到一个新的网页并展示着你的图片!

一些有关路径的规则:

要连结一个目标档案到在同一个目录下的HTML 档案，只需要档案名称就可以了。例如my-image.jpg。
为了要参照到在子目录下的档案，在路径前面加上该目录的名称，并接着加上一个斜线(/)。例如：subdirectory/my-image.jpg.
为了要连结到一个在HTML file 的上层目录的档案，你需要使用两个点点(..)。例如：index.html 是在test-site这个目录的一个子目录下，而my-image.png是在test-site这个目录下，HTML file 要参照my-image.png必须使用../my-image.png。
你可以混和着使用以上的规则，例如../subdirectory/another-subdirectory/my-image.png.

至此，你已经知道目前需要知道的了。

九州代理-娜娜kwk3589

关注

13
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
WEB入门-准备各式各样文件

一个网站会包含许多档案: 文字内容、程式码、样式表、影音内容......等。每当你建立一个网站时，你需要将这些档案在你的电脑上合理架构好。以确保它们能够互相沟通，并让内容正常显示。然后你接着才能将你的网站发布上线。本篇文章将探讨你应该注意的一些议题，以便让你能够为你的网站设定好合理的档案架构。
复制链接

扫一扫