最新消息:周一至周五21:30分QQ群(161510483)直播,零基础免费学谷歌SEO,WEB前端,PHP入门教程

8. html项目:文件夹结构

HTML语言学习 林雍岷 192浏览

HTML项目旨在如何组织网站文件夹,网站文件(文档,图片,视频等)以及如何放置在不同文件夹位置提供实践操作。在启动HTML项目在计算机中创建一个文件夹肯定是一件好事。然而网站的每个文件都将落入其相应文件夹中的对应位置。 项目实际操作中尽量不要在文档中建立指向网站文件夹之外资源的链接,因为这些链接易于移动,尤其是将网站发布到互联网。

设计HTML项目文件夹的内部结构,应该考虑将所有文件放在主目录(也称为“根目录”)中,对于一个小型站点(例如,5页HTML文件和3张图像)可能更适合适。 但是,如果你必须处理20页和200张图像,那么就要组织网站文件夹和文件,否则网站可能会变成一个严重的问题,这是很难想象在如此多的图片中查找文档。 在这种情况下,你可以开始以某种方式对文件进行分组并将它们放置在不同的目录中,使你的站点更易于管理和更新。

小型网站结构

对于小型网站最好保持目录结构简单。 假设你有一个展示艺术品的网站:有5张自己设计的图集。考虑一会之后决定构建一个页面来展示图集,加上主页和联系页面。这个小型网站一共有3页和5张图集,所以你可以使用以下目录结构:

8. html项目:文件夹结构 文件夹结构
小型网站结构

如上述所见,目录结构由一个根目录组成,该根目录包含一个名为“ images”的子目录。 在此HTML项目结构模型中,你将所有作品都放在“images”目录中,所有文档都放在根目录中。

图集用目录结构管理

上述结构清晰,简单,并且非常适合需要保存的文件。 但是假设在接下来的几个月中,你将继续创作更多的艺术作品,比如你拥有100张图片,开始认为该目录结构已过时,因为你已经在单个目录中放置了100个文件。

在这种情况下,可行的解决方案是将图像分为用英文命名的主题组:“ flowers”,“ people”,“animals”,“fantasy”和“surrealism”。这样你可以在一个页面中显示与一个类别相对应的所有图像,每个类别都有一个页面。

8. html项目:文件夹结构 文件夹结构
图集用目录结构管理

现在可以将每个图片放入适当的目录,每个目录平均获得20张图像。 但是可以对这些目录进行细分,例如,目录“animals”可以包含诸如“birds”,“horses”或“ felines”之类的子目录。

当你开始对这种结构感到满意并根据需要添加新类别时,例如,你的朋友开始要求在你的网站上展示自己的作品的时候。你虽然很喜欢现在这种结构,但是经过认真考虑之后,你会意识到当前的目录结构还是有问题的。

子网站管理艺术家作品

为了解决上面提出解决朋友要求你的网站展示他们作品的时候,好的解决方法就是将其作为网站的子网站展示,从而为每个艺术家提供一个小的网站展示他的作品。 这种方案就是每个艺术家都有一个目录,其中所有图片和页面都经过认真安排。

8. html项目:文件夹结构 文件夹结构
子网站管理艺术家作品

现在请注意文件夹“artists”,这是既可以组织又可以扩展的优点,使结构更灵活,可以解决添加新艺术家。 “artists”文件夹中的“ index.html”文件包含一个文档,该文档显示网站中所有的艺术家。从某种意义上来说放置此文件似乎很合适:这是艺术家的名单,它应该在“artists”目录中。

到目前为止,你已经看到了针对三种不同情况的三种可能的结构,但还有更多。 例如,你可以为最后一个结构中的每个艺术家的图像添加类别,或者先使用类别,然后将艺术家的文件夹放在其中。

设计网站文件结构是要找到组织问题的解决方案。关于解决方案(或更具体地说关于方法)的特别之处在于不止一个。上述提出的方法最多不过是众多方法中的一种。

有两种建立链接的方法:使用完整URL或相对URI。最简单的方法是使用完整的URL,这就是我们现在要开始做。

使用完整的URL

这种引用资源的方法包括指定其完整地址(或URL),其中包括计算机名称。 地址完成后,从同一目录还是从世界各地的另一台计算机引用资源都没有关系:地址是唯一且通用的。这就是使此方法变得容易得多的原因:你只需要找出资源的地址,并在需要时使用它即可。

让我们看一个例子,假设在最后一个已分析的目录结构中,你需要设置一个指向Isaac传记的链接。 在这种情况下,您应该编写代码,查看目录结构,将其从根目录复制到isaac文件夹中的“ bio.html”文件,并用斜杠(“ / ”)。 执行此过程,ni 将获得“ root/artists/isaac/bio.html”。

8. html项目:文件夹结构 文件夹结构
使用完整的URL

