《网页设计与制作应用教程》课件——CH5 表格和表单.pptxVIP

第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC网页设计与制作应用教程

网页设计与制作第5章表格和表单

本章重点表格的创建与编辑表单的创建与编辑

五、表格和表单5.1表格的应用5.3Spry组件5.2表单的应用

5.1表格的应用表格的应用表格是用于在HTML页上显示表格式数据以及对文本和图形进行布局的强有力的工具。表格由一行或多行组成；每行又由一个或多个单元格组成。在Dreamweaver中可以很方便地创建表格，并操作列、行和单元格。5.1.1表格的创建在“设计”视图中，将光标置于页面需要插入表格的位置，选择主菜单【插入】/【Table表格】命令，弹出“Table”表格对话框，如图所示。在表格对话框中，可以对表格大小、标题，及辅助功能等选项进行设置。

行数：确定表格具有的行的数目。列数：确定表格具有的列的数目。表格宽度width：以像素为单位或按占浏览器窗口宽度的百分比指定表格的宽度。（图例中修改为百分比宽度，不管网页打开多大多小，表格总宽度按照网页的宽度比例显示）表格高度height：定义表格的高度，y为像素数或占窗口的百分比。边框粗细border：指定表格边框的宽度（以像素为单位）。单元格边距cellpadding：确定单元格边框和单元格内容之间的像素数。单元格间距cellspacing：确定相邻的表格单元格之间的像素数。5)表格内文字的对齐方式2)在“标题”部分选择一个标题选项3)在“辅助功能”部分指定选项4)表头看做一行、只不过使用的是th标签。在浏览器中显示时，th标签的文字按粗体显示，td标签的文字按正常字体显示。1)在“表格大小”部分中指定选项6)表格的色彩和图像背景7)跨行、跨列表项设计表格的设置5.1表格的应用

表项数据的水平对齐用标签td的align属性。align的属性值分别为：center：表项数据的居中left：左对齐right：右对齐justify：左右调整表项数据的垂直对齐用标签td的valign属性实现。valign的属性值分别为：top：靠单元格顶bottom：靠单元格底middle：靠单元格中baseline：同行单元数据项位置一致在table、th、tr、td标签中，使用下面属性可以改变表格的背景和边框的色彩、添加背景图像，也可以为行和单元格改变色彩、添加背景图像。bgcolor：设置背景色彩。background：设置背景图像。bordercolor：设置表格边框的色彩。bordercolorlight：设置表格边框亮部的色彩。rules＝＂row，cols或none＂：设置表格内线的显示方法，none为无内线。对表格进行格式设置时，可以对整个表格、行、单元格的属性进行设置。表格格式设置的优先顺序如下：单元格、行、表格。跨行、跨列表项设计用tr、td、th标签中的colspan和rowspan属性，可以设置多行（合并行）多列（合并列）的表项。5.1表格的应用

5.1.2编辑表格5.1表格的应用1.选择表格与单元格2.设置表格、单元格、行和列的属性3.在表格中插入/删除行或列4.在表格中插入对象5.合并/拆分单元格6.嵌套表格可以将单元格拆分成任意数目的行或列，或者将多个单元格合并成为一个单元格嵌套表格是在另一个表格的单元格中的表格5.1.3数据的导入和导出在Dreamweaver中，可以将?Excel文档的完整内容插入到网页中，也可以将网页文件中数据表格导出。

5.2表单的应用创建表单在“设计”视图中，选择主菜单【插入】/【表单】/【表单】命令，则窗口出现一个红色虚线框为表单域表单主要有下面一些主要属性：ID：为表单设置一个ID，在本网页中对该对象的唯一标识符。动作（Action）：编写服务器端表单处理程序。方法（Method）：定义表单数据处理的处理程序。分为GET、POST和默认等方式。其中，POST会将表单数据嵌入HTTP请求中。GET会将值附加到请求页面的URL中。默认值会使用浏览器的默认设置将表单数据发送到服务器。

5.2表单的应用表单中可以添加的对象还有很多，主要作用如下：文本字段：可以接受任何文本、字母和数字类型。输入内容可设置显示为星，单行显示。文本区域：可以多行文本。复选框：在选项中允许选择多个项目。单选按钮：在选项中只允许选择一个项目。按钮：用于执行提交或取消任务。列表：列出一组可供用户选择的值。文件域：允许从磁盘上选择文件。

5.3Spry组件本节介绍Spry组件的建立和使用，属于DreamweaverCS5版本的知识。这部分内容在DreamweaverCC2017之后就不再使用。为了结合之前的版本的相关知识点，继续在本