Dreamweaver CS4操作 网页设计与制作教学PPT课件.ppt

项目3 初识Dreamweaver CS4 任务1 Dreamweaver CS4 简介 任务2 创建并保存简单的HTML文档 任务3 创建和管理站点 本章重点介绍Dreamweaver CS4 基本功能，掌握创建和保存网页的基本步骤，管理站点。 任务1 Dreamweamver CS4简介 3.1.1 Dreamweamver CS4的主要功能 1.代码开发工具：为Web应用程序设计人员和网页脚本设计人员提供了强大的代码编辑器，可以进行ASP、JSP、PHP和ASP.NET等Web应用程序及JavaScript、CSS等代码编写。 2.站点资源管理器 通过站点资源管理器可以轻松 的跟踪和预览已存储站点中的多 种资源，如图像、影片、颜色、 脚本和链接等，也可以将资源拖 至当前文档，或直接插入偶一 网页中。 3.远程站点管理 管理和维护远程服务器，从远程服务器下载文件或从本地上传文件到远程服务器，实现文件同步。 4.实时视图功能 借助实时视图功能在类似真实的浏览器环境中设计网页，同时可以直接访问代码。 5.针对JavaScript框架的代码提示 支持JavaScript脚本的编写。 3.1.2 Dreamweamver CS4 工作界面介绍 标题栏 菜单栏 文档工具栏 主工作区 属性检查兰 插入栏 面板组 （1）标题栏。从左到右放置“布局”、“扩展Dreamweaver”和“站点”3个快速启动按钮。 （2）菜单栏。包括“文件”、“编辑”、“查看”、“插入”等菜单项。 （3）“文档”工具栏。包含用于切换编辑模式的“代码”、“拆分”、“设计”和“实时视图”等按钮。 （4）主工作区。设计人员编辑网页的区域，其底部是状态栏，可以提供关于有关文档的多种信息。 （5）属性检查器。用于设置网页文档中标记包含的属性。 （6）插入栏。包含超级链接、电子邮件链接、命名锚记、表格等网页常用的组件标记。 （7）面板组。包含“CSS样式”面板、“AP元素”面板、“文件“面板和“资源”面板等 Dreamweaver CS4的工作区有8个布局模式，可以通过“窗口”——“工作区布局”菜单命令更换Dreamweaver CS4的工作区模式。 （1）“应用程序开发人员”模式。 （2） “应用程序开发人员（高级）”模式 （3）“经典”模式 （4）“设计器”模式 （5）“设计人员（紧凑）”模式 （6）“编码器”模式 （7）“编码人员（高级）”模式 （8）“双重屏幕”模式 1.选择“窗口”“工作区布局”， 然后选择你喜欢的工作区布局。 2.除了选择“编码器”和“设计器” 外，您也可以选择“双重屏幕”。 如果你另外还有一个显示器， “双重屏幕”可将所有面板放在 该显示器上，而将“文档”窗口 保留在主显示器上。 在“经典”模式下，插入栏以工具栏的形式给出，其中包含了“常用”工具栏、“布局”工具栏、“表单”工具栏等 在“经典”模式下，在“文档”工具栏下方将停靠“标准”工具栏，其他模式下也可以通过“选择”——“查看”——“工具栏”——“标准”命令，打开标准工具栏。 新建 复制 还原 全部保存 剪切 粘贴 重做 打印代码 保存 打开 任务2 创建并保存简单的HTML文档 3.2.1 创建网页文档 1.“文件”——“新建” 2.在“标准”工具栏点击“新建”按钮 3.Ctrl+N 在代码模式下，可以直接编辑当前网页文档的HTML代码 拆分模式提供了网页的HTML代码和在所见即所得模式下的对比编辑和浏览 设计模式提供了所见即所得的网络编辑模式 3.2.2 设置页面属性 页面属性包括外观、链接、标题、标题/编码以及跟踪图像这几种属性。 1.单击属性检查右下角“页面属性”按钮 2.“修改”——“页面属性” 3.2.3 保存并预览网页文档 1.网页的保存 （1）“文件”——“保存”（出现另存为对话框） （2）“文件”——“另存为” 2.预览网页 1.单击文档工具栏中的“在浏览器中预览/调试”按钮 2.在Dreamweaver CS4中可单击文档工具栏“实时视图”按钮 任务3 创建和管理站点 Dreamweaver 站点提供一种组织所有与 Web 站点关联的文档的方法。通过在站点中组织文件，可以利用 Dreamweaver 将站点上传到 Web 服务器、自动跟踪和维护链接、管理文件以及共享文件。若要充分利用 Dreamweaver 的功能，需要定义一个站点。 3.3.1 本地站点的概念 DreamweaverCS4的本地站点是一个管理网页文档的场所，即是一个存放网页文档的文件夹，网站上的所有资源和文档都可以存放在站点文件夹里。当网站设计完