1、1 1第12章 初识Dreamweaver MX12.1 Dreamweaver MX的工作界面的工作界面12.2 创建本地站点及站点内容创建本地站点及站点内容12.3 创建和打开网页文件创建和打开网页文件12.4 保存和关闭网页文件保存和关闭网页文件12.5 文本输入与格式化处理文本输入与格式化处理12.6 插入特殊字符插入特殊字符2 2第12章 初识Dreamweaver MX12.7 插入日期插入日期12.8 插入水平线插入水平线12.9 设置页面属性设置页面属性12.10 使用图像使用图像12.11 使用浏览器预览网页使用浏览器预览网页本章小结本章小结3 3Dreamweaver MX
2、是美国Macromedia公司开发的集网页制作和网站管理于一身的网页编辑器。它是针对专业网页设计师特别开发的视觉化网页开发工具，可以达到“所见即所得”的效果。无论是用HTML代码直接编写，还是在可视化环境中编辑制作，利用Dreamweaver均可以轻而易举地制作出跨越平台限制和浏览器限制的充满动感的网页。Dreamweaver MX的基本操作主要有：创建本地站点和内容，保存、打开和关闭网页文件，输入网页文档及文本格式设置，插入日期、特殊字符、水平线、图像等。4 4安装完Dreamweaver MX应用软件，并正确启动Dreamweaver MX后，系统首先打开的是Dreamweaver MX的
3、启动页(如图12-1所示)，随即进入起始页(如图12-2所示)。起始页中有三栏，“打开最近项目”栏可打开已有的文档，“创建新项目”栏可创建新的网页或站点，“从范例创建”栏则可利用模板格式来创建新的页面。12.1 Dreamweaver MX的工作界面的工作界面5 5图12-1 Dreamweaver MX启动页6 6若要创建HTML格式的网页，应选择“创建新项目”栏的“HTML”选项；单击该选项即可进入Dreamweaver工作界面(如图12-3所示)。7 7图12-2 Dreamweaer MX起始页8 8图12-3 Dreamweaver MX工作界面9 912.1.1 工作界面的组成Dr
4、eamweaver MX的工作界面是编辑和修改网页文档的主要场所，主要由标题栏、菜单栏、插入栏、文档工具栏、文档窗口、属性面板、状态栏及面板组等组成。本节重点介绍前面几个组件的使用，面板组将在后续各章中介绍。10 101.标题栏标题栏位于屏幕的顶部，包含“控制菜单”按钮，应用程序名，当前网页的标题，打开文档的文件名(如果当前文档中有经过修改而未保存的内容，则在一个括号中显示文件名和星号)，“最小化”、“还原”、“最大化”和“关闭”等菜单控制按钮等。单击标题栏左端的“控制菜单”按钮，将弹出Dreamweaver控制菜单，该菜单中的命令主要用于对Dreamweaver窗口的控制。11 112.菜单
5、栏标题栏的下方是菜单栏，菜单栏中包括“文件”、“编辑”、“查看”、“插入”、“修改”、“文本”、“命令”“站点”、“窗口”和“帮助”等10项菜单。每个菜单项下都有一组自己的命令。处理文档所需的所有操作命令均可在菜单栏中找到。12 123.插入栏插入栏不是每次打开Dreamweaver时都会出现在工作界面中的，其显示可由用户控制。如果工作界面中没有出现插入栏，单击菜单栏中的“窗口插入”命令可使其出现；如果工作界面中已出现插入栏，单击“菜单栏”中的“窗口插入”命令可隐藏该栏。13 13插入栏是由Dreamweaver 4的对象栏演化而来的，集成了“插入”菜单中的许多命令，用于在插入点快速插入各种对
6、象。在插入栏中有多个标签页，其中包含了不同类型的插入对象，单击标签，可以切换至不同的标签页。(1)“常规”标签中包含“超链接”、“E-mail链接”等图标，如图12-4所示。图12-4 常规栏14 1415 15 图12-5 图像快捷图标组16 16 图12-6 媒体快捷图标组17 1718 18 (2)“布局”标签，包括标准模式、扩展模式和布局模式(如图12-7所示)。在标准模式下，单击“插入表格”、“插入Dvi标签”和“插入描绘层”，可直接在页面中插入表格、Dvi标签、描绘层，还可以插入不同的框架及列表数据(如图12-7所示)。“插入描绘层”：创建一个图层，并且可以用鼠标在文档窗口中设置该
7、图层的位置和大小。“插入表格数据”：插入表格结构中的数据，可以将其它文件的数据转化为表格插入页面中。19 19图12-7 标准模式2020 在布局模式下，单击“布局表格”和“描绘布局单元格”后，可先在页面中用描绘的方法布局表格和布局单元格，然后再切换到标准模式下，将其转化为表格形式。此功能可用于网页的页面排版(如图12-8所示)。图12-8 布局模式21 21(3)“表单”标签。“表单”标签共有14个图标，可用于建立表单，插入各种类型的表单对象(如图12-9所示)。图12-9中，各图标自左至右分别为：插入表单、插入文本框、插入隐藏域、插入文本区域、插入多选框、插入单选框、插入单选按钮组、插入列
8、表/菜单、插入跳菜单、插入图像域、插入文本字段、插入按钮、插入标签和插入字段集。图12-9 “表单”标签2222(4)“文本”标签。“文本”标签中各选项工具用于对网页中的文本和列表进行格式化处理，如图12-10所示。(5)“HTML”标签。可在HTML文档中直接进行水平条插入、文件头修改、框架和框架页插入、表格内容添加和脚本修改，如图12-11所示。图12-10 “文本”标签2323图12-11 “HTML”标签24244.文档工具栏文档工具栏位于文档窗口的上方，单击“查看工具栏文档”可以显示或隐藏该栏。文档栏中的图标和选项用于调整页面的视图方式，如图12-12所示。图12-12 文档工具栏2
9、52526265.标准工具栏默认情况下，标准工具栏不显示在屏幕上。如果要显示该工具栏，可以执行“视图工具栏标准工具栏”命令。标准工具栏提供了新建文档、打开文档、保存当前文档、保存所有文档、剪切、复制、粘贴、撤销和恢复等常用工具按钮，如图12-13所示。图12-13 标准工具栏272728286文档窗口文档窗口用来显示当前创建或者编辑的Web文档。在该窗口中显示的内容和显示形式与当前的视图方式有很大关系。(1)设计视图。单击“视图设计”命令或单击文档工具栏上的“设计”按钮 ，可进入如图12-14所示的设计视图。在设计视图方式下，文档窗口显示的内容与浏览器中看到的内容相同，即“所见即所得”的效果。
10、利用设计视图方式，完全不懂HTML代码的初学者也能够制作出漂亮的网页。2929图12-14 设计视图3030(2)拆分视图。单击“视图代码和设计”命令或单击文档工具栏上的拆分按钮，可进入如图12-15所示的代码和设计视图。在代码和设计视图方式下，顶部窗格中显示代码，底部窗格中显示页面内容。这样，同一文档的两种视图就可以在同一窗口中得到对照显示，并且在选定设计视图或者代码视图中的内容时，在另一个窗格中也会选定相同的内容，这种方式有利于学习HTML代码。31 31图12-15 代码和设计视图3232(3)代码视图。单击“视图代码”命令或单击文档工具栏上的代码按钮，可进入如图12-16所示的代码视图
11、。在代码视图方式下，文档窗口中仅显示当前文档对应的HTML代码。尽管在设计视图中可以完成绝大部分网页制作工作，但是有些高级的网页效果还是必须运用代码来进行编辑的。在代码视图中，用户还可以通过“视图代码视图选项”菜单进行设置文本换行、显示代码行号、高亮显示无效HTML代码、设置代码元素的语法颜色及设置缩进方式等操作。3333图12-16 代码视图34347.属性面板当选定文档中的某个对象时，属性面板用来显示该选定对象的属性，也可以在该面板中修改对象的属性值(如图12-17所示)。单击“窗口属性”命令可显示或隐藏该面板。除属性面板之外，针对不同的控制对象，还有其他几个面板，如时间轴面板、层面板和框
12、架面板等，这些面板用于操作或设置相应的对象。单击属性面板右下角三角形 可以将其折叠或打开。3535图12-17 属性面板36368.状态栏状态栏位于文档窗口的下方，该栏显示与正在创建的文档有关的其他信息(如图12-18所示)。图12-18 状态栏3737 标签选择器：显示的是当前插入点的HTML源代码标记。单击其中的“”可以选定整个文档的正文部分；单击其中的“”可以选定文档中的表格部分；单击“”可以选定文档中的某一行；单击“”可以选定文档中的某一列。窗口大小区域：显示当前文档窗口的大小，单击该区域，可以调整文档窗口的大小。文件大小和下载时间区域：显示页面的文档大小和估计下载时间。383812.
13、1.2 管理面板和面板组随着Dreamweaver版本的不断升级，面板的数量越来越多，因此Dreamweaver MX将各面板组织到面板组中(如图12-19所示)。每个面板组都可以展开或折叠，并且可以与其他面板组停靠在一起或者浮动在文档窗口的任意位置。面板组还可以停靠到文档窗口的右侧，让用户更容易地访问所需的面板，而不会扰乱工作区。面板组内的面板以标签的形式显示。3939图12-19 管理面板和面板组40401.显示或隐藏面板(1)按F4键可以隐藏所有出现在视图中的面板，再次按下F4键可重新显示这些面板。(2)单击“窗口”菜单中的面板名可以显示或隐藏相应的面板。(3)单击文档窗口与面板组之间的
14、三角形按钮也可以打开或隐藏所有面板组，如图12-20所示。41 412.展开或折叠面板组如果要展开或折叠面板组，可执行下列操作之一：(1)单击面板组标题左侧的展开箭头。(2)单击面板组的标题。如图12-20所示，“文件”面板组处于展开状，而“CSS”、“应用程序”、“标签检查器”处于折叠状态。如果要在折叠的面板中选择某个面板，只需单击该面板的标签即可。42423.移动面板组面板组既可以移动到文档窗口中，也可以停靠在窗口的边缘。只要将鼠标指向面板组标题左侧的移动柄(如图12-20所示)，按住鼠标拖移即可。4343图12-20 展开或折叠以及移动面板组的操作示意图44444.查看面板组的选项菜单展
15、开某个面板组后，单击面板组右上角的“选项菜单”按钮，可打开选项菜单(如图12-21所示)。利用选项菜单可以方便地对相关内容进行操作。4545图12-21 面板组的选项菜单464612.1.3 辅助设计工具1.显示或隐藏标尺标尺用于定位文本或其他对象在编辑区中的位置。执行“视图标尺显示”命令，即可显示标尺；再次选择该命令可隐藏标尺。如果要改变标尺的单位，可以执行“视图标尺”命令，从中选择所需的单位：像素、英寸或厘米。4747图12-22 显示或隐藏网格4848图12-23 “网格设置”对话框49492.显示或隐藏网格网格可以作为在文档窗口中移动或调整层大小时的一个可视化向导。用户既可以显示网格，
16、也可以让层自动靠齐到网格。执行“视图网格显示网格”命令即可显示网格，如图12-22所示。5050如果要设置网格的大小和颜色，可以执行“视图网格网格设置”命令，打开“网格设置”对话框，如图12-23所示。“颜色”：单击“颜色”栏，可从调色板中选择网格线的颜色，也可在文本框中可直接输入某一颜色数值。“显示网格”：选中该复选框(打上勾)，显示网格线。“靠齐到网格”：选中该复选框，可以使层沿网格线对齐。“间隔”：设置网格的间隔大小，从右侧的下拉列表框中可选择“像素”、“英寸”或“厘米”作为单位。“显示”：选择网格线的线型为“线”或“点”。51 5112.2.1 创建本地站点创建网站的的第一步，先要在本
17、地硬盘上创建一个站点，然后才能在其中进行添加网页等后续操作。站点是一些文件和文件夹的集合，它的结构与服务器上的Web网站相一致。建立本地站点时需要指定站点名称和一个本地根文件夹，以确定存放站点所有文件的位置。12.2 创建本地站点及站点内容创建本地站点及站点内容5252创建站点有“基本”或“高级”两种方式。如果采用“基本”方式，系统会提供建立“站点”向导，在向导的指引下分五步完成站点创建。这里以“基本”方式为例介绍创建本地站点的具体步骤。(1)执行“站点新建站点”命令，打开“站点定义”对话框(如图12-24所示)；在该对话框中，选择“基本”标签，并在“您打算为站点起什么名字？”文本框中输入站点
18、的名字，如tongxueluweb；单击“下一个”按钮。5353图12-24“站点定义”对话框5454提示：如果用户已经对Dreamweaver MX的使用比较熟悉，可以单击“高级”标签，直接设置站点名称和本地根文件夹的位置。(2)在如图12-25所示的对话框中选择是否使用服务器技术，选择“是，我想使用服务器技术”可以创建动态网页；选择“否，我不想使用服务器技术”表示目前所建的站点是一个静态站点，没有动态网页。本例选择“否，我不想使用服务器技术”，单击“下一个”按钮。5555图12-25 确定是否使用服务器技术5656(3)在如图12-26所示的对话框中，确定在开发过程中使用文件的方式，有两个
19、选项可选择：编辑我的计算机上的本地副本，完成后后再上传到服务器(推荐)；利用本地网络直接在服务器上进行编辑。本例选取第一个选项，并在下面的文本框中输入存放站点的位置，如e:tongxueluweb；单击“下一个”按钮。(4)在图12-27所示的对话框中，设置计算机与服务器的连接方式。本例在下拉列表框中选择“无”。(5)在图12-28所示的对话框中，检查各项设置是否正确。如果确认无误，单击“完成”按钮。5757图12-26 确定开发过程中使用文件的方式5858图12-27 设置计算机与服务器的连接方式5959图12-28 设置计算机与服务器的连接方式6060至此，完成了一个本地站点的创建，单击窗
20、口右侧的“文件”面板组，将“站点”面板展开(如图12-29所示)，从中可以看到新建的本地站点。61 61图12-29 “站点”面板图6262图12-30 为网站添加主页文件 636312.2.2 创建站点内容上一节建立的本地站点仅仅只是一个框架，其中并无实际的内容。接下来，添加主页是必不可少的。通常主页文件名为index.htm、index.html、default.htm或default.html，该名称不能随便起，必须根据远程服务器的要求决定。在如图12-29所示的面板中，鼠标右击站点文件夹，从弹出的快捷菜单中选择“新建文件”命令，创建默认名为untitled.htm的新文件，如图12-3
21、0所示。6464单击untitled.htm文件名，将该文档重命名为index.html，如图12-31所示，并按回车键确认。如果要编辑该网页，可双击文件名index.html，即打开该文档窗口，用户可在该窗口中输入文本或者插入图片、表格等对象。6565 图12-31 设置网站主页文件6666在“站点”面板上，用右键单击文件名，并在弹出的快捷菜单中选择执行“文件新建文件夹”命令，创建代表网站结构的文件夹images文件夹，该文件夹用于存放网站中所需的图片信息。6767在Dreamweaver MX中，在添加新网页时，既可以创建一个新的空白网页，还可以基于示例文件来创建具有某种格式的网页。12.
22、3 创建和打开网页文件创建和打开网页文件686812.3.1 创建空白网页通过“站点”面板创建网页文件后，如果还想再创建新的空白网页，可以使用下面的方法。(1)在文档窗口中，执行“文件新建”命令，打开如图12-32所示的“新建文档”对话框。6969图12-32 “新建文档”对话框7070(2)在“常规”标签下的“类别”列表框中选择“基本页面”，然后在右侧的列表框中选择“HTML”。(3)单击“创建”按钮，即可创建一个新的空白网页文档。71 7112.3.2 基于示例文件创建网页为了帮助用户创建具有专业化外观、设计完善的网页，可以利用Dreamweaver提供的示例文件创建网页。这样做，设计网页
23、时用户不必什么都从头开始，从而可提高工作效率。如果要基于Dreamweaver MX提供的示例文件创建页面设计文档，可以按照下述步骤进行操作：(1)单击“文件新建”命令，出现如图12-33所示的“新建文档”对话框。7272图12-33 基于示例文件创建页面7373(2)在“类别”列表框中，根据需要选择“页面设计”、“页面设计(CSS)”或“页面设计(可存取)”项。(3)在右侧的列表框中选择一种示例文档，选择时可以通过“预览”框查看该文档的外观。(4)单击“创建”按钮，即可在文档窗口中产生一个新的文档，如图12-34所示。此时，网页中已经插入示例文字和页面布局，用户只需修改其中的文字和图像，即可
24、快速创建所需的网页。7474图12-34 基于示例文件新建的网页7575提示：用户还可以用另一种方法来根据模板创建网页：在“新建文档”对话框中单击“模板”标签，然后选定要使用的模板文件。767612.3.3 打开网页文件执行“文件打开”命令，打开“打开”对话框(如图12-35所示)；在“打开”对话框中选择要打开的文件，然后单击“打开”按钮。每个打开的文件都将显示在一个单独的文档窗口中。7777图12-35 “打开”对话框787812.3.4 在网页间切换在Dreamweaver中可以同时编辑若干个网页，每新建或打开一个已有的网页，都会出现一个文档窗口，图12-34显示了三个文档窗口的情况。如果
25、要在几个不同的网页之间切换，可以单击文档窗口的标题栏，即可切换到相应的网页中，使其成为活动窗口。单击文档窗口右上角的“最大化”按钮，可使文档窗口最大化。此时，每个打开的文档以标签的形式出现在文档窗口左上方，单击相应的标签，即可切换到相应的网页中。7979提示：“窗口”菜单的底部显示了当前打开的所有网页，单击要显示的网页名称也可实现快速切换。8080在制作网页的过程中，一定要经常存盘，以免发生断电或计算机死机而造成不必要的损失。12.4 保存和关闭网页文件保存和关闭网页文件81 811.保存新建的网页文件在保存新建网页的过程中，用户可以确定新网页文件的保存位置、类型以及文件名称。具体操作步骤如下
26、：(1)单击“窗口”菜单中的文档名，或者单击文档窗口左下方代表某个网页的标签，将需要保存的新网页设置为活动文档。(2)单击“文件保存”命令，出现如图12-36所示的“保存为”对话框。8282图12-36 “保存为”对话框8383(3)在“保存为”对话的“保存在”列表框中指定网站所在的文件夹，在“文件名”文本框中指定该网页的文件名，在“保存类型”下拉列表框中指定文件的类型。(4)单击“保存”按钮，完成保存操作。2.保存已有的网页文件如果要对已有的网页文件进行保存操作，可以单击“文件保存”命令，直接以原文件名存盘。如果要重命名当前的网页文件，可以按照下述步骤进行操作：8484(1)执行“文件保存”
27、命令，打开“保存为”对话框。(2)在“保存为”对话框中，重新设置文件名和保存类型。(3)单击“保存”按钮。执行“文件保存全部”命令，可以保存当前正在编辑的所有网页。85853.关闭网页文件要关闭当前正在编辑的网页，请单击“文件关闭”命令。如果该网页修改后尚未存盘，会弹出一个对话框提示用户是否需要保存，根据需要单击“是”或者“否”按钮即可。868612.5.1 输入文本网页上的信息大多是通过文字表达的，在制作网页的时候，文本的创建与编辑占了很大的比重。在Dreamweaver中输入文本，与在文字处理软件(例如Word)中输入文本的方法类似，甚至可以将其他应用软件中的文本复制到Dreamweave
28、r的文档窗口中。12.5 文本输入与格式化处理文本输入与格式化处理8787新建或打开一个网页后，在文档窗口中单击鼠标，可将插入点置于文档中所需的位置，然后在插入点处输入文本或者插入各种网页元素。在输入文本的过程中，Dreamweaver会根据当前页面设置的边距自动换行，使得文本一直保持在页边距内。如果按Enter键，则另起一个段落，屏幕上可看到插入点移动到下一个空白行的位置上。如果只是想使文本另起一行，则应该按Shift+Enter组合键。用这种方式换行的行间距比直接用Enter键小。图12-37给出了输入文本的示例。8888图12-37 输入文本示例898912.5.2 文本格式化为了使网页
29、看起来比较美观，需要对文本进行格式化处理，即设置文本的格式。文本格式化操作主要包括对段落格式、字体、字号、字体颜色、文本样式、对齐方式、文本缩进及列表等的设置。设置文本格式可以利用“属性”面板(如图12-38所示)。如果屏幕的下方没有显示“属性”面板，可以单击“窗口属性”命令使之显示出来。9090图12-38 “属性”面板91 911.段落格式在“属性”面板的“格式”下拉列表框中提供了一些默认的段落格式。“无”：无特殊的格式规定，仅仅是文本本身。“段落”：正文段落(代码为P)格式，这种格式的文字在段落的开始和结尾都会自动换行，而同一段内的文字各行之间行距较小。“标题1”“标题6”：规定了六种格
30、式，“标题1”的字号最大(代码为H1)，“标题6”的字号最小(代码为H6)。“预先格式化的”：表示使用预定义的格式。9292“格式”框中的选项对插入点所在的整个段落起作用，例如，将插入点移到第一行的任意位置，然后在“格式”下拉列表框中选择“标题1”，则整个第一段的文字都会使用标题1规定的格式。93932.文字字体在网页中适当地变换字体，能够使文章显得结构分明、重点突出。常用的汉字字体有宋体、黑体、楷体和仿宋体等。由于不是所有的计算机都安装了同样的字体，并且顾及到不同浏览器以及各种操作系统的兼容性，Dreamweaver使用字体组合来取代给文本指定一种字体的做法。给网页中的文本指定一个字体组合后
31、，在浏览器中浏览网页时，会按照字体组合中给定的顺序查找用户计算机上安装的字体。Dreamweaver提供的几种字体组合选项如图12-39所示。9494如果对这些字体组合不满意，可以按照下述操作步骤创建字体组合：(1)在“属性”面板的“字体”下拉列表框中单击“编辑字体列表”，打开“编辑字体列表”对话框，如图12-40所示。9595 图12-39 利用字体组合设置字体9696 图12-40 “编辑字体列表”对话框9797(4)用同样的方法再加入几种其他的字体，并注意它们的排列顺序。(5)单击“确定”按钮。此时，创建的字体组合出现在“属性”面板的“字体”列表框中。98983.字号和颜色字号就是文字的
32、大小。字号用数字表示，数字越大，字体越大。默认的字号通常是3。要改变文字的字号，首先在编辑窗口中选定这些文字，然后单击“属性”面板中“大小”列表框右边的向下箭头，从下拉列表中选择所需的字号，如图12-41所示。在“属性”面板的“大小”下拉列表框中还有+1+7、-1-7等选项，用于改变字号相对于默认字号的大小。例如，选择“+1”，表示比默认字号大1号。9999设置文字的颜色，可以按照以下操作步骤进行：(1)在文本编辑窗口中选定要改变颜色的文本。(2)单击“属性”面板中“大小”列表框右边的颜色按钮，出现如图12-42所示的颜色调色板。此时，光标变成吸管状。(3)在要使用的颜色上单击，即可选定该颜色
33、；若想使用屏幕中的某种颜色，可以用吸管光标单击该颜色。若用户知道使用的颜色所对应的值，可以将数值直接填入颜色框右边的文本框中(例如：#FFF178)。100100 图12-41 选择所需的字号101101 图12-42 颜色调色板1021021031031041047.使用列表利用列表可以将有关内容组织成容易阅读的格式。一般情况下，这些内容应该是并列的，或者是一个过程中按顺序进行的若干步骤。1)项目列表如果文本内容是相互并列的，则可以考虑使用项目列表。在项目列表中的每一项前面都有一个项目符号图标，这个图标是可以更改的。105105创建项目列表，可以按照下述步骤进行操作：(1)在编辑窗口中选定要
34、排列的文本段落。(2)单击“文本列表”命令，打开如图12-43所示的级联菜单。(3)从“列表”级联菜单中选择“未排序列表”命令，即可在每段前添加一个圆点符号，如图12-44所示。106106图12-43 “列表”级联菜单107107图12-44 项目列表菜单及示意图1081082)编号列表如果列表内容有一定的顺序关系，则可以采用编号列表。具体的操作步骤如下：(1)在编辑窗口中选定要排列的文本段落。(2)单击“文本列表编号列表”命令，即可在每段前添加一个数字编号，如图12-45所示。109109图12-45 编号列表菜单及示意图1101103)创建定义列表定义列表使用户可以展示一些项目，这些项目
35、下面带有关联缩进的文本。这类列表最常见的用途是展示词汇及相关的定义。如果要创建定义列表，可以按照下述步骤进行操作：(1)在编辑窗口中选定要排列的文字。(2)单击“文本列表定义列表”命令，即可出现如图12-46所示的列表。111111图12-46 定义列表菜单及示意图1121124)修改列表属性对于一个已经创建的列表，要修改它的属性，可以按照下述操作步骤进行：(1)将插入点置于列表中，单击“文本列表属性”命令，打开如图12-47所示的“列表属性”对话框。(2)在“列表类型”下拉列表框中选择“项目列表”选项，可以在“样式”下拉列表框中选择“项目符号”或“正方形”。113113图12-47 “列表属
36、性”对话框114114(3)在“列表类型”下拉列表框中选择“编号列表”选项，可以在“样式”下拉列表框中选择“数字(1，2，3)”、“小写罗马字母(i，ii，iii)”、“大写罗马字母(、)”、“小写字母(a，b，c)”、“大写字母(A，B，C)”等选项。(4)设置完毕后，单击“确定”按钮。115115Dreamweaver提供了在文档中插入特殊字符的功能，如插入版权符号“”、注册符号“”、商标符号“TM”等。在文档中插入特殊字符的具体操作步骤如下：(1)在文档中将插入点置于要插入特殊字符的位置。(2)单击“插入”栏中“文本”标签下的字符图标，打开一组特殊字符(如图12-48所示)。(3)单击所
37、需的字符，即可将其插入到文档中。12.6 插入特殊字符插入特殊字符116116图12-48 “字符”图标下拉式菜单117117Dreamweaver MX还提供了插入日期的功能，可以在文档中插入当前的日期和时间。具体操作步骤如下：(1)将插入点置于需要插入日期的位置。(2)单击“插入”栏中的“常用”标签；单击按钮，出现如图12-49所示的“插入日期”对话框。(3)在“插入日期”对话框中，选择星期格式、日期格式和时间格式。12.7 插插 入入 日日 期期118118(4)如果希望在每次保存文档时都更新插入的日期，请选择“保存时自动更新”复选框。(5)单击“确定”按钮。119119图12-49 插
38、入日期和特殊字符示意图120120在网页中插入水平线，能够把网页分隔成几个部分，以便吸引浏览者的注意力。插入水平线的具体操作步骤如下：(1)在文档窗口中，将插入点定位于要插入水平线的位置。12.8 插插入入水水平平线线121121(2)单击“插入HTML水平线”命令或单击“插入”栏中的“HTML”标签下的“水平线”按钮，即可在当前位置插入水平线。刚插入的水平线处于选定状态，允许用户利用“属性”面板设置其属性，如图12-50所示。122122图12-50 插入水平线示意图123123(3)如果要改变水平线的属性，在“属性”面板中进行如下设置：在“宽”文本框中设置水平线的宽度，在“高”文本框中设置
39、水平线的高度；其单位可以为“像素”或“%”。选择“像素”时，输入的数值就是实际的像素数；选择“”时，输入的是百分比，可以根据浏览器打开网页时的宽度调整水平线的高度和宽度的百分比。在“对齐”下拉列表框中设置水平线的对齐方式，如“左对齐”、“居中对齐”或“右对齐”。选中“阴影”复选框，可以为水平线添加阴影效果。124124页面的基本内容设置完成后，可以通过“页面属性”对话框查看或修改页面的标题、背景、边距和语言等属性。要查看或设置页面的属性，可以单击“修改页面属性”命令，也可以直接点击“属性”栏中的“页面属性”按钮，打开“页面属性”对话框，如图12-51所示)。12.9 设置页面属性设置页面属性1
40、25125图12-51 “页面属性”对话框126126在此对话框中，可通过“分类”栏分别对“页面属性”、“链接”、“标题”、“标题/编码”和“跟踪图像”进行设置。1.页面属性在“页面属性”对话框中，各个选项的意义说明如下：“页面字体”：通过打开文本下拉列表，可选择页面字体样式，如隶书、宋体等。“大小”：通过文本下拉列表，可选择一种字体的大小和单位，如18 pixels，18 cm等。127127“文本颜色”：点击颜色框，用吸管工具吸取某种颜色后，指定网页正文的颜色。“背景颜色”：点击颜色框，用吸管工具吸取某种颜色后，指定网页的背景颜色。“背景图像”：指定一个图像文件作为整个网页的背景图案，或者
41、单击“浏览”按钮选择所需的背景图像文件。128128“左边界”：点击文本框，并输入数值和单位，可指定当前网页的左边距。“顶部边界”：点击文本框，并输入数值和单位，可指定当前网页的上边距。“右边界”：点击文本框，并输入数值和单位，可指定当前网页的右边距。“底部边界”：点击文本框，并输入数值和单位，可指定当前网页的底边距。1291292.链接在“链接”属性对话框中，各个选项的意义说明如下：“链接字体”：指定链接的文字字体样式，通过文本下拉列表可选择一种字体样式。“大小”：指定链接的文字字体大小，通过打开文本下拉列表可选择一种字体大小和单位。“链接颜色”：通过点击颜色框，用吸管工具吸取某种颜色后，指
42、定链接的颜色。“访问过的链接”：通过点击颜色框，用吸管工具吸取某种颜色后，指定已访问链接的颜色。130130“翻转链接”：通过点击颜色框，用吸管工具吸取某种颜色后，指定翻转链接时的颜色。“活动链接”：通过点击颜色框，用吸管工具吸取某种颜色后，指定当前链接的颜色。“下划线样式”：指定链接的下划线样式，通过文本下拉列表，可选择一种下划线样式。1311313.标题“标题字体”：指定标题字体样式，通过打开文本下拉列表选择一种字体。“标题”：通过打开文本下拉列表，可选择一种字体和单位；通过点击颜色框，用吸管工具吸取某种颜色后，可指定标题字体的颜色。4.标题/编码“标题”：指定本站点的标题名，可在文本框中
43、直接输入标题，如图12-52所示。132132图12-52 “标题/编码”对话框133133“编码”：指定当前网页使用的语言，如简体中文、西文等，通过打开文本下拉列表可选择一种语言编码。5.跟踪图像“跟踪图像”：可以选择一个图像作为文档页面的跟踪图像，该图像仅用作参考，并不会在浏览器中显示。“图像透明度”：用于设置跟踪图像的透明度，滑块越向左，透明度越高。134134提示：在浏览器中显示网页时，网页的内容与浏览器窗口之间会留有一些空白。如果希望整个页面能够把浏览器窗口完全填满，则将“左边界”、“顶部边界”、“边界宽度”和“边界高度”文本框都设置为0。设置完以上属性后，单击“确定”按钮，关闭“页
44、面设置”对话框。135135经常上网的用户会发现，几乎所有的网页中都会使用图像。在网页中插入适当的图像，能够产生图文并茂的效果。Dreamweaver不仅支持在网页中插入图像，而且还允许对这些图像进行简单的处理。12.10 使使 用用 图图 像像13613612.10.1 插入图像如果要在网页中插入图像，可以按照下述步骡进行操作：(1)将插入点置于要添加图像的位置。(2)执行“插入图像”命令，打开“选择图像源”对话框，如图12-53所示。137137图12-53 “选择图像源”对话框138138(3)在“查找范围”下拉列表框中指定图像文件所在的位置，然后从下方的列表框中选择所需的图像文件；如果
45、选中“预览图像”复选框，那么选定一个图像文件后，在对话框的右侧可以预览该图像。(4)单击“确认”按钮，该图像就插入到了页面中，如图12-54所示。139139图12-54 在网页中插入图像14014012.10.2 编辑图像将图像放到网页后，它的位置、大小可能还不符合要求，还需要再进行“加工”。1.修改原图像如果需要修改原图像本身，可以有两种选择：一种是退出Dreamweaver窗口，在Windows中打开用于编辑图像的应用程序，例如Fireworks或Adobe Photoshop，对图像进行编辑；另一种方法是在Dreamweaver环境中打开图像的外部编辑器进行编辑。141141如果要在D
46、reamweaver中使用外部编辑器功能，可以按照下述步骤进行设置：(1)单击“编辑使用外部编辑器编辑”命令，打开如图12-55所示的“参数选择”对话框。142142图12-55 “参数选择”对话框143143(2)在“参数选择”对话框的“分类”列表框中单击“文件类型/编辑器”，在右侧的“扩展名”列表框中选择图像的扩展名，其上方的“+”表示添加，“-”表示删除；同样，在右侧“编辑器”上方的“+”表示添加，“-”表示删除。若点击“+”按钮，可打开“选择外部编辑器”对话框，从中可选择图像编辑器的路径和名称。(3)当“编辑器”列表框中有多个应用程序时，可以选择其中一个程序(如Photoshop)，然
47、后单击“设为主要”按钮。144144(4)设置完成后，单击“确定”按钮。设置外部编辑器后，每次需要编辑图像时，先选定该图像，然后单击“属性”面板右下角的“编辑”按钮，即可在外部编辑器中对图像进行编辑。1451452.调整图像大小调整图像大小的方法很简单，单击网页中的图像，在该图像的外框上即出现3个小方块(如图12-56所示)。将鼠标移到某个小方块上时，鼠标指针变成双向箭头，移动鼠标即可调整图像的大小。当然，用户也可以在“属性”面板的“宽”和“高”文本框中输入具体的数值来调整其大小。146146图12-56 调整图像大小1471473.改变图像的对齐方式在Dreamweaver中，刚插入的图像被
48、视为文字的一部分，既不能随意移动位置，也不能在其周围环绕文字。如果要改变图像的对齐方式，可以单击选定该图像，然后单击“属性”面板中的“左对齐”、“居中对齐”或“右对齐”按钮，使图像移到整个页面的左侧、中间或右侧。如果同一行中既有图像也有文字，则可以利用“属性”面板的“对齐”下拉列表框来改变图像与文字的对齐方式，如图12-57所示。“对齐”下拉列表框中各选项的意义如下：148148“默认值”：浏览器默认的对齐方式，通常将图像和文字与一个指定的基线对齐。“基线”：将文本的基线与选定图像的下边缘对齐。“顶端”：将文本中位置最高字符的顶部与图像的上边缘对齐。“中间”：将文本的基线和图像的中部对齐。“底
49、部”：将文本的基线和图像的下边缘对齐。“文本上方”：将文本中位置最高的字符与图像的上边缘对齐。“绝对中间”：将文本的中线和图像的中线对齐。149149图12-57 图像与文字对齐方式150150“绝对底部”：将文本的基线底部(如字母P的底部)与图像的底部对齐。“左对齐”：将图像放到左边缘，文字从右侧环绕图像。“右对齐”：将图像放到右边缘，文字从左侧环绕图像。151151使用Dreamweaver制作网页的最终目的，是让站点访问者通过他们的Web浏览器查看网页。因此在制作网页的过程中，应该经常使用本机的Web浏览器测试所创建的网页，以便了解网页在浏览器窗口中的效果。由于不同的浏览器对同样的HTM
50、L语言可能有不同的解释，因此建议用户在测试时使用多种浏览器。目前最流行的浏览器有微软公司的Internet Explore(简称IE)和网景公司的Netscape Navigator。12.11 使用浏览器预览网页使用浏览器预览网页152152单击“文件在浏览器中预览”命令，从其级联菜单中选择一个浏览器(如IE)或者按F12键，即可在IE浏览器中预览刚创建的网页，如图12-58所示。预览完毕后，关闭浏览器。153153图12-58 用浏览器预览网页示意图154154本章分两部分介绍了Dreamweaver MX的基础知识：第一部分主要介绍了Dreamweaver MX的工作界面及特点、创建本地
