21世纪高等院校规划教材：《网页设计与制作实用技术》课程配套电子教案（PPT教学课件）第二章 创建站点

第2章创建站点 通过本章学习,应该掌握以下内容: 1.规划站点结构的方法 2. Dreamweaver mx的基本操作 3利用 Dreamweaver mx创建站点的方法 4.站点的基本操作

通过本章学习，应该掌握以下内容： 1. 规划站点结构的方法 2. Dreamweaver MX的基本操作 3. 利用Dreamweaver MX创建站点的方法 4. 站点的基本操作 第2章 创建站点

21规划站点结构 1.按照文件的类型进行规划 按照文件的类型规划,就是将不同类型的文件 分别存放在不同的文件夹下。 2.按照网页主题进行规划 按照网页主题,对站点结构规划,可以使网站 条理更清晰,便于日后更好地管理站点

2.1 规划站点结构 1．按照文件的类型进行规划 按照文件的类型规划，就是将不同类型的文件 分别存放在不同的文件夹下。 2．按照网页主题进行规划 按照网页主题，对站点结构规划，可以使网站 条理更清晰，便于日后更好地管理站点

下面是建立目录结构的一些建议: (1)不要将所有文件都存放在根目录下,会造成 文件管理混乱 (2)在每个主栏目目录下都建立独立的 Images目 录 (3)按栏目内容建立子目录 (4)目录的层次不要太深 (5)不要使用过长的目录 (6)不要使用中文目录

下面是建立目录结构的一些建议： （1）不要将所有文件都存放在根目录下，会造成 文件管理混乱 （3）按栏目内容建立子目录 （2）在每个主栏目目录下都建立独立的images目 录 （4）目录的层次不要太深 （5）不要使用过长的目录 （6）不要使用中文目录

2.2利用 Dreamweaver mX创建站点 221 Dreamweaver MX简介 Dreamweaver是 Macromedia公司的出品的一款 “所见即所得”的网页编辑工具。与 FrontPage不 同, Dreamweaver采用的是Mac机浮动面版的设计 风格,对于初学者来说可能会感到不适应。一旦 习惯了其操作方式后,就会发现 Dreamweaver的直 观性与高效性是 FrontPage所无法比拟的

Dreamweaver是Macromedia公司的出品的一款 “所见即所得”的网页编辑工具。与FrontPage不 同，Dreamweaver采用的是Mac机浮动面版的设计 风格，对于初学者来说可能会感到不适应。一旦 习惯了其操作方式后，就会发现Dreamweaver的直 观性与高效性是FrontPage所无法比拟的。 2.2 利用Dreamweaver MX创建站点 2.2.1 Dreamweaver MX简介

1. Dreamweaver MX的界面 菜单栏 浮动 d Macromedia Dreamweaver Ix 工具栏 区面板组 告编辑)查看⑩插入)修改⑩)文本〔)命令￠)站点)窗口)帮助 心》品腰标题:无标题文挡 一嗆.C.遐.设计 常用布局文本表格框架表单模板字符媒体文件头脚本应用程序 代码 w应用程序 插入国图图园自吕画旧昭回 数据库绑定服务器行为组件上 面板无标文着(0r -文档类型:mM 若要在该页面上使用动态数据 浮动面板 3.设置站点的训试服务器 站点资源 文件·编辑·视图、站点 文档 c|↓會↓|口 窗口 未命名站点1N本地视图 站点-未命名站点10 站点面板 图屈性 属性格式无A默认手大无BE金■ 面板 目标〔) 目扫望想

1．Dreamweaver MX的界面 菜单栏 工具栏 文档 窗口 浮动面板 站点面板 属性 面板 浮动 面板组 插入 面板

(1)菜单栏 菜单栏提供了所有的菜单命令,是提供软件最完 整功能的方式。 (2)工具栏 工具栏提供了常用命令的快捷启动方式,例如可 以使用工具栏中的“标题”框方便地设置网页的标题 (3)插入面板 插入面板是 Dreamweaver MX中新添的部件,其实 就是 Dreamweaver4中的对象面板,在其中包含一些 用于创建不同类型对象的按钮

