Верстка страниц сайта

Что такое верстка страниц сайта, типы верстки

Итак, разработка дизайна сайта закончена, вы определились с тем, как должны будут выглядеть ваши страницы, продумали вопросы навигации по сайту, структуру самого сайта и структуру отдельных страниц, спланировали размещение блоков на странице, решили, будете ли вы использовать резиновый или фиксированный дизайн. В результате у вас должен иметься некий макет будущего сайта. Если такой макет разрабатывал профессиональный дизайнер, макет обычно представляется в графическом виде. Если же вы не привлекали посторонних исполнителей к разработке дизайна, то макета у вас может и не быть, но какое-то представление о внешнем виде и структуре будущего сайта у вас должно иметься. Теперь надо воплотить эти замыслы в виде HTML-кода, реализовать их средствами HTML, CSS или какого-то языка программирования. Процесс программирования страниц средствами языка HTML и вспомогательных средств, как то CSS, PHP, Javascript и т.д., по предварительно разработанному макету (картинке) страницы называется версткой.

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

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

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

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

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

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

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

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

Полезные ресурсы

Счетчики

Рейтинг@Mail.ru

LiveInternet

Rambler's Top100