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

Хотите, чтобы ваш сайт
отображался красиво и элегантно

в широкоформатных мониторах и также
красиво и аккуратно ужимался в узких ?

Тогда не медлите !

Практический курс

Качественной

Резиновой Верстки

Без воды. Лишней теории. Потраченого времени. Просто взять и сделать!

Только кроссбраузерная верстка!

С помощью конкретных примеров вы «заново» сверстаете четыре существующих профессиональных сайта!

Здравствуйте! Давайте сразу разберемся, почему вы зашли на эту страницу…

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

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

А может, вы неспешно расширяете свои профессиональные навыки, и резиновая верстка будет одним из многих инструментов в вашем послужном списке.

Или вы новичок и только планируете сделать свой сайт, но совершенно не знаете основных практических принципов верстки.

Дело, казалось бы, за малым: нужно овладеть навыками резиновой верстки. Но как это сделать? На первый взгляд, самый простой способ заключается в поиске и изучении соответствующих материалов и пособий в интернете.

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

Но время идет, а обычные курсы веб-разработки вам ни к чему. Большую часть информации вы уже знаете. Либо она вам попросту не нужна.

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

Взять и сверстать сайт с резиновой разметкой!

Ни больше, ни меньше — вот, что вы хотите
Этот курс станет находкой для вас!

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

верстки сайта

резиновая верстка

Видеокурс, обучающий практическим навыкам КАЧЕСТВЕННОЙ РЕЗИНОВОЙ ВЕРСТКИ

 

Полностью эксклюзивный авторский материал от Андрея Бернацкого, основателя проекта webformyself.com и проф. веб-разработчика

резиновая верстка уроков

более резиновая верстка часов видео с подробными
                инструкциями

Четыре полностью
практических раздела

80% «мяса» и 20% «теста» —
без «капли воды»

2 великолепных бонуса, важных
для верстки любого сайта

резиновая верстка

Кстати, пора и познакомиться

Бернацкий Андрей

Приветствую, друзья! Меня зовут Бернацкий Андрей. Я бы хотел Вам рассказать немного о себе, о том пути, который я прошел, прежде чем стал вебмастером. Возможно, в моей истории вы узнаете себя, а возможно, моя история поможем вам избежать тех ошибок, которые совершил я на своем пути.

Увлекаться сайтостроением я начал более 7-ми лет назад, в далеком 2005 году. Тогда, еще на первых курсах университета, мне понадобилось предоставить информацию сразу нескольким людям, затем периодически ее обновлять и исправлять. Самым удачным решением такой задачи я увидел в создании веб-страницы. Страницу я создал достаточно быстро, но на этом не остановился.

 

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

И знаете, с какой проблемой я столкнулся?

— Времени тратишь много, а эффекта получаешь мало...

А тема-то заинтересовала не на шутку. Тем более что, умея делать сайты, можно и заработать. А имея деньги - можно и студенческую жизнь разнообразить. ))

Решил я тогда пойти на платные оффлайн курсы — там ведь быстрее научат, как нужно сайты делать...!?. Конечно, курсы курсам рознь, но сегодня я с улыбкой вспоминаю тот день, когда я шел домой с сертификатом об успешном окончании курсов и думал: "Ну, теперь я о сайтостроении знаю все! Сейчас работку подыщу и буду «бомбить» сайты".

И что, вы думаете, у меня получилось?

Да ничего у меня не получилось.

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

ошибки верстки

И что получаешь в итоге?

Показываю наработанное портфолио потенциальному работодателю, а он мне выдает монолог, примерно как на картинке слева.

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

Но если долго мучиться — что-нибудь получится!

И я не сдавался. Невысокими темпами продолжал развиваться и набивать свое портфолио сайтами, пока однажды мне не выпал шанс поработать в команде профессионалов. Именно работая с ними, я увидел, понял и на практике осознал все те ошибки, которые совершал.

 

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

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

Суммируя весь свой опыт, я выделил несколько проблем, с которыми может столкнуться абсолютно любой сайтостроитель.

Проблема первая. После обучения на курсах и даже на «отлично» зная теорию, при верстке первого сайта катастрофически не хватает практики и подручного практического материала. Т.е. необходимо знать и видеть, как же на самом деле верстается сайт на практике. Хотя бы аналогичный или очень похожий.

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

Вторая проблема. С точки зрения верстки, как правило, существует несколько типовых сайтов. Знания принципов верстки типовых сайтов в то время сэкономили бы мне кучу времени. А еще лучше, если бы я видел, как эти сайты верстаются. Т.е. имея перед собой пример, было бы на порядок легче верстать сайт заказчика.

Третья проблема. Я как верстальщик знаю, что верстка может быть двух видов: табличная и блочная. Однако, когда я начинал верстать свои первые сайты, не мог понять, где мне лучше применять таблицы, а где блоки. Именно данная проблема есть не что иное, как прямое следствие отсутствия практики.

Четвертая проблема. Кроссбраузерная верстка резинового сайта. Именно с такими словами может выступить сегодня любой заказчики, и именно эти требования вы должны сегодня предъявить к своему сайту.

Кроссбраузерность и «резина». Именно на основе этих 2-х принципов и основывается профессиональная верстка, которая отличает профи от любителя. Именно к этому я стремился. Именно эта проблема и есть тот краеугольный камень, который не дает покоя всем, кто хочет создать свой сайт, кто делает сайт для заказчика и кто хоть как-то связан с созданием сайта.

Что для вас в этом курсе?

В «Практике резиновой верстки» мы с вами будем учиться на реальных кейсах — разберем и заново соберем профессиональные сайты разной сложности.

Мной была выбрана оптимальная структура «от простого — к сложному». Это четыре раздела, каждый из которых иллюстрирует реальную работу над реальным сайтом.

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

Четыре раздела курса — четыре реально существующие сайта, которые и по сей день приносят людям доход:

viacon viacon viacon viacon

 

К чему слова?

 

 
Давайте приоткроем двери курса. Посмотрите вводный урок:

Содержание:

I. Верстка сайта ViaCon

viacon

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

УРОК 1. Введение. Определяем разметку страницы

Описание урока:

В уроке мы познакомимся и исследуем PSD макет сайта. Определимся с разметкой всего сайта. Вырежем и вставим основные фоновые изображения шапки сайта.

Из урока Вы узнаете:

Как максимально эффективно исследовать PSD макет сайта?

Как определить подходящую разметку страницы?

Как заставить изображения фиксированной ширины работать на резиновую верстку?

УРОК 3. Делаем область основного контента, левая колонка

Описание урока:

Определимся с разметкой области основного содержимого страницы. Вырежем необходимые фоновые изображения. Начнем наполнять область контента. Поработаем с тонкостями фоновых изображений при резиновой верстке.

Из урока Вы узнаете:

Как определить и вырезать необходимые фоновые изображения?

Как фоновые изображения позиционируются?

Какие возникают трудности с фоновыми изображениями при резиновой верстке и как их решить?

Как наполнить, назначить и описать необходимые стили для колонки контента?

УРОК 5. Дорабатываем правую колонку, блок контактов

Описание урока:

В уроке мы дорабатываем правую колонку. Определяемся с разметкой и устанавливаем блок с контактной информацией. Работаем с фоновым изображением для этого блока.

Из урока Вы узнаете:

Как работает абсолютное позиционирование?

На примере рассмотрите и поймете, из чего складываются размеры блока?

Как грамотно позиционировать фон?

УРОК 7. Дорабатываем макет с учетом развития сайта

Описание урока:

Не все, что может быть на сайте, учтено и показано в макете. И в этом уроке мы доработаем сайт, постараемся учесть все, что только может на нем быть в процессе наполнения. Так же устраним проблемы, которые могут возникнуть при добавлении контента.

Из урока Вы узнаете:

Как предусмотреть возможные поведения сайта при его наполнении и избежать возможных проблем?

Как предусмотреть и описать различные элементы, которые могут быть на сайте, но которых нет в макете?

viacon

Итоговое время раздела:
viacon

УРОК 2. Делаем header сайта

Описание урока:

Детально определяем разметку шапки сайта. Вырежем из макета необходимые изображения. Создадим HTML разметку для шапки сайта, опишем для нее все стили CSS. Полностью завершим создание header-а.

Из урока Вы узнаете:

Как выбрать оптимальную разметку для шапки сайта?

Как работает позиционирование?

Как эффективно использовать позиционирование для резиновых сайтов?

Узнаете тонкости поведения плавающих блоков и свойства float.

Как использовать свойство float для резиновых сайтов?

УРОК 4. Делаем область основного контента, правая колонка

Описание урока:

В этом уроке мы будем работать с правой колонкой области контента. Детально определим разметку ее внутренних элементов. Создадим разметку HTML, назначим и опишем все необходимые стили.

Из урока Вы узнаете:

Как описать, казалось бы, табличную структуру блоками?

Узнаете еще несколько примеров и тонкостей работы с плавающими элементами.

Как перекрывать и наслаивать элементы друг на друга?

Как эффективно использовать перекрытия элементов? Возможные проблемы и пути решения.

УРОК 6. Работаем над footer-ом сайта

Описание урока:

В этом уроке мы завершим работу над макетом. Определимся с разметкой и установим подвал сайта.

Из урока Вы узнаете:

Как выравнивать элементы для резиновой верстки?

Как эффективно задавать отступы для резиновых сайтов?

Еще более углубимся в работу с плавающими элементами.

II. Верстка сайта Buket

viacon

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

УРОК 1. Введение. Определяем разметку страницы

Описание урока:

В первом уроке мы проанализируем макет и определимся с основной разметкой страницы. Установим нестандартный шрифт на свой компьютер. Создадим все необходимые для кроссбраузерной верстки файлы нестандартного шрифта.

Из урока Вы узнаете:

Как определить основную разметку страницы?

Как установить нестандартный шрифт на свой компьютер?

Как правильно сформировать файлы нестандартного шрифта, чтобы не было проблем с его отображением?

УРОК 3. Дорабатываем header сайта

Описание урока:

В этом уроке мы закончим работу над header-ом. Детально рассмотрим в совокупности работу плавающих, позиционированных и центрированных элементов. Разберемся с порядком следования элементов и их перекрытием.

Из урока Вы узнаете:

Узнаете еще несколько тонкостей работы с плавающими элементами.

Как эффективно позиционировать элементы?

Как взаимодействуют плавающие, позиционированные и центрированные элементы?

УРОК 5. Работаем над footer-ом сайта

Описание урока:

В уроке мы определим разметку для footer-а сайта. Разместим логотип, нижнюю навигацию.

Из урока Вы узнаете:

Как наилучшим образом определить разметку для footer-a?

Как, не используя лишние теги, описать навигацию?

Как использовать плавающие элементы для установки элементов footer-а?

УРОК 7. Дорабатываем галерею

Описание урока:

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

Из урока Вы узнаете:

Как, используя firebug, найти нужные стили и изменить их?

Как переназначить фоновые изображения?

Как добавить в галерею свои собственные стили?

viacon

Итоговое время раздела:
viacon

УРОК 2. Делаем header сайта

Описание урока:

В данном уроке мы начнем создавать header сайта. Определимся детально с разметкой «хедера». Установим логотип, меню и иконки. Подключим к странице нестандартный шрифт и назначим его для пунктов нашего меню.

Из урока Вы узнаете:

Как определить блочную разметку для header-а?

Как ведут себя элементы при абсолютном позиционировании?

Как кроссбраузерно подключить нестандартный шрифт к сайту?

Как назначить подключенный шрифт к элементам на странице?

УРОК 4. Делаем область основного контента

Описание урока:

В данном уроке мы полностью сделаем область основного контента сайта. Определимся и опишем блочную разметку двухколоночного резинового сайта. Разместим и опишем стили для всех внутренних элементов контента.

Из урока Вы узнаете:

Какой должна быть разметка для двух колоночного резинового сайта?

Какие для нее необходимо определить стили?

Из чего складывается ширина блока?

Как выбрать и описать разметку для внутренних элементов?

УРОК 6. Работаем над footer-ом сайта

Описание урока:

В этом уроке мы начнем устанавливать галерею на сайт. Исследуем существующую галерею и полностью установим ее к себе на сайт в первоначальном виде.

