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

1、1. Dreamweaver 中的文本格式设置与运用第一步：采用框架设计整体框架 由5.3节我们曾经学到，框架即多窗口页面，也称为“帧，是将一个阅读器窗口分成多个小页面，每个页面显示一定的内容。它是页面排版的重要表现方式。本实训中，需求把页面分成左右两部分，左边部分为菜单列表，右边部分为主显示页面。 翻开Dreamwaver 2004，新建一个空白页面，然后运转菜单“插入HTML框架左方，页面就会被分割成左右两个部分，如图1所示。.图1 框架效果图 第一步：采用框架设计整体框架.插入框架后，设置框架的属性，我们需求框架的边框为2，颜色为红色，左边宽度为110像素，所以框架的属性面板如图2所示。

2、图2 框架属性面板第一步：采用框架设计整体框架.设置完后的框架页面如图3所示。图3 设置完成后的框架效果图第一步：采用框架设计整体框架.如今我们曾经按照需求设置了框架属性，其HTML代码如图4所示。图4 框架HTML代码第一步：采用框架设计整体框架.第一步：采用框架设计整体框架在这个框架页面上，其实包含了三个页面：框架页面、左边子页面、右边子页面，Dreamwaver 2004给这三个文件分别命名为：UntitledFrameset-1.htm、UntitledFrame-1.htm、Untitled-1.htm。所以在保管的时候，选择“文件保管全部，Dreamwaver 2004会顺序弹出三

3、个窗口，来分别保管上面的三个文件，如图5图7所示。.图5 框架保管窗口 第一步：采用框架设计整体框架.图6 右边子页面保管窗口 第一步：采用框架设计整体框架.图7 左边子页面保管窗口 第一步：采用框架设计整体框架.第一步：采用框架设计整体框架在本实训中，上面三个文件，分别采用文件名index.htm，woaiwojia.htm，left.htm。左边窗口的名字为leftFrame，右边窗口的名字为mainFrame。我们可以随意更改这两个名字，对显示效果没什么影响，在javascript编程中才会用到，在后面我们设置左边子窗口中的超级链接的时候也能用到。 .到此为止，框架页面曾经做完了，经过D

4、reamwaver 2004中的“文件在阅读器中预览iexplore，就可以看到框架的效果如图8所示。图8 框架最终显示效果图第一步：采用框架设计整体框架.第二步：left.htm的设计在Dreamwaver 2004中，点击上面这个框架页面红色框架左边的空白区域，他会发现Dreamwaver 2004的窗口最上面显示的文件名曾经变成left.htm，这时候，就可以对left.htm进展编辑了。 .第二步：left.htm的设计本网站是斐斐的个人网站，所以最好在醒目的位置标示这个信息，left.htm页面顶端就是最适宜的位置，在本实训中，采用红色的大字体“斐斐小屋来阐明，假设您喜欢，也可以在这

5、儿放置一个适宜的图片。在“斐斐小屋的下面，依次插入四行字：“我爱我家，“青春寄语，“摄影欣赏，“友谊链接，然后设置这四行字的链接如图9图12所示。.图9 “我爱我家链接设置第二步：left.htm的设计图10 “青春寄语链接设置图11 “摄影欣赏链接设置图12 “友谊链接链接设置 .左边页面得最终效果如图13所示。图13 left.htm页面效果图 第二步：left.htm的设计.第三步：woaiwojia.htm叶面的设计该页面用来显示斐斐的小狗“笨笨的一组图片，为了陈列图片，所以需求运用表格进展排版。由5.2我们可知，表格可以用来明晰地显示列表的数据。实践上表格的作用远远不止显示数据，它在

6、网页定位上不断起着重要的作用。.第三步：woaiwojia.htm叶面的设计首先运转“插入表格 或者点工具栏上的 ，弹出表格属性设置对话框，如图14所示。图14 表格插入对话框.表格的属性窗口包括三部分，即表格大小、页眉、辅助功能。在此例中，我们插入一个3行，3列，宽度为200像素，边框为0的表格。由于我们的表格只是用来进展页面规划，所以不需求表头，因此选择无。在本实训中，不需求标题，因此标题栏不填任何内容。 第三步：woaiwojia.htm叶面的设计.第三步：woaiwojia.htm叶面的设计表格插入后，如图15所示。虚线为表格的边框，表格下面的绿线是表格的标尺，显示表格的宽度和每列的宽

