电子商务网页设计(第二版)-课件10.pptx

1、教育部中等职业教育专业技能课立项教材中等职业教育实战型电子商务规划教材主编 袁海波张勋若创建站点和管理本地站点1创建电子商务网站主页2使用表格布局电子商务网页3使用超链接创建链接页面4 网页元素的编辑项目四1 任务分析 相关知识 任务实施 任务拓展任务分析：创 建 一 个 名 为“我 的 淘 宝 网 站 点”的 本 地 站 点，并 管 理 该 站 点。任务分析相关知识1.站点2.常用站点3.网站结构课题背景及内容BACKGROUND AND ISSUES相关知识2相关知识2站 点 是 一 组 具 有 共 享 属 性 的 链 接 文 档 和 资 源，在 Dreamweaver2020中，站 点

2、通 常 指 本 地 或 远 程 的 某 个 存 储 位 置。Dreamweaver2020 站 点 提 供 了 一 种 方 法，可 以 组 织 和 管 理站 点 中 所 有 的 Web文 档。在 设 计 制 作 网 页 之 前，首 先 要 创 建 一 个 本 地 站 点，将 所 有 的 网页 文 件 及 用 到 的 素 材 文 件（如 图 像、动 画、视 频 等）存 放 到 该 站 点 下，以 便 对 这 些 文 件 进 行 管 理。小知识本地站点01测试站点03远程站点02Dreamweaver2020提 供 了 三 种 常 用 的 站 点：本 地 站 点、远 程 站 点 和 测 试 站 点

3、。本 地 站 点 是 指 存 放 在 本 地 计 算 机 硬 盘 上 的 站 点，一 般 是 将 本 地 计 算 机 作 为 服 务 器 进 行测 试 时 使 用 的 站 点。远 程 站 点 是 指 存 放 在 远 程 服 务 器 上 的 网 站 站 点，也 就 是 网 站 文 件 通 过 本 地 站 点 的 测 试后，上 传 到 远 程 服 务 器 上 的 站 点 位 置。测 试 站 点 是 测 试 动 态 网 页 的 站 点。参考文献及总结REFERENCES AND SUMMARY相关知识2建议1建议2建议3建议4网 站 结 构 是 指 建 立 网 站 时 所 创 建 的 文 件 目 录

4、 及 所 包 含 的 文 件 所 表现 出来 的 结 构，这 种多 层 级 目 录 结 构 也 称 树 形 结 构。优 化 站 点 目 录 结 构 的 目 的 不 在 于 提 升 页 面 视 觉 效 果，而 在于 对 站 点 本 身 的 上 传 和 维 护、内 容 的 扩 充，特 别 是 对 于 商 业 网 站 而 言，在 建 站 之 初 对 目 录结 构 的 考 虑 会 直 接 影 响 网 站 的 实 用 性。以 下 就 创 建 网 站 结 构 及 文 件 目 录 提 出 一 些 建 议：课题背景及内容BACKGROUND AND ISSUES相关知识2不 要 将 所 有 文 件 都 存 放

5、 在 根 目 录 下。按 不 同 网 站 栏 目 分 别 建 立 子 文 件 夹。在 每 个 主 目 录 下 建 立 独 立 的 images目 录。目 录 的 层 次 不 宜 太 多。任务实施3步骤一1在 本 地 磁 盘 盘 创 建 一 个 名 为“myweb”的 文 件 夹，并 在“myweb”文 件 夹 中 新 建 两 个 子 文 件 夹，分 别 命 名 为“images”和“pages”。任务实施3站 点 设 置 对 象 对 话 框步骤二2在 Dreamweaver2020中 选 择 菜 单 栏 中 的“站 点”“新 建 站 点”，打 开 站 点 设 置 对 象 对 话 框，在 该 对

6、 话 框 中 的“站 点 名 称”文 本 框 中 输 入 站 点 的 名 称“我 的 淘 宝 站 点”。点 击 本 地 站 点 文 件 夹 对 话 框 右 边 的 图 标，在 弹 出 的“站 点 设 置 对 象”对 话 框 中，选 择 盘 下 面 的“”文 件 夹，显 示 存 储 位 置 为“:”。任务实施3服 务 器 设 置 页 面步骤三3单 击 左 边 导 航 栏“服 务 器”项 目，打 开 服 务 器 设 置 页 面。如 果 没有 本 地 也 可 跳 过 服 务 器 的 设 置 完 成 第 步 后 单 击“保 存”，完 成 新 建 站 点 操 作）。任务实施3服 务 器 设 置步骤四4在

