Блок цитаты и цитаты: примеры и передовой практики

Quotes используются, чтобы подчеркнуть выдержки из текста.Так как пользователи практически никогда не читал, но сканировать мы должны предоставить им некоторое внимание якоря, чтобы исправить свое внимание на наиболее важных частях нашей статьи.Кроме того, котировки всегда используются для свидетельства, а иногда и комментарии в блогах.Они могут быть оформлены с помощью графических, CSS и немного JavaScript.Иногда, творческие динамические решения могут быть применены как well.

Это сообщение представляет творческие примеры и рекомендации по конструкции тяга quotes.Мы попытались выявить некоторые общие решения и интересные подходы, которые вы можете использовать или разрабатывать дальше в своем projects.

Вы также можете взглянуть на posts

навигационные меню: Тенденции и Examples с последними тенденциями, примеры и инновационных решений для проектирования современных навигационных menus.
Web Form Design: современные решения и творческий Ideas представлены прекрасные примеры веб-форм, а также современные решения и творческие идеи, связанные с веб-форму design.
разбивку Галерея: примеры и хорошо Practices с хорошей практике нумерацию страниц дизайн, а также некоторые примеры, когда и как нумерация страниц, как правило, implemented.
Tag Clouds Галерея: примеры и хорошо Practices представлены творческие примеры и идеи для дизайна теги clouds.

Aren’? Т все эти цитаты же

№ Прежде всего: цитата ≠ Блок цитатой ≠ тянуть цитаты. Тянуть quotes короткие выдержки из представленного текста.Они используются для извлечения фрагмента текста из reader’ потока с и придать ему более доминирующее положение на должность или article.

тянуть цитата включена в статью.Вытащил прохождения упоминается несколько кварталов further.

Так же, как притяжение цитатой blockquote (на самом деле Блок quotations), также отправился из основного текста в качестве отдельного пункта или блока.Тем не менее, они относятся к некоторым внешним цитата которые isn’ T уже упоминалось встатья.Блок котировок обычно размещаются в reader’ S flow.

Наконец, “ normal” quotes цитировать материал, найденный в некоторых других источников и включается в поддержку содержание, а не доминировать над it.

Blockquote против Q против Cite

Согласно спецификации HTML, есть три элемента, которые, как предполагается, семантически размечать котировок, а именно <blockquote>, <q> и <cite>.Хотя все предназначено для разметки кавычки, они должны быть использованы в различных контекстах.Поэтому, когда вы должны использовать что? HTML Dog обеспечивает хороший обзор и компактные из следующих элементов:

< blockquote>

blockquote большая цитата.Содержание цитатуЭлемент должен содержать блочные элементы, такие как заголовки, списки, пунктыили div’ с.Этот элемент также может иметь дополнительный атрибут cite, который определяет местоположение (в виде URI), где цитата родом.Пример:

<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>, поэтому вы можете стиль цитат с помощью этой HTML-элементов с помощью CSS.Пример:

<p>Bob said <q>sexy pyjamas</q> but Chris said <q>a kimono</q></p>

Несмотря на <q> практически не используется, она имеет некоторые полезные свойства.Например, вы можете определяют внешний вид quotes в <q> элемента с помощью CSS.That’ с разумными разные языки используют разные кавычки для той же цели.Например, эти из них:

Q {}
Q { quotes: '»' '«'   }
Q { quotes: '„' '“' }

Современные браузеры поддерживают такой способ укладки.Конечно, Internet Explorer (даже в 8-ая версия) doesn’ T поддерживают его, хотя он знает, <q> очень хорошо.В частности, поскольку некоторые проблемы с кодировкой котировки могут появиться иногда it’ S полезно дать числовые значения (см. ниже)

В соответствии со стандартами вы даже можете задавать внешний вид кавычек в зависимости от browser’ с языком пользователя.Это, как W3C-пример выглядит следующим образом:

:lang(fr) > Q { quotes: '« ' ' »' }
:lang(de) > Q { quotes: '»'   '«' '\2039' '\203A' }

Как красиво, как они могут быть, цитаты имеют врожденные проблемы в том, как они помещаются в середине HTML содержание.Чтобы визуально, CSS включен браузер все может показаться, что надо, но для тех браузеров, которые не являются CSS-инвалидами и падает обратно на равнину HTML или чтения с экрана для слабовидящих пользователей, цитаты появится пощечина взрыва в центреосновного содержания.Цитата вдруг появляется между двумя пунктами явно неуместны и смешения сломать flow.

Если Вы используете тянуть кавычки, имеет смысл дать немного дополнительной информации для пользователей, которые бы наткнуться на эту проблему.В XHTML, вы можете предоставить сообщение, скрыты от глаз с CSS, который читает что-то вроде " Дата начала тянуть-quote" перед цитатой, а затем " конце quote" после него.Можно даже есть ссылка похож на " показывать navigation" ссылкикоторый будет предлагать пользователю возможность пропустить выдвижной цитаты и по-прежнему основной content.

< cite>

cite определяется в линию цитаты или ссылки на другой источник.Пример:

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

Подводя итог: для больших кавычках использовать blockquote, для малых кавычки использовать q и ссылки на другие источники cite должен быть использован.На практике, как правило, только blockquote __ и 8 | q являются used.

Галерея цитаты и Citations

Котировки, подтяжки, линий, диалогов, воздушные шары — Есть несколько путей дизайнера можно предпринять, чтобы создать красивый и памятные quote.Проектные решения различаются по цвету, форме и размерам.Различные методы дают разные результаты: Тем не менее, важно, чтобы было понятно, к посетителям, что цитата на самом деле цитата, в противном случае он становится легко отслеживать на content.

Имейте в виду: цитаты shouldn’ T использоваться слишком часто, они shouldn’ T быть слишком большим, и они shouldn’ т быть включены в неблаговидных целях.В большинстве случаев обычная статья должна иметь не более 1-2 котировки тянуть, иначе они теряют свою привлекательность и статья становится все труднее scan.

Взгляните на приведенный выше пример. 99designs использует блок цитату, чтобы подчеркнуть, что сайт о.Тем не менее, текст поставить в кавычки самом деле isn’ та цитата.Мы не знаем, почему кавычки используется в данном случае.Мы знаем, однако, что они shouldn’ т быть использованы в этом context.

1.Простой indentation

В большинстве случаев простые отступа достаточно.В этом случае Структура содержания делает clear которые предназначены содержание берется из основного потока содержание.Однако, используя этот подход, вы должны убедиться, что у вас есть очень интуитивный типографских и визуальной иерархии и углубление won’ т быть неправильно понято.Часто italics используется, чтобы указать, что содержание является цитатой, а иногда и цитаты по центру.Последний метод, однако, используется довольно rarely.

2.Цитаты и indentation

Другой стандартный подход для проектирования цитаты заключается в использовании цитата себя как визуальный элемент четко указать, какой фрагмент текста должно стоять.Эта технология на сегодняшний день является самым популярным и есть хорошая причина: она однозначно связывается значение текстового блока.Удивительно, но визуальные цитаты, почти всегда Расположенные слева от quote.Вы можете попробовать поэкспериментировать с цитатой справа, или в нижней частиpassage.

3.Линии и indentation

Standard, самый обычный и рекомендуемый способ проектирования blockquotes.

4.Котировки выделены color

Часто дизайнеры используют отступы вместе с Изменение цвет, который наносится на цитаты.Обычно, если макет темно котировки представлены в цвета, которые темнее основного содержания.И если раскладка света цитата представлена в более светлые цвета.Если котировки должны быть решительно подчеркнул ярких цветов.Для скромной подсветка обычно небольшими вариациями основного цвета достаточно указать разницу между основным содержанием и привел text.

Natalie Jost отображает случайные цитаты из Библии на ее blog