Верстка сайта. Урок 1

верстка-сайтов

Вот я снова с Вами. Немного затянул с последними выходами статей. Ну, да ладно, хватит отступлений, давайте ближе к теме.

По текущей работе мне приходится сталкиваться с версткой сайтов, в принципе сейчас я этим и занимаюсь. Поэтому Вас ожидает небольшая «Санта-Барбара» :) на тему верстка сайта, CSS и html, кроссбраузерности и многое другое не менее интересное.

Если Вас заинтересовали эти слова, милости просим. Данная статья первая из серии, поэтому начнем с общего. Все это время мы с Вами будем начинающими верстальщиками ;)

При создании сайтов в идеале участвуют 3 человека. Веб-дизайнер — рисует сайт, человек с фантазией и со знанием фотошопа и т. д. Мне не дано стать дизайнером это точно.

Верстальщик следующий человек с меньшим багажом знаний фотошопа и фантазии. Отлично знает html, css, javascript и т. д.

Веб-разработчик/Веб-программист — человек с отсутствием фантазии и фотошопа))

Вот моя таблица — участника создания полноценного сайта

Веб-дизайнер

Верстальщик

Веб-программист

Знает фотошоп

+

+

-

Есть фантазия

+

±

-

Знает языки разметки

-

+

+

Знает языки программирования

-

±

+

Как мы видим из моей придуманной таблицы верстальщик универсальный человек.

Теперь давайте о необходимых знаниях, софте и т. д.

Минимум знаний для начинающего верстальщика:

  • основы html и css – так как мы только начинаем, то базового уровня должно Вам хватить. (Мы будем рассматривать язык разметки HTML!)

  • Базовое знакомство с фотошопом/photoshop’oм — так как придется смотреть на задумки веб-дизайнера и воплощать в коде.

  • Желание и упорство — главное все делать с душой. Под плеткой никто не чему не научится.

Мой софт верстальщика

Еще один важный момент верстальщика — его софт/программы.

  • Фотошоп/photoshop — отличный графический редактор, используемый веб-дизайнером, поэтому и верстальщик должен иметь данную программу для просмотра и использования частей сайта. Программа платная.

    Для отличного процесса формирования веб-страниц нам необходим редактор, где мы будем писать разметку и css файлы. Здесь выбор велик, и обычно каждый выбирает, то что ему по душе, подойдет и самый простой Блокнот (но не вздумайте его использовать!)

  • Notepad++  по-моему лучшая альтернатива Notepad – Блокноту. Для начинающих особо рекомендую: помогает набить руки для набора и для быстрого набора. Программа бесплатна. Я проводил сравнения Notepad и  Sublime text, сейчас пользуюсь последним.

    Notepad++

  • phpDesigner (любая другая IDE, например, webStorm) – платная программа для программирования, отлично подойдет для верстки сайтов. Основные плюсы- это удобность использования, много настроек и функций, а также подсветка кода: ошибок, выделение текущего фрагмента и т. д. Программа платная.phpdesigner программа верстки сайта

  • Еще сотни других программ о которых в принципе говорит не стоит, так как каждый выбирает для себя. Посмотрите в гугл по фразе «Текстовый редактор», «html/css/php редакторы» и т. д.

  • А также оочень важный момент — актуальные браузеры. По этой теме будет отдельная статья плюс расскажу о софте для браузеров.

Ну и на последок, хорошие ресурсы по данной теме.

Htmlbook.ru – наверное самый/один из самых полезных ресурсов по html и css. Если Вы начинаете, то однозначно необходимо начинать с этого ресурса.

validator.w3.org сервис проверки Валидности html кода.

jigsaw.w3.org/css-validator css валидатор.

Что и где читать будет в отдельном посте.

И в принципе, никто google и yandex не отменял ;)

с/у  УтБ

На десерт видео – примерно так я устаю от верстки:)



