Web程序开发环境.ppt

1,第2章Web程序开发环境,1服务器端开发环境2客户端开发环境3网页设计工具DreamweaverMX简介4DreamweaverMX的深入应用5DreamweaverMX的站点管理本章小结,在第1章中，介绍了Web编程的基础知识。本章将对Web程序开发环境和常用工具做简单介绍，包括常用的工具软件，编制HTML和ASP文件的DreamweaverMX，这将为以后学习具体的编程方法和技术做好准备。,2,2.1服务器端开发环境,服务器是对Web浏览器检索信息的请求做出响应，进而将HTML文档回传到客户机的浏览器屏幕上，或者运行服务器端程序的计算机。服务器端的编程语言，除现在一般较少采用的CGI程序外，常用ASP，Perl和PHP，还有微软公司近期推出的新一代ASP.NET语言，它直接与Java比拼，力图成为网络服务器端的标准语言。目前最常用的网络操作系统有WindowsNT，UNIX和Linux等,3,2.2客户端开发环境,客户端的编程语言，HTML标识语言掌握图形工具、Web网页制作工具和Web网页动画工具图形图像设计及处理：Photoshop6.0，CorelDRAW9.0，FireworksMX，Freehand9.0，Illustrator8.0，PhotoExpress3.0动画制作工具：FlashMX，Cool3D3.0，3DSMAXR3，ImageReady3.0，FireworksMXWeb网页制作软件：Dreamweaver，FrontPage,4,2.3网页设计工具DreamweaverMX简介,2.3.1DreamweaverMX概览Dreamweaver是Macromedia公司开发的网页制作工具，它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统，分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。,5,2.3.2DreamweaverMX的特性,1.精确性：DW采用RoundtripHTML技术实现对HTML源代码的精确控制，它能生成最为简洁和高效的HTML代码。2.易用性：DW的编辑界面相当友好，且操作简单。通过各种工具面板，可以非常方便地控制页面各种元素的属性。3.兼容性：兼容性是DW的一个非常优秀的特性，用它制作的页面能在各种浏览器上正确地显示。,6,2.3.3DreamweaverMX界面介绍,单击中部的创建新项目，建立相应类型的新文件；单击中部的从范例创建，建立多种形式的新文件；双击右部的文件列表中的文件名，调入指定目录中的文件单击左部的打开最近项目，可调入编辑过的文件,7,DreamweaverMX文件编辑界面,8,1文档窗口文档窗口是用来显示当前所编辑页面的窗口2插入面板以下简单介绍一些对象面板：常用包含主页中最常用的一些对象，如图片、表格、超链接等。布局包含常用的框架结构，如左右分帧、上下分帧等。表单包含表单及所涉及的所有元素，如文本框、按钮、复选框、单选框、列表框等。文本包含一些特殊字符，如版权符号、注册商标符号、商标符号等。HTML添加一些Script脚本等。,9,3属性面板选择窗口菜单的属性项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块，在右下角有个打开/关闭下块的箭头，有些扩展属性安排在下块中。单击属性面板标题行的箭头，还可以收缩/展开该面板选定一幅图片时，属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性,10,例：热区编辑操作：,方法：单击设计区的图片，有方框标出已选定该图片，再在下方的属性区的左下角选择矩形热区，用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域，即为“图片热区”，相对应的代码会自动生成；再单击该图片，对该热区的链接属性进行设定。在下方属性区链接文本框内填写要指向的某个URL，以后该网页在浏览器窗口内显示时，鼠标移到该矩形区域时，鼠标指针将变为手形，单击它就可以完成超链接的跳转。,11,例：插入一个表格,方法：先单击插入面板常用项的表格对象，在设定了表格的行列值、宽度、边框粗细、边距、间距等属性值后，在代码编辑区和界面设计区将自动插入代码和表格的实际显示，在“所见即所得”的页面上，拖动边框线可改变表格的大小，选中多个单元格后，再单击属性区左下角的合并按钮可将这些单元格合并为一个单元格。,12,例：插入一幅Flash图像,方法：先单击插入面板常用项的媒体对象，选择Flash，再选择当前目录中的swf文件，在代码编辑区和界面设计区将自动插入代码和图片的轮廓显示，这样在页面的光标位置就插入了Flash图像。,13,例：插入Frame框架,方法：先单击插入面板布局项的框架对象，选择左侧和顶部对象，DW会自动生成4个htm文件。当光标在各个显示区域单击时，多页标签行的同一个标签上出现该文件名；各个文件要分别独立存盘；当光标移至窗体边框或框架分隔处时，鼠标指针变为横或竖向箭头，单击鼠标，代码编辑区显示所设定框架布局的第4个htm文件的代码，则该文件包含自动生成的代码和布局的3个指向的文件。,14,2.4DreamweaverMX的深入应用,1插入面板的其他对象组：新版的DW针对ASP，ASPX，PHP，JSP服务器端的文档文件编辑，添加了相应的对象组，只要对具有这些扩展名的文件进行编辑，在插入面板栏内就会出现对应的对象组，常用的语句代码、专用的变量名称、语言标签等都可以很方便地添加，这些大大减少了编程时需记忆各种语句和对应的属性名称的麻烦。2代码面板：它预存了许多常用的HTML代码和脚本代码。3命令菜单的清理功能：解决文档会带来两个问题：一是因为插入的代码混杂在文档中，查看时有点摸不着头绪，无法继续修改编辑；二是在网上传输要多花些时间。,15,2.5DreamweaverMX的站点管理,16,图2-10DreamweaverMX站点管理的编辑界面,17,1创建本地站点（1）站点名称（2）本地文件夹（3）其余项可用默认值2设置服务器信息（1）设置服务器选项（2）如果为服务器分配了FTP权限此时需填写以下数据：FTP主机。输入服务器的IP地址。主机目录。输入服务器上设定的目录。登录。分配的用户名。密码。分配的密码。其余项可用默认值。,18,3完成本地站点创建在“站点定义为”对话框设置完成本地站点信息和服务器信息后，单击确定按钮即可完成本地站点的创建。同时，DW会自动以扩展窗口方式打开远端站点和本地文件左、右两个窗口4下载、上传与更新网页通过使用左、右站点窗口可以完成网页的下载、上传与更新操作,图2-11远端站点和本地文件目录窗口,19,本章小结,本章简单介绍了服务器端和客户端的Web程序开发环境DreamweaverMX，它是编制HTML文件和A