当前课程知识点：界面设计导论 > 第四章：从设计到实现：H5网页基础概念 > （4）如何使用H5进行网页布局 > 如何使用H5进行网页布局
上节课我们学习了
在网页中如何使用文本
进行格式化
以及认识了什么是块级元素
和行内元素的概念
在本节课中我们来讲一下
在网页制作中如何使用h5
进行网页布局
在h5程序中
网页布局主要用到的元素
分为基本布局元素
和列表布局元素
大家来看一下
这些基本布局元素
下面这个呢是
列表布局元素
主要分为无序列表 有序列表
以及定义列表
这个是布局的一个展示
这张图表示了基本布局元素的
一个排列方式
有两种写法
我们现在在代码中呢
来实现一下我们
基本布局的模型
体会一下
这些基本布局模型标签的用法
我们现在在body元素当中
输入我们的这些基本布局模型的元素
例如先在最上面
添加一个头部的盒子
这是一个头部元素
在头部元素当中
有一个title的元素
插入一个title的盒子
接下来呢是一个
导航条的盒子
这些id起什么名字都可以
根据自己的习惯来起就行
下面有一个文章的盒子
大家千万不要忘了备标签
在右侧还有一个右边框的盒子
然后最下面是一个脚步的盒子
好了 这是基本的布局
那么我们为了看出效果
把这些盒子分别加上颜色
加上一些属性
然后待会儿我们好看出效果
比如头部的这块呢我们
把它加一个颜色
加一个宽度和高度
让它的排列方式是左对齐的
流排布方式
title这块增加一个颜色
给它设成45吧
这样能看到一点header
与它是包含关系
能看到一点header的部分
float都是left
宽度
因为我们这个article和aside
都是左右结构
所以我们给它弄一个三七开吧
增加一个颜色
最后在下面footer这块
再增加一个宽度百分百
高度 颜色 float left
我们现在来看一下效果
好 这就是
我们基本布局元素的效果
现在所有的内容
可以分别放到这里面的
每一个盒子里
例如我们现在主体文章部分
我们可以再加几个元素
来看一下效果
在主体文章这个盒子里面增加
再插入一个盒子
给它增加一个颜色
好 再来看一下效果
现在这是增加了三个部分
我们这个颜色有点
跟这边重合了
我们换一个颜色
把这个换一个颜色
再把这儿设成90吧
这样比较清楚
好 现在大家看到
在我们的主体部分
当中出现了三个盒子
接下来我们就可以
把具体的内容文字
放在这三个盒子当中
这就是一个文章的主体部分
现在就是一个基本布局的应用
大家可以根据
自己的设计稿的需求
然后来看使用哪些部分
使用哪些标签
我们现在呢
来看一下列表元素
列表元素呢主要分为
无序列表 有序列表
现在我们先来看一下
无序列表怎么写
是由ul li
在ul当中增加li的列表项
li可以是多个
比如我们有四个列表项
随便给增加一些内容
现在呢就出现了四个列表项
每一个列表项前面
都是一个小圆点
这个是默认的情况
那么每一个列表项它们是并列的关系
中间没有顺序问题
所以它们是无序列表
那么我们现在可以调整的呢
是这个ul上面的type属性
我们可以改变一个
让前面变成小方块
或者还可以是一个空心圆
空心的圆圈
甚至呢还可以是一些图片
动图 gif图 都可以
大家可以试一下
那么无序列表呢
经常会在导航
或者是多个相同样式的模块
出现的时候
会非常常用
这个我们在后面的css当中
还会继续介绍
下面我们来看一下有序列表
就把ul改成ol
中间的列表项还是li
看一下效果
现在就变成1 2 3 4
这种有序的排列的一个列表项
我们可以呢给它增加一个start属性
例如start是5
可以看一下
现在每一个列表项前面的这个标记号
是从5开始的
而且是顺序的开始
我们可以改一个
例如改成10
可以看到就从10开始了
另外呢我们还可以给它增加一个
type属性
type可以是A类型的
大写字母类型的
阿拉伯数字类型的
小写字母类型的
大写罗马数字类型的
还有小写罗马数字类型的
我们随便给它加一个
例如这个大写字母类型的
看一下效果
那么现在就是从第五个
大写字母顺序排列
因为我们刚才由start
那个第五步开始的
我们可以再给它换一个
小写的罗马数字类型看一下
就是从第五个小写罗马数字类型开始
顺序排列
还可以换一个大写的罗马数字
就是大I
好 现在就是大写的罗马数字了
这就是有序列表
它呢经常会用在文档排版当中
根据我们的需要来使用
我们现在呢回到设计稿当中
来分析一下设计稿的布局结构
首先我们来看最外层的盒子
它是由这一部分
这是第二个盒子
这是第三个盒子
然后这是第四个盒子
然后每一个盒子当中呢
所有的内容都可以
在里面再嵌套盒子
像这一块就会用到一个无序列表
这一块就是一个单独的盒子
这也是单独的盒子
这也是单独的盒子
下面的布局方式也基本上是一致的
每一个元素都会是一个单独的盒子
这种模式相同的格式的按钮
也可以做成无序列表
类似这样的也会是一个无序列表
这里呢就是一些表单
好 我们现在来实现一下第一部分
好 我们现在回到编程环境的代码当中
先把最外层的四个布局的盒子
给做出来
先放四个盒子
好 我们为了看出来呢
把它们先都增加一些
背景色呀 宽度 高度
先随便加一个颜色
加一个宽度高度先设成100像素吧
把这个属性分别放到四个盒子当中
改一下颜色
这样我们就能看出四个盒子的分界线
好 看一下效果
好 现在四个盒子
就已经布到我们的网页当中了
现在我们把第一个盒子
做一下详细的布局
我们先在设计稿里
先来测量一下第一个盒子的高度
宽度肯定是100%吗
然后测量一下它的高度
用选择工具
可以来勾一下第一个盒子的高度
在右侧呢会出现它的宽高的信息
像现在是917像素
那么我们第一个盒子的
高度就是917像素
我们把这个数值填到代码当中
高度917
看一下效果
那么我们现在第一个盒子的高度
就已经出现在页面当中了
那么现在第一个盒子的尺寸
是正确的
我们现在回到设计稿当中
再来看一下第一部分的布局
是怎样做的
我们可以先用辅助线
来划分一下第一部分布局的格局
根据页面上面的元素来划分一下
好 这个条是第一个盒子
然后它里面包含了小logo
还有搜索框
还有选择框的一些内容
接下来是文字这部分
文字这部分可以用图片
也可以用文字来做
咱们这里呢就用图片来做
这样比较美观
然后也比较好控制
最下面还有一个无序列表的盒子
好
整体上我们先这样布局
接下来呢我们在代码上
把这些布局给写出来
首先都是在第一个盒子当中的
因此我们都写在第一个盒子当中
先做第一个头部的这个大盒子
id还是根据自己的个人习惯
来起名字
在大盒子里面有一个logo的小图标
我们先在这里标明
是个logo的图片
这部分呢就是我们看到
在设计页当中这个搜索框
是有一个输入区域的
这个背景输入区域
所以搜索框包含了
输入区域和搜索图标
因此我们把这两个元素
做成一个盒子
是这个盒子
里面包含了一个搜索框
还有一个输入框就是背景
再往下呢就是语言这一块
这个盒子
在这个盒子里也是有
下拉显示的这部分
所以把它也做成一个盒子
里面包含了后面的元素
和前面显示的元素
我们要先把它都做出来
然后再来用代码控制它
显示还是不显示
好 我们先给它写出来
最后面呢还有一个小三角
也给写出来
好 那么我们第一条的元素就做完了
我们现在呢接着往下写
现在做第二部分
第一个header这部分已经做完了
然后做第二部分
这部分呢我们要插入一个图片
将来这块插入一个图片
文字的图片
因此我们就写一个盒子就可以了
再往下呢就要做这个无序列表
这部分
无序列表还记得怎么写吗
它是由三个列项
其中呢前面包括一个小方块
后面是一个文字
这两部分我们也加进去
然后是个文字
好了
那么我们第一个部分
整个的元素布局就已经做完了
可以试着把后面的
这几个模块的元素 布局的方式
都往代码里做一做
看看会遇到什么问题
-课程简介
--课程简介
-（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设计
--周文欣
-走近游戏交互设计
--走近游戏交互设计
-《稻之道》(作者：于汉杰)
--稻之道-于汉杰
-《思想咖啡》(作者：艾瑞雯)
--思想咖啡-艾瑞雯
-《稻香村京八件销售网页设计》(作者：王依柳)
