单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/7/31,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/7/31,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,2021/7/31,#,电子商务网页设计,教育部中等职业教育专业技能课立项教材,中等职业教育实战型电子商务规划教材,主编 袁海波张勋若,安装并运行,Dreamweaver 2020,1,项目三,2,Dreamweaver 2020,的工作页面,电子商务网页编辑软件,Dreamweaver 2020,安装并运行,Dreamweaver2020,1,任务分析,相关知识,任务实施,知识链接,任务分析：,安装,Dreamweaver2020,并运行该软件,任务分析,相关知识,2,相关知识：,目前制作网页中比较广泛使用的,Dreamweaver,的最新版本是,2020,，,Dreamweaver,是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对,HTML,、,CSS,、,JAVA,等内容的支持，设计师和程序员几乎可以在任何地方快速制作和进行网站建设。,Adobe Dreamweaver,使用所见即所得的接口，亦有,HTML,编辑的功能。借助于经过简化的智能编码引擎，人们可轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解,HTML,、,CSS,和其他,Web,标准。使用视觉辅助功能，可减少错误并提高网站开发速度。,步骤四,步骤三,步骤二,步骤一,选择“新建”，进入,Dreamweaver,初始界面,进入,Dreamweaver,初始界面,运行,Dreamweaver,，进行简单选择之后完成导向设置,在官网或是百度搜索,Dreamweaver,下载并运行安装文件,任务实施,3,任务实施,3,Dreamweaver2020,安装页面,步骤一,1,在官网或是百度搜索,Dreamweaver,下载并运行安装文件。,官网链接：,https:/ 安装完成页面,步骤一,1,依照提示激活用户、输入相关信息后，进入安装进度界面。等待一段时间后，出现安装完成界面。点击“关闭”，即安装成功，并能在“开始”菜单中找到,Dreamweaver,。,任务实施,3,初次使用向导,步骤二,2,在桌面上依次点击“开始”“,AdobeDreamweaver2020,”，运行,Dreamweaver 2020,，会出现初次使用向导，进行简单选择之后完成向导设置。,知识链接,4,此处是,Dreamweaver2020,可选择作为默认编辑器的文件类型。例如，动态网页文件扩展名有,asp,、,jsp,、,aspx,和,php,；,JavaScript,脚本扩展名为,js,；,CSS,样式表文件扩展名为,CSS,等。,小知识,任务实施,3,Dreamweaver 2020,初始界面图,步骤三,3,进入,Dreamweaver 2020,初始界面,任务实施,3,Dreamweaver2020,工作界面,步骤四,4,选择菜单栏的“文件”“新建”，在打开的对话框中，文档类型为“,HT-ML,“，单击“创建”，即可进,Dreamweaver2020,的工作界面。,Dreamweaver 2020,的工作页面,2,任务分析,相关知识,任务实施,1,任务分析,任务分析：,布 置,Dreamweaver2020,软 件 的 窗 口 布 局：文 档 区 显 示 黑 色 网 格，把 右 侧 浮 动 面 板 的 插 入面 板 拖 到 文 档 编 辑 区，右 侧 浮 动 面 板 组 区 显 示,CSS,面 板 和 文 件 面 板。,Dreamweaver2020,的窗口布局,5,4,3,2,1,Dreamweaver,2020,的文档编辑区,Dreamweaver2020,中的浮动面板,Dreamweaver2020,的插入菜单栏,Dreamweaver2020,中的属性面板,Dreamweaver2020,的菜单栏,相关知识,2,6,Dreamweaver2020,自定义工具栏,相关知识,2,Dreamweaver 2020,菜单栏,知识点一,1,Dreamweaver2020,的 菜 单 栏 位 于 窗 口 的 最 上 端，如下图所示。,Dreamweaver2020,几 乎 所 有 的 操 作 在 菜 单 栏 的 菜 单 选 项 中 都 能 找 到。,相关知识,2,Dreamweaver2020,的 插 入 菜 单 栏,知识点二,2,Dreamweaver2020,的 插 入 菜 单 栏 默 认 布 置 在 浮 动 面 板 中。使 用,Dreamweaver2020,插入 菜 单 栏 中 的 选 项，可 以 在 编 辑 区 中 插 入 相 应 的 各 种 元 素，如 超 链 接、图 像、表 格、媒体、日 期 等。,Dreamweaver2020,的 插 入 菜 单 栏 如 下图所示。,相关知识,2,Dreamweaver2020,的文档编辑区,知识点三,3,Dreamweaver2020,的 文 档 编 辑 区 是 制 作 网 页 的 区 域，如 图 所 示，网 页 元 素 可 以通 过 各 种 方 式 插 入 文 档 编 辑 区 中。,在 文 档 编 辑 区 的 左 上 角 显 示 网 页 的 文 档 名 称，默 认 是,Unitled1,，如 果 名 称 后 有“*”，表 明 该 网 页 文 件 发 生 了 修 改 却 没 有 保 存，保 存 后“*”会 消 失。,相关知识,2,代 码 视 图 模 式,拆 分 视 图 模 式,知识点三,3,文 档 工 作 栏 中 有 三 个 按 钮，依 次 是“代 码”“拆 分”“设 计”，这 三 个 按 钮 分 别 对 应 着文 档 编 辑 区 的 三 种 工 作 模 式。在 设 计 视 图 模 式 下，可 以 实 现 可 视 化 的 设 计 方 式；在 代 码 视图 模 式下，可 以 通 过 编 写,HTML,代 码 的 方 式 制 作 网 页；在 拆 分 视 图 模 式下，可 以 同 时 使 用 代 码 视 图 和 设 计 视 图。默 认 情 况 下 是 设 计 视 图 模 式。,2,相关知识,文 档 编 辑 区 的 下 端 是 状 态 栏，状 态 栏 左 侧 为 标 签 选 择 器。通 过 标 签 选 择器 能 够 方 便 地 选 中 文 档 编 辑 区 的 内 容。例 如，编 辑 区 内 有 一 个 表 格，光 标 定 位 到 某 行 里，单 击 标 签 选 择 器 中 的,标 签，便 能 选 中 表 格 中 的 单 元 格。,知识点三,3,标签选择器,相关知识,2,状 态 栏 右 侧 的 按 钮,知识点三,3,状 态 栏 右 侧 的 按 钮 依 次 是 代 码 错 误 状 态、文 件 类 型、显 示 大 小、插 入,/,改 写 状 态、光标 所 在 代 码 行、列 信 息、预 览 按 钮。预 览 按 钮 可 用 来 设 置 浏 览 器 的 信息，单 击 后 弹 出 的 浏 览 器 信 息 菜 单，在 菜 单 中 可 以 选 择 用 何 种 浏 览 器。,浏 览 器 信 息 菜 单,相关知识,2,知识点三,3,单 击 菜 单 中 的“编 辑 列 表”项，弹 出 首 选 项 对 话 框，在 该 对 话 框 中 可 以通 过“”和“”来 添 加 浏 览 器 类 型，并 能 定 义 主 浏 览 器 与 次 浏 览 器。,首 选 项 对 话 框,相关知识,2,属 性 面 板,知识点四,4,在 文 档 编 辑 区 的 下 方 有 一 个 属 性 面 板，当 选 中 文 档 编 辑 区 中 的 某 个 网 页 元 素 时，通 过 属 性 面 板 可 以 定 义 该 元 素 的 属 性。属 性 面 板 与 文 档 和 文 档 窗 口 之 间 的 按 钮 用 于 关闭 属 性 面 板，打 开 属 性 面 板 要 通 过 菜 单 栏 中 的“窗 口”“属 性”选 项 打 开。不 同 的 网页 元 素 对 应 的 属 性 面 板 也 不 同，但 在 使 用 属 性 面 板 之 前，都 要 保 证 网 页 元 素 处 于 选 中 状态，默 认 状 态 下 属 性 面 板。通 过 单 击 属 性 面 板 右 下 角 的 按 钮 可 以 收 起 属 性 面 板。,相关知识,2,知识点五,5,在 整 个 工 作 界 面 的 右 侧 有 多 个 浮 动 面 板，称 为 浮 动 面 板 组 分 别 对 应 着 不 同 的 功 能。通 过“窗 口”菜 单 栏 可 以 选 择 显 示 或 隐 藏 这 些 浮 动 面 板。用 鼠 标 按 住 面 板 的 标 题，可 以 将 面 板 拖 动 到 适 合 的 位 置。,浮动面板组,在 工 作 界 面 的 左 侧 有 一 个 新 增 加 一 个 浮 动 面 板,自 定 义 工 具 栏，分 别 对 应 有“打 开 文 档”“文 件 管 理”“自 定 义 工 作 具 栏”三 个 选 项。,任务分析,自定义工具栏,知识点六,6,任务实施,4,（）打 开,Dreamweaver2020,软 件。,（）选 择“查 看”菜 单 栏 中 的“设 计 视 图 选 项”“网 格 设 置”“显 示 网 格”选 项，文 档 区 显 示 绿 色 网 格。,（）选 择“窗 口”菜 单 中 的“插 入”，在 右 边 的 浮 动 面 板 中 找 到 插 入 面 板 的 标 题，按 住 鼠 标 左 键 拖 到 文 档 编 辑 区。,（）分 别 选 择“窗 口”菜 单 中 的“文 件”“,CSS,设 计 器”“属 性”等 选 项。,任务实施,任务实施,4,本 项 目 介 绍 了,Dreamweaver2020,的 安 装 与 运 行，讲 述 了 该 软 件 工 作 界 面 的 结 构 及 各,个 部 分 所 能 完 成 的 基 本 功 能，并 完 成 了 指 定 格 式 工 作 界 面 的 制 定。,经 验 交 流：,同 学 们 在 上 机 实 践 时，肯 定 会 遇 到 各 种 问 题，将 它 们 记 录 下 来，与 其 他 同 学 交 流 一 下 吧。,项目总结,1,Dreamweaver2020,是 一 款 集 网 页 制 作 与 网 站 管 理 于 一 体 的 网 页 制 作 软 件 编 辑 器。它 是 由（）公 司 推 出 的。,Macromedia,Adobe,Microsoft,Autodesk,01,下 列 视 图 模 式 中，所 见 即 所 得 的 视 图 模 式 是（）。,代 码 视 图,.,拆 分 视 图 设 计 视 图 其 他,03,Dreamweaver2020,中实现可视 化 设 计 方 式 的 视 图 模 式 是,(),。,代 码 视 图,.,拆 分 视 图 设 计 视 图 其 他,02,任务实施,4,选择题,1,1.,将,Dreamweaver2020,软 件 安 装 到 电 脑 上，使 用 默 认 保 存路 径。,.,打 开,Dreamweaver2020,软 件，熟 悉 插 入 面 板 中 各 种 菜 单 的 功 能。,任务实施,4,操作题,2,