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

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

2、中的重要元素，可以对其设置进而美化表格。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跨行跨行跨行是指

3、单元格在垂直方向上合并，语法如下：跨行是指单元格在垂直方向上合并，语法如下：2跨列跨列跨列是指单元格在水平方向上合并，语法如下：跨列是指单元格在水平方向上合并，语法如下：3跨行、跨列跨行、跨列【演练【演练3-5】制作一个跨行跨列展示的活动报名表格，本例文件】制作一个跨行跨列展示的活动报名表格，本例文件3-5.html在浏览器中显示的效果如图在浏览器中显示的效果如图3-6所示。所示。3.1 表格表格3.1.5 表格数据的分组标签表格数据的分组标签包括表格数据的分组标签包括、和和，主要用于对，主要用于对报表数据进行逻辑分组。报表数据进行逻辑分组。【演练【演练3-6】制作活动报名季度数据报表，本例文

4、件】制作活动报名季度数据报表，本例文件3-6.html的浏览效果的浏览效果如图如图3-7所示。所示。3.1 表格表格3.1.6 使用表格实现页面布局使用表格可以导入表格化数据，设计页面分栏，定位文本和图像等。使用表格可以导入表格化数据，设计页面分栏，定位文本和图像等。【演练【演练3-7】制作光影世界田园风光展示页面，本例文件】制作光影世界田园风光展示页面，本例文件3-7.html在浏览在浏览器中显示的效果如图器中显示的效果如图3-8所示。所示。3.2 表单表单3.2.1 表单的工作机制表单是允许浏览者进行输入的区域，可以使用表单从用户处收集信息。表单是允许浏览者进行输入的区域，可以使用表单从用

5、户处收集信息。浏览者在表单中输入信息，然后将这些信息提交给服务器，服务器中的应用浏览者在表单中输入信息，然后将这些信息提交给服务器，服务器中的应用程序会对这些信息进行处理，进行响应，这样就完成了浏览者和服务器之间程序会对这些信息进行处理，进行响应，这样就完成了浏览者和服务器之间的交互。表单的工作机制如图的交互。表单的工作机制如图3-10所示。所示。3.2 表单表单3.2.2 表单标签表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单元表单是一个容器，可以存放各种表单元素，如按钮、文本域等。表单元素允许用户在表单中使用表单域输入信息。可以使用素允许用户在表单中使用表单域输入信息。可以使

6、用标签在网页中创标签在网页中创建表单。表单使用的建表单。表单使用的标签是成对出现的，在开始标签标签是成对出现的，在开始标签和结束标和结束标签签之间的部分就是一个表单，所有表单对象都要放在之间的部分就是一个表单，所有表单对象都要放在标签中标签中才会生效。表单的基本语法及格式为：才会生效。表单的基本语法及格式为：3.2 表单表单3.2.3 表单元素1文字对象文字对象文本对象有单行文本域、密码域和多行文本域。单行文本域适用于输入文本对象有单行文本域、密码域和多行文本域。单行文本域适用于输入少量文字内容；密码域用于页面密码验证；多行文本域适用于输入大量文字少量文字内容；密码域用于页面密码验证；多行文本

7、域适用于输入大量文字内容。内容。（1）单行文本域）单行文本域单行文本域的格式为：单行文本域的格式为：（2）密码域）密码域密码域的格式为：密码域的格式为：3.2 表单表单3.2.3 表单元素（3）多行文本域）多行文本域多行文本域的格式为：多行文本域的格式为：2隐藏域隐藏域在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。将不宜显示给用户，因此隐藏域是一个不错的选择。将元素的元素的type属性属性设置为设置为hidden类型即可创建一个隐藏域。格式为：类型即可创建一个隐藏域。格式为

8、：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】制作客照展示文件上传的表单页面，页面的显示效果如图】制作客照展示文件上传的表单页面，

9、页面的显示效果如图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 实训实训制作家具商城客服中心表单制作家具商城客服中心表单制作家具商城客服

10、中心表单【实训】本实训练习通过表格布局制作家具商城客服中心表单，表格布【实训】本实训练习通过表格布局制作家具商城客服中心表单，表格布局示意图如图局示意图如图3-25所示，本例文件所示，本例文件3-13.html在浏览器中显示的效果如图在浏览器中显示的效果如图3-26所示。所示。习题习题3习题31使用跨行跨列的表格制作光影世界公告栏分类信息，如图使用跨行跨列的表格制作光影世界公告栏分类信息，如图3-27所示。所示。2使用表格布局商城支付选择页面，如图使用表格布局商城支付选择页面，如图3-28所示。所示。3使用表格和超链接技术制作光影世界新闻列表，如图使用表格和超链接技术制作光影世界新闻列表，如图3-29所示。所示。4使用表格布局技术制作如图使用表格布局技术制作如图3-30所示的小区用户注册表单。所示的小区用户注册表单。5制作如图制作如图3-31所示的读者意见反馈卡。所示的读者意见反馈卡。