Давайте поговорим про основы верстки

Как делают верстку веб-сайтов

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

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

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

Этапы верстки страниц сайта

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

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

Рис. 1. Изображение главной страницы, созданной дизайнерами.

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

Рис. 1 отличается наличием двух крупных блоков, которыми являются «шапка», а также основное содержимое странички. Сначала следует рассмотреть именно «шапку», которую демонстрирует рисунок номер два.

Рис. 2. Внешний вид «шапки»

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

• Создание одного рисунка, а также применение к этому рисунку карты-изображения.
• Разрезание изображения на несколько фрагментов, объединение которых будет впоследствии выполнено при использовании таблицы. Каждый фрагмент изображения будет являться ссылкой.
• Использование позиционирования элементов (например через css выравнивание по центру).

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