Шаблоны для новичков. Урок 3. Оформление текстов

Просмотров: 237Комментарии: 2
MaxSite CMSСоздание шаблонов (версии 0.8x)

К этому уроку мы уже имеем представление что такое HTML-тэги и CSS-стили. Современная верстка сайтов по сути сводится к шаманству с CSS: для сайта задаётся несложная HTML-структура, прописываются для блоков классы и после в css-файлах определяют их стили: положения, размеры, цвета и т.п.

Причем есть одна интересная особенность: стили можно применить практически к любым тэгам. Скажем текст можно оформить в DIV, P или H1. Если указать одинаковые css-стили, то браузер их и отобразит одинаково. Возникает резонный вопрос: если стилями мы можем добиться произвольного оформления, то зачем тогда такое разнообразие тэгов?

Ответ кроется в семантике (смысловом значении) документа. Если бы дело ограничивалось только визуальным отображением в браузере, то, действительно, можно было бы обойтись буквально десятком тэгов. Но, для того, чтобы сайт могли найти в Интернете, пользуются поисковиками. А поисковики должны уметь разбирать HTML-код страниц с тем, чтобы вычленить из него полезный текст и отсеять служебную информацию.

Вот для таких случаев, как раз и применяется семантическая верстка: HTML-тэги указывают на смысловое значение каждого участка кода.

Вот несколько основных правил.

  • Тэги используются по своему смысловому предназначению. Там где это заголовок - используется H1-H6. Уровень заголовка определяется степенью его важности.
  • Основной текст должен быть оформлен с помощью тэгов абзаца P. Нельзя использовать в качестве отбивки BR, DIV или другие тэги.
  • Для списков использются UL/LI.
  • Для выделений в тексте (смысловое усиление фразы) используется STRONG, B, EM, I. Эти тэги специально для этого и предназначены.
  • Для цитаты или ремарки используется BLOCKQUOTE.
  • Для «дизайнерского» оформления используются DIV и SPAN с нужными стилями и классами.

Браузеры имеют некое дефолтное оформление всех HTML-тэгов и если мы отключим свои css-стили, то при правильной HTML-разметке, текст останется читабельным и будет понятно где заголовок, где список и основной текст.

Многие новички не понимают или не придают большого значения семантичной вёрстке. Классический пример: вебмастер желает выделить в тексте какой-то важный момент. Для этого он использует тэг SPAN, где указывает большой размер шрифта, какой-то сильный цвет и т.п. То есть визуально фрагмент сильно выделяется. Однако с точки зрения семантики - он практически равносилен основному тексту. Поисковик для такого выделения не сделает никакого приоритета. Проблема здесь в том, что нужно было использовать тэг STRONG (или аналогичный), который и указывает поисковику, что данный фрагмент имеет особую важность. А вот визуальное оформление можно сделать в виде css-стилей этого тэга.

Два вида вёрстки: блоки и тексты

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

Причём оформлением текстов занимается уже автор сайта (не верстальщик). Очень часто встречаются шаблоны, где вебмастер не подумал о тех, кто будет наполнять сайт и забывает прописать дополнительные стили для оформления текстов. С точки зрения верстальщика такие стили не нужны, поскольку не используются в его шаблоне. В MaxSite CMS принято задавать такие стили, и чтобы проверить их корректное отображение существует специальный ВВ-код [text-demo], который можно разместить в любой записи и на сайте он заменится на тестовый кусок html-кода, который должен корректно отображаться на сайте.

Верстка блоков как правило базируется на использовании тэгов DIV и SPAN. Это общие тэги и их смысл определяется css-классами.

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

Важное замечание. В предыдущих уроках я давал ссылку на справочник HTML. Дублировать его в наших уроках нет никакого смысла, поэтому если вам встретился какой-то новый тэг, обратитесь к справочнику, чтобы уточнить его значение.

Оформление текста с помощью CSS

В CSS существует довольно много «оформительских» свойств для текста. Рассмотрим некоторые из них. Значения я указываю только часто используемые. Полное описание css-свойств см. в справочнике CSS.

CвойствоОписаниеЗначение
colorЦвет текстаЗначение или название цвета
font-sizeРазмер текстаЛюбые единицы длины
font-familyШрифт или семейство шрифтаНазвание шрифта или семейство
font-styleНачертание текста
  • normal - обычное начертание
  • italic - курсив
font-weightНасыщенность шрифта
  • normal - обычный
  • bold - полужирный
font-variantМодификация текста
  • normal
  • small-caps - капитель
text-alignВыравнивание текста в блочном элементе
  • center - по центру
  • left - влево
  • right - вправо
  • justify - по формату
text-decorationОформление текста
  • underline - подчеркивание
  • overline - надлиния
  • none - нет
line-heightИнтерлиньяжЛюбые единицы длины
text-transformПреобразование регистра текста
  • capitalize - первый символ предложения заглавными
  • lowercase - все строчные
  • uppercase - все прописыне
  • none - без преобразований

Сохраните эту табличку, пусть она будет небольшой подсказкой по оформлению текстов. Больше к вопросу оформления текстов мы возвращаться уже не будем.

««« Урок 4 | Урок 2 »»»

Комментариев: 2 RSS

1Руслан26-01-2012 09:24

Хорошие уроки - кратко и понятно!

2Дмитрий05-05-2014 09:40

Большое спасибо! Всё очень доходчиво.

Оставьте свой комментарий!

Комментарий будет опубликован после проверки

Вы можете войти под своим логином или зарегистрироваться на сайте.

(обязательно)

О проекте

MaxSite CMS предназначена для создания сайтов любой сложности. Система отлично подходит обычным пользователям, вебмастерам, фрилансерам и вебстудиям.