Блочная вёрстка PSD шаблона от и до Видео Курс

Так много в последнее время сказано о преимуществах блочной верстки над обычной-табличной. И скорость загрузки страниц увеличивается в 2-3 раза, и код становится более понятным и логичным. Да вообще, что там говорить, уважающий себя HTML-верстальщик обязан верстать div-ами, чтобы на него не показывали пальцем и не смеялись.

Специально для начинающих HTML-верстальщиков я решил подготовить уроки div-верстки в видео-формате.

Шаг за шагом мы будем повышать свой профессионализм:

* Разберемся каким образом должен выглядеть хороший psd-макет сайта, полученный от дизайнера, и как его анализировать.
* Научимся применять, в качестве инструментов для верстки сайта, программы Photoshop и Dreamweaver.
* Изучим основы HTML и CSS.
* Познакомимся с различными плагинами для браузеров, которые облегчат наш нелегкий труд верстальщика сайтов.
Андрей Морковин http://www.sdelaysite.com/

Сегодня я предлагаю вам посмотреть первую часть видеокурса: Что нам прислал дизайнер?
В этом видеоуроке я расскажу о том, какие бывают psd-шаблоны дизайна сайта, как оценить его качество, проанализирую макет и доведу его до ума средствами Photoshop.

В данном видео мы познакомимся с крайне полезным ресурсом, который позволяет создавать HTML и CSS каркас верстки: csstool.ru.

С вводными вещами закончено, в этом видео я перехожу к рассмотрению макета верстки, полученного с сайта csstool.ru.
Подробно рассмотрим HTML-код блочного сайта.

В этом видеоуроке мы познакомимся с полученным, при помощи ресурса csstool.ru, CSS-файлом. Разберем что там к чему, какие свойства за что отвечают. И, за одно, несколько углубимся в синтаксис CSS.

В этом видео я покажу как изменять CSS-шаблон под свои нужды. Изучим еще несколько приемов работы с Photoshop.

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

В седьмом видеоуроке по верстке сайта я показываю каким образом добиться прозрачности фона изображения png-24 в IE6.

В сегодняшнем видео по блочной верстке сайта мы рассмотрим такую важную вещь как абсолютное и относительное позиционирование блоков. Этот момент очень важен для понимания div-верстки сайта.

Сегодня мы правильным образом разместим блок с горизонтальным меню и наполним его ссылками. Интересным способом, при помощи CSS, поставим треугольные метки рядом с каждым из пунктов меню.
И тем самым, наконец-то, завершим верстать хедер (ну практически завершим).

В этом уроке сверстаем вертикальное меню изменяющийся высоты. Я покажу как пользоваться CSS-свойством z-index и различные другие хитрости.

Уважаемый читатель, встречайте новый видеоурок по блочной div-верстке сайта. В нем я поставлю стакан с молоком под вертикальное меню совершенно другим способом, нежели я собрался сделать это ранее. Поэтому придется немного скорректировать верстку и отказаться от использования z-index.
Но это не беда, теперь о z-index вы знаете практически все.
Заодно еще раз попрактикуемся в объединении и вырезании изображений из слоев в Photoshop.

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

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

Я расскажу вам, как сверстать футер, дам несколько наглядных советов по работе с Photoshop. Давайте добьем эту верстку!