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文件和ASP文件的非常实用的编辑集成环境 DreamweaverMX采用RoundtripHTML技术实现对HTML源代码的精确控制 能生成最为简洁和高效的HTML代码 它编辑界面友好 且操作简单 此外 DreamweaverMX的一个非常优秀的特性是它的兼容性 它制作的页面能在各种浏览器上正确地显示