第6章 Web程序开发环境概要.pptVIP

第6章 人机交互技术（web开发环境） 1 服务器端开发环境 2 客户端开发环境 3 网页设计工具Dreamweaver MX简介 4 Dreamweaver MX的深入应用 5 Dreamweaver MX的站点管理 本章小结 在第1章中，介绍了Web编程的基础知识。本章将对Web程序开发环境和常用工具做简单介绍，包括常用的工具软件，编制HTML和JSP文件的Dreamweaver MX，这将为以后学习具体的编程方法和技术做好准备。 2.1 服务器端开发环境 服务器是对Web浏览器检索信息的请求做出响应，进而将HTML文档回传到客户机的浏览器屏幕上，或者运行服务器端程序的计算机。 服务器端的编程语言，除现在一般较少采用的CGI程序外，常用ASP，Perl和PHP，还有微软公司近期推出的新一代ASP.NET语言，它直接与Java比拼，力图成为网络服务器端的标准语言。 目前最常用的网络操作系统有Windows NT，UNIX和Linux等 2.2 客户端开发环境 客户端的编程语言，HTML标识语言 掌握图形工具、Web网页制作工具和Web网页动画工具 图形图像设计及处理：Photoshop 6.0，CorelDRAW 9.0，Fireworks MX，Freehand 9.0，Illustrator 8.0，PhotoExpress 3.0 动画制作工具 ：Flash MX，Cool3D 3.0，3DS MAX R3，ImageReady 3.0，Fireworks MX Web网页制作软件： Dreamweaver，FrontPage 2.3 网页设计工具Dreamweaver MX简介 2.3.1 Dreamweaver MX概览 Dreamweaver是Macromedia公司开发的网页制作工具，它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统，分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。 2.3.2 Dreamweaver MX的特性 1.精确性： DW采用Roundtrip HTML技术实现对 HTML源代码的精确控制，它能生成最为简洁和高效的 HTML代码。 2.易用性：DW的编辑界面相当友好，且操作简单。通 过各种工具面板，可以非常方便地控制页面各种元素的属 性。 3.兼容性：兼容性是DW的一个非常优秀的特性，用它制作 的页面能在各种浏览器上正确地显示。 2.3.3 Dreamweaver MX界面介绍 1．文档窗口 文档窗口是用来显示当前所编辑页面的窗口 2．插入面板 以下简单介绍一些对象面板： [常用] 包含主页中最常用的一些对象，如图片、表 格、超链接等。 [布局] 包含常用的框架结构，如左右分帧、上下分帧 等。 [表单] 包含表单及所涉及的所有元素，如文本框、按 钮、复选框、单选框、列表框等。 [文本] 包含一些特殊字符，如版权符号、注册商标符 号、商标符号等。 [HTML] 添加一些Script脚本等。 3．属性面板 选择[窗口]菜单的[属性]项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。 属性面板一般分为上、下两块，在右下角有个打开/关闭下块的箭头，有些扩展属性安排在下块中。 单击属性面板标题行的箭头，还可以收缩/展开该面板 选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性 例：热区编辑操作： 例：插入一个表格 例：插入一幅Flash图像 例：插入Frame框架 2.4 Dreamweaver MX的深入应用 1．插入面板的其他对象组：新版的DW针对ASP，ASPX，PHP，JSP服务器端的文档文件编辑，添加了相应的对象组，只要对具有这些扩展名的文件进行编辑，在[插入面板]栏内就会出现对应的对象组，常用的语句代码、专用的变量名称、语言标签等都可以很方便地添加，这些大大减少了编程时需记忆各种语句和对应的属性名称的麻烦。 2．代码面板：它预存了许多常用的HTML代码和脚本代码。 3．[命令]菜单的清理功能：解决文档会带来两个问题：一是因为插入的