基于Bootstrap进行网页设计

一、前言

1、实验目的：

• 熟悉界面设计的原则；
• 熟悉CSS/javascript的语法和编程；
• 学习bootstrap 教程 bootstrap网址

2、实验内容：

• 设计MOCOM实验室的主页，有实验室介绍、科研信息展示等；(不一定参考现在的页面；可以自行设计)

二、环境

1. 操作系统： Windows 10 X64
2. 工具：VsCode

三、实验步骤

1. 在网上学习bootstrap教程，打开vscode，新建一个html文件，命名为“MOCOM网站主页”。先进行整体风格的确定，我想做出一种简约开放，商务高端的界面风格；主色调采取深蓝，黑，浅灰；图片和每个模块尽量铺面整个屏幕，比较大气。
2. 观察bootstrap的每个示例，在head标签中都有以下几行代码。title标签表示该网站的标题名称，下面几句以防中文乱码，并能够使用js脚本文件。

3. 接下来编写body标签中的代码部分。第一个盒子是Jumbotron（超大屏幕），会创建一个大的灰色背景框，里面可以设置一些特殊的内容和信息。

  
移动计算与数据分析
  

      Mobile Computing & Data Analysis
    
 

效果截图：

1.png

4. 下面是一个带有“厦门大学”品牌的导航栏。其中.navbar-brand 类用于高亮显示品牌/Logo，导航栏中的每一个元素都是一个链接，点击即可切换到子页面。

  厦门大学
  
    
  
  

    

      

        主页
      
      

        新闻
      
      

        人员
      
      

        科研
      
      

        课程
      
      

        实践
      
  
      

        文章
      
      

        登录
      
  
    

效果截图：

2.png

5. 下面是轮播图的代码，从网上找了三张图片进行轮播；并有两个按钮可以进行左右切换。

效果截图：

3.png

6. 讲一个大盒子分割成“课程”，“新闻”，“项目”和“文章”四块。每块用一个链接列表项实现。

  

    

      
课程
      

            第8、9章课件
            实验十：基于Boostrap进行网页设计
            web Service例子
            期末大作业的要求 
            进行上机实验考试的通知
            web界面设计模式 -- 报告报名
          
        

      
项目
      

            软件和共享
            Xiamen Taxi Dataset
            轨迹数据的挖掘和可视化 
            车载网络数据收集
            直播流媒体技术
            WebGIS 地图展示
          
    

    

      
新闻
      

            香港浸会大学招收数据库和数据挖掘方向的博士研究生 
            实验室5个项目获厦门大学大学生创新创业计划项目资助
            天津理工大学李玉坤教授访问MOCOM实验室  
            MOCOM实验室长期招募研究生/本科生 
            厦门大学软件学院暑期夏令营招生简章 
            墨尔本大学甘骏豪老师招收博士生  
          
        

      
文章
      

            Hetero-Edge论文介绍_陶玉娇
            论文阅读：Adaptive Dynamic Bipartite Graph Matching A Reinforcement Learning Approach_杨诗鹏_熊安书
            Cplex介绍_徐易凡_孟戈 
            特征抽取：CountVectorizer -- spark.ml
            编程是什么：面朝大海，打字编码
          

    
  

效果截图:

4.png

7. 最后一部分就是底部盒子了，背景颜色选用深灰色，内容填充为文本。

  
厦门大学 MOCOM 计算小组 @ 2016   备案号:U500819

效果截图：

5.png

8. 整体效果截图：

   
   
   6.png
   
   
   7.png

四、总结

• 要多多学习CSS和JS；老师推荐的bootstrap对我很有帮助