导航个性鼠标指针

《网页设计与制作案例教程》(第3版)http://www.
phei.
com.
cn第6章网页超链接与导航《网页设计与制作案例教程》(第3版)本章学习内容6.
1案例1设计制作过节乐网页6.
2案例2图像地图——设计国家地理网站页面6.
3学习任务:网页导航设计6.
4案例3设计制作网页导航6.
5实训设计制作点点星空网站页面《网页设计与制作案例教程》(第3版)6.
1案例1设计制作过节乐网页学习目标:认识超链接,掌握各类超链接的作用与创建方法,并设置其CSS样式.
知识要点:超链接的分类,路径的设置,创建文档链接、锚点链接、电子邮件链接、空链接和脚本链接的方法,用CSS设置超链接样式的方法.
案例效果如图所示,请单击页面上的超链接,观察链接效果.
《网页设计与制作案例教程》(第3版)图过节乐网页效果6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)6.
1.
1超链接概述1.
认识超链接所谓超链接是指从某个网页元素指向一个目标的连接关系.
在网页中用来创建超链接的元素,可以是一段文字,也可以是一幅图像.
超链接的目标可以是另一个网页,也可以是网页上的指定位置,还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)超链接有以下不同的分类方式:按照链接路径的不同,网页中超链接主要分为内部链接局部链接外部链接按照目标对象的不同,网页中的超链接可以分为文档链接锚点链接电子邮件链接脚本链接空链接6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)2.
超链接路径超链接路径分为绝对路径和相对路径两大类.
绝对路径完整地描述文件存储位置的路径就是绝对路径,如:D:\tu\Rose.
jpg.
但在Internet中,绝对路径是指包括服务器协议和域名的完整URL路径,其一般格式如下:protocol://hostname[:port]/path/[;parameters][query]例如:http://baike.
baidu.
com/view/1496.
htm6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)URL路径格式中各项含义如下.
protocol指定使用的传输协议,主要有http协议,格式为"http://"、ftp协议,格式为"ftp://"、SMTP协议,格式为"mailto:"等.
其中"http://"是应用最广泛的.
hostname[:port]指存放资源的服务器的域名系统主机名或IP地址,方括号中的是端口号,可以省略,如baike.
baidu.
com.
path指路径,由零个或多个"/"符号隔开的字符串,一般用来表示主机上的一个目录或文件地址.
如view/1496.
htm.
[;parameters][query]应用于动态网页的URL中,指定特殊参数和查询,为可选内容.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)相对路径相对路径是指其他文档相对于某文档的存储路径.
在同一个站点内建立链接通常采用相对路径.
6.
1案例1设计制作过节乐网页当前文件目标文件相对路径格式说明contents.
htmlhours.
htmlhours.
html目标文件与当前文件在同一文件夹中tips.
htmlresourses/tips.
html目标文件位于当前文件所在文件夹的下层文件夹中index.
html.
.
/index.
html目标文件位于当前文件所在文件夹的父文件夹中catalog.
html.
.
/products/catalog.
html目标文件位于当前文件所在文件夹的父文件夹的其他子文件夹中《网页设计与制作案例教程》(第3版)在超链接中,如果链接的对象是Internet上其它站点的内容,必须使用完整的URL.
对于链接对象是同一站点中内容时,使用绝对路径的优点是当前网页文件位置改变后,里面的链接还是指向正确的URL,缺点是不利于站点的移植和本地测试.
若使用相对路径,则便于将整个网站进行移植和本地测试,但当前网页文件的位置发生改变时,链接路径也需要更新,否则链接会出错.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)6.
1.
2创建各类超链接1.
文档链接首先选中要创建超链接的文字或图像,创建方法有以下几种:(1)选择"插入→超级链接"菜单命令,或者单击"插入"面板"常用"类别中的"超链接"图标按钮,打开"超级链接"对话框,从中设置文本链接目标和链接目标打开的方式.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)"超级链接"对话框各项含义如下.
文本:设置要创建超链接的文本.
链接:指定链接目标对象的路径,可以直接输入,也可以通过单击后面的【浏览】按钮,打开"选择文件"对话框进行选择.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)目标:指定链接目标打开的窗口,其中,"_blank"表示在新窗口中打开,"_new"也表示在新窗口中打开,"_parent"表示在上级窗口中打开,"_self"表示在当前窗口中打开,"_top"表示在顶层窗口中打开.
默认"_self".
标题:设置超链接的标题.
在浏览器中,当鼠标置于超链接文本上时,将在鼠标后出现一个黄色的浮动框,并显示超链接标题的名称.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)(2)在"属性"面板"HTML"类别中的"链接"文本框中直接输入路径,或者单击"链接"后面的"浏览文件"按钮,在打开的对话框中选择目标文件创建超链接.
(3)在"属性"面板中,将"链接"后面的"指向文件"图标按钮拖曳到"文件"面板中的目标文件上创建链接.
(4)按住键,拖曳鼠标指针到"文件"面板中的"目标文件"上创建链接.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)提示:创建超链接的目标文件不仅可以是网页文件,还可以是其他类型文件,如图像文件、音频文件、视频文件、文本文件等.
单击超链接,目标文件将在浏览器中打开,如果目标文件需要其他应用程序打开,则单击超链接后会弹出"下载文件"对话框,询问用户打开或者保存.
提示:修改超链接的操作步骤与创建超链接相同.
若删除超链接,只要选定超链接对象,将"属性"面板"链接"下拉框中的内容删除即可.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)2.
锚点链接锚点链接的功能是:单击超链接对象后,可以跳转到本页面或其它页面中的指定位置,即命名锚记处.
锚点超链接通常用于长篇文章、技术文档等内容的网页中.
创建锚点链接分为建立命名锚记和创建指向命名锚记的超链接两部分.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)(1)创建命名锚记.
将鼠标光标定位在要设置命名锚记的位置,选择"插入→命名锚记"菜单命令,或者单击"插入"面板"常用"类别中的"命名锚记"图标按钮,或者按下组合键,均能弹出"命名锚记"对话框,在对话框中输入命名锚记的名称.
(2)创建指向命名锚记的超链接.
选中要设置锚点链接的文本或图像,在"属性"面板的"链接"框中,输入一个"#"字符和命名锚记名称,或将"指向文件"图标按钮拖曳到命名锚记处.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)3.
电子邮件链接使用电子邮件链接,可以方便地打开浏览器默认的邮件处理程序进行发送电子邮件操作,收件人地址即为电子邮件链接指定的邮箱地址.
选中要设置电子邮件超链接的文本,选择"插入→电子邮件链接"菜单命令,或者单击"插入"面板"常用"类别中的"电子邮件链接"图标按钮,弹出"电子邮件链接"对话框,在"电子邮件"文本框中输入收件人的电子邮箱地址,单击【确定】按钮完成电子邮件超链接的创建.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)4.
空链接空链接是未指派的链接,主要用于向页面上的对象或文本附加行为.
选中要设置空链接的文本,在"属性"面板的"链接"框中输入"#"或"javascript:;".
例如,可以为空链接添加事件来设置主页.
6.
1案例1设计制作过节乐网页设为主页《网页设计与制作案例教程》(第3版)5.
脚本链接脚本链接能执行JavaScript代码或调用JavaScript函数.
它的作用广泛,能够在不离开当前Web页面的情况下为访问者提供有关某项的附加信息,还可用于在访问者单击特定项时,执行计算、验证表单和完成其他处理任务等.
例如,将网页加入收藏夹,可以添加如下代码.
6.
1案例1设计制作过节乐网页javascript:window.
external.
addFavorite("http://www.
guojiele.
cn","过节乐");《网页设计与制作案例教程》(第3版)6.
1.
3用CSS设置超链接样式选择"修改→页面属性"菜单命令,或单击"属性"面板上的【页面属性】按钮,打开"页面属性"对话框,选择"链接(CSS)"类别,在其中设置链接的字体、大小、链接状态的颜色、以及下划线样式等.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)设置完成后,对应的CSS代码如下.
6.
1案例1设计制作过节乐网页a:link{/*设置超链接对象链接时的样式,颜色为黑色,文本无下划线*/color:#000;text-decoration:none;}a:visited{/*设置超链接对象已访问后的样式,颜色为黑色,文本无下划线*/text-decoration:none;color:#000;}a:hover{/*设置超链接对象变换时的样式,颜色为红色,文本有下划线*/text-decoration:underline;color:#F00;}a:active{/*设置超链接对象活动链接时的样式,颜色为红色,文本无下划线*/text-decoration:none;color:#F00;}《网页设计与制作案例教程》(第3版)CSS样式可以设置超链接不同状态的样式,为此CSS定义了4种伪类:"a:link"设置超链接对象正常显示的样式,即未访问前的样式;"a:visited"设置超链接对象已访问后的样式;"a:hover"设置超链接对象变换时的样式,即鼠标悬停在超链接文本上的样式;"a:active"设置超链接对象活动链接时的样式,即单击超链接并释放超链接之前的样式,此过程时间非常短,通常效果不明显.
6.
1案例1设计制作过节乐网页《网页设计与制作案例教程》(第3版)6.
2案例2图像地图——设计国家地理网站页面学习目标:掌握创建图像地图的方法.
知识要点:图像地图的功能,图像地图的创建.
案例效果如图所示,单击山东、辽宁、湖南省地图区域,分别打开链接的网页.
《网页设计与制作案例教程》(第3版)图国家地理页面效果6.
2案例2图像地图——设计国家地理网站页面《网页设计与制作案例教程》(第3版)所谓图像地图是指已被分为多个区域的图像,这些区域称为热点.
当用户单击某个热点时,会显示其链接的目标文件.
选中要设置热点的图像,单击"属性"面板左下角的热点工具图标按钮,在图像上拖动创建热点.
可以选定【指针热点工具】图标按钮,拖动热点区域的位置或调整热点区域的大小.
绘制一个不规则形状的热点区域时,需要在图像上各个转折点单击一下,最后单击【指针热点工具】按钮封闭此形状.
6.
2案例2图像地图——设计国家地理网站页面《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计本节学习任务认识网页导航,了解网页导航的主要作用、分类与方向.
6.
3.
1网页导航作用网页导航的目的是使网站的层次结构以一种有条理的方式清晰展示,引导用户毫不费力地找到所需信息,让用户在浏览网站过程中不至迷失.
定位显示位置.
展现网站架构.
显示品牌形象.
影响用户体验.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计6.
3.
2网页导航分类1.
水平栏导航水平栏导航是最流行的网站导航设计模式之一,它常用于网站的主导航菜单,用于显示网站的内容分类.
水平栏导航设计模式有时设有下拉菜单,当鼠标移到某个菜单项上时,会弹出对应的二级子导航项.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计2.
垂直栏导航类似水平栏导航,垂直导航也是当前最通用的模式之一,几乎存在于各类网站上.
垂直导航常与子导航菜单一起使用,也可以单独使用.
垂直导航多用于包含很多链接的网站主导航.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计3.
选项卡导航选项卡导航几乎可以设计成用户想要的任何样式,如立体效果的标签、圆角标签、以及简单的方边标签等.
选项卡导航存在于各种各样的网站中,一般是水平方向的,也有竖直的(堆叠标签).
选项卡导航对用户有积极的心理效应,但不太适用于链接很多的情况.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计4.
菜单导航菜单导航主要有弹出式菜单和下拉菜单两种.
弹出式菜单(一般与垂直栏导航一起使用)和下拉菜单(一般与水平栏导航一起使用)是构建健壮的导航系统的良好方法.
它使得网站整体上看起来很整洁,而且使得深层章节很容易被访问.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计5.
面包屑导航面包屑导航是二级导航的一种形式,辅助网站的主导航系统.
面包屑对于多级别、具有层次结构的网站特别有用,它可以帮助访客了解到当前自己在整个网站中所处的位置.
如果访客希望返回到某一级,只需要点击相应的面包屑导航项即可.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计6.
标签导航标签经常被用于博客和新闻网站,它们常常被组织成一个标签云,导航项可能按字母顺序排列,或者按流行程度排列.
标签导航也多用于二级导航,可以提高网站的可发现性和探索性.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计7.
页脚导航页脚导航通常用于次要导航,而且通常用于放置其他地方都没有的导航项.
页脚导航一般使用文字链接,偶尔带有图标.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计8.
个性化导航有些网页的导航以体现网站的个性为主,不拘一格,采用各种样式力求使网站与众不同,如图标样式的导航、气泡样式的导航、三维样式的导航,以及JavaScript动画导航等.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计6.
3.
3网页导航方向1.
横向导航横向导航是网页导航,尤其是网页主导航采用最多的形式,而且主导航的项目个数通常在5~12个.
对于有非常复杂的信息结构且有很多模块组成的网站来说,横向的导航应该使用水平栏导航和下拉菜单导航相结合的方式进行构建.
《网页设计与制作案例教程》(第3版)6.
3学习任务:网页导航设计2.
纵向导航纵向导航几乎适用于所有种类的网站,尤其适合有一堆主导航链接的网站.
由于纵向导航菜单可以不受页面长度限制,因此可以含有很多链接.
但是需要注意,纵向导航太长、导航项目太多时,容易削弱用户对已浏览项目的印象.
纵向导航可以放在页面的左侧,也可以放在右侧,但是根据用户从左向右的习惯,左边的纵向导航比右边的纵向导航效果要好.
3.
不规则导航不规则导航打破了网页由表格排版造成的"横平竖直"样的布局形式,它可能是倾斜的,也可能是波浪型的,甚至是分散的.
不规则导航可以充分体现网站的个性与特色,带给用户强烈的视觉冲击,但是,不适合信息量特别大,需要有较多分类的网站.
《网页设计与制作案例教程》(第3版)6.
4案例3设计制作网页导航学习目标:掌握用CSS创建网页导航的方法.
知识要点:用CSS创建网页导航的方法.
案例效果如图所示.
图CSS设计网页导航效果《网页设计与制作案例教程》(第3版)传统制作网页导航通常使用表格技术,将导航项目分别放置在表格的单元格中,然后设置表格和单元格的样式.
而用CSS设计制作网页导航,则把导航项目看做列表项目,用标签进行定义,然后设置列表项与超链接的样式,这样不仅将导航项目与样式进行了分别控制,更有利于导航项目的增删与修改.
具体步骤:(1)添加导航项目.
将光标定位在要添加导航项目的位置,输入导航项目,将其设置为列表,并命名列表的ID.
6.
4案例3设计制作网页导航《网页设计与制作案例教程》(第3版)(2)用CSS定义导航项目横向样式.
其中,设置列表项目向左浮动(float属性为left),从而使下一个列表项在右侧贴近自身,每一个列表项应用此规则,就会形成水平排列的样式.
并取消列表符号显示.
6.
4案例3设计制作网页导航#navli{float:left;list-style-type:none;}《网页设计与制作案例教程》(第3版)6.
4案例3设计制作网页导航(3)为导航项创建超链接并设置链接样式.
设置导航项超链接显示为方块样式(display属性为block),这样可以使背景颜色等样式效果填满它所在的整个列表项.
同时设置颜色、块大小、间距等所需属性,对应代码如下.
#navlia{color:#000;text-decoration:none;background-color:#ADB96E;text-align:center;display:block;height:22px;width:97px;margin-left:2px;padding-top:4px;}《网页设计与制作案例教程》(第3版)6.
4案例3设计制作网页导航(4)用CSS定义当前导航项样式.
(5)为当前导航项应用CSS规则.
将光标定位在所需列表项中,如"地图",单击状态栏标签选择器"",在"属性"面板"CSS"类别的"目标规则"下拉列表框中选择"current",或在"属性"面板"HTML"类别的"类"下拉列表框中选择"current",即对列表项应用CSS规则.
#nav.
currenta{background-color:#093;color:#FF0;}《网页设计与制作案例教程》(第3版)6.
5实训设计制作点点星空网站页面1.
实训目的掌握在网页中创建超链接的几种方法;掌握在网页中创建图像地图的方法;掌握用CSS设置超链接样式的方法;掌握用CSS制作网页导航的方法.
2.
实训要求及网页设计效果要求在所提供的素材页面中分别创建文档链接、锚点链接、电子邮件链接、空链接和脚本链接;根据图像的内容设置不同的图像热点,并为热点添加超链接.
然后利用CSS为页面添加横向和纵向导航.
《网页设计与制作案例教程》(第3版)参考效果如图所示.
6.
5实训设计制作点点星空网站页面图点点星空首页效果图点点星空狮子座页面效果《网页设计与制作案例教程》(第3版)谢谢!