7、 服 务 器 设 置 页 面 中 单 击“”，增 加 服 务 器，在 弹 出 的 对 话 框 中 设 置 服 务 器 名 称 为“本 地 服 务 器”、连 接 方 法 下 拉 列 表 中 选 择“本 地 网 络”、服 务 器 文 件 夹 选 择 的目 录（系 统 默 认 目 录 为:）、输 入“:/”。单 击“保 存”按 钮，完 成 Dreamweaver新 建 站 点。任务实施3站点本地试图步骤五5Dreamweaver2020会 自 动 默 认 生 成 一 个 站 点，在 Dreamweaver2020文 件 夹 面 板 中 可 查 看 新 建 的 站 点 信 息，如 站 点 名 称、站

8、点 结 构、站 点 所 在 位 置 等。任务实施3此 电 脑 窗 口步骤六6 Dreamweaver2020这 时 还 不 能 直 接 写 目 录 中 的 文 件，还 要 设 置 权 限。打 开“此 电 脑”“计 算 机”选 项 下 的 系 统 组 中 的“管 理”项。任务实施3计算机管理窗口步骤七7 在 弹 出 的 计 算 机 管 理 窗 口 左 边 的 导 航 栏 中 选 择“服 务 和 应 用 程 序”“Internetinformationservices（IIS）管 理 器”，在 中 间 的“连 接”导 航 栏 中 选 中 服 务 器 后 双 击，再 点 击“网 站”“Default

9、website”。任务实施3权限设置步骤八8在“Defaultwebsite”上 单 击 右 键，弹 出 权 限 设 置 对 话 框，单 击“编 辑 权 限”，打 开 wwwroot属 性 对 话 框。在 wwwroot属 性 对 话 框 中 选 择“安 全”页，单 击“编 辑”按 钮 wwwroot 属 性 对 话 框步骤九9任务实施3步骤十10 在 弹 出 的 wwwrrot的 权 限 对 话 框 中 选 择“组 或 用 户 名”列 表 中 的“（本 机 名）”，再 勾 选“的 权 限”列 表 中 的“完 全 控 制”后 面 的“允 许”项，单 击“确定”完 成 权 限 设 置。最 后 依

10、 次 关 闭 设 置 的 对 话 框 与 窗 口。wwwroot 权限对话框4任务拓展管理站点：对 于 创 建 好 的 站 点，要 对 其 进 行 管 理，可 以 选 择 菜 单 栏 中 的“站 点”“管 理 站 点”，打 开 管 理 站 点 对 话 框，通 过 该 对 话 框 可 以 完 成 对 已 有 站 点 的 编辑、复 制、删 除 等 操 作，也 可 以 新 建 站 点。管 理 站 点 对 话 框2 任务分析 相关知识 任务实施根 据 任 务 一 创 建 的 站 点，使 用 Dreamweaver2020创 建 一 个 电 子 商 务 网 站 主 页index.html。该 网 页 比

11、 较 简 单，旨 在 掌 握 文 档 的 创 建、编 辑、保 存、预 览、打 开 和 关 闭 等 基 本 操 作，以 及 页 面 属 性 的 设 置 等。我 的 淘 宝 网 站 index.html任务分析12相关知识保存文档保存文档打开文档打开文档关闭文档关闭文档预览页面效果预览页面效果创建文档创建文档相关知识2创建文档1打 开 Dreamweaver2020软 件，选 择“文 件”“新 建”菜 单 项，打 开 新 建 文 档 对 话 框，选 择 文 档 类 型 栏 中 的“HTML”，单 击“创 建”即 可 新 建 一 个 空 白 文 档。网 站 是 由 若 干 不 同 的 网 页 文 档

