第2章 Web程序开发环境课件

第2章Web程序开发环境1服务器端开发环境2客户端开发环境3网页设计工具DreamweaverMX简介4DreamweaverMX的深入应用5DreamweaverMX的站点管理本章小结

在第1章中，介绍了Web编程的基础知识。本章将对Web程序开发环境和常用工具做简单介绍，包括常用的工具软件，编制HTML和ASP文件的DreamweaverMX，这将为以后学习具体的编程方法和技术做好准备。1第2章Web程序开发环境1服务器端开发环境在第1章2.1服务器端开发环境

服务器是对Web浏览器检索信息的请求做出响应，进而将HTML文档回传到客户机的浏览器屏幕上，或者运行服务器端程序的计算机。服务器端的编程语言，除现在一般较少采用的CGI程序外，常用ASP，Perl和PHP，还有微软公司近期推出的新一代ASP.NET语言，它直接与Java比拼，力图成为网络服务器端的标准语言。目前最常用的网络操作系统有WindowsNT，UNIX和Linux等

22.1服务器端开发环境服务器是对Web浏览器检索信息的2.2客户端开发环境客户端的编程语言，HTML标识语言

掌握图形工具、Web网页制作工具和Web网页动画工具

图形图像设计及处理：Photoshop6.0，CorelDRAW9.0，FireworksMX，Freehand9.0，Illustrator8.0，PhotoExpress3.0

动画制作工具：FlashMX，Cool3D3.0，3DSMAXR3，ImageReady3.0，FireworksMX

Web网页制作软件：

Dreamweaver，FrontPage

32.2客户端开发环境客户端的编程语言，HTML标识语言2.3网页设计工具DreamweaverMX简介

2.3.1DreamweaverMX概览

Dreamweaver是Macromedia公司开发的网页制作工具，它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统，分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。

42.3网页设计工具DreamweaverMX简介DreamweaverMX的特性

1.精确性：DW采用RoundtripHTML技术实现对HTML源代码的精确控制，它能生成最为简洁和高效的HTML代码。

2.易用性：DW的编辑界面相当友好，且操作简单。通过各种工具面板，可以非常方便地控制页面各种元素的属性。

3.兼容性：兼容性是DW的一个非常优秀的特性，用它制作的页面能在各种浏览器上正确地显示。

52.3.2DreamweaverMX的特性1.精确性2.3.3DreamweaverMX界面介绍

①单击中部的[创建新项目]，建立相应类型的新文件；②单击中部的[从范例创建]，建立多种形式的新文件；③双击右部的[文件]列表中的文件名，调入指定目录中的文件④单击左部的[打开最近项目]，可调入编辑过的文件62.3.3DreamweaverMX界面介绍①单击中DreamweaverMX文件编辑界面

7DreamweaverMX文件编辑界面71．文档窗口文档窗口是用来显示当前所编辑页面的窗口2．插入面板以下简单介绍一些对象面板：[常用] 包含主页中最常用的一些对象，如图片、表格、超链接等。[布局] 包含常用的框架结构，如左右分帧、上下分帧等。[表单] 包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选框、列表框等。[文本] 包含一些特殊字符，如版权符号、注册商标符号、商标符号等。[HTML] 添加一些Script脚本等。81．文档窗口83．属性面板

选择[窗口]菜单的[属性]项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块，在右下角有个打开/关闭下块的箭头，有些扩展属性安排在下块中。单击属性面板标题行的箭头，还可以收缩/展开该面板选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性

93．属性面板9例：热区编辑操作：

方法：单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域，即为“图片热区”，相对应的<map>代码会自动生成；再单击该图片，对该热区的链接属性进行设定。在下方属性区[链接]文本框内填写要指向的某个URL，以后该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形，单击它就可以完成超链接的跳转。

10例：热区编辑操作：方法：单击设计区的图片，有方框标出已选定该例：插入一个表格方法：先单击插入面板[常用]项的表格对象，在设定了表格的行列值、宽度、边框粗细、边距、间距等属性值后，在代码编辑区和界面设计区将自动插入<table>代码和表格的实际显示，在“所见即所得”的页面上，拖动边框线可改变表格的大小，选中多个单元格后，再单击属性区左下角的合并按钮可将这些单元格合并为一个单元格。11例：插入一个表格方法：先单击插入面板[常用]项的表格对象，在例：插入一幅Flash图像

方法：先单击插入面板[常用]项的媒体对象，选择Flash，再选择当前目录中的swf文件，在代码编辑区和界面设计区将自动插入<object>代码和图片的轮廓显示，这样在页面的光标位置就插入了Flash图像。

