目录、目录结构及在页面中插入图片在线视频

上节课我们学习了网页的布局方法

这是一个非常重要的技术

因为这是一个网页制作的基础

可以通过任意的排列组合

完成我们网页框架搭建的所有要求

希望大家可以多多实验调整

达到灵活运用

在本节课呢

我们来学习一下目录的概念

以及如何在网页中插入图片

我们来了解一下目录及目录结构

目录是网站中对文件夹的一种称呼

一个网站可以包含多个目录

每个目录包含网站的不同部分

在开始建设一个网站的时候

都应该创建好一个目录结构

用于分类存放我们的内容

以承受内容的增长

制作网站时一个最常见的目录结构

如图所示

其中CSS文件夹

用于存放网页中的CSS文件

images文件夹

用于存放网页中的图片

js文件夹

用于存放网页中所有的js文件

如图中的目录结构

根目录为网页中的主目录

包含整个网页的内容

如图中的mooc文件夹

子目录为位于目录中的目录

如css文件夹js文件夹

images文件夹

都是mooc的子目录

父目录是包含其它目录的目录

如mooc文件夹

是css js images文件夹的父目录

了解了目录的概念之后

我们再来理解一个非常重要的概念

url

url也叫统一资源定位符

是对可以从互联网上

得到的资源的位置

和访问方法的一种简洁的表示

也就是在互联网上找到资源的地址

互联网上的每一个文件

都有一个唯一的url

它包含的信息是指出文件的位置

以及浏览器应该怎样处理它

url包括相对url和绝对url两种

相对url是包含url本身的文件夹的位置

为参考点

描述目录文件的位置

如果目标文件与当前页面在同一个目录

那么这个文件的相对url

仅仅是文件名和扩展名

如index.html即可

如果目录文件在当前目录的子目录中

那么它的相对url

是子目录名后面加斜杠

然后是目录文件的文件名和扩展名

如果它的相对url在父目录中

那么它的相对url就是

点点后面加斜杠

然后是目标文件的文件名和扩展名

如../index.html

向上多少级的父目录

就有相应多少个点点斜杠

绝对url

是显示文件的完整路径

这意味着绝对url本身所在的位置

与被引用的实际文件的位置无关

例如我们这个域名

所指向的url位置

在网页中实现基本的链接

和网页之间的跳转

我们使用到的是a元素

a元素的写法是

开标签 尖括号a

和闭标签杠尖括号a

中间是添加链接的内容

a元素包含两个属性

href属性用来定义链接到网页的网址

如a href等于url

url就是链接的地址

中间是链接的内容

然后是闭标签尖括号a

使用id属性可以创建目标锚点

这可以链接到本页面内的特定位置

来制作页面内的跳转

写法可以是这样的

比如在某个特定位置

增加了id=idname属性后

然后用a把它的href属性

设置成#号

刚才的那个idname

例如我们可以在页面中的某个特定位置

增加一个id=idname的属性

然后用a元素

其中属性href=#idname的这种方式

来增加链接的操作

在默认情况下

由a标签创建的链接

浏览器会在同一窗口打开链接的网页

如果需要在新的浏览器窗口中打开

我们可以通过target的属性

把它设置为下划线blank来实现

例如下面的一个写法

在网页制作中插入图片

是用尖括号img元素来实现的

写法可以是img

其中属性有src

是图片的引用的目录地址

然后alt是图片的描述文字

这里边涉及了两个属性

src属性是一个url值

告知了浏览器应该从何处

来查找这张图片

通常我们是放在images这个文件夹当中

alt属性

该属性的值应用于描述图片

在浏览器无法显示图片的时候

该文本的内容将会用来替代显示

height属性width属性

是指定该图片的宽度和高度

这些属性的值也可以是像素

也可以是百分比

需要注意的是

尽管可以将网页中的图片尺寸

设置的大于或小于实际的图片尺寸

但是我们仍然应该避免这样去做

因为这样的图片

会不如实际的图片尺寸清晰

相反

我们应该尽量的创建

与网页中所需要的尺寸

相同的图片和格式

用ps等图形工具来完成这项操作

同样的

尽量不要使用

太大的显示尺寸的图片

如你的屏幕上

只有100×100像素的显示空间

我们就不要使用800×800像素的图片

因为图片的尺寸越小

文件的大小就越小

浏览器的加载就会越快

使用的流量也就会越少

好 我们现在呢来看一下

制作网站的目录结构

目录结构表现在左侧的这一个

project这个栏目里面

在这里面呢我们可以看到有一个

demo01的文件夹

在这个文件夹里

我们可以再新建文件夹

点右键新建文件夹

有一个cs

设定一个css的文件夹

再设定一个js的文件夹

再添加一个images

放图片的文件夹

通常在制作一个网站的时候

我们最基本的文件夹布局就是这样的

有一个css的文件夹

是放置css文件用的

images文件夹是放置图片文件用的

js文件夹是放置js文件用的

然后其它的所有的网页文件

都放在这些文件夹的外部

也就是说在最顶层的

demo文件夹的中间

这样我们把之前我们用过的图片

都可以存放到

images这个文件夹当中

放到这个文件夹里了

那么现在我们看到的这个文件夹结构

我们可以在对应的

我们这个文件夹当中看到

现在已经对应的有了三个文件夹

还有最外层的一个网页文件

那么现在这种结构呢就是

例如css文件夹

就是demo01文件夹的子文件夹

那么demo01文件夹呢

就是css images

还有js这个文件夹的父文件夹

