（一）Dreamweaver CS5
Dreamweaver是美国Macromedia公司（现已被著名的图形、图像、出版软件开发公司Adobe收购）开发的集网页制作和管理网站于一身的所见即所得网页编辑器，它是第一套针对专业网页设计师的视觉化网页开发工具，利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。
Dreamweaver CS5是其最新版本，它不仅继承了前面版本的出色功能，还在界面整合和易用性方面更具人性化。本部分主要讲述Dreamweaver CS5的工作界面及基本操作。
1.Dreamweaver CS5的工作界面
Dreamweaver CS5的工作界面是由菜单栏、插入栏、文档工具栏、文档窗口、属性面板和浮动面板等组成的，如图4-12所示。
（1）菜单栏
菜单栏包括“文件”、“编辑”、“查看”、“插入”、“修改”、“格式”、“命令”、“站点”、“窗口”和“帮助”10个菜单命令，它几乎包括了Dreamweaver CS5的所有功能，通过菜单可以任意操作和控制对象。
“文件”：用来管理文件，包括创建和保存文件、导入和导出、预览和打印文件等。
图4-12 Dreamweaver工作界面
“编辑”：用来编辑文本，包括撤销与重做、复制与粘贴、查找和替换、参数设置和快捷键设置等。
“查看”：用来查看对象，包括代码的查看、网格线与标尺的显示、面板的隐藏和工具栏的显示等。
“插入”：用来插入网页元素，包括插入图像、多媒体、APDiv、框架、表格、表单、电子邮件链接、日期、特殊字符和标签等。
“修改”：用来实现对页面元素修改的功能，包括页面元素、快速标签编辑器、创建链接、表格、框架集、导航条、转换、模板、库和时间轴等。
“格式”：用来对文本进行操作，包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式和检查拼写等。
“命令”：收集了所有的附加命令项，包括开始录制、编辑命令列表、获得更多命令、扩展管理、应用源代码格式和表格排序等。
“站点”：用来创建和管理站点，包括站点的显示方式、新建、获取与取出、报告、同步站点范围和检查站点范围的链接等。
“窗口”：用来打开与切换所有的面板和窗口，包括插入栏、属性面板、站点窗口和CSS面板等。
“帮助”：内含Dreamweaver帮助、注册、Dreamweaver支持中心等。
（2）插入栏
插入栏中放置的是制作网页时经常用到的对象和工具，通过插入栏可以很方便地插入网页对象。
插入栏中共包括以下几个选项：
“常用”：用于创建和插入最常用的对象，例如图像和表格。
“布局”：用于插入表格、div标签、框架和Spry构件。还可以选择表格的两种视图，即标准（默认）表格和扩展表格。
“表单”：包含一些按钮，用于创建表单和插入表单元素（包括Spry验证构件）。
“数据”：可以插入Spry数据对象和其他动态元素，例如记录集、重复区域以及插入记录表单和更新记录表单。
“Spry ”：包含一些用于构建Spry页面的按钮，包括Spry数据对象和构件。
“Incontext Editing”：用于创建重复区域和创建可编辑区域。
“文本”：用于插入各种文本格式和列表格式的标签，如b、em、p、hl和ul。
“收藏夹”：用于将插入栏中最常用的按钮分组和组织到某一公共位置。
（3）文档工具栏
文档工具栏中包括了控制文档窗口视图的按钮和一些比较常用的弹出菜单，用户可以通过代码、拆分和设计3个按钮使工作区在不同的视图模式之间进行切换。
：显示HTML源代码视图。
：同时显示HTML源代码和设计视图。
：该模式只显示设计视图。
：在代码视图中显示实时视图源。
：检查浏览器兼容性。
：将设计视图切换到实时视图。
：打开检查模式。
：在浏览器中预览和调试，允许用户在浏览器中浏览或调试文档。
：可视化助理，允许用户使用不同的可视化助理来设计页面。
：刷新设计视图，将代码视图中修改后的内容及时反映到文档窗口。
：输入要在网页浏览器上显示的文档标题。
（4）文档窗口
文档窗口显示当前创建和编辑的网页文档。可以在设计视图、代码视图、拆分视图中查看文档。
（5）属性面板
属性面板位于工具界面的最下方，可以检查和编辑当前选定页面元素的属性。选择对象的不同，属性面板显示的属性也不同。未选中任何对象时，属性面板将默认显示文本的格式、样式、字体和对齐方式等属性。
（6）浮动面板
在Dreamweaver工作界面的右侧排列着一些浮动面板，这些面板集中了网页编辑和站点管理过程中最常用的一些工具按钮。这些面板被集中到面板组中，每个面板组都可以展开或折叠，并且可以和其他面板依靠在一起或取消依靠。在Dreamweaver界面右边的面板组中选择需要使用的面板，单击该面板名可打开和使用该面板。
2.Dreamweaver CS5的基本操作
（1）创建及保存网页
在Dreamweaver CS5中创建及保存文档很简单，具体操作步骤如下。
启动Dreamweaver CS5，选择“文件”—“新建”，弹出“新建文档”对话框，在对话框中选择“空白页”—“HTML”—“无”选项，如图4-13所示。单击“创建”按钮，即可新建一个空白文档。
图4-13 新建文档
选择“文件”—“保存”命令，弹出“另存为”对话框，在对话框中选择文件保存的位置，为文件合理命名，单击“保存”按钮即可。如图4-14所示。
图4-14 另存为
（2）插入表格
表格是布局网页非常重要的工具，具体操作步骤如下：选择“插入”—“表格”命令，弹出“表格”对话框（如图4-15所示）。设置完行数、列数、表格宽度等参数，点击“确定”按钮，插入表格。
（3）编辑文本
在Dreamweaver中添加文本的方法非常简单。具体操作步骤如下：把光标放在你想插入文本的位置，输入文字，选择文字，可以用“格式”菜单对文本进行编辑，包括字体、字形、字号、字体颜色、HTML/CSS样式、段落格式化、扩展、缩进、列表、文本的对齐方式和检查拼写等。
（4）插入图像
在文档中不仅可以输入文本，还可以插入图像，图像不但可以使网页更加美观、形象和生动，而且与文本相比能够更直观地说明问题，使表达的意思一目了然。
选择“插入”—“图像”命令，弹出“选择图像源文件”对话框，如图4-16所示，选择所要插入的图像，点击“确定”按钮，插入图像。
在设计视图中选择所插入图像，“属性”面板中可以设置图像的各种属性，如图4-17所示。
图4-15 表格
图4-16 插入图像
（5）创建超级链接
超级链接是构成网站最为重要的部分之一，单击网页中的超级链接，即可跳转到相应的网页，因此可以非常方便地从一个网页到达另一个网页。
图4-17 图像的属性
选择“插入”—“超级链接”，弹出“超级链接”对话框，如图4-18所示，设定好参数后，点击“确定”，插入超级链接。
图4-18 插入超级链接
（二）FrontPage
除了前面介绍的Dreamweaver外，FrontPage也是经常使用的设计和制作网页的工具。FrontPage是一款由微软公司推出的建立网页和管理站点的应用软件。它除了具有轻松地组织、编辑网页，并将其发布到指定的站点上的一系列功能外，还可以对网页更新情况进行监控，并及时更新站点的内容。它同微软公司的其他Office工具结合得比较紧密，会使用Word等文字处理工具的用户都可以很快熟悉这一种工具的使用，下面以FrontPage2003为例来说明FrontPage的使用方法。
1.FrontPage的主窗口
FrontPage2003与同系列的其他Office软件一样，将菜单中最常用的命令以图标的形式放在工具栏中，使用户可以很方便地进行操作。如图4-19所示，FrontPage2003的主窗口主要包括标题栏、菜单栏、工具栏、编辑区、任务窗格和状态栏。
2.FrontPage的视图
FrontPage2003提供了7种视图，分别是网页视图、文件夹视图、远程网站视图、报表视图、导航视图、超链接视图和任务视图。了解这几种视图模式的使用，可以提高网页制作的效率。
图4-19 FrontPage主窗口
（1）网页视图
网页视图实际上是网页编辑视图，可以实现网页的编辑、修改功能。它通常有普通、HTML、预览三种查看方式，可以从不同的角度观察网页。它的主体是网页编辑器，用来对网页进行编辑、显示。
（2）文件夹视图
文件夹视图用来查看当前打开的网站的层次结构。它有两个窗口：文件夹列表窗口和文件列表窗口，其显示方式类似于窗口资源管理器。大多数对资源管理器的操作在这里都可以使用。
（3）远程网站视图
远程网站视图是FrontPage2003新增的视图，在该视图中可以利用各种连接方式进入服务器，并与其他人联机协作。
（4）报表视图
报表视图用来统计、分析并显示站点中的一些综合信息，以便及时发现问题并予以解决。
（5）导航视图
导航视图是管理整个站点导航结构的重要视图，该视图能够立体地显示出站点中各网页之间的层次关系，而且允许直接在该视图上进行网页文件的移动、插入和删除等操作。
（6）超链接视图
超链接视图通过图形方式显示网页中所有超链接的情况，并且能够可视化地查看是否有任何断开的链接。
（7）任务视图
一个站点常常有大量的网页组成，在这些网页之间、与其他站点之间必然存在错综复杂的链接关系，所以一个站点就需要一个工作组来开发。工作组采取分工合作方式协调工作，任务视图就是为完成协同开发、维护而设计的。利用任务视图方式来跟踪记录由谁负责哪项工作、进度如何、工作优先级如何等一系列的管理信息，保证任务的顺利进行。
FrontPage的其他操作与Office软件基本上相同，这里就不再作详细介绍。
免责声明：以上内容源自网络，版权归原作者所有，如有侵犯您的原创版权请告知，我们将尽快删除相关内容。
