Отправляет email-рассылки с помощью сервиса Sendsay

Рецепты HTML

  Все выпуски  

Рецепты HTML # 137


Информационный Канал Subscribe.Ru

htmlbook.ru
Для тех, кто делает сайты Помощь по сайту
СтатьиКнигиФорум

Добрый день.
В последнее время очень сильно разочаровал HotLog, осуществляющий сбор статистики по посетителям сайта. Активно демонстрируя чужую рекламу на своих кнопках-счетчиках, HotLog умудряется не показывать статистику мою. Мотив здесь один, идет переход на новый движок, из-за чего возможны сбои. Все это прекрасно понимаю, но что-то затянулся у них период перехода и после того, как несколько раз получил нулевые значения по всем показателям, понял, что не все «спокойно в Датском королевстве». На самом деле проблема со сбором статистики достаточно актуальна. Информация по посетителям нужна для правильного позиционирования сайта по ключевым словам и запросам, иными словами, для продвижения сайта и повышения его рейтинга. Понятно, что бесплатные счетчики мало что могут гарантировать в этом вопросе, к тому же в силу технических причин необъективны. В этом случае поможет статистика, основанная на анализе логов сайта. К сожалению, она доступна не всем и не для всех, так что применяется гораздо реже, чем те же счетчики-кнопки. Это я к тому, что никаких кнопок на сайте вы уже не увидите. Загружаться теперь информация должна быстрее и не создавать лишнего трафика.

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

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

2. Адрес эл. почты из формы комментария я выкинул, решив, что этот пункт не нужен. Если кто желает оставить о себе память, можно прямо в комментарии подпись добавить.

3. Теги писать в тексте можно, но скобки < > заменяются на &lt; и &gt; поэтому теги отображаются как есть.

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

Ответов на вопросы сегодня в выпуске нет, ничего интересного за последнее время не прислали, зато приводится сразу две статьи, одна по использованию отступов, а вторая посвящена JavaScript и является продолжением статьи о работе со списками. Если вы хотите, чтобы в выпусках рассылки публиковались ответы на интересующие вас вопросы, пишите по адресу vlad@htmlbook.ru


Отступы в форме

Статья доступна по адресу www.htmlbook.ru/content/228.html

При использовании формы вокруг нее автоматически, сверху и снизу добавляются отступы. Эта особенность не всегда является необходимой и подчас только вредит, особенно, если форма располагается внутри таблицы. Чтобы в этом случае избавиться от отступов, сделайте наоборот — поместите таблицу внутри формы (пример 1).

Пример 1. Таблицы и формы
<html>
<body>
<form>
<table>
<tr>
<td>
<input type=text size=25><input type=submit value="Отправить">
</td>
</tr>
</table>
</form>
</body>
</html>

Того же результата можно добиться и с помощью стилей, добавив параметр margin с нулевым значение к тегу FORM (пример 2).

Пример 2. Стили для установки отступов в форме
<html>
<body>
<form style=""margin:" 0px">
...
</form>
</body>
</html>

Использование свойства margin в данном случае позволяет удобно и универсально задать отступы в форме или убрать их совсем. Единицы измерения (в данном случае — px) лучше указывать, некоторые браузеры игнорируют значение, если не задано в каких единицах его устанавливать.



Работа со списком

Сегодня продолжение статьи о JavaScript, посвященной работе со списками. Полную статью вы можете почитать по адресу www.htmlbook.ru/content/226.html

Выделение пункта меню

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

document.forms["имя формы"].имя списка[0].selected = true

Обратите внимание, что первый элемент списка в массиве всегда идет нулевым.

Применение выделения элемента списка показано в примере 5. Список содержит название дней и отображается вначале сегодняшний день недели. Определение номера дня в неделе происходит через функцию getDay(). Заметьте, что для воскресенья возвращается нулевое значение, а понедельник начинается с единицы. Выделение нужного пункта списка происходит с помощью операторов switch и case. Такая форма позволяет наглядно и удобно осуществить присвоение значений. Поскольку инициацию списка следует сделать сразу, функция вызывается через событие onLoad в теге BODY, которое наступает при загрузке веб-документа

