引号被用做强调文字的摘录。由于我们需要提供一些重要标志来使用用户注意文章中最重要的部分，尽管他们从不阅读它。此外，引号总是被用在感谢信和有时用在博客的评论中,他们可能会被用图形、CSS和一点Javascript风格化。有时，创造性的动态解决方案也能很好的应用。

这篇贴子包括了关于格言引用设计的创造性的例子和最佳做法，我们已经尝试去标出一些普遍的解决方案和有意思的方式，或者它能在你的项目中得到应用或扩展。

并非所有的引用都是相同的

首先：引号≠引用块≠格言引用。格言引用是介绍文字的简短摘录。他们是被用来将读者从他们的正常阅读中拉出来的一段文字，并且在贴子和文章中给它了一个突出的位置。

就象格言引用块（确切的说是块引用）也是作为一个区域段落或块从主体文字中脱离出来。然而，他们也提及一些在文章中没有提及的引文，引用块经常被放置在读者的阅读流里。

最后，“正常”引号引用在一些其它资源里找到的内容，并且它会被包含在里面、用来支持而不是支配内容。

blockquote\Q\cite

按照html规则，有三个元素用来支持语义标识引述，即<blockquote>、<q>和<cite>。虽然他们都能标识引用，但是他们应当被使用在不同的上下文中。那么你是怎么使用他们的（你在什么时候使用什么标识）?html dog 提供了一个关于这些元素的好的概述。

 <blockquot>

blockquote是一个大的引用，这个元素的内容必须包括块等级元素，例如标题、列表<ul><ol>、段落<p>或div。这个元素也能有一个可选的用来指定网址的属性cite(url),用来说明这个引用来自于哪里。例子:

<blockquote cite="http://www.htmldog.com/reference/htmltags/blockquote/">

<p>A large quotation. The content of a blockquote element must include block-level elements such as headings, lists, paragraphs or div's.</p>
<p>cite can be used to specify the location (in the form of a URI) where the quote has come from.</p>

</blockquote>

<q>

q是一个小引用。这个元素的内容是一个内嵌引用。现在的浏览器知道怎样去编译<q>，应此你可以使用CSS对它进行定义样式。例子：
<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

虽然<q>从不使用,它有一些有用的属性，例如，你能通过<q>加上css指定引号的表现外观。原因是不同的语言有不同的引号标志。例如，这些：
Q {}
Q { quotes: '》' '《' }
Q { quotes: '“' '”' }

现在的浏览器支持这些方式，当然，IE（甚至IE8）不支持它，尽管我们知道它是多么的好。在某些特定情况下，由于一些引号编码的问题,有时只有提供数值才有用。

按照标准，你可以指定引号的外观，这依赖于使用者使用的浏览器的语言。这是一个看上去符合w3c标准的例子.
:lang(fr) > Q { quotes: '《 ' ' 》' }
:lang(de) > Q { quotes: '》' '《' '\2039' '\203A' }

尽管它们是那么的好，但是格言引用被放置在html内容里的时候还是有一些固有的问题。在视觉上，支持css的浏览器可能看上去非常的好，但是那些不支持css样式、纯html的浏览器或视障用户的屏幕阅读器，格言引用在主体内容中就不会得到很好的表现，一个引述突然出现在两个段落之间，它将把阅读者搞的一头露水。

如果你正在使用格言引用，在这个容易出错的问题上给用户提供一点额外的信息.在html代码里，你能提供一些消息，比如在引述之前使用"start of pull-quote",在引述结速时使用"end quote"。你甚至可以提供一个链接导航，通过链接可以跳过引述来继续阅读主体内容。

<cite>

cite定义了一个内嵌的引用或指向另外的资源。例子:

And <cite>Bob</cite> said <q>No, I think it's a banana</q>.</p>

总结：大引述使用blockquote,小引述使用q，而指向另外的资源的使用cite。实际中，blockquote和q使用的比较多一些。

格言引用和引文的图片赏惜。

引号、支架、线、对话框、气球-一个设计者有许多途径去表现一个漂亮且值得记住的引述。在颜色、形式、尺寸上有不同的解决方案。不同的技术产生不同的结果：然而有一点是重要的，那就是对于访问者来说引述就是引述，除此之外，它更容易掌握。