12、 组 合 而 成 的，Dreamweaver2020可 以 为 各 种 网 页 的 设 计 和 开 发 提 供 灵 活 快 捷 的 条 件。除 了 常 用 的 HTML 文 档 外，它 还 支 持 创 建 和 打 开 各 种 基 于 文 本 的 文 档，如 CSS、Javascript、ASP、JSP和 CFML等。相关知识2保存文档保存文档2网 页 文 件 编 辑 完 毕 后，需 要 对 该 文 档 进 行 保 存，单 击“文 件”“保 存”菜 单 项，打 开 另 存 为 对 话 框，选 择 相 对 应 的 保 存 路 径，在“文 件 名”文 本 框 中 输 入 文 件 的 名 称，在“保

13、存 类 型”下 拉 列 表 中 选 择 要 保 存 的 文 件 类 型，最 后 单 击“保 存”。相关知识2打开文档打开文档3要 打 开 已 有 的 文 档，只 需 要 单 击“文 件”“打 开”菜 单 项，即 可 打 开 选 择 文 档 的 对 话 框，选 择 要 打 开 的 目 录，双 击 打 开 文 件。相关知识2关闭文档4文 档 编 辑 或 者 修 改 完 毕 后，可 以 单 击 编 辑 界 面 上 方 的 关 闭 图 标 关 闭 当 前 文 档，也 可 以 选 择“文 件”“关 闭”菜 单 项 关 闭 当 前 文 档。如 果 要 关 闭 所 有 文 档，可 以 选 择“文 件”“全

14、部 关 闭”菜 单 项 关 闭 所 有 文 件。编 辑 页 面 后，可 以 单 击 文 档 上 方 的 按 钮，选 择 适 当 的 浏 览 器 浏 览，也 可 以 按 键 浏 览 网 页 效 果。页面预览效果5打 开 Dreamweaver2020软 件，新 建 一 个 空 白 页，在 标 题 栏 中 输 入“我 的 淘 宝 网 站”，保 存 文 件 名 为“”，并 保 存 到 任 务 一 所 创 建 的“我 的 淘 宝 网 站 点”的 根 目录 ：下。任务实施3步骤一1任务实施3步骤二2在 文 档 编 辑 区 输 入“您 好！欢 迎 光 临 我 的 淘 宝 网 站！”。输入文本任务实施3步骤

15、三3单 击 属 性 面 板 中 的“页 面 属 性”，在 弹 出 的 页 面 属 性 对 话 框 中，选 择 分 类 的 标 题（CSS），标 题 字 体 为 华 文 新 魏，标 题 的 大 小 为 36PX，颜 色 为页 面 属 性 对 话 框任务实施3步骤四4选 取 文 本“您 好！欢 迎 光 临 我 的 淘 宝 网 站！”，在 属 性 面 板 里 设 置 格 式 为 标 题。文 本 属 性 设 置任务实施3步骤五5保 存 网 页。我 的 淘 宝 网 站 index.html显 示 效 果步骤六6按 键 预 览。效 果 如 右 图 所 示。3 任务分析 相关知识 任务实施课题背景及内容BA

16、CKGROUND AND ISSUES任务分析1根 据 任 务 一，制 作“我 的 淘 宝 网 站”主 页。网 页 标 题 栏 显 示“我 的 淘 宝 网 站”，网 页 背 景 色 设 置 为 粉 红 色，在 网 页 中 有 文 本、图 像、Flash 动 画 等 元 素。“我 的 淘 宝 网 站”主 页课题背景及内容BACKGROUND AND ISSUES相关知识21.网 页 的 文 本 及 文 本 编 辑2.网 页 的 表 格 布 局3.网 页 的 图 像 及 图 像 编 辑4.多 媒 体 素 材相关知识相关知识2网页的文本及文本编辑1文 本 是 网 页 的 基 本 组 成 元 素 之

17、一，通 过 文 本 获 取 信 息 是 用 户 浏 览 网 页 时 获 取 信 息 最 直 接、最 快 捷 的 方 式。恰 当 地 在 网 页 中 使 用 文 本 不 仅 可 以 充 分、准 确 地 表 达 设 计 者 的 意 图，还 能 使 网 页 变 得 通 俗 易 懂。在 设 计 窗 口 中，直 接 在 光 标 处 输 入 文 本 内 容 即 可。当 为 文 本 设 置 属 性 时，需 要 选 中 文 本 后 在 属 性 面 板 中 进 行。在 属 性 面 板 中 通 过 样 式 来 设 置 文 本 的 字 体 类 型、文 字 大 小、文 本 颜 色、对 齐 方 式 等 属 性。是 一

