Dreamweaver 中的文本格式设置与使用

1、1. Dreamweaver 中的文本格式中的文本格式 设置与使用设置与使用 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 由由5.3节我们已经学到，框架即多窗口页面，也称为节我们已经学到，框架即多窗口页面，也称为 “帧帧”，是将一个浏览器窗口分成多个小页面，每个页，是将一个浏览器窗口分成多个小页面，每个页 面显示一定的内容。它是页面排版的重要表现方式。本面显示一定的内容。它是页面排版的重要表现方式。本 实训中，需要把页面分成左右两部分，左边部分为菜单实训中，需要把页面分成左右两部分，左边部分为菜单 列表，右边部分为主显示页面。列表，右边部分为主显示页面。 打开打开Dreamwav

2、er 2004，新建一个空白页面，然后运行菜，新建一个空白页面，然后运行菜 单单“插入插入HTML框架框架左方左方”，页面就会被，页面就会被 分割成左右两个部分，如图分割成左右两个部分，如图1所示。所示。 图图1 框架效果图框架效果图 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 插入框架后，设置框架的属性，我们需要框架的边框为插入框架后，设置框架的属性，我们需要框架的边框为2 2， 颜色为红色，左边宽度为颜色为红色，左边宽度为110110像素，所以框架的属性面板像素，所以框架的属性面板 如图如图2 2所示。所示。 图图2 2 框架属性面板框架属性面板 第一步：采用框架设计整体框架

3、第一步：采用框架设计整体框架 设置完后的框架页面如图设置完后的框架页面如图3 3所示。所示。 图图3 3 设置完成后的框架效果图设置完成后的框架效果图 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 现在我们已经按照需要设置了框架属性，其现在我们已经按照需要设置了框架属性，其 HTMLHTML代码如图代码如图4 4所示。所示。 图图4 4 框架框架HTMLHTML代码代码 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 在这个框架页面上，其实包含了三个页面：框架在这个框架页面上，其实包含了三个页面：框架 页面、左边子

4、页面、右边子页面，页面、左边子页面、右边子页面，Dreamwaver Dreamwaver 2 0 0 42 0 0 4 给 这 三 个 文 件 分 别 命 名 为 ：给 这 三 个 文 件 分 别 命 名 为 ： UntitledFrameset-1.htmUntitledFrameset-1.htm、UntitledFrame-1.htmUntitledFrame-1.htm、 Untitled-1.htmUntitled-1.htm。所以在保存的时候，选择。所以在保存的时候，选择“文文 件件保存全部保存全部”，Dreamwaver 2004Dreamwaver 2004会顺序弹出会顺序弹

5、出 三个窗口，来分别保存上面的三个文件，如图三个窗口，来分别保存上面的三个文件，如图 55图图7 7所示。所示。 图图5 框架保存窗口框架保存窗口 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 图图6 右边子页面保存窗口右边子页面保存窗口 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 图图7 左边子页面保存窗口左边子页面保存窗口 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 在本实训中，上面三个文件，分别采用文件名在本实训中，上面三个文件，分别采用文件名index.htm， woaiwojia.htm

6、，left.htm。左边窗口的名字为。左边窗口的名字为leftFrame， 右边窗口的名字为右边窗口的名字为mainFrame。我们可以随意更改这两。我们可以随意更改这两 个名字，对显示效果没什么影响，在个名字，对显示效果没什么影响，在javascript编程中才编程中才 会用到，在后面我们设置左边子窗口中的超级链接的时会用到，在后面我们设置左边子窗口中的超级链接的时 候也能用到。候也能用到。 到此为止，框架页面已经做完了，通过到此为止，框架页面已经做完了，通过Dreamwaver Dreamwaver 20042004中的中的“文件文件在浏览器中预览在浏览器中预览iexploreiexplo

7、re”， 就可以看到框架的效果如图就可以看到框架的效果如图8 8所示。所示。 图图8 8 框架最终显示效果图框架最终显示效果图 第一步：采用框架设计整体框架第一步：采用框架设计整体框架 本网站是斐斐的个人网站，所以最好在醒目的位置标示本网站是斐斐的个人网站，所以最好在醒目的位置标示 这个信息，这个信息，left.htmleft.htm页面顶端就是最合适的位置，在本页面顶端就是最合适的位置，在本 实训中，采用红色的大字体实训中，采用红色的大字体“斐斐小屋斐斐小屋”来说明，如果来说明，如果 您喜欢，也可以在这儿放置一个合适的图片。在您喜欢，也可以在这儿放置一个合适的图片。在“斐斐斐斐 小屋小屋”的

