一起学WEB（五）更加清晰的组织你的网站资源

最新推荐文章于 2021-07-11 16:58:31 发布

二月圆舞曲

最新推荐文章于 2021-07-11 16:58:31 发布

阅读量636

点赞数

分类专栏： WEB 文章标签：一起学WEB 学习 html WEB

本文链接：https://blog.csdn.net/FebWaltz/article/details/54844744

版权

WEB 专栏收录该内容

10 篇文章 1 订阅

订阅专栏

更加清晰的组织你的网站资源

又上班了，先道一声新年好，毕竟是二零一鸡年的第一次更新嘛。笔者又开始犯懒了-_-，自从过年前出差去了一趟北京，到家就再也没动过电脑，罪过罪过。所有今天赶紧更新一篇。

上次我们需要的功能已经实现了，但还存在一个问题，网站的所有资源都存放在同一个文件夹中。现在只有3个网页就已经有十来个文件了，随着网站规模的扩大，这种扁平化的组织结构会非常混乱。最好可以根据资源的种类分类组织，比如HTML文件放在同一个文件夹，图片放在另一个文件夹，就会显得清楚多了（不一定完全按照这种原则组织，可以按照自己习惯的方式进行，只要自己感觉结构清晰易于管理就可以）。

说干就干，这里我们建立一个叫做“lounge”的文件夹，在其中建立三个子文件夹，分别为“about”、“beverages”、“images”。lounge.html作为主页直接放在lounge文件夹下，direction.html中主要放的是描述信息，放在about文件夹下，elixir.html放在beverages文件夹下，图片都放在images文件夹下。如图：

文档的组织结构（清晰多了）

现在我们再打开网页操作看看。网页中的图片都无法加载了，通过链接也无法打开期望的网页。原因就在于我们刚才重新组织了网站里资源的存放位置。现在我们要重新对这些资源进行定位。需要定位的包括两部分资源，网站的链接（<a>元素）和网站中的图片（<img>元素）。以改变最大的elixir网页为例，他现在的代码如下（注意<a>元素的href属性和<img>元素的src属性，他们的属性值做了改变）。

<html>
	<head>
		<title>Head First Lounge Elixirs</title>
	</head>

	<body>
		<h1>Our Elixirs</h1>

		<h2>Green Tea Cooler</h2>
		<p>
			<img src="../images/green.jpg">
			Chock full of vitamins and minerals, this elixir combines 
			the healthful benefits of green tea with 
			a twist of chamonile blossoms and ginger root.
		</p>

		<h2>Raspberry Ice Concentration</h2>
		<p>
			<img src="../images/lightblue.jpg">
			Combining raspberry juice with lemon grass, 
			citrus peel and rosehips, this icy drink 
			will make your mind feel clear and crisp.
		</p>
		
		<h2>Blueberry Bliss Elixir</h2>
		<p>
			<img src="../images/blue.jpg">
			Blueberries and cherry essence mixed into a base of 
			elderflower herb tea will put you in a relaxed state 
			of bliss int no time.
		</p>

		<h2>Cranberry Antioxidant Blast</h2>
		<p>
			<img src="../images/red.jpg">
			Wake up to the flavors of cranberry and hibiscus in 
			this vitamin C rich elixir.
		</p>

		<p>
			<a href="../lounge.html">Back to the Lounge</a>
		</p>
	</body>
</html>

与上一次相比，链接由<a href="lounge.html">Back to the Lounge</a>改为了<a href="../lounge.html">Back to the Lounge</a>，其中“..”表示退回上一级目录，因为lounge.html在elixir.html的父目录中。再看一个<img>元素，例如第一个图片<img src="../images/green.jpg">，他表示由elixir.html所在的beverages目录先回退到其父目录lounge再进入images文件夹查找green.jpg文件。其他链接意思类似。将三个网页中所有链接及图片元素做相应修改后，网站的功能将恢复正常。