第四步：qingchunjiyu.htm设计 然后，在单元格中输入这首诗：
在不断搏击后才能谱写壮丽篇章
第四步：qingchunjiyu.htm设计
Macromedia Dreamweaver MX 2004 提供了多种向 文档中添加文本和设置文本格式的方法。您可以插 入文本、设置字体类型、大小、颜色和对齐属性， 以及使用层叠样式表 (CSS) 样式创建和应用您自 己的自定义样式。
四行字的链接如图9——图12所示。
第二步：left.htm的设计
图9 “我爱我家”链接设置 图10 “青春寄语”链接设置 图11 “摄影欣赏”链接设置
图12 “友情链接”链接设置
第二步：left.htm的设计
左边页面得最终效果如图13所示。
图13 left.htm页面效果图
第三步：woaiwojia.htm叶面的设计
第四步：qingchunjiyu.htm设计
Dreamweaver 中的文本格式设置与使用标准字处理程 序类似。您可以为文本块设置默认格式化样式（段落、 标题 1、标题 2 等）、更改所选文本的字体、大小、 颜色和对齐方式，或者应用文本样式（如粗体、斜体 和下划线）。在该实训中，诗歌字体属性设置如图24 所示。
首先运行“插入—〉表格” 或者点工具栏上的 弹出表格属性设置对话框，如图34所示。
第六步：youqinglianjie.htm页面设计
图34 表格插入对话框
第六步：youqinglianjie.htm页面设计
表格插入后，如图35所示。
图35 插入后的表格
设置表格对齐方式为居中对齐，边框为2，表格属性面板如图36所示。
第三步：woaiwojia.htm叶面的设计
表格插入后，如图15所示。虚线为表格的边框，表格下 面的绿线是表格的标尺，显示表格的宽度和每列的宽度， 如果点击每列对应的标尺中间的小箭头，就会弹出一个 有关列操作的快捷菜单，这也是2004新增加的功能。当 把鼠标移动到虚线上时，鼠标就会变成水平或者垂直拖 动的图标，这个时候可以按下鼠标左键，并进行拖动来 改变表格的大小，这就是“所见即所得”的设计方式。
图36 表格属性设置面板
第六步：youqinglianjie.htm页面设计
如同摄影欣赏中合并单元格的步骤，合并单元格（1， 1），单元格（2，1），单元格（3，1）为一个单元格， 合并单元格（4，1），单元格（5，1），单元格（6， 1）为一个单元格，合并单元格（7，1），单元格（8， 1），单元格（9，1）为一个单元格。用鼠标拖动表格 到合适大小，如图37所示。
第五步：sheyingxinshang.htm页面设计
首先运行“插入—〉表格” 或者点工具栏上的 ，弹出表格属性设置对话框，如图26所示。
第五步：sheyingxinshang.htm页面设计
图26 表格插入对话框
第五步：sheyingxinshang.htm页面设计 插入后的表格如图27所示。
图24 文字格式属性设置
第四步：qingchunjiyu.htm设计 青春寄语效果图图25所示。
图25 qingchunjiyu.htm效果图
第五步：sheyingxinshang.htm页面设计
在摄影欣赏页面上，有两组图片，人体艺术图片和风景 图片，与我爱我家页面相似，也需要表格来进行排版和 定位。
第四步：qingchunjiyu.htm设计
Dreamweaver 允许您通过以下方式在 Web 页中添加 文本：直接将文本键入页中，从其他文档复制和粘贴 文本，或从其他应用程序拖放文本。能够合并到 Web 页的文本内容的常见文档类型有 ASCII 文本文件、 RTF 文件和 MS Office 文档。Dreamweaver 使您可 以从这些文档类型中的任何一种取出文本，然后将文 本并入 Web 页中。
第一步：采用框架设计整体框架
图5 框架保存窗口
第一步：采用框架设计整体框架
图6 右边子页面保存窗口
第一步：采用框架设计整体框架
图7 左边子页面保存窗口
第一步：采用框架设计整体框架
在本实训中，上面三个文件，分别采用文件名 index.htm，woaiwojia.htm，left.htm。左边窗口的名字 为leftFrame，右边窗口的名字为mainFrame。我们可以 随意更改这两个名字，对显示效果没什么影响，在 javascript编程中才会用到，在后面我们设置左边子窗口 中的超级链接的时候也能用到。
图14 表格插入对话框
第三步：woaiwojia.htm叶面的设计
表格的属性窗口包括三部分，即表格大小、页眉、 辅助功能。在此例中，我们插入一个3行，3列，宽 度为200像素，边框为0的表格。由于我们的表格只 是用来进行页面布局，所以不需要表头，因此选择 无。在本实训中，不需要标题，因此标题栏不填任 何内容。
第三步：woaiwojia.htm叶面的设计
图19 图片属性设置
第三步：woaiwojia.htm叶面的设计 最后woaiwojia.htm的效果如图20所示。
图20 woaiwojia.htm效果图
第四步：qingchunjiyu.htm设计
该页面包含一首诗歌，但是为了方便排版，需要把 该诗放在表格中，因此，首先运行“插入—〉表格” 或者点工具栏上的 ，弹出表格属性设置对话框， 如图21所示。
该页面用来显示斐斐的小狗“笨笨”的一组图片，为了排 列图片，所以需要使用表格进行排版。由5.2我们可知， 表格可以用来清晰地显示列表的数据。实际上表格的作用 远远不止显示数据，它在网页定位上一直起着重要的作用。
第三步：woaiwojia.htm叶面的设计 首先运行“插入—〉表格” 或者点工具栏上的 ， 弹出表格属性设置对话框，如图14所示。
图2 框架属性面板
第一步：采用框架设计整体框架
设置完后的框架页面如图3所示。
图3 设置完成后的框架效果图
第一步：采用框架设计整体框架 现在我们已经按照需要设置了框架属性，其 HTML代码如图4所示。
图4 框架HTML代码
第一步：采用框架设计整体框架
在这个框架页面上，其实包含了三个页面：框架 页面、左边子页面、右边子页面，Dreamwaver 2004给这三个文件分别命名为： UntitledFrameset-1.htm、UntitledFrame-1.htm、 Untitled-1.htm。所以在保存的时候，选择“文 件—〉保存全部”，Dreamwaver 2004会顺序弹出 三个窗口，来分别保存上面的三个文件，如图5— —图7所示。
图16 表格属性设置窗口
第三步：woaiwojia.htm叶面的设计 根据需要，拖拉表格到合适的大小，如图17所示。
图17 调整后的表格
第三步：woaiwojia.htm叶面的设计
然后设置单元格的属性，四个大的单元格的水平对 齐方式和垂直对齐方式都设为居中对齐，单元格属性 设置如图18所示：
图18 单元格属性设置
图29 选中单元格示意图
第五步：sheyingxinshang.htm页面设计 松开鼠标左键，点击右键，运行“表格—〉合并单元格” 命令，两个单元格就合并成一个了，如图30所示。
图30 合并单元格后的表格
第五步：sheyingxinshang.htm页面设计 按照同样的步骤，合并左下角两个单元格，合并后的表格 如图31所示。
第三步：woaiwojia.htm叶面的设计
表格调整好后，就可以在四个大的单元格中插入图片 了，运行 “插入—〉图片”，依次插入图片“小狗2.png”，“小狗-6.png”，“小狗-8.png”，“小狗 -9.png”，当然您也可以插入您自己喜欢的图片。图片 属性设置如图19所示。
在您将图像插入 Dreamweaver 文档时，Dreamweaver 自动在 HTML 源代码中生成对该图像文件的引用。为了 确保此引用的正确性，该图像文件必须位于当前站点中 。如果图像文件不在当前站点中，Dreamweaver 会询 问您是否要将此文件复制到当前站点中。
第二步：left.htm的设计
本网站是斐斐的个人网站，所以最好在醒目的位置标示 这个信息，left.htm页面顶端就是最合适的位置，在本 实训中，采用红色的大字体“斐斐小屋”来说明，如果 您喜欢，也可以在这儿放置一个合适的图片。在“斐斐 小屋”的下面，依次插入四行字：“我爱我家”，“青 春寄语”，“摄影欣赏”，“友情链接”，然后设置这
第三步：woaiwojia.htm叶面的设计
图15 插入后的表格
第三步：woaiwojia.htm叶面的设计 如果点击表格的虚线部分，是表格处在选中状态，在 Dreamweaver MX 2004编辑区域的下方属性显示区域， 就会出现表格的属性，如图16，通过该窗口，可是设置 表格的各种属性，包括大小，对齐方式，背景颜色等， 在本实训中，表格对齐方式为居中对齐，宽为564像素， 高为356像素。
第四步：qingchunjiyu.htm设计
图21 插入表格示意图
第四步：qingchunjiyu.htm设计 设置表格的宽度和高度分别为280，212，对齐方式为居 中对齐，单元格的水平对齐方式为左对齐，垂直对齐方 式为顶端对齐。其属性设置面板如图22，图23所示。
图22 表格属性设置面板
图23 单元格属性设置面板
图27 插入后的表格
设置表格的对齐方式为居中对齐，表格属性面板如 图28所示。
图28 表格属性设置面板
第五步：sheyingxinshang.htm页面设计 然后，合并左上角两个单元格，用鼠标在左上角单元格 中点击一下，然后按住鼠标左键，向下拖动鼠标，直到 进入第二个单元格，这时候，左上角两个单元格处于选 中状态，如图29所示。
第一步：采用框架设计整体框架 到此为止，框架页面已经做完了，通过Dreamwaver 2004中的“文件—〉在浏览器中预览—〉iexplore”， 就可以看到框架的效果如图8所示。