8、下面，依次插入四行字：的下面，依次插入四行字：“我爱我家我爱我家”，“青青 春寄语春寄语”，“摄影欣赏摄影欣赏”，“友情链接友情链接”，然后设置这，然后设置这 四行字的链接如图四行字的链接如图9 9图图1212所示。所示。 图图9 9 “我爱我家我爱我家”链接设置链接设置 图图10 10 “青春寄语青春寄语”链接设置链接设置 图图11 11 “摄影欣赏摄影欣赏”链接设置链接设置 图图12 “友情链接友情链接”链接设置链接设置 左边页面得最终效果如图左边页面得最终效果如图1313所示。所示。 图图13 left.htm页面效果图页面效果图 该页面用来显示斐斐的小狗该页面用来显示斐斐的小狗“笨笨笨

9、笨”的一组图片，为了排的一组图片，为了排 列图片，所以需要使用表格进行排版。由列图片，所以需要使用表格进行排版。由5.25.2我们可知，我们可知， 表格可以用来清晰地显示列表的数据。实际上表格的作用表格可以用来清晰地显示列表的数据。实际上表格的作用 远远不止显示数据，它在网页定位上一直起着重要的作用。远远不止显示数据，它在网页定位上一直起着重要的作用。 首先运行首先运行“插入插入表格表格” ” 或者点工具栏上的或者点工具栏上的 ， 弹出表格属性设置对话框，如图弹出表格属性设置对话框，如图1414所示。所示。 图图14 14 表格插入对话框表格插入对话框 表格插入后，如图表格插入后，如图15所示

10、。虚线为表格的边框，表格下所示。虚线为表格的边框，表格下 面的绿线是表格的标尺，显示表格的宽度和每列的宽度，面的绿线是表格的标尺，显示表格的宽度和每列的宽度， 如果点击每列对应的标尺中间的小箭头，就会弹出一个如果点击每列对应的标尺中间的小箭头，就会弹出一个 有关列操作的快捷菜单，有关列操作的快捷菜单，这也是这也是2004新增加的功能新增加的功能。当。当 把鼠标移动到虚线上时，鼠标就会变成水平或者垂直拖把鼠标移动到虚线上时，鼠标就会变成水平或者垂直拖 动的图标，这个时候可以按下鼠标左键，并进行拖动来动的图标，这个时候可以按下鼠标左键，并进行拖动来 改变表格的大小，这就是改变表格的大小，这就是“所

11、见即所得所见即所得”的设计方式。的设计方式。 图图15 15 插入后的表格插入后的表格 如果点击表格的虚线部分，是表格处在选中状态，在如果点击表格的虚线部分，是表格处在选中状态，在 Dreamweaver MX 2004Dreamweaver MX 2004编辑区域的下方属性显示区域，就编辑区域的下方属性显示区域，就 会出现表格的属性，如图会出现表格的属性，如图1616，通过该窗口，可是设置表，通过该窗口，可是设置表 格的各种属性，包括大小，对齐方式，背景颜色等，在格的各种属性，包括大小，对齐方式，背景颜色等，在 本实训中，表格对齐方式为居中对齐，宽为本实训中，表格对齐方式为居中对齐，宽为56

12、4564像素，高像素，高 为为356356像素。像素。 图图16 表格属性设置窗口表格属性设置窗口 根据需要，拖拉表格到合适的大小，如图根据需要，拖拉表格到合适的大小，如图1717所示。所示。 图图17 17 调整后的表格调整后的表格 然后设置单元格的属性，四个大的单元格的水平对然后设置单元格的属性，四个大的单元格的水平对 齐方式和垂直对齐方式都设为居中对齐，单元格属性齐方式和垂直对齐方式都设为居中对齐，单元格属性 设置如图设置如图1818所示：所示： 图图18 单元格属性设置单元格属性设置 表格调整好后，就可以在四个大的单元格中插入图片表格调整好后，就可以在四个大的单元格中插入图片 了，运行