18、种 用 于 统 一 网 页 设 计 风 格 的 技 术，在 下 一 项 目 中 会 详 细 讲 解，本 项 目 只 做 简 要 介 绍。CSS 样 式 的 文 字 属 性 面 板相关知识2网页的网格布局用 表 格 作 为 网 页 设 计 的 布 局 工 具 能 够 固 定 网 页 的 版 式，能 很 好 地 控 制 整 个 页 面 布 局。将整 个 页 面 划 分 为 若 干 表 格，表 格 中 可 以 设 置 单 元 格，通 过 设 置 它 们 的 高 度、宽 度 及 相 互 之 间 的 比 例，再 将 构 成 网 页 的 各 种 网 页 元 素 合 理 地 放 置 在 单 元 格 中，可

19、以 达 到 页 面 布 局 显 示 效 果 的 最 佳 状 态，在 浏 览 器 中 打 开 的 时 候 也 不 会 出 现 乱 版，而 且 表 格 中 也 能 插 入 各 种 元 素。插 入 表 格 时，选 择 软 件 菜 单 栏 中 的“插 入”“Table”选 项。相关知识2插 入 表 格 对 话 框网页的网格布局2其 中：表 格 宽 度 是 指 表 格 在 屏 幕 上 所 占 的 大 小，它 有 设 置 像 素 与 设 置 百 分 比 两 种 设 置 方 式。采 用 百 分 比 设 置 时，表 格 的 大 小 随 着 页 面 大 小 的 变 化 而 变 化，采 用 像 素 设 置 时，表

20、 格 大 小 固 定；边 框 粗 细 设 置 为 就 是 不 显 示 边 框；单 元 格 边 距 是 单 元 格 边 缘 与 内 容 之 间 的 空 白；单 元 格 间 距 是 指 单 元 之 间 的 空 间。相关知识2在 网 页 中 使 用 图 像，可 以 使 网 页 的 内 容 更 加 丰 富 多 彩、形 象 生 动，吸 引 浏 览 者。图 像 可 以 传 递 一 些 文 字 无 法 表 述 的 信 息，但 是 图 像 占 用 的 空 间 比 较 大，如 果 网 页 中 使 用 了 过 多 的 图 像，势 必 会 影 响 页 面 的 下 载 速 度，从 而 影 响 用 户 浏 览 页 面

21、的 效 果。因 此，在 制 作 网 页 时，要 恰 当 地 把 握 好 图 像 的 数 量 及 大 小，可 以 使 用 图 像 处 理 工 具Fireworks、Photoshop 等 来 修 改 图 片 以 达 到 要 求。网页的图像及图像编辑3相关知识2选 择 图 像 源 文 件 对 话 框3目 前，网 页 中 常 用 的 图 像 格 式 有 jpg、gif或png格 式，其 中gif和 jpg格 式 的 图 像 文 件 较 小，在 网 络 上 的 装 载 速 度 很 快，适 合 网 络 传 输，而 且 能 够 被 大 多 数 的 浏 览 器 支 持，是 网 页 制 作 中 最 为 常 用

22、 的 图 像 格 式。图 像 可 以 直 接 从 右 侧 的 文 件 面 板 中 拖 到 设 计 窗 口 中，或 者 选 择 软 件 菜 单 栏 中 的“插 入”“images”选 项，打 开 选 择 图 像 源 文 件 对 话 框，按 路 径 选 择 需 要 插 入 的 图 像。网页的图像及图像编辑相关知识2图 像 属 性 面 板网页的图像及图像编辑3选 中 图 像 后，在 图 像 的 属 性 面 板 中 设 置 图 像 的 属 性。图 像 的 常 用 属 性 有 宽、高、源 文件（图 像 的 相 对 路 径）、链 接（图 像 超 链 接）、替 换（鼠 标 经 过 图 像 时 图 像 上 显

