<005>组织你的网站

戴宇轩 · 发表于 2015-7-8 10:27:00

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由戴宇轩于 2015-7-11 21:18 编辑

创建更多的HTML之前，先要组织好所有资源，我们之前一直是把所有图像和文件放在一个文件夹中。
如果把资源分类放在不同文件夹中，网站会更容易管理。

组织

这是现在的文件结构:

看上去却很乱，而且我们只是写了三个页面而已，现在必须采取一些措施了。。。
课件1下载: 带有超链接的休闲室.zip (35.03 KB, 下载次数: 47)

2015-7-7 21:08 上传
点击文件名下载附件

组织休闲室

下面我们来让休闲室更有组织，更有条理!先从简单的做起，为网站创建一些文件夹，并且把文件放进去。

课件2下载: 第一次组织后的休闲室(未完成).zip (35.39 KB, 下载次数: 59)

2015-7-7 21:41 上传
点击文件名下载附件

但是。。。问题来了。。。
当我们打开主页时，却发现图片不见了:

又点开饮料页面，结果。。。

好吧，原因是我们改了目录却没有改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下载: 完成的休闲室.zip (35.45 KB, 下载次数: 62)

2015-7-8 10:23 上传
点击文件名下载附件

下一课
<006>构建模块---1

大冬瓜 · 发表于 2015-7-8 10:56:54

哦~~~

fishee · 发表于 2015-7-8 13:24:38

支持楼主分享

小甲鱼的二师兄 · 发表于 2015-7-8 14:58:10

哈哈，这是楼主自己画的吗？

戴宇轩 · 发表于 2015-7-8 15:00:31

小甲鱼的二师兄发表于 2015-7-8 14:58
哈哈，这是楼主自己画的吗？

是的，上次有人说看不清，所以这次画得认真一些。。。

kuangkuang · 发表于 2015-7-9 06:34:15

认识了一门新的东西，学到了好多内容。楼主厉害！

迷雾少年 · 发表于 2015-7-11 07:26:27

先收藏了 {:1_1:}

哥哥123 · 发表于 2015-7-20 21:01:37

刷点鱼币只为下载路过

彼岸花316 · 发表于 2015-8-20 15:08:37

多谢分享

羊圈圈 · 发表于 2015-8-21 10:22:25

来学习yIxia

麦芒微笑 · 发表于 2016-2-22 15:49:18

有个问题想请教下楼主：完全按照课件中的步骤设置，但是为什么打开页面的时候还是出现课件中的问题？我用的“记事本”编辑和打开的。。。。。

麦芒微笑 · 发表于 2016-2-22 15:51:02

有个问题想请教下楼主：完全按照课件中的步骤设置，但是为什么打开页面的时候还是出现课件中的问题？我用的“记事本”编辑和打开的。。。。。

乌托邦_遥远的 · 发表于 2016-6-20 21:04:45

跟进

无符号整形 · 发表于 2016-6-20 21:19:02

php有没有阿，不过html还不错

账号		自动登录	找回密码
密码			立即注册

<005>组织你的网站

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块