（1）菜单栏 菜单栏提供了所有的菜单命令，是提供软件最完 整功能的方式。 （2）工具栏 工具栏提供了常用命令的快捷启动方式，例如可 以使用工具栏中的“标题”框方便地设置网页的标题。 （3）插入面板 插入面板是Dreamweaver MX中新添的部件，其实 就是Dreamweaver 4中的对象面板，在其中包含一些 用于创建不同类型对象的按钮

(4)浮动面板 浮动面板是一种方便操作的界面方式,使用者可 以随时获得特定功能。 (5)文档窗口 文档窗口是显示用户所编辑文档的地方,显示结 果与文档在浏览器中显示的结果基本相同。 (6)属性面板 属性面板上显示的是被选取对象或文本的各种属 性,在属性面板上还可以检查和编辑当前选定页面元 素的属性

（4）浮动面板 浮动面板是一种方便操作的界面方式，使用者可 以随时获得特定功能。 （5）文档窗口 文档窗口是显示用户所编辑文档的地方，显示结 果与文档在浏览器中显示的结果基本相同。 （6）属性面板 属性面板上显示的是被选取对象或文本的各种属 性，在属性面板上还可以检查和编辑当前选定页面元 素的属性

2. Dreamweaver的视图 单击工具栏上的视图切换按钮即显示设计 视图;使用工具栏中的按钮國则可以很方便地 切换到代码视图,以便査看当前编辑网页的HTML 源代码;如果需要同时查看代码视图和设计视图, 可以单击工具栏上的显示代码和设计按钮,此 时 weaver将同时在窗口中显示代码视图和设 计视图

2．Dreamweaver的视图 单击工具栏上的视图切换按钮 ，即显示设计 视图；使用工具栏中的按钮 ，则可以很方便地 切换到代码视图，以便查看当前编辑网页的HTML 源代码；如果需要同时查看代码视图和设计视图， 可以单击工具栏上的显示代码和设计按钮 ，此 时Dreamweaver将同时在窗口中显示代码视图和设 计视图

222定义站点 1.站点面板 在 Dreamweaver mX的编辑窗,选择“窗 口”|“站点”菜单,即可打开站点面板,所 在站点面板中,用户可以选择菜单“站 点”|“新建站点”命令创建新站点,也可以使用 “站点”|“编辑站点”命令编辑已有的站点

2.2.2 定义站点 在Dreamweaver MX的编辑窗口，选择“窗 口”|“站点”菜单，即可打开站点面板，如图所 示。 在站点 面板中 ，用户 可以 选择菜 单“ 站 点”|“新建站点”命令创建新站点，也可以使用 “站点”|“编辑站点”命令编辑已有的站点。 1．站点面板

创建站点 在 Dreamweaver mx中创建站点的方法有两种: (1)通过站点定义向导创建站点 在编辑窗口或站点面板选择命令菜单“站 点”|“新建站点”选项,弹出“站点定义”对话框 1,选择“基本”选项卡,然后,按照提示进行选项 设置直接定义站点 在编辑窗口或站点面板选择命令菜单“站 点”|“新建站点”选项,弹出“站点定义”对话框 1,选择“高级”选项卡,然后,按照提示进行选项 设置

在Dreamweaver MX中创建站点的方法有两种: （1）通过站点定义向导创建站点 在 编 辑 窗 口 或 站 点 面 板 选 择 命 令 菜 单 “ 站 点”|“新建站点”选项，弹出“站点定义”对话框 1，选择“基本”选项卡，然后,按照提示进行选项 设置. 2．创建站点 （2）直接定义站点 在编辑窗口或站点面板选择命令菜单“站 点”|“新建站点”选项，弹出“站点定义”对话框 1，选择“高级”选项卡，然后,按照提示进行选项 设置