23、 示 的 文 字）、边 框、热 点、对 齐 方 式 等。在 网 页 中 还 可 以 插 入 各 种 多 媒 体 对 象，如 Flash 动 画、Flash文 本、Flash按 钮 等，从 而 创 建 更 加 生 动 的 多 媒 体 网 页。Flash动 画 可 以 直 接 从 右 侧 的 文 件 面 板 中 拖 到 设 计 窗 口 中，或 者 通 过 菜 单 栏 的“插 入”“HTML”“Flash”选 项 的 方 式 插 入。相关知识2多媒体素材43任务实施根 据 任 务 二 所 创 建 的 站 点，将 素 材 文 件 夹 和 文 件 复 制 到 站 点 文 件 夹 中。步骤一1页面背景的设

24、置打 开Dreaweaver2020软 件，选 择“文 件”“打 开”菜 单，打 开 任 务 二 创 建 的 站 点 下 的index.html，在 属 性 面 板 里 选 择“页 面 属 性”，弹 出 页 面 属 性 对 话 框，选 择“外 观（HTML）”“背 景”，将 颜 色 设 置 为 粉 红 色（#FFCCDD），单击“确 定”。步骤二2任务实施3步骤三3 在 网 页 中 单 击“插 入”菜 单“Table”（表 格），打 开 表 格 对 话 框，并 在 Table 对 话 框 中 设 置，用 于 页 面 布 局，在 属 性 面 板 中 设 置 表 格 的 对 齐 方 式”Align

25、”为“居 中 对 齐”。Table对 话 框任务实施3步骤四4在 第 一 行 的 单 元 格 中 输 入“您 好！欢 迎 访 问 我 的 淘 宝 网 站！”，全 选 输 入 的 文 字，选 择 属 性 面 板 左 边 的 图 案。然 后 选 择“水 平”对 齐 方 式 中 的“居 中 对 齐”，字 体 为“华 文 新 魏”，大 小 为“”，颜 色 为“#FF0000”。属性面板4 任务分析 相关知识 任务实施 项目总结在 任 务 三 创 建 的“我 的 淘 宝 网 站”主 页 的 基 础 上，继 续 创 建“半 身 裙”“连 衣 裙”“针 织 裙”“联 系 我 们”四 个 超 链 接 页 面。

26、任务分析相关知识2知识点三3根 据 任 务 二 所 创 建 的 站 点，将 素 材 文 件 夹 images和flash文 件 复 制 到 站 点 文 件夹 中。页 面 背 景 的 设 置打 开 Dreamweaver2020软 件，选 择“文 件”“打 开”菜 单，打 开 任 务 二 创 建 的 站 点 下 的 index.html，在 属 性 面 板 里 选 择“页 面 属 性”，弹 出 页 面 属 性 对 话 框，选 择“外 观（html）”“背 景”，将 颜 色 设 置 为 粉 红 色（#ffccdd)单击“确 定”。相关知识2知识点三3在 标 题 下 一 行 输 入“首 页”“半 身

27、 裙”“连 衣 裙”“针 织 裙”“联 系 我 们”，中 间 以空 格 分 隔。文 本 之 间 只 需 一 个 空 格 时，按 空 格 键 即 可；若 需 要 插 入 多 个 空 格 时，可 以 使 用快 捷 键 ctrl+shift+空 格 键。选 中 这 些 文 本，在 属 性 面 板 中 设 置 字 体 为“华 文 新 魏”，排列 为“居 中”，大 小 为“”，颜 色 为“#9966FF”。设 置 完 毕。设 置 文 本 属 性输 入 文 本任务实施3选 择 动 画 文 件步骤六6在 下 一 行 选 择“插 入”“HTML”“FlashSWF”，会 弹 出 选 择SWF对 话 框，选 择

28、 站 点 路 径 文 件 夹 中 的“dazhe.swf”文 件，单 击“确 定”按 钮。选 择 表 格 的 下 一 行，单 击 属 性 面 板 的“拆 分 单 元 格 为 行 或 列”的 图 案，在 弹 出 的 对 话 框 中 设 置 拆 分 成“列”，列 数 为“”。步骤七7拆 分 单 元 格 对 话 框4任务拓展选 择 拆 分 单 元 格 的 第 一 列，单 击“插 入”“图 像”菜 单 项，打 开 选 择 图 像 源 文件 对 话 框，选 择 第 一 个 图 像，单 击“确 定”按 钮，即 可 在 网 页 中 插 入 第 一 张 图 像，再 选 择 拆 分 单 元 格 第 二 列、第

