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

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、Untitle

3、d-1.htm。所以在在保存的的时候，选择“文件保存全全部”，Dreamwaver 2004会顺序弹弹出三个个窗口，来分别别保存上上面的三三个文件件，如图图5图7所示。图5框架保存存窗口第一步：采用框框架设计计整体框框架图6右边子页页面保存存窗口第一步：采用框框架设计计整体框框架图7左边子页页面保存存窗口第一步：采用框框架设计计整体框框架第一步：采用框框架设计计整体框框架在本实训训中，上上面三个个文件，分别采采用文件件名index.htm，woaiwojia.htm，left.htm。左边窗窗口的名名字为leftFrame，右边窗窗口的名名字为mainFrame。我们可可以随意意更改这这两个名

4、名字，对对显示效效果没什什么影响响，在javascript编程中才才会用到到，在后后面我们们设置左左边子窗窗口中的的超级链链接的时时候也能能用到。到此为止止，框架架页面已已经做完完了，通通过Dreamwaver 2004中的“文文件在浏览览器中预预览iexplore”，就可可以看到到框架的的效果如如图8所示。图8框架最终终显示效效果图第一步：采用框框架设计计整体框框架第二步：left.htm的设计在Dreamwaver 2004中，点击击上面这这个框架架页面红红色框架架左边的的空白区区域，你你会发现现Dreamwaver 2004的窗口最最上面显显示的文文件名已已经变成成left.htm，这时

5、候，就可以以对left.htm进行编辑辑了。第二步：left.htm的设计本网站是是斐斐的的个人网网站，所所以最好好在醒目目的位置置标示这这个信息息，left.htm页面顶端端就是最最合适的的位置，在本实实训中，采用红红色的大大字体“斐斐小小屋”来来说明，如果您您喜欢，也可以以在这儿儿放置一一个合适适的图片片。在“斐斐小小屋”的的下面，依次插插入四行行字：“我爱我我家”，“青春春寄语”，“摄摄影欣赏赏”，“友情链链接”，然后设设置这四四行字的的链接如如图9图12所示。图9“我爱我我家”链链接设置置第二步：left.htm的设计图10“青春寄寄语”链链接设置置图11“摄影欣欣赏”链链接设置置图1

6、2“友情链链接”链链接设置置左边页面面得最终终效果如如图13所示。图13left.htm页面效果果图第二步：left.htm的设计第三步：woaiwojia.htm叶面的设设计该页面用用来显示示斐斐的的小狗“笨笨”的一组组图片，为了排排列图片片，所以以需要使使用表格格进行排排版。由由5.2我们可可知，表表格可以以用来清清晰地显显示列表表的数据据。实际际上表格格的作用用远远不不止显示示数据，它在网网页定位位上一直直起着重重要的作作用。第三步：woaiwojia.htm叶面的设设计首先运行行“插入入表表格”或或者点点工具栏栏上的，弹出表格格属性设设置对话话框，如如图14所示。图14表表格插插入对话

7、话框表格的属属性窗口口包括三三部分，即表格格大小、页眉、辅助功功能。在在此例中中，我们们插入一一个3行行，3列列，宽度度为200像素素，边框框为0的的表格。由于我我们的表表格只是是用来进进行页面面布局，所以不不需要表表头，因因此选择择无。在在本实训训中，不不需要标标题，因因此标题题栏不填填任何内内容。第三步：woaiwojia.htm叶面的设设计第三步：woaiwojia.htm叶面的设设计表格插入入后，如如图15所示。虚线为为表格的的边框，表格下下面的绿绿线是表表格的标标尺，显显示表格格的宽度度和每列列的宽度度，如果果点击每每列对应应的标尺尺中间的的小箭头头，就会会弹出一一个有关关列操作作的

8、快捷捷菜单，这也是2004新增加的的功能。当把鼠鼠标移动动到虚线线上时，鼠标就就会变成成水平或或者垂直直拖动的的图标，这个时时候可以以按下鼠鼠标左键键，并进进行拖动动来改变变表格的的大小，这就是是“所见见即所得得”的设设计方式式。图15插插入后后的表格格第三步：woaiwojia.htm叶面的设设计第三步：woaiwojia.htm叶面的设设计如果点击击表格的的虚线部部分，是是表格处处在选中中状态，在Dreamweaver MX 2004编编辑区域域的下方方属性显显示区域域，就会会出现表表格的属属性，如如图16，通过过该窗口口，可是是设置表表格的各各种属性性，包括括大小，对齐方方式，背背景颜色

9、色等，在在本实训训中，表表格对齐齐方式为为居中对对齐，宽宽为564像素素，高为为356像素。图16表表格属属性设置置窗口第三步：woaiwojia.htm叶面的设设计根据需要要，拖拉拉表格到到合适的的大小，如图17所示。图17调整后的的表格第三步：woaiwojia.htm叶面的设设计然后设置置单元格格的属性性，四个个大的单单元格的的水平对对齐方式式和垂直直对齐方方式都设设为居中中对齐，单元格格属性设设置如图图18所示：图18单元格属属性设置置表格调整整好后，就可以以在四个个大的单单元格中中插入图图片了，运行“插入图片”，依次次插入图图片“小小狗-2.png”，“小小狗-6.png”，“小小狗

10、-8.png”，“小小狗-9.png”，当然然您也可可以插入入您自己己喜欢的的图片。图片属属性设置置如图19所示。在您将图图像插入入Dreamweaver文档时，Dreamweaver自动在HTML源代码中中生成对对该图像像文件的的引用。为了确确保此引引用的正正确性，该图像像文件必必须位于于当前站站点中。如果图图像文件件不在当当前站点点中，Dreamweaver会询问您您是否要要将此文文件复制制到当前前站点中中。第三步：woaiwojia.htm叶面的设设计图19图片属性性设置第三步：woaiwojia.htm叶面的设设计最后woaiwojia.htm的效果如如图20所示。图20woaiwoj