与该路径有关的所有操作就是用协议前面的计算机名称(通常为“http://”)替换根文件夹。 例如,如果此结构托管在网站“ www.this-is-my-album.com”中,则isaac的网址应为“ http://www.this-is-my-album.com/artists/isaac/bio.html”。

使用此方法可以链接到存放文档之外的计算机资源。 但是你可能已经注意到内部链接(在同一台计算机中的两个资源之间)的缺点是知道计算机名称来确定资源的位置。这种特殊性意味着将网站移至新服务器或更改其域名需要更新所有URL链接,以下方法将解决这个问题。

使用绝对路径

绝对路径通过URL链接到同一台计算机中的资源可能很有用,不必指定计算机名因为我们知道它在同一台计算机中。这样可以避免更改我们前面提到的网站域名相关的问题。

幸运的是引用绝对路径,你可以对URL使用相同的方法,但是不必用计算机名和协议替换根目录,只需删除它即可。 对于绝对路径引用是“ /artists/isaac/bio.html”。同一网站中的任何文档都可以使用此路径,而不管其关联的域名是什么。

使用相对路径

相对路径引用(也称为相对URI)不仅仅是确定资源的位置。 在这种方法中从何处引用资源同等重要,这就是使用相对的原因。

为了举例说明,假设你需要从Artists部分的索引页面(“ artists”目录中的“ index.html”文档)到Isaac的图像(image中的“ images.html”文档)建立链接。 文件夹“ isaac”)。该过程与我们之前使用的过程相同:遍历结构,记录下你经过的每个文件夹,直到到达资源为止,然后用斜杠(“ /”)将文件夹彼此分开。 这次的特殊性是你开始的目录。

使用以前的方法,你总是从根目录开始,但是在这种情况下,你必须从包含链接的文档所在的文件夹开始。在这种情况下,包含带有链接的文档的文件夹是“artists ”。此过程产生的路径是“ isaac/images.html”。

8. html项目:文件夹结构 文件夹结构

HTML项目文件夹结构实践

你可能想知道为什么不包含带有链接的文档所在的目录,是因为引用文档位于该目录中,查找要引用的资源所需要了解的下一件事就是从那里去。

相对URI需要考虑一种特殊情况,这种情况在你需要在目录结构中向上移动时发生。 在这种情况下,你不能只记录上面的所有文件夹,这是不正确的方法。 为了表明你正在目录结构中上移,请使用特殊目录“ ..”(两个点),该目录代表目录的父目录。

为了说明这一点,假设你需要链接到Isaac专栏 (文件夹“ isaac”中的文档“ bio.html”) 的联系页面( “ contact.html” )。从包含带有链接(“ isaac”)的文档的文件夹开始,路径的结果为“ ../../ contact.html”(我们向上移动了两级)。

8. html项目:文件夹结构 文件夹结构
相对路径使用方法

上述实践包括创建网站一个基本目录结构,我们将这个站点视为一个类似博客的项目。在开始考虑目录结构之前,我们需要创建一个文件夹并将文件放在里面。你可以根据需要将此文件夹命名(“ myblog”,“ firstproject”,“ practice”,“ root”等)。只要你可以在计算机的文件系统中标识网站的文件夹,它的名称就不重要。 但是你应该知道此文件夹将是网站的根目录。

创建文件夹的过程可能会有所不同,具体取决于你所使用的操作系统,但是不要过多。在这里我将解释如何在Windows 10中创建新文件夹,并让你了解如何在其他操作系统中进行操作。

要在Windows 10中创建文件夹,你需要右键单击桌面(或你所在的文件夹),然后在部署上下文菜单时选择“新建”选项,然后选择“文件夹”。 之后,为新文件夹选择一个名称,然后按Enter。

8. html项目:文件夹结构 文件夹结构
Windows 10中创建文件夹

现在将我们已经完成文件放入新建的文件夹,结构应该如下:

8. html项目:文件夹结构 文件夹结构

现在,你可以将文件名更改为更具描述性的名称,例如“ learning-html.html”。 这将改善网站的组织,并让你在更新过程中识别文件。你可以选择其他名称,但要考虑到我将通过“ learning-html.html”引用此文件。

现在是时候向该结构添加一些文件夹了,到目前为止,我们仅在根目录中创建一个名为“ resources”的文件夹,然后在第一个文件夹中再创建两个名为“ images”和“ videos”的文件夹。创建文件夹的过程很简单,并且在本练习的前面已进行了处理,在这种情况下,唯一的特殊性是你应该在适当的文件夹内执行此操作,以获得所需的结构,最后你应该具有以下结构。

8. html项目:文件夹结构 文件夹结构

下一步是添加index.html文件,在本文档中你可以向用户介绍自己,并告诉他有关你网站中处理的主题的信息。但更重要的是index.html文件是用户首次进入你的网站时将显示的文件,这是你网站的入口大厅,因为使用它来接待你的访客。

此时网站结构应如下所示:

8. html项目:文件夹结构 文件夹结构

由于这是一个类似博客的网站,因此你应该每周至少添加一篇文章。以这种速度,你的根文件夹很快就会变得一团糟。为了防止这种情况,我们正在做一些事情,首先,我们创建一个“posts”文件夹来包含所有文章; 其次,我们将文章按月划分(每个月一个文件夹)。 目前,我们仅添加当月的文件夹,包括名称中的月份和年份(“ 2020-02”),以避免歧义。

此时网站结构应如下所示:

8. html项目:文件夹结构 文件夹结构

如你在前面的结构中所见,“posts”文件夹中还有一个“index.html”文件。该文件应该列出你网站上的所有帖子。一开始它只是一个文件,但是随着你的收藏集的不断增长,你将不得不考虑将其分为两个或更多文件,这是一种称为“分页”的技术。

在这里html项目基本结构,希望它能对所有开发人员有所帮助,我上传了一个 html项目文件结构小项目到GitHub仅供参考。

转载请注明:林雍岷 » 8. html项目:文件夹结构