《物联网web应用技术》课件 项目五 任务一安防报警系统界面编写_第1页
《物联网web应用技术》课件 项目五 任务一安防报警系统界面编写_第2页
《物联网web应用技术》课件 项目五 任务一安防报警系统界面编写_第3页
《物联网web应用技术》课件 项目五 任务一安防报警系统界面编写_第4页
《物联网web应用技术》课件 项目五 任务一安防报警系统界面编写_第5页
已阅读5页，还剩45页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

《web应用技术》拓展篇

Web开发框架物联网Web应用技术Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架，常用的前端的框架有Bootstrap、Flex、ExtJS、Easyui、MiniUI、jQueryUI、DWZ、GWT、YUI、Sencha、Dojo、ZK、OperaMasks-UI、JavaFX等。篇章引入章节任务2022年3月1日黄冈教育谷《Web应用技术》物联网Web应用技术项目五

Web开发框架任务一

安防报警系统界面编写回顾HTMLDOM基本操作DOM事件DON节点操作3.如何设置响应式图像?1如何使用框架创建网页？2.如何使用框架实现移动设备优先?4.如何布局排版?任务引入任务描述:安防报警系统界面设计与程序编写任务教学目标：了解常用前端Web框架了解Bootstrap开发框架、组件。掌握Bootstrap环境安装、CDN设置。掌握Bootstrap框架样式的基本使用。。任务概要教学内容Web开发框架Bootstrap的简介和环境安装BootstrapCSS使用安防报警系统界面程序设计一二三四Web开发框架知识点一Web应用框架有助于减轻网页开发时共通性活动的工作负荷，例如许多框架提供数据库访问接口、标准样板以及会话管理等，可提升代码的可再用性。Web开发框架（一）Web开发框架Web前端框架就是为了节约开发成本和时间，一般开发一个项目都会用到前端框架，常用的前端的框架有Bootstrap、Flex、ExtJS、Easyui、MiniUI、jQueryUI、DWZ、GWT、YUI、Sencha、Dojo、ZK、OperaMasks-UI、JavaFX等。Web开发框架（二）Web前端开发框架（二）Web前端开发框架Bootstrap的简介和环境安装知识点二Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。Bootstrap（一）Bootstrap移动设备优先。浏览器支持：所有的主流浏览器都支持Bootstrap。容易上手：只要具备HTML和CSS的基础知识，就可以开始学习Bootstrap。响应式设计：Bootstrap的响应式CSS能够自适应于台式机、平板电脑和手机。

为开发人员创建接口提供了一个简洁统一的解决方案。包含了功能强大的内置组件，易于定制。提供了基于Web的定制。是开源的。（二）Bootstrap包的内容Bootstrap包的内容：基本结构：带有网格系统、链接样式、背景的基本结构。CSS：全局的CSS设置、定义基本的HTML元素样式、可扩展的class，以及一个先进的网格系统。组件：包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。JavaScript插件：包含了十几个自定义的jQuery插件。定制：可以定制Bootstrap的组件、LESS变量和jQuery插件来得到自定义的版本。（三）Bootstrap环境安装Bootstrap安装是非常容易的，可以通过以下两种方式来安装Bootstrap5：使用Bootstrap5CDN；从官网下载Bootstrap5（三）Bootstrap环境安装可以从

/

上下载Bootstrap的最新版本。下载使用Bootstrap的预编译版本。1.从官网下载Bootstrap5（三）Bootstrap环境安装预编译版本文件结构。1.从官网下载Bootstrap5（三）Bootstrap环境安装使用Bootstrap的基本HTML模板<!DOCTYPEhtml><html><head><title>Bootstrap模板</title><metaname="viewport"content="width=device-width,initial-scale=1.0"><!--引入Bootstrap-->

<linkhref="/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><!--HTML5Shiv和Respond.js用于让IE8支持HTML5元素和媒体查询--><!--注意：如果通过file://引入Respond.js文件，则该文件无法起效果--><!--[ifltIE9]><scriptsrc="/libs/html5shiv/3.7.0/html5shiv.js"></script><scriptsrc="/libs/respond.js/1.3.0/respond.min.js"></script><![endif]--></head>

1.从官网下载Bootstrap5（三）Bootstrap环境安装使用Bootstrap的基本HTML模板<body><h1>Hello,world!</h1><!--jQuery(Bootstrap的JavaScript插件需要引入jQuery)-->

<scriptsrc="/jquery.js"></script><!--包括所有已编译的插件-->

<scriptsrc="js/bootstrap.min.js"></script></body></html>

Bootstrap的模板：使用一个常规的HTML文件包含jquery.js、bootstrap.min.js和bootstrap.min.css文件。1.从官网下载Bootstrap5（三）Bootstrap环境安装国内推荐使用StaticfileCDN上的库<!--新Bootstrap

核心CSS文件

--><linkhref="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"><!--

jQuery文件。务必在bootstrap.min.js之前引入--><scriptsrc="/jquery/2.1.1/jquery.min.js"></script><!--最新的Bootstrap

核心JavaScript文件--><scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>还可以使用以下的CDN服务：国内推荐使用:/国际推荐使用：/。2.Bootstrap5CDNBootstrapCSS使用知识点三（一）添加HTML5文档（Doctype）Bootstrap使用了一些HTML5元素和CSS属性。需要使用HTML5文档类型（Doctype）。<!DOCTYPEhtml><html>....</html>（二）移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签；<metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

width=device-width表示宽度是设备屏幕的宽度。

