第五讲制作包含超级链接和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习题参考答案

2）WWW是建立在客户机／服务器模型之上的。

3）WWW是以超文本标注语言HTML(Hyper Markup Language)与超文本传输协议HTTP(Hyper Text Transfer Protocol)为基础。

4）WWW能够提供面向Internet服务的、一致的用户界面的信息浏览系统。

5）WWW浏览提供界面友好的信息查询接口。

(2)网页的基本元素有哪些？答：组成网页的元素主要有文字、图像、声音、动画、视频、超链接以及交互式处理等。

它们的特点如下：文字：网页中的大多数信息主要以文本方式显示，文字是网页的主体，负责传达信息的功能。

图像：图片给网页添加了色彩，使网页做到了图文并茂，形象生动。

动画：动画是动态的图形，添加动画可以使网页更加生动。

网页中支持的视频文件格式主要有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章创建网页超链接
教学目的
介绍了超链接的概念掌握超链接和导航条的创建方法会在网页中灵活使用超链接
5.1 超链接的基本概念
一个网站肯定有很多的页面，如果页面之间彼此
是独立的，那么网页就好比是孤岛，这样的网站是无法运行的，没有意义的。为了建立起网页之间的联系我们需要实现从一个网页指向另一个目标的跳转，这个目标可以是另一个网页，也可以是同一个网页上的不同位置，还可以是一张图片、一个电子邮件地址、一个文件或一个绝对定位的元素，甚至是一个应用程序，这就是所谓的超链接。在创建超链接之前，首先要弄清楚目录和路径的关系，只有这样才可以轻松管理网站的链接，创建出结构清晰明确的网站。
本章小结

为了把Internet上众多的网站和网页联系起来，将其构成一个整体，就要在网页中加入链接。这样一来，能让浏览者很轻松地浏览自己想看的内容。所以我们在整合网站内容后，系统地考虑站点链接的易用性、条理性尤为重要。总之，掌握超链接的制作是基础，如何合理的安排、灵活的运用它才是关键。
5.1.1 URL概述
URL（统一资源定位器）主要用于指定网上资源

的位置和方法。 URL一般由三个部分组成，即协议、主机和域（1）协议，又成服务方式，如http、ftp、telnet 等。（2）主机：即存放资源的主机的IP地址，有时也包括端口号，如：qq (3)域：主机的具体地址，包括路径和文件名等。
5.4创建跳转菜单
跳转菜单是页面中的弹出式菜单，在菜单
中列举出链接到文件或文件夹的选项。
5.5创建导航条
导航条由按钮、图像或一组图像组成。导
航条就像网站的桥梁，网站通过它把站点中的各个页面联系起来，使浏览者更加方便清晰地在各个页面间进行切换，是网站的结构更加层次分明。

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列单元格的水平对齐方式设置为“居中对齐”，垂直对齐方式设置为“居中”。

设置这些文字的大小为“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>这些代码用于插入浮动框架。