13、了，运行 “插入插入图片图片”，依次插入图片，依次插入图片“小狗小狗- - 2.png2.png”，“小狗小狗-6.png-6.png”，“小狗小狗-8.png-8.png”，“小狗小狗- - 9.png9.png”，当然您也可以插入您自己喜欢的图片。图片，当然您也可以插入您自己喜欢的图片。图片 属性设置如图属性设置如图1919所示。所示。 在您将图像插入在您将图像插入 Dreamweaver Dreamweaver 文档时，文档时，Dreamweaver Dreamweaver 自动在自动在 HTML HTML 源代码中生成对该图像文件的引用。为了源代码中生成对该图像文件的引用。为了 确保此

14、引用的正确性，该图像文件必须位于当前站点中确保此引用的正确性，该图像文件必须位于当前站点中 。如果图像文件不在当前站点中，。如果图像文件不在当前站点中，Dreamweaver Dreamweaver 会询问会询问 您是否要将此文件复制到当前站点中。您是否要将此文件复制到当前站点中。 图图19 图片属性设置图片属性设置 最后最后woaiwojia.htmwoaiwojia.htm的效果如图的效果如图2020所示。所示。 图图20 woaiwojia.htm效果图效果图 该页面包含一首诗歌，但是为了方便排版，需要把该页面包含一首诗歌，但是为了方便排版，需要把 该诗放在表格中，因此，首先运行该诗放在

15、表格中，因此，首先运行“插入插入表格表格” ” 或者点工具栏上的或者点工具栏上的 ，弹出表格属性设置对话框，弹出表格属性设置对话框， 如图如图2121所示。所示。 图图21 21 插入表格示意图插入表格示意图 设置表格的宽度和高度分别为设置表格的宽度和高度分别为280280，212212，对齐方式为居，对齐方式为居 中对齐，单元格的水平对齐方式为左对齐，垂直对齐方中对齐，单元格的水平对齐方式为左对齐，垂直对齐方 式为顶端对齐。其属性设置面板如图式为顶端对齐。其属性设置面板如图2222，图，图2323所示。所示。 图图22 表格属性设置面板表格属性设置面板 图图23 单元格属性设置面板单元格属性

16、设置面板 然后，在单元格中输入这首诗：然后，在单元格中输入这首诗： 云彩还在天空徘徊 青春之花却毫不犹豫地 粲然开放了 有人说 珍藏在人生册页中的青春花瓣 或许只是 一双永不能忘的双眸 一个令人心动的微笑 我想说 青春的光芒 在冉冉升起时会很明亮 青春的花朵 在经历过风霜雪雨后会熠熠生辉 青春的历程 在不断搏击后才能谱写壮丽篇章 Macromedia Dreamweaver MX 2004 Macromedia Dreamweaver MX 2004 提供了多种向提供了多种向 文档中添加文本和设置文本格式的方法。您可以插文档中添加文本和设置文本格式的方法。您可以插 入文本、设置字体类型、大小、

17、颜色和对齐属性，入文本、设置字体类型、大小、颜色和对齐属性， 以及使用层叠样式表以及使用层叠样式表 ( (CSS) CSS) 样式创建和应用您自样式创建和应用您自 己的自定义样式。己的自定义样式。 Dreamweaver Dreamweaver 允许您通过以下方式在允许您通过以下方式在 Web Web 页中添加文页中添加文 本：直接将文本键入页中，从其他文档复制和粘贴文本：直接将文本键入页中，从其他文档复制和粘贴文 本，或从其他应用程序拖放文本。能够合并到本，或从其他应用程序拖放文本。能够合并到 Web Web 页页 的文本内容的常见文档类型有的文本内容的常见文档类型有 ASCII ASCII

18、 文本文件、文本文件、RTF RTF 文件和文件和 MS Office MS Office 文档。文档。Dreamweaver Dreamweaver 使您可以从这使您可以从这 些文档类型中的任何一种取出文本，然后将文本并入些文档类型中的任何一种取出文本，然后将文本并入 Web Web 页中。页中。 Dreamweaver Dreamweaver 中的文本格式设置与使用标准字处理程中的文本格式设置与使用标准字处理程 序类似。您可以为文本块设置默认格式化样式（段落、序类似。您可以为文本块设置默认格式化样式（段落、 标题标题 1 1、标题、标题 2 2 等）、更改所选文本的字体、大小、等）、更改所

