DreamweaverCS5第一次课.ppt

2、Dreamweaver CS4的工作界面 文档工具栏 菜单栏 编辑区 状态栏 属性面板 插入面板 “css样式” 面板 二、Dreamweaver CS5的工作界面 （1）菜单栏 　　主要由10个菜单组成：文件、编辑、查看、插入、修改、文本、命令、站点、窗口、帮助。所有的操作都可以在这里找到相应的菜单。 二、Dreamweaver CS5的工作界面 （2）文档工具栏 代码、拆分、设计视图模式间的快速切换。 设计视图：一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境，类似于在浏览器中查看页面时看到的内容。 代码视图：一个用于编写和编辑HTML、JavaScript、服务器语言（如PHP、ColdFusion标记语言CFML)以及任何其他类型语言的手工编码环境。 拆分视图：又称代码和设计视图，可以在窗口中同时看到文档的代码视图和设计视图。 二、Dreamweaver CS5的工作界面 (3)【插入】面板 包含了用于将图像、表格、应用程序AP等各种类型的对象插入到文档中的命令。面板中的选项卡可以自由切换，再次启动DW时，系统会打开上次使用的选项卡。某些选项卡中的命令带有弹出式菜单按钮，从中选择一个选项时，该选项将成为该按钮的默认操作。常用 【插入】面板下拉菜单包括：布局、表单、数据、Spry、文本、收藏夹、显示标签。 二、Dreamweaver CS5的工作界面 (4)属性面板 可以检查和编辑当前选定页面元素（文本或插入的对象）的最常用属性。内容不是一成不变的，会随着选定元素的改变而改变。默认情况下位于工作区的底部，也可以将其停靠在工作区的顶部，或变为活动面板. 二、Dreamweaver CS5的工作界面 （5）状态栏 位于文档窗口的底部，从中可以查看正在创建的文档的有关信息。其中“标签选择器”显示环绕当前选定内容的标签的层次结构。若单击该层次结构中的任何标签，则选定该标签全部内容。如单击状态栏的body标签，则选择中文档中整个正文。“缩放工具”可以设置当前页面的缩放比率。状态栏右侧显示当前页面的文档大小和估计下载时间。 二、Dreamweaver CS5的工作界面 （6）【面板组】 　是将相同类型或功能的面板组织在一起构成的。面板组中绝大多数的面板是折叠的，若要打开某一面板，只需要单击每个面板标题栏。若再次单击可以将其折叠。面板组内的面板显示方式多为选项卡方式。 三、定义站点 站点是一个管理网页文档的场所，简单地讲，一个个网页文档连接起来就构成了站点。站点可以小到一个网页，也可大到一个网站。 1.创建站点 在Dreamweaver CS5工作环境下，单击菜单栏中的【站点】\【新建站点】命令。这种创建站点的方法是通过向导完成的，非常直观。 三、定义站点 操作步骤： 单击菜单栏中的【站点】\【新建站点】命令，弹出“站点定义”对话框，在第二个号文本框中，会出现站点储存的默认位置，或者在下面的文本框中指定一个存储位置，Dreamweaver将在其中存储站点文件。 三、定义站点 2．添加网页文件与站点文件夹 新建的站点是空白的，其中没有任何内容。根据站点的规划，需要向其中添加网页文件或站点文件夹。网页文件即上网时浏览的HTML文件；站点文件夹则用于管理站点内容，因为站点中会有很多文件，为了有效地管理文件，可以将它们分门别类地存放在文件夹中，如图像文件夹可以专门用于存放图像、动画等。 三、定义站点 在站点中添加网页文件与文件夹的方法基本一致，操作步骤如下： （1）在【文件】面板中，右键单击“站点”根目录，则弹出一个快捷菜单。 （2）选择快捷菜单中的【新建文件】命令，则新建了一个网页文件。 （3）同样的方法，如果在弹出的快捷菜单中选择【新建文件夹】命令，则可以在站点中添加一个文件夹。 四、创建和保存网页 1.创建新文档 (1) 创建空文档。 单击【文件】/【新建】命令菜单，打开【新建文档】对话框。选择【空白页】，从【页面类型】列表选择【HTML】，【布局】中选择【无】，单击“创建”即可创建一个纯HTML空白页。 （2）创建应用CSS布局的文档。 选择【文件】/【新建】，在【新建文档】对话框中，选择【空白页】，从【页面类型】列表选择要HTML。如果从【布局】列表中选择一个预设的CSS布局，将创建一个包含预设CSS布局的页面。 四、创建和保存网页 2.保存网页 如果网页编辑完成或已经告一段落，需要保存，根据不同的需要，保存的方法也不同。 打开【文件】菜单，要保存当前文档选择“保存”命令； 如果当前文档已经保存过，可选择“另存为”命令； 如果在编辑时已经打开了多个文档，希望将所有的文档进行保存，则选择“保存全部”命令