文档介绍：第2章 Web程序开发环境
1 服务器端开发环境
2 客户端开发环境
3 网页设计工具Dreamweaver MX简介
4 Dreamweaver MX的深入应用
5 Dreamweaver MX的站点管理
本章小结
在第1章中,介绍了Web编程的基础知识。本章将对Web程序开发环境和常用工具做简单介绍,包括常用的工具软件,编制HTML和ASP文件的Dreamweaver MX,这将为以后学****具体的编程方法和技术做好准备。
1
服务器端开发环境
服务器是对Web浏览器检索信息的请求做出响应,进而将HTML文档回传到客户机的浏览器屏幕上,或者运行服务器端程序的计算机。
服务器端的编程语言,除现在一般较少采用的CGI程序外,常用ASP,Perl和PHP,语言,它直接与Java比拼,力图成为网络服务器端的标准语言。
目前最常用的网络操作系统有Windows NT,UNIX和Linux等
2
客户端开发环境
客户端的编程语言,HTML标识语言
掌握图形工具、Web网页制作工具和Web网页动画工具
图形图像设计及处理:Photoshop ,CorelDRAW ,Fireworks MX,Freehand ,Illustrator ,PhotoExpress
动画制作工具:Flash MX,Cool3D ,3DS MAX R3,ImageReady ,Fireworks MX
Web网页制作软件: Dreamweaver,FrontPage
3
网页设计工具Dreamweaver MX简介
Dreamweaver MX概览
Dreamweaver是Macromedia公司开发的网页制作工具,它与Macromedia公司的另外两项产品Firework和Flash一起组成一套功能强大的网页创作系统,分别覆盖了网页制作、网页图形图像处理和矢量动画这3个主要的网络创作领域。
4
Dreamweaver MX的特性
: DW采用Roundtrip HTML技术实现对
HTML源代码的精确控制,它能生成最为简洁和高效的
HTML代码。
:DW的编辑界面相当友好,且操作简单。通
过各种工具面板,可以非常方便地控制页面各种元素的属
性。
:兼容性是DW的一个非常优秀的特性,用它制作
的页面能在各种浏览器上正确地显示。
5
Dreamweaver MX界面介绍
①单击中部的[创建新项目],建立相应类型的新文件;
②单击中部的[从范例创建],建立多种形式的新文件;
③双击右部的[文件]列表中的文件名,调入指定目录中的文件
④单击左部的[打开最近项目],可调入编辑过的文件
6
Dreamweaver MX文件编辑界面
7
文档窗口是用来显示当前所编辑页面的窗口
以下简单介绍一些对象面板:
[常用] 包含主页中最常用的一些对象,如图片、表
格、超链接等。
[布局] 包含常用的框架结构,如左右分帧、上下分帧
等。
[表单] 包含表单及所涉及的所有元素,如文本框、按
钮、复选框、单选框、列表框等。
[文本] 包含一些特殊字符,如版权符号、注册商标符
号、商标符号等。
[HTML] 添加一些Script脚本等。
8
选择[窗口]菜单的[属性]项即可打开属性面板。属性面板用来显示文档窗口中选定对象的各种属性。
属性面板一般分为上、下两块,在右下角有个打开/关闭下块的箭头,有些扩展属性安排在下块中。
单击属性面板标题行的箭头,还可以收缩/展开该面板
选定一幅图片时,属性面板就变为显示图片的缩略图、大小、源文件名、对齐方式及其他属性
9
例:热区编辑操作:
方法:单击设计区的图片,有方框标出已选定该图片,再在下方的属性区的左下角选择矩形热区,用鼠标在图片的指定区域单击定位后再拖曳出一个矩形区域,即为“图片热区”,相对应的<map>代码会自动生成;再单击该图片,对该热区的链接属性进行设定。在下方属性区[链接]文本框内填写要指向的某个URL,以后该网页在浏览器窗口内显示时,鼠标移到该矩形区域时,鼠标指针将变为手形,单击它就可以完成超链接的跳转。
10