3.4  使用DreamWeaver MX编辑网页

Macromedia Dreamweaver MX是美国Macromedia公司出品的一款“所见即所得”的网页编辑工具,是一款专业的 HTML 编辑器,用于对 Web 站点、Web 页和 Web 应用程序进行设计、编码和开发。无论您愿意享受手工编写 HTML 代码时的驾驭感还是偏爱在可视化编辑环境中工作,Dreamweaver MX都会为您提供有用的工具,使您拥有更加完美的 Web 创作体验。

利用 Dreamweaver MX中的可视化编辑功能,您可以快速地创建页面而无需编写任何代码。您可以查看所有站点元素或资源并将它们从易于使用的面板直接拖到文档中。您可以在 Macromedia Fireworks 或其他图形应用程序中创建和编辑图像,然后将它们直接导入 Dreamweaver ,或者添加 Macromedia Flash 对象,从而优化您的开发工作流程。

Dreamweaver MX提供了功能全面的编码环境, 对于动态网页(DHTML)的支持特别好,您可以使用服务器技术(例如 ASP.NET ASP JSP PHP )生成由动态数据库支持的 Web 应用程序,可以轻而易举地做出很多眩目的互动页面特效。

Dreamweaver插件式的程序设计使得其功能可以无限的扩展。DreamweaverFlashFireworks 并称为 Macromedia的网页制作三剑客,由于是同一公司的产品,因而在功能上有着一个非常紧密的结合。因此,说Dreamweaver是网页制作的首选并不为过。

 

3.4.1  Dreamweaver MX的工作环境

 

Dreamweaver MX具有全新的风格和启动画面,提供了面向设计人员的布局和面向手工编码人员需求的布局。首次启动Dreamweaver MX时,会出现一个工作区设置对话框,如图321  

321    Dreamweaver MX工作区设置对话框

 

您可以从中选择一种适合您的工作区布局。【设计者】为用户提供了一种所见即所得的可视化的创建环境。【代码编写者】主要为喜欢用手写代码的用户设计的。如果您不熟悉编写代码,请您选择“设计者”。如果您以后想更改工作区,可以使用“编辑”菜单“首选参数”来实现切换,如图322

322   更改工作区

 

Dreamweaver MX提供了一个将全部元素置于一个窗口中的集成布局。在集成的工作区中,全部窗口和面板都被集成到一个应用程序窗口中,如图323

323   Dreamweaver MX的集成工作区

 

Dreamweaver MX主要包括10个菜单,其功能见表34,程序的所有功能基本上都能在菜单栏上实现。

 

34 Dreamweaver MX  菜单功能一览表

菜单名称

功能

文件

用来管理文件。例如新建,打开,保存,另存为,导入,输出打印等。

编辑

用来编辑文本。例如剪切,复制,粘贴,查找,替换和参数设置等。

视图

用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。

插入

用来插入各种元素,例如图片、多媒体组件,表格、框架及超级链接等。

修改

具有对页面元素修改的功能,例如在表格中插入表格,拆分、合并单元格,对其对象等。

文本

用来对文本操作,例如设置文本格式等。

命令

所有的附加命令项

站点

用来创建和管理站点

窗口

用来显示和隐藏控制面板以及切换文档窗口

帮助

联机帮助功能。例如按下F1键,就会打开电子帮助文本。

 

3.4.2  创建网站站点

 

通过 Dreamweaver MX 的站点管理功能,我们可以轻松的创建网站站点。建设网站之前要有一个计划,请参见本书网站规划一章的内容。

使用 Dreamweaver MX创建网站站点的操作步骤如下:

1.在菜单栏【站点】菜单中选择【管理站点】,在弹出的【管理站点】对话框中点击【新建】按钮,出现【站点】和【FTP】两个选项。选择【站点】弹出【未命名站点1的站点定义为】对话框,在【未命名站点1的站点定义为】中选择【基本】选项卡,出现如图324所示界面。在【您打算为您的站点起什么名字?】文本框中填写站点的名字,如“第一个网站”,它仅仅做为管理和识别用。 单击【下一步】按钮,进入下一步;

 

 324    站点定义界面

 

 

2.出现图325所示的选择服务器技术界面。如果我们要建立的是静态网页,请选择【否,我不想使用服务器技术】,如果我们要建立的是动态网页,请选择【是,我想使用服务器技术】,并在下拉列表框中选择一种服务器技术,如最常用的ASP VBScript。单击【下一步】按钮,进入下一步;

 325    选择服务器技术界面

 

3.出现如图326所示界面。【在开发过程中,您打算如何使用您的文件】鉴于我们网络的实际状况(主要指连接的稳定性)建议大家选择软件推荐的方式,在本地进行编辑和测试。【您将把文件储存在计算机的什么位置】实际上就是网站的文件夹在自己电脑的位置,即物理路径。手工填写或者点击文件夹图标选择路径都可以;

 

326    文件使用和存储位置设置界面

 

    4.出现如图327所示界面。如果在本地进行测试,必须安装IIS,并将IIS默认网站的主目录设为我们刚建立的这个站点的存储目录。这样我们只要在浏览器中输入http://localhost/就可以访问站点的根目录了。单击【下一步】按钮,进入下一步;

327    文件测试路径界面

 

5.出现如图328所示界面。如不需要共享文件,请选择“否”。单击【下一步】按钮,进入下一步;

 

 328    文件共享界面