chap06DreamweaverCS5的使用概要.ppt

网页编程基础 ——XHTML、CSS、JavaScript 第6章 Dreamweaver CS5的使用 学习目标： 熟悉Dreamweaver CS5的操作界面 掌握Dreamweaver CS5的基本操作 创建并保存各类页面 添加文本、图像、表格等内容 添加各种类型的超链接 掌握框架类页面的制作 了解模板、库的应用 熟悉常见行为的添加 掌握Dreamweaver CS5中“CSS样式”面板的使用 6.1 Dreamweaver CS5概述 Dreamweaver CS5是目前Dreamweaver的最新版本。 该版本增加了一些新的功能，如BrowserLab，可以为网页跨浏览器的兼容性提供测试；又如CSS的禁用/启用功能、CSS检查功能、CSS的起始布局功能等都对用户使用CSS提供了多方位的支持。而在这些新功能中，比较醒目的是Dreamweaver CS5摒弃了以往只注重静态页面设计的状况，在这个版本中对动态网页设计的支持度有了提升，支持PHP、WordPress、Drupal等开源建站系统的代码提示。 Dreamweaver CS5弃用了之前版本的部分功能，如原有的播放声音、弹出菜单等的JavaScript行为等都被弃用，使得其功能更为紧凑且符合目前的建站趋势。 6.1.1中文版Dreamweaver CS5的操作界面 A. 应用程序栏 ：应用程序栏可以进行常规的窗口的最大化、最小化和关闭等操作。 B. 菜单栏：Dreamweaver CS5的大部分操作可通过菜单栏完成，其操作方式与其他软件相同，此处不再详细介绍。 C. 文档工具栏：在文档工具栏，用户可以进行工作区的视图切换。默认状态下为“拆分”，即“代码”视图和“设计视图”均显示，也可切换为“代码”视图或者“设计”视图。 D. 文档窗口中的代码视图：在代码视图中可进行代码的编写。 E. 文档窗口中的设计视图：在设计视图可直接进行页面的设计。 F. 功能面板组：Dreamweaver CS5提供了多个功能面板组，包括“插入”面板、“CSS样式”和“AP元素”面板所示、“文件”和“资源”面板等。 G. 属性面板：在设计视图或者代码视图中选中的对象，如段落、表格、图像、表单元素等，可在属性面板中查看属性并设置。 H. 状态栏：状态栏中会显示文档窗口中的代码标签，在状态栏中可以比较方便地选中某个要编辑的对象。在状态栏中还会显示页面大小、页面编码格式等信息。 I. 编码工具栏：编码工具栏中包含有多个编码相关的工具按钮，如用于折叠/展开标签的按钮、选择标签或代码段的按钮、应用注释等的按钮。 J. 文档标题栏：当前打开的文档的标题都显示在文档标题栏，若标题旁带有“*”则表示该文档编辑后尚未保存。单击标题旁的按钮可直接关闭该网页文档。 6.1.2 创建和编辑站点 1. 创建本地站点 所谓“本地站点”即站点设置在本地磁盘上，站点中的网页文档等均放在本地磁盘上。因此在创建站点之前，先在相应磁盘创建将要放置站点的文件夹，而后再创建本地站点 （1）在Dreamweaver CS5中，单击菜单【站点】|【新建站点】命令，弹出如图6-9所示的“站点设置对象”对话框。 （2）在“站点名称”文本框中输入“我的网站”，并选择D:\myweb为本地站点文件夹。 （3）设置“本地信息”。单击左侧的“高级设置”|“本地信息”选项进行设置。 （4）设置完成，单击“保存”按钮以完成站点的创建。 6.1.2 创建和编辑站点 2.创建远程站点 在本地站点的基础上，通过设置可以进一步创建远程站点。 步骤1 打开“站点设置对象”对话框。 步骤2 设置“服务器”信息。 6.1.2 创建和编辑站点 3. 管理站点 站点建完后，单击【站点】|【管理站点】命令会弹出“管理站点”对话框，在这个对话框中可以对已有的站点进行“编辑”、“复制”、“删除”、“导出”、“导入”等操作。 6.2 Dreamweaver CS5的基本操作 6.2.1 创建和保存网页 6.2.2 添加文本和其他常见对象 6.2.3插入图像 6.2.4 插入表格 6.2.5 使用超连接 6.2.6 插入表单元素 6.2.1 创建和保存网页 1. 新建网页 （1）通过“起始页”新建网页。 6.2.1 创建和保存网页 （2）单击【文件】|【新建】命令来新建网页 6.2.1 创建和保存网页 2. 保存网页 保存 另存为 保存全部 另存为模板 …… 6.2.1 创建和保存网页 3.设置页面标题和页面属性 （1）设置页面标题 通过工具栏中的标题文本框 来设置 通过“页面属性”对话框来设置 （2）设置页面属性 在“设计”视图单击“属性”面板中的“页面属性”按钮 ，在弹出的“页面属性”对话框中设置页面属性。