《电子商务网页设计（第二版）》 课件项目三.pptx

1、安装并运行Dreamweaver 20201项目三2Dreamweaver 2020 的工作页面电子商务网页编辑软件Dreamweaver 20201 任务分析 相关知识 任务实施 知识链接 任务分析：安装Dreamweaver2020并运行该软件任务分析相关知识2相关知识：目前制作网页中比较广泛使用的 Dreamweaver的最新版本是2020，Dreamweaver是集网页制作和管理网站于一身的所见即所得网页代码编辑器。利用对 HTML、CSS、JAVA等内容的支持，设计师和程序员几乎可以在任何地方快速制作和进行网站建设。Adobe Dreamweaver使用所见即所得的接口，亦有HTML

2、编辑的功能。借助于经过简化的智能编码引擎，人们可轻松地创建、编码和管理动态网站。访问代码提示，即可快速了解HTML、CSS和其他 Web标准。使用视觉辅助功能，可减少错误并提高网站开发速度。步骤四步骤三步骤二步骤一 选择“新建”，进入Dreamweaver初始界面 进入Dreamweaver初始界面 运行Dreamweaver，进行简单选择之后完成导向设置 在官网或是百度搜索Dreamweaver下载并运行安装文件任务实施3任务实施3Dreamweaver2020安装页面步骤一1在官网或是百度搜索Dreamweaver下载并运行安装文件。官网链接：https:/ 安装进度页面 安装完成页面步骤

3、一1依照提示激活用户、输入相关信息后，进入安装进度界面。等待一段时间后，出现安装完成界面。点击“关闭”，即安装成功，并能在“开始”菜单中找到Dreamweaver。任务实施3 初次使用向导步骤二2在桌面上依次点击“开始”“AdobeDreamweaver2020”，运行 Dreamweaver 2020，会出现初次使用向导，进行简单选择之后完成向导设置。知识链接4此处是Dreamweaver2020可选择作为默认编辑器的文件类型。例如，动态网页文件扩展名有asp、jsp、aspx和php；JavaScript脚本扩展名为js；CSS样式表文件扩展名为CSS等。小知识任务实施3 Dreamwea

4、ver 2020初始界面图步骤三3进入 Dreamweaver 2020初始界面任务实施3Dreamweaver2020 工作界面步骤四4选择菜单栏的“文件”“新建”，在打开的对话框中，文档类型为“HT-ML“，单击“创建”，即可进Dreamweaver2020的工作界面。2 任务分析 相关知识 任务实施1任务分析任务分析：布 置 Dreamweaver2020软 件 的 窗 口 布 局：文 档 区 显 示 黑 色 网 格，把 右 侧 浮 动 面 板 的 插 入面 板 拖 到 文 档 编 辑 区，右 侧 浮 动 面 板 组 区 显 示 CSS 面 板 和 文 件 面 板。Dreamweaver

5、2020的窗口布局54321Dreamweaver2020的文档编辑区Dreamweaver2020中的浮动面板Dreamweaver2020的插入菜单栏Dreamweaver2020中的属性面板Dreamweaver2020的菜单栏相关知识26Dreamweaver2020自定义工具栏相关知识2 Dreamweaver 2020菜单栏知识点一1Dreamweaver2020的 菜 单 栏 位 于 窗 口 的 最 上 端，如下图所示。Dreamweaver2020几 乎 所 有 的 操 作 在 菜 单 栏 的 菜 单 选 项 中 都 能 找 到。相关知识2 Dreamweaver2020的 插

6、 入 菜 单 栏知识点二2Dreamweaver2020的 插 入 菜 单 栏 默 认 布 置 在 浮 动 面 板 中。使 用 Dreamweaver2020插入 菜 单 栏 中 的 选 项，可 以 在 编 辑 区 中 插 入 相 应 的 各 种 元 素，如 超 链 接、图 像、表 格、媒体、日 期 等。Dreamweaver2020的 插 入 菜 单 栏 如 下图所示。相关知识2Dreamweaver2020的文档编辑区知识点三3Dreamweaver2020的 文 档 编 辑 区 是 制 作 网 页 的 区 域，如 图 所 示，网 页 元 素 可 以通 过 各 种 方 式 插 入 文 档

7、编 辑 区 中。在 文 档 编 辑 区 的 左 上 角 显 示 网 页 的 文 档 名 称，默 认 是 Unitled1，如 果 名 称 后 有“*”，表 明 该 网 页 文 件 发 生 了 修 改 却 没 有 保 存，保 存 后“*”会 消 失。相关知识2代 码 视 图 模 式 拆 分 视 图 模 式知识点三3文 档 工 作 栏 中 有 三 个 按 钮，依 次 是“代 码”“拆 分”“设 计”，这 三 个 按 钮 分 别 对 应 着文 档 编 辑 区 的 三 种 工 作 模 式。在 设 计 视 图 模 式 下，可 以 实 现 可 视 化 的 设 计 方 式；在 代 码 视图 模 式下，可 以