Из урока Вы узнаете:

Как установить галерею на сайт и что для этого необходимо?

Как разобраться со всеми подключаемыми файлами и скриптами?

Как грамотно организовать структуру галереи и назначить нужные пути к файлам скриптов?

УРОК 8. Дорабатываем макет с учетом развития сайта

Описание урока:

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

Из урока Вы узнаете:

Как предусмотреть возможные поведения сайта при его наполнении и избежать возможных проблем?

Как предусмотреть и описать различные элементы, которые могут быть на сайте, но которых нет в макете?

Как сделать колонки с разными фонами, одинаковой высоты?

III. Верстка сайта Rubl

viacon

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

УРОК 1. Введение. Определяем особенности разметки

Описание урока:

В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Определимся с разметкой всего сайта.

Из урока Вы узнаете:

Как максимально эффективно исследовать PSD макет сайта?

Как определить подходящую разметку страницы?

УРОК 3. Дорабатываем header сайта

Описание урока:

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

Из урока Вы узнаете:

Как разместить несколько блоков в один ряд?

Как заставить их сжиматься и растягиваться?

Как избежать переноса блоков на следующую строку при сжатии?

Как эффективно использовать псевдо-классы?

УРОК 5. Работаем над footer-ом сайта

Описание урока:

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

Из урока Вы узнаете:

Как выглядит и описывается блочный, трехколоночный, резиновый каркас для верстки?

Какие могут трудности с разметкой и как их избежать?

Как эффективно работать с отступами?

Как лучше выполнить навигацию каталога?

УРОК 7. Дорабатываем галерею

Описание урока:

В данном уроке мы будем наполнять правую колонку фиксированной ширины. Установим блок баннеров. Также сверстаем блоки с рекламными акциями.

Из урока Вы узнаете:

Как, используя firebug, найти нужные стили и изменить их?

Как переназначить фоновые изображения?

Как добавить в галерею свои собственные стили?

УРОК 9. Дорабатываем центральную область контента

Описание урока:

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

Из урока Вы узнаете:

Как перенести к себе на сайт галерею?

Что нужно предусмотреть при переносе?

Как быстро находить и изменять стили, используя firebug?

Как из галерею фиксированной по ширине сделать резиновую?

Как сделать блок содержимого корзины выпадающим и что для этого нужно?

viacon

Итоговое время раздела:
viacon

УРОК 2. Делаем header сайта

Описание урока:

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

Из урока Вы узнаете:

Как назначить тянущийся на весь экран фон?

Как эффективно использовать значения ширины и отступов?

Как можно нестандартно использовать плавающие элементы?

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

УРОК 4. Делаем область основного контента

Описание урока:

Уроком мы будем завершать работу над шапкой сайта. Установим нижнюю часть header-а, меню и форму поиска.

Из урока Вы узнаете:

Как пользоваться псевдо-классами?

Как назначить нестандартную кнопку поиска?

Как установить нестандартное поле для поиска?

УРОК 6. Работаем над footer-ом сайта

Описание урока:

В уроке мы продолжим работу над навигацией каталога. Из дополнительных материалов к уроку перенесем и установим выпадающее меню на jQuery. Доработаем дизайн меню так, как оно должно выглядеть на сайте.

Из урока Вы узнаете:

Как перенести к себе на сайт имеющееся меню?

Что нужно предусмотреть при переносе?

Как изменить разметку меню?

Как быстро находить и изменять стили, используя firebug?

УРОК 8. Дорабатываем макет с учетом развития сайта

Описание урока:

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

Из урока Вы узнаете:

Какую разметку лучше использовать для отображения каталога?;

Рассмотрим еще несколько приемов работы с позиционированием.

Как расположить появляющийся элемент?

Заставим появляться скрытый блок по наведению без использования javaScript.

Научимся изменять прозрачность картинки по наведению без использования javaScript.

УРОК 10. Работаем над footer-ом сайта. Заключение

Описание урока:

Этим уроком мы завершим верстку главной страницы сайта. Определимся с разметкой и установим footer сайта. Так же сверстаем нижнее навигационное меню. Определим задачи на дальнейшее развитие.

Из урока Вы узнаете:

Как лучше спроектировать разметку footer-а?

Как быстрее всего сделать нижнее меню?

Узнаете несколько особенностей плавающих блоков.

IV. Верстка сайта SprosiDoktora

viacon

SprosiDoktora существует уже год. С момента его запуска был значительно изменен подход к верстке — благодаря новым технологиям CSS 3 данный ресурс улучшился и преобразился.

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

УРОК 1. Введение. Определяем особенности разметки

Описание урока:

В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Поговорим о технологиях, которые мы будем использовать при верстке сайта.

Из урока Вы узнаете:

Как максимально эффективно исследовать PSD макет сайта?

Как определить подходящую разметку страницы, учитывая выбранные технологии?

УРОК 3. Дорабатываем header сайта

Описание урока:

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

Из урока Вы узнаете:

Как использовать наслаивание блоков для создания сложных резиновых фонов?

Как эффективно использовать плавающие блоки и значения отступов в процентах?

Какие есть сервисы для работы с CSS 3 и как их использовать?

Как скруглять углы блоков, используя CSS 3?

Как назначать градиенты, используя CSS 3?

УРОК 5. Работаем над footer-ом сайта

Описание урока:

В уроке мы определим и создадим нестандартную разметку трехколоночного сайта. Назначим фоновые цвета, скруглим углы для блоков, добавим тени для блоков, используя новые свойства CSS 3. Для ускорения и небольшой автоматизации процесса воспользуемся сервисом css3pie.

Из урока Вы узнаете:

Назначим эффективную разметку для левой навигации.

Как скруглить углы и назначить тени для блока, используя CSS 3?

Как ускорить процесс верстки на CSS 3, используя сервис css3pie?

УРОК 7. Дорабатываем галерею

Описание урока:

В уроке мы начинаем верстать центральную колонку сайта. Рассмотрим проблему, которая возникает при отмене обтекания в верстке многоколоночных сайтов блоками, и научимся исправлять ее. Далее мы заставим появиться данную проблему и используем ее своих интересах.

