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

Автор: Admin    Категория: Видеоуроки    Теги:  Блочная вёрстка    Дата: 16-02-2011, 19:42
Блочная вёрстка PSD шаблона от и до Видео КурсКурс видеоуроков по блочной вёрстке PSD шаблона


Лучший бесплатный видеокурс по блочной вёрстке PSD шаблона от Андрея Морковина

От Автора:

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

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

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

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


Скачать psd-макет дизайна сайта и готовую верстку.

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



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



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



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



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



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



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



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



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



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



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



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



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



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

Версия для печати
  • 100
     Просмотров: 45 096      Комментариев: 6   

Понравилась новость Блочная вёрстка PSD шаблона от и до Видео Курс на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 6 Автор: Admin 25 января 2016 22:39

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: satopol
Вы бы не могли обновить ссылки на видеоуроки, так как с 4 урока и далее видео не доступно. Ну а также PSD макет не можно скачать с deposit, пишет что такого файла не существует.

Поищите этот материал на сайте автора http://www.sdelaysite.com/


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 5 Автор: satopol 25 января 2016 20:54

 Вот такой я - satopol

satopol
Гости
комментариев
публикаций

Статус:
Цитата: satopol
Здравствуйте. Андрей, Вы бы не могли обновить ссылки на видеоуроки, так как с 4 урока и далее видео не доступно. Ну а также PSD макет не можно скачать с deposit, пишет что такого файла не существует.

Извините, то есть Вячеслав)

  • Нравится
  • 0
    

№ 4 Автор: satopol 25 января 2016 20:41

 Вот такой я - satopol

satopol
Гости
комментариев
публикаций

Статус:
Здравствуйте. Андрей, Вы бы не могли обновить ссылки на видеоуроки, так как с 4 урока и далее видео не доступно. Ну а также PSD макет не можно скачать с deposit, пишет что такого файла не существует.

  • Нравится
  • 0
    

№ 3 Автор: elena-gz 10 сентября 2012 16:01

 Вот такой я - elena-gz

elena-gz
Гости
комментариев
публикаций

Статус:
Спасибо, Вячеслав.

  • Нравится
  • 0
    

№ 2 Автор: Admin 10 сентября 2012 13:39

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
elena-gz, Я Вячеслав, а сайт Андрея Морковина в цитате "От Автора:"
Уроки действительно полезные, пожалуй это самые дельные уроки по вёрстке которые мне попадались.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: elena-gz 10 сентября 2012 11:07

 Вот такой я - elena-gz

elena-gz
Гости
комментариев
публикаций

Статус:
Андрей, очень полезные видео. Хотела отправить тебе материальную благодарность за полученные знания, но нигде не нашла информацию о счетах. Отправь мне, пожалуйста, на e-mail свой какой-нибудь электронный кошелек.

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус