Практика резиновой верстки

Если Вы хотите, чтобы Ваш сайт отображался красиво и элегантно в широкоформатных мониторах и также красиво и аккуратно ужимался в узких, то авторский обучающий видеокурс «Практика резиновой верстки» — для Вас.

Изучив данный видеокурс Вы разберетесь и с базовой табличной версткой, и с блочной разметкой. Вы научитесь использовать профессиональные приемы и методы работы с html и CSS. Уже с помощью этих приемов Вы запросто сверстаете обычный резиновый сайт.

Причем, это будет кроссбраузерная верстка, полностью валидная, с легким кодом. Сайты будут отображаться одинаково красиво в самых различных браузерах самых разных версий. Даже в таком «упертом» браузере, как Internet Explorer.

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

Баннер

Содержание видеокурса «Практика резиновой верстки»:

Раздел 1. Верстка сайта ViaCon

Сайт ViaCon был неслучайно выбран для первого раздела. Это самая первая верстка автора — наглядный образец того, как верстать не надо, как сверстали бы те, у кого совсем мало опыта. В данном разделе вы увидите, как бы он сделал этот сайт спустя 6 лет опыта разработки.

  • Как максимально эффективно исследовать PSD макет сайта
  • Как определить подходящую разметку страницы
  • Как заставить изображения фиксированной ширины работать на резиновую верстку
  • Как выбрать оптимальную разметку для шапки сайта
  • Как работает позиционирование
  • Как эффективно использовать позиционирование для резиновых сайтов
  • Узнаете тонкости поведения плавающих блоков и свойства float
  • Как использовать свойство float для резиновых сайтов
  • Как определить и вырезать необходимые фоновые изображения
  • Как фоновые изображения позиционируются
  • Какие возникают трудности с фоновыми изображениями при резиновой верстке и как их решить
  • Как наполнить, назначить и описать необходимые стили для колонки контента
  • Как описать, казалось бы, табличную структуру блоками
  • Узнаете еще несколько примеров и тонкостей работы с плавающими элементами
  • Как перекрывать и наслаивать элементы друг на друга
  • Как эффективно использовать перекрытия элементов? Возможные проблемы и пути решения
  • Как работает абсолютное позиционирование
  • На примере рассмотрите и поймете, из чего складываются размеры блока
  • Как грамотно позиционировать фон
  • Как выравнивать элементы для резиновой верстки
  • Как эффективно задавать отступы для резиновых сайтов
  • Еще более углубимся в работу с плавающими элементами
  • Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
  • Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете

Раздел 2. Верстка сайта Buket

Более сложный сайт (показана изначальная верстка): использование нестандартного шрифта, достаточно загруженная шапка, галерея-слайдер.

  • Как определить основную разметку страницы
  • Как установить нестандартный шрифт на свой компьютер
  • Как правильно сформировать файлы нестандартного шрифта, чтобы не было проблем с его отображением
  • Как определить блочную разметку для header-а
  • Как ведут себя элементы при абсолютном позиционировании
  • Как кроссбраузерно подключить нестандартный шрифт к сайту
  • Как назначить подключенный шрифт к элементам на странице
  • Узнаете еще несколько тонкостей работы с плавающими элементами
  • Как эффективно позиционировать элементы
  • Как взаимодействуют плавающие, позиционированные и центрированные элементы
  • Какой должна быть разметка для двух колоночного резинового сайта
  • Какие для нее необходимо определить стили
  • Из чего складывается ширина блока
  • Как выбрать и описать разметку для внутренних элементов
  • Как наилучшим образом определить разметку для footer-a
  • Как, не используя лишние теги, описать навигацию
  • Как использовать плавающие элементы для установки элементов footer-а
  • Как установить галерею на сайт и что для этого необходимо
  • Как разобраться со всеми подключаемыми файлами и скриптами
  • Как грамотно организовать структуру галереи и назначить нужные пути к файлам скриптов
  • Как, используя firebug, найти нужные стили и изменить их
  • Как переназначить фоновые изображения
  • Как добавить в галерею свои собственные стили
  • Как предусмотреть все возможные поведения сайта при его наполнении и избежать возможных проблем
  • Как предусмотреть и описать все возможные элементы, которые могут быть на сайте, но которых нет в макете
  • Как сделать колонки с разными фонами, одинаковой высоты

Раздел 3. Верстка сайта Rubl