8、 通 过 编 写 HTML代 码 的 方 式 制 作 网 页；在 拆 分 视 图 模 式下，可 以 同 时 使 用 代 码 视 图 和 设 计 视 图。默 认 情 况 下 是 设 计 视 图 模 式。2相关知识文 档 编 辑 区 的 下 端 是 状 态 栏，状 态 栏 左 侧 为 标 签 选 择 器。通 过 标 签 选 择器 能 够 方 便 地 选 中 文 档 编 辑 区 的 内 容。例 如，编 辑 区 内 有 一 个 表 格，光 标 定 位 到 某 行 里，单 击 标 签 选 择 器 中 的 标 签，便 能 选 中 表 格 中 的 单 元 格。知识点三3标签选择器相关知识2状 态 栏 右 侧

9、 的 按 钮知识点三3状 态 栏 右 侧 的 按 钮 依 次 是 代 码 错 误 状 态、文 件 类 型、显 示 大 小、插 入/改 写 状 态、光标 所 在 代 码 行、列 信 息、预 览 按 钮。预 览 按 钮 可 用 来 设 置 浏 览 器 的 信息，单 击 后 弹 出 的 浏 览 器 信 息 菜 单，在 菜 单 中 可 以 选 择 用 何 种 浏 览 器。浏 览 器 信 息 菜 单相关知识2知识点三3单 击 菜 单 中 的“编 辑 列 表”项，弹 出 首 选 项 对 话 框，在 该 对 话 框 中 可 以通 过“”和“”来 添 加 浏 览 器 类 型，并 能 定 义 主 浏 览 器 与

10、 次 浏 览 器。首 选 项 对 话 框相关知识2属 性 面 板知识点四4在 文 档 编 辑 区 的 下 方 有 一 个 属 性 面 板，当 选 中 文 档 编 辑 区 中 的 某 个 网 页 元 素 时，通 过 属 性 面 板 可 以 定 义 该 元 素 的 属 性。属 性 面 板 与 文 档 和 文 档 窗 口 之 间 的 按 钮 用 于 关闭 属 性 面 板，打 开 属 性 面 板 要 通 过 菜 单 栏 中 的“窗 口”“属 性”选 项 打 开。不 同 的 网页 元 素 对 应 的 属 性 面 板 也 不 同，但 在 使 用 属 性 面 板 之 前，都 要 保 证 网 页 元 素 处

11、于 选 中 状态，默 认 状 态 下 属 性 面 板。通 过 单 击 属 性 面 板 右 下 角 的 按 钮 可 以 收 起 属 性 面 板。相关知识2知识点五5在 整 个 工 作 界 面 的 右 侧 有 多 个 浮 动 面 板，称 为 浮 动 面 板 组 分 别 对 应 着 不 同 的 功 能。通 过“窗 口”菜 单 栏 可 以 选 择 显 示 或 隐 藏 这 些 浮 动 面 板。用 鼠 标 按 住 面 板 的 标 题，可 以 将 面 板 拖 动 到 适 合 的 位 置。浮动面板组在 工 作 界 面 的 左 侧 有 一 个 新 增 加 一 个 浮 动 面 板 自 定 义 工 具 栏，分 别

12、对 应 有“打 开 文 档”“文 件 管 理”“自 定 义 工 作 具 栏”三 个 选 项。任务分析自定义工具栏知识点六6任务实施4（）打 开 Dreamweaver2020软 件。（）选 择“查 看”菜 单 栏 中 的“设 计 视 图 选 项”“网 格 设 置”“显 示 网 格”选 项，文 档 区 显 示 绿 色 网 格。（）选 择“窗 口”菜 单 中 的“插 入”，在 右 边 的 浮 动 面 板 中 找 到 插 入 面 板 的 标 题，按 住 鼠 标 左 键 拖 到 文 档 编 辑 区。（）分 别 选 择“窗 口”菜 单 中 的“文 件”“CSS设 计 器”“属 性”等 选 项。任务实施任

13、务实施4本 项 目 介 绍 了 Dreamweaver2020的 安 装 与 运 行，讲 述 了 该 软 件 工 作 界 面 的 结 构 及 各个 部 分 所 能 完 成 的 基 本 功 能，并 完 成 了 指 定 格 式 工 作 界 面 的 制 定。经 验 交 流：同 学 们 在 上 机 实 践 时，肯 定 会 遇 到 各 种 问 题，将 它 们 记 录 下 来，与 其 他 同 学 交 流 一 下 吧。项目总结1D re a m w e av e r 2 0 2 0 是是 一一 款款 集集 网网 页页 制制 作作 与与 网网 站站 管管 理理 于于 一一 体体 的的 网网 页页 制制 作作

14、软软 件件 编编 辑辑 器器 。它。它 是是 由由 （）公公 司司 推推 出出 的的 。M a c ro m e d i a A d o b e M i c ro s o f t A u t o d e s k01下下 列列 视视 图图 模模 式式 中中 ，所所 见见 即即 所所 得得 的的 视视 图图 模模 式式 是是 （）。）。代 代 码码 视视 图图 .拆拆 分分 视视 图图 设 设 计计 视视 图图 其 其 他他03D re a m w e av e r 2 0 2 0 中 实 现 可 视中 实 现 可 视 化化 设设 计计 方方 式式 的的 视视 图图 模模 式式 是是()。代 代 码码 视视 图图 .拆拆 分分 视视 图图 设 设 计计 视视 图图 其 其 他他02任务实施4选择题11.将 Dreamweaver2020软 件 安 装 到 电 脑 上，使 用 默 认 保 存路 径。.打 开 Dreamweaver2020 软 件，熟 悉 插 入 面 板 中 各 种 菜 单 的 功 能。任务实施4操作题2