第2章Web程序开发环境

1、1第第2章章 Web程序开发环境程序开发环境1 1 服务器端开发环境服务器端开发环境 2 2 客户端开发环境客户端开发环境 3 3 网页设计工具网页设计工具DreamweaverDreamweaver MX MX简介简介 4 Dreamweaver4 Dreamweaver MX MX的深的深入应用入应用 5 Dreamweaver5 Dreamweaver MX MX的站的站点管理点管理本章小结本章小结 在第在第1章中，介绍了章中，介绍了Web编程的基础知识。本章将编程的基础知识。本章将对对Web程序开发环境和常程序开发环境和常用工具做简单介绍，包括用工具做简单介绍，包括常用的工具软件，编制

2、常用的工具软件，编制HTML和和ASP文件的文件的Dreamweaver MX，这将，这将为以后学习具体的编程方为以后学习具体的编程方法和技术做好准备法和技术做好准备。22.1 服务器端开发环境服务器端开发环境 u服务器服务器是对是对WebWeb浏览器检索信息的请求做出响应，浏览器检索信息的请求做出响应，进而将进而将HTMLHTML文档回传到客户机的浏览器屏幕上，文档回传到客户机的浏览器屏幕上，或者运行服务器端程序的计算机。或者运行服务器端程序的计算机。u服务器端的编程语言，除现在一般较少采用的服务器端的编程语言，除现在一般较少采用的CGICGI程序外，常用程序外，常用ASPASP，PerlP

3、erl和和PHPPHP，还有微软公司近，还有微软公司近期推出的新一代期推出的新一代ASP.NETASP.NET语言，它直接与语言，它直接与JavaJava比拼，比拼，力图成为网络服务器端的标准语言。力图成为网络服务器端的标准语言。u目前最常用的网络操作系统有目前最常用的网络操作系统有Windows NTWindows NT，UNIXUNIX和和LinuxLinux等等 3WindowsXP Web服务器组件服务器组件 IIS 5.0nIntranet上的信息服务（IIS）无论在局域网还是在Internet中都是非常重要的服务。IIS5.0是一套集Web服务、Ftp服务、SMTP服务等为一体的服

4、务器软件。其中，Web服务提供了Internet的相关服务，用它可以设定网页的存取权限，执行CGI和ASP程序，也可以在同一台服务器上架设多个Web站点，是一套完整的Web服务器软件。4IIS 5.0nWWW服务：服务：支持最新的超文本传输协议（HTTP）1.1标准，运行速度更快，安全性更高，还可以提供虚拟主机服务。WWW服务是指在网上发布可以通过浏览器观看的用HTML标识语言编写的图形化页面的服务。IIS 5.0允许用户设定数目不限的虚拟Web站点。5IIS 运行环境：运行环境：n硬件：硬件：最低配置：486/50以上，16M内存，50M硬盘空间建议配置：PIII以上，32-64M内存，20

5、0M以上硬盘空间软件：软件：NT Server 4.0， Service Pack 3，IE浏览器（4.0以上版本），支持 TCP/IP协议或者：Windows 2000(XP,2003),IE，支持TCP/IP协议 6安装IIS5.0(1)选择“控制面板”中的“添加/删除程序”，打开“添加/删除程序”窗口。(2)单击“添加/删除Windows组件”，打开“Windows组件向导”对话框，如图。7安装IIS5.0（3）单击“详细信息”，打开“Internet信息服务（IIS）对话框”。（4）选择所需的服务，如Web服务和Ftp服务等，最后单击“确定”。（5）单击“下一步”，系统会从Window

6、s光盘上复制所需的数据。（6）复制结束后，单击“确定”按钮结束安装。8IIS 发布WEB站点n利用IIS发布站点，可以按照下面的步骤进行：1、您先要从“开始”-“设置”-“控制面板”-“管理工具”，如图所示。92、打开“Internet 服务管理器”103、配置Web服务器n当IIS5.0安装结束后，系统会自动创建一个默认的Web站点（c:Inetpubwwwroot）供用户快速发布内容。用户只需将要发布的Web文件复制到C:Intetpubwwwroot文件夹中，并将主页的文件名设置为default.htm、default.asp、index.htm或iisstart.asp，即可通过Web

7、浏览器访问该Web服务器。n打开后选中“默认的Web站点”，右击点属性，出现IIS的配置界面，IIS中的服务配置都是通过类似的属性界面实现。此外，IIS中的属性具有继承性，子级目录自然继承上级目录的相同属性。11主目录选项卡： 12Web站点选项卡nWeb站点标识：站点标识： 描述-用户指定该站点的名称。n IP地址-用户分配给该站点的IP地址(动态域名的用户,您可以使用默认的IP地址,选中“全部未分配”,即可)。在高级对话框中还可以进一步的设定该站点的IP地址，TCP端口号以及主机名称等（注：同一台Web服务器中，具有不同IP地址或不同主机名的不同站点称为虚拟主机）。n TCP端口-缺省值为

8、80，用户可以根据自己的需要进行改动。 13文档选项卡14配置Web服务器n用户也可以创建自己的Web站点，来扩展Web服务器的功能：（1）建立自己的web站点；（2）设置默认文档；（3）建立站点下的虚拟目录；152.2 客户端开发环境 u客户端的编程语言，客户端的编程语言，HTMLHTML标识语言标识语言 u掌握图形工具、掌握图形工具、WebWeb网页制作工具和网页制作工具和WebWeb网页动画工具网页动画工具 u图形图像设计及处理图形图像设计及处理：Photoshop 6.0Photoshop 6.0，CorelDRAWCorelDRAW 9.0 9.0，Fireworks MXFirew

