第五讲制作包含超级链接和AP Div的网页
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()：关闭窗口
网页设计与制作实用教程单元5 布局与美化网页
【教学导航】
（1）学会使用表格布局页面 （2）学会使用AP Div布局页面 （3）学会使用使用Div+CSS结构布局页面 （4）学会创建样式文件、设计页面的布局结构、定义页面的布 教学目标 局样式 （5）学会利用CSS样式美化页面元素 （6）学会插入Div标签对网页的页面进行布局 （7）学会插入或绘制AP Div，并合理地设置AP Div的属性 教学方法 任务驱动法、分组讨论法、理论实践一体化、讲练结合 课时建议 8课时（包含考核评价）
【任务5-3】使用Div+CSS布局 与美化网页 【任务描述】
（1）创建外部样式文件0503global.css，在该样 式文件中定义必要的CSS样式。 （2）创建外部样式文件0503pages.css，在该样 式文件中定义必要的CSS样式。 （3）创建网页文档0503.html，该网页主体结构 主要应用Div+CSS进行布局，局部结构应用了 定义列表、项目列表和段落结构进行布局。网 页0503.html还应用了CSS样式对文字、图片、 超链接和表单控件进行美化。 网页0503.html的浏览效果如图5-8所示。
3．创建网页文档0502.html
创建网页文档0502.html，保存在文件夹“5-2” 中，该网页主体结构主要应用AP Div、绝对定位和 相对定位进行布局，局部结构应用了Div+CSS和定 义列表、项目列表进行布局。 还应用了CSS样式对文字、图片、超链接和列 表进行美化。 该网页为左右结构，通过绝对定位方式实现左 右布局。
（1）插入Div标签page_wrapper （2）插入Div标签pages_nav （3）插入AP元素l_sidebar （4）插入AP元素r_content （5）插入多个Div标签和AP元素
《网页设计与制作》习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
dreamweaver章习题和答案
dreamweaver章习题和答案复习题（⼀）⼀、填空题1、Internet是20世纪70年代由美国军⽅的（）发展⽽来的。
2、⽤户只有通过（）才能接⼊Internet，并享受各种服务。
3、⼤部分国家和地区都拥有⾃⼰独⽴的域名，中国的域名是（）。
4、（）是⾮常重要的⽹页元素之⼀，是⽹页中信息的主要载体。
5、现在⼀般将Dreamweaver、（）和Flash称为新⽹页制作三剑客。
⼆、选择题1、IP地址是⼀个（）位的⼆进制数。
A、16B、32C、64D、1282、域名“.edu”表⽰（）（）。
A、教育机构B、商业组织C、政府部门D、国际组织3、下列说法错误的是（）。
A、⽹站⼀般拥有固定的域名B、通信协议包括HTTP、FTP、Telnet和Mailto等协议C、WWW，即万维⽹，是⼀个基于超级⽂本的信息查询⼯具D、HTML是⼀种⽤来制作⽹络中超级⽂本⽂档的简单标记语⾔4、下列关于ASP的说法错误的是（）。
A、ASP是Microsoft公司推出的运⾏于客户端的Web应⽤程序开发技术B、ASP既不是⼀种语⾔，也不是⼀种开发⼯具C、ASP⽂件的扩展名为“.asp”D、脚本语句代码包含于“<%…%>”之间5、下列关于VBScript和JavaScript的说法错误的是（）。
A、VBScript脚本语⾔是ASP的默认语⾔B、VBScript可以在客户端使⽤，也可以在服务器端使⽤C、JavaScript核⼼语⾔在客户端、服务器端均可使⽤D、JavaScript是Java的⼦集三、问答题1、⽹站建设的基本流程是什么2、建站的⽅式有哪些⼀、填空题1、【插⼊】⼯具栏通常有两种表现形式：制表符格式和（）格式。
2、默认情况下，【资源】⾯板位于（）⾯板组。
3、【站点定义】对话框包括【基本】和【（）】两种状态。
4、通过【站点】／【（）】命令可打开【管理站点】对话框对站点进⾏编辑。
5、在Dreamweaver中，可以通过设置【（）】来定义Dreamweaver的使⽤规则。
Web习题参考答案
《网页设计与制作》习题参考答案第一章网页设计与制作概述1、填空题（1）静态网页、动态网页（2）HyperText Mark-up Language、超文本标记语言或超文本链接标示语言（3）文字、图形图像、动画、视频（4）Microsoft Frontpage（或SharePoint Designer）、Adobe Dreamweaver2、问答题(1)www的特点有哪些？答：1）万维网是无数个网络站点和网页的集合，它们在一起构成了因特网最主要的部分。
2）WWW是建立在客户机／服务器模型之上的。
3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。
4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。
5）WWW浏览提供界面友好的信息查询接口。
(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。
它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。
图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。
动画：动画是动态的图形，添加动画可以使网页更加生动。
常用的动画格式包括动态GIF图片和Flash动画声音和视频：声音是多媒体网页中的重要组成部分，支持网络的声音文件格式很多，主要有MIDI、WA V、MP3和AIF等。
网页中支持的视频文件格式主要有Realplay、Mpeg、A VI和DivX等。
表格：在网页中使用表格可以控制网页中信息的结构布局。
超链接：超链接是网页与其他网络资源联系的纽带，是网页区别于传统媒体的重要特点导航栏：导航栏的作用是引导浏览者游历所有站点。
表单：表单类似于Windows程序的窗体，用来将浏览者提供的信息，提交给服务器端程序进行处理。
其他常见元素：包括悬停按钮、Java特效和ActiveX等各种特效。
Dreamweave 项目5五超级链接──制作导航网页
（6）可以通过【访问键】选项设置链接的快捷键（即按 Alt＋1个字母键），将焦点切换至文本链接，还可 以通过【Tab键索引】选项设置Tab 键切换顺序，这 里均不进行设置。
（7）单击确定按钮，插入“水调歌头”超级链接。
（8）选择【宋词概述】栏目，在【属性】面板的【链接】 文本框中输入 “/qsc/qscml1.htm”，在【目 标】下拉列表中选择【_self】选项 。
任务三 设置电子邮件超级链接
（1）将鼠标光标置于页脚中“友情征稿：”的后面，然 后在菜单栏中选择【插入】／【电子邮件】命令或在【插 入】／【常用】面板中单击打开按钮，打开【电子邮件链 接】对话框。
（2）在【文本】文本框中输入在文档中显示的信息，在 【E-Mail】文本框中输入电子邮箱的完整地址，这里均输 入“xiangmu1981@” 。
（3）单击确定按钮，一个电子邮件链接就创建好了。
任务四 设置文本超级链接
（1）选择主页左侧表格中文本“水调歌头”，然后在菜 单栏中选择【插入】／【超级链接】命令，或在【插入】 ／【常用】面板中单击按钮，打开【超级链接】对话框。
（2）在【超级链接】对话框的【文本】文本框中输入网 页文档中带链接的文本“水调歌头”。
项目五 超级链接──制作导航网页
任务一 设置锚记超级链接 任务二 设置图像超级链接
任务三 设置电子邮件超级链接
任务四 设置文本超级链接
实 训 设置唐诗欣赏网页
在浩瀚的网海中，每个网页之间都似乎维 系着一条看不见的线，无论天涯海角，都能 在刹那间联系起来。拥有超级的魔力正是 “超级链接”功能的体现。在本项目中将重 点介绍有关超级链接的基本知识。通过制作 一个简单的导航网页，依次展示文字链接、 图像链接、按钮链接、网页地图和电子邮件 超级链接等链接方式。
项目五超级链接-设置站点导航网页-PPT
面包屑导航
1 2
显示当前位置
面包屑导航应清晰地显示用户在网站中的当前位 置，以便用户了解自己所处的页面层级。
提供返回路径
面包屑导航应提供返回上一级的链接，使用户能 够轻松地返回到之前的页面或主页面。
3
简化路径
在显示面包屑导航时，可以简化路径，只显示关 键的页面层级，以避免过长的路径显示。
下拉菜单导航
DIV+CSS布局
使用DIV元素进行页面划分
利用DIV元素作为容器，将页面内容划分为不同的区块，每个区块可以独立设置样式和布 局。
CSS样式定义
通过编写CSS样式规则，可以为DIV元素及其内部内容设置样式，包括字体、颜色、背景 、边距等。
布局定位与浮动
使用CSS的定位和浮动属性，可以实现元素的精确定位和层叠效果，创建灵活的页面布局 。
测试超级链接有效性
链接可用性测试
使用自动化工具或手动检查，确保所有超级链接都能正确指向目 标页面。
跨浏览器测试
在不同浏览器和设备上测试超级链接，确保其在各种环境下都能正 常工作。
加载速度测试
测试超级链接的加载速度，确保用户能够快速访问目标页面。
解决超级链接问题
修复死链
定期检查并修复无效的超级链接，避免用户 访问时出现404错误。
处理重定向
对于需要重定向的超级链接，确保使用正确的HTTP 状态码和重定向方式。
优化锚文本
改进超级链接的锚文本，使其更具描述性和 相关性，提高用户体验和搜索引擎排名。
提高用户体验度
01
清晰的导航结构
设计简洁明了的导航菜单和面包 屑导航，帮助用户快速了解网站 结构和当前位置。
响应式设计
02
03
第5章创网页超链接-PPT精选文档
教学目的
介绍了超链接的概念 掌握超链接和导航条的创建方法 会在网页中灵活使用超链接
5.1 超链接的基本概念
一个网站肯定有很多的页面，如果页面之间彼此
是独立的，那么网页就好比是孤岛，这样的网站 是无法运行的，没有意义的。为了建立起网页之 间的联系我们需要实现从一个网页指向另一个目 标的跳转，这个目标可以是另一个网页，也可以 是同一个网页上的不同位置，还可以是一张图片、 一个电子邮件地址、一个文件或一个绝对定位的 元素，甚至是一个应用程序，这就是所谓的超链 接。在创建超链接之前，首先要弄清楚目录和路 径的关系，只有这样才可以轻松管理网站的链接， 创建出结构清晰明确的网站。
本章小结
为了把Internet上众多的网站和网页联 系起来，将其构成一个整体，就要在网页 中加入链接。这样一来，能让浏览者很轻 松地浏览自己想看的内容。所以我们在整 合网站内容后，系统地考虑站点链接的易 用性、条理性尤为重要。总之，掌握超链 接的制作是基础，如何合理的安排、灵活 的运用它才是关键。
5.1.1 URL概述
URL（统一资源定位器）主要用于指定网上资源
的位置和方法。 URL一般由三个部分组成，即协议、主机和域 （1）协议，又成服务方式，如http、ftp、telnet 等。 （2）主机：即存放资源的主机的IP地址，有时 也包括端口号，如：qq (3)域：主机的具体地址，包括路径和文件名等。
5.4创建跳转菜单
跳转菜单是页面中的弹出式菜单，在菜单
中列举出链接到文件或文件夹的选项。
5.5创建导航条
导航条由按钮、图像或一组图像组成。导
航条就像网站的桥梁，网站通过它把站点 中的各个页面联系起来，使浏览者更加方 便清晰地在各个页面间进行切换，是网站 的结构更加层次分明。
Dreamweaver cs5标准实例课件第5章 制作超链接
5.2.5 虚拟链接和脚本链接
虚拟链接也称为空链接，是指没有指定的链接，一般用于向页面上的文本或 对象添加行为。虚拟链接主要包含以下两种格式：
<a href=#>虚拟链接</a> <a href=javascript:;>虚拟链接</a> 第1种格式被单击时将返回到页面顶部，这种格式无法添加行为；第2种格式
5.3 使用热点制作图像映射
简单地说，图像映射就是将一幅图像用热点工具分割为若干个区域，并将这些 子区域设置成热点区域，然后将这些不同的热点区域链接到不同的页面。当用户单 击图像上不同热点区域时，就可以跳转到不同的页面。
在绘制热点区域后，常常需要调整热点区的大小和形状，以满足设计需要。 （1）在属性设置面板左下角单击调整热点工具按钮，然后单击需要调整大小的热 点区域。此时被选中的热点区域周围会出现控制手柄。 （2）把鼠标放在这些小方块上，然后拖拉鼠标即可改变热点区域的大小或形状。 如果是矩形或多边形热点区域，如此操作会改变区域的形状；而对于圆形热点区域 ，上述操作只会改变形状的大小。
5.2 创建、管理超级链接
5.2.1 创建文本超链接
1、在文档窗口中选中需要建立链接的文本。 2、在属性面板的“链接”文本框中输入链接目标；或选择“窗口”/“属性”菜单 命令打开属性面板。在“链接”后的文本框中输入链接目标。
默认情况下，文本链接显示为蓝色，并加有下划线。用户可以选择“修 改”/“页面属性”菜单命令，在“页面属性”面板的“链接”分类页面设置超级 链接在各种状态下的颜色，以及选择是否显示下划线。 如果链接目标是计算上的一个文件或图片，可以单击“链接”文本框右侧的文件 夹图标，打开“选择文件”对话框，查找并选择文件。或者选择“指向文件”图标 ， 并按下鼠标左键拖动到“文件”面板中一个现存的页面。 注意：Dreamweaver不支持扩展字符集（也被称为High ASCII），所以在指定链 接的URL时，不能包含扩展字符集，且完全的URL最多不能超过255个字符。此外， 尽管大多数浏览器可以解释路径名或URL中的空格，但在UNIX应用中，空格会被变为 %20，这将使得URL比较难看。
网页设计与制作_第05章创建和设置超级链接ppt课件
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
文本超级链接 图像超级链接 图像地图 电子邮件超级链接 锚记超级链接 空链接 鼠标经过图像 导航条 Flash文本 Flash按钮 脚本链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
(2) 根据目标端点的不同，超级链接可分为内部超级链接、外部超 级链接、电子邮件超级链接和锚记超级链接。
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.2 创建超级链接
装备一个铸造车间，需要熔炼设备、 造型及 制芯设 备、砂 处理设 备、铸 件清洗 设备以 及各种 运输机 械，通 风除尘 设备等 。只有 设备配 套，才 能形成 生产能 力。
5.1.3 链接目标
链接目标用于设置单击某个链接时，被链接文件打开的位置。 通常，链接目标有以下4种形式。
【_blank】：将链接的文档载入一个新的浏览器窗口。 【_parent】：将链接的文档载入该链接所在框架的父框架或 父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档 载入整个浏览器窗口。 【_self】：将链接的文档载入链接所在的同一框架或窗口。 此目标是默认的，因此通常不需要特别指定。 【_top】：将链接的文档载入整个浏览器窗口，从而删除所有 框架。
网页制作与网站设计_05Dreamweaver CS3创建超级链接
任务三
任务描述 任务说明
操作步骤
3)按F12键，保存网页文档并在浏览 器中检验该文档。
任务四
任务描述 任务说明 操作步骤
小张想自己设立了一个网页，在
运行过程中可能会出现问题，通过浏
览者能反馈的信息，及时改进，提高 网页的制作水平。
任务四
任务描述 任务说明
在网页上创建E-mail链接，可以使浏
任务一
任务描述
任务说明 操作步骤
“_blank”:在弹出的新窗口中打开所链接 的目标。 “_parent”:如果是嵌套的框架，表示在 父框架 “_self”:浏览器默认的设置，在当前网页 所在的窗口中打开链接的网页。 “_top”:在完整的浏览器窗口的顶层打开 链接目标。
任务一
任务描述
任务说明 操作步骤
任务一
任务描述
任务说明 操作步骤
在“属性”面板中，单击“链接”文
本框右侧的指向文件图标，拖动鼠标时会
出现一条带箭头的细线，指示到链接的文 件后，释放鼠标，可以链接该文件⑻如图
5-4所示。
任务一
任务描述
任务说明 操作步骤
图5-4 创建指向文件图标链接
任务二
任务描述
任务说明 操作步奏
小张在浏览网页时，看见鼠标经过 某些文本时，会出现一个小手，点击后 会出现新的窗口，自己也想试一试。
图5-2 目标选项
任务一
任务描述
任务说明 操作步骤
④“标题”:设置超链接的标题。当鼠 标悬停在超级链接上时出现的说明文字。 ⑤“访问键”:设置键盘快捷键，设置 好后，如果按键盘上的快捷键将选中这个 超级链接。 ⑥“Tab键索引”:设置在网页中用 Tab键选中这个超链接的顺序。 2）完成参数设置后，单击“确定”按钮， 即可完成链接。
制作包含超级链接的网页
实验六：制作包含超级链接的网页
一、实验任务：
1、熟练掌握创建网页外部链接和内部链接，根据页面内容的需要添加和制作不同类型的超级链接。
2、完成【任务6-1】。
3、根据任务6-1的制作，观察和说明外部链接和内部链接、绝对地址和相对地址之间的差别。
二、实验步骤：
1、设置超链接的属性
2、选中所要超链接的文字，点击属性面板，输入链接地址，更改目标状态
3、选中“天子山自然保护区”，点击插入中的Hyperlink，点击链接
按钮，选择网页文件，更改目标填入标题。
3、点击图片，点击属性，点击链接旁的浏览文件夹，选择文件，再点击拆分视图，编入代码
4、选中文字，在属性面板中点击链接，输入链接
5、点击代码视图，首页左侧输入代码<a name=“top”id=“top”></a>，再在“索溪峪自然保护区”左侧输入代码，最后点击“回到首页”设置其链接为“#top’
6、在图像中点击热点工具按钮，在图中绘制一个合适的区域，点击所绘制的区域进行设置超链接。
7、点击窗口里的结果，再点击链接检查器，选择见检查的范围进行检查。
8、外部链接：本网站外部的链接，一般是指其他网站连到本网站的链接。
内部链接：本网站内部网页之间的链接。
相对地址是指相对于当前网页的地址。
绝对路径是被链接文档的完整路径包括使用的传输协议.
三、实验体会
本次的实验报告，让我更加对我的期末报告有了更好的完善，对文字的链接，图片的链接以及图形有了更深次的了解。
初中信息技术教案 第五课_建立超链接教案
知识目标/技能目标
知识目标
1.理解超链接的概念。
2.理解导航栏在网页设计中的重要性。
技能目标
1.掌握在网页中插入超链接的一般过程；
2.熟练掌握将链接指向站点内、站点外和电子邮箱的一般方法；
3.学会在网站内设置导航栏。
情感态度与价值观目标
体会万物皆有联系，加强与父母、老师和同学之间沟通和交流，虚心听取别人的意见，不至于在自己的成长过程中迷失方向。
本课的重难点
重点：“创建超链接”对话框；标签链接。
难点：导航栏的设置。
第二阶段：范例精讲，学生自主探究，完成范例。
第五章使用表格和Div布局网页
第五章 使用表格和Div布局网页
• 使所有宽度一致：使所有布局单元格的 宽度一样 • 移除所有分隔符图像：删除所有的间隔 图像
第五章 使用表格和Div布局网页
• 删除嵌套：删除选中的布局表格中的间 隔图像。 • 列设置为自动伸展：使选中的布局单元 格的列自动适应布局表格的宽度。
第五章 使用表格和Div布局网页
第五章 使用表格和Div布局网时恢复原始 显示状态。
第五章 使用表格和Div布局网页
7、制作弹出式菜单 弹出式菜单一般用于超链接、图片， 在DW中制作弹出式菜单有两种方法： （1）使用显示-隐藏层行为，在层内设 置超链接标记。 （2）使用“显示弹出式菜单”行为。
第五章 使用表格和Div布局网页
1、创建与编辑表格 2、创建AP 3、编辑AP Div
第五章 使用表格和Div布局网页
5.1表格
一、布局表格 • 在网页的设计中，非常重要的一点就是 网页的布局，也就是网页中的文字、图 像与动画等对象如何安排 • 通常在插入对象以前先进行区域分割。 区域分割可以使用框架、层或表格，使 用最多的是表格。
第五章 使用表格和Div布局网页
5、行为菜单 行为对象不能添加的行为在行为菜 单中显示为灰色状态，表示该行为不能 用于该对象。 6、添加行为过程 7、编辑行为动作
第五章 使用表格和Div布局网页
1、交换图像 交换图像行为一般用于图像对象。该 行为的动作为：当鼠标移动到图像上面时， 图像位置处显示另一幅图像；当鼠标从图 像上移开时，恢复原来图像显示。 onMouseOver---------交换图像 onMouseOut----------恢复交换图像
第五章 使用表格和Div布局网页
• onMouseOver：当鼠标移动到 对象上面时发生的事件。 • onMouseOut：当鼠标从对象上 移开时发生的事件。
网页设计 第5章超级链接及使用 共九章ppt
2、 制作步骤 1 ）定义本书素材 source 目录下的文件夹 5-1-5 为本 地站点目录。 打开根目录下的 map.htm文件，选择“【窗口】→【 属性】”菜单命令，打开属性面板。如图5-1-20所示。
选中文档中的图片，属性面板出现相应的各项设 置。如图5-1-21所示。
选择“属性”面板中“地图（M）”下图标中的某 一形状，按住鼠标左键在图片中相应位置拖动即可建 立一个矩形的“热区”，在默认情况下，刚创建的热 区的“链接(L)”为“＃”，需要手动设置链接的目标 网址，同时也可设置“目标(R)”及“替代（T）”。如 图5-1-22所示。
2、 制作步骤 （ 1 ）定义本书素材 source 目录下的文件夹 5-1-4 为本 地站点目录。 打开根目录下的 traandwri.htm文件，选择“【窗口】→ 【属性】”菜单命令，打开属性面板。如图5-1-15所示
（2）创建锚点 将鼠标光标定位于页面中标题“翻译与写作”文 字之后，选择主菜单“【插入】→【命名锚记(N) 】” ，弹出“命名锚记”对话框，输入“命名锚记返回顶 部”文字后单击“确定”按钮，如图5-1-16所示。
直接输入 mailto:echo@
方法二： 将鼠标光标定位于页面中要显示电子邮件的地方， 选择主菜单“【插入】→【电子邮件链接(L) 】”，弹 出“电子邮件链接”对话框，输入相应内容后单击“ 确定”按钮，如图5-1-14所示。
“电子邮件链接”对话框中，设置以下选项： 文本。显示在页面中的文字，可以为Email地址 或其它文字。 E-mail。邮件地址。
“ 指向文件”图标指向 目标窗口任意位置
方法四： 打开属性面板，在“链接(L)” 直接输入链接地址 ，如要链接到站点内的其他文档，输入目标文件的具 体路径与文件名；要链接到站点以外的文档，则输入 完整 URL，而且包括所使用的协议。 例如，选中“index.htm”文档中的“logo.gif”图片 ，打开属性面板，在“链接(L)”直接输入 /index.asp，即可自动生成目 标指向网站下的index.asp文档 的链接。如图5-1-10所示。
网页制作超级链接
创建超级链接的方法
• • • • • • 在站点管理器中编辑超级链接 创建锚点链接 创建E-MAIL链接 创建导航条 创建跳转菜单 创建映射图链接
给热点区域创建链接
• 在属性面板的“链接”文本框中输入被链 接的页面路径“../travel/guangdong.htm‖， 该页面就是单击热点时所要链接的去向。
创建导航条
• 在网页上选择插入导航条的位置 • 在插入菜单里选择插入交互式图像——》 导航条命令 • 屏幕上出现对话框 • 按屏幕提示操作（事先准备好作为按钮的 四张图片）
• （3）在“目标”域选择链接目标的载入位 置为“_blank‖ 。
注意
• 在默认情况下，链接的文件在当前窗口或框架中 被打开。要使被链接的文件（网页、网站主页、 图像）显示在其它地方，需要从属性面板的目标 域弹出菜单上选择一个选项： • _blank 被链接文件在新窗口中打开； • _parent 将被链接文件载入到父框架集或包含该 链接的框架窗口中； • _self 被链接文件在与该链接相同的框架或窗口中 打开（默认窗口无须指定）； • _top 将被链接文件载入到整个浏览器窗口并删除 所有框架。
• 在同一网页内有长文档。比如，人物传记、 小说连载等。
锚点链接分两步来实现
• 第一步: 将网页的某一处设置为锚点， 并为其命名；
• 第二步: 在源端点处建立该锚点的超级 链接。
设置锚点的操作步骤如下
• 为灭绝师太设置锚点
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
第五讲制作包含超级链接和AP Div的网页【操作准备】1．创建1个本地站点（1）创建所需的文件夹，拷贝所需的资源（2）启动Dreamweaver CS6（3）创建本地站点2．创建网页文档album0502.html3．创建网页文档jbx.html4．创建网页文档scroll_pic.html【引导训练】【任务5-1】制作包含超级链接的展示张家界景点的网页本单元“引导训练”的任务卡如表5-1所示。
表5-1单元5“引导训练”任务卡【任务5-1-1】创建网页文档0501.html【任务描述】（1）创建网页文档0501.html。
（2）在网页中依次插入6个表格：表格1（1行1列）、表格2（1行3列）、表格3（1行1列）、表格4（2行3列）、表格5（1行1列）和表格6（4行1列）。
（3）在表格1中插入SWF动画“01.swf”；在表格2中输入超链接文字；在表格3中插入图像“map01.jpg”；在表格4中插入多个嵌套表格，在各个嵌套表格中分别输入文字和插入图像；在表格5中插入浮动框架；在表格6中分别输入超链接文字和版权信息。
【任务实施】1．新建网页文档0501.html（1）在“单元5”站点文件夹task05-1中，通过【新建文档】对话框或者直接使用【新建文件】快捷菜单创建1个名称为“0501.html”的网页文档。
（2）设置网页标题在【文档】工具栏的“标题”文本框直接输入网页标题“张家界风光”即可，如果需要设置网页的其他页面属性，单击【属性】面板【页面属性】按钮，打开【页面属性】对话框，在该对话框中设置页面属性即可，这里只将“链接”的“下划线样式”设置为“仅在变换图像时显示下划线”，其他的属性保持默认其设置不变。
2．插入表格1（1）插入表格1在网页中插入1个1行1列的表格1，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。
该表格单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”，“宽”设置为“780像素”，“高”设置为“140像素”。
（2）在表格1中插入SWF动画将光标置于表格1的单元格中，插入文件夹“flash”中的SWF动画“01.swf”，将该SWF动画的“宽”设置为“780像素”，“高”设置为“140像素”。
（3）保存网页，预览其效果。
3．插入表格2在表格1的下方插入1个1行3列的表格2，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，行高设置为“32像素”，背景图像设置为文件夹“images”中的图像“bg01.gif”。
将表格2第1列和第3列的列宽设置为“20像素”，将表格2第2列单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。
在表格2第2列单元格中输入以下文字“首页| 张家界森林公园| 天子山自然保护区| 索溪峪自然保护区| 黄龙洞| 宝峰湖| 张家界其他景点”。
设置这些文字的大小为“10点数(pt)”、加粗，文字颜色设置为“#FFFFFF”，样式名称命名为style1。
保存该网页，预览其效果。
4．插入表格3106在表格2的下方插入1个1行1列的表格3，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，行高设置为“200像素”。
将表格3单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。
在表格3的单元格中插入文件夹“task05-1\images”中图像“map01.jpg”，“替换”文本设置为“张家界导游图,张家界地图,张家界景区示意图”。
将表格3中所插入的图像的“宽”设置为“780像素”，“高”设置为“400像素”。
保存网页，预览其效果。
5．插入表格4（1）插入表格4且设置其属性在表格3的下方插入1个2行3列的表格4，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。
将表格4第1列的“宽”设置为“178像素”，第2列的“宽”设置为“2像素”，第3列的“宽”设置为“600像素”，注意切换到网页的【代码视图】窗口，将第2列两个单元格的空格符号“ ”删除，否则第2列的宽度尺寸设置会无效。
将表格4第1列的两个单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“顶端”。
将表格4第3列单元格的水平对齐方式设置为“居中对齐”。
（2）添加HTML代码，设置表格4的属性（3）合并单元格并设置背景颜色将表格4第2列的两个单元格合并为1个单元格，同样将表格4第3列的两个单元格合并为1个单元格。
将表格4第2列合并后的单元格的背景颜色设置为“#CCCCCC”。
（4）插入嵌套表格4-1在表格4第1列的上方单元格中插入1个3行1列的表格4-1，该表格的“宽”设置为“175像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。
（5）设置嵌套表格4-1的属性将表格4-1第2行的单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。
将表格4-1第1行的“高”设置为“43像素”，第2行的“高”设置为“85像素”，第3行的“高”设置为“20像素”。
将表格4-1第2行单元格的背景图像设置为文件夹“images”中的图像“02.jpg”。
（6）在表格4-1的单元格中插入图像在表格4-1第1行单元格中插入文件夹“images”中的图像“01.jpg”，在第3行单元格中插入文件夹“images”中的图像“03.jpg”。
（7）在表格4-1第2行的单元格中插入浮动框架切换到网页0501.html【代码视图】窗口，在表格4-1第2行单元格的HTML标签<td>与</td>之间输入以下HTML代码：<iframe src="webpage/show_pic.html" marginwidth="0" width="112" height="85" align="middle" scrolling="no" >天子山风光</iframe>（8）插入嵌套表格4-2在表格4第2行第1列的单元格中插入1个7行1列的表格4-2，该表格的“宽”设置为“90%”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。
将表格4-2第1行的“高”设置为“45像素”，第1行的单元格的水平对齐方式设置107为“居中对齐”，垂直对齐方式设置为“居中”，在该单元格中插入文件夹“images”中的图像“05.jpg”，然后输入两个空格，再输入文字“张家界景点大全”，将所输入文字大小设置为“16像素”，颜色设置为“#66CCFF”，样式名称命名为style2。
将表4-2的第3、5行的行高设置为“6像素”，第7行的行高设置为“35像素”，将所有行单元格的水平对齐方式设置为“居中对齐”，将第7行单元格的“垂直”对齐方式设置为“居中”。
分别将文件夹“text”中文本文件“0501.txt”中“张家界景点大全”相应的文本内容拷贝到表格4-2的第2、4、6行中，在合适位置换行。
在第7行中输入文字“【下载更多的图片】”，将所有文字的大小设置为“10点数(pt)”，样式名称命名为style3。
将文字“【下载更多的图片】”的颜色设置为“#9933CC”，样式名称命名为style31。
（9）插入嵌套表格4-3在表格4第3列的单元格中插入1个6行1列的表格4-3，该表格的“宽”设置为“96%”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”。
将表格4-3的第1、3、5行的行高设置为“40像素”。
在第1、3、5行的单元格中插入文件夹“images”中的图像“04.jpg”，并将该图像的“宽”设置为“580像素”，“高”设置为“40像素”。
分别将文件夹“text”中文本文件“0501.txt”中“张家界景区介绍”相应的文本内容拷贝到表格4-2的第2、4、6行中，并且文字的大小设置为“10点数(pt)”，居左对齐，样式名称命名为style4。
将第2行中段首文字“张家界国家森林公园”、第4行中段首文字“天子山自然保护区”、第6行中段首文字“索溪峪自然保护区”的颜色设置为“#339933”、粗体，样式名称命名为style41。
在第4行的单元格中合适的位置插入文件夹“images”中的图像“tzs.jpg”，将该图像的“宽”设置为“150像素”，“高”设置为“130像素”，“垂直边距”设置为“6像素”，“水平边距”设置为“10像素”，边框设置为0，居左对齐，在“替换”列表框中输入文本“千山万壑，云雾缭绕”，并且拖动该图像到合适的位置。
在第6行的单元格中合适的位置插入文件夹“images”中的图像“bfh.jpg”，将该图像的“宽”设置为“170像素”，“高”设置为“122像素”，“垂直边距”设置为“6像素”，“水平边距”设置为“10像素”，边框设置为0，居右对齐，在“替换”列表框中输入文本“云梯百丈上天台，高峡平湖一鉴开”，并且拖动该图像到合适的位置。
在第6行中图像的下方输入文字“【回到页首】”，可以通过输入空格调整文字的位置，将文字大小设置为“12点数(pt)”，颜色设置为“#66CCFF”。
6．插入表格5在表格4的下方插入1个1行1列表格5，该表格的“宽”设置为“780像素”，“边框”、“间距”和“填充”都设置为“0”，“对齐”方式设置为“居中对齐”，将该表格的行高设置为“76像素”。
切换到【代码视图】窗口，在表格5的标签<table …>内输入以下代码：style="border: 2px solid #CCCCCC; border-width:0 2 2 2 ;"，这些代码用于设置表格边框线。
在单元格的标签<td>与</td>之间输入以下代码：<iframe src="webpage/scroll_pic.html" name="scrollimg" width="100%" marginwidth="0" height="76" marginheight="0" align="middle" scrolling="no" frameborder="0" id="scrollimg" allowtransparency="true" application="true">张家界风光</iframe>这些代码用于插入浮动框架。