Блог счастливого веб-разработчика Голосов: 1 Адрес блога: http://ridler-fun.livejournal.com/ Добавлен: 2010-12-26 16:27:55

JavaScript. Введение.

2010-12-16 16:45:21 (читать в оригинале)

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

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

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

 

---

Вопрос дня: Праздничная суета

2010-12-15 08:32:24 (читать в оригинале)


 Для меня праздник это стрессовый отдых :)

---

Пошаговое руководство по созданию шаблона для Joomla

2010-12-14 11:43:07 (читать в оригинале)

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

---

Подчеркивание ссылок (text-decoration)

2010-12-11 07:46:59 (читать в оригинале)

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

• Полное удаление подчеркивания. Чтобы убрать стандартное подчеркивание, используем свойство text-decoration со значением none:

          a : link { text-decoration: none; }
       
          Конечно полное удаление подчеркивания может смутить посетителей сайта. Если мы не предусмотрим каких то других визуальных подсказок, то наши ссылки будут выглядеть точно также, как и весь остальное текст веб-страницы. Если мы пойдем этим путем, то нужно обеспечить выделение текста ссылок каким-то другим способом, например, полужирным начертанием, цветом фона, подсказкой в виде рисунка или преобразованием ссылки в имитированную кнопку.

• Добавление подчеркивания только при наведении на ссылку указателя мыши. Некоторые веб-дизайнеры убирают подчеркивание для всех ссылок, выделяют их каким то другим способом, а затем включают атрибут подчеркивания только при наведении указателя мыши. Чтобы обеспечить такой эффект, просто удалим подчеркивание ссылок, а затем повторно введем его в псевдокласс :hover:

a : link, a : visited
{
      text-decoration: none;
      background-color: #f00;
}

a : hover
{
      background-color: transparent;
      text-decoration: underline;
}

• Использование свойства нижней границы. У нас есть возможность управлять цветом, толщиной или стилем стандартной линии подчеркивания ссылок, которое всегда отображается в виде линии толщиной 1 пиксел того же цвета, что и текст
• Большего разнообразия можно добиться путем использования вместо подчеркивания свойства border-bottom
• Скрыть обычное подчеркивание и добавить черту в виде пунктирной линии-границы можно следующим образом: 

a : link
{
     text-decoration: none;
     border-bottom: dashed 2px #f55;
}

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

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

a
{
    text-decoration: none;
    background: url(umages/underline.jpg) repeat-x left bottom
    padding-bottom: 5px;
}

---

Выборка отдельных ссылок

2010-12-10 18:22:37 (читать в оригинале)

 Стили, которые мы создавали в предыдущем посте, представляют собой простейшие стили ссылки <a>. Они производили выборку в определенном состоянии, но при этом стилизовали абсолютно все ссылки, независимо от их расположения на веб-странице. Допустим мы хотим отформатировать одни ссылки одним способом, а другие другим. Что делать в этом случае?! Есть хорошее решение этой проблемы - применить стилевые классы к нужным тегам.

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

<a href=http://twitter.com/ridler_fun class="style"> Я в твиттере</a>

Для стилизации этой ссылки другим способом давайте создадим следующий стиль:

a.style : link { color: #f50; }
a.style : visited { color: #800; }
a.style : hover { color: #f44; }
a.style : active { color: #b3f611; }

Определения только имени стилевого класса, без указания названия тега a, будет достаточно:

.style : link { color: #f50; }
.style : visited { color: #800; }
.style : hover { color: #f44; }
.style : active { color: #b3f611; }

Теперь такое форматирование приобретут только ссылки, с классом 'style'.

Группирование ссылок с помощью селекторов потомков. Если набор ссылок располагается в одной области веб-страницы, то мы можем сэкономить время, применив селекторы потомков (они позволяют адресовать стиль к тегу, вложенному в другой тег). Предположим, у нас имеется пять ссылок, которые ведут на основные разделы нашего сайта.

Они представляют собой главную панель навигации, и мы хотим придать им соответствующий вид. Давайте просто заключим эти ссылки в тег <div> и применим к нему стилевой класс или стиль с идентификатором: <div id="navigation">. Теперь у нас появилась возможность произвести выборку и отформатировать только эти ссылки:

#navigation a : link { color: #f50; }
#navigation a : visited { color: #800; }
#navigation a : hover { color: #f44; }
#navigation a : active { color: #b3f611; }

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