第四章 表格和层的应用.ppt

1、第四章 表格和层的应用 4.1 创建表格的基本操作 4.2 编辑表格的基本操作 4.3 页面的布局表格和布局单元格 4.4 层的创建和基本操作 4.5 层面板的应用 4.6 应用实例,DREAMWEAVER,4.1 创建表格的基本操作 4.1.1 关于表格 在HTML 页上显示表格式数据以及对文本和图形进行布局的强有力的工具 一行或多行组成；每行又由一个或多个单元格组成 是创建跨平台、跨浏览器网页布局的理想方案 在应用中应该避免表格嵌套过多，表格嵌套过多会增加页面的下载时间,DREAMWEAVER,4.1.2 新建表格 插入一个新表格有以下两种种方法 1. 打开“插入”菜单，选择“表格” 2.

2、 在“插入”面板的“常用”选项卡中选择 属性面板中各种参数的意义 1. 表格ID编辑框中可输入表格的名字 2. 在对齐下拉列表中可选择对齐方式 3. 消除列的宽度设置 4. 消除行的高度设置 5. 将表格宽度的设置由百分比转换为像素 6. 将表格宽度转化为百分比,DREAMWEAVER,4.1.3 设置表格单元格属性 A 合并单元格（之前要先选择相应的需要合并单元格） 拆分单元格，拆分为多行或多列； B 水平(Z)：单元格内部的水平对齐方式；垂直(T)：单元格内部的纵向对齐方式； C 宽(W)，高(H)：单元格的宽度与高度； D 背景(B)：单元格背景图； E 背景颜色(G)：单元格背景颜色；

3、 F 边框(R)：单元格边框颜色。,DREAMWEAVER,4.1.4 HTML 中的表格格式设置优先顺序 当在“设计”视图中对表格进行格式设置时，您可 以设置整个表格或表格中所选行、列或单元格的 属性。如果将整个表格的某个属性（例如背景颜 色或对齐）设置为一个值，而将单个单元格的属 性设置为另一个值，则单元格格式设置优先于行 格式设置，行格式设置又优先于表格格式设置。 表格格式设置的优先顺序如下： 1 单元格 2 行 3 表格,DREAMWEAVER,4.1.5 在表格中导入导出外部数据文件 Dreamweaver允许直接导入外部的数据文件 外部文件应该使用定界符（制表符、冒号、逗号、分号等

4、）分割数据 数据被导入后将被转换成Dreamweaver格式 导入数据文件的两种方法： 1.选择“文件” “导入” “表格式数据”。 2.择“插入” “表格对象” “导入表格式数据”。 Dreamweaver同样允许将表格文件导出 导出文件也需要定界符分割数据 导出数据文件的方法,DREAMWEAVER,4.2 编辑表格的基本操作 4.2.1选择表格元素 1.选中某个单元格的2种方法 先单击要选择的单元格，然后拖动鼠标到相邻的单元格中，当被选中的单元格四周出现粗框线时释放鼠标，即可选中该单元格 单击要选中的单元格，然后单击状态栏左侧标签选择器的，便可选中该单元格 2.选中多个相邻的单元格的2种

5、方法 单击第一个单元格，然后拖动鼠标到左后一个单元格，即可选中这组相邻的单元格 单击第一个单元格，然后按住Shift键，再单击这组相邻单元格的最后一个单元格即可。,DREAMWEAVER,3. 选择多个不相邻的单元格 按住Ctrl键，然后再分别单击要选中的那些不相邻的单元格即可。 若在按住Ctrl键的同时，再次单击选中的单元格，将取消该单元格的选择。 4. 选择表格行的2种方法 将鼠标指向表格的左边框线，当光标变为一个箭头时单击鼠标，便可选中该行 先单击某行的单元格，然后单击状态栏左侧标签选择器的即可。 5. 选择表格列的方法 将鼠标指向上边的表格框线，当鼠标变为一个向下的箭头时单击鼠标，便可

6、选中该列。,DREAMWEAVER,6. 选择整个表格的4种方法 单击表格的左上角、表格的顶边缘或底边缘的任何位置或者行或列的边框。 单击某个表格单元格，然后在“文档”窗口左下角的标签选择器中选择 标签。 单击某个表格单元格，然后选择“修改” “表格” “选择表格”。 单击某个表格单元格，单击表格标题菜单，然后选择“选择表格”。,DREAMWEAVER,4.2.2 单元格的复制、粘贴、移动和清除 可以一次复制、粘贴或删除单个表格单元格或多个单元格，并保留单元格的格式设置。 可以在插入点或替换现有表格中的所选部分粘贴单元格。 若要粘贴多个表格单元格，剪贴板的内容必须和表格的结构或表格中将粘贴这些

