浅谈前段设计师应该如何做到各司其职

本文作为小白入门级，相对基础，是写给现在想了解一点前端知识的设计师同行们，今天这章用设计师熟悉的PS来解释前端相关的术语，通俗易懂幽默风趣，绝对是小白入门的好教程。

今天要讲三个东西：文件路径关系、各式文本和继续排版

看不懂的童鞋，不要偷懒，去把前面的补一下。

一、路径关系——各司其职

上一节中，要调用图片的时候用了这么一句：

background:url(imges/01.jpg);

图片、链接地址、样式文件、js文件……等都是经常需要外界支持的东西，浏览器通过html标签内的各式url地址去一一找到然后呈现出来，一旦地址错误，比如找不到样式文件或者图片，那网页所呈现出来的就不知道神马鬼了。所以，虽然大多数文件都可以浏览选择并不需要手动去敲，但是了解个中关系，对处理问题也是有一定好处的。

如下图，一个相对较完整的文件夹是酱紫的，包含主页index和所需的样式文件、images、js等，哪怕样式文件就一个都要单独建立一个文件夹，html文件一般放在其他文件的上层，但是html文件很多，或者分模块的情况下也是需要建文件夹哒。看个人喜好啦……

index.html中要是需要引用images下的图片01，地址为：images/01.jpg。

正常情况下，当然不是所有东西都在一个页面上处理啦，不仅样式要单独放在一个.css文件中，所有图片也是要单独放个文件夹的。

不同层级间要引用其他地方的文件时路径该怎么写呢?下面举几类的例子。

1）同级

以index.html为参考点，若再增加一张图片(此处为举例添加的02.jpg文件) ,要引用与自己同等级文件，不用写别的了，直接文件名就OK了。例：url(02.jpg);

2）下级

同样，以index.html为参考点，它要引用比他低一级的01.jpg，首先，01往上找，是它所属的images文件夹，这个文件夹刚好与参考点同一级，即与01之间只跨一级，则使用一个斜杠“/”,(向下两级则是两个斜杠哦)index想要引用images下的文件，首先得经过images的同意，所以路径还要带上它的“签名”，最后得来路径则是：url(images/01.jpg);

3）上级

以index.css 为参考点,想引用02.jpg ,首先还是得往上看，参考点属于css文件夹，而02.jpg跟他爹“同辈”，但是不能直呼其名啊，所以用两点“..”来代替，其实这两点也可以是总文件夹的代替名，因为对index.css来说并无多大意义。

好了，找到规律了没?如果index.css要找index.js文件该怎么找捏?这个，留给大家思考一下，嘿嘿……(提示一下，先往上找，再往下找)