人机交互原理及应用第五次实验报告

今天我们继续进行CSS排版练习

过程

第一题： 第一题

图示

学习过CSS盒子模型这个就很简单啦。将各个部分放置于一个div中，设置好float属性和div的宽度，内容就可以自动排版了。同时记得使用padding和margin设置边距，这个过程慢慢调试即可。

CSS（1）
效果（1）

上图我已经添加了一部分内容，字体颜色背景色使用color和background-color,大家可以自行调整。
接下来我们设置一个表格。表格的tag是<table>，在表格的内部分辨使用<tr>,<th>(表示表格的标题)<td>来表示。<tr></tr>用于表示一行的开始和结束，我们一般习惯一行一行写，每一行写个三列即可。

table(1)

表格同样可以用css设置格式

table(2)
但是我觉得内容不够，想多加点文字图片。那是没什么限制，需要注意的是要调整div大小，内容超出边框就不好看了。
最后我们再设置一个浮动框。让一个div一直相对屏幕保持位置而不随内容移动而改变只需要在position中设置fixed，然后在left和botton中设置与左边和底部的相对位置即可。 floatbox(1)
效果（2）

第二题：把以前实验的主页重新设计

这个也是见仁见智。上次做的内容以文字为主，这次就多加一些图片。

首先将主页的头图换成大的，比较震撼。

头图
效果（1）

然后重新排版菜单栏，和新闻并列，并将颜色风格调整至和厦大风格相似。菜单栏的链接也设置了各种状态下的属性。再加一个栏目给焦点新闻。

菜单和新闻
效果（2）
效果（3）
同时加上刚学的floatbox，给用户更多的交互空间。方便用户寻找信息。一般一直在用户眼前停留的部分都是用户常用的。

总结

本次实验再次熟练使用了盒子模型，对盒子模型的大小和位置有了更深刻的了解。重新设计了厦门大学的主页，使用了更多的图片，觉得更方便阅读。人类五官中最多的就是来自眼睛的信息。利用好图片能够让用户更加具有身历其境之感。制作网页可以多多花点时间寻找图片素材。