项目(智慧教室)第四部分,页面交互功能

一。页面构思

1.标题栏

        大标题:智慧教室管理系统

        小标题:灯光,报警,风扇,温度,湿度,光照

2.样式设计

        背景设置。字体设置(字体大小,格式,颜色)

3.导航栏

        6个导航栏标签:3个传感器,3个控制

        每次点击导航栏标签:页面对应做出页面展示。

4.前后台交互设计

        1.定时刷新传感器设置(当用户点击传感器标签,需要把数据展示给用户)

        2.控制下发(当用户点击控制标签,需要根据用户下发的命令进行控制实际的硬件,并且在主题栏进行动态展示)

二。前端开发基本技能

1.html

主要内容:html(最外边),head(页面头),body(页面身)标签

        项目(智慧教室)第四部分,页面交互功能_第1张图片

2.CSS--》静态页面的样式

        对不同区域的资源设置样式(body,header,h1区域的样式设计)

项目(智慧教室)第四部分,页面交互功能_第2张图片

3.javaScript(js)

        动图设计,

项目(智慧教室)第四部分,页面交互功能_第3张图片

常用的网页:jQuery,有很多现成的页面资源可以使用。

        jQuery API 中文文档 | jQuery API 中文在线手册 | jquery api 下载 | jquery api chm

开发方式:

1.BootStrap(基于框架的开发)

Bootstrap中文网

2.Vue(渐进式js框架)

Vue.js - 渐进式 JavaScript 框架 | Vue.js

3.react(现成的框架)

React 官方中文文档

本项目运用到的技术:js,css(了解即可)

三。Web页面布局

1.标题栏布局

(1)页面展示

具体代码

headr,h1的样式在上面CSS中有定义。

(2)small是小字体

    

智慧教室管理系统 温度、湿度、风扇、报警,光照

2.导航栏布局

(1)页面展示

项目(智慧教室)第四部分,页面交互功能_第4张图片

(2)具体代码

你可能感兴趣的:(物联网,单片机,stm32,人机交互)