Из урока Вы узнаете:

Какая проблема возникает при верстке многоколоночных макетов?

Как решить возникшую проблему?

Как заставить работать возникшую проблему на вас?

Как делать резиновые нестандартные поля формы?

УРОК 9. Дорабатываем центральную область контента

Описание урока:

В уроке мы завершим работу над макетом. Сделаем постраничную навигацию. Установим и стилизуем "подвал" сайта. Узнаем очень интересный и редкий прием назначения нескольких фонов окну браузера.

Из урока Вы узнаете:

Как верстать постраничную навигацию для сайта?

Увидите ощутимую разницу между margin и padding.

Как назначения нескольких фонов окну браузера не используя CSS 3

viacon

Итоговое время раздела:
viacon

УРОК 2. Делаем header сайта

Описание урока:

В уроке мы исследуем PSD макет сайта. Выявим все особенности и сложности данного макета. Поговорим о технологиях, которые мы будем использовать при верстке сайта.

Из урока Вы узнаете:

Как выбрать эффективную разметку для шапки сайта?

Как грамотно пользоваться плавающими элементами?

Как отменить обтекание, чтобы элементы не проваливались

УРОК 4. Делаем область основного контента

Описание урока:

В уроке мы закончим верстать шапку сайта. Установим основное меню сайта. Познакомимся с методом наслоения блоков, для назначения сложных тянущихся фонов. Рассмотрим метод задания закругленных углов и градиентов с помощью CSS 3.

Из урока Вы узнаете:

Как сделать нестандартную разметку для сложного трехколоночного сайта?

Как скруглить углы и назначить тени для блока, используя CSS 3?

Как ускорить процесс верстки на CSS 3, используя сервис css3pie?

УРОК 6. Работаем над footer-ом сайта

Описание урока:

В уроке мы создадим правую колонку для сайта. Оформим стилями рейтинг специалистов, используя CSS 3. Рассмотрим еще один способ, как избежать схлопывания границ блока.

Из урока Вы узнаете:

Нестандартный метод задания блока для правой колонки.

Научитесь эффективно пользоваться плавающими элементами и отступами.

Как избежать схлопывания границ блока?

УРОК 8. Дорабатываем макет с учетом развития сайта

Описание урока:

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

Из урока Вы узнаете:

Как можно делать закругленные углы для элементов?

Как можно эффективно повторно использовать код?

Как эффективно использовать Псевдоклассы?

УРОК 10. Работаем над footer-ом сайта. Заключение

Описание урока:

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

Из урока Вы узнаете:

Как заставить работать свойства CSS 3 кроссбраузерно?

Преимущества и недостатки кроссбраузерного CSS3.

Какие есть альтернативы кроссбраузерному CSS 3?

Обратите внимание! В качестве пробного задания вам будет предложено сверстать одну из внутренних страниц каждого из рассматриваемых сайтов. После чего вы сможете сравнить собственные решения с использованными на сайте.

резиновая верстка
Отзыв от Дмитрия Науменко

Cайт Дмитрия Науменко: http://www.codeharmony.ru/

 

Отзывы

Незаменимое интерактивное учебное пособие для верстальщиков собственных и заказных интернет-проектов!


На мой взгляд, видеокурс Андрея Бернацкого «Практика резиновой верстки» –это неотъемлемая часть проекта WebForMySelf, одним из участников которого Андрей является. Курс и проект взаимно дополняют друг друга, становясь в совокупности незаменимым интерактивным учебным пособием для верстальщиков собственных и заказных интернет-проектов. Если изложенный в курсе материал покажется начинающим слишком трудным, они всегда смогут восполнить недостающие знания на страницах проекта, более опытные наверняка будут использовать курс в качестве незаменимого «настольного» справочника. И те, и другие получают доступ к новым технологиям верстки, таким как, например, CSS3, материалы о которых регулярно появляются на страницах WebForMySelf, а начальные сведения и примеры практического использования – уже присутствуют в «Практике». Нельзя не упомянуть и о серии бесплатных уроков «Пять техник резиновой верстки», предшествующих курсу. Это – не маркетинговый шаг по «разогреву» аудитории. Бесплатные и необременительные по временным затратам на их изучение, уроки полезны сами по себе и в то же время необходимы для более полного освоения материалов курса.

С официальной частью заканчиваю и перехожу к сугубо личным впечатлениям. Сразу оговорюсь: я – начинающий верстальщик, и всё, что написано ниже, – это взгляд с моей невысокой «колокольни».

Прежде всего, меня подкупил стиль изложения. Андрей, не слишком заботится об академической «правильности» подачи материала. Иногда создается впечатление, что при записи уроков он забывает о том, что работает рекордер. И это создает атмосферу причастности зрителя к происходящему на экране. Он становится свидетелем ошибок верстальщика и наблюдает в реальном времени процесс поиска их причин. Это очень ценные «кадры» и их трудно с режиссировать. Казалось бы, перед камерой можно «замять» ту ли иную нестыковку, да и просто вырезать её при монтаже, но Андрей этого не делает. Мне запомнился эпизод во второй главе курса в конце раздела 2.5, где Андрей долго сражается с Opera-ой(заметьте - не с IEшестой версии), пытаясь заставить этот, в общем-то, «правильный» браузер адекватно отображать меню в каком-то там «подвале», куда и не смотрит никто, кроме заказчиков проекта. Произвела впечатление и перекройка уже полностью готовой «несущей» таблицы в первой главе в разделе 1.7 «Дорабатываем макет…».

И тут самое время отметить другую важную черту в подаче материала. На протяжении всего курса Андрей выступает в роли именно верстальщика, а не «пекаря-аптекаря». Т.е. это качественная имитация работы верстальщика в коллективе разработчиков, где присутствуют и дизайнеры, и программеры и администраторы и оптимизаторы и т.д. и т.п. Эта деталь очень важна для тех, кто помимо работы над собственными проектами, планирует освоить профессию сугубо верстальщика больших проектов. Вам «спускается сверху» макет страницы, и ваше дело не обсуждать его достоинства и недостатки, и не подгонять его под свои возможности, а с максимальной достоверностью перевести с языка фотошоповских слоев на язык гипертекстовой разметки. В курсе демонстрируется самый тщательный подход к анализу макета вплоть до мельчайших подробностей фоновых заливок и цвета шрифтов (на мой взгляд – все они черные ).

