Как я верстаю?

Привет всем читателям блога Записки о WordPress! Мой сегодняшний пост посвящен тому, как я верстаю сайты. Из него вы узнаете, какие программы необходимы для верстки сайта, как происходит процесс верстки и что мне помогает и мешает в этом деле.

Идея этого поста перешла ко мне по эстафете от УтБ, автора блога gtalk.kz. Вот, кстати, его пост, положивший начало эстафете.

С чего начинается верстка сайта?

Обычно верстка страницы сайта начинается с изучения макета, отрисованного дизайнером. Этот макет я разбиваю на составные части, не обращая внимания на мелочи:

  • шапка;
  • основная часть, где будет располагаться контент;
  • боковая колонка, если есть;
  • подвал;
  • другие элементы.

Получится примерно так:

Примерный макет сайта
Примерный макет сайта

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

Затем я создаю html-файл, в котором содержатся основные элементы страницы. В этом html-файле пока нет подробностей, просто структура. Мне нравится верстать на html5.

Потом я создаю соответствующий CSS файл, содержание которого зависит от многого:

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

Как происходит верстка?

После этого я открываю графический редактор, и вырезаю отдельные графические элементы оформления, которые нельзя сделать на одном CSS, и складываю их в папку /images/.

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

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

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

И так, шаг за шагом, постепенно будет оживляться идея дизайнера.

В самом конце я просматриваю сайт в разных браузерах, и проверяю html и css код на валидность, и исправляю ошибки, если они есть.

Какие программы для верстки я использую?

На моем компьютере установлен Ubuntu Linux, поэтому программы, которые я использую для верстки, будут немного специфичными 🙂 Но я уверена, что для всех из них есть аналоги под Windows.

Итак, вот мои программы для верстки:

  • gedit – это мой любимый блокнот, с подсветкой, нумерацией строк и другими полезными функциями;
  • Eclipse – редактор кода, который удобно использовать для больших проектов с огромным количеством файлов;
  • браузеры Firefox, Chrom, Opera и онлайн-эмулятор IE;
  • Иногда приходится использовать и сам IE, тогда запускаю виртуальную машину VirtualBox с виндой. Его же использую, если надо посмотреть, как верстка выглядит на винде;
  • графический редактор GIMP

Также использую такие онлайн-сервисы для верстки, как

Обстановка во время верстки

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

чай
Чай 🙂

Когда что-то не получается, то я перехожу к следующему элементу, а если не получается ничего – иду отдыхать 🙂

Принимайте участие!

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

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




26 комментариев к “Как я верстаю?”

  1. УтБ

    Отличный рассказ 😉 я стал также переходить на html5
    “графический редактор GIMP”
    хотел перейти на убунту, но как-то не решился 🙂 хорошая альтернатива фотошопу?
    gedit – удобен? все печатаете от руки?

    з.ы. кружку жалко 🙂
    з.ы.ы. спасибо, за участие!

    Ответить
    • oriolo

      Спасибо за интересную эстафету 😉

      >“графический редактор GIMP”
      А что с ним?

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

      gedit – достаточно удобен, печатаю от руки, да, но привыкла. Сейчас как раз нахожусь в поиске какого-нибудь легкого и удобного редактора кода.

      Ответить
      • УтБ

        “А что с ним?”
        “хорошая альтернатива фотошопу?”

        з.ы. суть эстафеты передать “слово” следующему:) что-то нет желающих:(

        Ответить
        • oriolo

          >”хорошая альтернатива фотошопу?”
          Фотошоповские файлы он открывать умеет, а больше мне от него ничего не надо 😀

          Я наверно пять человек спрашивала, не хотят ли они принять участие. Все пишут, что у них нет времени 🙁

          Ответить
      • Николай

        http://www.sublimetext.com/2 – Отличный редактор кода. Быстр и функционален. Советую.

        Ответить
        • oriolo

          Николай, на первый взгляд – очень достойная вещь! Понравилось! Скажите, если не покупать лицензию, то у него сохраняется весь функционал?

          Ответить
          • Николай

            Да, конечно. Просто несколько раз за день спрашивает о том не хотите ли Вы купить его.
            О его возможностях (о их части) можно почитать тут
            http://jkeks.ru/jkeks.ru/archives/1566

            Ответить
      • wd

        sublime text 2 Лучше наверное только волшебная палочка))

        Ответить
      • Вадим

        brackets->http://brackets.io/
        live coding это как наркотик, я например настолько пристрастился, что ничего другого просто не надо. Верстаю только в [brackets]

        Ответить
    • Leon

      А я с пиратской вИНДЫ перешел на Xubuntu. Это лучшая ОС для убитых, старых и маломощных компьютеров (как у меня). Она почти совсем не требует ресурсов. Специально создана для дров. Наслаждаюсь полетом своего полена. Ире респект. Прекрасный блог. Светлый человек. Мы все очень нуждаемся в таком человеке в нашем злом мире. ИМХО

      Ответить
  2. Юрий

    Отличный сайт! Есть повод его оставить в закладках

    Ответить
  3. Кристина

    Я хоть и не верстаю (но очень хочу научиться, шлавное – время найти!), но статья все равно полезна для меня. Спасибо)

    Ответить
    • oriolo

      Кристина, это не так сложно, как кажется на первый взгляд! Вы правы, главное – время 😉

      Ответить
  4. Winmaster

    Я и верстаю и, чёрт, как выразиться, дизайнерю =) Хотя вы знаете =)
    Кстати, примерно через месяц сверстаю себе на бложик шаблон, а то нынешний никуда не годиться. Буду рад если оцените =)
    Если какие проблемы – обращайтесь =) Я добрый =)

    Ответить
    • oriolo

      Если что – буду знать, к кому обратиться 🙂
      А не хотите эстафету перенять? Всего-то нужно небольшой пост по типу моего про то, как вы верстаете 😉

      Ответить
      • Winmaster

        Обращайтесь =)
        Если честно не против, но нет времени, мне нужно писать именно “уроки” веб-дизайна, стараюсь чётко определиться с последовательностью этих самых “уроков”, идей много, но не могу разобраться с чего начать и чем закончить.

        Ответить
        • oriolo

          А давайте так: я передам Вам эстафету, а вы когда сможете (в ближайшее время), напишете пост?

          Ответить
  5. Юлия

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

    Ответить
    • oriolo

      Юлия, буду рада 🙂 На самом деле, научиться всему этому совсем не сложно 😉

      Ответить
  6. Виталий

    Жаль нет видеоурока )

    Ответить
  7. Дамир

    когда работа не прёт, помогает 20-30 минут сна или дрёмы 🙂

    Ответить
  8. Юрий

    Лучший сайт, который можно найти в нетете, на тему wordpress!

    Ответить
  9. Ян

    Сколько в среднем у Вас уходит времени на верстку сайта по макету дизайнера?

    Ответить

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