В настоящее время прием заказов временно приостановлен. Приносим извинения за возможные неудобства.
Разработка и создание сайтов в Ростове-на-Дону

Разработка сайтов

Главное направление деятельности студии ArtWebMaster, это разработка и создание сайтов в Ростове-на-Дону.

Далее...
Создание компонентов Joomla и модулей

Компоненты и модули

Мы также занимаемся созданием компонентов, модулей и плагинов для CMS Joomla.

Далее...
Перенос сайтов на CMS Joomla

Перенос сайтов на Joomla

Ваш сайт статичный? Мы можем перенести его на CMS Joomla и Вы получите быстрый динамичный сайт.

Далее...
Поддержка и сопровождение сайтов

Сопровождение сайтов

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

Далее...

Динамичная графическая кнопка без скриптов


Методика создания динамичной графической кнопки без использования скриптов

В этой статье я расскажу, как сделать вот такую

Кнопка

динамичную кнопку без использования каких-либо скриптов (Java, JavaScript, VBScript и т.п.). Механизм смены картинки реализован с помощью таблиц стилей CSS. Я не собираюсь претендовать на то, что это мое открытие. Нет, конечно. Суть этого метода лежит на поверхности, однако далеко не все веб-мастера, особенно начинающие, знают о нем. Сразу хочу сказать, что я не ярый противник использования скриптов. Просто нужно более гибко подходить к разработке интернет-проектов и использовать способы, которые наилучшим образом подходят в том или ином случае.

Чем же такой способ лучше? В чем состоят преимущества такого метода, относительно реализации с помощью скриптов? А преимущества есть!

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

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

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

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


Создаем графическую кнопку

Итак, приступим! Для начала мы должны определиться с размерами кнопки. Если у вас есть готовый шаблон или макет дизайна сайта, то просто измерьте размеры кнопки меню. К примеру, мы определили, что наша кнопка будет шириной 140 и высотой 24 пикселя. Создаем в каком-либо графическом редакторе изображение с размерами 140 на 48 пикселей. Обратите внимание, что высота картинки должна быть вдвое большей, чем у нашей кнопки.

Далее условно делим нашу картинку по горизонтали пополам и нарисуем в верхней части изображение неактивной кнопки, а в нижней, активной. Для создания рисунков кнопки вы можете воспользоваться, к примеру, Photoshop-ом. Разбив изображения на два слоя можно редактировать их по отдельности, добиваясь нужного результата. Можно воспользоваться одним из редакторов-создателей кнопок, например Crystall Button или Likno Web Button Maker, не забывая при этом о размерах кнопки. Если вы будете изготавливать кнопку таким редактором, то вам необходимо создать для нее два изображения (активное и неактивное), а затем соединить их в одно, используя любой графический редактор, например, MS Paint.

Если затрудняетесь самостоятельно изготовить изображение для кнопки, вы с успехом можете воспользоваться любым готовым рисунком кнопки из бесплатных коллекций, расположенных на нашем сайте. Все рисунки оптимизированы по объему и сгруппированы по основным цветовым схемам. Так что вам остается лишь выбрать для себя наиболее подходящую и использовать в своем интернет-проекте. Коллекции расположены на страницах Бесплатная коллекция кнопок №1, Бесплатная коллекция кнопок №2 и Бесплатная коллекция кнопок №3.

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


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

Далее сохраните полученную картинку с именем mybutton.png на свой диск, а затем закачайте ее на свой сайт.

Теперь можно приступать к созданию стилей. Это можно сделать различными способами. Рассмотрим каждый из них.


Способ №1. Вынесение стилей в отдельный файл.

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

Итак, что мы делаем. Сначала определяем, как будет прописана наша кнопка в теле страницы сайта. Предположим, что это будет тег DIV. Прописываем в том месте страницы, где будет выводиться кнопка следующий html код:

<div class="button"><a href="http://artwebmaster.ru/">Главная</a></div>

Что все это значит?

<div class="button"> - тут мы присваиваем тегу div класс стиля с именем button. Это имя будет в дальнейшем использоваться в сводном файле стилей, как идентификатор. Далее:

<a href="http://artwebmaster.ru/">Главная</a> - это стандартная конструкция описания ссылки. В данном случае мы прописали ссылку на главную страницу сайта, а выводиться на экран она будет в виде слова Главная.

