网页设计与制作教程(HTMLCSSJavaScript)第2版第3章网页布局与交互

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.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表单元素1．文字对象文本对象有单行文本域、密码域和多行文本域。单行文本域适用于输入少量文字内容；密码域用于页面密码验证；多行文本域适用于输入大量文字内容。（1）单行文本域单行文本域的格式为：<inputtype="text"name="文本域名">（2）密码域密码域的格式为：<inputtype="password"name="密码域名">机械工业出版社3.2表单3.2.3表单元素（3）多行文本域多行文本域的格式为：<textareaname="文本域名"rows="行数"cols="列数">初始文本内容</textarea>2．隐藏域在网页的制作过程中，有时需要提交预先设置好的内容，但这些内容又不宜显示给用户，因此隐藏域是一个不错的选择。将<input>元素的type属性设置为hidden类型即可创建一个隐藏域。格式为：<inputtype="hidden"name="隐藏域名"value="提交值">机械工业出版社3.2表单3.2.3表单元素3．选择标签（1）单选按钮单选按钮的格式为：<inputtype="radio"name="单选钮名"value="提交值"checked="checked">（2）复选框复选框的格式为：<inputtype="checkbox"name="复选框名"value="提交值"checked="checked">机械工业出版社3.2表单3.2.3表单元素4．下拉框（1）<select>标签<select>标签的格式为：<selectsize="x"name="控制操作名"multiple="multiple"><option…>…</option><option…>…</option>…</select>（2）<option>标签<option>标签的格式为：<optionvalue="可选择的内容"selected="selected">…</option>机械工业出版社3.2表单3.2.3表单元素5．表单按钮①提交按钮<inputtype="submit"value="按钮名">②重置按钮<inputtype="reset"value="按钮名">③普通按钮<inputtype="button"value="按钮名">④图片按钮<inputtype="image"src="图片来源">机械工业出版社3.2表单3.2.4光影世界会员注册表单【演练3-11】制作光影世界会员注册表单，收集会员的个人资料。本例文件3-11.html在浏览器中显示的效果如图3-22所示。机械工业出版社3.3实训——制