网页设计与制作教程 Dreamweaver +Photoshop+Flash版 教学课件 作者 刘瑞新第6章 表格与表单.ppt

《网页设计与制作教程 Dreamweaver +Photoshop+Flash版 教学课件 作者 刘瑞新第6章 表格与表单.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第6章表格与表单表格与表单6.1表格控制6.1表格控制6.1.1表格的创建6.1.2表格的属性控制1．表格属性成功插入表格后，当选中整个表格时，“属性”面板即刻显示当前表格的各种属性。2．单元格属性选择一个或多个单元格，此时“属性”面板即刻显示相关属性参数。图6-4单元格属性面板6.1表格控制6.1.3表格的基本操作1．向表格内添加内容图6-5插入表格图6-6插入一幅图像图6-7插入多幅图像1．向表格内添加内容6.1表格控制2．选择表格与单元格图6-10单击上边框选择整个表格图6-11使用标签选择器选择整个表格鼠标变成表格网格图标选择

2、ble>标签6.1表格控制3．拆分、合并表格拆分指的是将一个单元格拆分为多个单元格；合并指的是将多个单元格合并为一个单元格。图6-20预览效果4．复制、粘贴表格5．添加删除表格的行或列6.1表格控制6.1.4表格中常用的CSS属性与表格相关的CSS属性主要有border-collapse、border-spacing、caption-side和empty-cells，更为详细的解释，如表6-1所示。表6-1表格中常用的CSS属性属性属性值及其含义说明border-collapseseparate（默认值）边框独立设置表格的行和单元格的边框是

3、否合并在一起collapse边框合并border-spacinglength由浮点数字和单位标识符组成的长度值，不可为负值当设置表格为边框独立时，行和单元格的边在横向和纵向上的间距。当指定一个length值时，这个值将作用于横向和纵向上的间距；当指定了两个length值时，第一个作用于横向间距，第二个作用于纵向间距caption-sidetop（默认值）caption在表格的上边设置表格的caption对象是在表格的那一边，它是和caption对象一起使用的属性rightcaption在表格的右边bottomcaption在表格的下边lef

4、tcaption在表格的左边empty-cellsshow（默认值）显示边框设置表格的单元格无内容时，是否显示该单元格的边框（仅当表格行和列的边框独立时此属性才生效hide隐藏边框6.1表格控制6.1.5隔行换色CSS表格图6-36最终预览效果6.1表格控制6.2.1创建表单域图6-38创建表单域6.2表单控制6.2.2插入多种表单对象1．插入文本字段图6-39插入单行文本字段图6-40插入多行文本字段图6-41插入密码类型文本字段6.2表单控制2．插入复选框和复选框组图6-42插入单个复选框6.2表单控制3．插入单选按钮和单选按钮组4．插

5、入列表或菜单图6-45菜单预览后的效果图6-47列表预览后的效果6.2表单控制5．插入跳转菜单6．插入文件域6.2表单控制6.2.3表单的美化——CSS登录框的制作图6-58最终预览效果6.2表单控制图6-59最终效果图图6-60布局示意图6.3课堂综合练习图6-92布局示意图图6-93最终预览效果图6.4课堂综合实训