Dreamweaver-表格.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,*,第,3,章表格,本章要点,表格的创建与编辑,格式化表格,插入,Flash,动画,合理布局制作一个页面,3.1创建表格与编辑表格,3.1.1表格的创建,3.1.2编辑表格与排版,3.1.3格式化表格,3.1.1表格的创建,表格,的三个基本组成部分,行，表格中的水平间隔。,列，表格中的垂直间隔。,单元格，表格中一行与一列相交所产生的区域，用来存放图片或文字,表格,的创建,执行,【,插入,】|【,表格,】,命令，在弹出的,【,表格,】,对话框中进行相应的设置即可完成表格的创建。,例如：设置,行数4，列数3，表格宽度750像素，边框粗细0像素，单元格边距0像素，单元格间距0像素，设置完后单击【确定】按钮。在【属性】面板中将表格的高设置为200像素。,可视化助理,选中整个表格后，表格下方有绿色的线条、数字和下三角按钮，它们是,Dreamweaver 8,提供的“可视化助理”中的表格宽度，就像标尺一样，数字“,750”,表示表格的宽度，而单击右边的下三角按钮可以进行一些设置。,3.1.2编辑表格与排版,1,选择单元格,2,调整列的宽度和行的高度,3,插入和删除行和列,4,拆分和合并单元格,5,表格的嵌套,1选择单元格,（,1,）选择单个的单元格。,（,2,）连续选择多个单元格。,（,3,）选择一行或一列。,（,4,）选择多个非连续的单元格。,（,5,）选择整个表格。,（,1,）选择单个的单元格,方法,在需要选择的单元格中单击鼠标，然后按住鼠标左键不放，同时向相邻的单元格方向拖动，这时候单元格就出现黑色边框，表示被选中。,按下键盘上的,Ctrl,键，在单元格上单击鼠标可以选中单元格。,或者在单元格上单击鼠标后，按快捷键,Ctrl+A,，也可以选中单元格。,（2）连续选择多个单元格,方法,横向选择连续的单元格,比如，从第一行第一列开始，在第一个单元格中单击鼠标，然后按住鼠标左键不放并向相邻的单元格拖动，直到需要选中的单元格出现黑色的边框时释放鼠标，可以看到，需要选择的单元格已经全部被选中了。,纵向选择连续的单元格,（3）选择一行或一列,选择整行单元格,可以将鼠标移动到行的最左边，当光标变成一个向右箭头的时候，单击就可以选中整行单元格。,选择整列单元格,将鼠标移动到列的最上面，当光标变成一个向下箭头的时候，单击就可以选中整列单元格。,还可以通过单击相应列下面的绿色下三角按钮，在弹出的下拉菜单中单击,【,选择列,】,命令。,（4）选择多个非连续的单元格,如果要选择多个非连续的单元格，只要按下,Ctrl,键，依次单击要选择的单元格，直到所需要的单元格全部被选中为止。,（5）选择整个表格,方法,在第一个单元格中单击鼠标，然后按住鼠标左键不放，向右下角最后一个单元格拖动，直到所有单元格已经全部被选中。,可以将鼠标移动到单元格的边框上，当鼠标变成 形状时单击，也可以选中整个表格。,或者把光标定位到其中一个单元格中，按两次快捷键,Ctrl+A,，也可以选中整个表格。,还可以单击“,750”,旁边的绿色下拉按钮。在下拉菜单中单击,【,选择表格,】,命令。,2调整列的宽度和行的高度,改变列宽度的方法,将鼠标移动到表格的列边框上，当出现 形状的时候，左右拖动改变列的宽度；,按照提示“按键盘上的,Shift,键并拖动可以保留其他列的宽度”进行调整。这种调整会使整个表格的宽度发生变化。,改变行高度的方法,与改变列宽度的方法相同。,3插入和删除行,或,列,（一）,插入行或列的方法,执行,【,修改,】|【,表格,】|【,插入行或列,】,命令，弹出,【,插入行或列,】,对话框，在,【,插入,】,中选择,【,行,】,或者,【,列,】,，并确定要插入的行数或列数以及插入的位置，设置完后单击,【,确定,】,按钮。,也可以直接在单元格中右击鼠标，在弹出的快捷菜单中，选择,【,表格,】,菜单中的相应命令来插入行或列。,还可以单击列对应的绿色下拉按钮，在弹出的下拉菜单中选择,【,插入列,】,命令。,3插入和删除行,或,列,（二）,删除行或列的方法,选中行或列后执行,【,修改,】|【,表格,】|【,删除行,】,或者,【,删除列,】,来实现；,也可以用鼠标右键单击需要删除的行或列，在弹出的快捷菜单中选择相应命令，进行行与列的操作。,4拆分和合并单元格,拆分单元格,用鼠标右键单击要拆分的单元格，选择,【,表格,】,子菜单中的,【,拆分单元格,】,命令；,或者执行,【,修改,】|【,表格,】|【,拆分单元格,】,命令即可。,合并单元格,鼠标右键单击要合并的单元格，在弹出的菜单中选择,【,表格,】,子菜单中的,【,合并单元格,】,命令；,或者执行,【,修改,】|【,表格,】|【,合并单元格,】,命令即可。,5表格的嵌套,概念,所谓表格的嵌套，其实就是在一个单元格中插入一个表格。,举例,例如在第三行第二列的单元格中插入一个表格，只要将光标放置到该单元格中，执行,【,插入,】|【,表格,】,命令，设置完表格的参数后，单击,【,确定,】,按钮即可。,把光标定位到插入表格的单元格中，在,【,属性,】,面板中打开,【,水平,】,下拉菜单，选择,【,居中对齐,】,，打开,【,垂直,】,下拉菜单，选择,【,居中,】,，将插入的表格在单元格中居中对齐，效果如下图所示。,3.1.3,用表格构建完整的页面,一、网页顶部（一般包括图标、广告、导航菜单）,1,、创建一个,1,行,2,列，宽为,760,像素，边框及边距均为,0,的表格。,2,、选中表格，设置排列方式为居中对齐，背景色为,#3366CC,。,3,、将光标置于左边单元格中，设置其水平排列为左对齐，垂直排列为顶端对齐，然后插入一张图像，一般在此插入的是网站的图标，即,logo,。,3.1.3,用表格构建完整的页面,4,、将光标置于右边单元格中，设置其宽度为,500,，水平排列为居中对齐，垂直排列为中间，然后插入图像，一般是网页广告，即,banner,。,5,、将光标置于刚完成的表格之后，插入,/,表格，创建一个,1,行,1,列，宽为,760,像素，边框及边距均为,0,的表格。,6,、选中刚创建的表格，设置排列方式为居中对齐，背景色为,#005173,。,7,、在该表格中依次插入多个图像，作为导航条菜单。,3.1.3,用表格构建完整的页面,二、网页中部（左边栏目列表、中间网站新闻、右边栏目列表）,1,、在导航条表格后面，插入,/,表格，创建一个,1,行,3,列，宽为,760,像素，边框及边距均为,0,的表格。并设置排列方式为居中对齐，背景色为,#FFFFFFF,。,2,、将光标置于左边单元格中，设置其宽度为,18%,，水平排列为居中对齐，垂直排列为顶端对齐，然后插入一张图像，插入一个导航条。,3,、将光标置于刚插入的图片后，插入,/,表格，插入一个,12,行,1,列，宽为,90%,的表格。设置其单元格间距为,1,，背景色为,#CCCCCC,。,3.1.3,用表格构建完整的页面,4,、将光标放在表格第一个单元中，设置其高为,20,，背景色为,#FFFFFF,。插入,/,图像，插入一个导航文字前面的小点。同样设置其他,11,个单元格，这样左边的栏目分类列表就完成了。,5,、将光标置于主体表格的中间单元格中，设置其宽度为,66%,，水平排列为居中对齐，垂直排列为顶端对齐，然后插入,/,图像，插入一个导航条。,6,、将光标置于图像后，插入,/,表格，插入一个,4,行,1,列，宽为,95%,的表格。设置其单元格间距为,1,，背景色为,#CCCCCC,。,7,、将光标置于表格的第一个单元格中，拖动鼠标，将,4,个单元格都选中，设置高为,60,，背景色为,#FFFFFF,。,3.1.3,用表格构建完整的页面,8,、将光标置于主体表格右边的单元格中，设置其宽度为,16%,，水平排列为居中对齐，垂直排列为顶端对齐，插入,/,图像，插入一个导航条。,9,、将光标置于图像后，插入,/,表格，插入一个,7,行一列，宽为,90%,的表格。设置其间距为,1,，背景色为,#CCCCCC,。,10,、按住,Ctrl,键，用鼠标点击刚插入的表格的第,1,、,3,、,5,、,7,单元格，然后设置它们的高为,55,，背景色为,#FFFFFF,。,11,、选中第,2,、,4,、,6,单元格，设置其高为,6,，背景色为,#FFFFFF,。,12,、切换到源代码窗口，将第,2,、,4,、,6,单元格中的空格符号“”删除。,3.1.3,用表格构建完整的页面,三、网页底部（一般包括版权信息及其他相关内容）,1,、将光标置于主体表格后，插入,/,表格，创建一个,2,行,2,列，宽为,760,像素，边框及边距均为,0,的表格。,2,、选中表格，设置排列方式为居中对齐，背景色为,#3366CC,。,3,、将光标置于表格第,1,行的左边单元格中，设置其宽度为,50%,，水平排列为默认，垂直排列为基线，背景色为,#FFFFFF,，然后输入版权信息，内容颜色随便。,4,、将光标置于表格第,1,行右边单元格中，插入,/,图像，插入一个圆角图像，在它后面输入,Email,字样，设置其大小和颜色为,1,和,#FFFFFF,。,3.1.3,用表格构建完整的页面,5,、插入,/,表单对象,/,文本域，插入一个文本域，宽度可以随意。,6,、插入,/,图像，插入一个,GO,的图像。,7,、设置页属性。点击菜单修改,/,页面属性，在标题一栏中输入标题，并选择背景图像，将顶部边界设为,0,。,说明：,将整个网页分部分放到不同的表格中组合而成，还可以加快浏览器读取页面的时间。因为浏览器是读完整个表格后才显示内容的，所以最好不要框在整个一个表格中。,3.2应用表格,3.2.1,表格的插入和设置,3.2.2,Flash,动画的插入及页面制作,3.2.1表格的插入和设置,3.2.2Flash动画的插入及页面制作,导入,SWF,文件：插入,/,媒体,/FLASH,