网页超链接与导航讲解.ppt

《网页设计与制作案例教程》（第2版） 6.3 学习任务：网页导航概述 8．个性化导航 有些网页的导航以体现网站的个性为主，不拘一格，采用各种样式力求使网站与众不同，如图标样式的导航、气泡样式的导航、三维样式的导航，以及JavaScript动画导航等。 《网页设计与制作案例教程》（第2版） 6.3 学习任务：网页导航概述 6.3.3 网页导航方向 1．横向导航 横向导航是网页导航，尤其是网页主导航采用最多的形式，而且主导航的项目个数通常在5～12个。对于有非常复杂的信息结构且有很多模块组成的网站来说，横向的导航应该使用水平栏导航和下拉菜单导航相结合的方式进行构建。 《网页设计与制作案例教程》（第2版） 6.3 学习任务：网页导航概述 2．纵向导航 纵向导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。由于纵向导航菜单可以不受页面限制，所以可以含有很多链接，但是需要注意，纵向导航太长时可能将用户淹没。 3．不规则导航 不规则导航打破了网页由表格排版造成的“横平竖直”的布局，可能是倾斜的，也可能是波浪型的，甚至是分散的。 6.4 案例3 用CSS设计制作网页导航 学习目标：掌握用CSS创建网页导航的方法。 知识要点：用CSS创建网页导航的方法。案例效果如图6-28所示。 《网页设计与制作案例教程》（第2版） 图6-28 CSS设计网页导航效果 《网页设计与制作案例教程》（第2版） 传统制作网页导航通常使用表格技术，将导航项目分别放置在表格的单元格中，然后设置表格和单元格的样式。而用CSS设计制作网页导航，则把导航项目看做列表，用ul标签进行定义，然后设置列表项的样式。 具体步骤： （1）添加导航项目。 输入导航项目，将其设置为列表并创建空超链接。 6.4 案例3 用CSS设计制作网页导航 《网页设计与制作案例教程》（第2版） （2）用CSS定义导航样式。 其中，设置li列表项左浮动，从而使下一个列表项在右侧贴近自身，每一个li列表项应用此规则，就会形成水平排列的样式。 （3）应用导航项CSS规则。 （4）用CSS定义当前导航项样式。 （5）应用当前导航项CSS规则。 6.4 案例3 用CSS设计制作网页导航 《网页设计与制作案例教程》（第2版） 6.5 实训 设计制作点点星空网站页面 1．实训目的 掌握在网页中创建超链接的几种方法； 掌握在网页中创建图像地图的方法； 掌握用CSS设置超链接样式的方法； 掌握用CSS制作网页导航的方法。 2．实训要求及网页设计效果 要求在所提供的素材页面中分别创建文档链接、锚点链接、电子邮件链接、空链接和脚本链接；根据图像的内容设置不同的图像热点，并为热点添加超链接。然后利用CSS为页面添加横向和纵向导航。 《网页设计与制作案例教程》（第2版） 参考效果如图6-32、图6-33所示。 6.5 实训 设计制作点点星空网站页面 图6-32 点点星空首页效果 图6-33 点点星空狮子座页面效果 谢谢！ 《网页设计与制作案例教程》（第2版） 《网页设计与制作案例教程》（第2版） 《网页设计与制作案例教程》（第2版） 第6章 网页超链接与导航 《网页设计与制作案例教程》（第2版） 本章学习内容 6.1 案例1 设计制作过节乐网页 6.2 案例2 图像地图——设计国家地理网站页面 6.3 学习任务：网页导航概述 6.4 案例3 用CSS设计制作网页导航 6.5 实训 设计制作点点星空网站页面 《网页设计与制作案例教程》（第2版） 6.1 案例1 设计制作过节乐网页 学习目标：认识超链接，掌握各类超链接的作用与创建方法，并设置其CSS样式。 知识要点：超链接的分类，路径的设置，创建文档链接、锚点链接、电子邮件链接、空链接和脚本链接的方法，用CSS设置超链接样式的方法。案例效果如图6-1所示，请单击页面上的超链接，观察链接效果。 《网页设计与制作案例教程》（第2版） 6.1 案例1 设计制作过节乐网页 《网页设计与制作案例教程》（第2版） 图6-1 过节乐网页效果 《网页设计与制作案例教程》（第2版） 6.1.1 超链接概述 1．认识超链接 所谓超链接是指从某个网页元素指向一个目标的连接关系。这个链接目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一幅图像、一个电子邮件地址、一个文件、甚至是一个应用程序。在一个