initial-scale=1表示初始的缩放比例。user-scalable=no禁用缩放（zooming）功能maximum-scale=1.0与user-scalable=no一起使用，这样禁用缩放功能后，用户只能滚动屏幕。（二）移动设备优先为了让Bootstrap开发的网站对移动设备友好，确保适当的绘制和触屏缩放，需要在网页的head之中添加viewportmeta标签；<metaname="viewport"content="width=device-width,initial-scale=1.0"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

width=device-width表示宽度是设备屏幕的宽度。

initial-scale=1表示初始的缩放比例。user-scalable=no禁用缩放（zooming）功能maximum-scale=1.0与user-scalable=no一起使用，这样禁用缩放功能后，用户只能滚动屏幕。（三）响应式图像图像有各种各样的尺寸，需要根据屏幕的大小自动适应。可以通过在<img>标签中添加.img-fluid类来设置响应式图片。.img-fluid类设置了max-width:100%;、height:auto；<imgclass="img-fluid"src="img_chania.jpg"alt="Chania">（四）图片类.rounded类可以让图片显示圆角效果；.rounded-circle类可以设置椭圆形图片；.img-thumbnail类用于设置图片缩略图(图片有边框)；.float-start类来设置图片左对齐；.float-end类设置图片右对齐；.mx-auto(margin:auto)和.d-block(display:block)类来设置图片居中对齐<imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgclass="img-fluid"src="img_chania.jpg"alt="Chania"><imgsrc="paris.jpg"class="float-start"><imgsrc="cinqueterre.jpg"class="float-end"><imgsrc="paris.jpg"class="mx-autod-block">（五）容器Bootstrap5需要一个容器元素来包裹网站的内容，可使用以下两个容器类：.container类用于固定宽度并支持响应式布局的容器。.container-fluid类用于100%宽度，占据全部视口（viewport）的容器。。（五）容器<divclass="container">...</div>1.固定宽度：.container

类用于创建固定宽度的响应式页面。宽度(max-width)会根据屏幕宽度同比例放大或缩小。（五）容器<divclass="container-fluid">...</div>2.100%宽度：.container-fluid类用于创建一个全屏幕尺寸的容器，容器始终跨越整个屏幕宽度（width始终为100%）。（五）容器<divclass="container-sm">.container-sm</div><divclass="container-md">.container-md</div><divclass="container-lg">.container-lg</div><divclass="container-xl">.container-xl</div><divclass="container-xxl">.container-xxl</div>3.响应式容器：.container-sm、.container-md、.container-lg、.container-xl类来创建响应式容器。容器的max-width属性值会根据屏幕的大小来改变。（六）网格系统针对不同的设备，Bootstrap5网格系统分为以下6个类：.col-针对所有设备。.col-sm-平板-屏幕宽度等于或大于576px。.col-md-桌面显示器-屏幕宽度等于或大于768px。.col-lg-大桌面显示器-屏幕宽度等于或大于992px。.col-xl-特大桌面显示器-屏幕宽度等于或大于1200px。.col-xxl-超大桌面显示器-屏幕宽度等于或大于1400px。。（六）网格系统在不同设备上设置列宽度。<!--控制列的宽度及在不同的设备上如何显示--><divclass="row">

<divclass="col-*-*"></div></div><divclass="row"><divclass="col-*-*"></div><divclass="col-*-*"></div>

<divclass="col-*-*"></div></div>

创建一行(<divclass="row">)添加需要的列(.col-*-*类中设置)第一个星号(*)表示响应的设备：sm、md、lg或xl；第二个星号(*)表示一个数字，同一行的数字相加为12。（六）网格系统Bootstrap自动处理布局。<!--Bootstrap自动处理布局--><divclass="row"><divclass="col"></div><divclass="col"></div><divclass="col"></div></div>

不在每个col上添加数字，让bootstrap自动处理布局；同一行的每个列宽度相等：两个"col"，每个就为50%的宽度；三个"col"每个就为33.33%的宽度；四个"col"每个就为25%的宽度。（七）Bootstrap浏览器/设备支持Bootstrap支持最新版本的浏览器和平台。ChromeFirefoxIEOperaSafariAndroidYESYES不适用不适用不适用iOSYES不适用不适用不适用YESMacOSXYESYES不适用YESYESWindowsYESYESYES*YES不适用安防报警系统界面程序设计知识点四（一）Bootstrap环境创建1.下载Bootstrap从

/

上下载Bootstrap的最新版本。下载CompiledCSSandJS预编译的版本（一）Bootstrap环境创建2.创建img文件夹在bootstrap-5.1.3-dist文件目录下，创建img文件夹。（一）Bootstrap环境创建<!DOCTYPEhtml><html><head> <title>Bootstrap模板</title> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <!--[ifltIE9]> <scriptsrc="/libs/html5shiv/3.7.0/html5shiv.js"></script> <scriptsrc="/libs/respond.js/1.3.0/respond.min.js"></script> <![endif]--></head><body> <h1>Hello,world!</h1> <scriptsrc="/jquery.js"></script> <scriptsrc="js/bootstrap.min.js"></script></body></html>3.创建HTML模板在bootstrap-5.1.3-dist文件目录下，创建HTML模板.html文件；在HTML模板.html文件中添加代码，代码如下（二）创建安防报警系统界面新建“安防报警系统界面”项目，并新建“安防报警系统界面.html”。复制模板代码，粘贴代码到“安防报警系统界面”文件中。（三）添加安防报警系统界面页面内容<!DOCTYPEhtml><html><head> <metacharset="UTF-8">

<title>安防报警</title><linkrel="stylesheet"href="/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <scriptsrc="/jquery/2.1.1/jquery.min.js"></script> <scriptsrc="/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head>在head部分将文档标题修改为“安防报警系统”；1.修改head中标题（三）

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论