От автора: здравствуйте, уважаемые читатели. В предыдущих статьях мы рассмотрели теорию, связанную с версткой сайта. По окончании чтения этой статьи у вас будет четкое понимание того, как самому верстать сайт.
Если вас интересует вопрос, как сделать верстку сайта, то давайте попробуем на него сразу же ответить. По сути, есть три варианта ее получения. Первый – сделать самому. Вы просто берете любой попавшийся под руки макет и начинаете работу с ним, вырезая необходимые части для дальнейшей верстки. Вы можете верстать на заказ или просто для тренировки, что тоже очень полезно. Плюс этого способа в том, что вы не тратите денег и получаете драгоценный опыт в создании сайтов, который вам в любом случае пригодится.
Второй способ – заказать верстку у фрилансера, который может ее сделать. Допустим, у вас есть макет и вам нужно с него сверстать сайт. Сами вы это делать не умеете или просто не хотите тратить время. Как вариант, можно разместить заказ на любой популярной бирже фриланса. В ответ сразу же пойдут заявки, потому что сегодня многие люди оказывают подобные услуги.
Рис. 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, то мой совет пока не выставляйте свое творение на всеобщее обозрение в интерене, а лучше закажите свой придуманный дизайн профессиональным верстальщикам сайтов.
Не красивые сайты никому не нужны, а красивые являються магнитом на хороший трафик со стороны посетителей.
На этом все, надеюсь Вы поняли, что такое верстка сайта и зачем она нужна.
Видео на тему: Верстка сайта.
Многие знают, что создание сайта процесс сложный и состоит из нескольких этапов. Обычно все крупные сайты создаются примерно в следующей последовательности.
1) Сначала выбирается или рисуется макет сайта в каком-нибудь графическом редакторе, например, Photoshop.
2) Затем этот макет преобразуется в уже знакомый нам html и css-код, который уже доступен для открытия браузером. Это так называемый процесс верстки сайта.
3) Теперь макет, который мы получили в процессе верстки, нужно наполнить содержанием и изображениями.
4) Наконец, последним шагом мы публикуем получившиеся страницы в Интернете.
Сегодня мне бы хотелось подробнее остановиться именно на процессе верстки сайта и попробовать разобраться, что же это такое. Возможно, для кого-то этот термин будет незнаком.
Так, что же такое верстка сайта?
Как я уже говорил, верстка – это процесс написания html и css - кода для веб-страницы. Но кода можно написать очень много, какой именно это код? На самом деле, все очень просто, этот код отвечает за то, чтобы все элементы страницы размещались там, где нужно.
Например, двухколоночная верстка веб-сайта с заголовком (header) и нижней частью (footer).
В верхней части будет находиться логотип компании или лозунг сайта, но пока это горизонтальная полоска определенной высоты.
Наконец, самая нижняя часть может содержать copyright или информацию о владельце сайта, а пока это тоже горизонтальная полоса, которая не содержит никакой информации.
Процесс создания таких макетов, в которых еще нет информации, но общая структура веб-страницы уже определена и называется версткой сайта .
В этой статье я не буду останавливаться на вопросе о том, какими средствами такая верстка делается. Это тема уже другой статьи.
Скажу лишь только, что весь этот процесс состоит из двух этапов.
1) Логическая разметка. На этом этапе пишется html-код, который будет содержать элементы для будущего макета.
2) Презентационная разметка. Здесь, элементы, которые мы создали средствами html-оформляются в надлежащий вид, чтобы можно было понять, за какую часть сайта тот или иной элемент отвечает и где он должен находиться.
От верстки сайта очень многое зависит и это достаточно сложный процесс, требующий определенных знаний от веб-мастера. Плохая верстка, с плохим кодом может очень сильно загрузить Ваш сайт, и он будет грузиться медленно и смотреться не так, как нужно. Процесс верстки – это один из самых главных этапов создания сайта.
Именно поэтому появились люди, которые специально занимаются таким процессом и называют они себя верстальщиками .
Найти их можно на многих сайтах с фрилансерами.
В последнее время спрос на такого рода услуги возрос и мне часто приходится встречать объявления такого рода:
— Для удаленной работы требуется верстальщик.
— Приглашаем в команду человека, разбирающегося в вёрстке веб сайтов. Дизайн готовый есть.
Цены на их услуги достаточно высокие. Поэтому на этом можно неплохо заработать или хорошо сэкономить, если Вы сами научитесь хорошо верстать сайты.
Процесс создания сайта очень трудоемок и требует наличия определенных знаний в области программирования и немалых затрат времени. Рождение любого сайта начинается с отрисовки его макета дизайнером, далее готовый макет отправляется на верстку. Данный процесс следует разобрать более подробно.
Ответить на вопрос о том, что такое верстка, помогут определенные термины.
Сайт - это совокупность электронных фалов или документов, принадлежащих одному владельцу (частному лицу или организации), размещенных в сети и объединенных под одним IP-адресом или доменным именем.
Верстка сайта - это формирование его веб-страниц в текстовом редакторе с использованием языка разметки гипертекста.
Верстальщик веб-страниц - специалист по верстке, занимающийся компоновкой текстовой, графической и других видов информации на странице документа (странице сайта).
HTML - основной язык гипертекстовой разметки страниц в Интернете. Основу данного языка составляет набор элементов, заключенных с обеих сторон в тег (открывающий и закрывающий), каждый элемент имеет свои атрибуты, определяющие его основные свойства. Атрибут всегда указывается в открывающем теге.
Говоря более простым языком, задача верстальщика заключается в переводе всех элементов страницы сайта на язык, доступный любому Интернет-браузеру. При этом отображаемая в браузере страница должна быть внешне максимально приближена к дизайнерскому макету.
Что такое верстка сайта с помощью таблиц?
Любой документ, переведенный на язык HTML, представляет собой набор определенных элементов, заключенных в теги. Еще несколько лет назад большинство сайтов версталось с помощью таблиц. Код страницы при этом получался весьма громоздким и трудно читаемым. В него было сложно вносить какие-либо изменения по ходу дальнейшей работы над страницей. Кроме того, Интернет-браузер воспринимает таблицу как единый объект, поэтому отображение ее содержимого начинается только после полной ее загрузки на компьютер. Особенно это заметно тем пользователям, скорость Интернета которых оставляет желать лучшего. В настоящее время используется крайне редко. Несмотря на это, каждый верстальщик должен знать ее основы, к примеру, хотя бы для того, чтобы иметь возможность внести какие-либо коррективы в код, написанный несколькими годами ранее его предшественником, работающим над созданием сайта.
Что такое верстка сайта с помощью блоков?
Сайта, с использованием элемента div, имеет свои преимущества и недостатки. К основным ее преимуществам относятся:
Код, написанный с помощью блоков, более легко редактировать в последующем, удобно менять оформление страниц сайта. При этом отпадает всякая необходимость коррекции самого HTML-кода. Все изменения вносятся в отдельно созданный CSS-файл.
Полностью разобраться верстальщику в том, что такое верстка сайта с помощью блоков, позволяет знание и применение в своей работе технологии каскадных таблиц стилей (CSS). CSS представляет собой отдельный формальный язык, используемый для описания внешнего вида страницы веб-сайта. Таким образом, создав общий каркас страницы на языке HTML, верстальщик начинает заниматься его оформлением (определение фона страницы, придание разных цветов ее элементам, размещение рисунков, их масштабирование и т.д.), используя каскадные таблицы стилей.
Возможно, со временем появится еще более новый и более компактный способ верстки страниц сайтов. Пока же верстальщикам, устраивающимся на работу, повсеместно приходится отвечать на вопрос о том, что такое верстка сайта с помощью блоков и в чем заключаются ее преимущества.
Часто возникает вопрос, что такое верстка? Простым языком, верстка - это расположение составных элементов (текста, заголовков, изображений, таблиц) на странице документа. Верстка бывает следующих видов:
Описание первых двух опустим и перейдем сразу к верстке веб-страниц. Чтобы лучше понять, что это такое рассмотрим процесс создания сайта. Сначала создают дизайн-макет: рисуют каждую страницу и все его элементы. В итоге получают изображение сайта, но это всего лишь «картинка».
Далее, полученный макет нужно отобразить в браузере, да так, чтобы все элементы «ожили» и откликались на действия пользователей. На этом этапе и вступает в работу верстальщик. Используя язык разметки html, он создает документы, которые понимает браузер и отображает их привычными всем веб-страницами.
При верстке веб-страниц можно выделить два основных метода:
Табличная верстка раньше была основной. Преимущество верстки с помощью таблиц заключается в ее простом исполнении и практически одинаковом отображении в разных браузерах. Недостатки - сложная и объемная структура, которая в разы увеличивает количество кода (по сравнению с блочной). Чтобы изменить табличную верстку нужно затратить большое количество времени и усилий, долго вникать в уже существующую структуру.
На сегодняшний день продолжают верстать сайты табличной версткой, но профессионалы уже давно перешли на более гибкую - блочную. Табличную верстку рекомендуют использовать только для отображения таблиц.
Блочная верстка является основной в среде веб-разработчиков. В блочной верстке каркас документа состоит из тегов
Небольшой пример кода:
Табличная верстка
Шапка
Контент Меню Подвал
Код блочной верстки
Шапка
Контент
Результат получается одинаковый:
Даже для самого простого макета уже видна разница в коде, а с увеличением элементов разница будет расти в геометрической прогрессии.
Чтобы сверстать простую веб-страницу можно обойтись и обычным блокнотом. Для более сложных проектов не обойтись без специальных html-редакторов. Они подсвечивают код, что значительно упрощает процесс верстки. В профессиональной среде используют следующие программы:
Редакторы html-страниц разделяют на обычные и визуальные. Используя визуальный редактор, сверстать страницу сможет даже неопытный пользователь. Но стоит понимать, что визуальный редактор дописывает много лишнего кода (мусора) и лишает верстальщика возможности использовать гибкость языка html на 100%.
Основная проблема при верстке сайтов - не одинаковое отображение одного и того же документа в разных браузерах. Сверстав качественно страницу для Firefox, она может отображаться немного по-другому в Opera, и полностью разъехаться в Internet Explorer.
Причина в том, что каждый браузер разрабатывают разные компании и используют различные технологии и правила. Попытки прийти к единому стандарту уже делаются, но до конечного результата еще далеко.
Часто верстке не уделяют должного внимания. С таким подходом можно загубить даже самый креативный дизайн и сложный функционал сайта. Если посетители вашего личного блога это вам простят, то разваливающаяся верстка корпоративного сайта или магазина серьезно отразится на имидже компании. Самое верное решение - доверить работу профессионалам.
