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

1.Dreamweaver中的文本格式设置与使用第一步：采用框架设计整体框架

由5.3节我们已经学到，框架即多窗口页面，也称为“帧”，是将一个浏览器窗口分成多个小页面，每个页面显示一定的内容。它是页面排版的重要表现方式。本实训中，需要把页面分成左右两部分，左边部分为菜单列表，右边部分为主显示页面。打开Dreamwaver2004，新建一个空白页面，然后运行菜单“插入—〉HTML—〉框架—〉左方”，页面就会被分割成左右两个部分，如图1所示。图1框架效果图

第一步：采用框架设计整体框架插入框架后，设置框架的属性，我们需要框架的边框为2，颜色为红色，左边宽度为110像素，所以框架的属性面板如图2所示。图2框架属性面板第一步：采用框架设计整体框架设置完后的框架页面如图3所示。图3设置完成后的框架效果图第一步：采用框架设计整体框架现在我们已经按照需要设置了框架属性，其HTML代码如图4所示。图4框架HTML代码第一步：采用框架设计整体框架第一步：采用框架设计整体框架在这个框架页面上，其实包含了三个页面：框架页面、左边子页面、右边子页面，Dreamwaver2004给这三个文件分别命名为：UntitledFrameset-1.htm、UntitledFrame-1.htm、Untitled-1.htm。所以在保存的时候，选择“文件—〉保存全部”，Dreamwaver2004会顺序弹出三个窗口，来分别保存上面的三个文件，如图5­——图7所示。图5框架保存窗口

第一步：采用框架设计整体框架图6右边子页面保存窗口

第一步：采用框架设计整体框架图7左边子页面保存窗口

第一步：采用框架设计整体框架第一步：采用框架设计整体框架在本实训中，上面三个文件，分别采用文件名index.htm，woaiwojia.htm，left.htm。左边窗口的名字为leftFrame，右边窗口的名字为mainFrame。我们可以随意更改这两个名字，对显示效果没什么影响，在javascript编程中才会用到，在后面我们设置左边子窗口中的超级链接的时候也能用到。

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