Дом 2 писателей

Дорогие авторы! Добро пожаловать в дом демократов. Долой классическую литературу!
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
Страница 1 из 11
Модератор форума: Акимычь 
Клуб писателей и поэтов » Администрация » Технические вопросы » Статьи по Web-дизайну.
Статьи по Web-дизайну.
АкимычьДата: Воскресенье, 06.03.2011, 12:45 | Сообщение # 1
Мудрый Правитель
Группа: Администратор
Сообщений: 701
Награды: 17
Репутация: 24
Статус: Offline
Немного специфическая статья и посвящена она решению проблем, возникающих при использовании на сайте фреймов. И, в частности, проблеме индексации таких сайтов поисковыми роботами и формированию фреймовой структуры при обращении к одной из внутренних страничек.

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

Подготовка сайта к индексации

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

В чём суть проблемы? Поисковые роботы представляют собой специальные программы, которые умеют путешествовать по ссылкам, начиная от некоторой корневой страницы. Когда Вы пытаетесь занести свою страничку в базу данных поисковой системы, Вас обычно просят ввести адрес главной страницы сайта. И вот с этого момента робот ставит Ваш запрос в очередь. Через некоторое время он пойдет по указанной ссылке и тщательно проанализирует всю страничку, вытащив из нее ключевые слова, краткое описание и другую полезную информацию. Всё это он заботливо сохранит в своей базе данных. После того, как главная страничка будет проиндексирована, робот пойдёт по ссылкам, которые на ней указаны, и будет заносить в базу все встречающиеся по пути странички. Глубина индексации обычно ограничивается 3 уровнями иерархии в пределах домена, на котором расположен сайт. Что, в принципе, правильно, иначе индексация сайта никогда бы не подошла к своему логическому завершению.

Таким образом индексируются обычные сайты, и так как на первой страничке обычно есть ссылки на все основные разделы сайта, то индексация проходит успешно. В случае с фреймами всё не так. Т.е. робот пытается честно проиндексировать сайт по своим правилам, но у него, к сожалению, ничего не получается. Если Вы создавали странички с использованием фреймов, то знаете, что фреймы описываются в специальной страничке-контейнере. И, как правило, описываются лишь фреймы и формирующие их файлы. Никаких ссылок во внешний мир на этой страничке попросту нет(!). И что же происходит? Робот находит такую страничку, сохраняет её в своей базе и... дальше ему некуда идти - он считает, что работа закончена, и переходит к индексации следующего сайта. А мы получаем абсолютно непроиндексированный сайт! А, значит, нашу страничку не смогут найти при помощи поисковых систем!

Ради справедливости следует заметить, что наиболее "продвинутые" поисковые системы уже пытаются индексировать сайты с фреймами и усложняют свои программы-роботы.

Ну а как же всё-таки подготовить сайт с фреймами к правильной индексации? Как уже было сказано выше, проблема заключается в отсутствии на страничке-контейнере ссылок на основные разделы сайта. Значит, нам нужно просто добавить эти ссылки самим. И поместим мы их в секции <noframes></noframes>, которая, кстати, специально была придумана для таких случаев. Заметьте также, что этот способ позволяет нам сделать сайт доступным для броузеров, которые не поддерживают фреймы.

А вот и пример корректного кода, осуществляющего всё сказанное выше:

<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>

</html>

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

Решение проблемы с формированием
структуры фреймов

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

Но давайте сначала рассмотрим истоки проблемы. Как ни странно, они связаны в основном с поисковыми системами - теперь уже не в контексте регистрации, а непосредственно при анализе результатов поиска. Если сайт верно проиндексирован, то это значит, что в базе есть "паспорт" на любую страничку данного сайта и, следовательно, в результате запроса мы можем получить ссылку на одну из внутренних страниц. Щелчок на ссылке, как Вы догадываетесь, откроет нам только внутреннюю страничку сайта без всяких фреймов. И, значит, весь кропотливо сделанный дизайн никто не увидит. Ладно дизайн, но ведь и добраться до других страничек сайта возможно будет лишь единственным способом - редактированием содержимого адресной строки.

