网站设计和开发中的5种实用编码解决方案

　　往往真正非凡的创意和设计解决方案至今未知，因为我们，设计师，只是忽略了他们。正在忙于自己的项目，我们有时试图抓住其他设计人员的复杂和混乱代码背后（可能）的直觉，了解它们如何设法执行特定的设计理念。事实上，通过观察其他的代码开发，我们可以学到很多东西从那里，我们可以找到有趣的想法并提高我们的工作质量。

我们要开始5个先进的编码解决方案，请您发表评论让我们知道您的想法。现在让我们长驱直入，在开始阅读这篇文章前，你或许应该已经有一些CSS的知识。

1 。滑动垂直导航+覆盖

　　在过去几年中，我们发现了一个很强的趋势，横向滑动菜单（也称为尾波滑块效应） 。特别是，他们往往是用在企业网站设计中，这些产品和功能在设计布局中占主导地位。Kobe使用了类似但不同的做法。

The navigation options at the top of the site are slightly animated yet creating an appropriate atmosphere. Once one of the sections is clicked, the main content area slides vertically — first the background image, then the content. If the content area also has some navigation options, they are slided vertically as well. In this situation it might be a slightly better design decision to use horizontal navigation instead to make it easier for visitors to distinguish between the primary and secondary navigation.

　　在网站顶部的导航选项还略有动画创造合适的气氛。一旦其中一个区段被点击，主要内容区幻灯片垂直滑动为当前栏目的第一张背景图片和内容。如果内容方面也有一些导航选项，它们也是垂直播放的。在这种情况下，决定使用横向导航代替，这可能是更好的设计，以方便游客来区分主要和次要的导航。

All content blocks are not loaded on demand via Ajax, but loaded up front when the page is loaded. All content blocks are loaded in the very beginning. Although the page seems to be animated, Flash is used sparsely — essentially, the design is a pure CSS+JavaScript-based solution. The main problem of the design is, however, that it’s just impossible to navigate the site if JavaScript is disabled. In fact, navigation options are not visible at all. As professional, you should always keep gradual degradation in mind.

　　所有内容区块不是通过Ajax加载需求，而是在当前面网页加载前加载的。所有内容块在一开始就被下载好了。虽然该网页看起来像动画， Flash很少被使用-本质上说，这个设计是一种单纯的CSS + JavaScript架构的解决方案。主要的问题是在设计，不过，如果已禁用JavaScript 就无法浏览网站。事实上，导航选项是不可见的。作为专业人士，你应该始终保持思维逐步退化。

 How is it done? For the main horizontal navigation at the top of the site, kobe use CSS sprites. All navigation options are packed in one single image; the displayed chunk of the sprite is selected via background-position-attribute as usual. The sprite itself is a transparent .gif (here is the file). The position of animated sparks is defined using JavaScript — depending on the currently selected navigation option and using absolute positioning.

　　它是如何做到的呢？网站上方的主要横向导航，kobe使用CSS滑动门技术。所有导航选项都装在一个单一的图片里，被选择后显示的效果通常通过背景位置属性来显示。导航图片本身是一个透明的 gif 图片（以下是该文件） 。火花动画的位置是根据当前选定的导航选项使用JavaScript 定义的-，并使用绝对定位。

The main content area consists of the background image and an overlay-layer which displays related information and (sometimes) further navigation options. All overlay-layers (for all navigation options) are loaded together with the main page and are not displayed unless an appropriate navigation option is selected. The sliding is created with the SlidePanel-component of the jQuery library.

　　主要内容区域包括背景图像和显示相关的信息与（有时）进一步导航选项的覆盖层。所有覆盖层（针对所有导航选项）与主网页同时加载，但并没有显示除非有某个导航选项已被选中。滑动是用jQuery库的SlidePanel-component来创建的。

The overlay image is semi-transparent and is positioned absolutely within the main content block upon the background image (using the z-index-attribute). The background image for each navigation section is defined via CSS for each overlay-layer.

　　主要内容块里的背景图像上的内容背景是半透明的图像叠加的并进行了绝对定位（使用了z-index-attribute） 。每个导航章节里的背景图片是通过CSS定义重叠层实现的。

A very similar overlay-approach is used to present the description of a project in Ivan Aleksić’s portfolio (see above). Initially the visitors see only thumbnails of the projects done so far. When one of the thumbnails is hovered, further information is displayed in an overlay beyond the thumbnail. This overlay always uses the space that was previously occupied by the hovered thumbnail and the one below it. The tiny arrow at the right of the site always allows users to jump to the top of the page.

　　一个很类似的使用重叠的办法来描述当前的一个项目，Ivan Aleksić ，（上面的图片）。最初的访问者看到的仅仅是迄今所做的项目缩略图。当一个缩略图被鼠标悬停，详细信息将覆盖在缩图上显示。覆盖总是显示在先前被悬的停缩略图的空间上并低于它。网站右侧总是有个小箭头允许用户跳转到页面的顶部。

