一.文件处理

一个网站由文本，代码，样式表，媒体内容等各种文件组成--------》开发web是这些文件要结构清晰的存在你的计算机，确保文件之间的联系。

本文说明如何创建清晰的结构。

1.网站放在计算机的哪？

在本地将所有关联文件放在一个能反应服务器文件结构的单独文件夹中。可以是任何位置，易找到。

（1）存放网站项目的位置，创文件夹web-projects，所有网站项目放的位置。

（2）在上一个文件夹中新建文件夹存第一个网页，名为test-site。

2.大小写和空格

所有文件夹和文件名都是小写，且没有空格，因为：

（1）很多计算机，特别是web服务器，大小写敏感。一张图放在test-site/MyImage.jpg，而用test-site/myimage.jpg引用这张图会失败。

（2）浏览器，web服务器，编程语言不能一致处理空格。用空格会被视为两个文件，最好用横线，不用下划线和空格，my-file.html，不用my_file.html（不明显）。

结论：用小写，用横线；不用空格与下划线。

3.网站的结构

常用的：一个索引index.html，和不同的图像文件夹，样式表文件夹，脚本文件夹等。

（1）index.html：包括主页内容，人们第一次进入你网页看到的内容。使用文本编辑器，创建index.html放到test-site文件夹

（2）images文件夹：网页所有使用的图像，test-site中创建

（3）styles文件夹：为内容添加样式的样式表（如颜色，背景等），test-site中建

（4）scripts文件夹：包含所有为网页添加交互功能的js代码，test-site中建

 

4.文件路径

为了关联不同的文件，让一个文件知道另一个文件在哪。

（1）保存google-icon.jpg到images文件夹

（2）写index

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My test page</title>
</head>
<body>
<img src="images/google-icon.jpg" alt="My test imgage">
</body>
</html>

src是图片的位置，告诉html图片在哪，从与index.html同级的images目录开始搜索

（3）双击index.html即可浏览器打开，呈现

 

5.文件路径通用规则

（1）引用的文件与当前调用的html同级，直接用文件名

（2）引用与当前html同级文件夹子目录的文件，使用：目录/文件名   的形式

（3）引用当前html父级的文件，加两个点，如my-image.jpg在test-site目录下，在index.html中用

../my-image.jgp

（4）上述三个原则任意组合

目录结构

 

posted @ 2018-12-21 00:23  rOtk1992  阅读(117)  评论(0)    收藏  举报