29、三 列，依 次 在 每 一 列 中 插 入 一 张 图 像。插 入 三 张 图 像 后 的 显 示 效 果。三 张 图 像 显 示 效 果步骤八84任务拓展用 同 样 的 方 法 拆 分 下 一 行 为 三 列，并 依 次 插 入 另 外 三 张 图 像，此 时 共 有 六 张 图 像。每 一 张 图 像 的 大 小 可 以 预 先 在 图 像 编 辑 软 件 中 设 置 好，也 能 在 中 通 过 属 性 面 板 进 行 设 置。六 张 图 像 显 示 效 果步骤八8 选 择“文 件”“保 存”，保 存 文 件。按 键 可 预 览 页 面 效 果。步骤九92相关知识超 链 接超 链 接 的

30、路 径 超 链 接 的 分 类相关知识2所 谓 超 链 接，是 指 浏 览 者 可 以 通 过 点 击 设 置 超 链 接 的 文 字、图 像 等 网 页 元 素 来 访 问 与 其 对 应 的 页 面、网 站 或 其 他 元 素。通 过 超 链 接，可 以 将 各 个 相 关 的 页 面 联 系 在 一 起，构 成一 个 完 整 的 网 页 或 网 站。在 网 页 中 使 用 超 链 接，可 以 使 浏 览 者 更 加 方 便 地 访 问 各 页 面。超链接1相关知识2 ：（UniformResourceLocator，统 一 资 源 定 位 器）也 称 网 页 地 址，可 以 表 示 互

31、联 网 上 任 何 一 个 文 档，甚 至 一 个 文 档 内 部 的 某 个 点，也 可 以 表 示 互 联 网 上 的 一 个 站 点。URL超 链 接 的 路 径 一 般 分 为 绝 对 路 径 和 相 对 路 径。在 制 作 网 页 时，使 用 的 多 是 本 地 资 源，超 链 接 一 般 选 择 相 对 路 径，因 为 使 用 绝 对 路 径 不利 于 网 站 的 移 植，当 网 页 上 传 到 服 务 器 后，使 用 绝 对 路 径 的 文 件 无 法 被 访 问，链 接 必 定 会 发 生 错 误。使 用 相 对 路 径，可 以 方 便 地 对 网 站 文 件 进 行 移 植，

32、无 须 更 改 各 页 面 的 链 接。相关知识2超链接的路径3相关知识2超连接的分类4超 链 接 一 般 包 括 三 类：站 内 链 接、外 部 链 接 和 本 页 链 接。其 中，链 接 到 网 站 内 部 某 个 页 面 的 链 接 称 为 站 内 链 接；链 接 到 其 他 网 站 的 链 接 称 为 外 部 链 接；链 接 到 当 前 页 面 的 指 定 位 置 的 链 接 称 为 本 页 链 接。任务实施3步骤一1 创 建 一 个 空 白 页，在 页 面 的 编 辑 区 内，按 照 之 前 学 习 的 方 法，完 成 页 面 的 前 半 部 分。保 存 在 根 目 录 中 的pag

33、es文 件 夹 下，并 命 名 为“banshenqun.html”；再 单 击 菜 单 栏 的“文 件”“另 存 为”，依 次 命 名 为“lianyiqun.html”“zhenzhiqun.html”“lianxi.html”，保 存 到 根 目 录 中 的 pages文 件 夹 下。步骤二2banshenqun.html的 前 半 部 分 效 果任务实施3步骤三3在Flash下 面 一 行 的 第 一 列 表 格 中，选 择 菜 单 栏 的“插 入”“images”菜 单 项，打 开 选 择 源 文 件 对 话 框，选 择 半 身 裙 图 像“banshenqun.jpg”，单 击“确