12例：插入一幅Flash图像方法：先单击插入面板[常用]项的例：插入Frame框架

方法：先单击插入面板[布局]项的框架对象，选择[左侧和顶部]对象，DW会自动生成4个htm文件。当光标在各个显示区域单击时，多页标签行的同一个标签上出现该文件名；各个文件要分别独立存盘；当光标移至窗体边框或框架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第4个htm文件的代码，则该文件包含自动生成的<frame>代码和布局的3个<src>指向的文件。13例：插入Frame框架方法：先单击插入面板[布局]项的框架2.4DreamweaverMX的深入应用

1．插入面板的其他对象组：新版的DW针对ASP，ASPX，PHP，JSP服务器端的文档文件编辑，添加了相应的对象组，只要对具有这些扩展名的文件进行编辑，在[插入面板]栏内就会出现对应的对象组，常用的语句代码、专用的变量名称、语言标签等都可以很方便地添加，这些大大减少了编程时需记忆各种语句和对应的属性名称的麻烦。2．代码面板：它预存了许多常用的HTML代码和脚本代码。

3．[命令]菜单的清理功能：解决文档会带来两个问题：一是因为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改编辑；二是在网上传输要多花些时间。

142.4DreamweaverMX的深入应用

1．插入面2.5DreamweaverMX的站点管理

152.5DreamweaverMX的站点管理

15图2-10DreamweaverMX站点管理的编辑界面

16图2-10DreamweaverMX站点管理的编辑界面1．创建本地站点（1）站点名称（2）本地文件夹

（3）其余项可用默认值

2．设置服务器信息

（1）设置服务器选项（2）如果为服务器分配了FTP权限此时需填写以下数据：

①FTP主机。输入服务器的IP地址。②主机目录。输入服务器上设定的目录。③登录。分配的用户名。④密码。分配的密码。⑤其余项可用默认值。

171．创建本地站点173．完成本地站点创建在“站点定义为”对话框设置完成本地站点信息和服务器信息后，单击[确定]按钮即可完成本地站点的创建。同时，DW会自动以扩展窗口方式打开[远端站点]和[本地文件]左、右两个窗口4．下载、上传与更新网页通过使用左、右站点窗口可以完成网页的下载、上传与更新操作

图2-11远端站点和本地文件目录窗口183．完成本地站点创建图2-11远端站点和本地文件目录窗口本章小结

本章简单介绍了服务器端和客户端的Web程序开发环境DreamweaverMX，它是编制HTML文件和ASP文件的非常实用的编辑集成环境。DreamweaverMX采用RoundtripHTML技术实现对HTML源代码的精确控制，能生成最为简洁和高效的HTML代码；它编辑界面友好，且操作简单。此外，DreamweaverMX的一个非常优秀的特性是它的兼容性，它制作的页面能在各种浏览器上正确地显示

19本章小结

本章简单介绍了服务器端和客户端的Web演讲完毕，谢谢观看！演讲完毕，谢谢观看！第2章Web程序开发环境1服务器端开发环境2客户端开发环境3网页设计工具DreamweaverMX简介4DreamweaverMX的深入应用5DreamweaverMX的站点管理本章小结

在第1章中，介绍了Web编程的基础知识。本章将对Web程序开发环境和常用工具做简单介绍，包括常用的工具软件，编制HTML和ASP文件的DreamweaverMX，这将为以后学习具体的编程方法和技术做好准备。21第2章Web程序开发环境1服务器端开发环境在第1章2.1服务器端开发环境

服务器是对Web浏览器检索信息的请求做出响应，进而将HTML文档回传到客户机的浏览器屏幕上，或者运行服务器端程序的计算机。服务器端的编程语言，除现在一般较少采用的CGI程序外，常用ASP，Perl和PHP，还有微软公司近期推出的新一代ASP.NET语言，它直接与Java比拼，力图成为网络服务器端的标准语言。目前最常用的网络操作系统有WindowsNT，UNIX和Linux等

222.1服务器端开发环境服务器是对Web浏览器检索信息的2.2客户端开发环境客户端的编程语言，HTML标识语言

掌握图形工具、Web网页制作工具和Web网页动画工具

图形图像设计及处理：Photoshop6.0，CorelDRAW9.0，FireworksMX，Freehand9.0，Illustrator8.0，PhotoExpress3.0

动画制作工具：FlashMX，Cool3D3.0，3DSMAXR3，ImageReady3.0，FireworksMX

