提升Web设计：无懈可击的图片选项卡导航优化 - CSDN文库

需积分: 10 103 浏览量更新于2024-07-28 收藏 502KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

28 无懈可击的Ｗｅｂ设计（第２版）

2.1.2　通常的翻转效果

LanceArmstrongs.com 的导航栏并没有图片翻转的特效，但是通过增加一些

JavaScript 代码，并预先加载另外一组图片，也可以实现翻转效果。但是，这会增

加大量的代码，在 2.3 节中我们将对其进行重构，届时会对这组选项卡添加翻转效

果。但我们并没有增加过多的代码、图片和 JavaScript，而是仅仅通过几行 CSS 来实

现的。

从表面上看，这是一组经过了精心设计的，与网站整体外观一致的选项卡导航

栏。可以单击任意选项卡来浏览相应的网站内容，每个选项卡都有相应的文字标识。

现在我们要深入地去研究一下，摆脱掉束缚，探寻一种能够达到近似设计效果的替代

方法。

２．２　为什么这样做不是无懈可击的

那么问题出在哪儿？我们绝非是想嘲弄 LanceAarmstrong.com 的设计师—— 他们所

使用的方法，其实互联网上千千万万个其他站点也在使用。我们仅仅想用这个站点作为

一个示范，首先主要是因为它在视觉上很吸引人；其次，用CSS 和有效的 HTML 代码来

重构这个站点相对比较容易。那么现在，就让我们先指出它都有哪些不足吧。

2.2.1　堆积如山的代码

那些基于 JavaScript 和图片的导航栏的通病就是代码过多，这些代码负责布局和产

生动态的效果(例如，用翻转效果表示状态转换)。通常，每个选项卡都是剪切好的图

片，再使用一系列的嵌套表格，空白的GIF填充图片(用于在页面对象之间产生空白效果

的透明图片)，外加一些不必要的 HTML 代码以达到像素级精确的布局，这就是当今常

见的做法。这样的结果就是会产生一大堆冗余代码，造成页面下载时，文件体积的增大、

下载时间的增加。

以 LanceArmstrong.com 为例，一幅图片包括了 4 个选项卡，使用了图片映像使图

片中的每一个选项卡部分都是可单击的。比起每个选项卡都是单独的一幅图片，然后

用表单元格和空白 GIF 图片来定位的设计方法，该方法所需要的代码要少一些。但是，

下面的问题，是这两种方法都存在的。

剩余19页未读，继续阅读

Dabui

粉丝: 0
资源: 3

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