DW8网页链接与站点导航.
Dreamweaver 8中文版网页制作第5章 创建超级链接
5.2.2
图像和图像热点超级链接
一、图像超级链接 用图像作为链接载体，这就是图像超级链接。 创建图像超级链接的方法是：首先选中图像，然后在 【属性】面板中设置链接地址和目标窗口。
5.2.2
图像和图像热点超级链接
二、图像热点 图像热点（或称图像热区、图像地图）实际上就是为 图像绘制一个或几个特殊区域，并为这些区域添加链接。 创建图像热点超级链接的方法是： （1）使用图像热点工具绘制热点区域。 （2）在【属性】面板中设置链接地址、目标窗口等。
5.1.2
超级链接的分类
根据源端点的不同，超级链接也可分为3种 类型。
文本超级链接：以文本作为超级链接载体。 图像超级链接：以图像作为超级链接载体。 表单超级链接：选择某个选项后会自动跳 转到目标端点，或需要单击相应按钮会自 动跳转到目标端点。
5.2 普通超级链接
本节主要内容： 文本超级链接及其状态 图像和图像热点超级链接 图像地图 电子邮件超级链接 锚记超级链接
5.3.3 脚本链接
创建JavaScript链接的方法是，首先选定文本或 图像，然后在【属性】面板的【链接】文本框中输入 “JavaScript:”，后面跟一些JavaScript代码或函数调 用即可。
5.3.3 脚本链接
经常用到的脚本链接JavaScript代码。
JavaScript:alert('字符串') JavaScript:history.go(1)：前进 JavaScript:history.go(-1)：后退 JavaScript:history.forward(1)：前进 JavaScript:history.back(1)：后退 JavaScript:history.print()：打印 JavaScript:window.external.AddFavorite(‘htt p://’,‘老虎工作室’)：收藏指 定的网页 JavaScript:window.close()：关闭窗口
中文版Dreamweaver8实用教程
中文版Dreamweaver 8实用教程
8.2.3 创建链接
在Dreamweaver 8中可以创建各种超链接。当在本地站点内移动或重命名 文档或其他链接文件时，Dreamweaver 还可自动更新指向文档的链接。 创建链接的类型和方法 创建网页间超链接 创建网页内的超链接 创建E-Mail链接创 建虚链接及脚本链接 创建图形热点链接
中文版Dreamweaver 8实用教程
在Dreamwe在网页中创建超链接，首先选中要创建链接的对象 。然后在该 对象的属性检查器的“链接”文本框里输入要链接对象的URL或路径即可.
中文版Dreamweaver 8实用教程
中文版Dreamweaver 8实用教程
8.2.2 认识URL和链接路径
URL和链接路径的概念，以及它们之间相互的关系，是用户在设置网页超 链接之前所必须要掌握的基本常识。 URL 绝对路径 相对路径
中文版Dreamweaver 8实用教程
URL(Uniform Resoure Locator，统一资源定位器)指的是Internet文件在网 上的地址，是使用数字和字母按一定顺序排列来确定的Internet地址，由访问 方法、服务器名、端口号，以及文档位置组成。格式为Access-method :// server-name:port / document-location。 比如/dw/index.htm，这是一个典型的URL，它 指出使用http协议访问域名所在服务器下dw这个目录中的 index.htm文件。
中文版Dreamweaver 8实用教程
要创建图形热点链接，首先需要在文档窗口中选中插入的图像，然后使用图 像属性检查器中的“地图名称”文本框和“热点工具”按钮在该图像中绘制热 点区域 。最后,选中所创建的热点区域后,在”热点”的属性检查器的”链接”文 本框中输入链接目标的URL或路径即可.
第2课 使用Dreamweaver 8站点
2.2 课堂教学
2.2.2 管理站点资源和库 3．使用库项目 库是一种用来存储要在整个Web站点上经常重复使用或 更新的页面元素（如图像、文本和其他对象）的方法，这些 元素称为库项目。 (1) 创建库项目 用户可以从文档中的任意元素创建库项目，这些元素包 括文本、表格、表单、Javaapplet、插件、ActiveX 元素、 导航条和图像。对于链接项（如图像），库只存储对该项的 引用。原始文件必须保留在指定的位置，才能使库项目正确 工作。 (2) 在文档中插入库项目 当向页面添加库项目时，将把实际内容以及对该库项目 的引用一起插入到文档中。
2.2 课堂教学
2.2.1 管理站点文件 8．同步本地和远端站点上的文件 当用户在本地和远端站点上创建文件后，可以在这两种 站点之间进行文件同步。在同步站点之前，可以验证要上传、 获取、删除或忽略哪些文件。Dreamweaver还将在用户完 成同步后确认哪些文件进行了更新。 要在非同步的情况下查看哪些文件在本地站点或远端站点上 较新，用户可以在“文件”面板的右上角单击“选项”菜单， 然后选择“编辑”→“选择较新的本地文件”或“选择较新 的远端文件” 。
2.2 课堂教学
2.2.1 管理站点文件 4．在文件面板中管理站点、文件和文件夹 (3) 指定站点首页 网站的门户就是首页，通常首页文件中总包含有若干指向其 他主要网页的超链接，用户可以先为网站创建一个空白首页， 然后编辑，并可以利用站点地图来查看网站中超链接的情况。 网站首页默认的文件名，取决于用户申请的主页空间， 一般是index.htm、index.html、default.htm等。同类型的 文件，最好放在一个文件夹中，例如把图片文件，都放在 image文件夹中。不要把所有文件都放在根目录下，把一个 栏目的所有文件放在一个文件夹中，在链接网页和维护时， 会很方便。
Dreamweaver8概述
插入面板组
插入面板集成了所有可以在网页应用的对象 包括“插入”菜单中的选项。插入面板组其 实就是图像化了的插入指令，通过一个个的 按钮，可以很容易的加入图像、声音、多媒 体动画、表格、图层、框架、表单、Flash和 ActiveX等网页元素。
文档工具栏
“文档”工具栏包含各种按钮，它们提供各
列 表
有序列表：前边的每一项有序号引导，OL
属性／编号列表
无序列表：没有顺序，每一项前边都以同样 的符号显示，UL/LI
属性／项目列表
标签检查器修改类型
定义列表：文本插入栏：dl，dt，dd
设置页面的头内容
鼠标左键单击插入工具栏最左边按钮旁的 下拉小三角，在弹出菜单中选择“HTML” 项，出现“文件头”按钮，点开下拉菜单
浮动面板
：窗口\工作区布局
其它面板可以统称为浮动面板，这些面板都 浮动于编辑窗口之外。在初次使用 Dreamweave 8的时候，这些面板根据功能被 分成了若干组。在窗口菜单中，选择不同的 命令可以打开基本面板组、设计面板组、代 码面板组、应用程序面板组、资源面板组和 其它面板组。
F4键：可隐藏/显示窗口内的常用面板和插入 工具箱等对象或用小三角隐藏
标题：设置标题字体的一些属性 标题／编码：网页标题 跟踪图像：设计网页的草图，作为背
景来铺在编辑网页的下面，用来引导 网页的设计
第六章 文本和列表控制
输入文本 设置文本格式 列表控制
输入文本
普通文本的添加
直接输入
从其它文档中复制
特殊字符
文本插入栏
插入＼ＨＴＭＬ\特殊字符
添加空格：通常只能输入一个空格
Dreamweaver8网页超链接教学设计
ｐａｔｒ ｎｄ ｐｐｉａｉｎ ｓ ｆｗａ ｅ ａ ｈ ａｒｅ．Ｗ ｉｈ ｔ ｅ ” ｂ ｌｎ ｓ ａ ｘ ｍｐ ｅ ｏ ｔ ｓｇ ｔｅ ｃ ｕ ｓ ａ ｅ ｏ ｓｕ ｎ ｓ ｔ ｎ ａ ａ ｌ ｔ ｏ ｔ ｒ ｓ ｔｅ ｃ ｒｉｒ ｅ ｃ ｏ ｔ ｈ ｗｅ ｉ ｋ ” ｓ ｅ ａ ｌ ．ｈ ｗ ｏ ｄｅｉｎ ｈ ｏ ｒｅ ｂ ｓ ｄ ｎ ｔｄｅ ｔ
３ 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ，所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ，碰 到 困 难 要 想 办 法 ，通 过
Ｔｅ ｃ ｉ ｓｇ ｏ ｈｅ Ｄ ｒ ａ ｗｅ ｖ ｒ Ｗ ｅ ｎ ａ ｈ ｎｇ Ｄｅ ｉ ｎ ｆ ｔ ｅ ｍ ａｅ ８ ｂ Ｌｉ ｋｓ
ＧＵＡＮ Ｌｌ ｉ ｉ
（ ｉ ｎｊ ｎ ｉ ｌＨ ｓａ ｄｙ ＆ Ｖｅｅ ｎ ｒ ｏ ａｉｎ ｌＣ ｌ ｇ，Ｈｅｌｎ ｊ ｎ １０ １ Ｈｅｌ ｇｉ ｇ Ａｎｍａ ｕ ｂ ｎ ｒ ｏ ａ ｔｒ ａ Ｖ ｃｔ ａ ｏｌ ｅ ｉ ｙ ｏ ｅ ｉ ｇｉ ｇ ５ １ ） ｏ ａ １
完 成 对 知 识 点 的学 习 与 掌 握 ．增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 ， 让 基 础 一 般 的 学 生 能 对
Ｄ ｅ ｍｗ ａ ｅ８ 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ｒａ ｅ ｖ ｒ
解 ，能掌 握 其 巾的 部 分 内容 ，学 会 学 习 方 法 ，为 以 后
２１ ０ １年 第 ２期
Ｄｒａ ｍｗｅ ｖ ｒ ｅ ａ ｅ８网 页 超 链 接 教 学 设 计
第3章Dreamweaver8网页制作
3.1 Dreamweaver8简介 3.2 网页文本及媒体的应用 3.3 表格的应用 3.4 布局表格的应用 3.5 超级链接 3.6 框架的应用 3.7 CSS样式的应用 3.8 层和行为的应用 3.9 时间轴的应用 3.10 表单的应用 3.11 模板的应用
3.1
本节知识
认识Dreamweaver8
在需要添加特殊字符的位置单击鼠标，设置插入点。 选择插入栏的“文本”类别（如图所示），单击最右边的
下三角
按钮，在弹出的下拉菜单中选择“其他字符”命令，弹出如图所示的 对话框，可在其中选择要输入的对象。
3.2.2
文本的编辑操作
也可通过软键盘来输入“★、■、※、【】”等特殊字符符号。
3.2.2
选择“关闭”命令。
在Dreamweaver 8窗口中选择“文件”|“退出”菜单命令。 在当前窗口为Dreamweaver 8工作界面时，按“Alt+F4”键退出
Dreamweaver 8。
3.1.3 Dreamweaver 8工作界面介绍
知识要点
插入栏
文档工具栏 文档编辑区 网页标签 扩展按钮 浮动面板组 属性面板 标签选择器 水平标尺和垂直标尺
3.1.1
知识要点
系统要求
Dreamweaver8的认识
在安装Dreamweaver8之前请确保硬件和软件环境满足以下条件： ① Intel Pentium III 600MHz或更快的处理器和等效的处理器 ② Windows 2000、Windows XP或Windows Server 2003 ③ 至少128MB的可用内存（建议采用256MB内存或更大内存） ④ 能达到1024×768像素分辨率或更高分辨率的监视器
dreamweaver8网页设计教程
《dreamweaver8网页设计》目录第一章遨游DREAMWEA VER8精彩世界1第二章创建与规划站点3第三章文本及其格式化10第四章表格13第五章图像15第六章框架18第七章页面布局视图的使用21第八章链接24第九章层与时间轴 28第十章表单32第十一章行为35第十二章制作动态页面38第十三章代码片断、库项目和模板 42第十四章网页的制作45第十五章网站的测试与上传49第十六章使用FIREWORKS 8处理网页图像 52第一章遨游Dreamweaver8精彩世界课题：Dreamweaver8简介及创建文档一、教学基本内容1、Dreamweaver8 的工作界面2、建立html文档二、课型：新授课三、课时：2个课时四、教学重点与难点重点：熟悉Dreamweaver8工作界面中各个工具的作用难点：1、各个面板的调用2、建立一个HTML的网页3、插处图像五、教学目的1 、对Dreamweaver这个制作网页的工具及网页有一定的认识，激发学生学习网页设计的兴趣2、一定要学会建立一个空白网页3、会对页面有一个简单的设置六、教学过程1、引入（1）为什么要用Dreamweaver而不用Frontpage?Dreamweaver是Macromedia公司的出品，它以程序小、运行速度快、所制作网页代码少这些优点，赢得了网页制作人员的喜爱。
（2）相关工具的介绍因为这是第一节网页制作课，所以首先要简单介绍下制作网页的一些相关工具，比如与Dreamweaver合称为网页三剑客的Flash和Fireworks。
2、讲授新课（1） Dreamweaver的界面a．文档窗口：主菜单、工具栏、底部启动条、文档编辑区b．对象面板：标准、表格、表单、框架、特殊、文件廷冖隐藏、字符c．启动面板：站点管理、代码检查、HTML样式、CSS样式、行为、历史记录、资源管理d．属性面板：随目前对象不同而内容不同(2)创建HTML网页(3)在网页中插入图像输入文字以后，插入图像，并对图像设置对齐的方式，使之与文字呈混排的状态。
《Dreamweaver8和Flash8案例教程》第7章 站点与链接PPT课件
（6）单击“确定”按钮后，返回 “管理站点”对话框。在对话框的左 边的列表框中，将列出刚创建的站点 名称。单击“完成”按钮，即可返回 Dreamweaver主窗口。 （7）单击“文件”面板内第一个下 拉列表框中的其他站点名称，可以显 示其他站点的结构和文件。
Page 9
2．“文件”面板和“站点”窗口
7.2.2 操作过程
Page 18
7.2.3 相关知识
1．文字或图像与外部HTML和图像 文件的链接
（1）利用“属性”栏内“链接”文 本框和文件夹按钮 建立链接
Page 19
➢用鼠标拖曳选中源文件中要链接的文字或 选中要链接的图像。
➢单击“属性”面板中的“链接”栏中的文 件夹按钮 ，弹出“选择文件”对话框， 利用该对话框选择要链接的HTML文件或 图像文件（即目标文件）。也可以直接在 文本框内输入要链接的HTML文件或图像 文件的路径与文件名。使用路径时，一定 要注意相对路径与绝对路径的使用方法， 通常最好使用相对路径。
Page 12
（3）单击“站点”窗口内的“站点 地图”按钮 右下角的黑色箭头， 可弹出一个菜单。单击该菜单中的 “仅地图”菜单命令，可使右边的 “本地文件”栏消失。单击该菜单中 的“地图和文件”菜单命令，可使右 边的“本地文件”栏显示，即切换到 “地图和文件”状态。
Page 13
（4）单击“站点”窗口内的“站点 文件”按钮 ，可使“站点”窗口 只显示“本地文件”栏，但左边的栏 不消失，只是没有“地图”视图。
Page 15
图7-2-1 建立各个子页面链接后的“跟我学电脑”网页
Page 16
在该页面中，列出了前面各章中制作 的各个网页实例的名称，单击其中任意一 个名称，即可链接到相应的页面。
第2走进Dreamweaver 8及站点管理
站点的规划
• Dreamweaver 8的站点类型 • 规划站点结构 • 绘制网站结构草图
Dreamweaver 8的站点类型
• 本地站点 • 远程站点
• 测试站点
规划站点结构
规划站点结构是设计站点的必要前 提，其操作是将不同的文件分类存放在 文件夹中以便于设计者管理。合理地组 织站点结构，可提高工作效率，加快对 站点的设计。
Dreamweaver 8 中文版网页制作基础
主讲人
第 2讲
走进Dreamweaver 8及站点建立
1、启动与退出 2、工作界面 3、创建简单页面 4、定义站点 5、管理站点 6、用站点管理文件.
1、启动与退出
1．启动 2．退出 3.打开网页文档 4.关闭网页文档
1.1. 启动
删除站点
窗口中执行【站点】/【管理站点】命令，打开【管理站点】对话框， 在【管理站点】对话框的站点列表中选中“我的相册”，直接单击右 侧的“删除”按钮即可。
复制站点
打开【管理站点】对话框，选中要复制 的站点，然后单击“复制” 按钮，如图1所 示，那么在【管理站点】对话框的站点列 表中就复制了一个该站点的副本，如图2所 示。
工作界面
2.1．窗口介绍
在默认状态下，Dreamweaver 8窗口主要有标题栏、菜单栏、文档工具栏、 编辑区、【属性】面板、插入栏、面板组、状态栏等组成，如上图所示。
• • •
标题栏：显示当前正在编辑的文档的目录和名称。 菜单栏：菜单栏位于标题栏的下面，有10个菜单组成， 包含了几乎所有的Dreamweaver8命令。 文档工具栏：文档工具栏中包含按钮，使用这些按钮可 以在文档的不同视图间快，还包含一些与查看文档、在 本地和远程站点间传输文档有关的常用命令和选项，如 图所示。
Dreamweaver8 ppt教程 第06章
♦ 下面介绍常用的三种文档路径类型： ♦ 绝对路径：绝对路径就是被链接文档的完整URL，包括所使用的传输
协议（对于网页通常是http://）。（从一个网站的网页链接到另一个 网站的网页）时，必须使用绝对路径，能保证当一个网站的网址发生 变化，被引用令一个页面的链接还是有效的。例如 （/support/dreamw eaver /contents.html）。 ♦ 文档相对路径：以以前文档所在位置为起点到被连接文档经由的路径。 这是用于本地链接最适宜的路径。例如，dreamweaver/contents.htm就 是一个文档相对路径。当用户要把当前文档与处在相同文件夹中的另 一文档链接，或把同一网站下不同文件夹中的文档相互链接时，就可 以使用相对路径。 ♦ 根相对路径：根相对路径是指从站点根文件夹到被链接文档经由的路 径。一个根相对路径以前斜杠开头，它代表站点根文件夹。例如， /support/tips.html就是站点根文件夹下的support子文件夹中的一个文件 （tips.html）的根相对路径。根相对路径是指定网站内文档链接的最 好方法，因为在移动一个包含相对链接的文档时，无需对原有的链接 进行修改。
6.1.1URL概述 6.1.2相对路径和绝对路径 6.1.3在Web上使用链接 6.2创建超级链接 6.2.1创建文本链接导航 6.2.2创建E-mail链接 6.2.3创建图像热点链接 6.2.4创建下载文件的链接网页 6.3创建锚点链接网页 6.3.1插入命名锚记 6.3.2创建命名锚记链接 6.4实战演练 6.4.1 范例1 创建图像映射网页 6.4.2 范例2 创建空链接 6.5 思考与练习
6.2.1创建文本链接导航
生变化，通常鼠标会变成一个小手。同时文本也 发生了一些变化（出现下划线、文本颜色发生变 化、字体发生改变等）。此时单击鼠标，会打开 文本所链接的网页，这就是文本超级链接。创建 文本超级链接导航通常有4种方法。 ♦ 1．使用【属性】面板创建链接 ♦ 2．指向文件图标创建链接 ♦ 3．快捷菜单创建链接 ♦ 4．使用菜单命令
快速上手使用Dreamweaver进行网站导航和链接
快速上手使用Dreamweaver进行网站导航和链接第一章：认识DreamweaverDreamweaver是Adobe公司开发的一款专业网页设计软件，它具有强大的编辑和设计功能，能够帮助用户轻松地创建和编辑网页。
通过使用Dreamweaver，用户可以方便地管理网站的导航和链接。
第二章：创建网站导航栏要创建一个有效的网站导航栏，首先需要打开Dreamweaver软件并创建一个新的HTML文档。
接下来，选择“插入”菜单中的“导航栏”选项。
在弹出的“导航栏”对话框中，可以选择不同的导航栏样式，也可以根据需要进行自定义设置。
在设置完成后，点击“确定”按钮即可生成导航栏。
第三章：编辑网站导航栏生成导航栏后，可以通过双击导航栏进行编辑。
在编辑模式下，可以根据需要添加、删除或修改导航栏中的链接和按钮。
可以通过选择按钮来更改其外观，调整按钮的大小和位置，并更改按钮上显示的文本。
如果需要添加子菜单，可以在按钮上右键单击并选择“添加子菜单”选项。
通过编辑导航栏的设置，可以实现更加个性化的导航栏效果。
第四章：设置网站链接在Dreamweaver中设置网站链接非常简单。
首先需要选择要添加链接的文字或图像，并点击工具栏中的“链接”按钮。
在弹出的“链接”对话框中，可以选择链接的类型。
例如，可以将链接设置为跳转到其他网页、网站内的锚点或电子邮件地址。
在对话框中还可以设置链接的目标窗口和链接的标题等属性。
设置完成后，点击“确定”按钮即可创建链接。
第五章：管理网站导航和链接除了创建和编辑导航栏和链接外，Dreamweaver还提供了其他功能来管理网站导航和链接。
例如，可以使用“站点管理器”功能来管理整个网站的导航和链接。
在站点管理器中，可以查看和编辑网站的目录结构，并针对不同的页面设置导航和链接。
此外，Dreamweaver还提供了一些检查链接有效性的工具，可以帮助用户快速定位和解决链接错误。
第六章：优化网站导航和链接为了提高用户体验和网站的可用性，有几个技巧可以帮助优化网站的导航和链接。
Dreamweaver8课后习题答案
填空：1.网页可以分为（静态）网页和（动态）网页。
2.在Dreamweaver8中可以创建（本地站点），（远程站点）和（测试站点）3种站点。
3.Dreamweaver8的工作界面有（设计器）工作界面和（编码器）工作界面。
4.默认情况下，在界面中打开4个面板组，分别是（“应用程序”面板组）、（“文件”面板组）、（CSS面板组）和（“标签”面板组）。
5.在“页面属性”对话框中可以对5大类页面属性进行设置，分别是（外观）、（链接）、（标题）、（标题/编码）和（跟踪图像）。
6.常见的网页元素包括（文本）、（图片）和（多媒体）。
7.在输入文本是，可以按（Enter）键分段换行，按（Shift+Enter）键则不分段换行。
8.网页中最常见的图片格式有（GIF）、（JPEG）和（PNG）。
9.可以在两种视图下使用表格布局网页，分别是（布局）视图和（标准）视图。
10.设置表格宽度可以使用两种单位，分别是（像素）和（百分比）。
11.在网页的HTML代码中（<table>）标签标识表格、（<tr>）标签标识一行单元格、（<td>）标签标识一个单元格。
12.框架集由（<frameset>）标签标识，框架由（<frame>）标签标识。
13.在Dreamweaver 8中可以创建（预定义）框架集和（自定义）框架集。
14.框架集的边框有3个设置选项，分别是（边框）、（边框颜色）和（边框宽度）。
15.表单的提交方式有（默认）、（GET）和（POST）。
16.要使一组单选按钮是互斥的，必须（将同一组中的单选按钮的名字都设为相同的）。
17.按钮的“属性”面板提供了按钮的3种动作，分别是（提交表单）、（重设表单）和（无）。
18.层具有（可移动）、（可重叠）和（可隐藏）的特点。
19.层的可见性有4个选项，分别是（default）、（inherit）、（visible）和（hidden）。
Dreamweaver8 概述
作业：
一、判断题
（1）“设计器”工作区布局是专为习惯编写代码的 用户设计的。（） （2）文档工具栏的主要作用是可以不使用菜单命令 ，仅通过快捷按钮就可以方便的控制文档的视图 显示。（）
（3）在Dreamweaver8中不可以自定义面板的位置。 （）
（4）静态网页是标准的HTML文件，扩展名为.html或 .htm。（）
国家中等职业教 育改革发展示范 学校建设成果
Dreamweaver网页制作 应用案例教程
第1讲 Dreamweaver概述
湖北黄冈高级 学时
教学重点： Dreamweaver8简介 Dreamweaver8的界面组成
教学难点： Dreamweaver8的启动与退出
（5）工具栏以按钮的方式汇集了Dreamweaver8的常用 工具，分为文档工具栏和标准工具栏。（） （6）文档窗口主要用来显示或编辑文档，其显示模式分 为三种：编码视图、拆分视图与设计视图。（） 二、问答题
启动和退出Dreamweaver8的方法分别有哪些？
返回
谢谢大家！
再见！
三、Dreamweaver8的启动与退出
1.启动Dreamweaver8 法一：执行“开始/程序/Macromedia/ Macromedia
Dreamweaver8”命令
法二：直接在桌面双击 快捷图标
法三：双击Dreamweaver8相关联的文档
2.退出Dreamweaver8 法一：单击Dreamweaver8程序窗口右上角的 按钮 法二：执行“文件/退出”命令 法三：双击Dreamweaver8程序窗口左上角的 图标 法四：Alt+F4
一、网站的概述
1、网页与网站
浏览网页时在浏览器中看到的一个个页面就是网页， 而多个相关的网页的集合就构成了一个网站。
实验报告1Dreamweaver8基本操作、站点管理
实验名称：Dreamweaver8基本操作、站点管理实验学时： 3学时班级：信管091班学号： *********** *名：***指导教师：***实验时间： 2011-3-6一、实验目的和要求1.掌握Dreamweaver 8启动和退出方法。
2.掌握本站点的设置方法。
3.掌握创建、打开和保存HTML文档的方法。
二、实验内容及步骤1.网页编辑器的基本操作。
（1）用不同的方法启动和退出Dreamweaver 8。
①双击Dreamweaver 8的快捷方式；②右击Dreamweaver 8快捷方式，左键打开；③“开始”→“程序”→“Dreamweaver 8”。
（2）用快捷键打开或关闭【插入】面板和【属性】面板。
Ctrl+F2和Ctrl+F3。
（3）将【代码】浮动面板组打开后，先移出，再移入浮动面板放置区，然后再将【设计】浮动面板组中的【CSS样式】组合到【代码】浮动面板组中。
查看浮动面板组操作后的效果。
（4）用快捷键关闭和打开浮动面板组，用鼠标折叠和展开各个浮动面板组，察看浮动面板组操作后的效果。
（5）启动Dreamweaver 8后，打开、关闭标尺显示，设置标尺单位分别为厘米、英寸、像素；显示和隐藏网格，设置网格属性，【间隔】为10像素，【显示】为线，【颜色】为#CCCC99，选中【靠齐到网格】复选项。
2.建立网站的基本操作。
（1）打开站点管理器，在本地计算机的当前盘根文件夹中，建立名为myweb的文件夹。
（2）把文件夹myweb设置为本地站点的根文件夹。
然后建立名为image文件夹。
（3）在本地计算机的当前盘根文件夹中，建立名为our site的子文件夹，并切换为本地站点的根文件夹。
3.文件管理基本操作。
（1）将ch12\material文件夹中的两个文件bg0004.gif和bg0093.gif及my rose中的文件rose.htm，分别复制到本地站点“我们的站点”的our site文件夹中。
Dreamweaver_8_简介及站点的管理与建立[1]
![Dreamweaver_8_简介及站点的管理与建立[1]](https://img.taocdn.com/s3/m/a5ac6a3083c4bb4cf7ecd103.png)
华南农业大学 现代教育技术中心
认识Dreamweaver 8的工作界面
进入Dreamweaver 8的工作界面，并显示Dreamweaver 8的开始页。
华南农业大学 现代教育技术中心
Dreamweaver 8 开始页中各部分的作用
• “打开最近栏目”栏： 在该栏中列出了最近编辑过的文件，单击即可打开相应文件。单击“打开” 链接可以弹出“打开”对话框，用于选择要打开的文件。 “创建新栏目”栏： 单击该栏中的一个超级链接，即可创建相应类型的项目文件。 “从范例创建”栏： 单击该栏中的一个超级链接，即可按照范例创建相应类型的项目文件。 “扩展”栏： 单击“Dreamweaver Exchange”超级链接，即可启动浏览器并打开 Dreamweaver的扩展插件页面。
华南农业大学 现代教育技术中心
Dreamweaver 8的安装
8．开始安装：安装向导开始安装程序，并显示安装的进度。
华南农业大学 现代教育技术中心
Dreamweaver 8的安装
9．安装完成：安装完毕后打开“完成”对话框，单击“完成”按钮即可完成 Dreamweaver 8的安装。
华南农业大学 现代教育技术中心
华南农业大学 现代教育技术中心
Dreamweaver 8的安装
6．打开“默认编辑器”对话框：在其中选择Dreamweaver 8 默认编辑的文件类 型。建议保持不变，单击“下一步”按钮。
华南农业大学 现代教育技术中心
Dreamweaver 8的安装
7．打开“已做好安装程序的准备”对话框：再打开的“已做好按装程序的准备” 对话框中单击“安装”按钮。
WEB界面开发
Dreamweaver+HTML+CSS网站界面设计
Dreamweaver8.0的基本功能介绍
学 习 导 航
1 各类网页欣赏
2 Dreamweaver8.0的工作界面
3 常用工具栏 4 创建和保存网页 5 文本的输入和编辑 6 网页课件实例
1.各类网页欣赏
• 1.艺术类网站
1.各类网页欣赏
• 2.综合类网站
1.各类网页欣赏
3.旅游网站
1.2 Dreamweaver8.0的工作界面
1、首次启动Dreamweaver8时系统会弹出如图所示的工作 设置对话框， 【设计者】为用户提供了一种“所见即所得”的可视化 的创建环境。 【代码编写者】主要为用手写代码的用户设计的。对于 初级使用者一般选取选择。 注：【设计者】工作设置，选择工作界面后，单击“确 定”按钮。
返回
退出
1.3 常用工具栏1
• 1、创建新站点
• 2、制作网页
返回
退出
1、创建新站点
• 1）在本地计算机硬盘创建一个文件夹，名为“我 的首页”。 • 2）打开Dreamweaver 8，在菜单栏打开“站点” 选项，执行“新建站 点”命令。 • 3）在弹出的对话框中选择“基本”选卡，输入站 点的名称。
• 4）单击“下一步”按钮，在弹出的对话框中选择 “否，我不想用服务器技术”。
F12预览，
• 7）依次选择“油画赏析”、“山水画赏析”、“古
代山水画赏析” 等文字，用同样的方法，分别建立
链接。
返回 退出
2、制作网页 3
• 8）分别用Dreamweaver 8软件依次打开 “油画赏析”、“山水画赏析”、“古代 山水画赏析”网页用同样的方法将每一页 的文字全部和相应的网页链接好，整个课 件即完成。
• （2）、段落格式
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
到电子邮箱的超级链接：用于链接到电子邮箱，可直接点击发送邮件。
到执行文件的超级链接：用于链接站点空间里的可执行程序，可用于下载跟再线 运行。
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
超级链接是web存在和发展的基础，正是超级链接的使用，才使普通的 文本成为超文本，这种文本用html语言记录，在基于TCP/IP协议的网 络上使用HTTP协议来传输，从而完成网络信息的交换。使用超级链接 可以充分利用网络中的有用资源，例如：可以使站点资源的展示符合 人们资源查询索取的基本习惯；可以使文本的组织更加有层次，符合 人们的阅读习惯。 在网页中超级链接根据链接目标的不同可分为5类。
(5) 重复步骤(4)（5）分别使“精美图片”、“书香天地”、“开心一笑”和“有 缘即是朋友”字样jmtp.asp、sxtd.asp、kxyx.asp与sxtd.asp文件，建立超级链接，并 设置打开方式为_self。
(6) 按下F12键浏览，单击任意设置超级链接的文字，都可跳转至对应网页，如单击 【精美图片】字样，会自动跳转至【精美图片】网页，如右下图所示。
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
第8章 网页中的文本对象
重点内容：
• 对不同载体设置越链接
• 通过CSS样式改变越链接样式 • 添加导航条
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
和文档相对的路径：是指和当前文档所在的文件夹相对的路径。这种路径通常是 最简单的路径，可以用来链接和当前文档处于同一文件夹下的文档。
3. 超级链接的目标与载体 超级链接的目标可以是另一个网页，也可以是相同网页上的不同位置， 还可以是一个图片、一个电子邮件地址、一个文件(如多媒体文件或者 Microsoft Office文档)，甚至是一个应用程序。而超级链接载体可以 是文本、图像、按钮和多媒体文件等。
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
可按以下3种方法指定文字的超级链接。 在文本框中直接输入目标的路径。 单击文件夹按钮 ，在弹出的对话框中选择链接的目标文件。 利用属性面板上的【指向文件】按钮 ，为文字加入超级链接。但必须要建立 本地站点，且本地站点上还要有文件存在，才能使用此方法。 在该实例中我们主要学习如何为站点中确定的文本添加超级链接。接下来我们要为 default.asp文件中的“悠然而过”、“精美图片”、“书香天地”、“开心一笑” 和“有缘即是朋友”字样添加超级链接，并设置打开的新网页使用当前网页窗口。 (1) 打开一个已存在的文件，例如default.asp。 (2) 移动垂直滚动条，找到要添加超级链接的文本，如下图所示。
在网页中使用超级链接，能够使每个独立的网页之间产生一定的相互 联系，从而使单独的网页形成一个有机的整体。
1. 超级链接的概念、作用及分类
超级链接是一种标记，它记录了网络中的某个文件或者其他URL，通过这 个标记，可以“打开”相应的资源。从工作机理的角度看，超级链接是一 个指向其他网络资源的一个指针，通过它浏览器可以根据一定的要求载入 相应的资源。 具体说明：当浏览者单击已经链接的文字或图片后，链接目标将显示在浏 览器上，并且根据目标的类型来打开或运行。例如单击一个AVI文件的超 级链接后，该文件将在媒体播放器中打开。如果是单击一个网页的链接， 将在浏览器中打开。 超级链接实际上是一个记录网上其他网络资源的“指针”，它指向网络中 的 其他资源，被标记的对象称为热点，是连接这些资源的入口。 浏览中鼠标单击热点时，浏览器就根据这个指针对超级链接做
2. 绝对路径和相对路径 在创建超级链接之前，有必要了解相对路径和绝对路径之间的差异， 以及如何指定不同类型的路径。在一个网站中，有绝对路径和根目录 相对的路径，以及和文档相对的路径3种类型的文档路径。
绝对路径：是包含服务器协议(对于网页来说通常是http://或ftp://)的完全路 径，绝对路径包含的是精确地址而不用考虑源文件的位置。但是如果目标文件被移 动，则链接无效。创建外部超级链接时必须使用绝对路径。 和根目录相对的路径：是从当前站点的根目录开始的路径。站点上所有可公开的 文件都存放在站点的根目录下。和根目录相对的路径使用斜杠以告诉 服务器从根目录开始。
（1） 为文字添加超级链接 选择面页中需要添加超级链接的文字，在属性面板上的【链接】文本框中指定文字 的链接目标。在【目标】下拉列表框中选择目标文件打开的方式(此项必须在【链 接】文本框中加入了目标路径后，才变为可用状态)。当设置这两项后，在网页中 被选择的文字颜色变为蓝色，且在文字底部出现一条下划线，即文字的超级链接设 置完成。在键盘上按F12键，即可将网页在浏览器中打开。单击链接的文字，即可 打开指定的目标文件。
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
(3) 选中“悠然而过”二字，单击属性面板上的【指向文件】按钮 ，并按住鼠标左 键不放，拖动鼠标指向站点窗口中的yreg.asp文件，如左下图所示，为“悠然而过” 字样建立超级链接。
(4) 打开【目标】下拉列表框，从中选择_self选项。
Dreamweaver 应用技术——《 Dreamweaver MX
2004实训教程》讲义
一、创建超级链接
根据超级链接链接对象的不同（即载体），可分为2类。
文本链接：用文本作链接载体，简单实用。
图像链接：用图像作为链接载体能使网页美观、生动活泼，它既可以指向单个的 链接，也可以根据图像不同的区域建立多个链接。