7、度，假设点击每列对应的标尺中间的小箭头，就会弹出一个有关列操作的快捷菜单，这也是2004新添加的功能。当把鼠标挪动到虚线上时，鼠标就会变成程度或者垂直拖动的图标，这个时候可以按下鼠标左键，并进展拖动来改动表格的大小，这就是“所见即所得的设计方式。 .图15 插入后的表格第三步：woaiwojia.htm叶面的设计.第三步：woaiwojia.htm叶面的设计 假设点击表格的虚线部分，是表格处在选中形状，在Dreamweaver MX 2004编辑区域的下方属性显示区域，就会出现表格的属性，如图16，经过该窗口，可是设置表格的各种属性，包括大小，对齐方式，背景颜色等，在本实训中，表格对齐方式为居

8、中对齐，宽为564像素，高为356像素。图16 表格属性设置窗口 .第三步：woaiwojia.htm叶面的设计根据需求，迁延表格到适宜的大小，如图17所示。图17 调整后的表格.第三步：woaiwojia.htm叶面的设计 然后设置单元格的属性，四个大的单元格的程度对齐方式和垂直对齐方式都设为居中对齐，单元格属性设置如图18所示：图18 单元格属性设置 .表风格整好后，就可以在四个大的单元格中插入图片了，运转 “插入图片，依次插入图片“小狗-2.png，“小狗-6.png，“小狗-8.png，“小狗-9.png，当然您也可以插入您本人喜欢的图片。图片属性设置如图19所示。在您将图像插入 Dr

9、eamweaver 文档时，Dreamweaver 自动在 HTML 源代码中生成对该图像文件的援用。为了确保此援用的正确性，该图像文件必需位于当前站点中。假设图像文件不在当前站点中，Dreamweaver 会讯问您能否要将此文件复制到当前站点中。第三步：woaiwojia.htm叶面的设计.图19 图片属性设置 第三步：woaiwojia.htm叶面的设计.最后woaiwojia.htm的效果如图20所示。图20 woaiwojia.htm效果图 第三步：woaiwojia.htm叶面的设计.第四步：qingchunjiyu.htm设计 该页面包含一首诗歌，但是为了方便排版，需求把该诗放在表

10、格中，因此，首先运转“插入表格 或者点工具栏上的 ，弹出表格属性设置对话框，如图21所示。. 图21 插入表格表示图第四步：qingchunjiyu.htm设计.设置表格的宽度和高度分别为280，212，对齐方式为居中对齐，单元格的程度对齐方式为左对齐，垂直对齐方式为顶端对齐。其属性设置面板如图22，图23所示。图22 表格属性设置面板 图23 单元格属性设置面板 第四步：qingchunjiyu.htm设计. 然后，在单元格中输入这首诗： 云彩还在天空彷徨 青春之花却毫不犹疑地 粲然开放了 有人说 收藏在人生册页中的青春花瓣 或许只是 一双永不能忘的双眸 一个令人心动的浅笑 我想说 青春的光

11、辉 在冉冉升起时会很亮堂 青春的花朵 在阅历过风霜雪雨后会熠熠生辉 青春的历程 在不断搏击后才干谱写绚丽篇章第四步：qingchunjiyu.htm设计.Macromedia Dreamweaver MX 2004 提供了多种向文档中添加文本和设置文本格式的方法。您可以插入文本、设置字体类型、大小、颜色和对齐属性，以及运用层叠款式表 (CSS) 款式创建和运用您本人的自定义款式。第四步：qingchunjiyu.htm设计.Dreamweaver 允许您经过以下方式在 Web 页中添加文本：直接将文本键入页中，从其他文档复制和粘贴文本，或从其他运用程序拖放文本。可以合并到 Web 页的文本内容

12、的常见文档类型有 ASCII 文本文件、RTF 文件和 MS Office 文档。Dreamweaver 使您可以从这些文档类型中的任何一种取出文本，然后将文本并入 Web 页中。第四步：qingchunjiyu.htm设计.Dreamweaver 中的文本格式设置与运用规范字处置程序类似。您可以为文本块设置默许格式化款式段落、标题 1、标题 2 等、更改所选文本的字体、大小、颜色和对齐方式，或者运用文本款式如粗体、斜体和下划线。在该实训中，诗歌字体属性设置如图24所示。图24 文字格式属性设置 第四步：qingchunjiyu.htm设计.青春寄语效果图图25所示。 图25 qingchun

