第3章--网页布局与交互cl.ppt

机械工业出版社电子工业出版社机械工业出版社网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第3章网页布局与交互3.1表格3.1.1表格的结构表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和显示如图3-1所示。3.1表格3.1.2表格的基本语法表格的语法格式为：<tableborder="n"width="x|x%"height="y|y%"cellspacing="i"cellpadding="j"><captionalign="left|right|top|bottomvalign=top|bottom>标题</caption><tr><th>表头1</th><th>表头2</th><th>…</th><th>表头n</th></tr><tr><td>表项1</td><td>表项2</td><td>…</td><td>表项n</td></tr>…<tr><td>表项1</td><td>表项2</td><td>…</td><td>表项n</td></tr></table>3.1表格3.1.3表格修饰表格是网页布局中的重要元素，可以对其设置进而美化表格。1．设置表格的边框2．设置表格大小3．设置表格背景颜色4．设置表格背景图像5．设置表格单元格间距6．设置表格单元格边距7．设置表格在网页中的对齐方式8．表格数据的对齐方式3.1表格3.1.3表格修饰【演练3-2】制作光影世界活动报名一览表，本例文件3-2.html在浏览器中显示的效果如图3-3所示。3.1表格3.1.4不规范表格1．跨行跨行是指单元格在垂直方向上合并，语法如下：<tdrowspan="所跨的行数">单元格内容</td>2．跨列跨列是指单元格在水平方向上合并，语法如下：<tdcolspan="所跨的行数">单元格内容</td>3．跨行、跨列【演练3-5】制作一个跨行跨列展示的活动报名表格，本例文件3-5.html在浏览器中显示的效果如图3-6所示。3.1表格3.1.5表格数据的分组标签表格数据的分组标签包括<thead>、<tbody>和<tfooter>，主要用于对报表数据进行逻辑分组。【演练3-6】制作活动报名季度数据报表，本例文件3-6.html的浏览效果如图3-7所示。3.1表格3.1.6使用表格实现页面布局使用表格可以导入表格化数据，设计页面分栏，定位文本和图像等。【演练3-7】制作光影世界田园风光展示页面，本例文件3-7.html在浏览器中显示的效果如图3-8所示。3.2表单3.2.1表单的工作机制表单是允许浏览者进行输入的区域，可以使用表单从用户处收集信息。浏览者在表单中输入信息，然后将这些信息提交给服务器，服务器中的应用程序会对这些信息进行处理，进行响应，这样就完成了浏览者和服务器之间的交互。表单的工作机制如图3-10所示。3.2表单3.2.2表单标签表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单元素允许用户在表单中使用表单域输入信息。可以使用<form>标签在网页中创建表单。表单使用的<form>标签是成对出现的，在开始标签<form>和结束标签</form>之间的部分就是一个表单，所有表单对象都要放在<form>标签中才会生效。表单的基本语法及格式为：<formname="表单名"action="URL"method="get|post">…<!--在表单里面可以放置需要的表单元素，如按钮、文本框等控件--></form>3.2表单3.2.3表单元素--常见的表单元素表单元素名称功能input用于交互的各种输入控件，如文本框等select下拉列表/菜单控件textarea多行文本输入区域，类似文本框object在表单中可以嵌入其他第三方对象，如flash播放器等output定义不同类型的输出，如脚本的输出keygen表单的密钥对生成字段常用的<input>元素类型:1.文字和密码框2.重置和提交按钮3.复选框和单选按钮4.电子邮件输入框5.日期时间选择器6.URL输入框7.数值输入框8.范围滑动条9.隐藏域框10.文件域3.2表单3.2.3表单元素1．文字对象文本对象有单行文本域、密码域和多行文