物联网智慧教室项目7

D7网页交互功能开发（前端）

课程总结：主要是了解前端开发的思路

7.1界面构思

7.1.1原型分析

7.1.2界面构思

（一）标题栏

（1）标题设计

大标题：智慧教室管理系统
小标题：灯光，报警，风扇，温度，湿度，光照

（2）样式设计

- 背景色配置
- 字体配置

        - 字体大小，格式，颜色

（二）导航栏

 （1）布局

导航栏标题

提示用户用于智能管理使用的，用图片进行设计

（2）导航标签 

 6个导航标签

3 个用于传感器
3 个用于控制
每一个标签，都有图标和文件进行展示

 6个导航展示界面

3 个传感器
    显示传感器名称和传感器值
3 个控制
    显示控制名称和控制按钮

 （3）样式设计

当鼠标每点击一个导航标签，我都需要进行导航界面展示

 （4）前后台交互设计

- 定时刷新传感器数据值（当用户点击传感器标签，需要把传感器值实时的展示给用户）
- 控制下发（当用户点击控制标签，需要根据用户下发的命令进行控制实际的硬件，并且在主题栏进行动态展示）

（三）主题栏

（1）布局

主题界面

给用户展示一个智慧教室的图片

 风扇图标

  当用户开关风扇时，这个图标要进行动态效果

报警器图标

当用户开关灯泡时，我们教室的主界面要展示动态效果

7.1.3素材设计

导航栏素材
 

 主题栏素材

7.2前端开发技术

7.2.1开发工具

https://code.visualstudio.com/

7.2.2前端开发基本技能

html(布局设计)

 

 CSS（样式设计）

 

JavaScript

 

jQuery

http://jquery.cuishifeng.cn/index.html

 

7.2.3基于框架开发

BootStrap

https://www.bootcss.com/