И еще по поводу подачи материала. (Это – лирическое отступление – его можно не читать ). В принципе, метод, который использует Андрей в своем курсе, далеко не нов и заключается в постепенном переходе от простого к сложному при многократном повторении похожих по сути приемов и техник. Что-то подобное, но в более гипертрофированном варианте, я встречал в книге известного фотографа Скотта Келби «Система Великолепная семерка». Прочитав эту книгу всего лишь раз, я, обладатель плохой памяти, все же сумел усвоить основные приемы по обработке безнадежных снимков в Photoshop. Я это к тому, что выбранная Андреем методика эффективна, и когда он будет в сотый раз позиционировать с помощью margin-ов какой-нибудь непослушный div, не плюйтесь, а вспомните мои слова.

Если уж я упомянул про Photoshop, то не могу не признаться: я впервые увидел, как можно быстро, буквально в несколько кликов, определить и скопировать в css-правило размер, цвет и название шрифта из psd-макета. Век живи - век учись!

Даже при первом, беглом знакомстве с курсом я сделал много открытий: использование свойства line-height для управления межстрочными отступами, использование свойства overflow:hidden для родительского раздела с дочерьми плавающего поведения, вытягивание в одну линию расположенных друг под другом абзацев, ссылок и элементов списка с помощью свойства float:left, не говоря уже о фантастических возможностях CSS3…

Здесь нужно бы остановиться, spientisat. Но не могу …

Меня, например, всегда волновало ограничение на использование в веб-верстке оригинальных шрифтов. (Не то, чтобы я ночей из-за этого не спал или недоедал там хронически, а просто – волновало и все тут!) А ведь такие гуру, как, например, Джеймс Феличи и более близкий нам Боб Поташник, в один голос твердят об огромной роли типографики в грамотном дизайне. Им, впрочем, легко говорить, AdobeIllustrator и InDesign – это вам не DreamWeaver, там есть, где разгуляться. Но… оказалось, что и втиснутый в жесткие рамки выбора между Verdana и Arial сайтостроитель может расслабиться: надо только правильно подключить к проектунужный шрифт. Андрей подробно рассказывает об этом во второй главе своего курса на примере верстки сайта BUKET.

Следующий момент, на который хочется обратить внимание, это организация рабочего пространства. В творческом кабинете Андрея аскетическая обстановка, зато всё на своих местах – и необходимые инструменты, и рабочая документация. Инструменты – четыре постоянно включенных браузера, в которых во имя «кроссбраузерности» тут же проверяются «свежеиспеченные» фрагменты верстаемой страницы, вечный TotalCommanderи сладкая парочка от адоби – Photoshop и Dreamweaver (пароход и человек, я хотел сказать - ftp-клиент и кодовый редактор в одном лице). Мелькает иногда блокнотик текстовой редактор AkelPad. Отрадно, что Андрей, с одной стороны, не ограничивает себя бесплатными программами (да и как обойтись без Ps?), с другой – использует тот же Dreamweaverв «щадящем» режиме так, что и не сразу отличишь его от Notepad++. Особого внимания заслуживает использование в процессе отладки встроенных в современные браузеры интерактивных панелей разработчика. Они просто незаменимы при подборе полей и отступов, когда счет идет на единичные пиксели, хотя позволяюти радикально менять всю верстку по принципу «а что будет если…?». При этом конечно «ни одно животное ни пострадало» - т.е. сами исходные css-файлы остаются неизменными. Для многих начинающих верстальщиков это будет настоящим откровением.

Кстати, курс снабжен бонусными материалами вполне достойного качества и содержания по работе с Dreamweaver и инструментами разработчика (Firebag – панели веб-разработчика браузера Firefox, WebDeveloper, cssApdater, yslow, cssUsage)

По поводу документов. Перед началом работы Андрей уделяет особое внимание файловой структуре будущего проекта, объясняя, какие папки необходимо создать и какие файлы в них размещать, чтобы в процессе работы всё было под рукой и на строго определенном месте. Многим «творческим» личностям, нацеленным на создание разветвленных проектов, но у которых все вечно теряется и путается, этот «холодный душ» от педантичного Андрея будет очень полезен для душевного здоровья.

О содержании курса я не буду много говорить, т.к. вступление к нему, посвященноеименно этому вопросу и тому, как и в каком порядке все изучать, находится в свободном доступе вместе с другими похожими материалами. Темне мене бегло пробегусь по всем главам. В первой главе описана табличная верстка несложного сайта VIACON. Заслуживает внимания использование повторяющейся картинки для фона резинового заголовка и позиционирование опять же фоновой картинки в нижней правой ячейке таблицы с основным контентом. Во второй главе верстается тоже несложный сайт BUKET, но уже используется блочная верстка. «В нагрузку» идет установка слайдера и, следовательно, пристыковка к сайту библиотеки jQuery. В третьей главе сайт RUBL– уже трехколоночный и содержит галерею, слайдер, выпадающую корзину и выпадающее многоуровневое меню. А отличительная черта верстки четвертого сайта SPROSIDOKTORA – использование элементов CSS3 для формирования градиентных заливок и закругленных уголков разделов. Все четыре сайта сверстаны в «резиновом» варианте, а я бы сказал «разумно-резиновом» или «smart-rubber» стиле, когда для окна проекта задаются минимальное и максимальное значения ширины. Т.е. если сайт не вмещается в узкое окно браузера, внизу появляется полоса горизонтальной прокрутки, а на большом экране сайт не «расползается» шире определенной величины. Вполне разумный компромисс.

В заключительной шестой главе Андрей возвращается к проекту WebForMySelf и бегло перечисляет уроки по верстке, PHP, JavaScriptи Веб-дизайну и т.д. и т.п., которые дополняют материалы его курса и не оставляют у нас с вами никакой надежды посидеть когда-нибудь спокойно возле монитора, любуясь окончательным вариантом вашего творения.

