1.2.3 使用Dreamweaver

Dreamweaver是当今流行的网页编辑工具之一。它采用了多种先进技术，提供了图形化程序设计窗口，能够快速高效地创建网页，并生成与之相关的程序代码，使网页创作过程变得简单化，生成的网页也极具表现力。从MX开始，DW开始支持可视化开发，对于初学者确实是一个比较好的选择，因为都是所见即所得的。特征包括语法加亮、函数补全，参数提示等。值得一提的是，Dreamweaver在提供了强大的网页编辑功能的同时，还提供了完善的站点管理机制，极大地方便了程序员对网站的管理工作。

Dreamweaver的下载地址为http://www.adobe.com/downloads/。

【例1-3】下面介绍应用Dreamweaver编程JavaScript脚本的步骤（实例位置：光盘\MR\源码\第1章\1-3）。

（1）安装Dreamweaver后，首次运行Dreamweaver时，展现给用户的是一个“工作区设置”的对话框，在此对话框中，用户可以选择自己喜欢的工作区布局，如“设计者”或“代码编写者”，如图1-13所示。这两者的区别是在Dreamweaver的右边或是左边显示窗口面板区。

0

图1-13　“工作区设置”对话框

（2）选择工作区布局，并单击“确定”按钮后。选择“文件”/“新建”命令，将打开“新建文档”对话框。在该对话框中的“类别”列表区选择“基本页”，再根据实际情况来选择所应用的脚本语言，这里选择的是“HTML”，然后单击“创建”按钮，则创建以JavaScript为主脚本语言的文件，如图1-14所示。

0

图1-14　“新建文档”对话框

说明

如果用户选择了“JavaScript”选项，则创建一个JavaScript文档。在创建JavaScript脚本的外部文件时不需要使用<script>标记，但是文件的扩展名必须使用.js类型。调用外部文件可以使用<script>标记的src属性。如果JavaScript脚本外部文件保存在本机中，src属性可以是全部路径或是部分路径。如果JavaScript脚本外部文件保存在其他服务器中，src属性需要指定完整的路径。

（3）在打开的页面中，有3种视图形式，分别为“代码”“拆分”和“设计”。在“代码”视图中，可以编辑程序代码，如图1-15所示；在“拆分”视图中，可以同时编辑“代码”视图和“设计”视图中的内容，如图1-16所示；在“设计”视图中，可以在页面中插入HTML元素，进行页面布局和设计，如图1-17所示。

0

图1-15　“代码”视图

0

图1-16　“拆分”视图

0

图1-17　“设计”视图

注意

如果在代码模式中编写的JavaScript脚本，则在设计模式中不会输出显示，也没有任何标记。

在Dreamweaver中插入HTML元素后，通过“属性”面板可以方便地定义元素的属性，使其满足页面布局的要求。在页面中，允许多个表格的嵌套；可以插入图像、Flash等；可以插入表单元素，例如，文本框、列表/菜单、复选框、按钮等。

（4）设计页面及编写代码完成后，保存该文件到指定目录下，文件的扩展名为“.html”或“.htm”。

上一章目录下一章