Далее закрываем тег div: </div>.

Так как файл страницы открыт, сразу пропишем путь к файлу стилей (если его еще нет), чтобы он мог подгрузиться вместе со страницей. Находим в начале страницы закрывающий тег </head> и вписываем перед ним строку:

<link href="/styles.css" rel="stylesheet" type="text/css">

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


Теперь приступаем к созданию механизма смены изображения с помощью CSS таблиц стилей. Для этого создаем пустой файл с именем, которое было указано ранее, в нашем случае это styles.css и помещаем его в ту же папку, где расположена отредактированная страница. Если у вас уже есть файл стилей, используем его. Открываем с помощью блокнота наш CSS файл и прописываем там следующее:

.button a {
font: bold 12px Verdana, Arial, sans-serif;
text-decoration: none;
text-indent: 10px;
color: #FFFFCC;
background: url(mybutton.png);
display: block;
width: 140px;
line-height: 24px;
height: 24px;
}

.button a:hover{
background-position: 0px -24px;
text-decoration: none;
color: #FFFFCC;
}

Сохраняем изменения и закрываем файл.

Прокомментирую каждую строку:

.button a { - имя-идентификатор класса стиля. Указывает, что стиль применяется к тексту расположенному внутри тега A (текст ссылки), который в свою очередь расположен внутри тега, которому присвоен класс button,

font: bold 12px Verdana, Arial, sans-serif; - устанавливаем шрифт Verdana, Arial, sans-serif, утолщенный, размером 12 пикселей,

text-decoration: none; - текст (в данном случае ссылка) выводится без подчеркивания,

text-indent: 10px; - делаем отступ для текста слева в 10 пикселей,

color: #FFFFCC; - цвет символов светло-желтый,

background: url(mybutton.png); - тут мы говорим, что необходимо взять файл нашей кнопки - mybutton.png и использовать его в качестве заднего фона. Самое главное правильно прописать путь к картинке. В данном случае картинка расположена в одной папке со страницей.

display: block; - вывод тега в виде блока (прямоугольника),

width: 140px; - ширина блока 140 пикселей,

line-height: 24px; - высота текстовой строки 24 пикселя. Эта запись заставит надпись на кнопке располагаться точно по центру (по вертикали),

height: 24px; - высота нашей конструкции (блока),

} - закрываем конструкцию.

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

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

Прокомментирую каждую строку:

.button a:hover { - имя-идентификатор класса стиля, который модифицирует все, что находится внутри тега A, при наведении на него курсора мыши,

background-position: 0px -24px ; - выводим фоновую картинку, отступая от ее верхнего края 24 пикселя,

text-decoration: none; - текст выводится без подчеркивания,

color: #FFFFCC; - цвет символов светло-желтый,

} - закрываем конструкцию.

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


Главная

Чтобы сделать меню из таких кнопок просто допишите в вашу страницу после строки

<div class="button"><a href="http://artwebmaster.ru/">Главная</a></div>
следующий html код:
<div class="button"><a href="http://artwebmaster.ru/ru/services.html">Услуги</a></div>
<div class="button"><a href="http://artwebmaster.ru/ru/services/joomla-templating.html">Шаблоны</a></div>
<div class="button"><a href="http://artwebmaster.ru/ru/services.html">Модули</a></div>
<div class="button"><a href="http://artwebmaster.ru/ru/portfolio/websites.html">Портфолио</a></div>

Адреса ссылок и их названия указывайте соответственно свои.

И в конечном итоге получаем меню с динамично меняющимися кнопками:


Другой способ прописывания стилей рассмотрим в следующей статье.

===============================
© 2007 Соловьев И. В.


Если Вы испытываете затруднения в самостоятельном создании меню для своего сайта, с использованием приведенного выше метода, мы готовы Вам помочь!

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

Для связи с нашей студией Вы можете воспользоваться формой быстрых сообщений, которая расположена в правой колонке или зайти на страницу «Контакты».

Форма быстрой связи

С помощью этой формы Вы можете быстро сделать заказ сайта или задать нам вопрос.









Ответьте пожалуйста

Как Вы нашли наш сайт?