Web程序开发环境.ppt

上传人:小飞机 文档编号:6523358 上传时间:2023-11-08 格式:PPT 页数:19 大小:2.59MB
返回 下载 相关 举报
Web程序开发环境.ppt_第1页
第1页 / 共19页
Web程序开发环境.ppt_第2页
第2页 / 共19页
Web程序开发环境.ppt_第3页
第3页 / 共19页
Web程序开发环境.ppt_第4页
第4页 / 共19页
Web程序开发环境.ppt_第5页
第5页 / 共19页
点击查看更多>>
资源描述

《Web程序开发环境.ppt》由会员分享,可在线阅读,更多相关《Web程序开发环境.ppt(19页珍藏版)》请在三一办公上搜索。

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

2、,除现在一般较少采用的CGI程序外,常用ASP,Perl和PHP,还有微软公司近期推出的新一代ASP.NET语言,它直接与Java比拼,力图成为网络服务器端的标准语言。目前最常用的网络操作系统有Windows NT,UNIX和Linux等,3,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

3、.0,3DS MAX R3,ImageReady 3.0,Fireworks MX Web网页制作软件:Dreamweaver,FrontPage,4,2.3 网页设计工具Dreamweaver MX简介,2.3.1 Dreamweaver MX概览 Dreamweaver是Macromedia公司开发的网页制作工具,它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统,分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。,5,2.3.2 Dreamweaver MX的特性,1.精确性:DW采用Roundtrip HTML

4、技术实现对HTML源代码的精确控制,它能生成最为简洁和高效的HTML代码。2.易用性:DW的编辑界面相当友好,且操作简单。通过各种工具面板,可以非常方便地控制页面各种元素的属性。3.兼容性:兼容性是DW的一个非常优秀的特性,用它制作的页面能在各种浏览器上正确地显示。,6,2.3.3 Dreamweaver MX界面介绍,单击中部的创建新项目,建立相应类型的新文件;单击中部的从范例创建,建立多种形式的新文件;双击右部的文件列表中的文件名,调入指定目录中的文件单击左部的打开最近项目,可调入编辑过的文件,7,Dreamweaver MX文件编辑界面,8,1文档窗口文档窗口是用来显示当前所编辑页面的窗

5、口2插入面板以下简单介绍一些对象面板:常用 包含主页中最常用的一些对象,如图片、表 格、超链接等。布局包含常用的框架结构,如左右分帧、上下分帧 等。表单包含表单及所涉及的所有元素,如文本框、按 钮、复选框、单选框、列表框等。文本包含一些特殊字符,如版权符号、注册商标符 号、商标符号等。HTML添加一些Script脚本等。,9,3属性面板 选择窗口菜单的属性项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。属性面板一般分为上、下两块,在右下角有个打开/关闭下块的箭头,有些扩展属性安排在下块中。单击属性面板标题行的箭头,还可以收缩/展开该面板选定一幅图片时,属性面板就变为显示图片的

6、缩略图、大小、源文件名、对齐方式及其他属性,10,例:热区编辑操作:,方法:单击设计区的图片,有方框标出已选定该图片,再在下方的属性区的左下角选择矩形热区,用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域,即为“图片热区”,相对应的代码会自动生成;再单击该图片,对该热区的链接属性进行设定。在下方属性区链接文本框内填写要指向的某个URL,以后该网页在浏览器窗口内显示时,鼠标移到该矩形区域时,鼠标指针将变为手形,单击它就可以完成超链接的跳转。,11,例:插入一个表格,方法:先单击插入面板常用项的表格对象,在设定了表格的行列值、宽度、边框粗细、边距、间距等属性值后,在代码编辑区和界面设计区将自动

7、插入代码和表格的实际显示,在“所见即所得”的页面上,拖动边框线可改变表格的大小,选中多个单元格后,再单击属性区左下角的合并按钮可将这些单元格合并为一个单元格。,12,例:插入一幅Flash图像,方法:先单击插入面板常用项的媒体对象,选择Flash,再选择当前目录中的swf文件,在代码编辑区和界面设计区将自动插入代码和图片的轮廓显示,这样在页面的光标位置就插入了Flash图像。,13,例:插入Frame框架,方法:先单击插入面板布局项的框架对象,选择左侧和顶部对象,DW会自动生成4个htm文件。当光标在各个显示区域单击时,多页标签行的同一个标签上出现该文件名;各个文件要分别独立存盘;当光标移至窗

8、体边框或框架分隔处时,鼠标指针变为横或竖向箭头,单击鼠标,代码编辑区显示所设定框架布局的第4个htm文件的代码,则该文件包含自动生成的代码和布局的3个指向的文件。,14,2.4 Dreamweaver MX的深入应用,1插入面板的其他对象组:新版的DW针对ASP,ASPX,PHP,JSP服务器端的文档文件编辑,添加了相应的对象组,只要对具有这些扩展名的文件进行编辑,在插入面板栏内就会出现对应的对象组,常用的语句代码、专用的变量名称、语言标签等都可以很方便地添加,这些大大减少了编程时需记忆各种语句和对应的属性名称的麻烦。2代码面板:它预存了许多常用的HTML代码和脚本代码。3命令菜单的清理功能:

9、解决文档会带来两个问题:一是因为插入的代码混杂在文档中,查看时有点摸不着头绪,无法继续修改编辑;二是在网上传输要多花些时间。,15,2.5 Dreamweaver MX的站点管理,16,图2-10 Dreamweaver MX站点管理的编辑界面,17,1创建本地站点(1)站点名称(2)本地文件夹(3)其余项可用默认值 2设置服务器信息(1)设置服务器选项(2)如果为服务器分配了FTP权限此时需填写以下数据:FTP主机。输入服务器的IP地址。主机目录。输入服务器上设定的目录。登录。分配的用户名。密码。分配的密码。其余项可用默认值。,18,3完成本地站点创建在“站点定义为”对话框设置完成本地站点信

10、息和服务器信息后,单击确定按钮即可完成本地站点的创建。同时,DW会自动以扩展窗口方式打开远端站点和本地文件左、右两个窗口4下载、上传与更新网页通过使用左、右站点窗口可以完成网页的下载、上传与更新操作,图2-11 远端站点和本地文件目录窗口,19,本 章 小 结,本章简单介绍了服务器端和客户端的Web程序开发环境Dreamweaver MX,它是编制HTML文件和ASP文件的非常实用的编辑集成环境。Dreamweaver MX采用Roundtrip HTML技术实现对HTML源代码的精确控制,能生成最为简洁和高效的HTML代码;它编辑界面友好,且操作简单。此外,Dreamweaver MX的一个非常优秀的特性是它的兼容性,它制作的页面能在各种浏览器上正确地显示,

展开阅读全文
相关资源
猜你喜欢
相关搜索
资源标签

当前位置:首页 > 生活休闲 > 在线阅读


备案号:宁ICP备20000045号-2

经营许可证:宁B2-20210002

宁公网安备 64010402000987号