Комментарии к статье

  • #

    Весрсткой занимаюсь уже лет 5. И признаюсь честно, напрягают молодые дизайнеры, которые с версткой никак не знакомы. Рисуют красивые картинки, а ты потом маешься, пытаешься все это дела как-то сверстать.
    Обидно то, что заказчики утверждают дизайн не посовещавшись с верстальщиком. В итоге получам кучу гемороя:(

  • #

    Так как я ничего не понимаю в этих верстках, поступила проще: заказала в студии дизайна и рекламы Uniartic, лучше, чем целыми днями разбираться самой. Думаю, что профессионалы сделают это гораздо лучше. *SOS* Обратилась на этом сайте

    • #

      мнда)) Вы похоже не видите разницу между вёрсткой сайтов и вёрсткой журналов ?))

  • #

    Мне нравится верстка – интересная работа. Но утомляет – в конце работы вырубаюсь, как тот кот из видео. :)

    • #

      :) бывает )) правильно отдыхать надо)

  • #

    Была затронута тема, что если бы дизайнеры знали основы вёрстки, то это бы им не повредило. Мне напротив кажется, что это им как раз таки. Никогда не задумывались почему программеры и верстальщики с таким трудом придумывают дизайн. Мне кажется, что их на подсознательном уровне ограничивают знание вёрсти. А дизайнер в свободном полёте, ему чужды, мысли о тенях возле рамок, он как художник, творит! А если бы он задумывался надо тем как это будет реализовано, то думаю все бы шаблоны были очень минималистичными. И да, я не дизайнер =)

  • #

    А ведь таблица правильно составлена)) Я получается вэб-программист, ни грамма фантазии. Люблю программировать только логику сайта а не его внешность))

    • #

      Такое часто бывает)) но все, конечно, такие)

  • #

    Очень понравилась сравнительная таблица))
    К софту верстальщика я бы еще добавила Eclipse PDT, он бесплатный, кроссплатформенный, и, судя по скриншоту, визуально похож на phpDesigner.

    • #

      Сам придумал :)
      Надо попробовать, спасибо за софт.

  • #

    А почему ты пишешь что фотошоп платный- в сети можно найти бесплатный, а вот платных я еще не видел:

    • #

      Ну мы же не пользуемся варезом ;-)

  • #

    А визуальный редактор в phpDesigner есть?
    Я вот до сих пор по старинке всё делаю в DreamWeaver 8 в комплекте с денвером.

    • #

      Да, конечно. только я им никогда не пользуюсь))
      DreamWeaver 8 от макромедии очень даже неплохой редактор, тут дело вкуса;-)

      • #

        А я по старинке в Notepad++ все делаю. Хоть и геморно, зато код всегда в уме.

        • #

          Всегда советую с него начинать,очень легко потом запомнить html и css, просто сейчас надо быстро писать ;)

  • #

    Ох, как же я не люблю верстку :) По одному из проектов с ней постоянно приходится сталкиваться :(

  • #

    Хорошее начало, интересная статья. Обязательно прочту продолжение

    • #

      конечно, подписывайтесь на обновления чтобы быть всегда в курсе ;-)

  • #

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

    • #

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

  • #

    Никогда не понимал до конца, кто такой верстальщик. И не понимал, что это за услуга такая – верстка сайтов. Насколько я понял из статьи, то верстка – это исправление ошибок в коде и улучшение дизайна сайта?

    • #

      Вам сюда: ru.wikipedia.org/wiki/Верстальщик_веб-страниц
      Вкратце верстальщик делает из нарисованного дизайна – рабочую html версию сайта (необязательно html)

  • #

    В первом абзаце пару опечаток исправь)
    кроссбраузность и сецяас
    Или это так задумано?)

    • #

      спасибо, исправил:)
      да, да так задумано ;)

  • #

    года 3 в вебмастеренге, а верстать не умею)) будем учится вместе!

    • #

      конечно ;-) учиться никогда не поздно!

  • #

    Да, но в реальности не каждый дизайнер считает своим долгом вникать в область верстки.

    • #

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

  • #

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

    А вообще, я делал и дизайн, и верстку, и программирование на PHP+MySQL для несложных сайтов.

    • #

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

      • #

        вот ненадо тут про наскальные рисунки :) у каждого своя работа, кто то рисует, а кто то с этим рисунком “имеется” :) причем за рисунок и платят больше :)

        • #

          похоже чьи-то чувства были задеты :) не хотел) просто, верстальщики часто “вспоминают” дизайнера при верстке))
          “причем за рисунок и платят больше”
          ну у Вас и времени больше уходит ;)

          • #

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

          • #

            Согласен, но порой дизайнерам лень создать папки и структуру шаблона (а то приходится искать что где :( )
            html и css не сложно понять, главное не перемудрить ;) удачных исследований!

          • #

            Я только учусь верстке..Вот мне подсказали, чтобы цельную картинку слепить, и один блок не сползал на другой и т.д. в css нужно прописать обязательно float: ….; clear:both;
            – и без позиционирования… и тогда clear:both отменяет все предыдущие рамки-ограничения и т.п… Я почти к каждому блоку ставлю..)) пока получается:))

          • #

            :) не надо так) старайтесь избегать такое.