7、单元格的所选部分兼容。 剪切或复制表格单元格的方法 选择连续行中形状为矩形的一个或多个单元格。 选择“编辑” “剪切”或“编辑” “复制”,DREAMWEAVER,若选部分是矩形的单元格，则可以剪切或复制这些单元格。如下图示： 若部分不是矩形的单元格，则不能剪切或复制这些单元格。如下图示： 如果选择了整个行或列然后选择“编辑”“剪切”，则将从表格中删除整个行或列（而不仅仅是单元格的内容）。,DREAMWEAVER,粘贴表格单元格的方法 选择要粘贴单元格的位置： 若要用您正在粘贴的单元格替换现有的单元格，请选择一组与剪贴板上的单元格具有相同布局的现有单元格。 例如，如果您复制或剪切了一块3 x

8、2 的单元格，则可以选择另一块3 x 2 的单元格通过粘贴进行替换。 若要在特定单元格上方粘贴一整行单元格，请单击该单元格。 若要在特定单元格左侧粘贴一整列单元格，请单击该单元格。 选择“编辑” “粘贴”。,DREAMWEAVER,删除单元格内容并使单元格保持原样的方法 选择一个或多个单元格，选部分不是完全由完整的行或列组成的。 选择“编辑” “清除”或按Delete 键。 删除包含合并单元格的行或列的方法 选择行或列。 选择“修改” “表格” “删除行”或“修改” “表格” “删除列”。 4.2.3 单元格的拆分和合并 合并单元格 选择连续行中形状为矩形的单元格 选择“修改” “表格” “合

9、并单元格”,DREAMWEAVER,若所选部分是矩形的单元格，则可以合并这些单元格 若选部分不是矩形，则不能合并这些单元格 单个单元格的内容放置在最终的合并单元格中。所选的第一个单元格的属性将应用于合并的单元格 拆分单元格 单击单元格 选择“修改” “表格” “拆分单元格” 在“拆分单元格”对话框中，指定如何拆分单元格,DREAMWEAVER,4.2.4 调整表格及表格行宽、列高的尺寸 调整表格大小 选择该表格，并且该表格周围出现选择柄 若要在水平方向调整表格的大小，请拖动右边的选择柄 若要在垂直方向调整表格的大小，请拖动底部的选择柄 若要在两个方向调整表格的大小，请拖动右下角的选择柄 调整列

10、和行的大小 将鼠标指针指向要调整的行和列的边框线，拖动您想更改的行或列的边框,DREAMWEAVER,使用属性检查器设置列宽或行高。首先选择列或行，然后在属性检查器（“窗口” “属性”）的“宽”文本字段中输入列宽，或在“高”文本字段中输入行高。 4.2.5 表格行、列的增加和删除 添加单个行或列 单击一个单元格 选择“修改” “表格” “插入行”或“修改” “表格” “插入列” 添加多行或多列 单击一个单元格 选择“修改” “表格” “插入行或列” 选择“行”或“列”，然后完成该对话框,DREAMWEAVER,删除某行或列 单击要删除的行或列中的一个单元格，然后选择“修改”“表格” “删除行”

11、或“修改” “表格” “删除列” 或者选择完整的一行或列然后选择“编辑” “清除”或按Delete 键。 4.2.6 表格的嵌套 嵌套表格是在另一个表格的单元格中的表格。可以像对任何其他表格一样对嵌套表格进行格式设置；但是，其宽度受它所在单元格的宽度的限制 在表格单元格中嵌套表格 单击现有表格中的一个单元格 选择“插入” “表格”。即会出现“插入表格”对话框 完成对话框，单击“确定”,DREAMWEAVER,4.2.7 表格的样式化 使用“表格格式设置”命令将预先设置的设计快速应用到表格。然后，您可以选择选项进一步自定义该设计。 注意：只有简单的表格才能使用预先设置的设计进行格式设置。您不能使

12、用这些设计对包含合并单元格（colspan 或rowspan）、列组或任何其他表格（这些表格不是由简单的矩形单元格网格组成）的表格进行格式设置。 使用预先设置的表格设计（样式化）的方法 选择表格 选择“命令” “格式化表格” 按需要自定义选项 单击“应用”或“确定”用所选的设计对表格进行格式设置,DREAMWEAVER,4.3 页面布局表格和布局单元格 布局表格和布局单元格是用来规划页面布局的工具，它们与用表格规划页面布局相比，有使用方便、功能强大而且灵活多变的优势。 用布局视图规划网页布局的操作方法如下： 新建一个页面，然后选择“插入”面板里的“布局”选项卡。 选择“布局视图”，然后选择“绘

13、制布局表格”图标，此时鼠标指针变为“+”形状，在指定位置拖曳鼠标，就可在网页编辑窗口中画出布局表格。在画布局表格的地方不能有任何文字或者图片。 如果在同一页面上还需要画其它布局表格，按住Ctrl键重复上述步骤，可以连续画多个布局表格。,DREAMWEAVER,在布局表格中必须画好布局单元格后才能插入文字或图片等对象。单击“绘制布局单元格”按钮，在布局表格中根据需要画出多个布局单元格。 在布局单元格中，可以根据页面需要输入文字或插入图片等对象。 如果要调整布局单元格的大小及其中内容的属性，可打开属性面板，完成属性的设置。,DREAMWEAVER,4.4 层的创建和基本操作 层是网页中用来放置文本

14、、图像、动画、表单、插件等网页元素的载体。改变层在网页中的位置，便可实现层中元素位置的改变。利用层能够精确对网页页面元素定位。设计者可以控制多个层的叠放次序、显示或隐藏层。将层与时间线配合使用，可以设计出动态页面效果。将层与行为配合使用还可以很方便的制作出滚动字幕、下拉式菜单等页面效果。 4.4.1 插入普通层和嵌套层 在“插入”面板中选择“布局”选项卡 选择“标准视图”，然后单击“描绘层”图表 在页面中画出一个层,DREAMWEAVER,将光标插入到已建好的层中，然后选择“插入”菜单，选择“层”命令，可在已建好的层中插入一个嵌套层。 嵌套层可称为子层，包含嵌套层的那个层成为父层，嵌套层永远在

15、其父层上方。对于普通层而言，他的层标记依次出现在网页编辑器窗口的左上角，而对于嵌套层来说，它的层标记将出现在父层的窗口中。 4.4.2 激活和选中层 4.4.3 调整、移动和对齐层,DREAMWEAVER,4.5 层面板的应用 层的属性面板中的各项设置的意义如下所示： 在“层编号”中设置当前层的名称。层名称中不能带有符号和汉字，也不能以数字开头，只能是英文字母和数字 在“左”和“上”中设置曾向对于页面或父层的左上角距离 在“宽”和“高”中指定层的高度和宽度 在Z轴中可设置当前层的前后位置（值越大越靠上）,DREAMWEAVER,在“显示”下拉式列表中可以设置层的可见性。下拉列表中的4个选项分别

16、是：Default（默认状态）、Inherit（继承父层的可见性）、Visible（设置层为可见）、Hidden（设置层为隐藏）。 在“溢出”下拉列表中，确定当层的内容超出层范围是的处理方式。 在“编辑”的“上下左右”中设置层的可视区域，输入的数值表示层可视区域与边界之间的距离,DREAMWEAVER,4.5.2 设置层控制面板 选择“窗口”菜单里的“其它”命令，然后选择“层”，就会打开层控制面板 层控制面板的操作方法如下 选定某个层：只需在层面板列表中单击该层 显示、隐藏层：单击层面板左边的显示与隐藏列，可显示或隐藏该层 改变层的叠放次序：单击层控制窗口的Z列，便可修改该层的层次属性值。或者

17、用鼠标拖曳层，也可调整层的叠放次序。 创建和取消嵌套层 禁止层重叠,DREAMWEAVER,第一次作业： 1、Html的基本标识都有哪些？ 2、哪些Html标识不是成对出现的？ 3、的size属性表示什么？ 4、Html里的表单主要有什么用途？ 5、和哪一个表示的字体更大？,DREAMWEAVER,DREAMWEAVER,第二次作业： 1、为何要定义一个站点？ 2、定义站点有哪些注意事项 3、页面属性都可以设置哪些页面内容？,第三次作业： 1、在DW中如何插入多个空格？ 2、什么是Rollover图片? 3、创建超级链接都有哪些方法？ 4、什么是相对路经与绝对路径？,第四次作业： 1、表格的主

18、要作用是什么？ 2、对于向表格中导入的外部数据文件有什要求？ 3、布局表格主要是用来做什么的？它有哪些优点？ 4、层的主要作用是什么?,DREAMWEAVER,4.6 应用实例跑动的小猫 在例子中，单击这个小猫，活动菜单就会跟着它出来，再单击，菜单又回去了。 在制作这个例子之前，请把这些图片保存到你的img目录下。 首先建立一个新层（如何插入层），宽250，高157，Left值为0，Top值为22。,DREAMWEAVER,当前层的名字为Layer1,选img目录下的b-bg.gif文件作为layer1层的背景，新层变成下面的样子 接下来在这个图层中再插入一个图层，也就是层的嵌套。单击对象面板

