当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （5）目录、目录结构及在页面中插入图片 > 目录、目录结构及在页面中插入图片
上节课我们学习了网页的布局方法
这是一个非常重要的技术
因为这是一个网页制作的基础
可以通过任意的排列组合
完成我们网页框架搭建的所有要求
希望大家可以多多实验调整
达到灵活运用
在本节课呢
我们来学习一下目录的概念
以及如何在网页中插入图片
我们来了解一下目录及目录结构
目录是网站中对文件夹的一种称呼
一个网站可以包含多个目录
每个目录包含网站的不同部分
在开始建设一个网站的时候
都应该创建好一个目录结构
用于分类存放我们的内容
以承受内容的增长
制作网站时一个最常见的目录结构
如图所示
其中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之后
然后再慢慢的把它们都布局上
-课程简介
--课程简介
-（1） 什么是界面
--什么是界面
-（2）界面设计为什么重要
-（3）UI的进化
--UI的进化
-（4）设计师的自我修炼
--新手的疑问
-第一章总结
--第一章总结
-第一章：界面设计概述--课后习题
-本章概述
--本章概述
-（1） 为什么设计？
-- 为什么设计？
-（2）界面设计流程
--界面设计流程
-（3）视觉优化原理
--视觉优化原理
-（4）可用性评估的基本原则
-第二章：GUI设计心法--课后习题
-本章概述
--本章概述
-（1）信息结构与交互设计（1-4）
--第一讲
--第二讲
--第三讲
--第四讲
-（2） 界面草图与原型设计
-（3）视觉设计原则
--视觉设计原则
-（4） 文字与阅读
--字体设计
-（5）图标
--图标
-（6） 色彩
--色彩
-（7） 动效
--动效设计概述
--动效小制作1
--动效小制作2
-（8）第三章小结
--第三章小结
-（9）学生个人作品网站主页设计体会
--张铁汉
-第三章：界面设计元素--大作业
-前言
--前言
-（1）什么是网页
--什么是网页
-（2）标签与元素
--标签与元素
-（3）文本格式化、块级元素与行内元素
-（4）如何使用H5进行网页布局
-（5）目录、目录结构及在页面中插入图片
-（6）CSS样式表
--CSS样式表
-（7）CSS盒子模型
--CSS盒子模型
-（8）CSS控制文本
--CSS控制文本
-（9）CSS背景、特效、动画
-（10）初识javascript及jquery
-总结
--总结
-邱艺芸-清华大学艺术博物馆APP设计
--邱艺芸
-潘俊丞-阿甘跑步改版界面设计——“趣跑”
--潘俊丞
-王婧-星巴克改版设计
--王婧
-李向阳-DIY服装app设计
--李向阳
-相宸卓-效率软件改版设计
--相宸卓
-周文欣-“你好，安德烈”app设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