9、orks MX，Freehand 9.0Freehand 9.0，Illustrator 8.0Illustrator 8.0，PhotoExpressPhotoExpress 3.0 3.0 u动画制作工具动画制作工具 ：Flash MXFlash MX，Cool3D 3.0Cool3D 3.0，3DS MAX R33DS MAX R3，ImageReadyImageReady 3.0 3.0，Fireworks MXFireworks MX uWebWeb网页制作软件：网页制作软件： DreamweaverDreamweaver，FrontPageFrontPage 162.3 网页设计工

10、具Dreamweaver MX简介 2.3.1 Dreamweaver MX概览概览 uDreamweaverDreamweaver是是MacromediaMacromedia公司开发的网页制作公司开发的网页制作工具，它与工具，它与MacromediaMacromedia公司的另外两项产品公司的另外两项产品FireworkFirework和和FlashFlash一起组成一套功能强大的网页创一起组成一套功能强大的网页创作系统，分别覆盖了网页制作、网页图形图像处作系统，分别覆盖了网页制作、网页图形图像处理和矢量动画这理和矢量动画这3 3个主要的网络创作领域。个主要的网络创作领域。 172.3.2

11、Dreamweaver MX的特性 1.精确性精确性： DWDW采用采用Roundtrip HTMLRoundtrip HTML技术实现对技术实现对HTMLHTML源代码的精确控制，它能生成最为简洁和高效的源代码的精确控制，它能生成最为简洁和高效的HTMLHTML代码。代码。 2.2.易用性易用性：DWDW的编辑界面相当友好，且操作简单。通的编辑界面相当友好，且操作简单。通过各种工具面板，可以非常方便地控制页面各种元素的属过各种工具面板，可以非常方便地控制页面各种元素的属性。性。 3.3.兼容性兼容性：兼容性是兼容性是DWDW的一个非常优秀的特性，用它制作的一个非常优秀的特性，用它制作的页面能

12、在各种浏览器上正确地显示。的页面能在各种浏览器上正确地显示。 182.3.3 Dreamweaver MX界面介绍 19 201文档窗口文档窗口文档窗口是用来显示当前所编辑页面的窗口文档窗口是用来显示当前所编辑页面的窗口2插入面板插入面板以下简单介绍一些对象面板以下简单介绍一些对象面板：u常用常用 包含主页中最常用的一些对象，如图片、表包含主页中最常用的一些对象，如图片、表 格、超链接等。格、超链接等。u布局布局包含常用的框架结构，如左右分帧、上下分帧包含常用的框架结构，如左右分帧、上下分帧 等。等。u表单表单包含表单及所涉及的所有元素，如文本框、按包含表单及所涉及的所有元素，如文本框、按 钮

13、、复选框、单选框、列表框等。钮、复选框、单选框、列表框等。u文本文本包含一些特殊字符，如版权符号、注册商标符包含一些特殊字符，如版权符号、注册商标符 号、商标符号等。号、商标符号等。uHTML添加一些添加一些Script脚本等。脚本等。213属性面板属性面板 选择选择 窗口窗口 菜单的菜单的 属性属性 项即可打开属性面板。属性面板项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块，在右下角有个打开属性面板一般分为上、下两块，在右下角有个打开/ /关闭关闭下块的箭头，有些扩展属性安排在下块中。下块的箭头，有些扩展属性

14、安排在下块中。单击属性面板标题行的箭头，还可以收缩单击属性面板标题行的箭头，还可以收缩/ /展开该面板展开该面板选定一幅图片时，属性面板就变为显示图片的缩略图、大选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性小、源文件名、对齐方式及其他属性 22例：热区编辑操作：例：热区编辑操作： 。 23例：插入一个表格例：插入一个表格24例：插入一幅例：插入一幅Flash图像图像 25例：插入例：插入Frame框架框架 262.4 Dreamweaver MX的深入应用u1 1插入面板的其他对象组插入面板的其他对象组：新版的新版的DW针对针对ASP，ASPX，PHP，J

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

16、菜单的清理功能菜单的清理功能：解决文档会带来两个问题：一是因解决文档会带来两个问题：一是因为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改编辑；二是在网上传输要多花些时间。编辑；二是在网上传输要多花些时间。 272.5 Dreamweaver MX的站点管理28 29 1创建本地站点创建本地站点 （1）站点名称）站点名称 （2）本地文件夹）本地文件夹 （3）其余项可用默认值）其余项可用默认值 2设置服务器信息设置服务器信息 （1）设置服务器选项）设置服务器选项 （2）如果为服务器分配了）如果为服务器分配了FTP权限此时需填

17、写以下数据权限此时需填写以下数据： FTP主机。输入服务器的主机。输入服务器的IP地址。地址。 主机目录。输入服务器上设定的目录。主机目录。输入服务器上设定的目录。 登录。分配的用户名。登录。分配的用户名。 密码。分配的密码。密码。分配的密码。 其余项可用默认值。其余项可用默认值。 303完成本地站点创建完成本地站点创建在在“站点定义为站点定义为”对话框设置完成本地站点信息和服务器信息后，对话框设置完成本地站点信息和服务器信息后，单击单击确定确定按钮即可完成本地站点的创建。同时，按钮即可完成本地站点的创建。同时，DW会自动以会自动以扩展窗口方式打开扩展窗口方式打开远端站点远端站点和和本地文件本地文件左、右两个窗口左、右两个窗口4下载、上传与更新网页下载、上传与更新网页通过使用左、右站点窗口可以完成网页的下载、上传与更新操作通过使用左、右站点窗口可以完成网页的下载、上传与更新操作 31本 章 小 结u本章简单介绍了服务器端和客户端的本章简单介绍了服务器端和客户端的Web程序开发环境程序开发环境Dreamwe