2 、邻近导航

 EllisLab uses an interesting design approach to present the members of its team. Instead of listing each of them one after another, with small thumbnail and brief description, they use simple yet intuitive primary and secondary navigation menus placed next to each other. And to make sure that visitors are convinced that the team takes its work very seriously, quite esoteric cartoons are additionally placed next to the menus.

　　EllisLab使用了一个有趣的设计方法介绍团队成员。不是使用小缩略图和简要说明一个又一个列出每个人，它们使用简单而直观的置于相邻的主和次导航菜单。并确保游客深信团队工作非常认真，此外一张非常深奥的漫画放在旁边的菜单。

Both primary and secondary navigation menus use arrows and slight color indications to highlight where users are at the moment. Notice that the menus are not just placed next to each other, but divided via a sharp vertical line. Besides, the secondary menu is placed few pixels below the upper border of the left one, and thus indicates the hierarchy in the navigation.

　　主导航和次导航菜单中使用箭头和轻微的颜色突出指示用户正此时所处的位置。请注意，菜单不只是放在旁边，而是通过垂直线划分的。此外，二级菜单放在左侧低于上边缘几个像素的位置，从而表明导航的层次。

The whole content area is divided into two main parts — the primary navigation at the left, and the content block at the right. The latter contains the secondary navigation and a sub-area for description on the right hand-side (see screenshot below). The background-images for the content block are defined via CSS and are applied via IDs. A semi-transparent background image is used for the description block on the right-hand side of the content block. The rest is pure CSS and (X)HTML. Simple yet elegant solution.

　　全部内容区分为两个主要部分，主要航行在左边，内容块在右边。后者包含二级导航和子区域来描述右侧（见下面的截图） 。做为内容块的背景图像是通过CSS和ID来定义的。一个半透明的背景图片被用于内容区域右边的描述块。其余的是纯粹的CSS和 （X）HTML 。简单而不凡的解决方案。

3、面板块

Over last months it seems to have become a common practice to focus the design of a site on its main objective and display the unnecessary details on demand. For instance, Wishingline presents contact information and links to social networking profiles in a semi-transparent panel. This panel is opened when the user clicks on some specific link and is not displayed until then.

　　在过去几个月它似乎已成为一种普遍的做法，网站的设计的焦点是其主要目标，显示不必要的细节需求。例如， Wishingline介绍联系信息和社交链接概况在半透明面板上。当用户点击特殊的链接时，这个面板就打开，在此之前不显示。

Notice that different services are highlighted differently — designers use both link colors and icons to precisely communicate links to external services. Usually it’s not the best decision to use multiple link colors for similar tasks, but in this case it works fairly well.

　　请注意，不同的服务，不同的突出-设计者使用链接的颜色和图标精确的传达对外服务的链接。通常这不是最好的决定为相似的任务使用多个链接的颜色，但在这种情况下，这个案例做的很好。

All “social” data is hidden in the panel — probably to not overcrowd the design with vivid symbols and icons which simply do not fit to the initial design. This design approach has advantage of offering clean layout and disadvantage of hiding secondary navigation options. The trade-off is, as always, designer’s decision, but in this case both options would probably work equally well.

　　所有的“社会”数据被隐藏在面板里-可能不过满的设计与生动的符号和图标，不适合最初的设计。这种设计方法的优势，提供干净的布局和隐藏二级导航选项的缺点。权衡依然是设计师的决定，但在这种情况下，这两种选择方案里可能同样好的工作。

How does it work? The panel itself has a semi-transparent background and is given a fixed position in the layout using absolute positioning and the z-index-attribute. Hence, it doesn’t change when the font-size is changed or the browser window is resized. That’s not necessarily a good thing, however, one can live with that.

　　它是如何工作的？专家小组本身有一个半透明的背景以及在使用绝对定位的布局中给出一个固定位置和z-index-attribute。因此，当字体大小改变或浏览器窗口的大小改变它并没有改变。这未必是一件好事，然而，有一个可以接受的。

4 、标签图表列表

There is a variety of ways to design tag clouds. Styled according to its weight, tags in tag clouds reveal the importance of a topic or site quality via an assigned visual weight (often color and font size). However, there is one important thing which “normal” tag clouds fail to do: they convey the big picture, but can’t reveal meaningful data, information in terms of how popular these tags are.

　　有各种不同的方式来设计标签云。通过重量来定义样式，标签云里的标签通过指定的视觉重量（通常颜色和字体大小）来揭示了一个主题的重要性或网站质量 。然而，有一个重要的事情是“正常”的标签云不这样：他们转成大图片，但不能透露这些标记受欢迎程度如何等有意义的数据和信息。

5 、灵巧的存档导航

Designing archive navigation isn’t an easy task, particularly because designers don’t want to slam visitor with too much information and users often just want to quickly get the information they are looking for in the first place. Chris Shiflett uses an interesting approach to present a user-friendly, simple and compact archive navigation.

　　设计档案导航不是一项容易的任务，特别是因为设计者不想抨击访问者太多信息和用户往往只是想快速获取他们正在寻找的摆在首位的信息，。Chris Shiflett 利用有趣的方法，提出了一个用户友好、简单、紧凑的存档导航。