第2章Web程序开发环境

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