Как же этого избежать? Вот сейчас и разберёмся. Для начала рассмотрим простые способы, которые позволят обойтись нам без применения JavaScript. В общем-то, способ всего один, и заключается он в том, что внизу каждой странички необходимо сделать ссылку на главную страницу сайта (которая, как Вы помните, одновременно является и контейнером). Этот нехитрый приём позволит посетителям попасть в начало Вашего сайта, не прибегая к ухищрениям типа редактирования адресной строки. И, вполне возможно, что он найдёт на сайте и другие полезные материалы.

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

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

<script language="JavaScript">
<!--
location.href="anotherpage.htm";
//-->
</script>

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

Второй приём - это передача скрипту параметров при помощи адресной строки (так называемый метод GET). Осуществляется это добавлением к адресу странички знака '?' (вопрос) и перечислением после него всех необходимых переменных и их значений. Если переменных несколько, то они отделяются друг от друга при помощи знака '&' (амперсанд). Вот несколько примеров передачи параметров посредством метода GET:

http://www.domain.com/page.htm?name=John&id=1986321
search.php?keyword=design&area=title&type=full
guestbook.asp?page=2

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

Для нашего случая этот приём обозначает следующее - мы можем передать главной страничке, которая формирует фреймы, адрес странички, на которую попал пользователь. А уж на страничке-контейнере обработать этот адрес и создать нужные фреймы.

Код, который приведён ниже, должен быть размещён в начале каждой внутренней страницы, которая выводится во фрейме:

<script language="JavaScript">
<!--
location.href="index.htm?"+location.pathname;
//-->
</script>

Заметьте, что конструкция несколько сложнее, чем я описал выше. В качестве параметра адреса я использовал свойство pathname объекта location, которое содержит полный путь текущей странички от корня сайта (для любопытных - location.href - содержит абсолютный адрес странички, включая название протокола и имя домена).

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

<script language="JavaScript">
<!--
if (window.parent.frames.length == 0) {
location.href="index.htm?"+location.pathname;
}
//-->
</script>

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

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

<script language="JavaScript">
<!--
document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
document.write('<frame src=\"content.htm\" name=\"content\">');
document.write('</frameset>');
//-->
</script>

Сейчас мы слегка модифицируем этот скрипт, чтобы в основной фрейм грузилась не страничка по-умолчанию (content.htm), а наша внутренняя страничка. Но сначала придётся из адресной строки узнать, какую же страничку грузить.

Для обработки переменных, передаваемых в адресной строке, JavaScript нам предоставляет свойство search объекта location (право, очень удобный объект - без его помощи мы не смогли бы сделать то, что делаем :). Данное свойство хранит в себе адрес строки запроса, которая располагается сразу после знака '?'. Т.е. оно содержит адрес нашей внутренней странички (!). Но использовать это значение пока рано, т.к. строка запроса содержит и начальный знак вопроса. Поэтому для начала нам необходимо его отрезать:

var string = location.search;
var current_page=string.substring (1, string.length);

А теперь я приведу полный, модифицированный вариант скрипта:

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
if (location.search == "") {
document.write('<frame src=\"content.htm\" name=\"content\">');
} else {
document.write('<frame src=\"' + current_page + '\" name=\"content\">');
}
document.write('</frameset>');
//-->
</script>

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

document.write('<frame src=\"' + current_page + '\" name=\"content\">');

мы также отслеживаем случай загрузки индексного файла, когда ему не передан адрес внутренней странички (например, пользователь сразу набрал главный адрес сайта), и в этом случае грузим обычную страничку по-умолчанию (content.htm).

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

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

Внимательный читатель может заметить, что я использую не классическую форму передачи параметров (т.е. value=param), а сокращённую - сразу передавая нужное значение. Это возможно в простых скриптах и несколько облегчает их написание. Тем не менее, такой способ не позволяет нам передавать более одной переменной.