看看上面的例子，99designs用一个引用块去强调这个网站是关于什么的。然而，放在引号里的文字确实不一个引述。我们不知道为什么引述在这种情况下也能使用.虽然我们知道在上下文中他们不应当被使用.

1.单纯的缩进

在大多数情况下单纯的缩进是足够的，在这种情况下内容的结构变得清楚。然而使用这种方式你需要确保有一个非常直观的排版，和视觉层次并且缩进不会被误解。常常斜体被用来表明内容是一个引述，有时引述被居中。当然，后一种方式很少使用。

2。引号和缩进

设计格言引用的另一个标准的方式是用引号本身作为一个可视化的元素来清晰的表明文字段落是被用来支持什么的。这个方式是目前最流行的一个，在它的后面有一个好的原因：它毫不含糊的传达文字块的意思。令人惊讶的是，引号几乎总是放置在引述的左边。你可以尝试一下将引号放置在右边的感觉，或者放在下面。

3。线和缩进

标准的、最通常的推荐使用的方式

4。使用颜色来突出引述

设计者常常使用缩进和对引述应用不同的颜色。通常如果布局是黑色的引述，它一般比主体内容更重要。反之亦然。如果引述需要着重强调那应当使用鲜明的颜色。比主色调稍微突出一些的色彩足够去表明主体内容和引述文字的不同。

5。格言引用

其实我们知道旁引是来自于印刷，它是用来强调一些重要的信息和采访摘录的。格言引用没有被放置在内容里，而是在旁边。这种引用通常比较短且提供一些在文章中不能被找到的附加信息。在网页中，这种技巧似乎用的很少，但是它有其自身的魅力，并且如果使用得当和目的正确，可能能强有力的支持内容。设计者通常使用线或者大遍空白来分离主体内容和邻引述。

重要的是要认识到，在这种情况下，格言引用打破通常的内容流可能使读者去实际上遵循文章的论证会更难。在某些情况下，避免格言引用更有效（例如，如果一个复杂的问题描述） ，而在其他情况下的格言引用可以加快和简化理解（例如在采访中的主要声明） 。

旁引通常放置在内容的右侧，目的是为了不拢乱读者的阅读。

6。创意性的解决方案

有时设计者提出创意性的解决方案，实际上不能期待它象一个引用一样作为一个元素。这里有他们中的一些，希望他们将帮助你提出更有趣的格言引述设计方面的思想。

7。引述作为一个独立的元素

通常引述在文章中没有使用和设计，但是作为一个独立的元素在设计中给一个突出的位置。这种情况经常出现在感谢信里，那里有公司介绍的来自他们客户的格言和关于质量保证的客户确认。在这种情况下格言引用通常是大的、粗体的、清晰可见的。

在感谢信中，格言引用有时是循环出现的，这就意味着在5-7个感谢信中每次只能出现一个。

8。补充：脚注

在书籍中和科学文献引用通常提供一个脚注，用来提及原创文献。在网页中，参考通常是使用链接指向。这种方式从来没有得到推广，然而脚注却能很好的应用。

例如，如果你引用一本书的摘要，不用提供相应的标题和页数，在文章的下部你可以简单的提及脚注。因此你可以避免你的文章有太多的参考。脚步注可以使读者阅读你的文章更容易并且只提供读者需要的细节

有时脚注也被用来提供一些作者在文章中的言论。然而，它也不总是使用脚注链接的理由。网页是动态的并且链接是相当的强大的，你不用让访问者点击你给出的链接就可以把访问者带到你的页面脚注。

看看这个例子，Naz Hamid在文章中用了一个引用块和一个脚注，脚注的导向链接和脚注本身是相互关联的。访问者可以点击链接跳转到脚注。在脚注里返回图标允许用户跳转回文章原来的参考链接指向处。作者用脚注提供一个个人的在文章中提及的言论(标签1和2).

使用脚注你能提供给访问者一些传统的、经典的布局感觉。

评论 (0) All

登陆 还没注册？