11、ia.htm效果图第三步：woaiwojia.htm叶面的设设计第四步：qingchunjiyu.htm设计该页面包包含一首首诗歌，但是为为了方便便排版，需要把把该诗放放在表格格中，因因此，首首先运行行“插入入表表格”或或者点点工具栏栏上的，弹出出表格属属性设置置对话框框，如图图21所所示。图21插插入表表格示意意图第四步：qingchunjiyu.htm设计设置表格格的宽度度和高度度分别为为280，212，对对齐方式式为居中中对齐，单元格格的水平平对齐方方式为左左对齐，垂直对对齐方式式为顶端端对齐。其属性性设置面面板如图图22，图23所示。图22表表格属属性设置置面板图23单单元格格属性设设

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

13、和对对齐属性性，以及及使用层层叠样式式表(CSS)样式创建建和应用用您自己己的自定定义样式式。第四步：qingchunjiyu.htm设计Dreamweaver允许您通通过以下下方式在在Web页中添加加文本：直接将将文本键键入页中中，从其其他文档档复制和和粘贴文文本，或或从其他他应用程程序拖放放文本。能够合合并到Web页的文本本内容的的常见文文档类型型有ASCII文本文件件、RTF文件和MSOffice文档。Dreamweaver使您可以以从这些些文档类类型中的的任何一一种取出出文本，然后将将文本并并入Web页中。第四步：qingchunjiyu.htm设计Dreamweaver中的文本本格式

14、设设置与使使用标准准字处理理程序类类似。您您可以为为文本块块设置默默认格式式化样式式（段落落、标题题1、标题2等）、更更改所选选文本的的字体、大小、颜色和和对齐方方式，或或者应用用文本样样式（如如粗体、斜体和和下划线线）。在在该实训训中，诗诗歌字体体属性设设置如图图24所示。图24文字格式式属性设设置第四步：qingchunjiyu.htm设计青春寄语语效果图图图25所示。图25qingchunjiyu.htm效果图第四步：qingchunjiyu.htm设计第五步：sheyingxinshang.htm页面设计计在摄影欣欣赏页面面上，有有两组图图片，人人体艺术术图片和和风景图图片，与与我爱我

15、我家页面面相似，也需要要表格来来进行排排版和定定位。首先运行行“插入入表表格”或或者点点工具栏栏上的，弹出表表格属性性设置对对话框，如图26所示示。第五步：sheyingxinshang.htm页面设计计图26表表格插插入对话话框第五步：sheyingxinshang.htm页面设计计插入后的的表格如如图27所示。图27插插入后后的表格格设置表格格的对齐齐方式为为居中对对齐，表表格属性性面板如如图28所示。图28表表格属属性设置置面板第五步：sheyingxinshang.htm页面设计计然后，合合并左上上角两个个单元格格，用鼠鼠标在左左上角单单元格中中点击一一下，然然后按住住鼠标左左键，向向

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

17、适大小小，所有有单元格格的对齐齐方式设设置为水水平和垂垂直均为为居中对对齐，单单元格的的属性面面板如图图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。左左上角单单元格中

18、中输入“人体艺艺术欣赏赏”，左左下角单单元格中中输入“风景图图片欣赏赏”，都都是每行行一个字字。最后后摄影欣欣赏页面面的效果果如图33所示示。第五步：sheyingxinshang.htm页面设计计图33sheyingxinshang.htm效果果图第五步：sheyingxinshang.htm页面设计计第六步：youqinglianjie.htm页面设计计该页面包包含斐斐斐收集的的一些有有用的链链接，帮帮助浏览览用户根根据需要要，进入入合适的的网站，为了使使链接排排列整齐齐，查找找方便，仍然需需要借用用表格进进行排版版和定位位。首先运行行“插入入表表格”或或者点点工具栏栏上的弹弹出表表格属性

19、性设置对对话框，如图34所示示。图34表格插入入对话框框第六步：youqinglianjie.htm页面设计计表格插入入后，如如图35所示。图35插入后的的表格设置表格格对齐方方式为居居中对齐齐，边框框为2，表格属属性面板板如图36所示。图36表格属性性设置面面板第六步：youqinglianjie.htm页面设计计如同摄影影欣赏中中合并单单元格的的步骤，合并单单元格（1，1），单元元格（2，1），单元元格（3，1）为一个个单元格格，合并并单元格格（4，1），单元元格（5，1），单元元格（6，1）为一个个单元格格，合并并单元格格（7，1），单元元格（8，1），单元元格（9，1）为一个个单元格格

20、。用鼠鼠标拖动动表格到到合适大大小，如如图37所示。第六步：youqinglianjie.htm页面设计计图37合并单元元格后的的表格第六步：youqinglianjie.htm页面设计计第六步：youqinglianjie.htm页面设计计为了让浏浏览用户户在进入入每个链链接之前前，就能能知道每每个链接接的大体体信息，所以有有必要在在每个链链接上面面加上一一些解释释性文字字，可以以通过层层来实现现这个功功能。在在本实例例中，我我们给每每个链接接都加上上了一段段解释性性文字，以“新新浪网”为例说说明如下下：第六步：youqinglianjie.htm页面设计计首先通过“插插入布布局对象象层”命令在在“新浪浪网”链链接旁边边添加一一个层，并且输输入需要要显示