Основной индексный файл мы формируем при помощи конструкций JavaScript. А что будет, если на сайт зайдёт человек с броузером, который не поддерживает JavaScript? В этом случае мы вообще ничего не увидим, ведь сформировать фреймы будет некому. Так что для разрешения этой проблемы мы воспользуемся тегами <noscript></noscript>, внутри которых разместим обычное описание фреймов.

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

<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
if (location.search == "") {
document.write('<frame src=\"content.htm\" name=\"content\">');
} else {
document.write('<frame src=\"' + current_page + '\" name=\"content\">');
}
document.write('</frameset>');

//-->
</script>

<noscript>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>

</noscript>

</html>

Как поставить ссылку на внутреннюю страничку?

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

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

А второй способ - опять же использование JavaScript, но он, к сожалению, ограничен только версиями Internet Explorer выше 5.0. По крайней мере, пока. Данный способ добавления странички в избранное я описывал раньше, поэтому не буду здесь повторяться. Те, кого это заинтересовало, могут прочитать об этом вот здесь - Дата модификации документа/

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

Ссылка: http://www.cherry-design.spb.ru/articles/article_30.htm


Мир скучен, когда пишешь мир расцветает.
 
АкимычьДата: Воскресенье, 06.03.2011, 12:46 | Сообщение # 2
Мудрый Правитель
Группа: Администратор
Сообщений: 701
Награды: 17
Репутация: 24
Статус: Offline
Дата модификации документа

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

Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:

<script language="JavaScript">
<!--

document.write ("Дата последней модификации: " + document.lastModified);

//-->
</script>

Дата выводится в формате, соответствующем региональным настройкам компьютера, а это не всегда нам подходит. Но, несколько усложнив скрипт, мы сможем выводить дату практически в любом формате. Для этого достаточно печатать дату модификации документа не сразу, а предварительно разобрав её на составляющие. Сделать это можно при помощи создания объекта Date, передав ему в качестве параметра document.lastModified:

<script language="JavaScript">
<!--

LastDate = new Date(document.lastModified);

LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год

LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));

document.write ("Дата последней модификации: ", LastDay, "/", LastMonth+1, "/", LastYear);

//-->
</script>

Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведённом скрипте, который печатает дату в формате, соответствующем региональным настройкам России (ДД/ММ/ГГГГ).

Обратите внимание на два обстоятельства. Первое - это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth() возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).

А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear() в версии JavaScript от Microsoft возвращает нам год в виде четырёх цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех :), которые следует рассматривать как смещение от 1900 года.

Решение проблемы осуществляется достаточно просто - вначале мы берём остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить, к какому веку относятся эти две цифры - для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе - старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года :), когда эта уловка уже наверняка потеряет смысл.

Как сделать страничку стартовой?

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

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

К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:

<p><a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.yoursite.com/'); return false;">Сделать стартовой страницей</a></p>

Желающие могут сделать стартовой, например, мою страничку. ;-)

Добавление странички в "Избранное"

Подобно предыдущему скрипту, этот приём также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.

Размещая на видном месте ссылку на этот скрипт, мы позволяем пользователю при помощи одного щелчка добавить наш сайт в папку "Избранное". А сам скрипт выглядит следующим образом:

<p><a href="#" onClick="window.external.addFavorite('http://www.yoursite.com/', 'Description'); return false;">Добавить сайт в Избранное</a></p>

Желаете проверить? Нажмите здесь, и Вы сможете добавить в избранное мой сайт. :-)

Распечатка страницы из кода

Иногда требуется распечатать страничку, причём сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но всё не так плохо. На самом деле в Netscape Navigator для этого есть даже встроенный механизм. Достаточно просто вызвать метод window.print()

А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.

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

<script language="JavaScript">
<!--

var browser_name = navigator.appName;

function printit() {

if (browser_name == "Netscape") {
window.print();
} else {
var WebBrowser = '<object id="WebBrowser1" width=0 height=0
classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>';
document.body.insertAdjacentHTML('beforeEnd', WebBrowser);
WebBrowser1.ExecWB(6, 2);
}
}

