《物联网web应用技术》课件 项目二 任务四家庭温湿度采集界面_第1页
《物联网web应用技术》课件 项目二 任务四家庭温湿度采集界面_第2页
《物联网web应用技术》课件 项目二 任务四家庭温湿度采集界面_第3页
《物联网web应用技术》课件 项目二 任务四家庭温湿度采集界面_第4页
《物联网web应用技术》课件 项目二 任务四家庭温湿度采集界面_第5页
已阅读5页，还剩29页未读， 继续免费阅读

下载本文档

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

文档简介

《Web应用技术》物联网Web应用技术项目二HTML页面任务四家庭温湿度采集界面HTML链接HTML头部信息HTML列表HTML框架回顾3.如何创建复选框?1.HTML页面如何绘制表格？2.如何下拉列表?4.如何输入文字?任务引入任务描述:家庭温湿度采集界面设计与程序编写任务教学目标：掌握HTML的表格。掌握HTML的布局。掌握HTML的表单。任务概要教学内容HTML表格HTML布局HTML表单和输入家庭温湿度采集界面设计一二三四HTML表格知识点一字母td指表格数据（tabledata），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。表格由<table>标签来定义。每个表格均有若干行（由<tr>标签定义），每行被分割为若干单元格（由<td>标签定义）。HTML表格（一）绘制HTML表格（一）绘制HTML表格表格实例<tableborder="1"> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>（二）设置HTML表格边框属性如果不定义边框属性，表格将不显示边框。可使用边框属性设置<tableborder="1">来显示边框。<tableborder="1"><tr><td>Row1,cell1</td><td>Row1,cell2</td></tr></table>（三）设置HTML表格表头表格的表头使用<th>标签进行定义。大多数浏览器会把表头显示为粗体居中的文本<tableborder="1"> <tr> <th>Header1</th> <th>Header2</th> </tr> <tr> <td>row1,cell1</td> <td>row1,cell2</td> </tr> <tr> <td>row2,cell1</td> <td>row2,cell2</td> </tr></table>HTML布局知识点二HTML布局大多数网站可以使用<div>或者<table>元素来创建多列。使用CSS对元素进行定位，或者为页面创建背景以及色彩丰富的外观。（一）<div>元素div元素是用于分组HTML元素的块级元素。<body>

<divid="container"style="width:500px">

<divid="header"style="background-color:#FFA400;">

<h1style="margin-bottom:0;">网页标题</h1></div>

<divid="menu"style="background-color:#FFD600;height:200px;width:100px;float:left;">

<b>MENU</b><br>

HTML<br>

CSS<br>

JavaScript</div>

<divid="content"style="background-color:#EEEE00;height:200px;width:400px;float:left;">

内容</div>

<divid="footer"style="background-color:#FFA511;clear:both;text-align:center;">

©</div>

</div></body>（二）<table>表格布局<table>标签是创建布局的一种简单的方式。<body>

<tablewidth="500"border="0">

<tr><tdcolspan="2"style="background-color:#FFA511;">

<h1>网页标题</h1></td></tr><tr><tdstyle="background-color:#FFD711;width:100px;">

<b>MENU</b><br>

HTML<br>

CSS<br>

JavaScript</td><tdstyle="background-color:#eeee00;height:200px;width:400px;">内容</td></tr><tr><tdcolspan="2"style="background-color:#FFA511;text-align:center;">©</td>

</tr>

</table></body>HTML表单和输入知识点三HTML表单HTML表单用于收集不同类型的用户输入。（一）设置HTML表单表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容,比如：文本域（textarea）下拉列表单选框（radio-buttons）复选框（checkboxes）等等表单使用表单标签<form>来设置；输入标签（<input>）输入元素；输入内容类型由类型属性（type）定义。<form>...input元素...</form>（二）文本域（TextFields）文本域通过<inputtype="text">标签来设定；当用户要在表单中键入字母、数字等内容时，使用文本域。在大多数浏览器中，文本域的默认宽度是20个字符<form> 设备信息:<inputtype="text"name="info"><br> 设备名称:<inputtype="text"name="name"></form>（三）密码字段密码字段通过标签<inputtype="password">来定义；密码字段字符不会明文显示，而是以星号或圆点替代<form> 密码:<inputtype="password"name="pwd"></form>（四）单选按钮（RadioButtons）<inputtype="radio">标签定义了表单单选框选项。<form> <inputtype="radio"name="sensor"value="tem">温度<br> <inputtype="radio"name="sensor"value="hum">湿度</form>（五）复选框（Checkboxes）<inputtype="checkbox">定义了复选框.用户需要从若干给定的选择中选取一个或若干选项。<form> <inputtype="checkbox"name="sensor"value="tem">温度传感器<br> <inputtype="checkbox"name="sensor"value="light">光线传感器</form>（六）提交按钮（SubmitButton）<inputtype="submit">定义了提交按钮；当用户单击确认按钮时，表单的内容会被传送到另一个文件，对输入数据进行相关的处理。表单的动作属性定义了目的文件的文件名。<formname="sub"action="#"method="post"> 传感器ID:<inputtype="text"name="sensorid"> <inputtype="submit"value="提交"></form>家庭温湿度采集界面实训知识点四（一）添加HTML页面布局<!--布局--><divid="container"style="width:800px;"> <divid="header"style="background-color:lightgrey;"> </div> <divid="menu"style="background-color:blanchedalmond; height:500px;width:200px;float:left;"> </div> <divid="content"style="background-color:mediumaquamarine; height:500px;width:600px;float:left;"> </div> <!--底部--> <divid="footer"style="background-color:coral;text-align:center;"> </div></div>添加布局，宽度设置为800px在页面布局中添加标题在页面布局中添加菜单在页面布局中添加内容栏在页面布局中添加底部栏（二）温湿度采集页面代码设计1.设置标题和菜单<!--标题--> <divid="header"style="background-color:lightgrey;"> <h2style="margin-bottom:0;">温湿度采集</h2> </div>设置布局标题（二）温湿度采集页面代码设计1.设置标题和菜单<!--菜单--><divid="menu"style="background-color:blanchedalmond;height:500px;width:200px;float:left;"> <b>MENU</b><br/> <ahref="list.html">温湿度采集</a><br/> <ahref="add.html">温湿度添加</a><br/></div>设置布局菜单布局菜单部分添加“温湿度采集”、“温湿度添加”2个菜单项；分别链接到页面list.html和add.html。（二）温湿度采集页面代码设计2.在布局内容栏添加表格布局内容栏部分添加表格表格中包含：传感器名称、传感器类型、状态、类型。<divid="content"style="background-color:mediumaquamarine;height:500px;width:600px;float:left;"><h3id="sys_sta">温湿度采集</h3><!--表格--><tableborder="1"width="400"><!--表头thead--><thead> <tr> <th>传感器名称</th> <th>传感器类型</th> <thcolspan="2">状态或值</th> </tr></thead><!--表格体tbody--><tbody> ......</tbody> </table> </div>（二）温湿度采集页面代码设计3.设置布局底部栏底部栏部分添加“©demo”<!--底部--><divid="footer"style="background-color:coral;text-align:center;"> ©demo</div>（三）温湿度添加页面代码设计1.内容栏部分添加表单<!--表单--><form> <h3id="sys_set">温湿度添加</h3> <table> ......

<table>

......

</form>如何使用div或table进行页面布局

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

温馨提示

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

最新文档

评论

0/150

提交评论