这就是我们制作网页的目录结构

在之后的url地址栏目中

我们可以看到

在之后的url地址中我们会用到

子文件夹和父文件夹的概念

我们现在呢来学习一下

如何插入一张图片

在网页当中

例如我们先随便找一张图片

放到images这个文件夹当中

找了一张一个小的卡通图片

我们把一张卡通图片

插入到网页当中去

现在回到我们的环境中

看到images文件夹里多了一个

image1的这张图片

双击这张图片可以看到

图片的浏览效果图

然后右上方显示的是一个尺寸

那么我们现在回到网页

这个html文件当中

插入

用img元素src

看一下效果

这张图就插入进来了

我们呢还可以给这张图增加一些属性

宽度

我们再看一下效果

唉 这张图就变小了

但是我们看到图的显示效果变小了

其实它的图片尺寸并没有变小

因此我们在制作网页的时候

尽量还是不把图片的尺寸

有很大程度的调整

如果是微调还是可以的

然后我们把它

如果我们需要一个小图的话

我们把这张大图在ps里面

给它调成我们需要的尺寸就可以了

这样对网页的大小和加载速度

都会有很大的帮助

我们现在呢可以插入了一个图片

我们可以把这个图片

当成是其中的一个元素

我们现在也可以给这个图片增加链接

直接增加a标签元素

给它加一个href的属性

就是链接到什么地方去

我们就给它链接到

我们学堂的这个网址

这个也是一个绝对的url路径

闭标签杠a

我们看一下效果

在这张图上鼠标滑入的时候

就会出现一个小手

代表这张图上是有链接的

点击之后就会跳转到

我们链接到的网站

另外也可以增加一个target的属性

如果我们选择了

这个杠blank这个属性的话

它就可以弹出一个新的页面

看一下效果

好 现在弹出了一个新的页面

原来的页面也保持存在

新的页面

我们不仅可以插入静态的jpg图

也可以插入动态的gif图

我们找了一个gif的小图片

然后把它插入到网页当中

就改成gif的小图片

现在看一下效果

唉 是一个动图

我们经常有网页当中的特效

是通过gif的动图的形式来完成的

同样我们可以把它设置宽度

好 我们现在呢回到案例当中来

把我们设计稿中第一部分的背景图

给插入到

我们制作网页的第一个模块中

一起来看一下

之前我们截取的这一张背景图

在代码当中

在style这个属性里

增加一个背景图的代码

background-image

然后url

就是我们背景图的地址

看一下效果

唉 好

那么我们第一张背景图就插进来了

好 我们现在呢先把我们第一部分的

这个背景图给切出来

首先把上面的这些元素都给隐藏掉

只留下背景图

然后我们用裁切工具

把背景图给裁出来

另存到我们网页刚才

设置的文件夹当中

存成topback这个jpg文件

保存

好 因为我刚才存过了

我替换一下

好的

好 接下来呢

我们把第一部分的这些

所需要的图片元素

给一次裁切出来

先切这个小logo

把它也是另存到我们的文件夹当中

存成jpg文件

起个名字

保存

好 接下来呢我们回来

再来切这个放大镜和这个小三角

为了我们这一行的保持平齐

我们先来拽一个辅助线

然后把这一个盒子给布置出来

好 现在我们来切这个放大镜

按照参考线把它裁切出来

然后我们要的是透明的

所以把底下这个背景给隐藏掉

包括下面这个白色的背景

大家看到

除了放大镜

背景图是这种小网格的形式

这就是半透明的图片

然后我们把它另存成png格式

也是存到我们的文件夹当中

存成png格式

OK 保存

好 这样这个图片

将来放到我们的网页中

它就是透明的

可以层叠在DAV的层上面的图片

接下来再返回来

再来裁切这个小三角

方法和刚才是一样的

沿着辅助线

把背景隐藏

好 另存

png 保存

好了 现在再返回来

我呢是把这一部分作为图片

放在网页当中的

所以我可以把它也给裁切出来

我们也可以拽一个辅助线

跟下面的保持一个下一致

这些差不多就可以了

因为咱们做不到百分之百的

每一个像素都不差的一模一样

好 裁切出来

把背景图隐藏掉

另存 png

OK

在最后呢我们还有一块要切的图片

就是这个放大镜

鼠标滑入的时候会弹出一个输入框

这个输入框我们把它也给切出来

然后我们现在先把

我们可以先把区域框出来

好 还是把背景图去掉

放大镜去掉 背景图去掉

白色的背景也去掉

保存 png 保存

好了 现在我们所需要的

后退一步看一下

在第一个模块中

我们所需要的这些图片 小图

就都已经裁切完成了

现在我们只需要把这些图片

布局到我们的网页当中去

就可以了

好 现在呢我们回到webstorme当中来

我们现在能看到

在images这个文件夹里面

已经包含了我们刚才所存的

所有的图片的元素

那么我们现在先把这个logo

给插入到logo这个位置

放到这个盒子当中来

用img元素

然后让它的就是引用的文件是

images里面的logo.jpg

好 我们来看一下效果

好 现在这个logo已经出现了

但是我们看到目前这个有点大

我们可以给它设置一个宽度

让它比较符合

我们现在页面当中的布局

正常的话

看它弹出来了是70

我们可以给它设一个50像素

然后看看是不是符合我们

想要的这种布局尺寸

好像还可以

就先这么放着

好 接下来呢其它的这些元素

我们在后面学完css之后

然后再慢慢的把它们都布局上