19、选文本的字体、大小、 颜色和对齐方式，或者应用文本样式（如粗体、斜体颜色和对齐方式，或者应用文本样式（如粗体、斜体 和下划线）。在该实训中，诗歌字体属性设置如图和下划线）。在该实训中，诗歌字体属性设置如图2424 所示。所示。 图图24 文字格式属性设置文字格式属性设置 青春寄语效果图图青春寄语效果图图25所示。所示。 图图25 qingchunjiyu.htm效果图效果图 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 在摄影欣赏页面上，有两组图片，人体艺术图片和风景在摄影欣赏页面上，有两组图片，人体艺术图片和风景 图片，与我爱我

20、家页面相似，也需要表格来进行排版和图片，与我爱我家页面相似，也需要表格来进行排版和 定位。定位。 首先运行首先运行“插入插入表格表格” ” 或者点工具栏上的或者点工具栏上的 ，弹出表格属性设置对话框，如图，弹出表格属性设置对话框，如图2626所示。所示。 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 图图26 26 表格插入对话框表格插入对话框 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 插入后的表格如图插入后的表格如图27所示。所示。 图图27 27 插入后的表格

21、插入后的表格 设置表格的对齐方式为居中对齐，表格属性面板如设置表格的对齐方式为居中对齐，表格属性面板如 图图28所示。所示。 图图28 28 表格属性设置面板表格属性设置面板 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 然后，合并左上角两个单元格，用鼠标在左上角单元格然后，合并左上角两个单元格，用鼠标在左上角单元格 中点击一下，然后按住鼠标左键，向下拖动鼠标，直到中点击一下，然后按住鼠标左键，向下拖动鼠标，直到 进入第二个单元格，这时候，左上角两个单元格处于选进入第二个单元格，这时候，左上角两个单元格处于选 中状态，如图中状态，

22、如图29所示。所示。 图图29 29 选中单元格示意图选中单元格示意图 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 松开鼠标左键，点击右键，运行松开鼠标左键，点击右键，运行“表格表格合并单元格合并单元格” 命令，两个单元格就合并成一个了，如图命令，两个单元格就合并成一个了，如图3030所示。所示。 图图30 合并单元格后的表格合并单元格后的表格 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 按照同样的步骤，合并左下角两个单元格，合并后的表格按照同样的步骤，合并左下角

23、两个单元格，合并后的表格 如图如图31所示。所示。 图图31 合并单元格后的表格合并单元格后的表格 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 然后，通过拖动表格，调整表格到合适大小，所有单元然后，通过拖动表格，调整表格到合适大小，所有单元 格的对齐方式设置为水平和垂直均为居中对齐，单元格格的对齐方式设置为水平和垂直均为居中对齐，单元格 的属性面板如图的属性面板如图32所示。所示。 图图32 单元格属性设置面板单元格属性设置面板 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计

24、页面设计 下面为了叙述方便，用单元格（下面为了叙述方便，用单元格（x,yx,y）表示第）表示第x x行，第行，第y y 列的单元格。在单元格（列的单元格。在单元格（1 1，2 2），（），（1 1，3 3），（），（2 2， 2 2），（），（2 2，3 3）中插入人体艺术图片）中插入人体艺术图片7_1286.jpg7_1286.jpg， 7_1289.jpg7_1289.jpg，7_1311.jpg7_1311.jpg，7_1287.jpg7_1287.jpg。在单元格（。在单元格（4 4， 2 2），（），（4 4，3 3），（），（5 5，2 2），（），（5 5，3 3）中插入风景图片

25、）中插入风景图片 12.jpg12.jpg，20.jpg20.jpg，04.jpg04.jpg，11.jpg11.jpg。左上角单元格中。左上角单元格中 输入输入“人体艺术欣赏人体艺术欣赏”，左下角单元格中输入，左下角单元格中输入“风景风景 图片欣赏图片欣赏”，都是每行一个字。最后摄影欣赏页面的，都是每行一个字。最后摄影欣赏页面的 效果如图效果如图3333所示。所示。 第五步：第五步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 图图33 sheyingxinshang.htm33 sheyingxinshang.htm效果图效果图 第五步：第五

