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页面设计在左上角单元格中输入“门户网站”，左边中间单元格中输入“专业网站”，左下角单元格中输入“其他”，每字一行，单元格水平和垂直对齐方式均为居中对齐；在单元格（1，2），单元格（2，2），单元格（3，2），单元格（4，2），单元格（5，2），单元格（6，2），单元格（7，2），