Многие знают, что создание сайта процесс сложный и состоит из нескольких этапов. Обычно все крупные сайты создаются примерно в следующей последовательности.
1) Сначала выбирается или рисуется макет сайта в каком-нибудь графическом редакторе, например, Photoshop.
2) Затем этот макет преобразуется в уже знакомый нам html и css-код, который уже доступен для открытия браузером. Это так называемый процесс верстки сайта.
3) Теперь макет, который мы получили в процессе верстки, нужно наполнить содержанием и изображениями.
4) Наконец, последним шагом мы публикуем получившиеся страницы в Интернете.
Сегодня мне бы хотелось подробнее остановиться именно на процессе верстки сайта и попробовать разобраться, что же это такое. Возможно, для кого-то этот термин будет незнаком.
Так, что же такое верстка сайта?
Как я уже говорил, верстка – это процесс написания html и css – кода для веб-страницы. Но кода можно написать очень много, какой именно это код? На самом деле, все очень просто, этот код отвечает за то, чтобы все элементы страницы размещались там, где нужно.
Например, двухколоночная верстка веб-сайта с заголовком (header) и нижней частью (footer).
В верхней части будет находиться логотип компании или лозунг сайта, но пока это горизонтальная полоска определенной высоты.
Далее идет область с основной информацией. Она разбита на две вертикальные колонки. Обычно в меньшей публикуют меню сайта, а в большей, его основное содержание.
Наконец, самая нижняя часть может содержать copyright или информацию о владельце сайта, а пока это тоже горизонтальная полоса, которая не содержит никакой информации.
Процесс создания таких макетов, в которых еще нет информации, но общая структура веб-страницы уже определена и называется версткой сайта.
В этой статье я не буду останавливаться на вопросе о том, какими средствами такая верстка делается. Это тема уже другой статьи.
Скажу лишь только, что весь этот процесс состоит из двух этапов.
1) Логическая разметка. На этом этапе пишется html-код, который будет содержать элементы для будущего макета.
2) Презентационная разметка. Здесь, элементы, которые мы создали средствами html-оформляются в надлежащий вид, чтобы можно было понять, за какую часть сайта тот или иной элемент отвечает и где он должен находиться.
От верстки сайта очень многое зависит и это достаточно сложный процесс, требующий определенных знаний от веб-мастера. Плохая верстка, с плохим кодом может очень сильно загрузить Ваш сайт, и он будет грузиться медленно и смотреться не так, как нужно. Процесс верстки – это один из самых главных этапов создания сайта.
Именно поэтому появились люди, которые специально занимаются таким процессом и называют они себя верстальщиками.
Найти их можно на многих сайтах с фрилансерами. Например, на этом http://www.free-lance.ru.
В последнее время спрос на такого рода услуги возрос и мне часто приходится встречать объявления такого рода:
- Для удаленной работы требуется верстальщик.
- Приглашаем в команду человека, разбирающегося в вёрстке веб сайтов. Дизайн готовый есть.
- и.т.д.
Цены на их услуги достаточно высокие. Поэтому на этом можно неплохо заработать или хорошо сэкономить, если Вы сами научитесь хорошо верстать сайты.
P.S. Как вы видите, верстка сайта дело очень важное, поэтому я решил на своем блоге подробнее осветить эту тему. Хотелось бы спросить, интересно ли это было для вас или нет? Возможно, у Вас есть какие-то вопросы по этой теме, то можете задавать их в комментариях. Если отклик будет хороший, то постараюсь сделать побольше уроков.
P.S 2. Разместите эту заметку у себя на сайте со ссылкой на мой блог http://www.dimachen.info и получите обратную ссылку на Ваш сайт в разделе «Информационный спонсор».
Информационный спонсор:
1. http://design-lessons.com.ua
2. Здесь может быть ссылка на Ваш сайт.
Интересная статья. Требуется продолжение. Есть ли обучающий курс на эту тему?
Согласен с Багланом!Вот,обуающий курс очень не помешал бы.
обучающий курс очень не помешал бы.
Спосибо огромное за легбез
Я начинающий,получается не все.Вот хедор незнаю как прицепить через css.
неплохо. Я ЗА. Я уже знаю html и css, по этому можно ли уроков по JavaScrapt и PHP
Заранее Спасибо!
Я лично ни в каком фотошопе не делаю, хотя изначально это и было взято, так сказать учителем, вернее в его электронных учебниках, тоже вёрска, резка, потом в Дримвер.
Я всё это «опустил», «выбросил из головы», что я так себе не могу представить, как я хочу и как надо, представляю лучше фотошопа.
Так что СРАЗУ в дримвере и засаживаем всю эту хрень, одинакувую хрень отправляем в код .рнр, а что разное, так уж .html.
И режь его там хоть на десять блоков вдоль и поперёк.
Стили если использую, то местные, т.е. в коде, только ссылки, чтобы изменялись и полоса прокрутки.
Кстати про строки: »
»
(у Вас выдрал сечас) Вы, Дмитрий, где-то писали, ох я с полосой «повымахивался»! Где есть, где нет – сверяю всё одинаково, ан нет, где была цветная поса тэг был не закрыт, теперь у меня страницы начинаются с «», харэ Ваньку валять с этими прибамбасами, все браузеры и всё отличнно понимают, смотрел код ассов, у 2/3 нет этой х… «» и ВСЁ.
«DOCTYPE» и «html» съел зараза, подставите сами – поймёте.
«Андрей написал:
19 Март 2009
Я начинающий,получается не все.Вот хедор незнаю как прицепить через css.»
Не знаю, чего там искать, возьмите любой движок – ВордПресс – Всё подцеплено, тем полно, только «резинок» мало, хотите поэкспереминтировать, разверните код и посмотрите, что куда идёт, согласен, может поначалу и трудно будет, но зато разберётесь, что он откуда и как тянет, да можно и что-нибудь попроще «Джумлу»(шутка) там ещё мудрей, а так примеров для разбора масса и учебников.
Только вот надо ли «изобретать велосипед», всё уже сделано и если так разбираться – не угнаться за прогрессом.
Крутые программёры рулят!
Спасибо всем за отклик. Видимо тема действительно интересна многим. Сейчас как раз занимаюсь созданием обучающего курса на эту тему.
Если есть предложения, пишите, учту.
Спасибо за хост, панель отличная, работает пока тьфу-тьфу-тьфу, Ворпресс, Джумла, скрипты работают места и баз, и поддоменов хоть залейся….
Свобода и простор, что и надо Русскому Человеку!
Спасибо, полезная инфа, желательно продолжение.
мне тоже оч интересна эта тема. не хватило терпения разбираться с уроками Жени Попова. Решила взять готовые шаблоны Вордпреса, но как и что потом – вопрос! Если по ходу можно будет по готовому разобраться что к чему – будет просто здорово! Ведь проверять и перестраивать уже сделанное гораздо проще, чем все с нуля.
Согласна с Натальей. Осваивать верстку с нуля было бы неплохо, но мало у кого хватит на это времени и терпения. Я тоже делаю сайты по шаблонам Джумлы и когда уже всё готово возникает необходимость кое-что подправить. Вот здесь-то и нужны знания по html, css, php.
Это и хотелось бы видеть в ваших уроках.
Во девах то поднапёрло, а может выдают себя за них?!
«Наташа написал:20 Март 2009
мне тоже оч интересна эта тема. не хватило терпения разбираться с уроками Жени Попова. Решила взять готовые шаблоны Вордпреса, но как и что потом – вопрос!»
Уж по Вордпрессу то инфы завались и придумывать ничего не надо, качай у Кактуса – Ивана Калинина, я думаю найдёте без труда, подбирайте тему, переоформляйте, а может и нет, и рулите, пишите, пусть комментируют, создавайте страницы, записи и прочее и голову не забивайте, а там постепенно разберётесь, по нему уж, наверно, на самый захудалый вопросишка есть ответ, можете посмотреть ещё здесь, http://webstrojfab.zarinet.ru/, Дмитрий извините за ссылку, ну, а если ссылка не пройдёт, жиманите на имя, а там разберётесь. А может и здесь, что найдёте http://bravoo.zarinet.ru/.
А, что, неужели Попов недоходчиво пишет, уж по Поповым то урокам…
Попов пишет замечательно! Хорошо, доходчиво, просто. Но если ты чайник и все кажется поначалу китайской грамотой, то на все про все даже у Попова нужна уйма времени. Я просидела с уроками около месяца и сдохла. После того, как стала тестировать то, чему научилась в 3х браузерах и все поехало вкривь и вкось, стало просто подташнивать и с тех пор не могу себя заставить сесть за уроки снова. А сайт нужен, как говорят, еще позавчера
. Поэтому решилась на более простой и быстрый вариант, к которому хотелось бы прицепить и понимание что к чему? и возможность править и работать с сайтом самой, и не зависеть от кого-то.
А за ссылки огромное спасибо!
Ищете так «скачать вордпресс 2.7″ в сборке Ивана будет всё необходимое, сейчас был уже точно 2.7.1 в сборе, если, что пишите через любую форму, вот можете и с этих страниц там по-моему везде есть. А так Иван – Кактус из Новосибирска рулит классно lecactus.ru
Дмитрий извините за переписку, пусть девушка научится.
Хотя, Наташа, можете продолжить у меня, чтобы не грузить не по теме, http://zhizn.zarinet.ru/ в любом посте, странице, они все проходят модерацию.
Спасибо за статью.
Последнее время занимался этим делом и не знал, как называется эта деятельность.
Я тоже на Джумле пишу сайт, так что тема интересна и актуальна. И ничк в Джумле тяжелого и «мудрого» нет!)
Ничего нового не прочитал.
Даже если бы был новичком, имхо сплошная вода…
И правда, много воды.
Уважаемый Дмитрий, хочу вас уведомить что я разместил эту заметку у себя на сайте, вот ссылка http://design-lessons.com.ua/development/32-chto-takoe-verstka-i-kto-takoj-verstalshhik.html
Андрей, спасибо! Ссылка на Ваш сайт добавлена в конце заметке, в разделе «Информационный спонсор».
впринципе все ясно. Хотелось бы побольше узнать
Спасибо за статью, содержание которое доступно и просто изложено. Веду сейчас свой личный блог, так что полученные знания весьма помогут во многом разбираться…
Блин, так приятно, что вы тему подняли эту )))
Я верстальщик уже 4 года, работал в кампании, а сейчас уже 3 года как на фрилансе.
Верстка действительно процесс очень важный на этапе создания сайта, особенным плюсом есть знание SEO и натяжки верстки на различные движки, вроде WordPress или Joomla.
По своему опыту скажу – научится можно довольно быстро, за месяц. А потом просто набивать руку на мелких проектах. И уже через полгода ваш ценник на один сайт будет примерно 100 уе. В месяц можно не напрягаясь поднимать 1000-2000$. Это не треп, это личный опыт. И чем такая работа хуже офисной ? Так что учите html, пробивайтесь на фрилансе и добро пожаловать в наши ряды и свободный образ жизни )))
Здравствуйте всем! Объясните, пожалуйста, как происходит работа верстальщика на фрилансе? В том плане, чтоб не обманули. Для себя сайты я делал, тут все ясно. А когда делаешь на заказ, как происходит процесс разработки, передачи конечного варианта и получения денег?