15商城网站布局与编排(六).docxVIP

《网站内容编辑》教案教学课题（章、节或主题）商城网站布局与编排（六）{板书}计划课时2周次8教学方法讲授教具多媒体教学目的掌握栏目编辑和首页轮播。重点难点栏目编辑教学过程复习提问LOGO的制作工具有哪些？引入新课首页中除了左上角LOGO外，接下来就是栏目和首页轮播。讲授新课栏目编辑{板书} (一)什么是网页导航{板书}网页导航(navigation是指通过一定的技术手段，为网页的访问者提供一定的途径，使其可以方便地访问到所需的内容。网页导航表现为网页的栏目菜单设置、辅助菜单、其他在线帮助等形式。网页导航设置是在网页栏目结构的基础上，进一步为用户浏览网页提供的提示系统。商城网站的信息量较大，分类众多，多采用在主导航之外，设置辅助性导航的方式；为保证网站的整体统一，方便用户快速浏览，各级页面均采用相同主导航。(二)网页导航的要求{板书}网页导航要求清晰明了、突出，层级分明。(三)首页中常用网页导航的位置和特点{板书}1.顶部水平栏导航。顶部水平栏导航是当前两种最流行地网站导航菜单设计模式之一。它最常用于网站的主导航菜单，且最通常地放在网站所有页面的网站头的直接上方或直接下方。顶部水平栏导航设计模式有时伴随着下拉菜单，当鼠标移到某个项上时弹出它下面的二级子导航项。 (1)顶部水平栏导航的一般特征。导航项是文字链接，有按钮形状，或者选项卡形状。水平栏导航通常直接放在邻近网站logo的地方。 (2)顶部水平栏导航的缺点。顶部水平栏导航最大的缺点就是它限制了你在不采用子级导航的情况下可以包含的链接数。对于只有几个页面或类别的网站来说，这不是什么问题，但是对于有非常复杂的信息结构且有很多模块组成的网站来说，如果没有子导航的话，就不是一个完美的主导航菜单选择。 (3)何时使用顶部水平栏导航。顶部水平栏导航对于只需要在主要导航中显示5-12个导航项的网站来说是非常好的。这也是单列布局网站的主导航的唯一选择(除了通常用于二级导航系统的底部导航)。当它与下拉子导航结合时，这种设计模式可以支持更多的链接。2.竖直/侧边栏导航。侧边栏导航的导航项被排列在一个单列，一项在一项的上面。它经常在左上角的列上，在主内容区之前—根据一份针对从左到右习惯读者的导航模式的可用性研究，左边的竖直导航栏比右边的竖直导航表现要好。侧边栏导航设计模式随处可见，几乎存在于各类网站上。这有可能是因为竖直导航是当前最通用的模式之一，可以适应数量很多的链接.它可以与子导航菜单一起使用，也可以单独使用。它很容易用于包含很多链接的网站主导航。侧边栏导航可以集成在几乎任何种类的多列布局中。 (1)侧边栏导航的一般特征。①文字链接作为导航项很普遍(包含或不包含图标);②很少使用选项卡(除了堆叠标签导航模式);③竖直导航菜单经常含有很多链接。 (2)竖直/侧边栏导航缺点。因为可以处理很多链接，当竖直菜单太长时有时可能使用户厌烦。尝试限制你引人的链接数，取而代之可以使用飞出式子导航菜单以提供网站的更多信息。同时考虑将链接分放在直观的类别当中，以帮助用户很快地找到感兴趣的链接。 (3)何时使用竖直/侧边栏导航。竖直导航适用于几乎所有种类的网站，尤其适合有一堆主导航链接的网站。3.选项卡导航。选项卡导航可以随意设计成任何你想要的样式，从逼真的，有手感的标签到圆滑的标签，以及简单地方边的标签等。它存在于各种各样的网站里，并且可以纳人任何视觉效果。选项卡比起其他类别的导航有一个明显的优势:它们对用户有积极的心理效应。人们通常把导航与选项卡关联在一起，因为他们曾经在笔记本或资料夹里看见选项卡，并且把它们与切换到一个新的章节联系在一起。这个真实世界的暗喻使得选项卡导航非常直观。 (1)选项卡导航的一般特征。①样子和功能都类似真实世界的选项卡(就像在文件夹，笔记本等中看到的一样);②一般是水平方向的但也有时是竖直的(堆叠标签)。(2)选项卡导航的缺点。选项卡最大的缺点是它比简单的顶部水平栏更难设计。它们通常需要更多的标签，图片资源以及CSS，具体根据标签的视觉复杂度而定。选项卡的另一个缺点是它们也不太适用于链接很多的情况，除非它们竖直地排列(即使这样，如果太多的话它们还是看起来很不合适)。(3)何时使用选项卡导航。选项卡也适合几乎任何主导航，虽然它们在可以显示的链接上有限制，尤其在水平方向的情况下。将它们用于拥有不同风格子导航的主导航的较大型网站是个不错的洗项。4.飞出式菜单和下拉菜单导航。飞出式菜单(与竖直/侧边栏导航一起使用)和下拉菜单(一般与顶部水平栏导航一起使用)是构建良好导航系统的好方法。它使得你的网站整体上看起来很整洁，而且使得深层章节很容易被访问.他们通常结合水平，竖直或是选项卡导航一起使用，作为网站主导航系统的一部分。(1)飞出式菜单和下拉菜单导航的一般特征。①用于多级信息结构;②使用Ja