提供能够适应任意大小文字或者 任意数量内容的站点导航栏.PDFVIP

提供能够适应任意大小文字或者 任意数量内容的站点导航栏 一个网站的导航栏常常成为其设计方案的支柱。导航栏是一个重要且关键的页面组 件。传统情况下，W eb 设计师会打开一个他熟悉的图片编辑软件，细心地绘制 一些 按钮、选项卡和塞在嵌套的table中的文本。之后，再用J avaScr ipt 触发通 过变换 图片实现的翻转效果。最后，成品可能看起来还不错，但是潜伏在这表面底 下的内容 可就不是那么吸引人了。接下来，我们会去研究一种创建W e b 站点导 航栏的常用方 法，到那时您就会发现这一点。 下面仔细研究一个例子：使用传统的方法设计精美的基于图片的选项卡式导航栏。 分析完这个例子的不足之后，我们将改正这些不足并构造出一个效果类似的但却无懈 可击的设计方法，它仅仅使用了一些简洁而规范的HTML 代码、三张小图片以及CSS 。 2.1 常见的方法 我决定使用来自LanceA 网站的主导航栏的选项卡作为我们这一节的例 子。这主要有两个原因：首先，我是La n c e Arm str on g 的车迷；其次，也是更重 要 的一点，是我们可以使用CSS 对这个设计案例进行重构，从而增进它的灵活性。 我们 的任务是以一种富有创造性的方式来使用CSS ，这样不但可以消除大块的冗余代 码，还 可以使站点的可维护性和适应性大大增强。 第2 章 可伸缩的导航栏 25 让我们把它放大，剖析一下构成选项卡的各个对象。见图2 - 1 。 图2-1 L an ce Ar m stron g. com 页面上设计精美的选项卡导航栏， 可显示出各选项卡的选中和未选中状态 2 .1 . 1 选项卡 在这些选项卡中有一处精妙的细节，使其比普通的边框背景式导航栏更加吸引人。 对于每一个选中和未选中状态，选项卡在其上面部分有轻柔的颜色渐变效果，垂直方 向上颜色逐渐淡出直至与背景色相融合：白色代表选中状态、淡黄则代表未选中 状 态。在每个选项卡的顶部有一条单像素的高亮区域。这部分要比其他的阴影处稍 亮一 些，这增加了一点立体效果，就好像有一个光源从页面顶部照下来一样( 图2 - 2 ) 。 单像素的高亮区 颜色渐 图2- 2 这是选项卡每一个状态的设计细节的特写。注意在每一个选项卡的顶部都有一条 纤细的高亮区域，并带有颜色渐变效果，以此模拟出立体及光源的效果 这些选项卡看起来确实很酷。尽管设计的好与坏更多是一种主观判断，但是我们 至少应该承认，LanceArmstr 的设计师一定花费了大量的时间，才使得这个导 航栏既吸引人又很实用。这也是选择这个实例的原因。 在LanceA 上，每一组选项卡都是单独的一张图片，包括了各个选项 卡的选中和未选中的不同状态。具体显示哪张图片，要由当前所浏览的页面决定。这 些图片都包括了站点的logo 。图2 - 3 展示的是所使用的四张图片中的任意一张。 图2-3 一张单独的大图片中包括了整套的选项卡和lo go 。站点还至少 包括了三张类似的图片，每一张都有一个选项卡是高亮的 26 无懈可击的We b 设计 2 . 1.2 通常的翻转效果 L a n c eAr m str on g s .c om 的导航栏并没有图片翻转的特效，但是通过增加一 些 v aScr ipt 代码，并预先加载另外一组图片，翻转效果就可以实现了。但是，这会增 加 大量的代码，在2.3 节中我们将对其进行重构，那时会对这组选项卡添加翻转效果。 我们 将仅仅通过几行C SS 来实现，从而避免了增加更多的代码、图片和J a va Scr ip t 。 所以， 从表面上看，我们有了一组精心设计的，与站点整体外观及感觉相一致的 导航