2-я часть курса "Создаем сайт с нуля (Фотошоп+верстка)"

Сегодня мы продолжим нашу работу и перейдем от нарисованного в первом цикле видеоуроков макета к реально работающему сайту, который сверстан с помощью HTML, CSS и jQuery.

 

Кликните по ссылке или по картинке выше, чтобы посмотреть рабочую версию сайта

Вторая часть курса оказалась значительно больше первой, поэтому я решил разбить её на 3 блока, чтобы её легче было качать.

 

Первый блок.

В этом архиве Вы найдете уроки с 1-го по 9-й.

Урок 1. Подготовка к работе.

Урок 2. Разбиваем макет на блоки и кодируем верхнюю панель.

Урок 3. Пишем HTML код шапки сайта.

Урок 4. HTML-код для навигационной панели.

Урок 5. Создаем основу центрального блока.

Урок 6. Пишем HTML-код для блоков "блог" и "твиттер".

Урок 7. Создаем второстепенные таблицы стилей CSS.

Урок 8. Создаем основную таблицу стилей и подключаем к ней второстепенные.

Урок 9. Готовим изображения для кодирования верхней панели.

Скачать (65 Мб) | Резервная ссылка

 

Второй блок.

Уроки с 10-го по 15-й.

Урок 10. Работаем с CSS-кодом верхней панели.

Урок 11. Пишем CSS-код шапки сайта.

Урок 12. Переходим к CSS-правилам для блока с основным контентом.

Урок 13. Создаем основу центрального блока.

Урок 14. С помощью CSS приводим блок слайдшоу и сообщения к нужному виду.

Урок 15. Готовим спрайт для навигационного меню.

Скачать (85 Мб) | Резервная ссылка

 

Третий блок.

Уроки с 16-го по 22-й.

Урок 16. Кодируем навигацию на основе спрайта.

Урок 17. Пишем CSS-код для модуля блога.

Урок 18. Пишем CSS-код для модуля твиттера.

Урок 19. Кодируем футер.

Урок 20. Javascript, jQuery, Cufon.

Урок 21. Включаем слайдшоу с помощью jQuery cycle plugin.

Урок 22. Выравниваем фоновые изображения по центру.

Скачать (69 Мб) | Резервная ссылка

 

Дополнительные материалы (скрипты, изображения, таблицы стилей)

Скачать (2,2 Мб) | Резервная ссылка


5 последних добавленных файлов в рубрике"Видеоуроки"

  • Как заставить человека просмотреть видео на сайте до конца?

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

  • Эффект дразнящего уголка для вашего сайта

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

  • Как добавить комментарии Вконтакте к своему сайту

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

  • Эффективная гостевая книга для joomla-сайта

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

  • Открываем счет в системе PayPal

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

^ Наверх ^