Сложность возрастает: высоко-нагруженная шапка состоит из трех блоков, каждый из которых имеет несколько элементов.

  • Как максимально эффективно исследовать PSD макет сайта
  • Как определить подходящую разметку страницы
  • Как назначить тянущийся на весь экран фон
  • Как эффективно использовать значения ширины и отступов
  • Как можно нестандартно использовать плавающие элементы
  • Как можно нестандартно использовать позиционирование
  • Как разместить несколько блоков в один ряд
  • Как заставить их сжиматься и растягиваться
  • Как избежать переноса блоков на следующую строку при сжатии
  • Как эффективно использовать псевдо-классы
  • Как пользоваться псевдо-классами
  • Как назначить нестандартную кнопку поиска
  • Как установить нестандартное поле для поиска
  • Как выглядит и описывается блочный, трехколоночный, резиновый каркас для верстки
  • Какие могут трудности с разметкой и как их избежать
  • Как эффективно работать с отступами
  • Как лучше выполнить навигацию каталога
  • Как перенести к себе на сайт имеющееся меню
  • Что нужно предусмотреть при переносе
  • Как изменить разметку меню
  • Как быстро находить и изменять стили, используя firebug
  • Как, используя firebug, найти нужные стили и изменить их
  • Как переназначить фоновые изображения
  • Как добавить в галерею свои собственные стили
  • Какую разметку лучше использовать для отображения каталога
  • Рассмотрим еще несколько приемов работы с позиционированием
  • Как расположить появляющийся элемент
  • Заставим появляться скрытый блок по наведению без использования javaScript
  • Научимся изменять прозрачность картинки по наведению без использования javaScript
  • Как перенести к себе на сайт галерею
  • Что нужно предусмотреть при переносе
  • Как быстро находить и изменять стили, используя firebug
  • Как из галерею фиксированной по ширине сделать резиновую
  • Как сделать блок содержимого корзины выпадающим и что для этого нужно
  • Как лучше спроектировать разметку footer-а
  • Как быстрее всего сделать нижнее меню
  • Узнаете несколько особенностей плавающих блоков

Раздел 4. Верстка сайта SprosiDoktora

SprosiDoktora существует уже год. С момента его запуска был значительно изменен подход к верстке — благодаря новым технологиям CSS 3 данный ресурс улучшился и преобразился. Из этого раздела вы получите краткие, но основные знания по CSS 3 (насколько это нужно для сайта SprosiDoktora). Вы получите рецепт по доведению данных технологий CSS 3 кроссбраузерно. Другими словами, новейшие свойства CSS 3 вы заставите работать в старых неповоротливых браузерах (в частности, ИЕ). Плюс ко всему, получите ценные рекомендации и еще одну резервную технику, как все это сделать красиво в данном макете, но без использования CSS 3.

  • Как максимально эффективно исследовать PSD макет сайта
  • Как определить подходящую разметку страницы, учитывая выбранные технологии
  • Как выбрать эффективную разметку для шапки сайта
  • Как грамотно пользоваться плавающими элементами
  • Как отменить обтекание, чтобы элементы не проваливались
  • Как использовать наслаивание блоков для создания сложных резиновых фонов
  • Как эффективно использовать плавающие блоки и значения отступов в процентах
  • Какие есть сервисы для работы с CSS 3 и как их использовать
  • Как скруглять углы блоков, используя CSS 3
  • Как назначать градиенты, используя CSS 3
  • Как сделать нестандартную разметку для сложного трехколоночного сайта
  • Как скруглить углы и назначить тени для блока, используя CSS 3
  • Как ускорить процесс верстки на CSS 3, используя сервис css3pie
  • Назначим эффективную разметку для левой навигации
  • Как скруглить углы и назначить тени для блока, используя CSS 3
  • Как ускорить процесс верстки на CSS 3, используя сервис css3pie
  • Нестандартный метод задания блока для правой колонки
  • Научитесь эффективно пользоваться плавающими элементами и отступами
  • Как избежать схлопывания границ блока
  • Какая проблема возникает при верстке многоколоночных макетов
  • Как решить возникшую проблему
  • Как заставить работать возникшую проблему на вас
  • Как делать резиновые нестандартные поля формы
  • Как можно делать закругленные углы для элементов
  • Как можно эффективно повторно использовать код
  • Как эффективно использовать Псевдоклассы
  • Как верстать постраничную навигацию для сайта
  • Увидите ощутимую разницу между margin и padding
  • Как назначения нескольких фонов окну браузера не используя CSS 3
  • Как заставить работать свойства CSS 3 кроссбраузерно
  • Преимущества и недостатки кроссбраузерного CSS3
  • Какие есть альтернативы кроссбраузерному CSS 3

Бонусы

  • Уроки по работе в программе Dreamweaver
  • Сборник полезных инструментов веб-разработчика

Практика резиновой верстки
Автор: Андрей Бернацкий

Узнать подробнее...(перейти на сайт автора)

Не работает ссылка? — Напишите нам об этом в комментариях.
Понравился материал? — Кликните по кнопкам ниже и расскажите о нём друзьям!

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