Да и надо глядеть правде в глаза, ведь индексная страница сайта, даже идеально сверстанная, всего лишь верхушка айсберга, и под красивой обложкой,под каждой её кнопкой, ссылкой и картинкой, должныпоселитьсяне только красочные, но и содержательные главы будущего проекта.

С уважением, Виталий Ивашкин.

Супер цена за полученные знания и четко распланированное пошаговое обучение.


Добрый день, Андрей!

Очень понравился ваш курс по резиновой верстке.

Я ни на секунду не пожалел потраченного на занятия времени и, тем более, денег.

Я давно подписан на Вашу рассылку - всегда очень живые и интересные темы вы подбираете.

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

А я, как начинающий верстальщик, любую информацию всегда стараюсь ухватить и запомнить.

Первая необходимость в сайте возникла у меня лет пять назад, чтобы развивать свой бизнес.

Я тогда решил самостоятельно во всем разобраться и не искать кого-то, кто бы мне сверстал сайт.

Мне же с этим сайтом жить и работать ))

Фотошопом я владею на приличном уровне, оставалось только с версткой разобраться.

С фиксированными сайтами всё доступно оказалось, а вот резиновые оказались сложными для понимания.

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

А сейчас стал замечать - мониторы уже у большинства 21 дюйм и выше. Разрешение 800x600 уже ушло в прошлое. И старые сайты фиксированной ширины, которые разрабатывались ещё под 800x600, смотрятся не самым привлекательным образом, мягко говоря. Огромные пустые пространства появляются на мониторе, а ведь их могли заполнять партнерские баннеры, реклама или товары, которые я продаю.

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

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

Чем понравился ваш курс ?

Очень доступное и подробное объяснение. Любой может запросто освоить верстку сайтов — тут главное желание этим заниматься.

Всё разбирается на конкретных примерах и построено «от простого к сложному».

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

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

Да и в чем ещё плюс — вы уже знаете, на какие моменты нужно обратить внимание слушателя. Ваши видео-уроки значительно ускоряют процесс обучения.

Станислав Миляков,г. Ростов-на-Дону.

msv1108@gmail.com

Я понял свои ошибки!


Версткой сайтов я занимаюсь примерно три года и всегда считал, что я умею это делать хорошо, да и клиенты всегда довольны. Когда я получил информацию окурсе «Практика резиновой верстки»,я долго сомневался «А НУЖЕН ЛИ МНЕ ЭТОТ КУРС?».Переборол себя, купил, оказалось что «ДА!».

Курс разбит на четыре части «от легкого к сложному» и это делает его почти универсальным как для новичков, так и для «бывалых». Другими словами весь курс состоит из верстки четырех шаблонов разной сложности, то есть показано на примерах «как верстать». Честно говоря,посмотрев первых два этапа, я немножко пожалел, что купил данный курс, так как я все это и так знал. Но, начиная с третьего этапа,я понял,что нашел для себя «золотую жилу!». Нет, я не узнал какие-то новые команды или теги, я обнаружил, что многие вещи, которые я делал досих пор, я делал очень сложно и неправильно.

Оказывается можно сделать все намного легче и быстрее!!! А ведь от величины кода, да и от правильности написания зависитскорость загрузки сайта!!!! А это сегодня не маловажный фактор!!

И самое главное(для меня) –Я СИЛЬНО СОКРАТИЛ ВРЕМЯ НАПИСАНИЯ КОДА (ВЕРСТКИ САЙТА!). Этот факт очень важен!

А еще парадокс состоит в том, что благодаря некоторым приемам из этого курса, я продвинулся в создании так называемой «адаптивной» верстки. Кто не знает – это верстка для мобильных устройств. Нет, там нет ничего об этом, но некоторые приемы сильно облегчают написание такого кода.

Азизов Максим

E-mail: maksimasz@yahoo.com

Резиновый дизайн - это сейчас очень актуально!


Курс "Практика резиновой верстки" вышел вовремя. Сейчас как никогда важно владеть данной темой, поскольку перечень устройств, с которых люди заходят в интернет, всё возрастает и возрастает. Если раньше большинство заходило с домашнего компьютера, то сейчас большинство заходит с планшетов и смартфонов. И эта тенденция будет увеличиваться. Поэтому очень важно чтобы сайт умел подстраиваться под любое устройство, независимо от разрешения его экрана.

Изучать данный курс интересно. Но ещё более интересно, если не просто изучаешь, а сам это всё делаешь на практике. Нужно самому всё проделать своими руками, только тогда приходят нужные навыки. Одной теории недостаточно. Курс «Практика резиновой верстки» - это практика и немного теории, а в результате появляется очень хороший навык хорошего сайтостроения.

Я являюсь создателем и администратором нескольких интернет-магазинов. Первоначально они были созданы в статическом виде. Уже после прохождения половины курса «Практика резиновой верстки» я их с легкостью перевёл в резиновый вид.

Очень ценно для меня в этом курсе ещё и обучение подключения к сайтам всех новых веб-технологий, а именно jQuery, CSS3, верстка на дивах и т. д.

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

Андрей Лобанов

E-mail: and.l@mail.ru

Курс был для меня поворотной точкой!


Курс был для меня поворотной точкой, в процессе его прохождения я сделала сайт для индивидуального бизнеса от начала и до конца и выставила его в интернете. До этого были курсы, где все рассматривалась верстка в общем и целом. Но когда я бралась за реальные макеты, то процесс прописывания стилей превращался просто в пытку на месяц. А тут я реально поняла, что могу работать с этим. Когда проходишь этот курс, то нет желания отложить его на месяцок-другой, а хочется продолжать и продолжать. Поскольку все как в реальных хороших сайтах, и я понимаю, что закончу - и смогу делать на этом уровне. И мне не придется мучительно додумывать, как же эта рожа или квадратик или еще какая-нибудь примитивная вещь могли бы быть представлены в реальном сайте и так далее. Большое спасибо! Вот мой первый сайт http://witteelektro.com

Плюсы курса: Взяты совершенно реальные задачи, основу этих макетов можно использовать для реальных сайтов. Постепенное и подробное изложение материала. Домашние задания.

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

Климова Алла Викторовна

