中职高教版高二《网页设计与制作》任务3.1 制作首页导航条课件

项目3 制作网站导航系统 ——任务3.1 制作首页导航条 高等教育出版社 Higher Education Press 任务3.1 制作首页导航条 01 活动1 实现网站导航条的布局 02 活动2 制作鼠标经过效果 目录 高等教育出版社 Higher Education Press 任务1 制作首页导航条 01 活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 活动3.1 实现网站导航条的布局 网站建设中，导航栏的设计是关键。一个好的导航栏设计不仅能更好地提升用户体验，还有利于搜索引擎蜘蛛抓取。导航栏的设置是为了更方便顾客在更短的时间里找到他们需要的产品。 海澜之家首页导航 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 【网站导航】 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 （1）打开浏览器。 （2）点开链接。 （3）浏览网页。 【作业步骤】 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 淘宝首页导航 【举例】 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 范例1 范例2 范例3 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 【小助手1】导航的分类 （1）网站栏目导航 （2）站内功能服务导航 （3）产品分类导航 （4）当前位置导航 （5）网站持有方信息导航 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 【小助手2】导航条设计原则 （1） 对商务网站的导航进行适当的组织与分类。 （2） 导航利于蜘蛛的识别，不用图片导航，优先选取文字导航。 （3） 导航栏目设置不宜过多，依据围绕网站主题的用户需求来制定，切忌放入相关性很低的栏目。 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 【知识链接】如何让蜘蛛更容易抓取页面 （1）网站权重 内容质量高，年龄大的网站被认为权威的评估评价比较高的网站，这种网站上的页面被抓取的几率和蜘蛛抓取的深度一般都比较高。 （2）更新频率 蜘蛛喜欢新鲜的内容，蜘蛛每次爬行都会把页面数据存储起来。 （3）网站结构 包括物理结构和逻辑结构，网站结构调整好了，蜘蛛爬起来比较顺畅，所以会更受蜘蛛的喜爱。 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 活动1 实现网站导航条的布局 【知识链接】如何让蜘蛛更容易抓取页面 （4）导入链接数量与质量 一个网站导入链接多，蜘蛛就会认为这个网站对人们有用，会给予很高的权重，抓取更多更深入的页面。 （5）与首页点击距离 网站的首页有大量的外部链接，内部链接也有大量的锚文本指向首页，并且更新的时候一般都注重首页的更新，所以一般情况下首页的权重都比较高蜘蛛，抓取的频率比较高。 项目3 制作网站导航/任务3.1 制作首页导航条/活动1 实现网站导航条的布局 高等教育出版社 Higher Education Press 任务3.1 制作首页导航条 02 活动2 制作鼠标经过效果 高等教育出版社 Higher Education Press 项目3 制作网站导航/任务3.1 制作首页导航条/活动2 制作鼠标经过效果 活动2 制作鼠标经过效果 【鼠标经过效果】 我们在浏览网页时，经常看见当鼠标指针经过导航栏时，对应的导航文字变色变粗或其背景色变成另一种颜色，甚至弹跳出另一张图片，这些就是网页中常见的鼠标经过效果。在网页制作中，导航条中鼠标经过效果是最常见的鼠标效果。 高等教育出版社 Higher Education Press 项目3 制作网站导航/任务3.1 制作首页导航条/活动2 制作鼠标经过效果 活动2 制作鼠标经过效果 【作业步骤】 （1）打开Dreamweaver软件，新建站点，放入资源包文件夹“项目三/任务3.1.2” 作为站点文件夹，打开 “index.html”文件。 （2）制作“首页”图片导航鼠标经过图