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

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

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

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

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

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

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

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

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

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

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

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

Далее...

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


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

Способ №2. Размещение таблицы стилей в теле html страницы.

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

Итак, открываем редактором html страницу и находим тег, закрывающий его головную часть - </head> и вписываем перед ним следующий html код:

<style type="text/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;
}
-->
</style>

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

<style type="text/css"> - говорит браузеру, что текст заключенный внутри тега нужно интерпретировать как таблицу стилей;

<!-- - это просто заглушка для старых браузеров, которые не понимают тег style и могут просто вывести все его содержимое на страницу в виде текста;

- комментировалось ранее;

--> - закрываем нашу заглушку;

</style> - тег, закрывающий нашу конструкцию.

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

Теперь чтобы вывести на экран динамичную кнопку, впишите в нужном месте вашей страницы следующий html код:

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

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


Главная

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


Итак, недостатки:

Такой вариант совершенно не приемлем, если вы хотите создать с помощью описанного выше способа, меню для своего сайта. Почему? Дело в том, что если вы вдруг захотите изменить всего лишь один пункт такого меню, вам нужно будет отредактировать все страницы, где оно используется, т.е. практически все страницы вашего сайта. Занятие довольно утомительное и неблагодарное. Правда, если вы используете Dreamwear для создания вашего сайта или еще какой либо html редактор, который генерирует страницы на основе шаблонов, такое изменение много времени не займет, но не нужно забывать, что помимо редактирования страниц их нужно будет еще залить на сервер. Если это три-пять страниц, то ничего страшного не случится, а если их сто и более… Комментарии излишни.

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


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

Итак, размещение таблиц стилей в теле html страницы увеличивает общий вес только той страницы, на которой они размещены, вес остальных остается неизменным. Достоинство? Конечно! Ведь если поместить эту конструкцию в общий файл таблиц стилей, то картинка кнопки будет грузиться вместе со всеми страницами, к которым прикреплен данный CSS файл, и даже с теми, где эта картинка (кнопка) не используется. А если таких кнопок несколько? Каждая страница сайта получит бессмысленный довесок. Не очень разумно, согласитесь. Однако это тоже не очень веский аргумент.

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

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

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

В заключении я могу поделиться своим опытом и рассказать, как я лично поступаю в такой ситуации. По моему мнению, если вы собираетесь разместить динамичные кнопки созданные с помощью CSS таблиц на всех страницах своего сайта, используйте "Способ №1 – Вынесение таблиц стилей в отдельный файл". Если же вы задумали поместить такую кнопку на двух – трех страницах, возможно лучшим будет Способ №2. И, конечно же, могут быть комбинации. Если же есть и меню и отдельные кнопки, то стили для меню помещаем в общий файл, а стиль для отдельной кнопки в тело страницы, на которой она расположена.

Удачи Вам и успешного веб-программирования!

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


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

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

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

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

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









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

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