《第三章表格操作与网页布局.ppt》由会员分享,可在线阅读,更多相关《第三章表格操作与网页布局.ppt(40页珍藏版)》请在三一办公上搜索。
1、第三章 网页表格与布局,目录,表格的基本操作网页布局,表格的基本操作,插入表格,在网页制作中,对页面进行布局是非常重要的,表格就是页面布局中常用的方式。Dreamweaver 不仅支持在表格中有序地排列数据,还可用表格对网页中的文本、图像及其他元素进行定位。,输入表格内容,手动添加表格内容 从其他文档导入表格式数据,手动添加表格内容,将表格插入到文档后即可向表格添加文本或图像等内容。向表格添加内容的方法很简单,只需将插入点定位到要输入内容的单元格中,再输入文本或插入图像即可。,从其他文档导入表格式数据,Dreamweaver 8可以将创建在另一个应用程序(如写字板文件)中的数据导入到网页中并设
2、置为表格的格式,而且各数据之间不可以制表符、逗号、冒号、分号或其他分隔符分隔开来。,表格嵌套,嵌套表格是表格布局中一个十分重要的环节,它是指在一个表格的单元格中再插入一个表格,嵌套表格的宽度受所在单元格的宽度限制,其编辑方法与表格相同。,选择表格,选择整个表格 选择整行或整列 选择单元格,选择整个表格,选择整行或整列,将鼠标光标移到要选择行或列的左侧或上方,当需要选择的行或列边框线呈红色时单击鼠标即可。,选择单元格,单元格的选择分为选择单个单元格和选择多个单元格区域。,合并及拆分单元格,合并单元格 拆分单元格,合并单元格,合并单元格操作只能针对连续的单元格使用。,拆分单元格,表格中每一行中的单
3、元格列数可能不等,这时就可根据需要使用拆分命令把一个单元格变为几个单元格。,插入或删除行或列,插入单行或单列 插入多行或多列 删除行或列,插入单行或单列,插入多行或多列,删除行或列,将插入点定位到要删除行或列的任意一个单元格中,然后选择修改表格删除行菜单命令或选择修改表格删除列菜单命令。选择表格要删除的行或列,然后选择编辑清除菜单命令或按【Delete】键。,设置表格、单元格属性,设置表格属性 设置单元格属性,设置表格属性,“表格”属性面板中显示了插入表格的所有特性,通过修改面板中的参数可快速地编辑表格外观。,设置单元格属性,在编辑网页时除可以设置整个表格的属性外,还可以单独设置表格中某行、列
4、或单元格的属性。,表格内容的移动和排序,表格整列内容的移动表格的排序,表格整列内容的移动,表格的排序,表格一般用来处理数据,在处理数据的同时还需要对表格中的各项进行排序。,实验,教材P74实验3.5.1创建月历表格,网页布局,网页布局,网页模块布局结构表格的布局模式,网页模块,标志(logo)导航内容注脚留白,布局结构,T型布局,布局结构,型布局,布局结构,“三”型结构,布局结构,不规则布局,表格的布局模式,在绘制布局表格或布局单元格之前,必须切换到布局模式下。菜单:查看表格模式布局模式,认识布局模式,出现标有“布局模式”的蓝色长条。当前网页上的表格会自动转换为布局表格。,退出布局表格,在布局
5、模式中制作完布局表格后,最好退出布局模式到标准模式下进行内容的添加和编辑。在文档编辑区的顶部,单击“退出”超级链接。选择查看表格模式标准模式菜单命令。在“布局”插入栏中单击“标准”按钮。,创建布局表格和布局单元格,在布局模式下使用布局表格和布局单元格进行页面布局时,一般先创建布局表格,再在布局表格中添加布局单元格。,布局单元格的大小调整及布局表格的移动,可以移动或调整布局单元格的大小,但不能重叠布局单元格。对布局单元格进行移动或调整大小时,只能在布局表格的边框与内容的边线之间,只有嵌套在布局表格内部的才能被移动,其他的布局表格均不能移动。,布局表格的属性设置,布局表格的属性设置布局单元格的属性设置,实验,教材P77实验3.5.2,