//-->
</script>

Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:

<a href="#" onClick="printit();">Распечатать статью</a>

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


Мир скучен, когда пишешь мир расцветает.
 
АкимычьДата: Воскресенье, 06.03.2011, 12:49 | Сообщение # 3
Мудрый Правитель
Группа: Администратор
Сообщений: 701
Награды: 17
Репутация: 24
Статус: Offline
Общие соображения и HTML-код формы

Проверка формы, пожалуй, одна из наиболее часто применяемых функций. Редкий сайт обходится без какой-либо её вариации, будь то простая отсылка сообщения на e-mail или форма сложного заказа в интернет-магазине. Польза скрипта очевидна - проверить, что пользователь заполнил все нужные поля перед отправкой и тем самым избежать проблемы получения пустых писем или отсутствия контактной информации отправителя.

Предположим, что форма у нас уже есть и состоит из следующих 4-х полей: имя, электронный адрес, тема сообщения и непосредственно само сообщение. Соответствующий html-код для такой формы будет выглядеть примерно так:

<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();">

Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>

<input type="submit" value="Отправить">
<input type="reset" value="Очистить">

</form>

* - необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге <form> мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы SendForm().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

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

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

Функция проверки формы перед отправкой

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

Для начала напишем общую обвязку функции:

<script language="JavaScript">
<!--

function SendForm() {

// Здесь мы разместим код функции

return true;
}

//-->

</script>

Применённый нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

<script language="JavaScript">
<!--

function SendForm() {

if (document.forms[0].name.value == "") {
alert('Пожалуйста, введите Ваше имя');
document.forms[0].name.focus();
return false
}

if (document.forms[0].email.value == "") {
alert('Пожалуйста, введите электронный адрес');
document.forms[0].email.focus();
return false
}

return true;
}

//-->

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

* сначала проверяем, что данное поле является пустым. И если это так, то
* выводим сообщение об ошибке при помощи встроенной функции alert(). После того, как пользователь закроет окошко, мы
* воспользуемся методом focus() и переместим курсор на ошибочное поле. И, наконец,
* выйдем из функции, установив флажок успешности выполнения в false.

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

Универсальная функция проверки

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

Первым делом мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

required = new Array("name", "email");

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

Дополнительно к вышеописанному массиву мы добавим ещё один, который будет содержать текст ошибки для конкретного поля:

required_show = new Array("Ваше имя", "электронный адрес");

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введён".

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

<script language="JavaScript">
<!--

required = new Array("name", "email");
required_show = new Array("Ваше имя", "электронный адрес");

function SendForm () {

var i, j;

for(j=0; j<required.length; j++) {
for (i=0; i<document.forms[0].length; i++) {
if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) {
alert('Пожалуйста, введите ' + required_show[j]);
document.forms[0].elements[i].focus();
return false;
}
}
}

return true;
}

//-->

</script>

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

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


Мир скучен, когда пишешь мир расцветает.
 
АкимычьДата: Воскресенье, 06.03.2011, 12:50 | Сообщение # 4
Мудрый Правитель
Группа: Администратор
Сообщений: 701
Награды: 17
Репутация: 24
Статус: Offline
Нужно ли использовать фреймы?

Для начала давайте решим, для чего используются фреймы. Они появились ещё во второй версии Netscape Navigator-а и предназначались для облегчения навигации при создании страничек (так тогда казалось).

Техника использования фреймов заключается в том, что все окно броузера делится на несколько областей, в каждую из которых можно загрузить независимую страничку. Кроме этого, был введён механизм, позволяющий управлять любой страничкой из любого окна. Например, можно в одном окне организовать меню сайта, а в другом показывать его содержимое. Причём, щелчок по ссылке в окне меню открывал страничку совсем в другом окне. Такое построение сайта встречается чаще всего, но ничто не мешает нам сделать не два фрейма, а, например, 3, 4, 5 и т.д. Но пока не будем торопиться с обсуждением механизма работы фреймов, а поговорим об их недостатках и уместности применения.

