При регистрации по этой ссылке всем
автоматически предоставляется скидка!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник
Mega
Web
.su
, пожалуйста, а ещё лучше - поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Блочная вёрстка PSD шаблона от и до Видео Курс
16-02-2011, 19:42
Курс видеоуроков по блочной вёрстке PSD шаблона
Лучший бесплатный видеокурс по блочной вёрстке PSD шаблона от Андрея Морковина
От Автора:
Так много в последнее время сказано о преимуществах блочной верстки над обычной-табличной. И скорость загрузки страниц увеличивается в 2-3 раза, и код становится более понятным и логичным. Да вообще, что там говорить, уважающий себя HTML-верстальщик обязан верстать div-ами, чтобы на него не показывали пальцем и не смеялись.
Специально для начинающих HTML-верстальщиков я решил подготовить уроки div-верстки в видео-формате.
Шаг за шагом мы будем повышать свой профессионализм:
* Разберемся каким образом должен выглядеть хороший psd-макет сайта, полученный от дизайнера, и как его анализировать.
* Научимся применять, в качестве инструментов для верстки сайта, программы Photoshop и Dreamweaver.
* Изучим основы HTML и CSS.
* Познакомимся с различными плагинами для браузеров, которые облегчат наш нелегкий труд верстальщика сайтов.
Андрей Морковин http://www.sdelaysite.com/
Специально для начинающих HTML-верстальщиков я решил подготовить уроки div-верстки в видео-формате.
Шаг за шагом мы будем повышать свой профессионализм:
* Разберемся каким образом должен выглядеть хороший psd-макет сайта, полученный от дизайнера, и как его анализировать.
* Научимся применять, в качестве инструментов для верстки сайта, программы Photoshop и Dreamweaver.
* Изучим основы HTML и CSS.
* Познакомимся с различными плагинами для браузеров, которые облегчат наш нелегкий труд верстальщика сайтов.
Андрей Морковин http://www.sdelaysite.com/
Скачать psd-макет дизайна сайта и готовую верстку.
Урок 1
Сегодня я предлагаю вам посмотреть первую часть видеокурса: Что нам прислал дизайнер?
В этом видеоуроке я расскажу о том, какие бывают psd-шаблоны дизайна сайта, как оценить его качество, проанализирую макет и доведу его до ума средствами Photoshop.
В этом видеоуроке я расскажу о том, какие бывают psd-шаблоны дизайна сайта, как оценить его качество, проанализирую макет и доведу его до ума средствами Photoshop.
Урок 2
В данном видео мы познакомимся с крайне полезным ресурсом, который позволяет создавать HTML и CSS каркас верстки: csstool.ru.
Урок 3
С вводными вещами закончено, в этом видео я перехожу к рассмотрению макета верстки, полученного с сайта csstool.ru.
Подробно рассмотрим HTML-код блочного сайта.
Подробно рассмотрим 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.
Но это не беда, теперь о z-index вы знаете практически все.
Заодно еще раз попрактикуемся в объединении и вырезании изображений из слоев в Photoshop.
Урок 12
В двенадцатом уроке я покажу вам, уважаемый читатель, каким образом сверстать ту самую градиентную тень, которая торчит слева и справа от сайта.
На примере вы освоите принципы установки фонового изображения, свойства его повторяемости и позиционирования.
Кроме того, дополнительная практика с программой Photoshop (я покажу как найти нужный слой в палитре слоев, правильно вырезать и сохранить требуемый фрагмент) позволит развить навыки работы с этой мощной и необходимой в нелегком труде верстальщика программой.
На примере вы освоите принципы установки фонового изображения, свойства его повторяемости и позиционирования.
Кроме того, дополнительная практика с программой Photoshop (я покажу как найти нужный слой в палитре слоев, правильно вырезать и сохранить требуемый фрагмент) позволит развить навыки работы с этой мощной и необходимой в нелегком труде верстальщика программой.
Урок 13
Как не странно, 30 минут видео пришлось потратить на казалось бы такую простую операцию, как формирование блока основного содержимого сайта. Недостаточное внимание к механизмам наполнения контентом, я имею ввиду визуальный редактор, на заре моей деятельности по разработке сайтов приводило к возникновению множества проблем.
Урок 14
Я расскажу вам, как сверстать футер, дам несколько наглядных советов по работе с Photoshop. Давайте добьем эту верстку!
Просмотров: 15874 Комментариев: 0
Понравилась новость? Сохрани в закладках!
Другие новости по теме:
- Верстка сайта Основы блочной вёрстки
- Мини Курс Основы HTML Часть 2
- Мини Курс Основы CSS Часть 1
- Блочные HTML CSS шаблоны макеты каркасы
- Мини Курс Основы CSS Часть 2
- XHTML основы Основное различие между HTML и XHTML
- FastStone Capture 6.7 Rus + FastStone Capture 6.7 Portable Rus
- Мини Курс Основы HTML Часть 1
- Правильный Robots.txt для DLE
- Градиент для сайта в фотошопе урок
Информация
