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键:可隐藏/显示窗口内的常用面板和插入 工具箱等对象或用小三角隐藏
标题:设置标题字体的一些属性 标题/编码:网页标题 跟踪图像:设计网页的草图,作为背
景来铺在编辑网页的下面,用来引导 网页的设计
第六章 文本和列表控制
输入文本 设置文本格式 列表控制
输入文本
普通文本的添加
直接输入
从其它文档中复制
特殊字符
文本插入栏
插入\HTML\特殊字符
添加空格:通常只能输入一个空格
Dreamweaver8网页超链接教学设计

patr nd ppiain s fwa e a h are.W ih t e ” b ln s a x mp e o t sg te c u s a e o su n s t n a a l t o t r s te c rir e c o t h we i k ” s e a l .h w o dein h o re b s d n tde t
3 教 学策 略
本 课 内 容 的 学 习是 一 种 自我 需 求 下 的 获 取 ,所 以 关 键 在 于 学 习 方 法 、学 习 习 惯 的 培 养 。平 时 授 课 巾就
要 注 重 倡 导 学 生 自主 学 习 ,碰 到 困 难 要 想 办 法 ,通 过
Te c i sg o he D r a we v r W e n a h ng De i n f t e m ae 8 b Li ks
GUAN Ll i i
( i nj n i lH sa dy & Vee n r o ain lC l g,Heln j n 10 1 Hel gi g Anma u b n r o a tr a V ct a ol e i y o e i gi g 5 1 ) o a 1
完 成 对 知 识 点 的学 习 与 掌 握 .增 强 主动 学 习 、探 究 的
意识 。
信 息 链 接 实 现 的 方 法 , 让 基 础 一 般 的 学 生 能 对
D e mw a e8 中创 建 超 链 接 的 几 种 方 法 有 个 全 面 了 ra e v r
解 ,能掌 握 其 巾的 部 分 内容 ,学 会 学 习 方 法 ,为 以 后
21 0 1年 第 2期
Dra mwe v r e a e8网 页 超 链 接 教 学 设 计
第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
在该页面中,列出了前面各章中制作 的各个网页实例的名称,单击其中任意一 个名称,即可链接到相应的页面。
- 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类。
文本链接:用文本作链接载体,简单实用。
图像链接:用图像作为链接载体能使网页美观、生动活泼,它既可以指向单个的 链接,也可以根据图像不同的区域建立多个链接。