网页设计与制作教程第3章--网页布局与交互课件

1、网页设计与制作教程（HTML+CSS+JavaScript）第2版机械工业出版社第3章 网页布局与交互3.1 表格3.1.1 表格的结构表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和显示如图3-1所示。3.1 表格3.1.2 表格的基本语法表格的语法格式为： 标题 表头1 表头2 表头n 表项1 表项2 表项n 表项1 表项2 表项n3.1 表格3.1.3 表格修饰表格是网页布局中的重要元素，可以对其设置进而美化表格。1设置表格的边框2设置表格大小3设置表格背景颜色4设置表格背景图像5设置表格单元格间距6设置表格单元格

2、边距7设置表格在网页中的对齐方式8表格数据的对齐方式3.1 表格3.1.3 表格修饰【演练3-2】制作光影世界活动报名一览表，本例文件3-2.html在浏览器中显示的效果如图3-3所示。3.1 表格3.1.4 不规范表格1跨行跨行是指单元格在垂直方向上合并，语法如下： 单元格内容2跨列跨列是指单元格在水平方向上合并，语法如下： 单元格内容3跨行、跨列【演练3-5】制作一个跨行跨列展示的活动报名表格，本例文件3-5.html在浏览器中显示的效果如图3-6所示。3.1 表格3.1.5 表格数据的分组标签表格数据的分组标签包括、和，主要用于对报表数据进行逻辑分组。【演练3-6】制作活动报名季度数据报

3、表，本例文件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 表单标签表单是一个容器，可以存放各种表单元

4、素，如按钮、文本域等。表单元素允许用户在表单中使用表单域输入信息。可以使用标签在网页中创建表单。表单使用的标签是成对出现的，在开始标签和结束标签之间的部分就是一个表单，所有表单对象都要放在标签中才会生效。表单的基本语法及格式为： 3.2 表单3.2.3 表单元素1文字对象文本对象有单行文本域、密码域和多行文本域。单行文本域适用于输入少量文字内容；密码域用于页面密码验证；多行文本域适用于输入大量文字内容。（1）单行文本域单行文本域的格式为：（2）密码域密码域的格式为：3.2 表单3.2.3 表单元素（3）多行文本域多行文本域的格式为： 初始文本内容2隐藏域在网页的制作过程中，有时需要提交预先设置

5、好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。将元素的type属性设置为hidden类型即可创建一个隐藏域。格式为：3.2 表单3.2.3 表单元素3选择标签（1）单选按钮单选按钮的格式为：（2）复选框复选框的格式为：3.2 表单3.2.3 表单元素4下拉框（1）标签标签的格式为： （2）标签标签的格式为： 3.2 表单3.2.3 表单元素5表单按钮 提交按钮 重置按钮 普通按钮 图片按钮3.2 表单3.2.3 表单元素6文件域格式为：【演练3-10】制作客照展示文件上传的表单页面，页面的显示效果如图3-21所示。3.2 表单3.2.4 光影世界会员注册表单【演练3-11】制作光影世界会员注册表单，收集会员的个人资料。本例文件3-11.html在浏览器中显示的效果如图3-22所示。3.2 表单3.2.5 使用表格布局表单【演练3-12】使用表格布局的方法制作用户注册表单，页面在浏览器中显示的效果如图3-24所示。3.3 实训制作家具商城客服中心表单制作家具商城客服中心表单【实训】本实训练习通过表格布局制作家具商城客服中心表单，表格布局示意图如图3-25所示，本例文件3-13.html在浏览器中显示的效果如图3-26所示。习题3习题31使用跨行跨列的表格制作光影世界公告栏分类信息，如图3-27所示。2使用表格布局商城支付选