第2篇 Dreamweaver CS5基础.doc

第2章Dreamweaver CS5基础 在网络普及的现代，优秀的网页是一个很好的展现自我的平台。古话说得好，“工欲善其事，必先利其器”，我们在进行网页设计前，首先要选择一个优秀的网页设计工具。Dreamweaver、Flash、Fireworks最早是由Macromedia公司推出的一套网页设计软件。Flash用来生成二维动画，Fireworks用来制作矢量图像，Dreamweaver可以进行各种素材的集成和网络发布。这三款软件在国内有“网页三剑客”之称。2005年，Macromedia公司被著名影像处理软件公司Adobe收购，“网页三剑客”成为了Adobe软件家族的主要成员。 2.1 Dreamweaver CS5简介 Adobe Dreamweaver CS5是Adobe必威体育精装版推出的网页设计制作工具，是一款集网页制作和管理网站于一身的网页编辑器，是一种专业的HTML编辑器，采用“所见即所得”的编辑方式，利用Div、行为、CSS、模板等技术对Web站点、Web页、Web应用程序进行设计、编码和开发。 由于Dreamweaver CS5的可视化编辑功能，在通常情况下，用户可以不需要编写任何代码，直接在可视化环境中调整各种元素，快速地创建页面。可以直接将在Photoshop、 Fireworks或其他图形应用程序中创建和编辑的图像，以及在Flash中创建的动画导入到Dreamweaver CS5中，并能够进行基于ColdFusion、ASP、JSP、PHP服务器技术的动态网站的创建。由此可见，Dreamweaver CS5为用户提供了实用方便的编辑工具，可帮助用户迅速高效地制作出功能强大的网站。 2.2 Dreamweaver的工作界面 2.2.1 启动Dreamweaver CS5 安装好Dreamweaver CS5后，单击“开始”菜单，选择“程序”，在程序中选择“Adobe”中的“Adobe Dreamweaver CS5”命令后，即可启动Dreamweaver CS5，如图2-1所示。 图-1 启动Dreamweaver 图-2 启动Dreamweaver图-3 Dreamweaver CS5的操作界面 1．标题栏 在Adobe Dreamweaver CS5的窗口标题栏上整合了网页制作中最常用的布局、DW扩展、站点管理器和设计器按钮，这些常用的命令按钮可以从菜单栏或者工具栏中找到与之相应的选项，如图2-4所示。 图2-4 标题栏 单击按钮，在弹出的下拉列表中可以看到Dreamweaver CS5推出的八种工作区外观模式，如图2-5所示。不同的工作区外观模式适用于不同层次的设计者选择合适的页面设计模式。 图2-5 设计器下拉列表 2．菜单栏 Dreamweaver CS5的主菜单共分10种，即文件、编辑、查看、插入、修改、格式、命令、站点、窗口和帮助，如图2-6所示。 图2-6 菜单栏 3.“插入”面板 在“设计器”布局模式下，Dreamweaver CS5将原先的插人栏默认呈现为插入面板形式。该面板包含成行的对象图标，用于创建和插入网页元素(例如表格、图像、AP Div和链接等)。这些按钮被组织在几个类别中，默认情况下，显示“常用”类别选项卡，单击其右边的可以在各种类别之间进行快速切换，如图2-7所示。 图2-7 插入栏 如果设计者还是比较习惯使用Dreamweaver旧版本界面，可以直接在设计器按钮列表中选择“经典”布局模式，或者执行“窗口”→“工作区布局”→ “经典”命令。在“经典”布局模式下提供两种模式的插入栏：制表符模式和菜单模式，如图2-8、2-9所示。这两个模式外观非常简洁，以选项卡的形式展现，占据主界面很小的工作区空间，每一个标签包含一套不同的相关图标，便于设计者操作。 图2-8 制表符模式 在上图中右击“常用”等任意一个选项卡，再在弹出的菜单中选择“显示为菜单”，即可切换到菜单模式。 图2-9 菜单模式 在上图中单击“显示为制表符”命令可以切换到“制表符模式”。 4. 文档工具栏 图2-10 文档工具栏 ：显示代码视图和设计视图，以便在同一窗口中同时进行代码和页面设计。 ：显示设计视图，以便在编辑窗口中进行页面设计。 ：显示浏览器用于执行该页面的实际代码，单击此按钮后，其窗口下的代码以黄色显示且不可编辑。 ：用来检查用户创建的网站内容是否能够兼容各种浏览器。 ：单击此按钮可以像在浏览器中预览一样查看设计效果，显示不可编辑的、交互式的、基于浏览器的文档视图。 ：能让用户快速地在许多浏览器和它们不同的版本中检查代码。 ：在浏览器中预览和调试网页。 ：可以使用不同的可视化助理来设计页面。 ：刷新设计视图。 ：用于设置网页标题。 ：用于对站点中的文件进行管理。 5. 文档窗口 文档窗口显示当前