26、步：sheyingxinshang.htmsheyingxinshang.htm页面设计页面设计 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 该页面包含斐斐收集的一些有用的链接，帮助浏该页面包含斐斐收集的一些有用的链接，帮助浏 览用户根据需要，进入合适的网站，为了使链接排览用户根据需要，进入合适的网站，为了使链接排 列整齐，查找方便，仍然需要借用表格进行排版和列整齐，查找方便，仍然需要借用表格进行排版和 定位。定位。 首先运行首先运行“插入插入表格表格” ” 或者点工具栏上的或者点工具栏上的 弹出表格属性设置对话框，如图弹出表格属性

27、设置对话框，如图3434所示。所示。 图图34 34 表格插入对话框表格插入对话框 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 表格插入后，如图表格插入后，如图3535所示。所示。 图图35 插入后的表格插入后的表格 设置表格对齐方式为居中对齐，边框为设置表格对齐方式为居中对齐，边框为2 2，表格属性面板如图，表格属性面板如图3636所示。所示。 图图36 36 表格属性设置面板表格属性设置面板 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 如同摄影欣赏中合并单元格的步骤，

28、合并单元格（如同摄影欣赏中合并单元格的步骤，合并单元格（1 1， 1 1），单元格（），单元格（2 2，1 1），单元格（），单元格（3 3，1 1）为一个单元格，）为一个单元格， 合并单元格（合并单元格（4 4，1 1），单元格（），单元格（5 5，1 1），单元格（），单元格（6 6， 1 1）为一个单元格，合并单元格（）为一个单元格，合并单元格（7 7，1 1），单元格（），单元格（8 8， 1 1），单元格（），单元格（9 9，1 1）为一个单元格。用鼠标拖动表格）为一个单元格。用鼠标拖动表格 到合适大小，如图到合适大小，如图3737所示。所示。 第六步：第六步：youqinglian

29、jie.htmyouqinglianjie.htm页面设计页面设计 图图37 37 合并单元格后的表格合并单元格后的表格 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 在左上角单元格中输入在左上角单元格中输入“门户网站门户网站”，左边中间单元格中输入，左边中间单元格中输入 “专业网站专业网站”，左下角单元格中输入，左下角单元格中输入“其他其他”，每字一行，单，每字一行，单 元格水平和垂直对齐方式均为居中对齐；在单元格（元格水平和垂直对齐方式均为居中对齐；在单元格（1 1，2 2），）， 单元格（单元格（2 2，2 2），单元格（），单

30、元格（3 3，2 2），单元格（），单元格（4 4，2 2），单元格），单元格 （5 5，2 2），单元格（），单元格（6 6，2 2），单元格（），单元格（7 7，2 2），单元格（），单元格（8 8， 2 2），单元格（），单元格（9 9，2 2）中分别输入文字）中分别输入文字“新浪网新浪网”，“网易网易”， “搜狐搜狐”，“中国设计网中国设计网”，“设计在线设计在线”，“视觉中国视觉中国”， “天涯论坛天涯论坛”，“网易邮箱网易邮箱”，“CSDNCSDN论坛论坛”，单元格水平对，单元格水平对 齐 方 式 均 为 左 对 齐 ， 相 应 的 链 接 分 别 为齐 方 式 均 为 左 对 齐

31、 ， 相 应 的 链 接 分 别 为 http:/ http:/ http:/ http:/ http:/ 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 为了让浏览用户在进入每个链接之前，就能知道为了让浏览用户在进入每个链接之前，就能知道 每个链接的大体信息，所以有必要在每个链接上每个链接的大体信息，所以有必要在每个链接上 面加上一些解释性文字，可以通过层来实现这个面加上一些解释性文字，可以通过层来实现这个 功能。在本实例中，我们给每个链接都加上了一功能。在本实例中，我们给每个链接都加上了一 段解释性文字，以段解释性文字，以“新浪网新浪网”为例说明如下：为例说明如下： 第六步：第六步：youqinglianjie.htmyouqinglianjie.htm页面设计页面设计 首先首先 通过通过“插入插入布局对象布局对象层层”命令在命令在 “新浪网新浪网”链接旁边添加一个层，并且输入链接旁边添加一个层，并且输入 需要显示的话，在本例中，需要输入的说明