Рыба

Русская рыба 2.0 (версия 0.4)

H1 — Заголовок 1-го уровня, самый главный заголовок текущей страницы или статьи

Эта страница является расширенной русскоязычной версией текстовой рыбы «Sed scelerisque sagittis lorem»

H2 — Заголовок 2-го уровня. Все заголовки в примерах следует делать в несколько строк, чтобы правильно подобрать междустрочный интервал.

Помните, что заголовки тоже бывают ссылками и их можно по особенному оформлять.

H3 — Заголовок 3-го уровня. При подборе шрифтов для заголовков рекомендуется использовать один - два шрифта. Не более!

Если заголовок является ссылкой помните о изменении внешнего вида при наведении курсора: A:hover и после посещения A:visited ссылки.

H4 — Заголовок 4-го уровня. Помните о новых, незаезженных шрифтах добавленных в Vista.

Текс можно и нужно оформлять по максимуму. Можно сделать все буквы ЗАГЛАВНЫМИ, можно менять интервалы между словами и даже буквами.

H5 — Заголовок 5-го уровня. Помните что в css можно настраивать расстояние между словами и даже буквами. Используйте это, и ваши сайты будут выглядеть лучше.

Для визуальной настройки таблицы стилей можно использовать Firebug или визуальный css редактор Stylizer :)

H6 — самый маленький заголовок. Помните о том что все буквы можно преобразовать в заглавные или строчные.

 Наиболее популярные HTML теги:

 Ссылка

Помните о том, что неопытный пользователь должен по одному виду (не наводя курсор мыши) безошибочно отличать ссылки от прочего текста. У правильных ссылок внешний вид меняется при наведении курсора мыши A:hover { описание класса } и после посещения A:visited { описание класса } ссылки. Посещенные ссылки желательно делать более блеклыми, чем не посещенные.

  AJAX и JavaScript ссылки

Ссылки, не открывающие новых страниц должны подчеркиваться пунктирной линией. Это уже становится нормой. По одному виду ссылки пользователь может догадаться, что при нажатии на нее произойдет какое-то событие прямо на этой странице.

 Акроним, аббревиатура - При наведении на них курсор должен принимать форму вопроса. Помните о том, что IE до 8-й версии не понимает аббревиатур.

Тег <cite> - Классическая цитата. Этот тег можно использовать для создания врезок.

Врезки это блок с короткой фразой иллюстрирующей основные (самые яркие) мысли текста. Для примера откройте любой бумажный журнал. Там этих врезок - охрененное огромное количество. Врезки можно и нужно использовать для поисковой оптимизации, помещая туда SEO - фразы.

Улучшить дизайн сайта за 30 мин. - реально! (пример цитаты)

Тег <blockquote> - длинная цитата. Этот тег активно используется в форумах, блогах и любых других обсуждениях.

Тег <Q> короткая цитата в тексте обычно заключенная в кавычки (с кавычками проблемы в IE).

Тег <PRE> определяет блок предварительно форматированного текста. Например стихов:

Красивые красные штуки
Придумал себе дизайнер
А чтоб они краше были
Покрасил, их жёлтым и синим

Тег <CODE> предназначен для отображения одной или нескольких строк текста, который представляет собой программный код. Код можно автоматически раскрашивать через модули для CMS или яваскрипт. Пользуйтесь этим.

Код программы

<---code---> Уберите лишние тире-- у слова code function checkParent (src, dest) {
while (src != null) {
if (src.tagName == dest) return src
src = src.parentElement
}
return null
}

Уберите лишние тире-- у слова code

Списки стоит активно использовать не только для перечисления чего - либо, но и в качестве выразительного средства типографики, облегчающего чтение с экрана и разбивающего монотонность текста.

  • Маркированный список: Пункт 01
  • Помните, что вид макреров можно менять через css

    • Вложенный список: В качестве маркеров можно использовать картинки если задать их через css

      • Еще один вложенный список
      • Пункт 02
      • Пункт 03
    • Пункт 01
    • Пункт 02
    • Пункт 03
  • Пункт 01
  • Пункт 02

 

  1. Нумерованный список: Пункт 01
  2. Помните, что для нумерации можно использовать не только арабские цифры
  3. Пункт 03

    • Вложенный маркированный список: Подпункт 03-01
    • Подпункт 03-02

      1. Опять вложенный нумерованный список: Подпункт 3-го уровня
      2. Подпункт 3-го уровня
    • Подпункт 03-03
    • Подпункт 03-04
  4. Пункт 04
  5. Пункт 05

 

Тег <u> - подчеркнутый текст.

Это чисто презентационный элемент, который все и всегда путают со ссылками и пытаются нажать. Подчеркнутый текст - ЗЛО! Использующие его будут гореть в аду :( А мы просто заменим подчеркивание чем-то еще (или отключим его нафиг).

Теги Тег <b>: старожирный текст Тег <strong>: жирный текст.  Помните о том что жирность текста тоже можно настраивать.

Тег <em>: курсив Тег <i>: наклонный текст. Иногда для наклонного текста можно использовать другой, более симпатичный шрифт.

Тег <strike>: зачеркнуто Тег <del>:текст, который удален

Эти теги хорошо использовать для обозначения старых цен и неправильных ошибочных высказываний.

Тег <big>: как бы, большой текст

Тег <small>: как бы, маленький текст. Помните о том что этот тег тоже можно переопределить (поменять шрифт, размер, цвет и т.д.) через css

Отдельные классы оформления для:

Адреса компании оформляются css классом .address  или HTML тегом <address>:

Наш адрес: Ул. Жуковская 123
Дом № 65 квартира 48.

Основной телефон фирмы оформляем css классом  .phone

Наш телефон: 214-22-13

Стандартные цены на услуги частенько встречаются на многих сайтах, мы оформим их через css класс .price

Наши цены от 243р.

Оформление таблиц

Div class='divright'. Две зеркально расположенные буквы F часто сравнивают с пазлом, а придумал его для бренда Карл Лагерфельд. Основатели супруги - Эдуарде и Аделе Фенди. Сам логотип стал любимым принтом на всех коллекциях, он присутствует на большинстве вещей, на пряжках ремней, на сумках, на очках...

Т.к. таблицы все еще активно используются для верстки, для таблицы которая должна выглядеть именно таблицей с ячейками и границами (к примеру прайс - лист) был введен отдельный класс  .table

Заголовок таблицы тег <caption>
Заголовок <thead> <th> 05 Верх таблицы тег <thead> thead td
tfoot th 500 Низ таблицы тег <tfoot> tfoot td
tbody <th>   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td
tbody td   Sed scelerisque sagittis lorem. tbody td

Для вдохновения в работе:

10 способов оформления текста

 http://www.dserg.com/10-text-decoration-2007-04-23.html

Новые сообщения в нашем интернет-магазине зимних шапок:

Читать все комментарии