<005>组织你的网站
本帖最后由 戴宇轩 于 2015-7-11 21:18 编辑创建更多的HTML之前，先要组织好所有资源，我们之前一直是把所有图像和文件放在一个文件夹中。
如果把资源分类放在不同文件夹中，网站会更容易管理。
组织
这是现在的文件结构:
看上去却很乱，而且我们只是写了三个页面而已，现在必须采取一些措施了。。。
课件1下载:
组织休闲室
下面我们来让休闲室更有组织，更有条理!先从简单的做起，为网站创建一些文件夹，并且把文件放进去。
课件2下载:
但是。。。问题来了。。。
当我们打开主页时，却发现图片不见了:
又点开饮料页面，结果。。。
好吧，原因是我们改了目录却没有改HTML。。。
打开index.html，修改以下内容:
<html>
<head>
<title>鱼C休闲室</title>
</head>
<body>
<h1>欢迎来到改进后的鱼C休闲室!</h1>
<img src="images/drinks.gif">
<p>写了一整天代码，一身疲倦?来休闲室喝杯饮料吧!</p>
<p>看看<a href="beverages/elixir.html">这里供应的饮料!</a></p>
<h1>我们的位置</h1>
<p>想找到我们?点击<a href="about/directions.html">这里</a>查看我们的位置</p>
</body>
</html>
再打开页面，是不是正常了?
我们来分析一下:
上行
如果要从beverages/elixir.html访问images目录里的red.jpg呢?
我们的路径是: 先从beverages返回上一级目录（根目录）,然后再访问images目录，再访问images目录里的red.jpg
综合起来就是:
当然，如果要上行两级目录，就可以用../../，以此类推
我们还可以在elixir.html里加上一个超链接，让用户可以返回主页面（index.html）
<html>
<head>
<title>鱼C休闲室的饮料</title>
</head>
<body>
<h1>我们提供的饮料</h1>
<h2>碱式碳酸铜溶液</h2>
<p>
<img src="../images/green.jpg">
碱式碳酸铜，呈孔雀绿颜色，所以又叫孔雀石，是一种名贵的矿物宝石。
它是铜与空气中的氧气、二氧化碳和水蒸气等物质反应产生的物质，又称铜绿，颜色翠绿。
在空气中加热会分解为氧化铜、水和二氧化碳。溶于酸并生成相应的铜盐。在自然界中以孔雀石的形式存在。
</p>
<h2>硫酸铜溶液</h2>
<p>
<img src="../images/blue.jpg">
硫酸铜溶液（五水合硫酸铜）（CuSO4·5H2O）为天蓝色溶液，呈弱酸性，俗名胆矾、石胆、胆子矾、蓝矾。
硫酸铜是制备其他铜化合物的重要原料。同石灰乳混合可得波尔多液，用作杀菌剂。硫酸铜也是电解精炼铜时的电解液。
</p>
<h2>石蕊试剂</h2>
<p>
<img src="../images/purple.jpg">
英国化学家波义尔（Robert Boyle)从紫罗兰花花瓣遇酸变红的现象得到启示，用各种植物做实验，最后发现一种叫石蕊的地衣，遇酸变红，遇碱变蓝，遇中性不变色，非常灵敏。
他从中提取了有用的成分，制取了如今实验室常用的指示剂-石蕊试剂，沿用至今。
</p>
<h2>高锰酸钾溶液</h2>
<p>
<img src="../images/red.jpg">
高锰酸钾溶液，化学品名称是高锰酸钾（KMnO?），俗名是灰锰氧、PP粉，Potassium Permanganate是高锰酸钾属于盐的其中一种
</p>
<a href="../index.html">返回主页面</a>
</body>
</html>
完成的休闲室
课件3下载:
下一课
<006>构建模块---1 哦~~~ 支持楼主分享 哈哈，这是楼主自己画的吗？ 小甲鱼的二师兄 发表于 2015-7-8 14:58
哈哈，这是楼主自己画的吗？
是的，上次有人说看不清，所以这次画得认真一些。。。{:9_237:} 认识了一门新的东西，学到了好多内容。楼主厉害！ 先收藏了 {:1_1:} 刷点鱼币 只为下载 路过 多谢分享 来学习yIxia 有个问题想请教下楼主：完全按照课件中的步骤设置，但是为什么打开页面的时候还是出现课件中的问题？我用的“记事本”编辑和打开的。。。。。 有个问题想请教下楼主：完全按照课件中的步骤设置，但是为什么打开页面的时候还是出现课件中的问题？我用的“记事本”编辑和打开的。。。。。 跟进
php有没有阿，不过html还不错
页:
[1]