1、为 了便于 对 制作中的网站 进 行 组织 和管理，在使用网站制作 软 件Dreamweaver CS5制作 单 个 页 面之前，必 须 首先 创 建一个站点，用来存 储所有 Web网站文件和文档的地方，通 过对 站点的 设 置，可以方便地 实现对网 页统 一的管理、在服 务 器上的 远 程文件管理及文件 传输 。2018/9/4 12.1.1 任 务 描述2.1.2 相关知 识2.1.3 任 务实 施2.1.4 任 务评 价2.1.5 任 务 小 结2018/9/4 2为 了便于 对 制作中的网站 进 行 组织 和管理，在使用网站制作 软 件 Dreamweaver CS5制作 单 个 页
2、面之前，必 须 首先创 建一个站点，用来存 储 所有 Web网站文件和文档的地方，通 过对 站点的 设 置，可以方便地 实现对 网 页统 一的管理、在服 务 器上的 远 程文件管理及文件 传输 。2018/9/4 3在网站开 发过 程中，网站中所有文件、文件 夹 、 图 片、CSS类 的命名 规 范， 应 做到 见 名知意、容易理解。 现 将网站开 发 中常用的命名 规则总结 如下：（ 1）网站文件 夹 命名 规则在网站中，与文件 紧 密相关的另一个部分就是路径，在网站开 发 中 严 禁将网站 资 源 统 一放在网站根目 录 下， 这样会 对 后期网站 编辑 和 维护 中 产 生不便。网站 资
3、 源 应该 按照事先的 规 划，按照不同目 录进 行分 类 存放。一、 网站开 发 常用的命名 规则2018/9/4 4（ 1）网站文件 夹 命名 规则表 2-1 网站文件 夹 常用名称一、 网站开 发 常用的命名 规则名称 说 明images(image或img)存放 图 像文件flash 存放 flash文件themes 存放主 题 文件style（ css） 存放 CSS样 式表文件js 存放 JavaScript脚本文件video 存放 视频 文件sound 存放音 频 文件web（ page） 存放网 页 文件resource 存放 资 料文件2018/9/4 5（ 2）网站文件命名
4、 规则网 页 文件命名 规则 ：1. 所有的文件名一律使用英文小写；2. 不要使用中文命名；3. 不要在文件名中加入空格；4. 避免在文件名字使用特殊符号，如 “&”、 “#”或者 “？ ”。一、 网站开 发 常用的命名 规则2018/9/4 6表 2-2 CSS样 式文件常用名称一、 网站开 发 常用的命名 规则名称 说 明index.css 主 页 CSS样 式表文件login.css 登 录 CSS样 式表文件pages.css 页 面 CSS样 式表文件layout.css 布局、版面 CSS样 式表文件font.css 文字 CSS样 式表文件master.css 主要 CSS样 式
5、表文件form.css 表 单 CSS样 式表文件menu.css 菜 单 CSS样 式表文件nav.css 导 航 CSS样 式表文件search.css 搜索 CSS样 式表文件themes.css 主 题 CSS样 式表文件2018/9/4 7Dreamweaver CS5的工作界面主要由 标题栏 、菜 单栏 、 “插入 ”工具 栏 、 “文档 ”工具 栏 、 “标 准 ”工具 栏 、 “文档 ”窗口、 “属性 ”面板、 “文件 ”面板 组 成。如 图 2-1所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 8（ 1） 标题栏标题栏显 示网 页 的 标题 和网
6、页 文档的存 储 位置。（ 2）菜 单栏Dreamweaver CS5 的菜 单栏 包含 10类 菜 单 ：文件、 编辑 、查 看、插入、修改、格式、命令、站点、窗口和帮助，如 图 2-2所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 9（ 2）菜 单栏 文件：用来管理文件，包括 创 建和保存文件、 导 入与 导 出文件、 预览 和打印文件等。 编辑 ：用来 编辑 文本，包括撤 销 与重做、复制与粘 贴 、 查 找与替 换 等。 查 看：用来 查 看 对 象，包括代 码 的 查 看、网格 线 与 标 尺 显 示、面板的 隐 藏和工具 栏 的 显 示等。 插入：用来插
7、入网 页 元素，包括插入 图 像、多媒体、 层 、框架、表格、表单 、 电 子 邮 件 链 接、日期、特殊字符和 标签 等。 修改：用来 实现对页 面元素修改的功能，包括 页 面属性、快速 标签编辑 器、 链 接、表格、框架、 导 航条、排列 顺 序、 转换 、末班、 库 和 时间轴 等。 格式：用来 对 文本 进 行操作，包括字体、大小、 颜 色、 CSS样 式、段落格式、 缩进 、凸出、列表、 对齐 和 检查 拼写等。二、 认识 Dreamweaver CS5的工作界面2018/9/4 10（ 2）菜 单栏 命令：收集了所有的附加命令 项 ，包括播放 录 制命令、 编辑 命令列表、 扩 展
8、管理、套用源格式、清理 XHTML/Word生成的 HTML、 创建网站相册、格式化表格和表格排序。 站点：用于 创 建于管理站点，包括管理站点、新建站点、 获 取、取出、上 传 、 显 示取出者和改 变 站点范 围 的 链 接等。 窗口：用于打开与切 换 所有的面板和窗口、包括插入 栏 、属性面板、站点窗口和 CSS样 式面板等。 帮助：内含 Dreamweaver帮助、 联 机注册、 Dreamweaver支持中心和关于 Dreamweaver等。二、 认识 Dreamweaver CS5的工作界面2018/9/4 11（ 3） “插入 ”工具 栏Dreamweaver CS5 “插入 ”
9、工具 栏 包含用于 创 建和插入 对 象的按 钮 。通 过 “插入 ”工具 栏 可以在网 页 中快速插入多种网 页 元素，如 图 像、 动 画、表格、 Div标签 、超 级链 接、表 单 和表 单 控件。二、 认识 Dreamweaver CS5的工作界面2018/9/4 12（ 3） “插入 ”工具 栏 常用： 创 建和插入最常用的 对 象，例如 图 像和表格。 布局：插入表格、表格元素、 div标签 、框架和 Spry Widget。我 们还 可以选择 表格的两种 视图 ： 标 准（默 认 ）表格和 扩 展表格。 表 单 ： 创 建表 单 和插入表 单 元素（包括 Spry验证 Widge
10、t）。 数据：插入 Spry数据 对 象和其它 动态 元素，例如 记录 集、重复区域以及插入 记录 表 单 和更新 记录 表 单 。 Spry：包含一些用于构建 Spry页 面的按 钮 ，包括 Spry数据 对 象和 Widget。 jQuery：包含使用 jQuery移 动 的构建站点的按 钮 。 InContext Editing：包含供生成 InContext编辑页 面的按 钮 ，包括用于可 编辑 区域、重复区域和管理 CSS类 的按 钮 。 二、 认识 Dreamweaver CS5的工作界面2018/9/4 13（ 3） “插入 ”工具 栏 文本：用于插入各种文本格式和列表格式的 标
11、签 ，如 b、 em、 p、 h1和ul。 收藏 夹 ：用于将 “插入 ”面板中最常用的按 钮 分 组 和 组织 到某一公共位置。 服 务 器代 码 ： 仅 适用于使用特定服 务 器 语 言的 页 面， 这 些服 务 器 语 言包括 ASP、 CFML Basic、 CFML Flow、 CFML Advanced和 PHP。 这 些 类别 中的每一个都提供了服 务 器代 码对 象，您可以将 这 些 对 象插入 “代 码 ”视图 中。 二、 认识 Dreamweaver CS5的工作界面2018/9/4 14（ 4） “文档 ”工具 栏“文档 ”工具 栏 中包含用于切 换 文档窗口 视图 的
12、“代 码 ”、 “拆分 ”、 “设计 ”、 “实时视图 ”按 钮 、各种 查 看 选项 和一些常用操作。如图 2-4所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 15（ 5） “标 准 ”工具 栏点 击 “查 看 ”菜 单 ， 选择 “工具 栏 ”命令，在 弹 出的子菜 单 中 选择 “标 准 ”项 ，即可 显 示 标 准工具 栏 。 “标 准 ”工具 栏 中包含网 页 文档的基本操作按 钮 ，如新建、打开、保存、剪切、复制、黏 贴 等按 钮 ，如 图 2-5所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 16（ 6）文档窗口“文档 ”
13、窗口也成 为 文档 编辑 区， 该 窗口所 显 示的内容可以是代 码 、网 页 ，或者两者的共同体。在 【 设计视图 】 中， “文档 ”窗口中 显 示的网 页 近似于 浏览 器中 显 示的效果。如 图 2-1所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 17（ 7） “属性 ”面板“属性 ”面板位于文档窗口的下方，用来 设 置 页 面上正被 编辑内容的属性，可以通 过执 行 【 窗口 】 |【 属性 】 命令或者按“Ctrl+F3”组 合 键 打开或关 闭 “属性 ”面板。如 图 2-7所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4
14、18（ 8）面板 组Dreamweaver CS5包括多个面板， 这 些面板都有不同的功能，将它 们 叠加在一起便形成了面板 组 。如 图 2-8所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 19（ 9） “文件 ”面板网站是多个网 页 、 图 像、 动 画、程序等文件有机 联 系的整体，要有效地管理 这 些文件及其 联 系，需要一个有效地工具， “文件 ”面板便是 这样 的工具。点 击 【 窗口 】 | 【 文 】 命令，可以打开 “文件 ”面板。如 图 2-10所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 20（ 10） 标签选择
15、 器在文档窗口底部的状 态栏 中， 显 示 环绕 当前 选 定内容 标签 的 层 次结 构， 单击该层 次 结 构中的任何 标签 ，可以 选择该标签 及网 页 中 对应 的内容。在 标签选择 器 栏还 可以 设 置网 页 的 显 示比例。如 图 2-11所示。二、 认识 Dreamweaver CS5的工作界面2018/9/4 21站点是一种文档的磁 盘组织 形式，由文档和文档所在的文件 夹组成。多个网 页 文档通 过 各种 链 接关 联 起来就构成了站点。站点可以小到一个网 页 ，也可以大到整个网站。三、 站点的概念2018/9/4 22Dreamweaver CS5中站点提供了三 类 站点
16、：本地站点、 远 程站点和 测试 站点。（ 1）本地站点：用于存放用 户 网 页 、素材等本地文件 夹 ，是用 户工作的目 录 。在制作一般网 页时 只建立本地站点即可。（ 2） 远 程站点：可在本地 计 算机上管理 远 程 Web服 务 器中的文件。也可以通 过 本地站点和 远 程站点在本地磁 盘 和 Web服 务 器之 间传输文件。（ 3） 测试 站点：主要用于 对动态页 面 进 行 测试 。四 、 Dreamweaver CS5中站点分 类2018/9/4 23（ 1）在本地硬 盘 上新建一个文件 夹 或者 选择 一个已 经 存在的文件夹 作 为 站点的文件 夹 ，那么 这 个文件 夹
17、就是本地站点的根目 录 。提示： 录 入站点名称和 设 置本地站点文件 夹时 候 应该 按照网站命名 规则进 行 “站点名称 ”和 “本地站点文件 夹 ”命名。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶 山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 24（ 2）启 动 Dreamweaver CS5程序，在菜 单栏 中， 选择 【 站点 】 |【 管理站点 】 菜 单项 。如 图 2-12所示。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶 山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 25（
18、3） 弹 出 【 管理站点 】 对话 框，如 图 2-13所示， 单击 【 新建 】 按钮 。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶 山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 26（ 4） 弹 出 【 站点 设 置 对 象效果 】 对话 框，在 对话 框中， 选择 【站点 】 选项 卡，如 图 2-14所示， 【 站点名称 】 文本框中， 输 入网站站点名称。 单击 【 本地站点文件 夹 】 右 侧 的 按 钮 ， 选择 准 备 使用的站点文件 夹 。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶
19、山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 27（ 5）在 图 2-14左 边选择 【 本地信息 】 项 ，如 图 2-15所示。在 【 默认图 像文件 夹 】 文本框 输 入站点中 图 像文件 夹 名称。并可以通 过选择【 链 接相 对 于 】 确定网站相 对 地址。在 【 Web URL】 文本框中 输 入网站完整网址。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶 山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 28（ 5） 设 置完 毕 ，点 击 【 保存 】 按 钮 。（ 6）在 【 管理站点 】 对话 框中， 显 示 刚刚
20、 新建的站点，如 图 2-16所示， 单击 【 完成 】 按 钮 。此 时 ，如 图 2-17所示。在 【 文件 】 面板中，即可看到 创 建的站点文件完成使用 【 管理站点 】 向 导 搭建站点的操作。1、在 Dreamweaver CS5 中使用向 导 搭建站点， 创 建 “平 顶 山 韩创教育咨 询 公司 ”网站本地站点2018/9/4 29（ 1）启 动 Dreamweaver CS5 ， 执 行 【 站点 】 |【 管理站点 】 命令，打开 【 管理站点 】 对话 框，如 图 2-18。2、在 Dreamweaver CS5 中 导 出 “平 顶 山 韩创 教育咨 询 公司 ”网站站点2018/9/4 30