Отзывы о нашем бесплатном мини-курсе
«5 техник резиновой верстки»

Больше отзывов о наших бесплатных курсах, Вы можете прочитать на нашем форуме.

резиновая верстка

К безусловным преимуществам курса относятся:

Ознакомление со всеми возможными вариантами верстки (табличная и блочная верстка, разное количество колонок и место положения сайдбара и т.д.).

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

Конкретная информация из первых рук. В курсе нет ничего лишнего, нет общих мест. Рассказываю лишь о конкретных вещах, раскрывая собственные наработки.

 

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

Сам курс — очень простой и понятный. Вы увидите процесс «резиновой» верстки на реальных примерах, с моими комментариями, подсказками, уточнениями.

 

В 37 уроках «Практики резиновой верстки» мы будем работать только с html и CSS. Также будем применять технологии CSS 3.

Вы сможете воссоздать процесс верстки сами — шаг за шагом.

Конкретные инструменты для грамотной верстки. Просто. Мощно. Эффективно.

 

Цена: 2670 руб.

Электронная версия ничем не отличается от версии, которая записана на диск. Разница в стоимости исходит из затрат на производство диска, что полностью исключает электронная версия, которую вы можете получить сразу после оплаты и приступить к изучению курса. (Размер видеокурса - 4.34 ГБ)

Цена: 3170 руб.

Курс записан на DVD-диск. После получения вашего заказа диск отправляется на ваш адрес ценной посылкой в специально защищенной упаковке. Время оформления и отправки заказа – 24 часа с момента его поступления.
Внимание! Доставка в цену уже включена! Наложенный платёж только по России и Украине.

резиновая верстка

Что вы получаете от курса?

Вы разберетесь и с базовой табличной версткой, и с блочной разметкой.

Вы научитесь использовать профессиональные приемы и методы работы с html и CSS.

Уже с помощью этих приемов вы сверстаете обычный резиновый сайт.

 

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

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

В результате вы доведете до ума личный сайт, сайт проекта или сайт для заказчика.

Хорошая верстка -
это хорошие деньги

 

Цена: 2670 руб.

Электронная версия ничем не отличается от версии, которая записана на диск. Разница в стоимости исходит из затрат на производство диска, что полностью исключает электронная версия, которую вы можете получить сразу после оплаты и приступить к изучению курса. (Размер видеокурса - 4.34 ГБ)

Цена: 3170 руб.

Курс записан на DVD-диск. После получения вашего заказа диск отправляется на ваш адрес ценной посылкой в специально защищенной упаковке. Время оформления и отправки заказа – 24 часа с момента его поступления.
Внимание! Доставка в цену уже включена! Наложенный платёж только по России и Украине.

резиновая верстка

Пять причин, почему «Практика…» лучше
других курсов по резиновой верстке

причина 1 «Практика…» посвящена исключитель-
но резиновой верстке

Большинство обучающих материалов в Сети, как и в офлайн-курсы, содержит слишком много о верстке вообще. А также много о дополнительных инструментах типа javascript, jQuery, php...

Если вы уже практикуете верстку, вам незачем проходить эту школу еще раз. И, конечно, платить за нее.

Если вам нужна лишь практика «резиновой» верстки, зачем тратить время и деньги на все остальное? В нашем курсе — только то, что касается именно этой темы.

причина 1 В «Практике резиновой верстки» только авторский материал

Очень многие курсы по сайтостроению написаны самоучками, далекими от практики. Обычно они лишь «пережевывают» общедоступную информацию.

Полезных примеров мало, они чужие. Часто эти курсы «авторы» заказывают у обычных фрилансеров. Настоящий информационный секонд-хенд!

«Практику…» я составил и записал лично. В курсе мы «препарируем» реально существующие сайты, которые я когда-то верстал для настоящих заказчиков.

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

причина 1 В «Практике…» нет воды

В большинстве других курсов воды предостаточно. Общая теория, обзор инструментов, слова о том, как хорошо уметь верстать. Бла-бла-бла о преимуществах «резиновой» верстки…

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

Будет дана «дорожная карта», указывающая, что делать после прохождения курса. В нашем с вами курсе — лишь конкретные примеры и приемы! Шаг за шагом. Бери и делай.

причина 1 Удобное и практичное
содержание курса

Структура «Практики…» абсолютно противоположна большинству обучающих вещей в Сети.

В других курсах рассказывают о каждом инструменте отдельно, раздел за разделом. И пока вы дойдете до конца, забудете, с чего начинали.

В моем курсе нет ничего подобного. Каждый раздел охватывает все нужные навыки для верстки сайта по образцу. Первый сайт самый простой, последний – самый сложный.

И уже одного раздела хватит, чтобы начать полноценно работать. Все приемы можно использовать сразу, не отпуская «штурвал».

 

prichina5  Стоимость

Как известно, более-менее толковые онлайн-курсы по верстке и сайтостроительству стоят около двух тысяч рублей. Причем о «резиновой» верстке там сказано немного — вы переплачиваете за дополнительную информацию и «воду».

Офлайн-курсов по «резиновой» верстке вообще не существует. Общий курс верстки или курс по основам html/CSS — дорогое удовольствие. От 12 тысяч рублей стоят занятия в группах. Индивидуальные — более 40 тыс. руб.

Вот Вам парочка скриншотов ближайших курсов сухой теории по html и css в вашем городе:

курсы

И это только парочка примеров, найденных в интернете.

Курс «Практика резиновой верстки» стоит всего 2490 руб. за DVD-версию (доставка включена) и 1990 руб. за электронную версию (моментальное скачивание). При этом вы получаете конкретные, практические пошаговые инструкции. Уникальный авторский материал, который можете тут же воплотить в жизнь.

Это много?

За эти деньги вы можете “затариться” продуктами в маркете. Или посидеть с девушкой/парнем в кафе. Или понемногу растратить по мелочам: общественный транспорт, перекус, водичка… Да что мне вам рассказывать — сами знаете!

Так не лучше ли вложить эти скромные деньги в собственные знания? Чтобы потом увеличить доход за отлично сверстанный сайт!

 

Цена: 2670 руб.