19、中的图层图标，并将其拖动到layer1层中，释放鼠标。,DREAMWEAVER,调出图层窗口。从图层窗口中可以看到，新建的图层layer2在layer1下，表示layer1为父图层，layer2为子图层 我们将layer2图层改名为cat1，然后在图层中插入做好的动态卡通图cat1.gif，是一只向右行走的卡通猫。调整图层的大小，使其刚好容纳这幅图，移动图层，使其处于右侧居中位置,DREAMWEAVER,选中cat1图层，按下Ctrl+C键进行复制，在layer1图层中单击鼠标，将光标定位在此图层中，再按Ctrl+V键进行粘贴，从图层窗口中看到layer1图层包含了两个名为cat1的子图层，将

20、第二个子图层改名为cat2,DREAMWEAVER,选中cat2图层，双击图层中的卡通图，弹出图片选择对话框，当前图形为cat1.gif，选择cat2.gif，cat2图层中的图片就变成了一个向左行走的卡通猫 接下来我们制作Timelines动画。选择“Windows”菜单中的“Timelines”命令，调出Timelines编辑窗口。,DREAMWEAVER,Timelines可以根据时间改变图层及图片的属性，比如改变图层的位置、尺寸、可见性等。 选中layer1图层，将其拖到“Timelines窗口”中，一个紫色的长条显示在Timeline的第一行通道中，里面还有图层的名字layer1,D

21、REAMWEAVER,用鼠标在紫色长条开始处单击，此时处于Timeline第一帧处，在layer1图层的属性面板中，将left值改为-180pt，敲回车后，在文档中就只能看到卡通图了，表示在第一帧图层处于这个位置，在第紫色长条最后点一下，看到图层又在最初设定的位置了，表示第十五帧图层回到原来位置,DREAMWEAVER,在“Timelines窗口”中，可以看到当前动画名字为Timeline1，用鼠标此文本框中单击，输入“cat1”作为这个Timeline动画的名字。 在“Timelines窗口”中上部的前面有B字样那个通道第十五帧处单击，按F8键调出“Behavior窗口”。点“+”按钮，选择

22、“Show-Hide Layers”命令,DREAMWEAVER,设置cat1层不可见，cat2层可见。意思是当cat1动画播放到最后时，向右走的猫隐藏起来，向左走的猫出现。 接下来再制作一个Timeline动画。单击“Timelines窗口”右上角的小三角，选择“Add Timeline”命令，一个新的Timeline出现了，将其重命名为cat2，把layer1图层先右拖一下，露出选择层的手柄，然后选择此图层，把它拖到Timeline中。设置第一帧时图层的left值为0，第十五帧时图层的left值为-180。在第十五帧添加Behavior，设置cat1层可见，cat2层不可见,DREAMWE

23、AVER,注意，Timeline1与Timeline2中的两个停留位置必须相同，否则就会出现跳动的现象！ 接下来我们给卡通图加上相应的语句，以便在单击它时开始播放动画。,DREAMWEAVER,选取cat1图层，选中cat1.gif图，单击“Behaviors”窗口中的“+”，选择“Timeline”项中的“Go to Timeline Frame”，指定从第一帧开始播放名为“cat1”的Timeline 单击“OK”，“Behaviors”窗口中出现一个“onMouseDown”事件，单击事件名旁的向下小箭头，将事件名改为“onClick”,DREAMWEAVER,再单击“+”，选择“Tim

24、eline”项中的“Play Timeline”，从下拉列表中选择要播放的动画，当前选项为“cat1”，点“OK”，又添加了一个“onMouseDown”事件，同样将其改为“onClick”事件,DREAMWEAVER,这样当浏览者单击cat1.gif图时，页面就会播放由画面外移入画面内的动画，即名为cat1的Timeline。同样道理，选取cat2图层中的cat2.gif图像，指定从第一帧开始播放名为“cat2”的Timeline，并且单击（onClick）时开始播放这个Timeline动画。这样当浏览者单击cat2.gif图时，页面就会播放由画面内移出到画面外的动画，即名为cat2的Tim

25、eline动画 最后别忘了，设置cat2图层为不可见。 好了，会跑的菜单做完了，启动浏览器看一下,DREAMWEAVER,接下来我们制作动态菜单，所谓动态菜单，就是指网页中排列着一排导航菜单，当鼠标移到其中一个菜单时，在网页其他位置（本例中为右侧）就会出现相应的子菜单，这样不但生动了网页，而且节省了有限空间，使网页充满新意 选择“View”菜单下的“Invisible Elements”命令，将文档中表示层的标记隐藏。 将光标定位在Layer1图层中，按下Shift+Enter，然后插入事先做好的内容“我的爱好”的图片（001.gif），再按Shift+Enter换到下一行，插入内容为“我的收藏”的图片（002.gif）。同样，把其它表示导航菜单的图片都插进来，效果就是这样的,DREAMWEAVER,接下来制作“我的爱好”子菜单。在Layer1图层插入一个子图层，名为mylike，W=75pt，H=80pt，L=95pt，T=-23pt。在此图层