Web网页制作软件：

Dreamweaver，FrontPage

232.2客户端开发环境客户端的编程语言，HTML标识语言2.3网页设计工具DreamweaverMX简介

2.3.1DreamweaverMX概览

Dreamweaver是Macromedia公司开发的网页制作工具，它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统，分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。

242.3网页设计工具DreamweaverMX简介DreamweaverMX的特性

1.精确性：DW采用RoundtripHTML技术实现对HTML源代码的精确控制，它能生成最为简洁和高效的HTML代码。

2.易用性：DW的编辑界面相当友好，且操作简单。通过各种工具面板，可以非常方便地控制页面各种元素的属性。

3.兼容性：兼容性是DW的一个非常优秀的特性，用它制作的页面能在各种浏览器上正确地显示。

252.3.2DreamweaverMX的特性1.精确性2.3.3DreamweaverMX界面介绍

①单击中部的[创建新项目]，建立相应类型的新文件；②单击中部的[从范例创建]，建立多种形式的新文件；③双击右部的[文件]列表中的文件名，调入指定目录中的文件④单击左部的[打开最近项目]，可调入编辑过的文件262.3.3DreamweaverMX界面介绍①单击中DreamweaverMX文件编辑界面

27DreamweaverMX文件编辑界面71．文档窗口文档窗口是用来显示当前所编辑页面的窗口2．插入面板以下简单介绍一些对象面板：[常用] 包含主页中最常用的一些对象，如图片、表格、超链接等。[布局] 包含常用的框架结构，如左右分帧、上下分帧等。[表单] 包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选框、列表框等。[文本] 包含一些特殊字符，如版权符号、注册商标符号、商标符号等。[HTML] 添加一些Script脚本等。281．文档窗口83．属性面板

选择[窗口]菜单的[属性]项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块，在右下角有个打开/关闭下块的箭头，有些扩展属性安排在下块中。单击属性面板标题行的箭头，还可以收缩/展开该面板选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性

293．属性面板9例：热区编辑操作：

方法：单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域，即为“图片热区”，相对应的<map>代码会自动生成；再单击该图片，对该热区的链接属性进行设定。在下方属性区[链接]文本框内填写要指向的某个URL，以后该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形，单击它就可以完成超链接的跳转。

30例：热区编辑操作：方法：单击设计区的图片，有方框标出已选定该例：插入一个表格方法：先单击插入面板[常用]项的表格对象，在设定了表格的行列值、宽度、边框粗细、边距、间距等属性值后，在代码编辑区和界面设计区将自动插入<table>代码和表格的实际显示，在“所见即所得”的页面上，拖动边框线可改变表格的大小，选中多个单元格后，再单击属性区左下角的合并按钮可将这些单元格合并为一个单元格。31例：插入一个表格方法：先单击插入面板[常用]项的表格对象，在例：插入一幅Flash图像

方法：先单击插入面板[常用]项的媒体对象，选择Flash，再选择当前目录中的swf文件，在代码编辑区和界面设计区将自动插入<object>代码和图片的轮廓显示，这样在页面的光标位置就插入了Flash图像。

32例：插入一幅Flash图像方法：先单击插入面板[常用]项的例：插入Frame框架

方法：先单击插入面板[布局]项的框架对象，选择[左侧和顶部]对象，DW会自动生成4个htm文件。当光标在各个显示区域单击时，多页标签行的同一个标签上出现该文件名；各个文件要分别独立存盘；当光标移至窗体边框或框架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第4个htm文件的代码，则该文件包含自动生成的<frame>代码和布局的3个<src>指向的文件。33例：插入Frame框架方法：先单击插入面板[布局]项的框架2.4DreamweaverMX的深入应用

1．插入面板的其他对象组：新版的DW针对ASP，ASPX，PHP，JSP服务器端的文档文件编辑，添加了相应的对象组，只要对具有这些扩展名的文件进行编辑，在[插入面板]栏内就会出现对应的对象组，常用的语句代码、专用的变量名称、语言标签等都可以很方便地添加，这些大大减少了编程时需记忆各种语句和对应的属性名称的麻烦。2．代码面板：它预存了许多常用的HTML代码和脚本代码。

3．[命令]菜单的清理功能：解决文档会带来两个问题：一是因为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改编辑；二是在网上传输要多花些时间。

342.4DreamweaverMX的深入应用

1．插入面2.5DreamweaverMX的站点管理

352.5DreamweaverMX的站点