第2章-Dreamweaver网页制作基础详解.ppt

第2章 Dreamweaver MX 2004网页制作基础 主讲:李丽萍 Dreamweaver MX 2004网页制作基础 2.1 Dreamweaver MX 2004工作区 2.2 规划和设置站点 2.3 网页文字与图像的编辑 2.4 巴黎文化之旅—首页制作 2.5 插入超链接 2.6 网络多媒体的应用 2.1 Dreamweaver MX 2004工作区 2.1.1 选择工作区布局 Dreamweaver MX 2004提供了两种可供选择的工作区布局：设计者布局和代码编写者布局。在Windows中首次启动Dreamweaver MX 2004时，会出现一个对话框让用户选择一种工作区布局。对话框如下图： 1. 设计者工作区(建议) 2. 代码编写者工作区 3. 切换工作区 用户选择一种工作区布局 用户选择一种工作区布局 可以从中选择一种工作区布局。如果不熟悉编写代码选择“设计者”。如果想更改工作区，可以使用编辑菜单“首选参数”对话框切换到一种不同的工作区。 “编辑”→ “首选参数”→“常规” 对话框如下图： 更改工作区 2.1.2 使用Dreamweaver窗口和面板 2.1.2 使用Dreamweaver窗口和面板 “文档”窗口 “文档”窗口用于显示当前文档。可以选择下列任一视图： 2.1.2 使用Dreamweaver窗口和面板 “文档”窗口 “设计”视图，这是一个用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。 “代码”视图，这是一个用于编写和编辑 HTML、JavaScript、服务器语言代码（如Microsoft Active Server Page (ASP)或ColdFusion标记语言）以及任何其他类型代码的手工编码环境 。 利用“拆分”视图可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视图 。 2.1.2 使用Dreamweaver窗口和面板 “插入”栏 包含将各种对象（图像，表格，图层）插入文件中所用的面板 2.1.2 使用Dreamweaver窗口和面板 “属性检查器” 用于查看和更改所选对象或文本的各种属性。 2.1.2 使用Dreamweaver窗口和面板 “面板组” 小技巧 如何设置默认的编码方式 选择[编辑][首选参数]，打开[首选参数]对话框 2.1.2 使用Dreamweaver窗口和面板 状态栏——“文档”窗口底部的状态栏提供与正创建的文档有关的其他信息。 标签选择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以选择该标签及其全部内容。单击body以选择文档的整个正文。 “窗口大小”弹出式菜单（仅当显示“设计”视图时可见）用来将“文档”窗口的大小调整到预定义或自定义的尺寸。 最右侧是页面（包括全部相关的文件，如图像和其他媒体文件）的文档大小和估计下载时间。 2.1.2 使用Dreamweaver窗口和面板 “历史记录”面板 打开“历史记录”面板【shift+F10】 撤消最后一个步骤 一次撤消多个步骤 设置“历史记录”面板保留和显示的步骤数 删除当前文档的历史记录列表 2.2 规划和设置站点 为了达到最佳效果，在创建任何WEB站点页面之前应该对站点进行设计与规划。 2.2.1 站点规划和设计 1. 确定目标 2. 选择目标用户 3. 创建具有浏览器兼容性的站点 4. 组织站点结构 5. 创建设计外观 6. 设计导航方案 7. 规划和收集资源 2.2.2 设置Dreamweaver站点 Dreamweaver 站点是用于组织所有与Web站点关联的文档的一种方法。可以将它看作一个项目。需要为所开发的每个Web站点设置一个站点。通过在站点中组织文件，可以与FTP一起利用Dreamweaver将站点上传到Web服务器、自动跟踪和维护链接、管理文件以及共享文件。除非定义站点，否则不能充分利用Dreamweaver的功能。 设置Dreamweaver站点的方法： 方法一：使用“站点定义”向导，它可以逐步完成设置过程； 方法二：使用“站点定义”对话框的“高级”设置，它可以根据需要分别设置本地、远程和测试文件夹。 实例演示 新建一个网站—（1） 选择[站点][管理站点]对话框。选择[新建][站点]进入定义网站的流程 新建一个网站--（2） 进入[基本]选项卡，使用网站定义向导，可以轻松完成所有设置。在[站点定义]对话框的[编辑文件]中输入想要的网站名称。在此范例中，输入网站名称为“巴黎文化之旅”，单击[下一步]按钮。 新建一个网站--（3） 新建一个网站--（4） 在[站点定义]对话框的[编辑文件，第2部分]，请选择[否，我不想使用服务器技术]，然