Пример 5. Выделение пункта списка в зависимости от дня недели
<html>
<head>
<script language="JavaScript">

function selectToday() {

// Инициируем новый объект типа Date
today = new Date()

// Получаем текущий день недели, 0 - воскресенье, 1 - понедельник и т.д.
day = today.getDay()

f = document.forms["week"]
switch(day) {
case 1: f.day[0].selected = true; break
case 2: f.day[1].selected = true; break
case 3: f.day[2].selected = true; break
case 4: f.day[3].selected = true; break
case 5: f.day[4].selected = true; break
case 6: f.day[5].selected = true; break
case 0: f.day[6].selected = true; break
}
}
</script>
<head>

<body onLoad="selectToday()">

<form name=week>
Сегодня:
<select name=day>
<option>Понедельник</option>
<option>Вторник</option>
<option>Среда</option>
<option>Четверг</option>
<option>Пятница</option>
<option>Суббота</option>
<option>Воскресенье</option>
</select>
</form>

</body>
</html>


Значения элементов списка

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

Доступ к значению происходит аналогично получению текста элемента, только вместо метода text используется value.

document.forms["имя формы"].имя списка.options[номер пункта].value

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

Пример 6. Получение значения элемента списка
<html>
<head>
<script language="JavaScript">

function viewOption() {
selectNum = document.forms[0].SE.selectedIndex
selectValue = document.forms[0].SE.options[selectNum].value

alert(selectValue)
}
</script>
<head>

<body>

<form>
Выберите поисковую систему:
<select name=SE>
<option value="http://www.yandex.ru">Яндекс</option>
<option value="http://www.google.com">Google</option>
<option value="http://www.rambler.ru">Рамблер</option>
<option value="http://www.aport.ru">Апорт</option>
</select>
<input type=button onClick="viewOption()" value="Посмотреть">
</form>
</body>
</html>


Навигация с помощью списка

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

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

<select onChange="document.location=this.options[this.selectedIndex].value">

Метод document.location осуществляет переход по адресу, указанному в качестве значения. А оно, в свою очередь, берется из значений выбранного пункта. Поскольку скрипт пишется прямо в текущей форме, то нет нужды упоминать семейство document.forms, достаточно обойтись ключевым словом this, как показано в примере 7.

Пример 7. Создание ниспадающего меню
<html>
<body>

<form>
Быстрый переход по сайту:
<select onChange="document.location=this.options[this.selectedIndex].value">
<option value="cinema.html">Кино</option>
<option value="music.html">Музыка</option>
<option value="theatre.html">Театр</option>
<option value="books.html">Книги</option>
</select>
</form>

</body>
</html>

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

onClick="document.location=this.form.goUrl.options[this.form.goUrl.selectedIndex].value"

goUrl — имя, задаваемое тегу SELECT через параметр name (пример 8).

Пример 8. Ниспадающее меню с переходом
<html>
<body>

<form>
Быстрый переход по сайту:
<select name=goUrl>
<option value="cinema.html">Кино</option>
<option value="music.html">Музыка</option>
<option value="theatre.html">Театр</option>
<option value="books.html">Книги</option>
<input type=button value="Перейти" onClick="document.location=this.form.goUrl.options[this.form.goUrl.selectedIndex].value">
</select>
</form>

</body>
</html>

Наряду с обычными элементами списка иногда требуется сделать «неактивный» пункт, с которого нельзя было перейти на другой документ. В этом случае поставьте в качестве значения тега OPTION символ решетки (#).

<option value=#>Переход по сайту</option>


Copyright © 2002 - 2004 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Материалы сайта охраняются законом об авторском праве. Ни одну статью нельзя воспроизводить или использовать в какой бы то ни было форме, для каких бы то ни было целей или какими бы то ни было средствами без письменного разрешения автора.


http://subscribe.ru/
http://subscribe.ru/feedback/
Подписан адрес:
Код этой рассылки: inet.webbuild.htmlbook
Отписаться

В избранное