Web程序开发环境

《Web程序开发环境》由会员分享，可在线阅读，更多相关《Web程序开发环境（31页珍藏版）》请在金锄头文库上搜索。

1、第2章 Web程序开发环境n1 服务器端开发环境 n2 客户端开发环境 n3 网页设计工具 Dreamweaver MX简介 n4 Dreamweaver MX的深 入应用 n5 Dreamweaver MX的站 点管理n本章小结 n在第1章中，介绍了 Web编程的基础知识。 本章将对Web程序开发 环境和常用工具做简单 介绍，包括常用的工具 软件，编制HTML和 ASP文件的 Dreamweaver MX，这 将为以后学习具体的编 程方法和技术做好准备 。12.1 服务器端开发环境 u服务器是对Web浏览器检索信息的请求做出响应 ，进而将HTML文档回传到客户机的浏览器屏幕 上，或者运行服务

2、器端程序的计算机。u服务器端的编程语言，除现在一般较少采用的 CGI程序外，常用ASP，Perl和PHP，还有微软公 司近期推出的新一代ASP.NET语言，它直接与 Java比拼，力图成为网络服务器端的标准语言 。u目前最常用的网络操作系统有Windows NT， UNIX和Linux等 2WindowsXP Web服务器组件 IIS 5.0nIntranet上的信息服务（IIS）无论在局域 网还是在Internet中都是非常重要的服务 。IIS5.0是一套集Web服务、Ftp服务、 SMTP服务等为一体的服务器软件。其中 ，Web服务提供了Internet的相关服务， 用它可以设定网页的存取

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

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

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

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

7、 需要进行改动。 12文档选项卡13配置Web服务器n用户也可以创建自己的Web站点，来扩展 Web服务器的功能： （1）建立自己的web站点； （2）设置默认文档； （3）建立站点下的虚拟目录；142.2 客户端开发环境 u客户端的编程语言，HTML标识语言 u掌握图形工具、Web网页制作工具和Web网页动画工具 u图形图像设计及处理：Photoshop 6.0，CorelDRAW 9.0 ，Fireworks MX，Freehand 9.0，Illustrator 8.0， PhotoExpress 3.0 u动画制作工具 ：Flash MX，Cool3D 3.0，3DS MAX R3 ，

8、ImageReady 3.0，Fireworks MX uWeb网页制作软件： Dreamweaver，FrontPage 152.3 网页设计工具Dreamweaver MX简介 2.3.1 Dreamweaver MX概览uDreamweaver是Macromedia公司开发的网页制作 工具，它与Macromedia公司的另外两项产品 Firework和Flash一起组成一套功能强大的网页 创作系统，分别覆盖了网页制作、网页图形图 像处理和矢量动画这3个主要的网络创作领域。162.3.2 Dreamweaver MX的特性 1.精确性： DW采用Roundtrip HTML技术实现对HTM

9、L源代码的精确控制，它能生成最为简洁和高效的HTML代码。 2.易用性：DW的编辑界面相当友好，且操作简单。通 过各种工具面板，可以非常方便地控制页面各种元素的属性。 3.兼容性：兼容性是DW的一个非常优秀的特性，用它制 作的页面能在各种浏览器上正确地显示。 172.3.3 Dreamweaver MX界面介绍 单击中部的单击中部的 创建新项目创建新项目 ，建立相应类型的新文件；，建立相应类型的新文件； 单击中部的单击中部的 从范例创建从范例创建 ，建立多种形式的新文件；，建立多种形式的新文件； 双击右部的双击右部的 文件文件 列表中的文件名，调入指定目录中的文件列表中的文件名，调入指定目录中

10、的文件 单击左部的单击左部的 打开最近项目打开最近项目 ，可调入编辑过的文件，可调入编辑过的文件18Dreamweaver MXDreamweaver MX文件编辑界面文件编辑界面 191文档窗口文档窗口是用来显示当前所编辑页面的窗口 2插入面板以下简单介绍一些对象面板：u常用 包含主页中最常用的一些对象，如图片、表格、超链接等。u布局包含常用的框架结构，如左右分帧、上下分帧等。u表单包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选框、列表框等。u文本包含一些特殊字符，如版权符号、注册商标符号、商标符号等。uHTML添加一些Script脚本等。203属性面板选择窗口菜单的属性项即可打开

11、属性面板。属性面 板用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块，在右下角有个打开/关 闭下块的箭头，有些扩展属性安排在下块中。单击属性面板标题行的箭头，还可以收缩/展开该面板选定一幅图片时，属性面板就变为显示图片的缩略图、 大小、源文件名、对齐方式及其他属性 21例：热区编辑操作：方法：方法：单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下 角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域，角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域， 即为即为“

12、“图片热区图片热区” ”，相对应的，相对应的代码会自动生成；再单击该图片，对该热区的代码会自动生成；再单击该图片，对该热区的 链接属性进行设定。在下方属性区链接属性进行设定。在下方属性区 链接链接 文本框内填写要指向的某个文本框内填写要指向的某个URLURL，以后，以后 该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形，该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形， 单击它就可以完成超链接的跳转单击它就可以完成超链接的跳转。 22例：插入一个表格方法：方法：先单击插入面板先单击插入面板 常用常用 项的表格对象，在设定了表格的行列值、宽度、边框粗细、项

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

14、FlashFlash，再选择当前目录中的，再选择当前目录中的swfswf 文件，在代码编辑区和界面设计区将自动插入文件，在代码编辑区和界面设计区将自动插入代码和图片的轮廓显示，这代码和图片的轮廓显示，这 样在页面的光标位置就插入了样在页面的光标位置就插入了FlashFlash图像。图像。 24例：插入Frame框架 方法：方法：先单击插入面板先单击插入面板 布局布局 项的框架对象，选择项的框架对象，选择 左侧和顶部左侧和顶部 对象，对象，DWDW会自动生成会自动生成4 4个个htmhtm文件。当光标在各个文件。当光标在各个 显示区域单击时，多页标签行的同一个标签上出现该文件名；各个文件要分别独

15、立存盘；当光标移至窗体边框或框显示区域单击时，多页标签行的同一个标签上出现该文件名；各个文件要分别独立存盘；当光标移至窗体边框或框 架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第4 4个个htmhtm文件的代码，文件的代码， 则该文件包含自动生成的则该文件包含自动生成的代码和布局的代码和布局的3 3个个 指向的文件。指向的文件。252.4 Dreamweaver MX的深入应用u1插入面板的其他对象组：新版的DW针对ASP，ASPX， PHP，JSP服务器端的文档文件编辑，添加了相

16、应的对象组，只要 对具有这些扩展名的文件进行编辑，在插入面板栏内就会出现对 应的对象组，常用的语句代码、专用的变量名称、语言标签等都可 以很方便地添加，这些大大减少了编程时需记忆各种语句和对应的 属性名称的麻烦。u2代码面板：它预存了许多常用的HTML代码和脚本代码。 u3命令菜单的清理功能：解决文档会带来两个问题：一是 因为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改编辑；二是在网上传输要多花些时间。 262.5 Dreamweaver MX的站点 管理27图图2-10 Dreamweaver MX2-10 Dreamweaver MX站点管理的编辑界面站点管理的编辑界面 281创建本地站点（1）站点名称（2）本地文件夹 （3）其余项可用默认值 2设置服务器信息 （1）设置服务器选项（2）如果为服务器分配了FTP权限此时需填写以下数据