Семантическая верстка

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

В последнее время клиенты начали требовать, чтобы верстка была не только валидной и кросс-браузерной, но и семантической.

Содержимое тега head

Заголовок веб-страницы

Каждая веб-страница должна иметь заголовок. Он служит как для идентификации сайта, так и для для роботов поисковых систем.

Тег meta

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

Назначение тега meta зависит от атрибутов, которые в нем указаны. Важным вариантом тега meta является вариант, задающий кодировку символов. Его указание обязательно для каждого документа. Чаще всего для HTML-документа используют одну из следующих кодировок:

• Windows-1251 – позволяет применять символы европейского и латинского алфавитов и писать тексты на русском, украинском, белорусском, сербском, болгарском, английском языках;

• UTF-8 – дает возможность использовать символы любого языка мира.

Работа с макетом

Предположим, что имеется PSD-макет будущей веб-страницы, сделанный дизайнером.

Следует разбить макет на отдельные картинки, из которых в дальнейшем будем верстать веб-страницу.

Как выделить из макета отдельное изображение?

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

1. Ctrl и щелкните на названии слоя – выделятся все пиксели, котрые есть на выбранном слое;

2. Ctrl+C – скопируем все пиксели изображения в буфер обмена;

3. Ctrl+N - - создастся новый документ, ширина и высота которого будут автоматически установлены таким образом, чтобы вместить изображение из буфера обмена;

4. Ctr+V – помещаем изображение из буфера обмена в новый документ;

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

Сохранение изображения

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

Диалог Сохранить для веб и устройств позволяет сохранить изображение в нескольких форматах:

• JPG – идеально подходит для сохранения изображений фотографического качества;

• PNG8 – для сохранения небольших элементов интерфейса, у которых нет прозрачности. Также хорошо подходит для сохранения скриншотов с изображением окон, меню и других стандартных элементов интерфейса;

• PNG-24 – пари сохранении изображений с полупрозрачными пикселами, если эти изображения расположены не на отдельном фоне либо фон предполагается часто изменять.

А как быть с кнопками? Вырезать из макета всю кнопку будет неправильно – если сравнить все кнопки, то окажется, что на макете они все имеют одинаковую ширину. Но в случае, если администратор сайта добавит в меню пункт с настолько длинным названием, что оно не поместится под отведенное для него пространство, такое решение вряд ли будет правильным. Что делать? В этом случае:

• часть названия будет перенесена на новую строку и верстка поплывет;

• часть названия будет скрыта, что нехорошо;

В нашем случае идеальным решением будет изображение шириной 1 пиксель, которое при верстке будет повторено на всю ширину пункта меню, какой бы эта ширина ни была.

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