Многие знают, что создание сайта процесс сложный и состоит из нескольких этапов. Обычно все крупные сайты создаются примерно в следующей последовательности.
1) Сначала выбирается или рисуется макет сайта в каком-нибудь графическом редакторе, например, Photoshop.
2) Затем этот макет преобразуется в уже знакомый нам html и css-код, который уже доступен для открытия браузером. Это так называемый процесс верстки сайта.
3) Теперь макет, который мы получили в процессе верстки, нужно наполнить содержанием и изображениями.
4) Наконец, последним шагом мы публикуем получившиеся страницы в Интернете.
Сегодня мне бы хотелось подробнее остановиться именно на процессе верстки сайта и попробовать разобраться, что же это такое. Возможно, для кого-то этот термин будет незнаком.
Так, что же такое верстка сайта?
Как я уже говорил, верстка – это процесс написания html и css - кода для веб-страницы. Но кода можно написать очень много, какой именно это код? На самом деле, все очень просто, этот код отвечает за то, чтобы все элементы страницы размещались там, где нужно.
Например, двухколоночная верстка веб-сайта с заголовком (header) и нижней частью (footer).
В верхней части будет находиться логотип компании или лозунг сайта, но пока это горизонтальная полоска определенной высоты.
Наконец, самая нижняя часть может содержать copyright или информацию о владельце сайта, а пока это тоже горизонтальная полоса, которая не содержит никакой информации.
Процесс создания таких макетов, в которых еще нет информации, но общая структура веб-страницы уже определена и называется версткой сайта .
В этой статье я не буду останавливаться на вопросе о том, какими средствами такая верстка делается. Это тема уже другой статьи.
Скажу лишь только, что весь этот процесс состоит из двух этапов.
1) Логическая разметка. На этом этапе пишется html-код, который будет содержать элементы для будущего макета.
2) Презентационная разметка. Здесь, элементы, которые мы создали средствами html-оформляются в надлежащий вид, чтобы можно было понять, за какую часть сайта тот или иной элемент отвечает и где он должен находиться.
От верстки сайта очень многое зависит и это достаточно сложный процесс, требующий определенных знаний от веб-мастера. Плохая верстка, с плохим кодом может очень сильно загрузить Ваш сайт, и он будет грузиться медленно и смотреться не так, как нужно. Процесс верстки – это один из самых главных этапов создания сайта.
Именно поэтому появились люди, которые специально занимаются таким процессом и называют они себя верстальщиками .
Найти их можно на многих сайтах с фрилансерами.
В последнее время спрос на такого рода услуги возрос и мне часто приходится встречать объявления такого рода:
— Для удаленной работы требуется верстальщик.
— Приглашаем в команду человека, разбирающегося в вёрстке веб сайтов. Дизайн готовый есть.
Цены на их услуги достаточно высокие. Поэтому на этом можно неплохо заработать или хорошо сэкономить, если Вы сами научитесь хорошо верстать сайты.
Грамотная разработка сайта - это сложный многоэтапный процесс. Верстка сайтов является неотъемлемой частью процесса изготовления сайтов. Что такое верстка сайта - это процесс формирования веб-страницы по готовому макету. Этот процесс заключает в себе создание кода страницы при помощи понятного браузерам языка размётки гипертекста html, и оформление её с помощью каскадных таблиц стилей (CSS). Не нужно самому пытаться сверстать сайт, целесообразнее заказать услуги верстальщика. Ведь должна учитывать многочисленные особенности, как правил верстки, так и параметров отображения документов в различных браузерах.
Верстка и дизайн ширины страницы
Разработка сайта, дабы не сломать продуманный изначально дизайн, должна учитывать тот факт, что пользователи сети Интернет имеют мониторы с различным разрешением. В этом случае существует два варианта дизайн-макета сайта: сайт с фиксированной шириной и резиновый сайт. Ширина фиксированного сайта определяется из расчета того, что по статистическим данным большинство пользователей используют мониторы с разрешением 1024х768 пикселей. Следовательно, для того, чтобы избежать появления горизонтальной полосы прокрутки и искажения дизайна, нужно в среднем брать ширину макета примерно 800-990 пикселей. Недостаток при таком методе верстки - это неэффективное использование свободной площади. Резиновый макет сайта получается за счет того, что единицами измерения при верстке дизайна в большинстве своем выступают проценты, что позволяет растянуть макет на всю ширину окна браузера. Верстка и дизайн резинового макета наиболее предпочтительны.
Верстка сайтов с учетом кроссбраузерности
Сегодня существует целый ряд популярных браузеров, используемых людьми для работы в сети Интернет. К ним относятся: Internet Explorer, Opera, Mozilla Firefox, Google Chrome, Netscape Navigator, Safari и другие. Каждый из них имеет несколько версий, и каждый может отображать одну и ту же страницу, представленную в формате html, по-разному. Все создатели браузеров стремятся прийти к единому стандарту использования языка гипертекстовой разметки, но пока существуют разногласия, поэтому верстка сайтов должна учитывать кроссбраузерность.
Грамотная верстка сайтов с чистым кодом
Еще одно правило хорошего тона при верстке сайта - это чистый и красивый код. Что это значит? Это значит, что код html разметки страницы красиво отформатирован, содержит комментарии и выделенные логические блоки. Использование каскадных таблиц стилей(CSS), позволит очистить код от лишних тэгов, и сделать вес сайта в целом значительно меньше. Верстка сайтов с использованием всех этих манипуляций нужна для того, чтобы упростить код, и столкнутся с наименьшим количеством проблем при его исправлении, модификации и доработке. Правильный компактный код облегчит индексацию сайта поисковиками, а малый вес сократит время загрузки Вашего сайта.
Табличная и блочная верстка сайтов
Сверстать сайт возможно двумя принципиально разными способами. Первый способ - при помощи таблиц. Табличная верстка использует элементы разметки не соответствующие той семантике, которую они несут, с целью получения внешних эффектов, постольку, поскольку изначально таблицы не были предназначены для построения каркаса страниц, а служили для стандартного ввода данных. Для того, чтобы сверстать сайт с помощью табличной верстки, зачастую возникает необходимость использования множества вложенных таблиц. Такой подход нередко сильно затрудняет обработку браузером страниц, увеличивает размер документа и снижает скорость загрузки файлов, и может привести к появлению ошибок в коде. Более удобно и правильно, с точки зрения убеждений о разделении содержания и оформления, верстать сайт при помощи слоев (блоков). Блочная верстка сайтов дает больше возможностей, позволяет сделать код компактнее, и увеличить скорость загрузки веб-страницы. Через CSS свойства слоев настраивать гораздо удобнее. При помощи верстки слоями можно гораздо более эффективно разработать сайт, который будет корректно отображаться в браузерах.
Заказать сайт лучше у профессионала, . Профессионально сверстанный сайт обладает единым стилем и отображает все элементы дизайнерской концепции. Он имеет неплохие навигационные свойства юзабилити и позволяет даже неопытному пользователю легко перемещаться по сайту. Верстка сайтов иногда учитывает необходимость определенных рабочих инструментов: мощного компьютера с большим запасом оперативной памяти. И, наконец, только профессионал с опытом работы разбирается в тонкостях поведения различных браузеров и правильно использует различные элементы стилей для точного отображения дизайна страниц сайта.
HTML изначально задумывался как язык, которому не нужны средства оформления, такие как цвет, размер, рамки или что-то подобное. Разработанный в Европейском институте физики частиц (CERN), HTML был игрушкой ученых, их, прежде всего, интересовала логика информации, а не её визуальное представление. Тогда ещё не существовало понятия веб-дизайна и вёрстки как таковой, все сайты по своему оформлению были практически однотипными, в стиле, называемом сейчас «академический дизайн». Пример до сих пор можно посмотреть на lib.ru.
Однако пользователи преимущественно думали иначе и, глядя на красивую картинку, отдавали предпочтение именно ей. Разработчики браузера Netscape прекрасно понимали это и вводили в HTML новые теги, улучшающие внешний вид документа. Эти теги не были стандартизированы и работали только в Netscape, что в эпоху повального засилья этого браузера, не имело значения. Доля Netscape составляла более 90% от всех существующих браузеров.
Влияние Netscape оказалось губительным для академического дизайна, фактически похоронив его и оказалось благотворным для становления веб-дизайна. Разработчики сайтов поняли, что дизайн это не просто разноцветный текст и вставленные наобум картинки. Это возможность красочно и эффектно подать материал, придать определённое настроение сайту, заинтересовать посетителя и задержать его на ресурсе. Дизайн стал непосредственным этапом разработки сайта, за которым последовала и вёрстка. Нарисованные в Фотошопе макеты следовало превратить из одной картинки в набор изображений, стилевых и HTML-файлов, способных быстро загружаться по сети, сохраняя при этом особенности дизайна.
Век Netscape продолжался до тех пор, пока часть рынка браузеров не захватила Microsoft со своим браузером Internet Explorer, что в итоге принесло только головную боль разработчикам сайтов. Разные подходы Netscape и Internet Explorer к отображению сайта, противоречивая поддержка стилей и тегов, большое количество мелких ошибок привело к тому, что сайт приходилось тестировать и отлаживать долгое время.
Устаревшие версии браузеров не в полной мере поддерживали CSS (Cascading Style Sheets, каскадные таблицы стилей), поэтому код представлял собой окрошку из HTML и CSS. Это привело к тому, что для макетов стали применяться таблицы с невидимой границей, на долгое время ставшими стандартом де-факто.
Следующим этапом развития разработки сайтов стало рождение спецификации, которая была названа Cascading Style Sheets Level 2, сокращенно CSS2. Следом появилось обновление Cascading Style Sheets Level 2 Revision 1 (CSS 2.1), которое используется по сей день. Выпуск новых версий браузеров, поддерживающих, пусть и не в полной мере, эту спецификацию, серьёзно облегчил работу над сайтами. В итоге, начал происходить постепенный переход от табличной вёрстки к блочной или, как она ещё называется, вёрстке слоями, в которой расположение элементов на странице и их вид задаётся через стили.
В настоящее время уже можно заявить, что табличная вёрстка в большинстве своём является архаизмом. Тем не менее, существует ещё множество сайтов вроде yandex.ru, artlebedev.ru и других, свёрстанных именно при содействии таблиц. Такой консерватизм связан со следующими обстоятельствами.
Таким образом, вёрстка в простом понимании это процесс превращения работы дизайнера в веб-страницу, отображаемую в браузере. Но один и тот же результат можно получить разными методами и уже от верстальщика зависит, какой из них предпочесть. От такого выбора зависит результат работы сайта, быстрота его отображения, доступность для разных устройств и браузеров.
Помните, что вёрстка это практическая дисциплина и только самостоятельно решая разные задачи и работая над проектами, вы сможете освоить это искусство.
От автора: здравствуйте, уважаемые читатели. В предыдущих статьях мы рассмотрели теорию, связанную с версткой сайта. По окончании чтения этой статьи у вас будет четкое понимание того, как самому верстать сайт.
Если вас интересует вопрос, как сделать верстку сайта, то давайте попробуем на него сразу же ответить. По сути, есть три варианта ее получения. Первый – сделать самому. Вы просто берете любой попавшийся под руки макет и начинаете работу с ним, вырезая необходимые части для дальнейшей верстки. Вы можете верстать на заказ или просто для тренировки, что тоже очень полезно. Плюс этого способа в том, что вы не тратите денег и получаете драгоценный опыт в создании сайтов, который вам в любом случае пригодится.
Второй способ – заказать верстку у фрилансера, который может ее сделать. Допустим, у вас есть макет и вам нужно с него сверстать сайт. Сами вы это делать не умеете или просто не хотите тратить время. Как вариант, можно разместить заказ на любой популярной бирже фриланса. В ответ сразу же пойдут заявки, потому что сегодня многие люди оказывают подобные услуги.
Рис. 1. Многим людям нужны услуги по верстке.
Выбирая человека для работы, просмотрите его рейтинг, отзывы и портфолио. Выбирайте только толковых исполнителей. В среднем, услуги по верстке обойдутся в 1000-3000 рублей. Если это адаптивная верстка и макет сложный – может быть намного больше. Кстати, самой популярной российской биржей фриланса считается fl.ru.
Третий способ – скачать готовые верстки в интернете. Сегодня масса сайтов, на которых вы можете абсолютно бесплатно скачать готовые шаблоны, выполненные профессионалами. Минус такого метода только в том, что вы получаете неуникальную верстку и кто-то тоже может ее скачать. Но вы можете изменить код везде, где это нужно и добиться большей уникальности.
Для этого вам придется хоть немного разбираться в HTML и CSS. Некоторые фрилансеры предоставляют услуги по переделке шаблонов. Вы можете этим воспользоваться. Также в сети продают так называемые премиум-шаблоны. Это верстки высокого качества. Как правило, адаптивные и с соблюдением всех стандартов.
Итак, мы посмотрели три способа сделать верстку сайта. Можно остановиться на первом из них подробнее.
Как создать верстку сайта самому? Для этого вам понадобится макет, программа для написания кода, голова и руки. Да, пожалуй это тот минимальный набор, который вам пригодится. Давайте попробуем разделить верстку сайта на несколько этапов, чтобы наиболее хорошо представить, как она делается.
Первый этап – подготовительный. Заключается в том, что мы просто создаем необходимые нам файлы, папки, подключаем библиотеки и фреймворки, с которыми планируем работать, создаем таблицу стилей, файл для веб-сценариев и т.д. Мы просто подготавливаем все для начала работы.
Второй этап – создание сетки. Это каркас нашего сайта. Самым простым вариантом сетки традиционно считается такой: шапка, основное содержимое, какой-то блок справа или слева и футер (низ) страницы. В вашем же макете все может быть сложнее. К тому же, отдельные блоки содержат в себе другие элементы, которые вам тоже нужно будет расставить. Но это уже потом, а пока вам нужно просто создать сетку. Самые популярные варианты сеток можно посмотреть на htmlbook.
Для этого вам нужны знания в области создания и расстановки структурных элементов на странице. Например, вы должны знать, что такое табличная и блочная верстка, как можно задавать ширину и высоту элементов, задавать обтекание и т.д. Вам нужны знания, которые можно получить в процессе изучения верстки. Наиболее полные знания вы сможете получить в нашем .
Третий этап – работа с более мелкими элементами. Чтобы продолжить делать верстку сайта, вам нужно заняться расположением остальных элементов на странице. Сетка – это всего лишь каркас, который опытным верстальщиком создается за пару минут. Дальше начинается основная часть работы – расставить все элементы так, чтобы они стояли точь в точь как в макете.
Например, логотип должен стоять у вас в правом верхнем углу шапки. Вы должны знать, как можно его туда засунуть. А в этом вам опять-таки помогут наши видеоуроки по основам HTML и CSS. Если вы планируете сделать резиновую верстку сайта, то вам нужно будет учитывать особенности позиционирования элементов для нее. Чтобы разобраться с особенностями поведения резиновых блоков, рекомендую пройти этот .
Четвертый этап можно выполнять совместно с созданием сетки и позиционированием всех элементов веб-страницы. Это работа со стилями. Прекрасно, если все элементы расставлены вами правильно, но без стилей они будут выглядеть непрезентабельно. Задание фона страницы, ширины и цвета иконок, создание и распределение стилевых классов и идентификаторов, прописывание базовых свойств и дополнительных визуальных эффектов – это всего лишь некоторые задачи, которые стоят перед верстальщиком в работе со стилями.
Рис. 2. Файл стилей, в котором верстальщик придает внешний вид сайту. Чем сложнее верстка, тем более громоздким может получиться этот файл.
Может быть, новичку это может показаться трудным, но всему этому обучиться достаточно быстро. HTML и CSS – это не программирование, тут не нужно чрезмерно ломать голову – просто выучите один раз и навсегда основные правила, теги и свойства и все это останется в вашей голове надолго. Конечно, при условии постоянной практики.
Пятый этап. Мы уже серьезно продвинулись. Основная часть работ завершена – сделана наша, пусть еще несовершенная, но уже верстка сайта. Сделать ее еще лучше – это дальнейшая основная задача. С этого этапа мы начинаем активно тестировать нашу верстку во всех основных браузерах. Нам главное увидеть, насколько ровно и красиво все отображается. Если проблем нет, тогда вас можно поздравить. Как правило, без ошибок все-таки не обойтись, особенно если верстается сложный макет.
Случайные опечатки в коде, отсутствие кроссбраузерных префиксов для некоторых свойств, использование технологий, которые имеют небольшую поддержку – эти и другие факторы могут влиять на отображение сайта в разных браузерах. Как правило, больше всего проблем возникает со старыми версиями Internet Explorer.
Тут уж приходится выбирать: либо вообще плюнуть на отображение сайта в IE 6-8, либо как-то выкручиваться, применяя специальные программы. Например, специально для этого придуман IE Tester. Программа тестирует сайт в старых версиях этого браузера, показывая, как он бы там выглядел. Также существуют специальные фиксы, которые добавляют поддержку некоторых элементов через JavaScript.
Шестой этап – окончательная проверка и доведение до идеального состояния. Для этого вам пригодятся отладчик и валидатор, которые помогут выявить и устранить мелкие ошибки.
Возможно, вышеописанный процесс самостоятельной верстки вызывает у вас ужас, и нет никакого желания учиться верстать. Тогда вам нужно пользоваться другими вариантами. В частности, заказать верстку у фрилансера или скачать готовый шаблон. В интернете есть как шаблоны на чистом HTML и CSS, так и темы для различных CMS. Вам останется только разархивировать шаблон и использовать его в своих целях.
В этой статье мы рассмотрели три варианта, как получить верстку. Надеемся, эти знания вам пригодятся в создании своих или чужих сайтов. Подписывайтесь на обновления блога, потому что здесь вы сможете узнать еще массу всего интересного о сайтостроении.
>> Что такое верстка сайта
Верстка сайта на сегодняшний день является неотъемлевой частью при создании всевозможных сайтов. Этот факт объясняется тем, что мы все чаще и чаще слышим слово верстка сайта в интернете. Появилось данное понятие буквально недавно. Все началось с того, как появились программы с помощью которых, можно делать всевозможные фишки для сайтов, которые прикрашали сайт из нутри. Первой из этих программ, появилась программа Adobe Photoshop . Веб-дизайнеры начали применять данную программу для своих нужд, а именно оформлять свой сайт. Они начали создавать кнопки для сайта, редактировать изображения, создавать красивые картинки и т.д..., после чего веб-дизайнеры вставляли свое творение себе на сайт.
Но, недавно веб-дизайнеры задумались над тем, а почему бы им не создать красивый шаблон , который будет радовать глаз любого посетителя заглянувший на сайт и увидев там красивый дизайн сайта. Этот факт безпорно придасть магнетизма любому сайту, что даст возможность заманить к себе, возможно постоянных посетителей, которые станут Вашими поклониками. Ведь этого добивается каждый веб-дизайнер сайтов. Каждый хочет, чтобы его сайт был краше и лучше по всем аспектам и чтобы на его сайт приходили большое количество людей. Поэтому дизайн сайта сегодня приобретает второе дыхание. Для этого, чтобы создать красивый дизайн для сайта и придумали верстку сайта, которая положет начало красивым и интересным сайтам.
Но, что такое верстка сайта ? Это комплекс мер и действий, котрые необходимы, чтобы нарисовать и сверстать в HTML красиво оформленный дизайн для сайта. Для рисования дизайна к сайту, верстальщики используют программу Фотошоп . Они начинают выдумывать и представлять, каким должен быть их сайт и как он должен выглядеть в интернете. По сути верстка сайта-это конкретный шаблон, который будет основным и постоянным для всего сайта.
Те люди, которые умеют хорошо пользоваться программой Photoshop, могут сверстать сайт за пару часов, после чего у них будет готовый вид, который по их мнению должен присутствовать на сайте.
Но, нарисовать шаблон для сайта -это еще полдела. Ведь основная работа заключается в том, как применить нарисованный дизайн на сайте. Ведь сверстаный шаблон для сайта, так просто не применишь на сайт. Для этого существуют языки программирования, такие как HTML, CSS и так далее. Этот процесс является самым сложным и трудоемким. Именно от того, на сколько веб-дизайнер знает хорошо языки программирования сайта, на столько у него будет идеален его сверстанный в Фотошопе дизайн.
При верстке готового шаблона на сайте, нужно учитывать много моментов, такие как; отображение сайта в различных браузерах, его валидность, грамотной подачей того, что верстальщик хочет дать посетителю сайта, и так далее... Запомните, сверстать сайт-это еще полдела, основная работа заключается в том, чтобы данный шаблон правильно сверстать в HTML код . Только от того, на сколько грамотно Вы сверстаете свой сайт в код, на столько он будет являтся качеством не только Вашего умения верстать сайты, но и правильности без ошибок применять данный шаблон у себя на сайте. От качество Вашего сверстанного сайта на прямую будет зависеть внимание к данному сайту со стороны посетителей, которые будут судить Ваш сайт по своим критериям.
Вывод: если Вы в совершенстве владеете навыками верстки сайта в Фотошопе и при этом можете без ошибок данный дизайн сверстать в HTML код, то беритесь за это дело и создавайте красивые сайты, но если Вы плохо владеете навыками работы с программами, с помощь которых можно сверстать сайт и при этом плохо знаете языки HTML и CSS, то мой совет пока не выставляйте свое творение на всеобщее обозрение в интерене, а лучше закажите свой придуманный дизайн профессиональным верстальщикам сайтов.
Не красивые сайты никому не нужны, а красивые являються магнитом на хороший трафик со стороны посетителей.
На этом все, надеюсь Вы поняли, что такое верстка сайта и зачем она нужна.
Видео на тему: Верстка сайта.
