一、前言
- 实验要求
设计MOCOM实验室的主页，有实验室介绍、科研信息展示等信息 - 开发环境？
- 操作系统： Windows 10 X64
- 软件：Hbuilder
二、设计分析
- 1.功能分析
①网页应该具有超链接和图片链接的功能
②网页应该分成不同的板块 -
- 交互设计
颜色：作为厦门大学mocom实验室官网，我选择用黑色作为主旋律，黑色相对凝重，但通过给不同板块之间设置不同透明度可以制造出时尚和轻松感。同时，黑色几乎是唯一一款可以占据90的颜色却依然协调的颜色，很适合初学者来练手。
- 交互设计
字体：
中文字体
所有中文字体大部分为非衬线字（微软雅黑和黑体），非衬线的优点在上一张的字体种有讲到。
友情链接：字体·认知心理与界面
字体如下所示：
一级标题使用了经典雅黑，二级标题提使用了黑体，三级标题使用了微软雅黑。
使用黑体是为了使得界面光滑扁平，便于阅读，而使用不同的黑体是根据用户的视觉顺序，按照视觉冲击程度梯度递减的顺序设置字体。
英文字体：
Algerian.
这是一款有铜版印刷质感的非衬线字体，选取这款字体的原因是觉得这款字体有卡通元素的同时兼具哥特体的严肃感，在给画面增加视觉趣味的同时没有影响整体的严肃感。同时这款字体非常适用于黑底白字的风格，和本网页的风格一致。
Castellar
这是一款有铜版印刷质感的衬线字体，因为这部分内容（Mobline Computing）并不重要，但处于不同板块的交界处，视觉美感的重要性大于阅读便利，因此我选用了这款衬线字体。
字体部分的代码
排版：
极简风格：作为mocom的主页，该网页并不需要把太多冗杂的信息展示出来，我摘取了两部分：实验室介绍和科研信息，在这两区域中分别增加了相关链接。
标题居中：我并没有把移动计算和数据分析放在最上方，用户不能够快速地理解这个词汇的意义：没有提到这个实验室隶属于厦门大学，甚至没有提到这是一个实验室网页，所以在最上方的大标题显得有点多余。我认为放在两个分模块下方便使用户理解标题的意思。如下图所示：
三、编程分析
-
排版代码：分成了header,content(lab,research),middle,content 2,footer五个主要板块。
.header{
width:1800px;
height:45px;
background-color: black;
opacity: 0.9;
margin:0 auto;
}
hearder是最上方的板块。
这里我们为了让其颜色看起来更自然，使用0.9的不透明度，代码为opacity:0.9;
.content1{
width:1800px;
height:450px;
background-color: antiquewhite;
opacity: 0.9;
margin:0 auto;
}
从上到下将网页分为head，content1，logo，content2，footer几部分。
content1和content1在水品方向上内嵌了几个sub-div。
在布局上，我们首先要使得content1，content2居中排列，设置代码为：margin ：0 auto
.lab{
width:899.5px;
height:450px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.line{
width:1px;
height:450px;
background-color: darkslategrey;
opacity: 0.9;
margin:0 auto;
float:left;
}
.reserch{
width:899.5px;
height:450px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
我们将content1分成三部分：lab，line，reserch分别展示实验室介绍，中间的分割线和科研信息。
为了使得这三个分板块将content1填充满，我们把使其拥有和content1相等的height，三板块的width加起来等于content1的width。
为了使得这三个板块水品排布，我们使用代码float:left;,使得板块向左对齐
.logo{
width:1480px;
height:150px;
background-color: black;
opacity: 0.9;
margin:0 auto;
}
.lineword
{
width:1280px;
height:50px;
background-color: white;
opacity: 0.9;
margin:0 auto;
}
.horiline
{
width:888px;
height:4px;
background-color: black;
opacity: 0.9;
margin:0 auto;
}
.middle{
width:910px;
height:35px;
background-color: black;
opacity: 0.9;
margin:0 auto;
}
.content2{
width:1700px;
height:1000px;
background-color: white;
opacity: 0.9;
margin:0 auto;
}
content2采用了和content1类似的划分方法：
.left{
width:850px;
height:900px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.leftup1{
width:200px;
height:200px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.leftup2{
width:650px;
height:200px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.leftdownblank{
width:300px;
height:500px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.leftdown{
width:500px;
height:700px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
pading:23px;
border-style: double;
border-color: black;
border-width: 1px;
}
.leftdownleft{
width:50px;
height:700px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.leftdownright{
width:450px;
height:700px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
.right{
width:850px;
height:700px;
background-color: white;
opacity: 0.9;
margin:0 auto;
float:left;
}
最后我们为页面底部设计一个不透明度较高的黑色板块来显示学校信息。
.footer{
width:1800px;
height:200px;
background-color: black;
opacity: 0.7;
margin:0 auto;
}
-
字体代码：
我们为不同字体设置不同颜色，大小和字体，并调整其透明度。
p1{
color:black;
font-size:px;
font-family:"microsoft yahei";
}
p2{
color:black;
opacity:0.9;
font-size:33px;
font-family:sans-serif;
font-weight:blod;
background-color:white;
}
p3{
color:white;
opacity:0.9;
font-size:60px;
font-family:"Algerian";
font-weight:blod;
background-color:black;
}
通过p2和p3的代码，我们可以看出
font-family:"字体“
font-family:字体
这两种写法，语法都正确。
p4{
color:black;
opacity:0.9;
font-size:30px;
font-family:"sans-serif";
font-weight:blod;
background-color:white;
}
linewr{
color:black;
opacity:0.9;
font-size:35px;
font-family:"Castellar";
font-weight:blod;
background-color:white;
}
p5{
color:white;
opacity:0.9;
font-size:70px;
font-family:"字魂35号-经典雅黑";
font-weight:blod;
background-color:black;
}
subtitle{
color:white;
opacity:0.9;
font-size:55px;
font-family:"sans-serif";
font-weight:blod;
background-color:black;
}
footstyle{
color:white;
opacity:0.9;
font-size:30px;
font-family:"sans-serif";
font-weight:blod;
background-color:black;
}
设置链接：(以实验室介绍板块为例）
实验室人员介绍
实验室课程介绍
实验室课程介绍
三、实验总结
1.css和html的混编方法：
法一：使用html标签的style属性
每个html标签上面都有一个属性:style,把css和html结合在一起
例如：
混编方法一
hjwblog.com
法二：使用html的style标签
在
里内嵌一个法三：在style标签中@import
1.创建一个css文件
2.在html文件的style标签中import
例如：
CSS文件：（名为ModelCss）
div{
background-color: black;
opacity:0.9;
color: white;
}
HTML文件：
混编方法三
hjwblog.com
法四：使用头标签 link
例如：
混编方式四
https://www.jianshu.com/writer#/notebooks/38221597/notes/65564921/preview
本文使用了法二。
2.浮动控制：
- float的使用
float：right/left/none的用法如下：
|参数值|效果|
| :---:|:---|
|none | 对象不浮动|
|left | 对象浮在左边
|right | 对象浮在右边
如果我们想要让两个width=100px的div去”填满“一个width=300px的div，可以让左边的div向左浮动，右边的div向右浮动：
实例代码：
.leftBox{
height:300px;
width:740px;
background-color: #C9F;
margin:0 auto;
float:left;
}
.rightBox{
height:300px;
width:210px;
background-color: #FCF;
margin:0 auto;
float:right;
}
- clear的使用
如果希望取消浮动，可以用clear:both
示例代码：效果为style=example的div内元素不向左浮动。
.example
{
float:left;
clear:both;
}
本文到此结束，感谢阅读