Основные недостатки сайта, построенного с применением фреймов, следующие:

* странички сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида <a href="">...</a> и поисковые роботы, естественно, не могут попасть на внутренние странички. Приходится прикладывать дополнительные усилия, чтобы всё-же осуществить это. В частности, вводить вышеупомянутые ссылки именно для роботов;

* в случае попадания не на первую страничку сайта не существует "официального" способа перейти на первую страничку сайта - приходится вручную редактировать путь в адресной строке броузера;

* ввиду того, что фреймовая структура сайта придаёт ему достаточно узнаваемый вид, большинство подобных страничек выглядит достаточно однообразно;

* невозможно поставить закладку на внутреннюю страничку сайта. А это уже серьёзно! Представьте, что Вы наткнулись на очень интересную статью и желаете, например, поместить ссылку в свою коллекцию или послать другу её адрес. Так вот, ни то, ни другое Вы сделать не сможете - фреймы скрывают истинный адрес странички. Ради справедливости нужно сказать, что этот адрес всё-же можно узнать, открывая ссылку в новом окне;

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

В каких случаях уместно применять фреймы?

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

Тем не менее, в каких случаях оправданно их применение?

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

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

Механизм работы фреймов

Если всё-же решено применять фреймы, то давайте разберёмся с тем, как правильно писать HTML-код и работать с ними.

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

index.htm - страничка-контейнер

<html>
<head>
<title>Frame page</title>
</head>

<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>

<noframes>
<p>Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.</p>
</noframes>

</html>

И сразу напишем код для страничек, входящих в фреймовую структуру:

left.htm - страничка, содержащая меню

<html>
<head>
<title>Menu page</title>
</head>

<body>

<a href="topic_1.htm" target="content">topic #1</a><br>
<a href="topic_2.htm" target="content">topic #2</a><br>
<a href="topic_3.htm" target="content">topic #3</a><br>
<a href="topic_4.htm" target="content">topic #4</a><br>

</body>
</html>

right.htm - страничка, в которой будут отображаться основные статьи сайта

<html>
<head>
<title>Content page</title>
</head>

<body>

<p>Эта страничка будет грузиться по-умолчанию, и
на ней обычно размещают приветственный текст.</p>

</body>
</html>

Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> мы используем тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>. Давайте-ка подробнее разберём наш пример:

<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>

