HTML и CSS верстка сайтов

HTML и CSS верстка сайтов

От автора: HTML и CSS являются простейшими веб-технологиями, с помощью которых можно создать свой сайт. Давайте в этой статье подробнее рассмотрим, какие сайты можно сделать с их помощью.

Простой путь к созданию шаблона – плюсы и минусы

Чистая HTML верстка сайтов сильно отличается от того кода, который вы увидите, например, в php-шаблонах какой-нибудь CMS. Все потому, что страницы, созданные с помощью html, являются статическими. Что это означает? Опишу подробнее.

К примеру, у вас на сайте должно быть 50 страниц (вы так решили). 3 будут отличаться по дизайну (например, главная страница, страница контактов и записей). Остальные 47 это просто полезные статьи, которые вы решили опубликовать на своем ресурсе.

Если вы не хотите ставить свой сайт на CMS, то придется поначалу обходиться возможностями html. Это означает, что вам потребуется 50 html-документов, чтобы хранить всю информацию сайта. Удобно? Не совсем. А если вам придется делать какие-то правки в дизайн, то придется делать их на всех страницах.

Представьте, если бы такого подхода придерживались на крупных новостных сайтах, где каждый день могут добавляться сотни постов. Это были бы тысячи html-страниц. Управлять всем этим было бы практически невозможно.

Рис. 1. Так бы выглядела структура сайта, если бы он был на чистом HTML. Просто куча страниц.

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

Вне зависимости от того, будете ли вы использовать CMS или нет, мы приходим к одному выводу. Без html и css нельзя представить себе веб-разработку. Это те основы, с которых необходимо начать. Без их хотя бы поверхностного изучения нет смысла изучать что-то другое. Потому что, “то другое” гораздо сложнее этих основ.

Что нужно уметь для верстки

Верстка сайта выполняется из psd в html. PSD – это специальный графический формат, с которым работают дизайнеры. Они те, кто начинают разработку сайта. Они рисуют его. Как правило, это происходит в программе Adobe Photoshop. Верстальщикам тоже нужно уметь работать с этой программой (или с его бесплатным аналогом — GIMP), но от них требуется намного меньше квалификации.

После того, как дизайнер нарисует окончательный макет сайта, за работу берется верстальщик. В чем его задача? Пока что работа дизайнера является лишь красивой картинкой. Ее нужно перевести на языки, понятные браузерам, чтобы они могли отобразить сайт также, как он выглядит на макете.

Такими языками как раз и являются html и css. С помощью первого задается базовая структура сайта, его отдельные элементы. Второй этап представляет собой работу с CSS. Верстка сайта невозможна без стилизации элементов, за что и отвечает этот язык.

Это можно сравнить с работой художника. Сначала он делает набросок карандашом, а уже потом разукрашивает все. PSD-макеты можно бесплатно скачать в интернете. Также вы можете попробовать верстать без него, просто на ходу придумывая структуру и оформление. Для тренировки и учебы так тоже годится, хотя едва ли на выходе вы получите что-то красивое.

Соответственно, можно определить обязательные навыки, которыми обязательно должен владеть верстальщик:

Базовые умения работы с макетом (на уровне склейки, вырезания слоев)

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

Способность применять эти знания на практике, то есть при написании кода. Пример: не просто знать, что div – это блочный элемент, но и разбираться в его поведении при прописывании различных свойств.

Владение основными инструментами для проверки верстки и доведения ее до окончательного вида

Умение работать в программе, в которой выполняется работа (не в блокноте же писать, в самом деле).

Знание JavaScript, чтобы реализовать также поведение веб-страниц (это мы не будем пока рассматривать).

Итак, вот это основные навыки, которыми должен владеть человек, желающий самостоятельно сделать html-верстку макета сайта.

Если вы не собираетесь работать верстальщиком, а вам просто нужно попробовать сделать свой первый шаблон, то уже через неделю изучения можно пробовать свои силы. Очень хороший справочник можно найти на htmlbook.ru. Можете обращаться к нему время от времени.

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

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

Готовые шаблоны в интернете

В конце концов, сегодня можно найти много готовых шаблонов, которые бесплатно выложены в сети. Вбив в поисковик что-то в духе “шаблоны html” я сразу нашел как минимум 3 сайта, на которых были сотни готовых работ. Можно использовать их как есть, а можно переделать на свой лад. Это полностью готовая верстка сайта на html и css.

Рис. 2. Готовые шаблоны html

Главное сообщение, которое я хотел передать в этой статье, заключается в следующем: если вы хотите изучать веб-технологии, то начинать нужно именно с html и css. А чтобы достичь результата как можно быстрее, учитесь только там, где преподают качественно. Человек, который берет знания с хорошего источника, может достичь результата намного быстрее того, кто берет из плохого.

Подписывайтесь на наш блог – берите знания из хорошего источника!

Верстка сайта для начинающих

Прямо сейчас научитесь верстать сайты с нуля.

Смотреть курс

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree