Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第5章.ppt

《Dreamweaver CS3网页设计与制作教程 第2版 教学课件 作者申莉莉教案第5章.ppt》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第5章表格5.1案例1：使用表格制作简易汇款单5.2编辑表格5.3案例2－用表格制作网站主页5.4上机实训5.5习题5.1案例1：使用表格制作简易汇款单【案例目的】利用表格的基本操作，制作汇款单，效果见图5-1。【核心知识】表格高度和宽度等的属性设置，表格的拆分和合并。图5-1用表格制作的简易汇款单5.1.1在页面中插入表格表格的基本组成，一般包括3部分，如图5-2所示。其中行是表格中的水平间隔，列是表格中的垂直间隔，单元格是表格中行与列相交产生的区域，一般用来放置图像和文字。图5-2表格的基本组成在网页中插入表格，通常采用以下几种方法：1.将光标放置在页面

2、需要创建表格的位置，选择菜单“插入记录”“表格”，如图5-3所示。2.将光标放置在页面需要创建表格的位置，然后单击“常用”面板中的表格按钮，如图5-4所示。或将表格按钮从常用面板拖到页面上所需位置。3.直接按快捷键【Ctrl+Alt+T】。图5-3插入表格图5-4插入表格5.1.2设置表格属性完成插入表格的操作，即可出现表格对话框，提示你设置表格的对话框，如图5-5所示。表格宽度：有百分比和像素两种单位可以进行设置。以百分比为单位进行设置，按照网页在进行浏览时，浏览区的宽度为基准；以像素为单位进行设置是表格的实际宽度。一般在表格嵌套时多以百分比为单位。图5

3、-5插入表格对话框边框粗细：边框粗细是设置表格边框的大小，在插入表格时，表格边框粗细的“默认值”为1像素，如把表格“边框粗细”的值设置为0，表格的边框即为虚线，如图5-6所示。这样在浏览网页时就看不到表格的边框了。图5-6边框粗细为0单元格边距：单元格边距是表示单元格中的内容与边框距离的大小。如单元格边距为默认值1，其单元格中的内容与边框的距离很近。如果把边距设为8，单元格中内容与边距之间就会存在一定的距离，如图5-7所示。单元格间距：是指单元格与单元格、单元格与表格边框的距离。在默认情况下，“间距”的值为2。图5-7单元格边距分别为默认值和8页眉：是为表格

4、选择一个加粗文字的标题栏。可将页眉设置为无、左部、顶部，或者左部和顶部同时设置。如果不设置页眉，则表格没有加粗的文字。如图5-8是页眉分别设在左边和设在顶部时的效果。辅助功能：主要是为表格和表格内容提供一些简单的文字描述。图5-8页眉分别设在左边和设在顶部还可以在“属性”面板中对表格进行设置，如图5-9所示。单元格填充：输入单元格中内容同单元格内部边界之间的距离值。单元格上、下、左、右边距都等同。单元格间距：输入单元格与单元格之间的距离值。宽度：输入宽度值，在右侧的下拉列表中，选择宽度单位，可以选择像素，以绝对的像素值来设置表格的宽度，则表格的大小不随浏览器

5、窗口大小改变而改变；选择百分比，设置表格宽度同浏览器宽度的百分比，则表格的宽度将随浏览器窗口宽度而改变。边框：输入边框的宽度。如果不需要显示边框，则输入0。边框颜色：用于设置表格边框的颜色，可以从颜色井中选取要设置的颜色。消除列宽/消除行高：用来清除表格的列宽/表格的行高。将表格宽度转换为像素：可以将表格宽由百分比转为像素。将表格宽度转换为百分比：可以将表格宽由像素转换为百分比。图5-9表格的属性面板案例分解1：插入表格（1）打开DreamweaverCS3，按Ctrl+N键新建一个HTML文档，命名为table1.html。（2）选择“插入记录”—“表格”

6、命令，在表格对话框中设置新建表格的属性，如图5-10所示。创建一个8行7列，表格宽度为570像素，边框粗细为1，单元格边距、单元格间距都为默认的表格。在“标题”文本框中输入“个人汇款凭证”，在“摘要”文本框中输入“表格制作案例”。（3）单击【确定】按钮，表格如图5-11所示。图5-10插入表格对话框图5-11表格插入成功5.2编辑表格5.2.1选择单元格1.在需要选择的单个单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖曳，这时单元格出现黑色边框，表示被选中，也可以按【Ctrl】键并在单元格上单击鼠标即选中单元格。2.如果选择连续的单元格，按

7、住鼠标左键不放，向相邻的单元格拖曳，知道需要选中的单元格出现黑色的边框后，就表示需要选择的单元格已经全部被选中。3.如果选择整行单元格，将鼠标移动到行的最左边，当光标变成一个向右箭头时，单击就可以选中整行单元格。选择整列单元格，将鼠标移动到列的最上边，当光标变成一个向下箭头时，单击就可以选中整列单元格。如图5-12所示。图5-12选择整行或整列单元格5.如果选择多个非连续单元格，可以按【Ctrl】键，依次单击所要选择的单元格，直到所要的单元格选中。6.如果选择整个表格，在第一个单元格单击鼠标，然后按住鼠标左键不放，向右下角最后一个单元格拖曳，直到所有单元格已

8、全部被选中。或者单击列宽值旁边的绿色下三角按钮，在弹