В параметре тега <frameset> мы определяем, что страничка будет разделена по-вертикали и состоять из двух колонок (если нам нужно разделить окно по-горизонтали, то тогда вместо параметра cols нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделённые запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звёздочки, обозначающей - "всё оставшееся пространство". Вот примеры определения фреймов:

<frameset cols="200,*"> - 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей;

<frameset rows="25%, 50%, 25%"> - 3 строчки, высоты которых определены в процентах от высоты окна броузера;

<frameset rows="*, 2* ,*"> - то же самое, что и предыдущая строчка, но записанная при помощи звёздочек. Цифра перед звёздочкой указывает количество повторов. Ширина одной звёздочки определяется как среднее арифметическое между всеми звёздочками в строке с учетом коэффициентов перед ними.

Как я уже сказал выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:

<frame src="left.htm" name="menu" scrolling=no noresize>

* src - URL странички, которая будет помещена во фрейм;
* name - имя странички, по которому к ней можно будет обращаться;
* scrolling, noresize, ... - параметры, управляющие поведением фрейма, - возможностью изменять пользователем ширину фрейма и управлять появлением полосы прокрутки в случае, если содержимое странички не помещается на экране.

Обратите внимание на параметр name - он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился ещё один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

<a href="topic_1.htm" target="content">topic #1</a>

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

Кроме имён, определяемых непосредственно нами, есть часть уже определённых, и наиболее важные из них следующие:

* _blank - открывает ссылку в новом окне;
* _top - открывает ссылку на всё окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во всё окно;
* _parent - открывает ссылку в родительском окне.

До сих пор в качестве элементов контейнера <frameset> мы использовали простые теги <frame>, но мы также можем использовать и контейнер <frameset>. В этом случае мы получаем т.н. вложенные фреймы. Вот пример:

<frameset rows="40,*">
<frame src="up.htm" name="logo" scrolling=no noresize>
<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>
</frameset>

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

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

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

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

Кстати, рамку фрейма можно убрать, указав параметр frameborder=0.

И ещё одно! Для броузеров, которые не понимают фреймов, есть специальный тег <noframes>. Как раз он и определяет, что увидит пользователь с броузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, подобную той, что написал я, либо указывают список основных разделов сайта, чтобы человек всё-же смог просмотреть странички.


Мир скучен, когда пишешь мир расцветает.
 
АкимычьДата: Воскресенье, 06.03.2011, 12:52 | Сообщение # 5
Мудрый Правитель
Группа: Администратор
Сообщений: 701
Награды: 17
Репутация: 24
Статус: Offline
Для чего это нужно?

Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.

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


Условия задачи и ограничения

А теперь, давайте, более подробно сформулируем условия задачи и введём ряд ограничений, которые упростят программирование. Баннерная система должна выполнять следующие функции:

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

Накладываем на эти условия некоторые ограничения:

* баннеры будут фиксированного размера и храниться в формате GIF или JPEG;
* на страничке мы будем одновременно показывать четыре баннера.

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

* имя файла;
* альтернативный текст;
* адрес странички, на которую ссылается баннер.

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

<script language="JavaScript" src="banners.js"></script>

А вот так, будет выглядеть содержимое файла banners.js

var banners = new Array(

"pic-01.gif", "Text #1", "http://www.link1.com/",
"pic-02.gif", "Text #2", "http://www.link2.com/",
"pic-03.gif", "Text #3", "http://www.link3.com/",
"pic-04.gif", "Text #4", "http://www.link4.com/",
"pic-05.gif", "Text #5", "http://www.link5.com/",
"pic-06.gif", "Text #6", "http://www.link6.com/",
"pic-07.gif", "Text #7", "http://www.link7.com/",
"pic-08.gif", "Text #8", "http://www.link8.com/",
"pic-09.gif", "Text #9", "http://www.link9.com/",
"pic-10.gif", "Text #10", "http://www.link10.com/"
)

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

Программная часть

Вот мы и добрались до программирования. И, сначала, разберёмся с некоторыми моментами.

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

n = Math.floor(Math.random()*(banners.length/3));

Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач мы организуем ещё один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведён ниже:

var i, j;
var flag; // Флажок, используемый для проверки совпадения
var banners_show = 4; // Число показываемых на страничке баннеров

var rand = new Array(banners_show);

for (i=0; i<banners_show; i++) {
do {
flag=0;
n = Math.floor(Math.random()*(banners.length/3));
for (j=0; j<i; j++) {
if (n == rand[j]) {
flag=1;
}
}
} while (flag);
rand[i] = n;
}

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

Для отрисовки баннеров мы напишем простую функцию и будем передавать ей в качестве параметра порядковый номер баннера на страничке. Используя этот номер, мы читаем из массива rand[] случайное число для конкретного баннера, и уже используя его, находим все необходимые для отрисовки данные:

function Show_Banner(number) {

n=rand[number-1];

document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' + banners[n*3] + '" border=0 width=' + banner_width + ' height=' + banner_height + ' alt="' + banners[n*3+1] + '"></a>');

}

Вот, практически, и всё, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно только не забыть, что код JavaScript отделяется от html тегами <script></script>:

<script>
<!--
Show_Banner(1);
//-->
</script>

.......

<script>
<!--
Show_Banner(4);
//-->
</script>

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


Мир скучен, когда пишешь мир расцветает.
 
Клуб писателей и поэтов » Администрация » Технические вопросы » Статьи по Web-дизайну.
Страница 1 из 11
Поиск: