网页设计与制作应用教程第3章AdobeDreamweaveCS3入.pptx

1、网页设计与制作应用教程机械工业出版社同名教材配套电子课件2009.4第第3 3章章 Adobe Dreamweave CS3 Adobe Dreamweave CS3 入门知识入门知识 3.1 3.1 Dreamweave 概述概述 3.2 3.2 Adobe Dreamweave CS3 工作环境 3.3 站点的建立 3.4 站点文件的基本操作 3.5 边学边做 3.1 Dreamweave3.1 Dreamweave 概述 Dreamweave 特点Dreamweave 是一款专业的HTML编辑器，它的功能特点如下：可视化编辑功能高效的站点管理全面的编码环境支持服务器功能扩展功能3.2 A

2、dobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境工作区布局选择 3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境“设计器”工作区布局3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境Dreamweaver 的工作区组成: 文档窗口 “插入”栏 文档工具栏 面板组 标签选择器 “属性”面板 “文件”面板3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境“插入”栏文档工具栏A

3、. 显示代码视图 B. 显示代码视图和设计视图 C. 显示设计视图 D. 文档标题 E. 文件管理 F. 在浏览器中预览/调试 G. 刷新设计视图 H. 视图选项 I. 可视化助理 J. 验证标记 K. 检查浏览器兼容性 3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境状态栏属性面板3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境“文件”面板3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境 菜单功能 文件菜单 编辑菜

4、单 视图菜单 插入菜单 站点菜单 窗口菜单 帮助菜单 快捷菜单3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境 自定义自定义Dreamweavr CS3 Dreamweavr CS3 工作区工作区 1 1、显示和隐蔽面板、显示和隐蔽面板 3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工作环境 2 2、设置、设置 Dreamweaver Dreamweaver 的首选参数的首选参数 3.2 Adobe Dreamweave CS3 Adobe Dreamweave CS3 工作环境工

5、作环境 显示和隐藏欢迎屏幕显示和隐藏欢迎屏幕3.3 站点的建立站点的建立建立站点的目的就是为了有效的组织管理设计网页所需要的各种元素。站点需要一个名称和存储位置也就是目录，它可以是存储磁盘的任何位置。站点有网络服务器中的站点（即远程站点）和本地站点两种创建形式。 3.3 站点的建立站点的建立选择主菜单【站点】/【新建站点】命令 ，在文本框内输入站点的名称，单击“确定”按钮 3.3 站点的建立站点的建立如果要使用服务器技术（如：ASP等），可单击选择第二个单选项，否则默认选择第一个单选项。 单击“下一步”。3.3 站点的建立站点的建立选择在本地编辑还是在服务器编辑。并在文本框中指定站点文件夹的位

6、置。单击“下一步”。3.3 站点的建立站点的建立 选择如何连接到服务器。 选择是否启用存回和取出模式。 3.3 站点的建立站点的建立 总结新创建的站点的所有设置信息，确认后单击“完成”按钮。 “文件”面板会显示出新创建的站点文件夹 。3.3 站点的建立站点的建立创建站点目录和文件 操作方法可以是：在“文件”面扳中右键击“我的网站”站点，在弹出的快捷菜单中执行“新建文件（或新建文件夹）”命令。在出现文本框中重命名文件名（或文件夹名称），这样就方便地达到了有序管理所有站点资源的目的 3.3 站点的建立站点的建立修改站点信息 选择主菜单【站点】/【管理站点】目录，弹出“管理站点”对话框，如图所示。单

7、击需要修改的站点名称，再单击“编辑”按钮，即可再次弹出“站点定义”对话框，然后重新进行站点设置。 3.3 站点的建立站点的建立站点视图 单击“文件”面板中的“展开/折叠”按钮（），将站点文件窗口展开为最大化。对窗口可以调整查看区域的大小，并利用该窗口更改站点视图方式。如图所示的是分别以“站点文件”视图方式和“站点地图和文件”视图方式查看站点信息。3.4站点文件的基本操作 创建和打开文档1、新建文档2、打开文档3、保存文档3.4站点文件的基本操作管理文件和文件夹 文件”面板功能十分重要，它可以用于：访问站点、服务器和本地驱动器、查看文件和文件夹、管理文件和文件夹，以及使用站点的可视化地图等工作。

8、 在“文件”面板中，可以及时处理站点文件和文件夹，如：打开文件、更改文件名；添加、移动或删除文件；在进行更改后刷新“文件”面板。对于 Dreamweaver 站点，还可以确定哪些文件（本地站点或远程站点上）在上次传输后进行了更新。 在“文件”面板中，选择一个文件或文件夹。右键单击，在弹出的快捷菜单中选择“新建文件”或“新建文件夹”选项；输入新文件或新文件夹的名称，按“Enter”键即可创建新的文件（文件夹）。 3.4站点文件的基本操作3.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页） 从“开始”按钮的弹出菜单中

9、选择Adobe Dreamweaver CS3，启动软件。 单击“欢迎”屏幕中“打开最近的项目”底部的“打开”按钮。 在“打开”对话框中选择“index1.html”文档，并确认打开，如图所示，此时窗口默认以“设计视图”方式显示文档编辑内容。3.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页）3.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页） 在Dreamweaver 中，单击“文档”工具栏中“代码视图”按钮，窗口显示如图所示。3

10、.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页）单击“拆分视图”按钮，窗口显示如图所示。 3.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页）单击“文档”工具栏中预览按钮，如图 所示，在浏览器窗口中获得网页效果。也可以按F12 浏览网页。 3.53.5边学边做（用边学边做（用 Dreamweaver CS3 Dreamweaver CS3 打开打开并浏览网页）并浏览网页） 思考与练习思考与练习1. 描述改变面板的大小、位置的操作方法。2. 简述属性面板的作用。3. 描述文件打开、存储的操作过程。4. 创建站点的基本步骤是什么？5. 简述站点视图的几种查看方式？6. 创建一个个人主页站点。演讲完毕，谢谢观看！