Верстка динамической кнопка на CSS

Во-первых, что такое динамическая кнопка. Динамическая кнопка — это кнопка, вид которой меняется при наведении на нее указателя мыши.

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

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

Что мы имеем в результате.

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

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

А можно пойти совсем другим путем и сверстать эту кнопку вообще без применения JavaScript. И все это дело будет называется динамической кнопкой на CSS.

Процесс создания изображения для кнопки в Photoshop и ее верстку я записал в формате видеоурока.

Поехали!

Читать полностью »

Firebug — находка для верстальщика

Сегодня речь пойдет о мощном и удобном дополнении к FireFox под названием Firebug.

Функционал Firebug-а позволяет «на живую» изменять HTML и CSS-код и сразу видеть последствия этих изменений в браузере.

Так же это мощное дополнение поможет верстальщику разобраться в запутанной HTML-структуре загруженной в браузере страницы.

Возможности Firebug-a не ограничиваются лишь работой с HTML и CSS. При помощи данного дополнения значительно упрощается процесс отладки JavaScript, есть возможность просматривать данные, отправляемые серверу… Но это все уже из другой оперы, пока рассмотрим Firebug в качестве инструмента для верстальщика сайта.

Читать полностью »

div верстка сайта – итог видеокурса

Быстро скачать весь видеокурс по div верстке

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

Курс div верстки упакован в один архив (511 Мбайт) и скачивается со скоростью до 4 МБит/сек.

Стоимость услуги быстрого скачивания курса div верстки — 50 рублей. Оплата производится посредством WebMoney.

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

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

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

Хотите узнать подробности – читайте дальше.

Div верстка. Базовый видеокурс

Подытожим 14-серийную эпопею видеоуроков по div верстке сайта.

Верстка сайта — это непростая наука, освоив которую вы с легкостью сможете преобразовывать psd-макет дизайна сайта в HTML + CSS код, который одинаково хорошо выглядит во всех популярных браузерах.

div верстка — это разновидность верстки сайта, в которой для позиционирования элементов на странице применяются теги div. Div верстка гораздо предпочтительнее табличного подхода.

На протяжении 14-ти видеоуроков мы с вами, уважаемый читатель, шаг-за-шагом верстали из psd-макета дизайна страницы, разработанного в Photoshop, кроссбраузерный HTML + CSS каркас блочной div верстки веб-документа.

Полученная верстка полностью соответствует стандартам (т.е. валидная) и с точки зрения HTML, и с точки зрения CSS.

Читать полностью »