Вместо вступления

Как известно, учиться лучше всего на примерах и осваивать все новое желательно по принцыпу от простого к сложному. Взяв за основу эти две жизненные аксиомы мы попытаемся шаг за шагом разобраться в том, как из нарисованных дизайнером макетов создать полноценную web страницу.

Сразу оговорюсь - статьи, опубликованные в этом разделе, расчитаны на людей, уже знакомых с html и css. Так же вы должны иметь навыки работы с программой Adoble Photoshop и представлять, как нарезаются графические элементы для верстки.

Мы не будем разбираться в основах "чтения" PSD шаблонов, изучать синтаксис и всесторонне рассматривать возможности каждого элемента верстки. Предполагается, что вы уже имеете небольшие знания в этой области. Если нет, то я настоятельно рекомендую предварительно изучить какой нибудь курс по html и css для начинающих. Мы же сразу приступим к практике - сначала сверстаем макет небольшого сайта-визитки, поработаем над более сложными макетами коммерческого сайта или блога, попробуем свои силы в верстке интернет магазина.

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

Так же нашей целью будет кроссбраузерность с поддержкой ИЕ до седьмой версии включительно (естественно, для ИЕ 7-8 актуальна только версия для настольных компьютеров).

Те, кто решит, что им этого мало, смогут перейти в другие разделы данного ресурса и попробовать свои силы в программировании, создав динамические сайты на основе сверстанных в данном разделе макетов.

Конечно, не следует ожидать, что прочитав весь цикл статей раздела вы станете проффессионалом. Для этого понадобится приложить массу сил и желания, но разбираться в дальнейшем с процессом верстки, думаю, будет проще.

Для успешного выполнения задач, которые будем рассматривать, понадобятся следующие, установленные на компьютер программы:

• Adoble Photoshop - графический редактор;
• Notepad++ - редактор html кода;
• Браузеры Internet Explrer 7, 8 или 9 версии, Opera, Google Chrome, Safari, Mozilla Firefox, плагин Firebug, установленный в браузер Firefox - потребуются для контроля отображения макетов сайтов.

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

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