От автора: здравствуйте, уважаемые читатели. В предыдущих статьях мы рассмотрели теорию, связанную с версткой сайта. По окончании чтения этой статьи у вас будет четкое понимание того, как самому верстать сайт.
Как получить верстку?
Если вас интересует вопрос, как сделать верстку сайта, то давайте попробуем на него сразу же ответить. По сути, есть три варианта ее получения. Первый – сделать самому. Вы просто берете любой попавшийся под руки макет и начинаете работу с ним, вырезая необходимые части для дальнейшей верстки. Вы можете верстать на заказ или просто для тренировки, что тоже очень полезно. Плюс этого способа в том, что вы не тратите денег и получаете драгоценный опыт в создании сайтов, который вам в любом случае пригодится.
Второй способ – заказать верстку у фрилансера, который может ее сделать. Допустим, у вас есть макет и вам нужно с него сверстать сайт. Сами вы это делать не умеете или просто не хотите тратить время. Как вариант, можно разместить заказ на любой популярной бирже фриланса. В ответ сразу же пойдут заявки, потому что сегодня многие люди оказывают подобные услуги.
Рис. 1. Многим людям нужны услуги по верстке.
Выбирая человека для работы, просмотрите его рейтинг, отзывы и портфолио. Выбирайте только толковых исполнителей. В среднем, услуги по верстке обойдутся в 1000-3000 рублей. Если это адаптивная верстка и макет сложный – может быть намного больше. Кстати, самой популярной российской биржей фриланса считается fl.ru.
Третий способ – скачать готовые верстки в интернете. Сегодня масса сайтов, на которых вы можете абсолютно бесплатно скачать готовые шаблоны, выполненные профессионалами. Минус такого метода только в том, что вы получаете неуникальную верстку и кто-то тоже может ее скачать. Но вы можете изменить код везде, где это нужно и добиться большей уникальности.
Для этого вам придется хоть немного разбираться в HTML и CSS. Некоторые фрилансеры предоставляют услуги по переделке шаблонов. Вы можете этим воспользоваться. Также в сети продают так называемые премиум-шаблоны. Это верстки высокого качества. Как правило, адаптивные и с соблюдением всех стандартов.
Итак, мы посмотрели три способа сделать верстку сайта. Можно остановиться на первом из них подробнее.
Верстаем самостоятельно
Как создать верстку сайта самому? Для этого вам понадобится макет, программа для написания кода, голова и руки. Да, пожалуй это тот минимальный набор, который вам пригодится. Давайте попробуем разделить верстку сайта на несколько этапов, чтобы наиболее хорошо представить, как она делается.
Первый этап – подготовительный. Заключается в том, что мы просто создаем необходимые нам файлы, папки, подключаем библиотеки и фреймворки, с которыми планируем работать, создаем таблицу стилей, файл для веб-сценариев и т.д. Мы просто подготавливаем все для начала работы.
Второй этап – создание сетки. Это каркас нашего сайта. Самым простым вариантом сетки традиционно считается такой: шапка, основное содержимое, какой-то блок справа или слева и футер (низ) страницы. В вашем же макете все может быть сложнее. К тому же, отдельные блоки содержат в себе другие элементы, которые вам тоже нужно будет расставить. Но это уже потом, а пока вам нужно просто создать сетку. Самые популярные варианты сеток можно посмотреть на htmlbook.
Для этого вам нужны знания в области создания и расстановки структурных элементов на странице. Например, вы должны знать, что такое табличная и блочная верстка, как можно задавать ширину и высоту элементов, задавать обтекание и т.д. Вам нужны знания, которые можно получить в процессе изучения верстки. Наиболее полные знания вы сможете получить в нашем курсе по техникам верстки.
Третий этап – работа с более мелкими элементами. Чтобы продолжить делать верстку сайта, вам нужно заняться расположением остальных элементов на странице. Сетка – это всего лишь каркас, который опытным верстальщиком создается за пару минут. Дальше начинается основная часть работы – расставить все элементы так, чтобы они стояли точь в точь как в макете.
Например, логотип должен стоять у вас в правом верхнем углу шапки. Вы должны знать, как можно его туда засунуть. А в этом вам опять-таки помогут наши видеоуроки по основам HTML и CSS. Если вы планируете сделать резиновую верстку сайта, то вам нужно будет учитывать особенности позиционирования элементов для нее. Чтобы разобраться с особенностями поведения резиновых блоков, рекомендую пройти этот практический курс.
Четвертый этап можно выполнять совместно с созданием сетки и позиционированием всех элементов веб-страницы. Это работа со стилями. Прекрасно, если все элементы расставлены вами правильно, но без стилей они будут выглядеть непрезентабельно. Задание фона страницы, ширины и цвета иконок, создание и распределение стилевых классов и идентификаторов, прописывание базовых свойств и дополнительных визуальных эффектов – это всего лишь некоторые задачи, которые стоят перед верстальщиком в работе со стилями.
Рис. 2. Файл стилей, в котором верстальщик придает внешний вид сайту. Чем сложнее верстка, тем более громоздким может получиться этот файл.
Может быть, новичку это может показаться трудным, но всему этому обучиться достаточно быстро. HTML и CSS – это не программирование, тут не нужно чрезмерно ломать голову – просто выучите один раз и навсегда основные правила, теги и свойства и все это останется в вашей голове надолго. Конечно, при условии постоянной практики.
Пятый этап. Мы уже серьезно продвинулись. Основная часть работ завершена – сделана наша, пусть еще несовершенная, но уже верстка сайта. Сделать ее еще лучше – это дальнейшая основная задача. С этого этапа мы начинаем активно тестировать нашу верстку во всех основных браузерах. Нам главное увидеть, насколько ровно и красиво все отображается. Если проблем нет, тогда вас можно поздравить. Как правило, без ошибок все-таки не обойтись, особенно если верстается сложный макет.
Случайные опечатки в коде, отсутствие кроссбраузерных префиксов для некоторых свойств, использование технологий, которые имеют небольшую поддержку – эти и другие факторы могут влиять на отображение сайта в разных браузерах. Как правило, больше всего проблем возникает со старыми версиями Internet Explorer.
Тут уж приходится выбирать: либо вообще плюнуть на отображение сайта в IE 6-8, либо как-то выкручиваться, применяя специальные программы. Например, специально для этого придуман IE Tester. Программа тестирует сайт в старых версиях этого браузера, показывая, как он бы там выглядел. Также существуют специальные фиксы, которые добавляют поддержку некоторых элементов через JavaScript.
Шестой этап – окончательная проверка и доведение до идеального состояния. Для этого вам пригодятся отладчик и валидатор, которые помогут выявить и устранить мелкие ошибки.
Как скопировать верстку сайта
Возможно, вышеописанный процесс самостоятельной верстки вызывает у вас ужас, и нет никакого желания учиться верстать. Тогда вам нужно пользоваться другими вариантами. В частности, заказать верстку у фрилансера или скачать готовый шаблон. В интернете есть как шаблоны на чистом HTML и CSS, так и темы для различных CMS. Вам останется только разархивировать шаблон и использовать его в своих целях.
В этой статье мы рассмотрели три варианта, как получить верстку. Надеемся, эти знания вам пригодятся в создании своих или чужих сайтов. Подписывайтесь на обновления блога, потому что здесь вы сможете узнать еще массу всего интересного о сайтостроении.