34、 定”按 钮，在 网 页 中 插 入 第 一 张 图 像。按 照 上 述 方 法，依 次 插 入 图 像“banshenqun2.jpg”“banshenqun3.jpg”“banshenqun4.jpg”“banshenqun5.jpg”“banshenqun6.jpg”，按 两 行 显 示。步骤四4六 张 图 片 全 部 设 置 完 后 的 显 示 效 果任务实施3选 择 链 接 文 件步骤五5 打 开 之 前 制 作 好 的“index.html”页 面，将 光 标 置 于 文 本“半 身 裙”上，单 击 右 键 打 开 快 捷 菜 单，选 择“创 建 链 接”，打 开 选 择 文 件

35、对 话 框，查 找 并 选 择 网 页 文 件 banshenqu.html”，单 击“确 定”按 钮。选 择“文 件”“保 存”，保 存 制 作 好 的 网 页。步骤六6任务实施3设 置 好 超 链 接 后 的 文 本 状 态步骤七7 设 置 好 文 本“半 身 裙”的 超 链 接 后，文 本 的 颜 色 会 加 深，并 且 有 下 划 线。可 以 通 过 属 性 面 板 的“页 面 属 性”弹 出 菜 单 栏 来 修 改 超 链 接 文 本 的 状 态，在 菜 单 栏 中，选 择“链 接 CSS”可 以 修 改 链 接 文 本 的 颜 色、是 否 有 下 划 线 等。任务实施3设 置 完

36、成 后 的 主 页 页 面 效 果步骤八8按 照 上 述 步 骤 操 作，依 次 创 建 网 页“l i a n y i q u n.h t m l”“zhenzhiqun.html”“lianyiqun.html”，并 且 在 主 页 中 将 文 本“连 衣 裙”设 置 超 链 接 到 网 页 “lianyiqun.html”，文 本“针织 裙”设 置 超 链 接 到 网 页“zhenzhiqun.html”，文 本“联 系 我 们 ”设 置 超 链 接 到 网 页“lianyiqun.html”。设 置 完 成 后，主 页 的 页 面 效 果 如 右图所示。任务实施3常 用 的 超 链 接

37、 还 有 电 子 邮 件 链 接 和 锚 记 链 接。电 子 邮 件 链 接 也 称 Email链 接，用 户 在 浏 览 网 页 时，点 击 此 链 接 会 弹 出 邮 件 应 用 程 序 插 件，方 便 浏 览 者 快 速 地 反 馈 自 己 的意 见。锚 记 也 称 书 签，可 以 将 页 面 中 某 些 特 定 的 对 象 链 接 到 同 一 文 档 中 的 特 定 位 置。锚 记链 接 一 般 用 于 单 个 篇 幅 较 长、用 户 需 要 翻 屏 查 看 的 网 页，属 于 本 页 链 接。步骤九9按F12键 预 览。当 鼠 标 划 过 超 链 接 文 本 时，鼠 标 光 标 变

38、化 为 手 形。点 击 超 链 接 文 本 会 自 动 跳 转 到 对 应 的 超 链 接 页 面。步骤十104项目总结本 项 目 介 绍 了 制 作 简 单 的“我 的 淘 宝 网 站”网 页，包 括 建 立 站 点，使 用 表 格 布 局，在 页 面 中 插 入 文 本、图 像、动 画 等 网 页 元 素，并 对 网 页 元 素 的 属 性 进 行 编 辑，对 文 本 和 图 像创 建 超 链 接。经 验 交 流：同 学 们 将 学 习 过 程 中 的 疑 难 问 题 记 录 下 来，彼 此 进 行 交 流。填空题填空题：1 网 页 中 常 用 的 图 像 文 件 的 格 式 有（）和（）

39、。超 链 接 路 径 分 为（）和（）。：mywebimages2.jpg是（）路 径，该 文 档 相 对 于 某 存 储 位 置 的 路 径 称 为（）。习题5习题51 在 本 地 计 算 机 的 某 位 置 上 新 建 一 个Web 文 件 夹 作 为 站 点 根 目 录，将 该 文 件 夹 定 位为 站 点，站 点 名 称 为“站 点”。如 右 图 所 示。创 建 一 张 图 文 页 面，要 求 包 括 文 本 和 图 像，页 面 背 景 颜 色 为 黄 色（#FFFF99），文 本 字 体 为 隶 书、大 小 为 ，设 置 图 像 边 框 为 、颜 色 为 蓝 色（#0000CC）。操作题