DW3表格布局市公开课一等奖省赛课获奖课件

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

Flash动画插入及页面制作DW3表格布局第27页3.2.1表格插入和设置DW3表格布局第28页3.2.2Flash动画插入及页面制作导入SWF文件：插入/媒体/FLASHDW3表格布局第29页3.3表格并行插入问题提出：普通插入一个表格后，在这个表格后再插入一个话就到了下一行。存在并排插入两个表格可能吗？DW3表格布局第30页3.3表格并行插入处理方法1：用HTML代码实现/thread-1374493-1-1.html<tablewidth="200"border="1"align="left"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr></table><tablewidth="200"border="1"><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td> </td><td> </td></tr><tr><td>&