第5章 网页设计表格.pptVIP

第5章 表格 5.1 案例1：使用表格制作简易汇款单 5.2 编辑表格 5.3 案例2－用表格制作网站主页 5.4 上机实训 5.5 习题 5.1 案例1：使用表格制作简易汇款单 【案例目的】利用表格的基本操作，制作汇款单，效果见图5-1。 【核心知识】表格高度和宽度等的属性设置，表格的拆分和合并。 5.1.1 在页面中插入表格 表格的基本组成，一般包括3部分，如图5-2所示。 其中行是表格中的水平间隔，列是表格中的垂直间隔，单元格是表格中行与列相交产生的区域，一般用来放置图像和文字。 在网页中插入表格，通常采用以下几种方法： 1. 将光标放置在页面需要创建表格的位置，选择菜单“插入记录”?“表格”，如图5-3所示。 2. 将光标放置在页面需要创建表格的位置，然后单击“常用”面板中的表格按钮，如图5-4所示。或将表格按钮从常用面板拖到页面上所需位置。 3. 直接按快捷键【Ctrl+Alt+T】。 5.1.2 设置表格属性 完成插入表格的操作，即可出现表格对话框，提示你设置表格的对话框，如图5-5所示。 表格宽度：有百分比和像素两种单位可以进行设置。以百分比为单位进行设置，按照网页在进行浏览时，浏览区的宽度为基准；以像素为单位进行设置是表格的实际宽度。一般在表格嵌套时多以百分比为单位。 边框粗细：边框粗细是设置表格边框的大小，在插入表格时，表格边框粗细的“默认值”为1像素，如把表格“边框粗细”的值设置为0，表格的边框即为虚线，如图5-6所示。这样在浏览网页时就看不到表格的边框了。 单元格边距：单元格边距是表示单元格中的内容与边框距离的大小。如单元格边距为默认值1，其单元格中的内容与边框的距离很近。如果把边距设为8，单元格中内容与边距之间就会存在一定的距离，如图5-7所示。 单元格间距：是指单元格与单元格、单元格与表格边框的距离。在默认情况下，“间距”的值为2。 页眉：是为表格选择一个加粗文字的标题栏。可将页眉设置为无、左部、顶部，或者左部和顶部同时设置。如果不设置页眉，则表格没有加粗的文字。如图5-8是页眉分别设在左边和设在顶部时的效果。 辅助功能：主要是为表格和表格内容提供一些简单的文字描述。 还可以在“属性”面板中对表格进行设置，如图5-9所示。 单元格填充：输入单元格中内容同单元格内部边界之间的距离值。单元格上、下、左、右边距都等同。 单元格间距：输入单元格与单元格之间的距离值。 宽度：输入宽度值，在右侧的下拉列表中，选择宽度单位，可以选择像素，以绝对的像素值来设置表格的宽度，则表格的大小不随浏览器窗口大小改变而改变；选择百分比，设置表格宽度同浏览器宽度的百分比，则表格的宽度将随浏览器窗口宽度而改变。 边框：输入边框的宽度。如果不需要显示边框，则输入0。 边框颜色：用于设置表格边框的颜色，可以从颜色井中选取要设置的颜色。 消除列宽/消除行高：用来清除表格的列宽/表格的行高。 将表格宽度转换为像素 ：可以将表格宽由百分比转为像素。 将表格宽度转换为百分比：可以将表格宽由像素转换为百分比。 案例分解1：插入表格 （1）打开Dreamweaver CS3，按Ctrl+N键新建一个HTML文档，命名为table1.html。 （2）选择“插入记录”—“表格”命令，在表格对话框中设置新建表格的属性，如图5-10所示。创建一个8行7列，表格宽度为570像素，边框粗细为1，单元格边距、单元格间距都为默认的表格。在“标题”文本框中输入“个人汇款凭证”，在“摘要”文本框中输入“表格制作案例”。 （3）单击【确定】按钮，表格如图5-11所示。 5.2 编辑表格 5.2.1 选择单元格 1. 在需要选择的单个单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖曳，这时单元格出现黑色边框，表示被选中，也可以按【Ctrl】键并在单元格上单击鼠标即选中单元格。 2. 如果选择连续的单元格，按住鼠标左键不放，向相邻的单元格拖曳，知道需要选中的单元格出现黑色的边框后，就表示需要选择的单元格已经全部被选中。 3. 如果选择整行单元格，将鼠标移动到行的最左边，当光标变成一个向右箭头时，单击就可以选中整行单元格。选择整列单元格，将鼠标移动到列的最上边，当光标变成一个向下箭头时，单击就可以选中整列单元格。如图5-12所示。 5. 如果选择多个非连续单元格，可以按【Ctrl】键，依次单击所要选择的单元格，直到所要的单元格选中。 6. 如果选择整个表格，在第一个单元格单击鼠标，然后按住鼠标左键不放，向右下角最后一个单元格拖曳，直到所有单元格已全部被选中。或者单击列宽值旁边的绿色下三角按钮，在弹出的下拉菜单中选择【选择表格】命令，如图5-13所示。 5.2.2 添加和删除行