第六章表格的使用.ppt

1、2020年7月24日,王颂华 设计,1,第三章 表格的使用,湖南科技经贸职业学院,2020年7月24日,王颂华 设计,2,学习目标：,本章主要介绍表格的操作，使用表格布局网页。 掌握建立表格、编辑表格、设置表格属性基本操作。 了解如何用表格来布局网页元素，掌握表格布局的 两种模式：标准模式和布局模式。能熟练运用这两 种模式布局网页。,2020年7月24日,王颂华 设计,3,重点与难点,重点: 表格的创建、编辑 表格的两种视图 用表格布局网页,难点： 用表格布局网页,2020年7月24日,王颂华 设计,4,本章内容,创建表格 编辑表格 布局视图模式 用表格布局网页,2020年7月24日,王颂华

2、设计,5,表格的作用,表格可以精确定位网页元素，对网页的 版面布局起重要作用。表格由行、列、单元 格组成。,2020年7月24日,王颂华 设计,6,建立表格,表格属性设置,1、选择主菜单“插入”“表格”或单击“常用”面板 上的“插入表格”按钮。 2、在打开的对话框中输入各项值。,选定表格后，属性面板中会显示出表格的 各项属性参数。,2020年7月24日,王颂华 设计,7,在表格内添加元素,可以向表格中添加各种元素，如文本、图像 和表格。表格随文本、图像会自动增高、增宽。 如果向单元格插入表格，就构成了内嵌式表格， 内嵌式表格不超过3层。,2020年7月24日,王颂华 设计,8,选择表格,对表格

3、的操作，要先选定，后操作。,方法一：在“修改”菜单中选“表格/选择表格”。,方法二：将光标定位表格中，单击文档窗口左下 角的标签。,几个常用标签： 表示文档主体； 表示行 ； 表示列,2020年7月24日,王颂华 设计,9,选择表格,选择表格的行和列： 把鼠标移到要选择的行首或列顶，使指针变为黑色的 箭头，单击。 或在文档窗口左下角单击选择行，拖动选择列。 选择单元格 1、光标定位，单击. 2、光标定位，按住“shift”选定单元格 3、按住“ctrl”单击要选择不相邻的行、列、单元格,2020年7月24日,王颂华 设计,10,编辑表格,1、移动和复制操作和WORD相同。 2、清除表格内容按“

4、DEL”。或执行”修改” 菜单“清除”命令。,2020年7月24日,王颂华 设计,11,增加、删除行和列及折分、合并单元格,增加行、列 光标定位，菜单“修改”“表格”“插入行”或“插入列” 删除行、列 光标定位，菜单“修改”“表格”“删除行”或“删除列” 合并单元格 选定要合并的单元格，单击“属性”面板中的“合并”按钮 拆分单元格 选定要合并的单元格，单击“属性”面板中的“拆分”按钮,2020年7月24日,王颂华 设计,12,表格的缩放,表格的尺寸可以通过直接拖动或改变表格属性来调整。,表格的格式化,要设置表格的行、列、单元格属性要先选定， 然后在“属性”面板中设置。或通过表格模板来快 迅格式

5、化表格。“命令”“格式化表格”。,2020年7月24日,王颂华 设计,13,布局视图简介,1、Dreamerweaver有两种布局视图：标准布局、布 局视图 2、在标准视图下使用表格，有时不太灵活。而在布 局视图下利用表格，更加直观、方便。可以绘制 没有规律的表格。 3、它们不是两个各自独立区域，可任意切换。,2020年7月24日,王颂华 设计,14,布局视图的切换,布局视图的切换操作如下： 1如果“设计”视图不可见，选择“查看/设计”或“查看/代码和 设计”菜单。在代码视图中不能启用或禁用布局视图。 2选择“查看/表格视图/布局视图”菜单或单击插入栏“布局” 类别中的“布局视图”按钮。如果页

6、面上存在表格，则它们 显示为布局表格。 3若要切换出布局视图，可以选择“查看/表格视图/标准视图” 菜单或单击插入栏“布局”类别中的“标准视图”按钮。,2020年7月24日,王颂华 设计,15,绘制布局单元格和表格,在布局视图中，可以在页面上直接绘制布局 单元格和布局表格。当不在布局表格中绘制布局 单元格时，Dreamweaver MX会自动创建一个布局 表格以容纳该单元格。布局单元格不能存在于布 局表格之外。,2020年7月24日,王颂华 设计,16,1、 绘制布局单元格的操作步骤如下：,绘制布局单元格和表格,（1）首先切换到布局视图中，然后单击“布局”/ “绘制布局单元格”按钮。鼠标指针变

7、为加号 (+)。 （2）将鼠标指针放置在开始绘制单元格的位置上， 然后拖动指针创建布局单元格。若要创 建多个单元格，请按住Ctrl 键并拖动指针来 创建每个布局单元格。,2020年7月24日,王颂华 设计,17,2、绘制布局表格操作步骤如下,绘制布局单元格和表格,（1）确定正在布局视图中，单击插入栏“布局” 分类中的“绘制布局表格”按钮,鼠标指针变 为加号 (+)。 （2）将鼠标指针放置在页上，然后拖动指针以 创建布局表格。,2020年7月24日,王颂华 设计,18,3、绘制嵌套布局表格,绘制布局单元格和表格,可以将一个布局表格绘制在另一个布局表格中， 创建嵌套表格。 对外部表格所进行的更改不

8、会影响嵌套表格中 的单元格。,2020年7月24日,王颂华 设计,19,4、将布局单元格靠齐到网格,绘制布局单元格和表格,可以打开Dreamweaver MX文档窗口中的网 格，将其用作绘制布局的可视化向导，让页面元 素在移动时自动靠齐到网格。,2020年7月24日,王颂华 设计,20,向布局单元格中添加内容,在布局视图中可以将文本、图像和其他内容添加 到布局单元格中，就象在标准视图中一样。但在布局 视图中不能向布局表格的空白（灰色）区域插入内容， 因此在添加内容之前，必须先创建布局单元格，当添 加内容的宽度大于布局单元格时，该单元格自动扩展。,2020年7月24日,王颂华 设计,21,布局单元格的调整,为了调整页面布局，可以对布局单元格和嵌套 布局表格进行移动并调整它们的大小，（最外面的 布局表格只能调整大小）。布局单元格不能重叠， 对单元格进行移动或调整大小之后，该单元格不能 跨越包含它的布局表格的边框。,2020年7月24日,王颂华 设计,22,设置布局单元格的格式,可以通过使用属性检查