Во-первых, что такое динамическая кнопка. Динамическая кнопка — это кнопка, вид которой меняется при наведении на нее указателя мыши.
Вы можете посмотреть как выглядит динамическая кнопка.
Такая красота очень часто верстается путем программирования на JavaScript. По умолчанию загружена первая картинка, которая и представляет собой кнопку. При наведении на нее указателя мыши происходит смена предыдущей картинки на новую этим самым JavaScript-ом.
Что мы имеем в результате.
В результате у нас есть две картинки: первая — это вид кнопки по умолчанию, вторая — при наведении мыши. Когда я навожу мышь на кнопку по умолчанию у меня происходит загрузка изображения номер два. И, если используется большая и красивая кнопка или мой интернет медленный, какое-то время, после наведения мыши, кнопка тупит и не меняет своего вида. За это время происходит подгрузка изображения номер два.
Проблемы тупости кнопки, при первой загрузке сайта, можно решить путем установки скрипта-загрузчика. Этот скрипт будет заливать в кеш сразу оба изображения для моей динамической кнопки.
А можно пойти совсем другим путем и сверстать эту кнопку вообще без применения JavaScript. И все это дело будет называется динамической кнопкой на CSS.
Процесс создания изображения для кнопки в Photoshop и ее верстку я записал в формате видеоурока.
Поехали!
Читать полностью »
Сегодня речь пойдет о мощном и удобном дополнении к FireFox под названием Firebug.
Функционал Firebug-а позволяет «на живую» изменять HTML и CSS-код и сразу видеть последствия этих изменений в браузере.
Так же это мощное дополнение поможет верстальщику разобраться в запутанной HTML-структуре загруженной в браузере страницы.
Возможности Firebug-a не ограничиваются лишь работой с HTML и CSS. При помощи данного дополнения значительно упрощается процесс отладки JavaScript, есть возможность просматривать данные, отправляемые серверу… Но это все уже из другой оперы, пока рассмотрим Firebug в качестве инструмента для верстальщика сайта.
Читать полностью »
Быстро скачать весь видеокурс по div-верстке
Уважаемый читатель, если вы хотите без лишних слов на высокой скорости скачать весь видеокурс по div-верстке (включая psd-дизайн-макет и исходники результата) в лучшем качестве, то я могу предложить услугу быстрого платного скачивания с выделенного сервера.
Курс упакован в один архив (511 Мбайт) и скачивается со скоростью до 4 МБит/сек.
Стоимость услуги быстрого скачивания – 50 рублей. Оплата производится посредством WebMoney.
Надеюсь, что цена окажется приемлемой, поскольку удобство быстрого скачивания того стоит.
Если деньги тратить не хочется – вы всегда можете бесплатно скачать курс с DepositFiles (ссылки на скачивание в конце поста).
Но, если вы хотите отблагодарить меня за труды, то платная закачка – это лучшая благодарность, которая даст мне мощный стимул к дальнейшему развитию блога.
Вот ссылка на покупку возможности быстрого скачивания – скачать видеокурс целиком на высокой скорости.
Сразу после оплаты вам будет выдана ссылка на прямое скачивание архива с выделенного сервера.
Хотите узнать подробности – читайте дальше.
Div-верстка. Базовый видеокурс. Что к чему.
Подытожим 14-серийную эпопею видеоуроков по div верстке сайта.
Верстка сайта — это непростая наука, освоив которую вы с легкостью сможете преобразовывать *psd-макет дизайна сайта в HTML + CSS код, который одинаково хорошо выглядит во всех популярных браузерах.
div-верстка — это разновидность верстки сайта, в которой для позиционирования элементов на странице применяются теги <div>. Данный вид верстки гораздо предпочтительнее табличного подхода.
На протяжении 14-ти видеоуроков мы с вами, уважаемый читатель, шаг-за-шагом верстали из .psd-макета дизайна сайта, разработанного в Photoshop, кроссбраузерный HTML + CSS каркас блочной div верстки веб-документа.
Полученная верстка полностью соответствует стандартам (т.е. валидная) и с точки зрения HTML, и с точки зрения CSS.
Читать полностью »
