您的位置：首页 > 运维架构 > 网站架构

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

2017-02-03 08:23 316 查看

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

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

    上次我们需要的功能已经实现了，但还存在一个问题，网站的所有资源都存放在同一个文件夹中。现在只有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文件。其他链接意思类似。将三个网页中所有链接及图片元素做相应修改后，网站的功能将恢复正常。

    好了，工作完成。虽然网站的表现没有发生任何变化，但对于开发和维护人员来说，整个网站的结果比以前清晰了很多，有利于后期网站规模的扩充与维护。

    今天就先讲这些，下一期讲什么笔者现在还有些犹豫，是讲一些新的网页元素呢，还是讲一些小工具啥的，还是开始实际分析网页？待我再好好斟酌。不说了，先工作了，新的一年好好加油，祝大家新年新气象。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  一起学WEB 学习 html WEB
相关文章推荐
新的分享
章节导航