中文Dreamweaver MX案例教程 杜金 等 第3章 框架、表格与层新.pptVIP

第3章 框架、表格与层 主要内容 带框架的“跟我学HTML”网页 “立体效果课程表”网页 用表格编排的网页 有表格数据排序的网页 用层编排的网页 带阴影图像的网页 带交替变化图像的网页 将层转换为表格的网页 带框架的“跟我学HTML”网页 增加和减少框架个数 设置框架属性 框架的简单编辑 改变框架集属性 保存框架文件 实例效果 使用框架结构制作的“跟我学HTML”网页在浏览器中的显示效果，没使用框架结构的网页显示效果。 用框架制作的“跟我学HTML”网页 没有用框架制作的“跟我学HTML”网页 技术分析 架技术可以把一个网页页面分成几个单独的显示区域（即显示窗口），每个显示区域就像一个独立的网页，可以显示与浏览器窗口的其余部分中所显示内容无关的 HTML 文档。框架是浏览器窗口中网页页面的一个区域，它可以是一个独立的、可以滚动的页面。 框架不是文件。当前显示在框架中的网页内容不属于框架，不是框架的一部分，任何框架都可以显示任何文档。框架的精髓在于每个框架都可显示不同的文件内容，可以用框架的方式在一个页面中显示多个网页文件的内容。 一个框架对应着一个HTML文件，框架集中的每个框架可以显示不同的HTML文件内容。因此，框架可以实现在一个网页内显示多个HTML文件。对于一个有n个区域的框架网页来说，每个区域有一个HTML文件，整个框架结构是一个HTML文件，因此该框架网页是一个HTML文件集，它有n+1个HTML文件。 操作步骤 新建一个网页文档。单击“插入”对话框中的“框架”标签，调出“框架”面板，单击右数第二个按钮“上左右”结构 ，网页文档被分割成上左右三个子页面，设置完的网页。 “框架”面板 创建好的框架网页 接上 将光标移到上面的子页面内，单击“设置”→“页面属性”，弹出“页面属性”对话框，将背景颜色设置成“黄色”。用同样的方法，将左边的子页面设置成“蓝色”。 将光标移到上面的子页面内，输入“跟我学HTML”，并设置成居中对齐和“标题1”。在标题的两端插入“PICTURE/141.GIF”图像，在回车后插入“PICTURE/092.JPG”图像。然后将光标移到右边的子页面内，输入文字。 接上 将光标移到左边的子页面内，依次输入链接名称。选中“调整图像的大小”文字，将“链接”设置成“TH1.HTM”网页文档，然后在“目标”下拉列表框中选择mainframe选项。按照同样的方法依次设置其他链接。 单击“文件”→“全部保存”，弹出“保存为”对话框，在弹出“保存为”对话框的同时，要保存的网页文档由虚线圈出。保存的次序依次为：框架页、上面的子页面、左边的子页面、右边的子页面。保存完成后按【F12】查看框架页在浏览器中的显示效果。 “立体效果课程表”网页 “插入表格”对话框内选项的含义 选择表格 设置表格单元格的属性 “立体效果课程表”网页在浏览器中的显示效果 技术分析 表格是网页文档中经常使用的一个对象。利用表格对象可以对网页中的数据进行归类，使页面变得更清晰、更美观。 另外，Dreamweaver MX为制作各种表格提供了大量的预定义格式可供用户使用，使操作更方便。这些预定义的格式化表格可在“格式化表格”对话框中选定和修改。 操作步骤 新建一个页面，单击 “插入”面板内的 “插入表格”按钮 ，弹出“插入表格”对话框。 在“插入表格”对话框内的“行数”文本框内输入8，在“列数”文本框内输入7，在“宽度”文本框中输入300，在后面的下拉列表框中选择“像素”。在“边框”文本框中输入0，在“单元格间距”文本框中输入1。通过上述设置后，单击“确定”按钮，即可插入符合上述要求的表格。 “插入表格”对话框 利用“插入表格”对话框制作的表格 接上 按住【Ctrl】键，将第一行的第一列和第二列选中，单击“单元格属性”面板中的“合并单元格”按钮 ，将这两个单元格合并。使用同样的方法将第二行第一列到第五行第一列、第六行整行和第七行第一列到第八行第一列的单元格分别合并。 单元格合并后的显示效果 接上 单击“命令”→“格式化表格”菜单选项，弹出“格式化表格”对话框，在左边的“表格样式”列表框中选择AltRows:GreenYellow，“格式化表格”对话框中内容变为AltRows:GreenYellow的相关属性。 完成后单击“文件”→“保存”菜单命令，将网页文档保存为“课程表.HTM”，单击【F12】键，在浏览器中查看表格网页的显示效果。 “格式化表格”对话框 “格式化表格”完成后的表格 用表格编排的网页 在表格中插入行或列 删除表格中的行与列 复制和移动表格的单元格 “用表格编排的网页”网页的显示效果 技术分析 在网页布局中，常利用表格来安排网页页面的布局。用表格设计好布局后，再在各个表格的单