《DreamweaverCS5网页设计》选读.ppt

电子教学参考资料包 Dreamweaver CS5网页设计 目　录 第1章 Dreamweaver CS5 使用基础 1.1 认识Dreamweaver CS5工作区 1.1.1 启动Dreamweaver CS5 启动Dreamweaver CS5：单击“开始”，指向“所有程序”，然后单击“Adobe Dreamweaver CS5”。 在“开始”菜单或任务栏中为这个软件添加一个快捷方式。 1.1.2 工作区布局概述 工作区中主要包括以下元素。 欢迎屏幕。 应用程序栏。 文档工具栏。 标准工具栏。 编码工具栏。 样式呈现工具栏 文档窗口 属性检查器 标签选择器 面板组 插入面板 文件面板 1.1 认识Dreamweaver CS5工作区 1.1.3 文档窗口 文档窗口用于显示当前文档。在使用文档窗口时，根据设计需要可选择下列视图。 设计视图 代码视图 拆分代码视图 代码和设计视图 实时视图 实时代码视图 相关文件工具栏 在文档窗口中的不同视图之间切换 如果一次打开了多个文档，则可以采用层叠方式或平铺方式放置这些文档。 1.1 认识Dreamweaver CS5工作区 1.1.4 工具栏 文档工具栏 标准工具栏 样式呈现工具栏 浏览器导航工具栏 编码工具栏 状态栏 1.1 认识Dreamweaver CS5工作区 1.1.5 检查器与面板 文件面板 插入面板 属性检查器 标签检查器 CSS样式面板 1.2 设置Dreamweaver站点 1.2.1 Dreamweaver工作流程 规划和设置站点 组织和管理站点文件 设计网页布局 向页面添加内容 通过手动编码创建页面 针对动态内容设置Web应用程序 创建动态页 测试和发布 1.2 设置Dreamweaver站点 1.2.2 理解Dreamweaver站点 在Dreamweaver中，术语“站点”是指属于某个Web站点的文档的本地或远程存储位置。使用Dreamweaver站点可以组织和管理所有Web文档，并将站点上传到Web服务器，跟踪和维护链接以及管理和共享文件。为了充分利用Dreamweaver的功能，就应当定义一个站点。 若要定义Dreamweaver站点，只需设置一个本地文件夹。若要向Web服务器传输文件或开发Web应用程序，还必须添加远程站点和测试服务器信息。 Dreamweaver站点由以下3个文件夹组成。 本地根文件夹 远程文件夹 测试服务器文件夹 1.2 设置Dreamweaver站点 1.2.3 设置Dreamweaver站点 选择“站点”→“新建站点”。 选择“站点”类别，然后在“站点名称”框中键入一个名称。 在“本地站点文件夹”框中键入本地根文件夹的名称。 设置站点的其他选项。 1.3 创建和管理站点文件 1.3.1 创建新文档 选择“文件”→“新建”。 选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。 如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。 从“文档类型”下拉列表中选择文档类型。 如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的CSS选择一个位置。 创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。 单击“创建”按钮。 1.3 创建和管理站点文件 1.3.1 创建新文档 选择“文件”→“新建”。 选择“空白页”类别，然后从“页面类型”列选择要创建的页面类型。 如果希望新页面包含CSS布局，可从“布局”列中选择一个预设计的CSS布局；否则，可选择“无”。 从“文档类型”下拉列表中选择文档类型。 如果已在“布局”列中选择了一种CSS布局，则从“布局CSS位置”下拉列表中为布局的CSS选择一个位置。 创建页面时，还可以将CSS样式表附加到新页面（与CSS布局无关）。 单击“创建”按钮。 1.3 创建和管理站点文件 1.3.2 保存文档 保存文档的步骤 选择“文件”→“保存”，或单击文档工具栏上的“保存”按钮，或按Ctrl+S。 浏览到要用来保存文件的文件夹。 在“文件名”框中，键入文件名。 单击“保存”按钮。 保存当前打开的所有文档。 回复到文档上次保存的版本。 1.3 创建和管理站点文件 1.3.3 打开现有文档 打开文档的步骤 选择“文件”→“打开”。 找到要打开的文件并选中该文件。 单击“打开”按钮。 打开最近打开过的文件。 1.3 创建和管理站点文件 1.3.4 管理文件和文件夹 打开文件 创建文件或文件夹 删除文件或文件夹 移动或复制文件或文件夹 刷新文件面板 第2章 文本与表格 2.1 HTML语言基础 2.1.1 定义HTML元素 一个HTML文档包