Электронная версия ничем не отличается от версии, которая записана на диск. Разница в стоимости исходит из затрат на производство диска, что полностью исключает электронная версия, которую вы можете получить сразу после оплаты и приступить к изучению курса. (Размер видеокурса - 4.34 ГБ)

Цена: 3170 руб.

Курс записан на DVD-диск. После получения вашего заказа диск отправляется на ваш адрес ценной посылкой в специально защищенной упаковке. Время оформления и отправки заказа – 24 часа с момента его поступления.
Внимание! Доставка в цену уже включена! Наложенный платёж только по России и Украине.

резиновая верстка

Бонусы

Заказывая курс «Практика резиновой верстки»,
вы получаете бесплатно целых два полезных бонуса!

Первый бонус: Уроки по работе в программе Dreamweaver

миникурс по Dreamweaver

Уроки:

урок1 Обзор программы

урок2 Начало работы

урок3 Работа с текстовым контентом

урок4 Работа со ссылками

урок5 Вставка графики на страницу

урок6 Работа с мультимедиа-контентом и формами

урок7 Таблицы

урок8 Заключение

WEB-страницы можно создавать в любом текстовом редакторе. Даже обычного блокнота будет достаточно для создания web-страницы.

Но есть программы, которые созданы специально, чтобы облегчить жизнь web-разработчику. Программы, которые ускоряют и автоматизируют процесс создания web-страниц.

Одна из таких программ — Dreamweaver.

Dreamweaver — это программа для создания Web-страниц. Она дает массу возможностей для ускорения и упрощения процесса создания сайтов. Обладает гибким и легко настраиваемым под себя окном разработчика.

Изучив данный бонус, вы сможете пользоваться программой, что ускорит процесс создания и наполнения web-страниц.

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

В уроках рассмотрены все панели инструментов, которые предоставляет программа.

Плюс к этому, показано, как создать свою панель инструментов, удобную специально для вас. Также рассмотрены спорные возможности работы программы и последствия, к которым они могут привести.

Итоговое время раздела:
viacon

Второй бонус: Сборник полезных инструментов веб-разработчика

миникурс по Dreamweaver

Уроки:

урок1 Инструмент 1: Firebug

урок2 Инструмент 2: WebDeveloper

урок3 Инструмент 3: cssUpdater

урок4 Инструмент 4: yslow

урок5 Инструмент 5: cssUsage

Если к первой группе можно отнести специализированные для web редакторы кода, то инструменты второй группы можно использовать как расширения для браузеров.

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

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

Изучив уроки, вы сможете всевозможными методами протестировать страницу.

Сможете быстро вносить изменения в код и тут же видеть результат.

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

Итоговое время раздела:
viacon

резиновая верстка

Заказывая курс «Практика резиновой верстки», вы ничем не рискуете. Потому что я предоставляю вам твердые гарантии качества, получения курса, после продажной поддержки и возврата денег. Вы полностью защищены!

Гарантии

1. Гарантия качества

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

При правильном использовании инструкций и приемов из курса, вы выполните «резиновую» верстку того же качества, за которое платят деньги мои заказчики.

Вы всегда можете зайти на созданные мной сайты и сравнить результаты.

2. Гарантия получения курса

Вы можете скачать курс в электронном виде, либо заказать его на DVD.

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

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

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

Если посылка с диском вдруг «потеряется» по вине почты, или диск дойдет поврежденным — я просто-напросто бесплатно вышлю вам новую копию.

 
 
 

3. Гарантия послепродажной поддержки

После покупки курса вы сможете получить доступ в закрытый раздел нашего форума по данному курсу и в службу поддержки. Это значит, что вы в течение 3-х месяцев с момента покупки сможете задавать свои вопросы по материалам данного курса, на которые вам обязательно будут даны ответы.

4. Гарантия возврата денег

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

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

 

Цена: 2670 руб.

Электронная версия ничем не отличается от версии, которая записана на диск. Разница в стоимости исходит из затрат на производство диска, что полностью исключает электронная версия, которую вы можете получить сразу после оплаты и приступить к изучению курса. (Размер видеокурса - 4.34 ГБ)

Цена: 3170 руб.

Курс записан на DVD-диск. После получения вашего заказа диск отправляется на ваш адрес ценной посылкой в специально защищенной упаковке. Время оформления и отправки заказа – 24 часа с момента его поступления.
Внимание! Доставка в цену уже включена! Наложенный платёж только по России и Украине.

резиновая верстка

Закажите курс прямо сейчас!

Просто нажмите кнопку заказа, перейдите к соответствующей форме.

И получите ценные практические знания и умения — 37 уроков, 19 часов наглядного примера профессиональной резиновой верстки от практика с более чем 6-летним опытом.

Результатом знакомства с курсом станет значительное повышение уровня и качества вашей работы. Вы научитесь верстать более профессионально!

После такой практики у вас практически никаких вопросов не останется!

 

Цена: 2670 руб.

Электронная версия ничем не отличается от версии, которая записана на диск. Разница в стоимости исходит из затрат на производство диска, что полностью исключает электронная версия, которую вы можете получить сразу после оплаты и приступить к изучению курса. (Размер видеокурса - 4.34 ГБ)

Цена: 3170 руб.

Курс записан на DVD-диск. После получения вашего заказа диск отправляется на ваш адрес ценной посылкой в специально защищенной упаковке. Время оформления и отправки заказа – 24 часа с момента его поступления.
Внимание! Доставка в цену уже включена! Наложенный платёж только по России и Украине.

Приятного обучения и удачных проектов!
С уважением, автор курса — Андрей Бернацкий

P.S. Еще раз хочу напомнить о гарантиях, которые вы получите, купив курс «Практика резиновой верстки». Это гарантии качества, доставки курса, возврата денег, и, конечно же, послепродажной поддержки. Вы абсолютно ничего не теряете заказав курс прямо сейчас.

 
 

*Данное рекламное предложение не является публичной офертой.

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

* Я согласен(на) с условиями публичной оферты

Все права защищены © 2013
ИП Рог Виктор Михайлович
ОГРН: 313774621200541

Партнерская программа
Служба поддержки

Дизайн сайта:
Юшков Виталий

Система электронных платежей