Полезности: Вебстроительство
Отдельные рецепты, которые мне помогли. Думаю, что многим тоже пригодится.
Использование библиотеки скриптов jQuery для улучшения дизайна сайта
С помощью языка JavaScript можно создавать огромное количество красивых и полезных "наворотов" для сайта.
Конечно же, можно его освоить и самостоятельно писать необходимые скрипты. Но в начале творческого пути
хочется побыстрее начать применять различные "приемчики", а знаний пока еще нет...
Для этого были созданы различные библиотеки различных скриптов, одной из которых является jQuery.
Но и здесь не все очень просто. Есть огромное множество уже готовых скриптов, но нужно уметь ими пользоваться -
управлять различными опциями и параметрами, заложенными в них. В принципе, это уже легче, чем освоить сам язык
JavaScript, но все равно на это необходимо время.
Предлагаем Вам пойти еще более простым путем - использовать уже готовые "куски" html и css кодов, которые надо
просто вставить в Вашу страничку и CSS-файл. А если Вы захотите модернизировать скрипт из библиотеки jQuery, то
постепенно почитывая документацию библиотеки или интуитивно их изменяя, сможете подстраивать их под Ваши задачи.
Порядок вставки скриптов в сайт
1.Небходимо на Ваш компьютер установить саму библиотеку jQuery.
Скачайте ее на сайте www.jqwery.com
Теперь, включая скрипт в страничку Вы сможете видеть его работу.
2. Вставить собственно сам скрипт "наворота". Он размещен в блоке "Скрипт" каждого из приведенных здесь примеров.
Скрипт вставляется в любом месте страницы между тэгами <body> .... </body>
Скрипт должен начинаться с тэга <script type="text/javascript"> и заканчиваться тэгом </script>
3. Вставить в Ваш CSS файл код примера, размещенный в блоке "CSS" каждого из приведенных здесь примеров.
В примере css-файл назван style.css Если у Вас он имеет другое имя, то замените его в коде. Подправьте стили под дизайн
Вашей страницы
4. Вставить html-код, управляющий скриптом в Вашу страницу. Код приведен в блоке "HTML" каждого из приведенных здесь примеров.
Общий тэг для всех примеров:
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'> </script>
он дает доступ Вашей странице к библиотеке jQuery. Я скачал jQuery через инструменты Google, если Вы скачаете библиотеку
напрямую с их сайта, необходимо вставить другой тэг:
<script type='text/javascript' src='jquery.js'>></script>
5. Вот и все... Смело экспериментируйте, устанавливайте различные готовые коды и с временем сами сможете управлять
скриптами jQuery (если захотите). Удачи!
Многослойный текстовый блок. Получил меткое название "гармошка" (по-буржуйски - аккордеон).
Полезный скрипт для компактного представления многострочной конструкции, состоящей из нескольких логических блоков, заголовки которых желательно видеть пользователю на экране без утомительной прокрутки. При открытии одного блока можно лицезреть логическую структуру всей конструкции. Подобным образом выполнена и конструкция, которую Вы сейчас читаете.
Скрипт
$(document).ready(function(){
$(".accordion2 h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=" />
<title>jQuery. Гармошка </title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<b>Начало Вашей страницы</b>
<script type="text/javascript">
Здесь размещаем скрипт
</script>
<b>Начало html-кода гармошки</b>
<div class="accordion2">
<h3>Заголовок блока №1</h3>
<p>Текст блока №1</p>
<h3>Заголовок блока №2</h3>
<p>Текст блока №2</p>
<h3>Заголовок блока №3</h3>
<p>Текст блока №3</p>
<b>И так сколько угодно.Конец html-кода гармошки</b>
</div>
</body>
</html>
В css-файле есть файл arrow-square.gif Это стрелка "вниз", появляющася после раскрытия блока.
Подберите приглянувшуюся стрелку (с определенной шириной и высотой) и вставьте ее под этим именем в папку url(/images)
CSS
body {
margin: 10px auto;
width: 60%;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.accordion2 {
width: 100%;
border-bottom: solid 1px #c4c4c4;
}
.accordion2 h3 {
background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion2 h3:hover {
background-color: #e3e2e2;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
display: none;
}
В css-коде есть ссылка на файл arrow-square.gif
Это стрелка "вниз", появляющася после раскрытия блока.
Подберите приглянувшуюся стрелку (с определенной шириной и высотой) и вставьте ее под этим именем в папку url(/images)
Полезные сервисы для посетителей Вашего сайта.
Подборка сервисов с сайта 2ip.ru
У вас в компьютере появились странные и неизвестные вам файлы? Вы считаете, что это вирусы? А может быть вам прислали на email файл, который вы хотите открыть, но боитесь, что это вирус? Или вам дали ссылку на какой то файл а вы боитесь качать его? Теперь все это перестает быть проблемой. Загрузите подозрительный файл к нам на сервер или укажите его месторасположение в сети, после этого он будет проверен нашей антивирусной программой и вы получите результат. Антивирусная база нашего сервера актуализируется каждый час, поэтому мы можем выявить самые последние разработки вирусописателей.
Вы можете разместить на своем сайте наш измеритель скорости интернета. При нажатии на ссылку или картинку откроется новое окошко, в котором посетитель вашего сайта сможет измерить скорость его интернет соединения.