13、jiyu.htm效果图 第四步：qingchunjiyu.htm设计.第五步：sheyingxinshang.htm页面设计在摄影欣赏页面上，有两组图片，人体艺术图片和风景图片，与我爱我家页面类似，也需求表格来进展排版和定位。.首先运转“插入表格 或者点工具栏上的，弹出表格属性设置对话框，如图26所示。第五步：sheyingxinshang.htm页面设计.图26 表格插入对话框第五步：sheyingxinshang.htm页面设计.插入后的表格如图27所示。 图27 插入后的表格设置表格的对齐方式为居中对齐，表格属性面板如图28所示。 图28 表格属性设置面板第五步：sheyingxinsh

14、ang.htm页面设计.然后，合并左上角两个单元格，用鼠标在左上角单元格中点击一下，然后按住鼠标左键，向下拖动鼠标，直到进入第二个单元格，这时候，左上角两个单元格处于选中形状，如图29所示。 图29 选中单元格表示图第五步：sheyingxinshang.htm页面设计.松开鼠标左键，点击右键，运转“表格合并单元格命令，两个单元格就合并成一个了，如图30所示。图30 合并单元格后的表格 第五步：sheyingxinshang.htm页面设计.按照同样的步骤，合并左下角两个单元格，合并后的表格如图31所示。 图31 合并单元格后的表格 第五步：sheyingxinshang.htm页面设计.然后

15、，经过拖动表格，调整表格到适宜大小，一切单元格的对齐方式设置为程度和垂直均为居中对齐，单元格的属性面板如图32所示。 图32 单元格属性设置面板 第五步：sheyingxinshang.htm页面设计.下面为了表达方便，用单元格x,y表示第x行，第y列的单元格。在单元格1，2，1，3，2，2，2，3中插入人体艺术图片7_1286.jpg，7_1289.jpg，7_1311.jpg，7_1287.jpg。在单元格4，2，4，3，5，2，5，3中插入风景图片12.jpg，20.jpg，04.jpg，11.jpg。左上角单元格中输入“人体艺术欣赏，左下角单元格中输入“风景图片欣赏，都是每行一个字。最

16、后摄影欣赏页面的效果如图33所示。第五步：sheyingxinshang.htm页面设计.图33 sheyingxinshang.htm效果图第五步：sheyingxinshang.htm页面设计.第六步：youqinglianjie.htm页面设计该页面包含斐斐搜集的一些有用的链接，协助阅读用户根据需求，进入适宜的网站，为了使链接陈列整齐，查找方便，依然需求借用表格进展排版和定位。首先运转“插入表格 或者点工具栏上的 弹出表格属性设置对话框，如图34所示。.图34 表格插入对话框第六步：youqinglianjie.htm页面设计.表格插入后，如图35所示。图35 插入后的表格 设置表格对齐

17、方式为居中对齐，边框为2，表格属性面板如图36所示。图36 表格属性设置面板第六步：youqinglianjie.htm页面设计.好像摄影欣赏中合并单元格的步骤，合并单元格1，1，单元格2，1，单元格3，1为一个单元格，合并单元格4，1，单元格5，1，单元格6，1为一个单元格，合并单元格7，1，单元格8，1，单元格9，1为一个单元格。用鼠标拖动表格到适宜大小，如图37所示。第六步：youqinglianjie.htm页面设计.图37 合并单元格后的表格第六步：youqinglianjie.htm页面设计.在左上角单元格中输入“门户网站，左边中间单元格中输入“专业网站，左下角单元格中输入“其他，

18、每字一行，单元格程度和垂直对齐方式均为居中对齐；在单元格1，2，单元格2，2，单元格3，2，单元格4，2，单元格5，2，单元格6，2，单元格7，2，单元格8，2，单元格9，2中分别输入文字“新浪网，“网易，“搜狐，“中国设计网，“设计在线，“视觉中国，“天涯论坛，“网易邮箱，“CSDN论坛，单元格程度对齐方式均为左对齐，相应的链接分别为httpsina/，163/，sohu/，cndgn/，dolcn/，chinavisual/，tianyaclub/，mail.163/，/第六步：youqinglianjie.htm页面设计.为了让阅读用户在进入每个链接之前，就能知道每个链接的大体信息，所以有必要在每个链接上面加上一些解释性文字，可以经过层来实现这个功能。在本实例中，我们给每个链接都加上了一段解释性文字，以“新浪网为例阐明如下：第六