Третья часть книги, как видно из ее названия, посвящена практической работе с компьютером.
Первые шесть глав рассказывают о создании Интернет-сайтов. Из них вы узнаете основы языков HTML, PHP и Javascript, познакомитесь с таблицами стилей и Dynamic HTML. В главе 18 описывается удобный инструмент сайтостроения — Script Editor из пакета Microsoft Office, а в главе 22 приводится подборка интересных приемов web-дизайна, делающих сайт красивее и удобнее.
Набор тем, освещаемых в остальных главах этой части, заинтересует практически каждого, кому небезразличны компьютерные технологии. Из них вы узнаете, как защититься от воровства паролей и выявить источник нежелательных писем, как на одном жестком диске умещаются сразу несколько операционных систем и какие секреты таит в себе, казалось бы, такой известный текстовый редактор Microsoft Word. И даже если непосредственно в вашей деятельности информация этих глав не потребуется, все равно ее изучение подарит вам несколько приятных минут познания нового.
Из мира Интернета
· Сайт "Песни Русского Сопротивления", расположенный по адресу www.harchikov.ru — первый в RuNet'е крупный музыкальный проект патриотической направленности. На нем представлены:
1. Альбомы Александра Харчикова — известного исполнителя патриотических песен, композитора и поэта, неоднократного лауреата конкурса "Песни Сопротивления".
2. Песни в исполнении Ивана Баранова, победителя конкурса "Песни Сопротивления" в 1999 и 2001 годах.
3. Альбом "Посторонним вход запрещен" группы "28 панфиловцев". Основные темы альбома — Родина, Долг, Воинская честь.
Все песни — в высококачественной оцифровке формата MP3 и доступны для свободного скачивания. Среди произведений — как известные, например, "Наша родина — Советский Союз", "Русский не сдается", так и малознакомые широкому кругу слушателей.
· На сайте "Портал советской музыки", расположенном по адресу http://sovmusic.narod.ru, представлены MP3-записи песен советского времени, в основном 30-40-х годов. Встречаются раритетные записи, например, первая версия гимна СССР, составленная в 1938 году.
Полезный совет
Когда вы работаете на клавиатуре или с мышью, обязательно проследите, чтобы ваши локти располагались при этом на твердой поверхности на уровне клавиатуры и мыши. Иначе боль и усталость в руках будут обеспечены.
Если провести массовый опрос о том, какое технологическое новшество за последние десять лет буквально преобразило мир, то наверняка ответом будет одно слово — Интернет. И действительно, развившаяся буквально за последние даже не десять, а шесть-семь лет глобальная всемирная сеть уже прочно вошла в жизнь многих людей и стала быстрым, удобным и универсальным источником практически любой информации по очень многим отраслям технологии и культуры. Количество источников информации в этой Сети растет в геометрической прогрессии: на настоящий момент обьем текстовой информации только в ее русской части составляет около тысячи гигабайт, в то время как еще даже пять лет назад российская часть Интернета была несоизмеримо меньше.
Интернет — это прекрасное средство для обмена информацией между людьми. Тысячу лет назад для того, чтобы сообщить другому человеку какие-либо ценные данные, приходилось либо говорить их лично из уст в уста, либо писать от руки и передавать рукопись. Естественно, что такой способ распространения информации был медленным, сложным и дорогим. Изобретение книгопечатания несколько облегчило этот процесс, но все равно еще долгое время носители информации были весьма дороги, а охват ими населения мал.
Появление газет, радио, а потом и телевидения позволило доставлять информацию относительно дешевым способом до большого количества людей. Однако то, какая информация распространяется с помощью этих средств, зависит от тех, кто с ними работает, — издателей газет, редакторов радиопередач, сотрудников телевидения. Отнюдь не всегда, особенно в последнее десятилетие, они распространяют достоверную и полезную информацию. Зачастую телевидение, газеты служат интересам своих хозяев, среди которых попадаются и преступники.
Интернет же свободен от многих недостатков остальных средств распространения информации. Получение сведений из этой Сети практически не требует затрат материальных и энергетических ресурсов и обходится очень дешево. Помещать информацию в Сеть может каждый желающий. В Интернете трудно вести целенаправленные пропагандистские мероприятия или использовать манипуляцию сознанием, — создать ресурс с альтернативной информацией и распространять ее можно за весьма короткое время.
В связи со всем этим использование Интернета в последнее время стало весьма активным. Количество сайтов в Сети растет очень быстро. Каждый, у кого есть какая-либо полезная информация, может легко донести ее до тех, кому она нужна. Возникает даже противоположная проблема — поиска нужной информации среди всей ее массы, но она успешно решается с помощью специализированных поисковых систем.
Эта глава книги, а также несколько последующих посвящены созданию сайтов — ресурсов сети Интернет, на которых может быть размещена информация. Вы узнаете о том, как сайт должен быть устроен, как разместить его в Сети и прорекламировать. Вы также встретитесь с полезными советами по созданию сайтов, которые помогут вам сделать свой сайт красивее и удобнее, узнаете, как обойти некоторые "подводные камни" в этом деле. Рассчитана эта часть, да и вся книга, на пользователя компьютера, который знаком с информационными технологиями лишь в общих чертах, но способен самостоятельно учиться и исследовать. Но даже если вы уже знаете многое о том, что такое Интернет и как делать сайты, вы наверняка найдете в предстоящих главах какие-нибудь сведения или советы, которые были до сих пор вам неизвестны.
С чего начать?
Первое, о чем должен задуматься тот, кто собрался создавать свое представительство в Интернет, это вопрос: а что, собственно, я могу поместить в Сеть? Что я дам тем самым пользователям? К сожалению, в последнее время стало появляться немало сайтов, не содержащих действительно полезной информации. На них размещается, к примеру, фотография автора сайта, пара слов о том, что он любит из еды, музыки и видеофильмов и ссылки на два-три общеизвестных ресурса.[43] Ясно, что никому из пользователей Сети такой «источник» не нужен, — там ведь обычно нет даже резюме со списком професиональных качеств автора. Причем сами авторы обычно бывают весьма активными и с непонятными целями регистрируют свои «творения» во многих поисковых системах.
Желающим последовать примеру авторов этих "домашних web-страничек" следует помнить, что своей цели — "прославления имени" владельца сайта — они не достигают. Пользователь Сети, попавший на такую страничку в поисках нужной ему информации, будет очень раздражен, найдя вместо того, чего он желает, фотографию Васи Пупкина и рассказ о том, как тот любит пепси-колу и мультики. Вряд ли после этого имя Васи станет вызывать положительные эмоции. А вот вред эти сайты приносят значительный — они фактически засоряют Сеть, так как, во-первых, занимают места в поисковых системах, скрывая под своей массой ссылки на действительно нужные ресурсы, а, во-вторых, занимают хорошие имена ресурсов. Безусловно, вряд ли автор такого сайта раскошелится на платный хостинг и доменное имя второго уровня, но вот в системах бесплатного размещения сайтов эти авторы занимают весьма привлекательные имена, по сути не давая ничего пользователям. А те, кто собирается поместить в Сеть то, что нужно очень многим, увы, уже не могут создать сайт с красивым именем. Поэтому "сайты Васи Пупкина" пользуются заслуженным отвращением у большинства пользователей, и те их авторы, которые рассчитывают на поток предложений о работе, признаний в уважении и так далее, желаемого не получат никогда.
Таким образом, самым первым, самым основным вопросом, который должен себе задать любой потенциальный автор сайта — это вопрос о том, что он может предложить своим посетителям. Если на сайте будет помещена программа автора или его интересная книга, — тогда вопросов нет. Естественно, нет вопросов и тогда, когда сайт является представительством какой-нибудь фирмы в Сети, особенно если на нем присутствует возможность заказа товаров через Сеть. Если сайт предназначен для помощи другим пользователям Интернета в их работе или содержит новости, полезную информацию, то это тоже неплохо.
Но допустим, что интересное содержание для сайта готово. Например, набор полезных статей про экономическое положение страны или про разработку программ. Теперь необходимо создать сам сайт.
* * *
Основа Интернета, те «кирпичики», из которых состоит все информационное наполнение Сети — это web-страницы. Возникает закономерный вопрос: а что же это такое — web-страница, чем она отличается от любого другого документа вроде файла в формате Word или Rtf? Web-страница — это файл в особом формате — HTML (что переводится как HyperText Markup Language, то есть язык гипертекстовой разметки).[44] Подобный файл характеризуется тем, что его содержимое представляет собой текст, шрифт, размер, расположение, поведение которого определяется специальными управляющими комендами — тэгами. Кроме того, в этом формате допустима такая вещь, как гиперссылки — указатели на другие документы для быстрого перехода к ним, кроме того, возможно размещение на web-странице графических обьектов.
Слово «site» означает «место». Место в сети Интернет. Сайтом называется набор web-страниц, связанных между собой перекрестными ссылками и расположенный под одним общим корневым именем. Например, http://antorlov.chat.ru. На этом сайте расположены web-страницы: verstka.htm, urls.htm, имеющие соответственно адреса http://antorlov.chat.ru/verstka.htm и http://antorlov.chat.ru/urls.htm. Но если говорить по сути, то страницы сайта обьединяет не столько единство места или имени, сколько единство содержания и возможность перехода с одной его страницы на другую. Сайт — это прежде всего информационный ресурс, и основное обьединяющее его начало — информация, находящаяся на нем.
Язык Интернета
Для просмотра документов в сети Интернет необходима специальная программа — браузер (browser, в переводе с английского — обозреватель). Эта программа считывает из Сети нужный документ и отображает его на экране в соответствии с расположением тэгов в документе. То есть тэги — это как бы директивы браузеру о том, как нужно отображать документ. Все современные браузеры поддерживают стандартный набор тэгов, входящий в утвержденный международными соглашениями документ — спецификацию языка HTML.
В настоящее время исходный язык HTML очень серьезно усовершенствован. Кроме того, появились технологии, дающие новые возможности, такие, как JavaScript, VBScript, Dynamic HTML, каскадные таблицы стилей и др. Но основа осталась та же — стандартные тэги, которые присутствуют на всех web-страницах. Поэтому для начала стоит посвятить несколько страниц книги основам языка Интернета, а потом уже рассказать и о новых технологиях.
Полный список тэгов HTML можно найти в спецификациях HTML. Достаточно большая их часть предназначена для отображения текста специальным образом (мигающим и др.) и используется редко. У многих тэгов есть свойства — специальные параметры, которые указываются в тэге и придают ему определенное значение.
Все тэги HTML заключаются в угловые скобки: "<тэг>". Это и есть признак тэга — браузер интерпретирует то, что заключено в угловые скобки, как директивы отображения страницы, если это возможно, и не отображает их самих на экране.[45] Регистр букв в наименовании тэга значения не имеет.
Практически все тэги являются парными. Это означает, что каждый тэг имеет свою "зону действия", в пределах которой он определяет вид документа. Конец зоны действия тэга обозначается им же, но без параметров и с прибавлением перед тэгом обратного слэша "/", — закрывающим тэгом. Кроме того, для тэгов, обозначающих элементы web-страницы, закрывающий тэг показывает их границы. Например, абзац текста должен иметь вид "
…текст…
".Сейчас уже вышло много книг по HTML, и они есть практически в любом отделе компьютерной литературы. Поэтому не стоит описывать здесь стандарт HTML слишком подробно, так как более развернутые описания есть в специальных изданиях. Кроме того, о назначении каждого тэга нетрудно догадаться самому, проследив соответствие cодержания Web-страницы и ее исходного текста.
Вот небольшой список наиболее употребительных тэгов. У некоторых тэгов указаны параметры, влияющие на их действие, а также приведены примеры использования тэгов и их параметров.
Служебные тэги без параметров
Тэг Значение
— Начало Web-страницы.
— Различная служебная информация.[4] В тексте, находящемся вне этих тэгов, символы конца абзаца, разрыва строк, группы пробелов, табуляция при отображении игнорируются.
Для того, чтобы какой-либо элемент формы мог принимать участие в передаче данных (например, чтобы его значение могло быть послано по почте), он должен иметь свое уникальное имя — в его тэге долен быть параметр "name="Имя"". Если такого параметра нет, то информация данного элемента формы никуда передана быть не может. Пример использования формы для передачи данных смотрите в главах 19 и 22.
В вышеприведенных таблицах перечислены лишь самые основные тэги HTML. Существует множество других тэгов, дающих возможность более разнообразного оформления текста. Но подробный рассказ о них выходит за рамки этой книги, как потому, что они требуются редко, так и потому, что информацию о них можно найти в справочниках по HTML.
Неплохие подборки книг по компьютерным технологиям, в частности, по HTML и разработке web-сайтов можно найти в специальных электронных библиотеках, например, по адресам http://rusdoc.df.ru, http://infocity.kiev.ua.
Скрипты
Скрипты или сценарии — это программы, предназначенные для работы с браузером. Все сценарии можно разделить на две большие группы: исполняющиеся на том компьютере, который загружает данные из Интернета — на клиентском компьютере, и исполняющиеся на компьютере, эти данные предоставляющем — на сервере.
Сценарии, исполняющиеся на клиентском компьютере, встраиваются в загружаемые web-страницы их разработчиками и выполняются браузером клиентского компьютера. Для того, чтобы они могли быть выполнены, браузер должен уметь их интерпретировать и выполнять — поддерживать язык, на котором скрипты написаны.
На настоящее время существуют два языка для написания таких сценариев — JavaScript и VBScript (от Visual Basic Script), причем первый из них поддерживается практически всеми современными моделами браузеров — Microsoft Internet Explorer, Netscape Navigator, Opera, Ariadna, а второй — только Microsoft Internet Explorer (начиная с версии 4.0). Поэтому использование JavaScript предпочтительнее, но этот язык несколько сложнее по своему синтаксису и не позволяет реализовывать некоторые возможности, которые доступны VBScript. Однако, поскольку доля пользователей браузера Microsoft Internet Explorer сейчас составляет порядка восьмидесяти-девяноста процентов от всех пользователей сети Интернет, то VBScript можно широко использовать, а для пользователей браузеров, не поддерживающих этот язык, сделать специальный, упрощенный вариант сайта.
Синтаксис языков JavaScript и VBScript подробно описан в специальной литературе по программированию для Интернета, которая широко представлена в электронных библиотеках вроде тех, чьи адреса приводились выше. Существуют сайты, посвященные этим языкам, библиотеки сценариев, которые можно найти с помощью поисковых систем. Неплохим методом изучения JavaScript и VBScript является исследование страниц со скриптами, коих сейчас в Интернете великое множество.
Наиболее общие и основные понятия JavaScript и VBScript таковы. Скрипт, располагаемый на странице, заключается в тэги "" и "" — без этого он будет интерпретирован как простой текст и отображен таким в браузере. Для того, чтобы скрыть текст скрипта от браузеров, не понимающих тэг "", после него, но перед началом текста скрипта, можно встроить тэг комментария: "", закрыв его перед тэгом "" тэгом "->". Тогда браузер, поддерживающий скрипты, скрипт выполнит, а не поддерживающий — полностью проигнорирует.
Если скрипт написан на языке VBScript, то в его тэге должно стоять указание на это вида "". То же рекомендуется делать и для скриптов на JavaScript: "", однако это не обязательно.
Текст скрипта может находиться не на странице, а в отдельном файле с расширением. js (для сценариев на JavaScript) или. vbs (для сценариев на VBScript), что может облегчить труд по обновлению сайта, если обновляемой частью являются именно скрипты. К сожалению, увеличить скорость загрузки страницы путем вынесения скриптов в отдельные файлы не удастся — они все равно будут загружены не при их вызове, а при загрузке страницы. Для такого включения текста скрипта из отдельного файла следует использовать тэги "" или "".
Сценарии на JavaScript и VBScript могут исполняться как автоматически во время загрузки страницы, так и при каких-либо действиях пользователя. Конкретный способ выполнения зависит от текста скрипта. Сценарий, выполняемый автоматически, состоит из простого набора команд, без каких-либо заголовков и окончаний. Например, сценарий
if (navigator.appName == "Microsoft Internet Explorer")
document.write ("
Вы используете Microsoft Internet Explorer
");будет выполнен сразу после загрузки, и в результате его выполнения в загружаемом документе в том месте страницы, где располагается текст этого скрипта, появится строка "Вы используете Microsoft Internet Explorer". Если необходимо, чтобы скрипт был выполнен до загрузки страницы, рекомендуется поместить его в раздел "", однако тогда функции работы с текстом страницы скрипту будут недоступны — ведь он будет выполняться до того, как браузер его получит с сервера.
Для того, чтобы сценарий выполнялся при наступлении определенных условий (нажатии пользователя на кнопку, окончании загрузки страницы и др.), необходимо оформить его как функцию. Это значит, что тогда у скрипта должен появиться заголовок и окончание. Для JavaScript заголовком является оператор "function имя_скрипта()", а весь текст скрипта заключается в фигурные скобки:
function skript()
{
…Команды сценария…
}
В VBScript заголовок — фраза "Sub имя_скрипта()", а после текста скрипта должна следовать команда "End Sub":
Sub runscr()
…Команды сценария…
End Sub
Сценарий, оформленный таким образом, имеет имя — то, что стоит после слов "function" или "Sub". По этому имени его можно вызывать из любого места страницы.
Вызов скрипта — это просто команда его выполнить.
Например, при нажатии кнопки "" будет выполнен скрипт с именем "startskript. Вызываемый скрипт может находиться в любом месте страницы, однако настоятельно рекомендуется, чтобы он располагался выше места его вызова, — иначе при неполностью загруженной странице может быть неприятная ситуация, когда при вызове незагруженного скрипта браузер выдаст ошибку.
Сценарий может вызываться при происхождении какого-либо события. Следующий пример показывает, как вызвать скрипт на языке Javascript при полной загрузке страницы:
…Команды скрипта…
В языке VBScript подобный вызов делается несколько по-другому:
Sub window_onload()
…Команды скрипта…
End Sub
"Onload" — это событие, возникающее при окончании загрузки страницы. Существуют и другие события для обьекта "window" (то есть — окна открытой web-страницы). Например, "onresize" — при изменении размеров окна. Полные списки событий и стандартных обьектов (то есть имеющихся на всех страницах) можно найти в специальной литературе по программированию для Web.
Другой тип скриптов, о котором говорилось в начале этого раздела — это сценарии, выполняющиеся на сервере (так называемые CGI-скрипты). CGI (что расшифровывается как Common Gateway Interface: общий способ обмена данными) — это не язык, а принцип действия таких скриптов: при их выполнении берутся данные от браузера пользователя и обрабатываются на сервере. С помощью CGI-скриптов можно решить самые разнообразные задачи: осуществление поиска по сайту, работу с базами данных, динамическую генерацию страниц с нужным пользователю содержанием.
Примером CGI-сценариев являются программы на языке PHP, общей характеристике и основам синтаксиса которого посвящена глава 19 этой книги.
В web-программировании иногда используются еще и такие структуры, как Java-апплеты. Java — это специальный язык программирования, отличающийся тем, что программы, написанные на нем, могут выполняться на компьютерах любых платформ: как на IBM PC, так и на Macintosh, и на других системах. По своему синтаксису он похож на Cи. Java-апплет — это программа на языке Java, переведенная в так называемый «пи-код», то есть в двоичный код, могущий быть выполненным специальным интерпретатором (так называемой "виртуальной машиной Java"). Для различных платформ компьютеров существуют свои версии интерпретаторов Java, а сам язык Java одинаков для всех платформ. Поэтому один и тот же Java-апплет может работать на любом типе компьютеров, для которого создана "виртуальная машина".
Java-апплет может быть вставлен в web-страницу. Создаются апплеты с помощью специальных программных пакетов, таких, например, как Java Developer Kit. С помощью Java-апплетов можно добиться интересных визуальных эффектов на странице. Но следует помнить, что их загрузка и выполнение очень сильно замедляют работу компьютера посетителя сайта с апплетами. Поэтому Java-апплеты стоит использовать лишь в очень редких случаях, например, для внедрения в страницу сложного калькулятора научных расчетов. Во всех остальных случаях рекомендуется воздерживаться от их применения. Большинство возможностей Java-апплетов может быть реализовано средствами JavaScript и VBScript, а также Dynamic HTML.[46]
Таблицы стилей
С помощью стандартных тэгов HTML "", "" и.т.д. можно задавать тексту web-страницы определенное оформление. Эти тэги поддерживаются всеми существующими в настоящее время браузерами. У тэга "" могут иметься параметры: size, color, face. Однако в случае, когда на странице имеется большое количество таких тэгов, то ее размер серьезно возрастает. Кроме того, становится сложным процесс изменения дизайна страницы: так, для того, чтобы заменить один цвет шрифта на другой, приходится просматривать весь документ и заменять значение параметра color во всем тексте. Если несколько страниц сайта были обьединены единым дизайном текста, то при попытке изменить хотя бы один параметр придется перерабатывать все эти страницы.
Возникает закономерное предложение: а почему бы не отделить описание форматирования текста от самого текста? Чтобы информация о внешнем виде, свойствах всех тэгов одного типа находилась в каком-то одном месте. А еще лучше — чтобы она могла быть доступной не с одной web-страницы, а сразу с нескольких, чтобы не было проблем с единообразным оформлением сайта. Для реализации такой идеи были придуманы так называемые "каскадные таблицы стилей" — CSS.
Каскадные таблицы стилей — это определенный способ записи информации об оформлении web-страницы, как бы некий отдельный язык разметки web-документов. Все современные браузеры его поддерживают, начиная с четвертых версий Microsoft Internet Explorer и Netscape Navigator.
При разработке стандарта CSS, помимо обеспечения разделения текста и описания его форматирования, в него еще было добавлено множество новых свойств, позволяющих сделать web-страницу более красивой и привлекательной. К примеру, появилась возможность задавать в пикселах отступы абзаца со всех четырех сторон, цветные и фигурные рамки вокруг фрагментов текста и даже вид курсора и всплывающую подсказку над каким-либо элементом. Поэтому, используя таблицы стилей, можно работать с гораздо большим количеством свойств и параметров, чем при использовании стандартных тэгов HTML.
Свойства, то есть указания об оформлении, при использовании CSS можно задавать любым обьектам страницы — абзацам, ссылкам, ячейкам таблицы, а также произвольным фрагментам страницы. Для этого в тэги всех таких обьектов помещается специальный параметр — class. Все обьекты web-страницы, имеющие одинаковое значение параметра class, считаются принадлежащими к одному и тому же классу оформления.
Под «классом» в программировании вообще и в CSS в частности понимается определенный тип данных или обьектов. Классы могут создаваться программистом самостоятельно. Например, можно выделить на web-странице различные фрагменты текста и обьявить с помощью указания параметра class, что все они должны иметь одни и те же определенные создателем web-страницы свойства. Стандартные обьекты web-страницы, такие, как абзацы, ссылки тоже могут принадлежать к какому-либо определенному классу, созданному автором web-страницы. Подробнее понятие класса разбиралось в первой части книги.
Оформление каждого класса и типа стандартных обьектов описывается в начале страницы в тэге "". Содержимое этого тэга и называется "таблицей стилей", и именно в нем располагается информация об оформлении различных элементов web-страницы. Желательно, чтобы таблица стилей помещалась в разделе "" web-страницы, хотя она может находиться и после тэга "" в любом месте web-страницы.
Вот пример таблицы стилей:
P{text-align: justify; color: "#000000"}
A: link {font-family: Arial; color: "#2f4f4f"}
A: visited {font-family: Arial; color: "#717171"}
A: active {font-family: Arial; color: "#d4aa00"}
A: hover {font-family: Arial; color: "#c39100"}
text1 {color: #113311; font-size: 12 px; font-weight: bold}
text2 {font-size: 12 px; font-weight: bold}
risun {height: 10; width: 20}
В ней задано оформление двум стандартным тэгам HTML — "" и "
" и трем классам обьектов — с именами text1, text2 и risun.
Если такую таблицу поместить на web-страницу, то весь текст, содержащийся в тэгах "
", будет выровнен по ширинеи окрашен в черный цвет (которому и соответствует указанный в таблице стилей номер #000000).
Для того, чтобы обеспечить такое же оформление страницы без использования таблицы стилей, пришлось бы в каждом тэге "
" указывать параметр align=justify, а после тэга перед текстом ставить указание на цвет шрифта: "". Помимо увеличения размера страницы и затруднения написания ее кода это привело бы еще и к невозможности быстро поменять цвет или выравнивание всех абзацев — пришлось бы править каждый тэг.
Запись о параметрах оформления стандартного тэга, содержащаяся в таблице стилей, при отображении страницы полностью эквивалентна указанию этих параметров именно в этом тэге. Поэтому если на странице, содержащей приведенную выше таблицу стилей, поставить тэг "
", то текст, оформленный тэгом "
", останется выровненным по ширине (так как такое сочетание будет эквивалентно записи "
"), а если после — "
Тэг "" (то есть гиперссылка) допускает четыре состояния: просто расположенная на странице — link, активная (то есть нажимаемая в данный момент) — active, посещенная — visited и "готовящаяся стать активной" (состояние при наведении курсора на ссылку) — hover. Все эти состояния можно описать по-отдельности в таблице стилей, как это и показано выше — например, обычная ссылка зеленого цвета, а при подведении к ней курсора становится желтой.
В вышеприведенной таблице описано еще три класса обьектов — text1, text2 и risun. Для того, чтобы использовать эти описания для обьектов на web-странице, необходимо указать принадлежность того или иного обьекта к определенному классу с помощью включения параметра class в тэг этого обьекта. Например, указание "
Для оформления как класса произвольных фрагментов страницы необходимо использовать тэг " ", поэтому его использование никак не повлияет на остальные параметры вида страницы, кроме тех, что определяются заданным в этом тэге классом. Допустимо задание свойств не только тексту, но и изображениям — например, если в странице с приведенной выше таблицей стилей присвоить класс risun изображению: " Если необходимо задать определенные свойства всего лишь одному элементу страницы, то необязательно выделять его в отдельный класс или создавать ради него таблицу стилей. Можно просто указать нужное свойство в тэге этого элемента с помощью параметра style, например, задает отступ сверху в 140 пикселей только для абзаца, в тэге которого указано это свойство. Параметр style, указанный непосредственно в тэге, имеет приоритет перед параметрами в таблице стилей. Так, текст, содержащийся в тэге " ", будет выровнен по центру независимо от того, какое выравнивание было задано в таблице стилей для тэга " ". Способ задания размера шрифта в таблице стилей несколько отличается от употребляемого в тэге "". Если в качестве значения параметра "size" тэга "" может указываться число от 1 до 7, соответствующее размеру шрифта от самого маленького до самого большого, то в таблице стилей, в параметре "font-size" какого-либо элемента, допускающего его задание для себя, может быть указан либо фиксированный размер шрифта в пикселах (например, "font-size: 12 px"), который при отображении в браузере увеличить или уменьшить будет нельзя (в Microsoft Internet Explorer 5.0 это можно сделать в меню "Вид-Размер Шрифта"), либо процентное значение ("font-size: 120 %"), которое задаст размер шрифта относительно установленного в браузере (с помощью вышеуказанного меню) по умолчанию. Первый способ стоит использовать при необходимости строго задать размер букв надписи (скажем, при их размещении в ограниченной по ширине ячейке таблицы), а второй — во всех остальных случаях. Злоупотреблять первым способом указания размера шрифта — в пикселах — не стоит, так как многие пользователи предпочитают настраивать просмотр web-страниц, в том числе и размеры шрифтов, исходя из своих предпочтений, а указание размера шрифта в пикселах не даст им этого сделать. Синтаксис таблицы стилей можно посмотреть в приведенном выше примере. Все задаваемые параметры заключаются в фигурные скобки. Разделитель между параметрами — точка с запятой, разделитель между параметром и его значением — двоеточие. Перед именем определяемого класса в таблице стилей ставится точка, а перед определяемым стандартным тэгом HTML — нет. Каждый новый тэг или класс описывается с новой строки. Параметры, могущие быть заданными для каждого типа обьектов, весьма многообразны. Полный их перечень приводится в специальной литературе по таблицам стилей. Кроме того, с ним можно ознакомиться с помощью программы Microsoft Script Editor, описанной в следующей главе. Таблицу стилей можно использовать одну на несколько web-страниц. Можно даже брать ее с другого сайта. Для этого надо сохранить таблицу стилей (от тэга "" до тэга "" без самих этих тэгов) в текстовом файле с расширением. css и поместить этот файл на сервер, желательно в ту же самую директорию, где будут находиться сами web-страницы. В раздел "" каждой страницы надо поместить тэг "", где вместо Url поставить имя файла с таблицей стилей или путь к нему, если он находится не в той же самой директории, что и web-страницы. В этом случае при загрузке web-страницы таблица тоже будет загружена. При изменении описаний тэгов и классов в такой таблице стилей изменится внешний вид всех страниц, на которых она используется. Следует помнить, что при таком использовании таблицы стилей при сохранении пользователем web-страницы на жестком диске локального компьютера без использования функций сохранения страниц со всеми компонентами, имеющихся в последних версиях браузеров Microsoft Internet Explorer или Netscape Navigator, сохраненная web-страница полностью потеряет заданное в таблице форматирование. Это и понятно — сама же таблица тогда не будет сохранена. С помощью таблиц стилей можно задать обьектам страницы огромное количество свойств — гораздо большее, чем позволяют стандартные тэги HTML. Например, можно указать для фрагмента текста отступы от остального текста, причем эти отступы могут быть и отрицательными, что позволяет добиваться весьма оригинального вида web-страницы — c наложением фрагментов текста друг на друга. Можно сделать страницу с "водяными знаками" на заднем плане, причем без использования сложной графики в качестве фона. Пример подобной web-страницы — на рис. 17.1. Ее HTML-текст имеет следующий вид: Рис. 17.1. Пример Web-страницы, сделанной с использованием таблицы стилей. x1 {color: green; font-size: 40pt} x2 {color: navy; font-size: 50pt; margin-top: -10px;} x3 {color: silver; font-size: 80pt; margin-top: -140px} Как легко видеть, свойство margin-top определяет отступ текста сверху от предыдущего элемента web-страницы. Задав его значение отрицательным, можно получить наложение текста на предыдущий элемент. В качестве элементов могут выступать и изображения, и таблицы. Вот, к примеру на рис. 17.2 представлена web-страница, созданная без использования тэгов " Рис. 17.2. На этой странице нет таблиц и есть лишь один рисунок. К слову, текстовые редакторы Microsoft Word 2000 и Microsoft Word XP потому и могут сохранять в web-странице все форматирование, доступное им, что при сохранении документа в формате HTML широко используют таблицы стилей и тэг style. В какой-то мере принцип таблицы стилей похож на принцип стилевого оформления текста в Word. Точно так же — в Word можно задать изначально параметры текста для каждого стиля, а потом устанавливать для фрагментов текста оформление определенным стилем. При этом все фрагменты текста, оформленные одним и тем же стилем, будут выглядеть одинаково и в соответствии с установленными для этого стиля параметрами текста. Ну, а при необходимости произвести мелкие изменения внешнего вида текста в каком-либо фрагменте нет необходимости создавать новый стиль — достаточно непосредственно изменить оформление этого фрагмента. Замените в этом описании работы в Word слово «стиль» словом «класс», и оно будет относиться уже к таблицам стилей. Если подытожить, то таблица стилей — это поддерживаемый всеми современными браузерами способ определения оформления для всех однотипных элементов web-страницы, как входящих в число стандартных элементов HTML, так и создаваемых самостоятельно разработчиком, при котором информация об оформлении размещается в начале web-страницы или в отдельном файле. При использовании таблиц стилей элементам страницы можно задавать большое количество свойств. Вместе с тем допустимо указание этих свойств и вне таблицы стилей, в любом тэге с помощью специального параметра style. Dynamic HTML Dynamic HTML — это не какой-то новый язык, отличный от стандартного HTML, а набор определенных команд и способ их использования, позволяющий динамически управлять web-страницей. Внешний вид страницы, написанной на стандартном HTML, после загрузки страницы изменен быть не может. Для того, чтобы сделать страницу на чистом HTML после ее полной загрузки хотя бы немного по-другому выглядящей, требуется ее полная перезагрузка. То есть — страница не может быть интерактивной: не может изменяться, реагируя на действия посетителя. Для возможности изменять внешний вид web-страницы без ее перезагрузки, в ответ на определенные действия пользователя, и был придуман Dynamic HTML. Чтобы возможности Dynamic HTML могли быть использованы, web-страница должна просматриваться в браузере, способном обрабатывать команды Dynamic HTML. На сегодняшний день все последние версии браузеров Microsoft Internet Explorer (начиная с версии 4.0) и Netscape Navigator Dynamic HTML поддерживают.[47] Принцип Dynamic HTML прост. Каждому элементу страницы может быть присвоено имя — идентификатор id. По этому идентификатору к элементу можно обращаться с помощью скриптов или команд Dynamic HTML, изменяя свойства этого элемента. Изменения сразу же вступят в силу, и внешний вид страницы станет другим. Перезагрузка страницы не потребуется. Более того — с помощью команд Dynamic HTML можно обращаться не только к поименованным с помощью идентификаторов обьектам, но и вообще — к любым обьектам на странице. Можно, например, сделать так, что при определенном действии пользователя изменится стиль (цвет, шрифт, размер) всех заголовков на странице или всех гиперссылок. Скажем, была страница оформлена в зеленых тонах, а теперь стала оформлена в синих. Причем для этого не нужны громоздкие долго загружающиеся конструкции — достаточно небольшого скрипта, использующего возможности Dynamic HTML. В Dynamic HTML существует возможность изменять не только свойства элементов страницы, но и ее содержание. К примеру, проводить замену одного текста на странице другим. Можно менять не только текст на странице, но и элементы ее оформления, например, фон, рисунки или заглавие страницы (отображающееся в заголовке окна браузера). Команды Dynamic HTML построены так же, как и команды любого современного обьектно-ориентированного языка программирования: вначале пишется имя обьекта, над которым выполняется действие или свойство которого нужно узнать, а затем, через точку — его подобьекты или свойства. Они могут быть использованы как в отдельно взятом виде, так и в составе скрипта на VBScript или JavaScript. В первом случае они выполняются при происхождении какого-либо события, в описании которого и помещаются команды. Во втором случае выполнение команд происходит при выполнении скрипта. Для изменения какого-либо элемента web-страницы нужно присвоить этому элементу идентификатор (попросту включить в его тэг параметр "id="оригинальное имя""), и затем с помощью команды изменить какое-либо свойство этого элемента. К примеру, для замены какого-либо рисунка web-страницы на другой нужно в тэг рисунка включить идентификатор — например, " Все элементы web-страницы, как именованные, так и неименованные, связаны для браузера, поддерживающего Dynamic HTML, в разветвленную иерархическую структуру. Скрипты, использующие возможности Dynamic HTML, могут обращаться к различным элементам в этой структуре, учитывая его расположение в ней. Однотипные элементы (например, все изображения, все формы и.т.д.) обьединяются в группы — так называемые "коллекции". Существуют встроенные коллекции — то есть группы элементов, которые обьединены в коллекции по умолчанию, и к элементам этих групп можно обращаться из скриптов без специальных команд, например, коллекция всех изображений на странице. У создателя web-страницы имеется возможность самостоятельно организовывать однотипные элементы в коллекции и обращаться к различным элементам коллекций по их порядковым номерам. К примеру, для того, чтобы изменить выравнивание текста во втором абзаце web-страницы, нужно включить в текст скрипта на VBScript такие строки: Set abzaci=document.all.tags("p") abzaci(0). align="right" Эти две строки создают коллекцию всех тэгов абзацев и обращаются ко второму ее элементу — второму абзацу, присваивая значение "right" параметру "align" его тэга " ". Нумерация элементов всех коллекций начинается с нуля. Следует помнить, что при присваивании элементам страницы каких-либо свойств можно использовать лишь доступные свойства. Нельзя, например, непосредственно присвоить тэгу " " или " ", например, командой "имя_элемента. style.color="red"", так как сами тэги " " и " Для изменения текста на web-странице следует использовать специальное свойство обьектов, могущих содержать текст — innerHTML. Например, следующая команда заменит текст тэга " Команды Dynamic HTML можно включать как в скрипты, так и в текст web-страницы. В последнем случае они должны быть включены в обработчики событий элементов страницы. С каждым элементом web-страницы могут происходить различные события: на него могут навести курсор мыши, его могут кликнуть, его могут выделить и т. д. При каждом совершении того или иного события может быть выполнен скрипт или какая-либо команда Dynamic HTML. Вот, к примеру, как должна выглядеть команда, которая при наведении курсора мыши на рисунок производит вышеописанную замену текста: " onmouseover=(asdf.innerHTML="Новый текст")>". Пример использования возможностей Dynamic HTML для создания удобной и красивой web-страницы приведен в главе 22. Подробнее об использовании Dynamic HTML можно узнать из литературы по web-программированию. VBScripts и JavaScripts, таблицы стилей, Dynamic HTML — все это не что иное, как "языки общения" сайта с посетителем, призванные сделать web-страницу удобной и красивой. В то же время в основе любой web-страницы, даже самой сложной, лежит стандартный язык HTML. Таблицы стилей, скрипты — это лишь надстройки к нему и без HTML использоваться не могут. Поэтому не стоит пренебрегать и изучением основ. Согласно статистике, собираемой с многих сайтов Интернета, более 99 процентов пользователей Всемирной Сети используют современные браузеры, поддерживающие языки скриптов и таблицы стилей. Поэтому использование новых технологий создания web-страниц, таких, как Dynamic HTML, VBScripts и JavaScripts и CSS, вполне оправдано. Для тех же посетителей, которые не пользуются современными браузерами, можно при желании сделать отдельный вариант сайта с использованием только стандартных средств HTML. Графика В самом документе HTML не может быть графических обьектов, так как язык HTML — язык оформления текста, что следует даже из его названия (HyperText Markup Language). Но графические обьекты могут быть вставлены в документ с помощью тэга " В качестве графики могут выступать только файлы в формате Gif и Jpeg, и, для самых новых моделей браузеров — Png. Файлы остальных типов через браузер не могут быть просмотрены. Для помещения картинки на web-страницу необходимо указать в тэге " Графические обьекты также могут выступать в качестве фона к web-странице и ее некоторым элементам, например, ячейкам таблиц. В этом случае путь к ним должен быть указан в параметре background соответствующего тэга. Для создания графических обьектов можно использовать любой редактор графики — от Adobe Photoshop до MS Paint. Если редактор не поддерживает форматы Gif и Jpeg, то можно воспользоваться конвертирующими программами или функциями конвертации других программ — вроде MS Photo Editor, открыв в нем файл, сделанный в редакторе, и сохранив в формате Gif или Jpeg. Весьма неплохие возможности по конвертации графических файлов предоставляет программа ACDSee. Формат Gif рекомендуется применять для рисунков, имеющих много областей, залитых одним цветом (наподобие рисунков из коллекции Clipart пакета Microsoft Office). В файле в формате Gif происходит сжатие информации о рисунке путем замены в последовательности одинаковых точек изображения информации о каждой точке информацией о виде точки и о их количестве. К примеру, вместо указания "красная точка, красная точка, красная точка, красная точка" будет использовано указание "четыре красные точки". Такое сжатие происходит только со строго горизонтальными линиями изображения. Кроме того, в файле в формате Gif цвет каждой точки может быть описан не более чем одним байтом — то есть быть максимум одним из 256 цветов. Однако в файл формата Gif можно поместить так называемую «палитру» — описание используемых в файле цветов. Тогда цвет каждой точки можно будет описать просто номером этого цвета в палитре, а уж цвета самой палитры описывать в ней полностью. Это позволит, скажем, создать файл в формате Gif, в котором будет использоваться лишь 16 цветов, причем цвет каждой точки будет описываться не восемью битами, а всего четырьмя. В палитре же этого файла будут полностью описаны все цвета, используемые в рисунке. Таким образом достигается сжатие файла — уменьшение его размера. Некоторые цвета в изображении формата Gif могут быть обьявлены «прозрачными». Это значит, что при вставлении такого рисунка в web-страницу на месте областей, закрашенных этим цветом, будет виден фон страницы. Чтобы сделать в файле Gif какой-либо цвет прозрачным, достаточно воспользоваться входящим в состав Microsoft Office графическим редактором PhotoEditor. Там есть такая функция, вызывающаяся иконкой с изображением карандаша со стрелочкой на панели инструментов "Стандартная". Кроме того, в файле формата Gif может находиться сразу несколько изображений — анимированный ролик. Причем каждый кадр такого ролика может включать в себя не полное изображение, а лишь его изменяющуюся часть. Например, чтобы сделать ролик формата Gif с бегущим на фоне леса зайцем изображение леса можно включить лишь в первый кадр ролика, а остальные кадры будут представлять из себя изображение одного лишь зайца. Формат Gif очень хорошо приспособлен для хранения в нем простых изображений и анимированных роликов, особенно рисованных "от руки". Такие файлы в этом формате занимают очень мало места. Однако для хранения фотографических изображений он непригоден, так как не позволяет использовать палитру больше, чем в 256 цветов, а все его способы оптимизации изображения для фотографических изображений не подходят — у них много мелких деталей. Преграду в 256 цветов можно обойти, разбив большое изображение на множество мелких, назначив каждому фрагменту свою палитру из не более чем 256 цветов, а потом на web-странице с помощью сложной табличной разметки собрав все эти фрагменты в одно изображение, но такой прием все же не является хорошим выходом, так как сильно увеличивает время загрузки страницы и ее сложность. Для хранения фотографических изображений был создан формат Jpeg. В отличие от формата Gif его метод сжатия информации об изображении основан на исключении из файла информации о мелких деталях изображения, — то есть это сжатие с потерей качества изображения. Чем больше процент сжатия, тем меньше по размеру получится файл, но тем хуже будет выглядеть изображение. Процент сохранения информации можно задать при сохранении картинки в формате Jpeg практически из любого графического редактора. Вот, к примеру, исходная картинка (рис. 17.3), файл Jpeg, сохраненный с качеством в 50 процентов (рис. 17.4), и файл Jpeg, сохраненный с качеством в 10 процентов (рис. 17.5). Рис. 17.3. Исходная картинка. Рис. 17.4. Файл Jpeg, сохраненный с качеством в 50 процентов Рис. 17.5. Файл Jpeg, сохраненный с качеством в 10 процентов. При этом первый рисунок имеет размер 142 килобайта, второй — 17, а третий — 7. Как можно видеть, при утере до половины всей информации о мелких деталях изображения его видимое качество заметно не ухудшается, а размер сокращается во много раз. Именно это и позволяет использовать изображения в формате Jpeg, сжатые на 60–70 процентов, в оформлении web-страниц. Поэтому обязательно оптимизируйте графику, сохраняя или пересохраняя размещаемые в Web рисунки в jpeg-файлах с качеством 40–50 %. При сохранении изображения в формате Jpeg с пониженным качеством можно улучшить его внешний вид, применив предварительно фильтр «размытия» изображения (в англоязычных программах он обычно называется Blur). Тогда «зернистость» изображения будет меньше. У обоих форматов графических файлов — Gif и Jpeg — разное предназначение. Первый просто идеален для небольших рисунков, кнопочек, мерцающих звезд, в общем, всего того, что рисуется "от руки". Второй же хорошо использовать для размещения в Интернете фотографий и сканированных изображений. Кроме того, только Gif позволяет сделать анимированный рисунок, — то есть уместить в одном графическом файле небольшой мультипликационный ролик. Последнее делает Gif наилучшим форматом для баннеров — рекламных клипов, размещаемых на сайтах Интернета. Используя картинки в формате Gif с прозрачным фоном, можно добиться весьма причудливых результатов. Например, добавив на страницу небольшой java-скрипт, заменяющий один рисунок другим при нажатии на нем мышью, можно сделать треугольную или фигурную нажимающуюся кнопку. Существует множество программ для создания графических обьектов в форматах Gif и Jpeg. Но, к сожалению, на сегодняшний день нельзя назвать ни одной программы, которая сочетала бы в себе многофункциональность и удобство для пользователя. Сложную графику хорошо делать в Adobe Photoshop, но для его освоения придется потратить немало часов. В качестве элементарного средства можно использовать MS Paint, а затем изображение, созданное в нем, конвертировать в нужный формат с помощью Microsoft Photo Editor. Кроме того, рисунки, созданные в Microsoft Word, будут отконвертированы в форматы Gif и Jpeg при сохранении документа в формате HTML. Таким образом конвертор HTML редактора Microsoft Word можно использовать для преобразования в форматы Gif и Jpeg внедренных в документы рисунков. Конвертор HTML сам выберет лучший формат для каждого рисунка, подберет степень оптимизации. Заключение Разработка сайта — всегда творческий процесс. Но помните, что самой главной заповедью для любого web-мастера является необходимость обеспечить удобство посетителя. Только от вас зависит, как будут заходить на ваш сайт пользователи, — ругая web-мастера или восхищаясь его мастерством, и захотят ли они вернуться на сайт снова. Уважайте своего посетителя и стремитесь всячески облегчить ему процесс получения информации с вашего сайта, — ведь это нужно не только ему, но и вам. Web-дизайн — это еще и вид искусства. Но, как и в любом другом виде творчества, одним из самых важных условий создания действительно хорошего дизайна является чувство меры. Создать сайт, оформленный многокрасочной графикой — полезное дело, но куда как более почетным для разработчика будет создание сайта с минимумом графики, но не менее красивого, и к тому же гораздо быстрее загружающегося. Помните, что дизайнер, могущий сделать сайт, работать с которым посетителю удобно и приятно, очень высоко ценится! И именно удобство посетителя должно стоять на первом месте у разработчика Web-страниц — сразу после хорошего и нужного информационного наполнения. Создавайте такие сайты, на которые хотелось бы зайти и вам. Проблема выбора подходящего инструмента для работы актуальна для многих web-дизайнеров. Разумеется, в принципе для создания полноценного сайта не нужны какие-то специальные программы. Подойдет любой текстовый редактор вроде Блокнота. Но работать в Блокноте очень неудобно: нет хорошей системы замены слов, отмены последних действий. Поэтому появилось немало программ специально для создания web-страниц, чтобы время и силы web-дизайнеров в основном тратились на творчество, а не на механическую работу. Все программы, облегчающие создание html-документов, можно условно разделить на три категории. К первой из них будут относиться программы, которые просто облегчают написание собственно HTML-кода. Они имеют развернутую систему замены и поиска фрагментов текста, могут подсвечивать разными цветами HTML-тэги, отделяя тем самым их от информационного содержимого страницы. Некоторые подобные программы позволяют даже одним нажатием мыши или кнопки вставлять в подготавливаемый документ целые фрагменты кода, заранее написанные пользователем или даже изначально встроенные в программу — например, простейшие сценарии. Таких редакторов очень много, практически все они доступны через Сеть, — это и CoffeeCup, и HotDog, и другие. К сожалению, почти все они являются условно-бесплатными и требуют регистрации, причем стандартные способы продления жизни этих программ в их новых версиях крайне затруднены, — их регистрация происходит через Интернет. Среди бесплатных программ подобного рода стоит отметить Aditor,[48] который умеет подсвечивать тэги разными цветами, работать с различными кодировками, имеет многооконный интерфейс. Ко второй категории относятся так называемые WYSIWYG — редакторы. WYSIWYG — это английская аббревиатура слов "what you see is what you get", то есть "что вы видите, то и получаете". В этих редакторах создание web-страницы напоминает создание документа в Microsoft Word: совершенно не нужно думать о тэгах, параметрах. Можно даже не знать, что такое «тэг» и как он выглядит. Страница создается буквально на глазах: достаточно просто написать текст, вставить рисунки или таблицы, оформить строки нужным образом, — и web-страница готова! Типичными примерами таких редакторов служат Microsoft FrontPage Express, Microsoft Word с его средством сохранения документов в формате HTML, редактор Web-страниц из комплекта Netscape Communicator. Может показаться, что WYSIWYG-редакторы более перспективны, чем относящиеся к первой категории, — в самом деле, работая с ними, можно думать не о структуре HTML-кода, а непосредственно о дизайне web-страницы. Но, к сожалению, почти все существующие редакторы типа WYSIWYG генерируют плохой HTML-код — с лишними или даже некорректными тэгами. Кроме того, обеспечить качественное отображение созданных в таких редакторах web-страниц разными браузерами без последующего тщательного редактирования их кода представляет собой практически неразрешимую задачу. Безусловно, в каждом WYSIWYG-редакторе есть возможность просмотра HTML-кода, но, к сожалению, средства его редактирования обычно оставляют желать лучшего. Кроме того, вставить в страницу какой-нибудь сценарий в WYSIWYG-редакторах обычно весьма непросто. Несмотря на все недостатки редакторов типа WYSIWYG, их удобно использовать для создания каркаса сложной по строению страницы, особенно содержащей большое количество вложенных таблиц. Кроме того, WYSIWYG-редакторы дают определенную свободу творческому взгляду дизайнера сайта, так как позволяют ему не думать о том, как реализовать тот или иной эффект оформления web-страницы, а сосредоточить усилия на ее красоте и удобстве. Однако наилучшим выбором для web-дизайнера на настоящий момент являются редакторы, сочетающие в себе возможности как первой, так и второй категории. В настоящее время к ним относятся Microsoft Script Editor из пакета программ Microsoft Office 2000/XP и Microsoft FrontPage 98/2000/XP, также входящая в пакет Microsoft Office, однако распространяющаяся и отдельно от него, а также некоторые другие программы. Весьма совершенным инструментом для создания web-страниц является первая программа из этих двух — Script Editor, поэтому стоит уделить ей особое внимание, тем более что она дает разработчику удобную среду еще и для программирования на языках сценариев. Эта глава — не пошаговое руководство по использованию Script Editor. Ее предназначение — описать возможности этого редактора, а также указать на некоторые не совсем очевидные его функции, чтобы впоследствии вам не потребовалось их искать. Освоить же Script Editor можно лишь одним способом — непосредственно работая с ним и самостоятельно исследуя его. Тем более что это не так и сложно. Script Editor входит в состав пакета офисных программ Microsoft Office 2000 и Microsoft Office XP и предназначен для разработки Web-сайта, написания программ на языках JavaScript и VBScript и других Интернет-разработок. При установке пакета Microsoft Office 2000/XP Script Editor по умолчанию не ставится. Для его установки необходимо выбрать "Выборочную установку", в меню установки компонентов развернуть пункт "Средства Office", там — "Редактор HTML-файлов", а, развернув этот пункт, — "Редактор Web-сценариев", который пометить как "Запускать с моего компьютера" (рис. 18.1). Рис. 18.1. Чтобы установить Script Editor, отметьте этот пункт при инсталляции Microsoft Office 2000/XP. После этого Script Editor может быть вызван из меню Сервис текстового редактора Microsoft Word 2000/XP с помощью пункта меню Макросы-Редактор сценариев. При инсталляции Microsoft Office 2000 исполняемый файл Script Editor по умолчанию устанавливается в папку Program Files\Microsoft Visual Studio\Common\IDE\IDE98 и называется MSE.EXE, а если вы устанавливаете Microsoft Office XP, то он будет иметь название MSE7.EXE и разместится в той же папке, что и остальные файлы Office. После окончания установки создайте ярлык на этот файл, который поместите в удобное для вас место. Во время работы со Script Editor вы наверняка встретитесь и с двумя другими названиями этой программы — Visual Studio[49] и Microsoft Development Environment. Второе из них даже указано в окне About и в заголовке окна программы, но означает оно попросту "среда разработки". Поэтому название Script Editor лучше всего соответствует предназначению этой программы. Script Editor дает web-дизайнеру немалое количество возможностей. Здесь будут описаны лишь некоторые, самые важные из них. Если в Script Editor создать файл HTML или открыть существующий, то окно с загруженным файлом будет иметь три вкладки. Средняя из них, которая называется Source, показывает HTML-код документа, подсвечивая коричневым цветом тэги, красным — свойства тэгов, а синим — значения свойств (скажем, «font» — это тэг, «size» — это его свойство, а «4» — значение свойства). Левая переводит Script Editor в режим Design — визуальной разработки web-страницы, а правая — Quick View (только в Microsoft Office 2000) — позволяет оценить будущий вид страницы. Окно Source фактически является полноценным редактором кода HTML. Цветовое выделение тэгов весьма удобно для ориентации в тексте. Имеется функция многократной отмены сделанных изменений. Для того, чтобы добавить в текст страницы код, соответствующий какому-нибудь элементу, достаточно всего лишь дважды кликнуть мышью на название этого элемента на панели Toolbox (рис. 18.2). Эта панель по умолчанию располагается слева окна Script Editor. Рис. 18.2. Панель Toolbox редактора Script Editor. Кликнув на названии любого элемента на этой панели, вы вставите на web-страницу код, ему соответствующий, независимо от того, в каком режиме вы работаете — создания кода или визуальной разработки. Есть даже возможность самому создавать такие элементы — скопируйте в буфер обмена нужный текст, можно с html-тэгами, поставьте мышь на панель Toolbox и выберите из контекстного меню правой кнопки мыши пункт «Paste». После этого двойной клик мыши на этом элементе приведет к вставке в позицию курсора запомненного таким образом текста. Вы можете даже создать свой раздел на панели Toolbox из нужных именно вам фрагментов кода. Скажем, вставляете вы на страницы форму для быстрой подписки на рассылку — запомните ее код на панели, и затем вставляйте код формы парой кликов мыши. Для того, чтобы добавить на страницу многоколоночную таблицу, не нужно долго и упорно прописывать тэги Если в стандартном HTML не окажется средств для задания какому-либо элементу нужных свойств, то будет использован язык таблиц стилей — CSS. Тогда при выборе из контекстного меню пункта Properties отобразится не окно задания свойств тэга, а большая панель свойств Properties (рис. 18.3), где можно задать огромное количество параметров тэга. Однако следует помнить, что не все браузеры смогут эти параметры правильно проинтерпретировать. Эту панель можно вызвать и из меню View, выбрав пункт "Properties Window". Рис. 18.3. Панель Properties редактора Script Editor. В принципе можно везде использовать лишь средства панели Properties — тогда все без исключения тэги будут обрамлены на CSS, причем для создания страницы знать этот язык вовсе не обязательно, так как названия почти всех параметров вполне понятны даже по-английски.[50] Чтобы вставить на страницу рисунок, достаточно перетащить его иконку из «Проводника» в окно Script Editor на нужное место, а потом слегка откорректировать его имя, если он находился на локальном диске. Превосходные средства работы с Html-кодом — это лишь очень малая часть возможностей Script Editor (хотя и их вполне бы хватило на небольшой web-редактор, причем очень даже неплохой для своего класса)! Вкладка Design основного окна этой программы представляет собой полноценный WYSIWYG-редактор Web-страницы (рис. 18.4), многократно превосходящий по своим возможностям большинство других аналогов. Рис. 18.4.Вкладка Design окна программы Script Editor. Включен режим отображения границ таблиц и непечатаемых символов. Система генерации кода в режиме визуальной разработки в Script Editor построена очень разумно. Фактически она ничем не отличается от такой же генерации в режиме Source, когда в текст страницы попросту помещаются заранее приготовленные шаблоны из тэгов. Поэтому фрагменты кода, генерируемые Script Editor при помещении на страницу какого-либо обьекта в режиме Design, совпадают с кодом, вставляемым в документ в режиме отображения HTML-текста, что делает работу Script Editor очень корректной. В то время как количество лишних тэгов, «мусора» у многих WYSIWYG-редакторов вроде FrontPage Express или Microsoft Word 97 достигает порой астрономической величины, а уборка их становится долгим и неприятным занятием, код, генерируемый Script Editor в режиме Design, является настолько компактным и правильным, что практически не требует последующей коррекции (разве что адреса рисунков придется подправить, так как по умолчанию указывается полный путь к ним на локальном диске). Все диалоги задания свойств элементов страницы и панель свойств элементов в режиме Design работают точно так же, как и в режиме Source. Возможности вставления таблиц, указания параметров тэгов работают как в режиме написания кода, так и в режиме визуальной разработки, просто в первом случае вы увидите, как вставляется собственно код, а во втором — соответствующий ему элемент. При работе в режиме Design разработчику доступно огромное количество возможностей сделать свою работу максимально удобной. О таких вещах, как выпадающий список для задания вида и размера шрифта для текста или его стиля, кнопки для установки выравнивания по центру или по одной из сторон, кнопки создания нумерованных списков можно даже не упоминать — они само собой разумеются. Очень большую помощь при создании или правке макета страницы могут оказать кнопки "Отобразить границы" и "Отобразить непечатаемые символы" (см. также на рис. 18.4), расположенные с левого краю панели инструментов Design. Достаточно их нажать, чтобы вся структура страницы, сколь бы сложной она ни была, оказалась видна как на ладони. Кнопка Absolute Mode позволит располагать новые элементы в произвольном месте страницы — их расположение будет задаваться растояниями от верхнего и левого краев документа. Реализуется такое расположение посредством использования языка CSS. Если же эта кнопка не нажата, то новый элемент будет вставлен на страницу с использованием стандартных средств Html и с учетом их ограничений. Кнопки Foreground Color (цвет шрифта) и Background Color (цвет фона) панели инструментов Html в режиме Design вызывают очень удобные диалоговые окна задания цвета выделенного элемента или набираемого текста. Три вкладки каждого из этих окон предоставляют разработчику все возможные способы задания цвета — от непосредственного ввода значений отдельных компонентов цветов до выбора нужного цвета в "безопасной палитре" (все цвета из этого набора отображаются одинаково на любом мониторе, в любом браузере, в любой стране) или названия желаемого цвета. Третья вкладка окна Script Editor из пакета программ Microsoft Office 2000 — Quick View — позволяет посмотреть, как будет выглядеть страница в браузере. Нет необходимости специально загружать браузер и постоянно нажимать Refresh, чтобы увидеть страницу так, как она в нем отображается. Страница в Quick View за очень небольшими отличиями (касающимися только работы скриптов) отображается так же, как и в браузере Microsoft Internet Explorer 5.0 и более старших его версиях. (В Script Editor'е из Microsoft Office XP данная вкладка отсутствует.) Все панели инструментов Script Editor являются свободно настраиваемыми — такими же, как и в Microsoft Word. Можно свободно размещать кнопки, вызывающие те или иные команды, создавать новые панели инструментов, настраивать рабочую среду под свои требования. Возможность многократной отмены произведенных действий и возврата отмененных реализована очень удобно (то, что она есть, само собой разумеется для web-редакторов такого класса) — в небольшом окне отображается краткое описание действий, которые можно выделить для отмены или возврата. К сожалению, список отменяемых действий очищается при переключении в режим Quick View — по всей видимости, это вызвано ошибкой в самой программе. Будем надеяться, что в будущих версиях этот досадный недостаток будет исправлен. Система поиска фрагментов текста тоже весьма эргономична — поле ввода текста на панели инструментов Standart (рис. 18.5). Вводишь туда нужное слово и жмешь Enter, а Script Editor сама путешествует по документу, подсвечивая найденные вхождения. И не надо никакого диалогового окна вызывать, жать комбинации клавиш или мышью двигать… Все слова, по которым проводился поиск, сохраняются, и впоследствии отображаются в выпадающем списке. Почему до этого не додумались разработчики Microsoft Word — непонятно: а ведь как бы было удобно… Рис. 18.5. Искать в документе, открытом в Script Editor, просто. Просто введите текст в поле ввода вверху окна. В Script Editor из Microsoft Office 2000 поиск можно вести и во всех файлах в папке, где находится открытый документ, а также в любой другой произвольной папке, включая вложенные, и даже в нескольких папках одновременно. Результат поиска выводится в виде списка файлов, рядом с именами которых показывается строка первого вхождения искомого текста, а также фрагмент файла, содержащий его. Для загрузки нужного файла в редактор достаточно кликнуть пару раз на его названии в этом списке. (Внимательнее работайте с окном «Browse» при указании директорий для поиска — не забудьте нажать кнопку "Add to list", чтобы Script Editor стал искать текст и в этой папке.) К сожалению, при разработке Microsoft Office XP эти расширенные возможности поиска из Script Editor'а были удалены. Если страница большая, со множеством элементов, то ориентироваться в ней непросто. Желательно было бы представить ее в виде некоей структуры, «карты». И это позволяет делать Script Editor! Открыв окно "View-OtherWindow-DocumentOutline", можно получить подробнейшую схему страницы (рис. 18.6), со всеми ее иерархическими связями и компонентами. И если надо быстро перейти к какому-либо компоненту страницы, то рыться в тоннах кода нет необходимости — пара кликов на его имени в схеме, и курсор — уже на этом элементе. Рис. 18.6. Схема web-страницы — просто подарок для дизайнера, который уже запутался в переплетениях таблиц, ссылок, рисунков… В окне Project Explorer, которое можно вызвать из меню View, отображаются все открываемые ранее для редактирования файлы. Любой из них можно загрузить для работы двумя кликами мыши. Тоже — удобно: открыл единожды все файлы в папке с сайтом и загружай любой без поисков в диалоговых окнах или "Проводнике". Все панели инструментов и окна являются свободно перемещаемыми по экрану. Их можно расположить как в окне Script Editor, так и в любом другом месте. Но особенно привлекает интересное техническое решение в Script Editor из Microsoft Office 2000, предложенное разработчиками редактора и помогающее быстро и удобно организовать для себя оптимальную рабочую среду. На одной из панелей инструментов (а посмотреть их список и отобразить любую можно так же, как и в Word — просто щелкнув правой кнопкой мыши в любом месте серого поля вверху окна, рядом с панелями инструментов), Windows UI, есть выпадающее меню, содержащее перечень возможных состояний рабочей среды — Debug, Design, Edit Html и др. Если выбрать какое-нибудь из них, то Script Editor само примет соответствующее состояние — будут отображены нужные и закрыты ненужные панели и окна, компоненты редактора выстроятся около краев. К примеру, при выборе состояния Edit Html отобразятся главное окно с кодом, окна Document Outline, Properties и Project Explorer — все, что нужно для полноценной работы с кодом. К сожалению, из следующей версии Script Editor'а данное меню разработчики почему-то убрали. Всего вышеизложенного хватило бы на приличный редактор web-страниц, который занял бы достойное место на рынке. Но рассказанное — лишь малая часть возможностей этого поистине уникального инструмента для создания страниц Интернет-ресурса любой сложности, поставляемого вместе с пакетами Microsoft Office 2000 и Microsoft Office XP и, к сожалению, так мало описанного в руководствах. Особую уникальность Script Editor придает то, что помимо web-редактора он представляет из себя еще и среду программирования, по набору функций похожую на среду Visual Basic for Applications. Рассчитана эта среда на два языка — JavaScript, VBScript, а также на использование технологии Active Server Pages, которая позволяет выполнять сценарии на скриптовых языках на стороне web-сервера. С технологией ASP большинству пользователей вряд ли придется столкнуться, она используется сейчас нечасто, а вот первые два языка сценариев позволяют украсить и сделать удобной любую страницу, где бы она ни была расположена. Те, кто уже писал макросы для Microsoft Word, найдут в Script Editor много общего с встроенным в Word редактором Visual Basic for Applications. И это понятно — Microsoft стремится создать единую среду программирования для разработки приложений на любых языках, включая в новые редакции своих продуктов лучшее из предыдущих версий. Кроме того, web-сценарии фактически представляют собой "макросы для браузера", так как они не компилируются заранее, а интерпретируются браузерами после загрузки web-страницы. Чтобы добавить на страницу сценарий, даже не надо самому писать тэги. Можно просто кликнуть правой кнопкой мыши на нужном месте и из контекстного меню выбрать Script Block-Client (второй вариант этого меню, Server, относится к возможности реализации технологии ASP). Для более легкой ориентировки на странице, где имеется множество скриптов, очень хорошо использовать окно Script Outline (в Microsoft Office 2000 вызывается из меню View-Other Window-Script Outline, а в Microsoft Office XP — кнопкой в заголовке вышеописанного окна Document Outline), в котором перечислены все скрипты, находящиеся в документе. Чтобы перейти к нужному, достаточно пары кликов мыши (рис. 18.7), при этом курсор в окне Source установится на его начало. Рис. 18.7. Карта сценариев web-страницы. Все четко структурировано Если в документе есть обьекты Dynamic HTML (то есть поименованные компоненты — любому элементу web-страницы можно дать имя, включив в его тэг выражение "id=уникальное_имя" и впоследствии обращаться к этому элементу из сценариев[51]), то окно Script Outline в Script Editor из Microsoft Office 2000 дает возможность быстро создавать заготовки обработчиков событий (то есть сценариев, описывающих какие-либо действия при наступлении какого-либо состояния страницы, браузера или обьектов — компонентов документа). Имена всех таких обьектов отображаются в Script Outline, и при необходимости создать сценарий-реакцию на какое-либо событие достаточно щелкнуть на имени нужного обьекта и выбрать нужное событие (заодно можно узнать, какие вообще события могут происходить с этим обьектом). В документ, в его раздел (Технология Dynamic Html неразрывно связана с технологиями JavaScript и VBScript. Иными словами, можно сказать, что Dynamic Html позволяет обратиться к любому обьекту на странице, а VBScript и JavaScript — что-нибудь с этим обьектом сделать. Поэтому сценарии на VBScript и JavaScript часто включают в себя элементы Dynamic Html — обращения к поименованным элементам страницы.) В списке обьектов окна Script Outline всегда присутствуют обьекты window (то есть окно браузера) и document — сама web-страница и, соответственно, их события — загрузка, выгрузка, прокрутка и др. Само это окно доступно, разумеется, только в режиме просмотра кода. При написании самого текста сценария Script Editor как бы «ведет» программиста по программе, подсказывая ему возможные продолжения команд. Подобная система используется в большинстве современных средств разработки приложений, так что те, кто ранее программировал на других языках, окажутся в своей привычной среде, а те, кто ранее не занимался созданием программ, получат возможность познакомиться с настоящей средой программирования. Если программист, создавая текст сценария (то есть вводя команды в текст страницы между тэгами , напишет имя какого-либо обьекта, то Script Editor выдаст ему список возможных действий с этим обьектом (рис. 18.8). Рис. 18.8. Создавая сценарий, думай только об алгоритме — остальное редактор тебе подскажет: и возможные продолжения команды…. Если же будет написано имя команды, то разработчику будет предоставлена краткая всплывающая справка о ее синтаксисе (рис. 18.9). Рис. 18.9.…и ее необходимые параметры… Сценарий — это самая настоящая программа, и, к сожалению, при ее написании ошибки практически неизбежны. В Script Editor есть мощная система отладки сценариев, мало чем уступающая аналогичным системам других сред программирования. Для того, чтобы установить местонахождение ошибки, используются "точки останова" и контрольные значения, а чтобы разобраться в сложной странице, где есть несколько скриптов, вызывающих один другой — окно стека вызова — "Call Stack". В окне редактора можно пометить с помощью мыши на сером поле у левого края окна определенные строки сценария (поставить "точку останова"), и в этом случае при загрузке страницы с этим сценарием в браузер из среды Script Editor (это можно сделать, нажав клавишу F5) в момент, когда выполнение сценария дойдет до отмеченной строки, его работа остановится и активируется окно редактора кода. Задержав в этот момент курсор мыши над какой-нибудь переменной из кода сценария, во всплывающей подсказке можно увидеть ее значение. Также значение любой переменной показывается в окне контрольных значений ("Locals"). Система отладки сценариев Script Editor очень похожа на аналигичную систему редактора Visual Basic for Applications, описанную в первой части книги. Все имеющиеся в Script Editor из Microsoft Office 2000 окна, предназначенные для web-программирования, показаны на рис. 18.10. Отличия в Microsoft Office XP несущественны. Рис. 18.10. Все, что нужно для полноценного программирования. Выполнять сценарий по строкам, чтобы поточнее определить место ошибки, труда не составит — богатые возможности меню Debug (т. е. "Отладка") всегда к вашим услугам. Всех перечисленных возможностей Script Editor с лихвой хватит подавляющему большинству разработчиков web-страниц. Те же, кто занимается web-программированием профессионально, найдут в этом редакторе практически все необходимые инструменты для создания мощных web-приложений, не описанные здесь за недостатком места, — такие, как окно просмотра процессов системы и т. д. Если пожелаете, то можете попробовать самостоятельно разобраться с возможностями Script Editor в облсти программирования, однако вам будет это гораздо проще сделать, если вы сначала познакомитесь с какой-либо средой программирования, например, редактором Visual Basic for Applications, описанным в первой части книги. В противном случае выяснить назначение некоторых инструментов будет не очень просто. В Script Editor имеется мощная система справки с богатыми возможностями поиска нужной информации. Так же, как и, скажем, в среде Visual Basic for Applications, в случае вызова справки в то время, как курсор находится на какой-нибудь команде языка сценария она откроется на странице, посвященной именно этой команде. Страницы справочной системы красиво оформлены. При осуществлении поиска по какому-либо ключевому слову список найденных разделов выдается в порядке убывания количества его вхождений, а сами вхождения выделяются в окне справки (рис. 18.11). Рис. 18.11. Справка — море информации по web-программированию. Справочная система Visual Studio фактически представляет собой комплекс из нескольких подобных систем, посвященных Html, JavaScript, VBScript и технологии Active Server Pages. К сожалению, неподготовленному человеку будет трудно в ней разобраться, так как она, во-первых, написана на английском языке, а, во-вторых, представляет из себя некое «перемешение» описаний всех трех технологий, так что отделить то, что относится к простому HTML, от описаний приемов и команд ASP будет нелегко. Но редактор Script Editor представляет из себя настолько дружественную среду разработки, что HTML в нем можно освоить, даже не заглядывая в инструкции — просто сравнивая то, что рисуешь, с тем, что он пишет на страницу, и наоборот. Безусловно, у такого крупного продукта, как Script Editor, есть и свои недостатки. Например, в той версии этой программы, что входит в состав Microsoft Office 2000, нет возможности "переноса по словам" текста страницы (Word Wrap), который есть даже в «Блокноте». Вследствие этого редактирование загруженной в редактор web-страницы, текст которой не разделен на строки, становится крайне сложной задачей. (Выходом из такого положения может стать загрузка страницы как текста в Microsoft Word или WordPad с последующим ее сохранением в том же файле как "текста с концами строк".). Впрочем, новая версия Script Editor'а из Microsoft Office XP данного недостатка лишена. Справка по языкам сценариев и Html при всем своем богатстве несколько трудна в использовании. Однако для чисто практического применения с целью создания web-страниц Script Editor подходит идеально. Тем более что этот продукт входит в стандартную поставку Microsoft Office 2000 и Microsoft Office XP и таким образом имеется на любом компакт-диске с этим пакетом программ. Просто установите Microsoft Office какой-нибудь из этих версий, и вы получите также и Script Editor, если укажете необходимость его установки в диалоговом окне инсталлятора. К сожалению, из новой версии Script Editor'а, входящей в состав Microsoft Office XP, исключены многие удобные функции, имевшиеся в его предыдущем варианте. Появившиеся же усовершенствования в основном касаются только интерфейса программы или тонкостей ее использования при разработке сценариев (например, в новой версии есть возможность отобразить в окне программы только тексты сценариев, присутствующие на странице, или, наоборот, текст страницы без них). Впрочем, во многом обе версии редактора одинаковы. Если вы не желаете устанавливать Microsoft Office 2000 или Microsoft Office XP, так как привыкли работать с Microsoft Office 97, но вам нужен Script Editor, то просто проинсталлируйте новую версию Microsoft Office в каталог, отличный от того, в котором расположен Microsoft Office 97, и при установке не забудьте указать необходимость сохранения старых версий программ пакета в одном из диалогов инсталлятора. Вы можете не устанавливать другие компоненты Office — Word или Excel, Script Editor будет прекрасно работать и без них. Только создайте для него ярлык на Рабочем столе (путь см. выше), чтобы не приходилось каждый раз перемещаться по папкам при необходимости его запустить. Script Editor не будет работать, если не установлен браузер Microsoft Internet Explorer 5.0, но этот браузер устанавливается вместе с Microsoft Office 2000, и без него невозможна работа также и Office. К Script Editor можно «пристыковать» любой другой браузер, установленный на жестком диске, и просматривать страницы и в нем. В целом можно сказать, что Script Editor сочетает в себе лучшие свойства редакторов web-страниц, как текстовых, так и типа WYSIWYG, а также полноценной среды программирования web-сценариев, что делает этот инструмент практически универсальным. Создание страниц в Script Editor — процесс приятный и увлекательный. Наконец-то у web-дизайнеров появилась возможность думать не о тэгах и командах, а о красоте и удобстве своих творений, не рискуя при этом получить перегруженный лишними тэгами «кривой» код, как это было раньше при использовании многих web-редакторов. В свете всего вышеизложенного эту среду можно рекомендовать использовать всем — от начинающих создателей Интернет-сайтов до профессиональных web-программистов. Когда-то давно, еще в прошлом веке, для того, чтобы сделать сайт "на мировом уровне", достаточно было просто уметь делать web-страницы на HTML и обладать художественным вкусом. Спустя некоторое время требования усложнились: использование JavaScript и Dynamic HTML стало рутинным и дизайн сайта, не имеющего подобных «украшений», считался устаревшим. Вскоре правилом "хорошего тона" для корпоративного сайта стало применение сложных программ на Perl или C++, а создавать такие сайты стало по силам лишь крупным дизайнерским студиям. Однако простые web-дизайнеры не желали мириться с такой ситуацией. И на свет появился PHP — язык программирования, обладающий возможностями сложных скриптовых языков, но в то же время удивительно простой и легкий в изучении и применении. О нем и пойдет дальше рассказ. Определения Web-программирование — разработка любых программных продуктов, предназначенных для работы на сайтах World Wide Web. Строго говоря, даже разработка web-страниц на чистом HTML является web-программированием, ведь при просмотре страницы браузер фактически исполняет код HTML, форматируя текст согласно инструкциям этого языка. В настоящее время под web-программированием понимают создание CGI-приложений и использование на web-странице технологий JavaScript и VBScript для достижений сложных эффектов. Web-сервер — программа, запущенная на узле сети Интернет и выдающая посетителям этого узла web-страницы с него по их запросам. Также web-сервером часто называется узел, на котором эта программа запущена, или даже компьютер, являющийся таким узлом. CGI (сокращение от Common Gateway Interface) — технология, позволяющая запускать на web-сервере программы, могущие получать данные от посетителей сайтов, поддерживаемых этим web-сервером, и в свою очередь выдавать им обработанные данные в виде web-страниц или других файлов. Для использования технологии CGI программа-web-сервер должна удовлетворять определенным критериям — "поддерживать CGI". Если программа, запускаемая на web-сервере, представлена не двоичным кодом (т. е. скомпилированным файлом), а текстовым, то для ее выполнения требуется программа-интерпретатор того языка, на котором написана эта программа. Такой интерпретатор включается в состав web-сервера и вызывается им при необходимости заняться выполнением программного кода. CGI-сценарий (CGI-скрипт) — программа (в текстовом виде), предназначенная для исполнения на web-сервере. Для создания CGI-скриптов можно использовать любой язык программирования — важно лишь, чтобы на том web-сервере, где предполагается эту программу запускать, имелся интерпретатор этого языка. В настоящее время наиболее частоиспользумыми языками CGI-программирования являются PHP, Perl, C++. Web-программирование Все языки программирования, используемые при разработке web-сайтов, можно разделить на две большие группы. К первой будут относиться те из них, код которых выполняется на компьютере посетителя сайта — в его браузере. Это известные всем JavaScript, VBScript, Java-апплеты. Программы на этих языках встраиваются в код web-страниц (или выносятся в отдельный файл с вызовом из web-страниц, но браузер все равно обрабатывает такие вынесенные программы как если бы они были встроены в код страницы). Во вторую же группу можно включить те языки, программы на которых выполняются на том компьютере, где расположен web-сервер. Эта группа будет гораздо более обширной, — дело в том, что в принципе на web-сервере могут исполняться программы на любом языке (даже командных. bat-файлов MS-DOS), важно лишь, чтобы на нем была установлена программа-интерпретатор этого языка, удовлетворяющая особым требованиям — стандарту CGI, которым также должен удовлетворять сам web-сервер. PHP относится ко второй группе — программа на PHP исполняется на web-сервере. Однако от других CGI-языков PHP очень сильно отличается в лучшую сторону, — прежде всего своей простотой. Создавая программы на PHP, нет необходимости учитывать все те многочисленные мелочи, которые отравляют жизнь программистам на Perl или C++: не надо заботиться о правах доступа к файлам сценария, не надо прописывать точные пути к различным модулям, нет необходимости следить за отсутствием в файле скрипта недопустимых символов. Синтаксис языка таков, что он допускает его легкое освоение как начинающим программистом, так и тем, кто уже использовал ранее какой-либо язык программирования. Для тестирования PHP-программ на локальном компьютере необязательно устанавливать на нем ту же операционную систему, что и у провайдера хостинга сайта, где эти программы будут применяться, — достаточно лишь установить соответствующей web-сервер и подключить к нему модуль PHP. Можно целиком и полностью сосредоточиться на решаемой задаче и не думать о мелочах. Именно это и делает PHP весьма хорошим выбором для web-дизайнера, который, начав его использовать, может вообще забыть о каких-либо других CGI-языках. Немного истории В отличие от многих других языков программирования, PHP был создан не какой-либо корпорацией или гением-программистом, а обычным пользователем, Расмусом Лердорфом, в далеком 1994 году. Цель разработки языка была проста — сделать домашнюю страничку Расмуса более интерактивной, а значит, и более привлекательной для посетителей. Расмус разработал базовый синтаксис и написал первый интерпретатор своего языка, получившего название Personal Home Page Tools — т. е. PHP. Этот интерпретатор мог обрабатывать лишь несколько основных команд, однако начало было положено. В 1995 году Расмус доработал интерпретатор PHP, соединив его с другой своей программой, умевшей обрабатывать HTML-формы (именовавшейся FI — от "Form Interpretator"), а также сделал так, что интерпретатор, получивший название PHP/FI Version 2, мог становиться частью web-сервера. Последнее сделало программы на PHP очень быстроисполняющимися. Кроме того, в том же 1995 году интерпретатор PHP был дополнен возможностями обработки новых команд, в частности, функций работы с сервером баз данных MySQL и автоматического создания gif-файлов (последнее, к примеру, может быть использовано для генерации кнопок-счетчиков посещений). PHP/FI был размещен в Сети для всеобщего использования, и началось его повсеместное распространение. Web-мастера быстро оценили достоинства нового языка web-программирования — легкость освоения и богатство возможностей, и вскоре традиционные Perl, C++ стали сдавать ему свои позиции. Так как исходный код интерпретатора был открыт (а сам он, ясное дело, бесплатен), то энтузиасты стали заниматься его доработкой, и летом 1998 года появился на свет PHP3 — детище Зива Сураски и Энди Гутманса (Zeev Suraski and Andi Gutmans). В этой версии интерпретатора были исправлены баги предыдущей версии и добавлены новые функции, что еще больше поспособствовало его победному шествию по миру. Уже к концу 1999 года число сайтов, построенных на основе PHP, перевалило за миллион. Весьма важным достоинством PHP также являлось то, что его можно было использовать в различных операционных системах — от Windows до Unix и Linux. В 2000-м году вышла четвертая версия интерпретатора PHP, разработанная компанией Zend Technologies, дополненная множеством новых функций. В настоящее время именно она является наиболее распространенной. С чего начать? Основным источником сведений по PHP является официальный сайт его разработчиков — www.php.net. Однако тем, кто желает разработать сайт с применением PHP, лучше прежде всего посетить русский сайт "PHP по-русски", расположенный по адресу http://php.spb.ru, и загрузить с него два файла — полное описание PHP на русском языке (точный перевод руководства по PHP с сайта www.php.net) и web-сервер Apache с PHP-модулем, сконфигурированным для немедленного использования. Оба файла подготовил и разместил в Сети ведущий этого сайта Дмитрий Бородин. Готовый к использованию web-сервер вместе с интерпретатором PHP, а также системой управления базами данных MySQL вы также можете найти на сайте проекта «Денвер», расположенном по адресу http://dklab.ru/chicken/web. В отличие от вышеупомянутого ресурса "PHP по-русски", ведущие проекта "Денвер" Дмитрий Котеров, Дмитрий Короленко, Игорь Светликов и Андрей Любченко регулярно обновляют свой проект, постоянно размещая на нем свежие версии web-сервера с набором компонентов. Однако установка «Денвера» более автоматизирована, нежели набора с сайта "PHP по-русски", и предусматривает значительно меньшую ее «управляемость». "Денвер" можно порекомендовать тем, кто предпочитает автоматически получить на своем компьютере готовый к использованию web-сервер в целях изучения языка PHP и создания на нем программ, а "PHP по-русски" понравится тому, кто привык все, что ему надо, настраивать сам. Тем более что последнее будет весьма легко — достаточно внимательно прочитать комментарий Дмитрия с сайта и файлы Readme из дистрибутива. Итак, первым делом установите на своем компьютере web-сервер Apache — из «Денвера» или "PHP по-русски" и освойте его использование. После этого вы сможете полноценно работать с программами на PHP на своем компьютере, не выходя в Интернет, например, тестировать разработанные с использованием PHP сайты. Ну, а затем приступайте к изучению языка. В этой главе книги изложены самые основные его понятия и описаны базовые команды, с помощью которых можно создать неплохие PHP-программы. За остальной информацией обращайтесь к описанию языка, тем более что оно переведено на русский язык и снабжено массой примеров кода. Только помните, что в том дистрибутиве web-сервера, о котором говорилось выше, отсутствуют модули, расширяющие возможности PHP, так что некоторые разделы описания будут неактуальны. Впрочем, ничего не мешает вам загрузить нужные модули отдельно и установить их (на сайте http://php.spb.ru описано, как это сделать), однако первое время такая необходимость у вас вряд ли появится. На сайте http://phpclub.unet.ru вы найдете множество примеров сценариев на PHP, сможете загрузить литературу на русском языке, получить от профессионалов в web-программировании ответ на свой вопрос или принять участие в каком-либо обсуждении или пообщаться с коллегами в чате. Архив Форума, расположенного на этом сайте, содержит в себе ответы практически на все мыслимые и немыслимые вопросы по web-программированию на PHP. Также здесь регулярно публикуются новости мира PHP-программирования, рассказывается о новых разработках в этой области, размещается информация о вакансиях web-дизайнеров и программистов на рынке труда. Также немало полезной информации есть в Web-клубе по адресу http://www.webclub.ru/materials/php3, в частности, руководство по PHP, представленное на сайте "PHP для всех", изначально размещалось именно там. Для написания кода на PHP подходит любой текстовый редактор — от «Блокнота» до "Script Editor'а" из пакета Microsoft Office, здесь выбор зависит от вашего личного вкуса и желания. В RuNet'е использовать PHP разрешается, например, на таких бесплатных серверах, как http://www.h1.ru, http://meridian.tomsk.ru, http://webservis.ru, http://www.hut.ru, http://wallst.ru, на иностранных — http://www.saxen.net и других. Однако при выборе бесплатного хостинга для размещения сайта помните, что в подавляющем большинстве случаев вам придется в обязательном порядке размещать на своих страницах рекламные баннеры (за их показ на вашем сайте компании, владеющей сервером хостинга, рекламодатели платят деньги, которые, собственно, и служат оплатой поддержки размещенных на этом сервере сайтов). Кроме того, весьма часто владельцы хостингов с поддержкой PHP и других CGI-языков запрещают размещать на сайтах, расположенных у них, файлы zip, rar, exe, mp3. Впрочем, последнее условие можно обойти, использовав для хранения таких файлов другой бесплатный сервер, — пусть и без поддержки PHP. На рынке платного хостинга ситуация другая — сейчас уже трудно найти хостинг, где бы не предлагали использовать PHP. Тарифные планы, не предполагающие использование PHP, сохранились разве что у некоторых провайдеров услуг доступа в Интернет, параллельно предоставляющих и услугу размещения web-сайтов за отдельную плату. Так что для построения сайтов, использующих PHP, можно выбирать практически любой сервер платного хостинга, оценивая его по различным другим критериям (цена, надежность, скорость и т. д.). Достаточно трудно рекомендовать какую-либо определенную фирму, однако можете попробовать ValueHost (www.valuehost.ru), www.350mb.ru, www.net.ru и другие. Более подробно о PHP вы можете узнать из специализированной литературы, например, из книги "PHP: полезные приемы", готовящейся в настоящее время к выходу в свет в издательстве "Горячая линия — Телеком". При подготовке данной главы использовались материалы из этой книги. Ниже будет рассказано об основах PHP. Весь нижеследующий текст рассчитан на тех, кто имеет хотя бы общее представление о программировании и может понять принципы работы с PHP на основании сравнения его с другими языками. Если такового опыта у вас нет, то для изучения PHP воспользуйтесь специальной литературой или Интернет-публикациями — к сожалению, делать книгу об Интернете еще и учебником по программированию у нас возможности нет. Основы языка Синтаксис PHP прост. Программы на PHP встраиваются в текст web-страницы так же, как и сценарии на JavaScript, VBScript, — окаймляясь угловыми скобками с указанием языка: . Команды PHP обязательно разделяются символом точки с запятой — ";" (символы конца абзаца или конца строки не учитывается никак), после последней в программе команды его можно не ставить. Также символ";" не ставится после условных операторов и операторов цикла. Пример программы на PHP вы можете увидеть на рис. 19.1. Как и во всех языках программирования, в PHP есть возможность работать с переменными — некиими обьектами, имеющими имя и могущими принимать различные значения. Однако работа с переменными в PHP, пожалуй, самая легкая из всех возможных. Переменные не надо заранее обьявлять (если не знаете, что это такое — и не надо), за исключением использования их в функциях, для введения новой переменной достаточно просто присвоить ей какое-либо значение, а для помещения значения переменной в строку текста, имя файла или параметр команды нужно просто написать ее имя в том месте, где должно быть ее значение. Чтобы PHP мог отличать переменные от строк или команд, ее имя должно начинаться со знака доллара — "$" и не должно содержать пробелов или знаков апострофа и некоторых других. При анализе программного кода интерпретатор PHP считает именем переменной все, что содержится между $ и ближайшим к нему символом, недопустимым в имени переменной. Переменные в PHP могут быть четырех типов — число (целое и дробное), строка текста, массив и обьект. Интерпретатор PHP автоматически определяет тип переменной на основании анализа ее содержимого. Подробнее о типах данных вы можете узнать в руководстве по PHP, там же рассказано и об особенностях работы с массивами (и вообще обьяснено, что это такое, если вы еще не знаете). Помните, что для включения переменной в строку текста нельзя использовать символ "+" — он пригоден лишь для числовых выражений. Достаточно просто поместить переменную туда, где она должна стоять — например, в итоге выполнения кода $a="птица певчая"; $b="Дятел — $a" переменной $b будет присвоено значение "дятел — птица певчая". Довольно часто используются сокращенные обозначения арифметических действий над переменными и действий по присваиванию им каких-либо значений. Например, команда $a++ означает, что переменную $a надо увеличить на единицу, а команда $a+=3 — увеличить на 3, что и будет сделано, если она имеет числовой формат. Ниже будут перечислены некоторые основные команды PHP, которых вполне хватит для реализации несложных проектов. Для более полного ознакомления с командами PHP можно изучить Руководство по этому языку, доступное, например, с адреса http://php.spb.ru или другие публикации. · include "имя файла" — команда для включения содержимого одного файла в другой. Содержимое того файла, имя которого указывается в команде, целиком и полностью вставляется на то место, где располагается эта функция, при этом все коды PHP, содержащиеся во вставляемом файле, исполняются так же, как если бы они были на месте этой функции. Пример можно увидеть на рис.. · mail ("Кому", «Тема», "Текст сообщения", "Дополнительные заголовки") — отправка почтового сообщения. При выполнении данной команды на сервере формируется электронное письмо в соответствии с указанными параметрами и отправляется с помощью серверной почтовой программы. В качестве параметра «Кому» может выступать набор адресов, разделенных запятыми. "Дополнительные заголовки" могут быть совершенно любые, разделяться они должны комбинацией символов /n, которая в PHP означает перевод строки. Пример использования функции mail вы можете увидеть ниже, в описании устройства электронного магазина. (Если среди "Дополнительных заголовков" не указано поле From, то оно заполняется по умолчанию, например, именем "Unprivileged User".) · echo «текст» — вывод на web-страницу какого-либо текста. Чтобы вывести на web-страницу значение какой-либо переменной, достаточно просто написать ее имя внутри выводимой строки: команда echo "это цифра $a" выведет в web-страницу текст "это цифра 1", если ранее переменной $a присваивалось значение единицы. · if (условие) {…команды, которые должны выполняться, если условие верно…;} else {…команды, которые должны выполняться, если условие неверно…} — команда, позволяющая выполнить то или иное действие в зависимости от верности или неверности того или иного условия. В фигурных скобках может располагаться несколько команд, разделенных точкой с запятой. В качестве условия может быть оператор сравнения «равно» — "==" (именно два знака равенства!), «больше» — ">", «меньше» — "<" и их комбинации — скажем, "<=" — "меньше или равно". Можно использовать и несколько условий, взяв каждое из них, а также все вместе в скобки и разделяя знаками "&&" — «и» или "||" — «или». Для того, чтобы выполнять различные команды в зависимости от условия, могущего принимать три или больше значений, следует использовать оператор switch (описание смотрите в руководстве), — аналог оператора case в VBA и некоторых других языках. · for (начальное значение счетчика, условие продолжения цикла, изменение счетчика на каждом цикле) {…команды…;} — цикл, то есть повторение указанных в нем команд столько раз, сколько позволет условие изменения счетчика (т. е. переменной, специально выделенной для подсчета числа выполнений команд цикла). К примеру цикл for ($i = 1; $i <= 10; $i++) {echo $i;} выводит в web-страницу числа с 1 до 10, так как в нем изначально устанавливается значение счетчика в 1 — $i=1, каждый цикл его значение увеличивается на 1 — $i++, а продолжаться он будет до тех пор, пока значение счетчика не превысит 10 (т. е. пока $i<=10). Также в PHP можно использовать циклы без открытого обьявления числа повторений — while (условие) {…команды…;} и do {…команды…} while (условие);. Описание их смотрите в руководстве по PHP, отличаются же они тем, что второй цикл (do…while) будет в любом случае выполнен не менее одного раза. Программа на PHP может прерываться кодом web-страницы, — для этого достаточно вставить закрывающий тэг до этого кода и открывающий — после. Все, что находится между ними, будет выдаваться в браузер без какой-либо обработки, рассматриваясь как выводимое с помощью команды echo. Иными словами, код Переменная а равна 1 эквивалентен коду Переменная а равна 1 однако первый вариант меньше нагружает процессор компьютера, на котором расположен интерпретатор PHP. Из сказанного также следует, что все программы на PHP, расположенные на одной web-странице, представляют из себя одну большую программу, — несмотря на то, что они разделяются блоками обычного текста страницы. Именно поэтому переменная, обьявленная в расположенном в начале страницы коде, сохраняет свое значение не только до ее конца, но и во всех присоединяемых с помощью команды include файлах. Вот, к примеру, демонстрация этого — рис. 19.1. Рис. 19.1. Пример PHP-кода. Посмотрите внимательно на код (окна слева) и итог его выполнения (окно браузера справа). Обратите внимание, что переменная a, которой присвоено значение еще в первом программном блоке левой страницы, сохранила его не только в других ее блоках, но и в программе, расположенной во включаемой с помощью команды include страницы. Однако помните, что если вы создаете функцию на PHP (попросту вставляя в программу инструкцию Function имя () {…команды функции…} с целью потом ее вызывать командой имя), то переменные, обьявленные в ней, по умолчанию имеют установленное значение только внутри функции. Кроме того, также по умолчанию переменные, обьявленные вне функции, в ней самой никакого значения не имеют. Подробнее о функциях и о переменных в них читайте в руководстве по PHP, например, с того же сайта http://php.spb.ru. Обычно web-сервер настраивается так, что на предмет наличия программ на PHP просматриваются файлы, имеющие расширение. php, phtml, остальные же файлы передаются в браузер пользователя без поиска в них команд PHP. Делается так для более быстрой работы сервера, а также для обеспечения возможности установки на сервере разных интерпретаторов (например, SSI — Server Side Includes, в технологии, в какой-то мере предшествовавшей PHP), так как тогда каждому из интерпретаторов назначаются свои расширения для обработки соответствующих файлов. Так как PHP-код полностью исполняется на web-сервере, то в страницах, выдаваемых браузеру, он будет отсутствовать, и если кто заинтересуется вашим опытом программирования, то вам придется отправлять ему этот код по почте, так как при просмотре сайта каким-нибудь образом узнать исходный PHP-код его страниц нельзя. Работа с формами Значения переменных можно передавать между различными страницами сайта — с помощью использования форм. Формой называется конструкция, состоящая из поименованных элементов особых типов, заключенных между HTML-тэгами Наиболее важным свойством формы является то, что в ее заголовке — в открывающем тэге
$zak=" \n"; if ($RNS == True){$zak="$zak Русские не сдаются! \n"; } if ($ZAR == True){$zak="$zak За Родину \n"; } if ($PRP == True){$zak="$zak Песни пролетариата \n"; } … mail ("mail@harchikov.ru", "Заказ на кассеты", "С адреса $email с контактными данными $cont пришла заявка на приобретение кассет: $zak. Отправитель пользовался браузером $HTTP_USER_AGENT, работал с IP-адреса $REMOTE_ADDR", "From: $email\nReply-To: $email\nContent-Type: text/plain; charset=windows-1251"); ?> Команда, собственно отправляющая письмо, стоит последней — это mail (описание читайте выше). Так как весьма желательно, чтобы получатель письма мог сразу начать выполнять заказ, не тратя время на расшифровку письма, то с помощью небольшого фрагмента кода на основе данных о значениях переданных переменных создается строка с построчным перечнем полных названий заказываемых товаров (чтобы не было проблем с восприятием интерпретатором кириллических символов в качестве имен переменных, имя каждого checkbox'а содержит только латинские буквы, например, PVS — ) — и уже эта строка помещается в письмо. В результате тот, кто обрабатывает заказы, получит аккуратный список заказанных товаров и сведения о заказчике. Имейте в виду, что для полноценного тестирования функции mail на локальном компьютере на нем должна быть установлена программа — почтовый сервер с соответствущими указаниями в настройках web-сервера, — иначе интерпретатор PHP будет выдавать сообщения об ошибке. Поэтому тестировать описанный здесь сценарий лучше сразу на сервере в Интернете. Вот так, очень просто, вы можете сделать элементарную форму заказа чего-либо через Интернет с отправкой данных этих заказов вам по электронной почте. При использовании данного способа посетителю даже не нужно быть постоянно подключенным к Интернету во время оформления заказа — он спокойно может загрузить страницу с перечнем товаров, отключиться от Сети, выбрать нужные предложения и заполнить поля формы заказа, а затем, подключившись снова, этот заказ отправить. Да и саму страницу со списком ему необязательно получать именно из Сети — вы можете отправить ее кому-либо по почте или поместить на компакт-диски, раздаваемые друзьям или коллегам (не забудьте только в заголовке формы указать полный адрес страницы с программой-обработчиком, как это сделано в приведенном примере). Упомянутый сценарий Интернет-магазина подробно рассмотрен в книге "PHP: полезные приемы". Заключение История PHP — прекрасный пример того, как изобретение, действительно нужное людям, способно завоевать весь мир. Начавшись с небольшого приложения, созданного энтузиастом-любителем, PHP превратился в самый массовый и самый многофунциональный язык web-программирования. Простой синтаксис и логичная структура, отсутствие затрудняющих работу особенностей, модульность конструкции интерпретатора, легкость взаимодействия с базами данных, — все это и сделало PHP таковым. Освоить PHP может каждый. Наличие множества весьма информативных ресурсов Интернета и полнота официального описания языка делают этот процесс легким и быстрым. Для реализации довольно широкого круга задач вполне хватит даже простой модификации фрагментов кода, приводимых в справке к официальному описанию. А, как показано выше, PHP позволяет не только дать посетителям сайта новые возможности, но и серьезно облегчить труд создателя сайта, тем самым сэкономив больше времени, чем затрачено на его освоение. Поэтому вы никогда не пожалеете, что занялись изучением этого языка. Полезные советы · Наиболее частой ошибкой при создании программ на PHP является отсутствие знака точки с запятой после какого-либо оператора. За его наличием надо внимательно следить. Также не следует забывать, что при выполнении в каком-либо условии сравнения на равенство двух переменных между ними необходимо ставить не один, а два знака равенства: if (a==b) и никак иначе. Перед тем, как начинать создание сайта, стоит сесть и продумать общий план будущего Интернет-представительства: что там будет находиться, как его содержимое[52] станет соотноситься друг с другом, какие дополнительные возможности предоставит сайт посетителю, каким будет стиль оформления web-страниц. Для каждого сайта план проектировки будет свой, однако есть некоторые законы, которые стоит изложить. Прежде всего не следует воспринимать эти пожелания как какие-то непреложные инструкции, невесть кем написанные. Это просто сформировавшиеся каноны сайтостроения, исходящие из идеи максимального удобства посетителя, — ведь основным потребителем труда web-дизайнера является именно посетитель сайта. 1. На сайте обязательно должна быть главная страница с кратким каталогом всех разделов сайта, причем с каждой страницы сайта должна быть ссылка на эту главную страницу. Это вполне естественное требование — сайт должен иметь некий «центр», с которого будет возможен общий обзор содержимого всего Интернет-ресурса. Зачастую посетитель, пришедший на одну из страниц сайта (например, в результате поиска в какой-либо поисковой машине), потом переходит на главную страницу и просматривает остальные материалы сайта. 2. Крайне желательно наличие удобного навигатора по сайту, то есть набора ссылок на остальные страницы сайта, реализованных как обычные ссылки или на основе сценариев. В настоящее время наилучшим решением признано размещение списка ссылок на ресурсы сайта в колонке таблицы, располагающейся слева (как, например, на http://www.freeware.ru) или справа (пример — http://antorlov.chat.ru) от основного текста первой страницы (см. рис. 20.1). Рис. 20.1. Два типа расположений навигатора — слева и справа. Решите сами, какой удобнее. Расположение списка ссылок справа имеет определенные преимущества с точки зрения удобства, так как курсор чаще всего находится именно в правой части окна программы (ведь именно там — полоса прокрутки и кнопки закрытия и развертывания и свертывания окна). Если разделов сайта не так и много, то допустимо размещать список ссылок сверху или снизу. Примеры удобных навигаторов на основе JavaScript и Dynamic HTML приведены в главе 22. Желательно размещать навигатор на всех страницах сайта, разве что за исключением чисто специальных (например, отдельных статей, размещенных на сайте). Если сайт обширный, то рекомендуется сделать "карту сайта" — отдельную страницу с минимальным оформлением, содержащую просто список всех доступных пользователям страниц сайта. Ссылка на карту сайта должна располагаться на всех его страницах. 3. На первой странице сайта должна находиться краткая информация о содержании сайта, представленных материалах, авторах сайта. Посетитель, случайно попавший на сайт, не должен гадать, что он может на нем найти. 4. Крайне желательно, чтобы графика на сайте имела лишь вспомогательное значение (за исключением сайтов, посвященных изобразительному искусству и другим подобным тематикам). Многие пользователи отключают отображение графики в своих браузерах для ускорения путешествий по Интернету. Кроме того, пользователи часто сохраняют web-страницы на своем диске, при этом отнюдь не все модели браузеров позволяют (и отнюдь не все пользователи этого хотят) сохранять страницу вместе со всей графикой, вследствие чего сохраненная страница без графики может выглядеть очень непрезентабельно (рис. 20.2). Многие красивые эффекты можно реализовать с помощью стандартных средств HTML, CSS и соответствующего оформления текста. Рис. 20.2. Пример сохраненной на диске страницы, на которой было много графических обьектов. А сначала она была такой красивой… В крайнем случае можно сделать отдельную текстовую версию сайта, полностью повторяющую по своему информационному содержанию основную, на которой нет или очень мало графики. Но это потребует очень больших затрат сил и времени. Поэтому стоит идти на разумный компромисс. И уж, конечно, желательно, чтобы все гиперссылки были текстовые. Использовать в качестве ссылки рисунок допустимо лишь в том случае, если посетителю будет точно известно, что он является ссылкой. В самом крайнем случае можно использовать рисунок как ссылку, но в его поле ALT подробно описать, куда ведет ссылка, и указать, что ее надо нажать. 5. Размер каждой страницы сайта не должен превышать предел в 200–300 килобайт вместе с графикой (оптимально — 50-100), за исключением страниц с большим количеством информации — электронных книг, например. В любом случае при большом размере того или иного файла об этом должно быть сказано около ссылки на него. Разбиение большого файла на части с ссылкой на «продолжение» в конце каждого абсолютно недопустимо — многие пользователи используют функцию браузера "Сохранить обьект как…" и сохраняют страницы, не просматривая их заранее. 6. До любого уголка сайта пользователь должен иметь возможность добраться максимум в два-три нажатия мыши. Крайне желательна оптимизация сайта на предмет как можно более быстрой по тему навигации. Чем меньше нажатий и перемещений курсора требуется от посетителя для просмотра информации на сайте, тем лучше. Недопустима ситуация, когда в качестве первой страницы используется перегруженный графикой документ с надписью «Вход» или даже графическим рисунком, являющимся ссылкой — ничего, кроме дополнительных проблем посетителю, это не дает. 7. Используйте стандартные названия для стандартных частей сайта. Не стремитесь специально к какой-либо стилизации его внешнего вида под тот или иной объект: название «Кают-компания» вместо стандартного «Форум» вызовет по меньшей мере недоумение. Посетитель не должен задумываться, для чего предназначена каждая из частей вашего сайта и что он может там найти. 8. Если сайт регулярно обновляется, то рекомендуется на первой или отдельной специальной странице помещать информацию о том, что же конкретно было обновлено в последнее время — список обновленных страниц с кратким их содержанием, например. 9. Если на сайте представлено большое количество текстовой информации, то обязательно следует размещать на нем не только web-страницы с текстами, но и архивы с ними, желательно в формате Zip. Отнюдь не все пользователи Интернета горят желанием читать тексты в online-режиме. Весьма желательно собирать тексты одинаковой тематики в один архив, чтобы их все можно было загрузить одним нажатием мыши. 10. Крайне желательно разработать правильное цветовое оформление сайта. Использование светлого текста на темном фоне допустимо лишь при условии четкой его видимости, достижимой, например, путем оформления всего текста жирным шрифтом. Страницы с преимущественно текстовой информацией должны иметь светлый, лучше всего — белый фон. Черный фон не допустим ни в каких случаях. Цвет шрифта рекомендуется делать стандартным черным, темно-зеленым или темно-синим. Красный шрифт допустим лишь для некоторых заголовков и выделения самой важной информации. Не используйте на сайте текст, набранный одними заглавными буквами. Помимо того, что это просто некрасиво выглядит, впоследствии его будет очень трудно преобразовать к нормальному виду, если посетитель скопирует этот текст себе и пожелает его как-либо использовать. Для выделения того или иного фрагмента текста вполне достаточно сделать его полужирным. 11. Весьма нежелательно использовать при разработке сайта фреймы. Фрейм — это способ создания внутри web-страницы окна для отображения другой web-страницы, реализуется с помощью тэга . Если страница загружена во фрейм, то она может заменяться на другую без замены содержащей фрейм страницы. Эта возможность — единственное достоинство фреймов. Недостатков же — масса. Во-первых, страницу, загруженную во фрейм, нельзя так просто сохранить на локальном диске. Приходится прибегать к ухищрениям вроде тех, что описаны ниже. Во-вторых, на web-страницу во фрейме нельзя так просто поставить закладку, — она будет ставиться на главную страницу сайта. Страницу во фрейме нельзя перезагрузить кнопкой «Обновить» — приходится использовать одноименный пункт из меню правой кнопки мыши. Можно еще долго перечислять проблемы, однако, думается, и этого достаточно. Обычно фреймы используются для создания меню навигации, но для этой цели существует множество других средств, лишенных вышеперечисленных недостатков. Если до сих пор вы не знали, что такое фреймы, то и не стремитесь узнать о том, как их создавать. Ничего, кроме проблем для посетителей сайта и для вас, их использование не принесет. Знайте лишь, что если вы попали на страницу, на которой есть фреймы, то сохранить ее вместе с содержимым фреймов можно лишь из Microsoft Internet Explorer 5.0 и выше путем выбора из меню "Сохранить как…" пункта "Web-страница, полностью". Если же вы работаете с другой моделью браузера, то для сохранения страницы вам придется использовать пункты типа "Вид — В виде HTML" или одноименный из меню правой кнопки мыши, вначале просматривая HTML-код страницы, загруженной во фрейм, потом сохраняя его в качестве текстового файла, и только затем, переименовав его в. html, получая возможность загрузить его в браузер. Мнение о том, как все это неудобно, можете высказать web-дизайнеру сайта, откуда вам пришлось таким образом сохранять материалы. 12. Использование новых технологий отображения графики (Flash, VRML, MetaStream) допустимо лишь в том случае, если достигаемые ими возможности не могут быт реализованы другими средствами и имеют большое значение для представления информации на сайте. Ни в коем случае нельзя использовать их "для красоты" — без особой к тому необходимости. Ясно, например, что на сайте Интернет-магазина использование технологии MetaStream может серьезно помочь посетителю сделать свой выбор (эта технология позволяет отобразить трехмерное изображение обьекта с возможностью его вращения пользователем вокруг всех трех осей, очень удачно использовалась некоторое время в одном Интернет-магазине — рис. 20.3), но на большинстве других сайтов использовать ее незачем. Рис. 20.3.Пример использования технологии MetaStream на сайте Интернет-магазина. Можно посмотреть товар со всех сторон. То же самое относится и к технологии Flash, — если для реализации предназначения сайта ее возможности непосредственно не требуются, то и не стоит ее использовать. Хотя бы потому, что страницу с Flash-роликом трудно сохранить на жесткий диск компьютера и впоследствии просматривать в автономном режиме. Разумеется, в случае применения технологий типа Flash обязательно необходимо дать посетителю возможность от них отказаться: если Flash-заставка расположена на входной странице сайта, то на ней же должна обязательно присутствовать ссылка на дальнейшую его часть, позволяющая пропустить заставку и сразу перейти к просмотру сайта. 13. Делайте страницы сайта максимально удобными для пользователя и минимально ограничивающими его свободу в работе с ними. Например, не следует твердо определять ширину текста на странице, помещая его в таблицу фиксированной ширины. Если вы так сделаете, то те пользователи, которые пожелают сузить окно браузера до размера, меньшего заданного вами (или работающие на мониторах с горизонтальным расширением, меньшим указанной вами ширины таблицы), сделать этого не смогут, — появится горизонтальная полоса прокрутки. Это весьма затруднит чтение текста. В отсутствии же таблицы данной проблемы не возникнет, а любой посетитель, посчитавший, что строчки текста слишком длинны для удобного чтения, просто уменьшит ширину окна браузера. * * * Перед проектировкой сайта необходимо поставить себя на место его посетителя и попытаться осознать его потребности для того, чтобы впоследствии их учесть. Хороший и посещаемый сайт можно создать только при условии его удобства для тех, кто будет его посещать. Тогда и время и силы, затраченное на проектировку удобного сайта, окупятся сторицей. Веселый подвальчик Все приведенные здесь истории являются вольными пересказами случаев, рассказы о которых путешествуют среди «компьютерщиков». Были ли они в реальности или нет — знают лишь их авторы, но о том, кто эти авторы, никто уже не знает… Пленочная клавиатура Одна подмосковная фирма приобрела в московском компьютерном магазине 10 компьютеров. Через пару недель в этот же магазин приехала секретарша этой фирмы и приобрела 10 прозрачных пластмассовых крышек для клавиатур. Через неделю она приехала опять и приобрела уже 20 штук. Удивленные менеджеры спросили покупательницу: а, собственно, зачем она это делает. В ответ они услышали, что "уж очень они ненадежные, лопаются каждую неделю, пальцы царапают…" Выяснилось, что сотрудники фирмы посчитали, что крышки являются защитным покрытием для клавиатуры и все это время печатали прямо через них… Мышь-акселератор В службу сервиса компьютерного магазина позвонила девушка и сказала, что у нее "компьютер не заводится". На вопрос, что она конкретно делает, звонящая ответила: "я жму на белую педаль, а компьютер не включается". Этой педалью оказалась мышь — девушка положила ее на пол и посчитала, что от нажатия на "маленькую белую педальку" компьютер заведется, как автомобиль… Усмирение CD-Rom'а Один программист, решив подшутить над сотрудниками бухгалтерии организации, в которой он работал, вечером после их ухода с рабочих мест поместил на бухгалтерские компьютеры небольшую программу, функцией которой было открытие и закрытие лотка CD-ROM'а с периодом в 2 секунды. Запрограммировав начало ее работы на 15–00 следующего дня, он на следующий день с удовольствием представлял себе, какой шум поднимется среди мнительных бухгалтеров, боящихся любой поломки в сложной технике. Когда в 16–00 следующего дня к нему никто не обратился, он решил посмотреть, что же происходит в бухгалтерии. И увидел, что лотки CD-ROM'ов на всех компьютерах этого отдела крест-накрест заклеены полосами широкого скотча, прочности которого как раз хватало для противодействия мотору, выдвигающему эти лотки… Подставка для кофе Звонок в службу сервиса компьютерного магазина: Клиент: — Алло, тут у меня сломалась компьютерная подставка для кофе. Менеджер (удивленно): — Простите, это как? Клиент: — Ну, я позавчера у вас купил компьютер, а сегодня она сломалась. Надо бы заменить… Менеджер: — Простите, но у нас нет в продаже компьютеров с подставкой для кофе и никогда не было. Вы, наверное, что-то путаете. Может, вы приобрели компьютер на какой-нибудь рекламной акции? Как она выглядит, эта подставка? Клиент: — Да ни на какой акции я не был, компьютер в вашем магазине приобрел. А подставка — да из компьютера выезжает, кнопку нажать только надо. Еще на ней надпись: 20 — хэ. Менеджер долго не мог ничего ответить, поняв, что "компьютерная подставка для кофе" — это лоток CD-ROM'а. Громкий компьютер У клиента сервисной службы компьютерного магазина после включения компьютера раздавался противный пронзительный звук, который на протяжении всего времени работы на компьютере то усиливался, то уменьшался, то вообще исчезал. Создавалось впечатление, что внутри компьютера стоит двигатель электрички, работающий на полную мощность. С этой проблемой клиент и пришел в службу сервиса. Выяснилось, что сборщик его компьютера подключил встроенный динамик на место индикатора активности жесткого диска, и, соответственно, звук из динамика раздавался всякий раз, когда к жесткому диску происходило обращение. Размещение Долгие дни, а то и ночи труда по созданию вашего представительства в Web наконец-то завершились! И вот, наконец ваш сайт готов и лежит в отдельной папке на вашем компьютере. Сделаны все страницы, написаны все скрипты, нарисованы картинки… Теперь надо поместить сайт во всемирную сеть Интернет. Вариантов такого размещения, по большому счету, два. Можно приобрести у RIPE отдельный IP-адрес (или сразу несколько адресов) и, приобретя мощный компьютер и подключив его к какому-либо маршрутизатору, уже входящему в Интернет, тем самым стать владельцем полноценного узла Сети. Однако данный вариант весьма сложен и дорог: стоимость оборудования, необходимого для такого подключения, достигает многих тысяч долларов, кроме того, за выделение IP-адреса, за само подключение к маршрутизатору и за передаваемые данные тоже придется платить, — соответственно RIPE и владельцу маршрутизатора. Да еще и самостоятельно настраивать все программное обеспечение приобретенного компьютера, чтобы превратить его в web-сервер. В связи с весьма большой стоимостью и трудностями обслуживания размещение сайта на отдельном собственном компьютере, входящем в Сеть, — прерогатива крупных предприятий и провайдерских фирм.[53] Для простого частного сайта (или сайта небольшой компании) данное решение будет крайне невыгодным и неокупаемым. Поэтому в Интернете существуют специальные "службы хостинга",[54] которые берут всю заботу по установке компьютерной техники и подключению ее к Сети, а также по настройке и обслуживанию программного обеспечения на себя. Каждому пользователю такой службы выделяется часть места на жестких дисках ее компьютеров, и ему для создания сайта и его дальнейшего развития достаточно лишь размещать файлы на своем сайте в соответствии с требованиями хостера. Доступ из Интернета к сайтам пользователей, размещенным на службе хостинга, организуется с помощью использования виртуального хостинга,[55] что позволяет иметь на все такие сайты только один IP-адрес или их небольшое число. В свою очередь, все службы хостинга можно разделить на три группы. Во-первых, это коммерческие предприятия, предоставляющие хостинг за деньги. Таковых немало — в RuNet'е это, например, www.majordomo.ru, www.net.ru, www.valuehost.ru и другие. Коммерческие службы хостинга обычно предоставляют своим клиентам немало возможностей по работе с сайтом, — от поддержки большого числа языков сценариев, выполняющихся на стороне сервера (например, PHP, Perl) до организации на сайте почтовой службы. Цены на услуги коммерческого хостинга в настоящее время варьируют от 10 до 60–70 долларов за сайт среднего обьема в месяц. Все коммерческие хостеры дают возможность своим клиентам привязать к размещенному у них сайту принадлежащее клиенту доменное имя (обычно — второго уровня), а некоторые даже оказывают услуги по его регистрации, иной раз по более низким ценам, чем непосредственно в РосНИИРос'е и Ru-центре. Во-вторых, хостинг может быть предоставлен и бесплатно. В Сети есть специальные службы, предоставляющие возможность бесплатного размещения у себя сайтов для всех без исключения. Несмотря на известное выражение про сыр и мышеловку, качество базовых услуг на некоторых из них иной раз не уступает и платным сервисам. Живут службы бесплатного хостинга в основном за счет показа рекламы на страницах управления сайтом. Однако все они предоставляют пользователю лишь доменные имена третьего уровня (типа name.hoster.ru) или даже длинные адреса (например, www.hoster.ru/~name). На некоторых службах бесплатного хостинга есть возможность привязывать зарегистрированное ранее доменное имя второго уровня к сайту, размещенному на них, однако таковых служб довольно мало. Практически на всех службах бесплатного хостинга использование сценариев, исполняющихся на стороне сервера, запрещено, — при размещении на них такого сценария он попросту не заработает. На тех же службах, где эти сценарии использовать можно, на страницы размещенных сайтов в обязательном порядке включается реклама, обычно в виде нескольких баннеров. Доход от показа этих баннеров идет владельцам службы хостинга. На настоящий момент в России наиболее известными являются такие сервера бесплатного хостинга, как www.netman.ru (предоставляет 10 мегабайт для почтового ящика и сайта с доменным именем третьего уровня, в качестве же основного домена для такого имени предлагается немалый набор имен второго уровня — от fromru.com до professor.ru), www.chat.ru (дают 10 мегабайт места и доменное имя третьего уровня name.chat.ru), www.newmail.ru (32 мегабайта места, имена третьего уровня вида name.nm.ru), www.h1.ru (разрешают выполнять сценарии на стороне сервера при условии обязательного размещения рекламы, запрещают размещать архивы и mp3-файлы). Конкретные условия размещения сайтов всегда указаны на страницах сайта самой службы хостинга. На многих серверах бесплатного хостинга существуют так называемые "конференции технической поддержки", в которых пользователи могут задать вопросы, высказать пожелания. Обязательно отыщите такую конференцию на том сервере, где вы хотите разместить сайт, и почитайте сообщения в ней, чтобы знать, чего от этого сервера можно ожидать. Следует помнить, что от непредвиденных ситуаций никто не застрахован, и проблемы могут возникнуть как на платном, так и на бесплатном хостинге. Однако проблемы платных хостингов обычно устраняются быстрее и лучше, чем бесплатных. В сетевом сообществе считается, что размещать сайт коммерческой фирмы на сервере бесплатного хостинга несколько несолидно. В определенной степени это так — может казаться, что если у организации нет денег даже на оплату места под сайт, то дела у нее идут явно плохо. Но верно это лишь для коммерческих проектов, для которых проблема оплаты не является существенной, — если нет денег даже на сайт, то он, наверное, уже и не нужен… Для сайтов, которые не являются фирменными представительствами в Сети или Интернет-магазинами, вполне подойдет и бесплатный сервер для размещения. Помните, что сайт, размещенный на службе бесплатного хостинга, но красиво и со вкусом оформленный, содержащий всегда свежую и полезную информацию, будет цениться гораздо выше плохо сделанного отдельного сервера с громким именем. Стоит также иметь в виду, что оплата платного хостинга всегда повременная (то есть необходимо платить определенную сумму каждый год или месяц), как, впрочем, и оплата доменного имени второго уровня (она вносится сразу за год). При неоплате очередного месяца сайт может быть удален. На бесплатных же хостингах удаление сайтов либо вообще не производится (как на www.chat.ru), либо совершается после 6-12 месяцев отсутствия обновлений сайта (как на www.newmail.ru, www.h1.ru) или посещения web-интерфейса управления сайтом (как на www.netman.ru). Так что если вы не желаете ежемесячно платить какие-либо деньги или беспокоитесь, что в будущем можете не суметь этого сделать, — выбирайте бесплатный хостинг. И, наконец, третий вид хостинга — это сайт у провайдера доступа в Интернет. В этом случае хостинг обычно является дополнительной услугой, предоставляемой бесплатно при условии оплаты доступа в Сеть у данного провайдера, хотя может быть предоставляем и отдельно — за плату, но цены на размещение сайта у провайдеров доступа в Интернет обычно выше цен на услуги служб коммерческого хостинга. При выборе провайдера всегда стоит интересоваться возможностью предоставления хостинга, однако перед принятием решения о размещении на нем своего сайта следует внимательно изучить условия оплаты услуг. Единственно приемлемый вариант таких условий включает в себя: · отсутствие абонентской платы за собственно сайт; · хранение сайта все время, пока на счету пользователя есть деньги; · отсутствие обязательного ежемесячного списания денег со счета при пользовании услугами по доступу в Интернет; · хранение счета неограниченное время; · возможность доступа к файлам сайта для его обновления при доступе в Интернет через другого провайдера. Иными словами, провайдер должен обещать, что все то время (хоть десять лет), пока на счету пользователя есть хоть один цент, а он сам не пользуется услугами доступа в Сеть посредством данного провайдера, страничка должна сохраняться. Кроме того, должна быть возможность обновлять страничку при работе через другого провайдера. Иначе вполне возможна ситуация, когда сайт будет уничтожен провайдером за неуплату денег, и все труды по рекламе сайта окажутся напрасными. Например, условия должны выглядеть так: доступ в Сеть — 90 центов в час, минимальная наработка в месяц отсутствует, при этом бесплатно предоставляется место под страничку размером в 2 мегабайта, доступ по FTP, в том числе и из сетей других провайдеров. При такой ситуации можно легко добиться увеличения квоты места под страничку, зарегистрировавшись у провайдера несколько раз под разными именами. В этом случае, как нетрудно понять, для каждого аккаунта можно создать свой сайт, связав все такие сайты между собою перекрестными ссылками. Ограничивающим моментом здесь может быть необходимость первоначальной оплаты услуг провайдера в размере не менее какой-либо суммы (например, десяти долларов). Надо только имя для сайта (часто совпадающее с вашим логином доступа в Интернет через данного провайдера), выбирать покрасивее. Некоторые провайдеры предоставляют возможность демо-доступа на свои сайты (то есть при доступе под определенными логином и паролем есть возможность путешествовать по сайту провайдера без какой-либо оплаты). Обязательно надо проверять все такие демо-входы и смотреть, нет ли возможности доступа из них к страницам пользователей. Если есть — то стоит очень внимательно изучить условия размещения страницы у этого провайдера, так как возможность бесплатного доступа к сайту (то есть без оплаты доступа в Интернет) привлекает пользователей весьма и весьма серьезно, хотя, к сожалению, использовать такой доступ смогут только жители того города, где расположен данный провайдер. Наилучшее расположение сайта — это, разумеется, служба платного хостинга. В настоящее время цены на услуги коммерческих хостеров довольно низкие, однако в том случае, если они все равно остаются недостаточно приемлемыми, можно объединить нескольких web-мастеров в одну команду и, сложившись деньгами, приобрести один аккаунт на всех у того хостера, который позволяет создавать большое число доменных имен третьего уровня, и зарегистрировать красивое имя второго уровня. Ну, а затем для каждого из web-мастеров создать папку и сопоставить ей выбранное им имя третьего уровня. В таком случае можно будет использовать все возможности платного хостинга (надежность, поддержку CGI-сценариев) за меньшие деньги. Разумеется, есть и недостатки — у всех web-мастеров будет один логин и пароль на доступ к аккаунту, что снижает защищенность сайта от взлома путем похищения пароля, а совокупное место, предоставляемое хостером согласно выбранному тарифному плану, придется делить на несколько частей согласно внесенной каждым доле. Некоторые российские поисковые системы и каталоги http://www.yandex.ru http://www.aport.ru http://www.list.ru http://www.rambler.ru http://www.ru http://www.weblist.ru http://www.logoslovo.ru http://www.webgid.ru http://www.susanin.net http://www.catalog.chat.ru http://www.kot.ru http://www.up.ru http://www.ulitka.ru http://www.look.ru http://www.stars.ru http://www.hi.ru Некоторые зарубежные поисковые системы и каталоги http://www.googlie.com http://www.altavista.com, http://www.yahoo.com, http://www.lycos.com, http://www.infoseek.com, http://www.excite.com, http://www.hotbot.com, http://www.euroseek.net Если же платный хостинг неприемлем или не требуется по каким-либо другим соображениям, то наилучшим выбором будет размещение сайта у провайдера с возможностью бесплатного доступа к нему. Если же места под сайт в таком случае оказывается недостаточно, то стоит задуматься о службах бесплатного хостинга. Наилучшим по качеству работы на сегодняшний день является, по мнению автора, сервер www.netman.ru, однако стоит обратить внимание и на другие службы. Например, привлекает «вечность» аккаунта на сервере www.chat.ru, — даже если вы надолго уедете в командировку или потеряете возможность доступа в Интернет, ваш сайт будет продолжать радовать посетителей. Так что возможностей много — используйте ту, которая вам нужна. Реклама мини-сайта: немного рекомендаций Несколько последующих страниц посвящены весьма интересной для многих теме — рекламе своего сайта. Разумеется, приведенные здесь советы и рекомендации вряд ли подойдут для рекламной кампании сайта крупной фирмы, — законы и правила рекламы там свои, да и занимаются ею специализированные организации. А вот тем, у кого нет желания прибегать к услугам рекламных агентств, а сделать свой сайт известным хочется, прочесть их стоит. Стоит сразу оговориться, что, поскольку Интернет — весьма быстро развивающаяся и меняющаяся структура, то к тому моменту, когда вы будете читать эти строки, многое может изменится, и информация главы станет не совсем актуальной. Однако общие принципы останутся прежними — скорее всего, поменяются только адреса серверов. Для начала снова и снова стоит повторить старую, но, увы, столь часто игнорируемую истину: самая лучшая реклама сайта — его интересное содержание. Сайт, на котором помещена "пара фоток и ссылок" или «крутой» текст о том, как «классно» автор сайта кликает по кнопкам в FrontPage, будучи даже «раскрученным» согласно всем рецептам, ничего, кроме отвращения к его автору, у населения Сети не вызовет. Поэтому перед тем, как решиться на раскрутку сайта, задайте себе вопрос — а вам приятно было бы зайти на такой же сайт, если бы его создал другой человек, а не вы? И если нет — сделайте выводы. Но у вас, надеюсь, другой случай. И вот ваш сайт, содержащий действительно нужную и важную для многих информацию, создан и размещен в Сети. И теперь пришла пора его рекламы — так называемой «раскрутки» сайта. В «раскрутку» обычно входят следующие мероприятия. Регистрация сайта в поисковых системах Средства поиска информации в Интернете можно разделить на две большие группы: это каталоги и поисковые машины. Каталог является структурированным набором ссылок на различные сайты: все ссылки разнесены по соответствующим категориям. Непример, ссылки на сайты с бесплатными программами помещены в категорию "Компьютерные технологии", а ссылка на сайт с информацией о воспитании детей — в категорию «Семья». Обычно вместе с ссылкой приводится еще и краткое описание ресурса. Пользователь, желающий найти какую-нибудь информацию по интересующей его теме, должен перейти в категорию, название которой, возможно, наилучшим образом совпадает с необходимой темой, просмотреть список приведенных там ссылок и выбрать нужную. Каталоги составляются теми, кто их организовал, — создатели каталога изучают Сеть, выбирают наиболее, по их мнению, интересные ресурсы, снабжают их описаниями и помещают в подходящую категорию. Желающие обычно могут добавить в каталог и свою ссылку с помощью специальной формы или письма авторам. Иногда в каталоге может иметься система поиска, который ведется по названиям ресурсов их описаниям или ключевым словам, введенным тем, кто ресурс регистрировал. Если содержимое ресурса изменяется, то в каталоге изменения произойдут лишь в том случае, если его составители об этом узнают и примут соответствующие меры по изменению описания. Поисковые машины действуют по несколько другому принципу. Они как бы «сканируют» Сеть, составляя базу данных из встреченных по пути слов. Название «машина» условное — она представляет собой попросту программу, запущенную на каком-либо компьютере. (Поскольку «сканирование» Сети и поддержание базы данных по словам требует очень высоких вычислительных ресурсов, то обычно для работы такой программы выделяется отдельный компьютер или даже несколько, — например, www.yandex.ru располагается на четырех компьютерах, работающих как одно целое под управлением специального программного обеспечения.) К примеру, такой поисковой программе дается адрес какой-либо web-страницы. Программа загружает страницу, вносит в свою базу данных все (или часть — например, первые двести) слова, встречающиеся на ней и помечает в базе данных, что эти слова встречаются на web-странице по такому-то адресу. Затем программа просматривает страницу на предмет наличия на ней гиперссылок на другие страницы и загружает уже их, и цикл повторяется. Если ссылки со страницы ведут за пределы данного сайта, то поисковая программа исследует и те сайты, на которые ее приведут эти ссылки. Адрес каждой просмотренно странички вносится в базу данных, и поисковая программа впоследствии неоднократно возвращается к ним (например, раз в четырнадцать дней), чтобы отследить возможные изменения. Если страничка перестает существовать, то ее адрес убирается из базы данных. Если сравнивать два вышеописанных типа поисковых систем в плане эффективности их использования для поиска какой-либо информации в Сети, то стоит сказать, что поисковые машины нужны тогда, когда необходимо найти, например, определенный текст или данные. Например, если требуется отыскать текст какой-либо книги, то в поисковую машину достаточно ввести имена ее героев, а для поиска информации о каком-нибудь человеке можно ввести в машину его фамилию, и она выдаст список страниц, на которых эта фамилия упоминается. Но если необходимо найти информацию по общей теме, частности которой неизвестны, то тут лучше воспользоваться каталогами, — там можно просмотреть все ресурсы Сети, посвященные данной тематике, и просмотреть их все или выбрать наиболее подходящий. Регистрация сайта в поисковых машинах и каталогах происходит очень просто: надо зайти на сайт-каталог, найти там ссылку "Добавить Url" или "Добавить сайт", нажать на нее и заполнить приведенную там форму. Перед регистрацией рекомендуется сделать небольшой текстовый файл, в котором поместить: · название сайта, · его URL, · ваш адрес электронной почты, · ваше имя, · описание сайта длиной до 200 символов, · Некоторые российские серверы бесплатных программ http://www.freeware.ru http://www.listsoft.ru http://www.freesoft.ru http://www.download.ru http://www.softarea.ru http://www.softpile.com http://www.chasik.com http://files.com.ua описание сайта длиной до 500 символов, · описание сайта с произвольной длиной, · набор ключевых слов через пробелы длиной до 200 символов, · набор ключевых слов через запятые длиной до 200 символов. Впоследствии вам будет гораздо легче просто копировать из этого файла через буфер обмена заранее заготовленный текст в соответствующие графы форм при регистрации своего сайта в каталогах. Если часть сайта написана на английском языке, то стоит составить и его английское описание. Некоторые каталоги (например, www.ru) позволяют поместить у себя описание сайта как по-русски, так и по-английски. Кроме того, в этом случае можно зарегистрировать сайт и в иностранных поисковых системах. Если на сайте представлена написанная Вами программа, то не забудьте поместить ее на сервера, содержащие ссылки на программы. На таких серверах необходимо указывать ссылку на "домашнюю страницу" программы, что приведет на ваш сайт посетителей, интересующихся программой. Выше, во врезке приведен небольшой список наиболее популярных в русской части Интернета каталогов и поисковых машин. Он, безусловно, неполон — web-страниц с подобиями каталогов в Сети очень много. Но в большую часть таких каталогов добавить новую ссылку можно только с помощью письма ее автору. Скорее всего, он попросит об ответной услуге — ссылке с вашего сайта на его страницу, что делать стоит лишь в случае, если вам понравится его сайт. Да и цифры посещаемости большинства подобных каталогов невелики. Следует избегать регистрации в каталогах, требующих в качестве обязательного условия размещение на регистрируемом сайте ссылки на каталог или счетчика. Вы ведь зарегистрируете свой сайт во многих каталогах, — представляете, сколько вам предстоит ставить ссылок? А ведь почти всегда тебуется не простая ссылка, а логотип, то есть рисунок, который иногда даже должен каждый раз загружаться с удаленного сервера. Если на странице будет больше пяти-шести таких картинок, то загружаться она будет крайне долго. А если какой-нибудь из серверов с картинками еще к тому же и работать не будет, то вместо картинки останется пустое место, что испортит дизайн страницы (рис. 21.1). Рис. 21.1.Сколько здесь было картинок с ссылками на разные каталоги! Но вот незадача — недогрузились и испортили весь вид страницы. Исключение из этого правила составляют лишь счетчики посещений — весьма полезные дополнения для сайта. На настоящее время в Сети есть немало сайтов — "серверов статистики", предоставляющих счетчики. Например, www.top.list.ru, www.hotlog.ru, www.logoslovo.ru и др. При регистрации на таком сайте вы должны указать адрес своего сайта и его краткое описание, а взамен вам предоставят фрагмент HTML-кода, который необходимо разместить на своем сайте. Код представляет из себя набор JavaScripts, которые отправляют на сервер статистики информацию о посетителе (модель и характеристики браузера, разрешение монитора, страницу, с которой посетитель пришел на сайт и некоторые другие параметры), а также отображают сам счетчик с указанием количества посетителей. Впрочем, встречаются системы счета статистики, не требующие размещения на сайте видимого счетчика, — например, www.hotlog.ru. Серверы статистики, особенно www.hotlog.ru, предоставляют весьма подробные отчеты о посещаемости сайтов, на которых стоят их счетчики. Так, из этих отчетов вы сможете узнать, с каких сайтов к вам чаще всего приходят посетители, какие слова, введенные в поисковые сервера, чаще всего приводят посетителя к вам на сайт, какие у ваших посетителей браузеры, операционные системы. Доступна даже информация о географическом местоположении посетителей. Эти данные могут серьезно помочь при разработке плана рекламы сайта. На серверах статистики имеются богатые возможности по настройке параметров счетчиков. Многие системы, предоставляющие счетчики, одновременно являются также и каталогами (например, www.logoslovo.ru, тот же www.hotlog.ru). Весьма неплохо устанавливать на сайт лишь такие счетчики посещений, которые предоставляются каталогами — чтобы и посетителей считать, и в каталоге присутствовать. Поэтому после создания сайта посетите какой-нибудь сервер статистики и создайте там себе счетчик. Во всяком случае, всегда будете знать, скольким людям вы хотя бы попытались помочь достать нужную информацию. Обмен ссылками При обмене ссылками с каким-либо ресурсом вы ставите на своем сайте ссылку на него, а его администратор, в свою очередь, ставит ссылку на ваш. В отличие от регистрации сайта в каталогах не стоит обмениваться ссылками со всеми сайтами подряд. Лучше всего договориться о таком обмене со своими друзьями и коллегами, тоже имеющими свои сайты в Сети. Однако стоит помнить, что по содержанию на вашем сайте ссылок на другие сайты посетители вашего сайта будут судить о вас. Поэтому не надо увлекаться обменами ссылками с "сайтами Васи Пупкина" вроде тех, о которых упоминалось выше, и уж тем более с сайтами эротического содержания. Очень хорошие результаты может дать обмен ссылками с сайтами, посвященными той же тематике, что и у вас, — так вы не только получите приток посетителей на свой сайт, но еще и, может быть, приобретете новых единомышленников и друзей! Рекламная кампания Наверняка во время путешествий по Интернету на многих сайтах вы видели полосу с изображением, рекламирующим какой-либо ресурс Интернета, обычно анимированным и располагающуюся вверху или внизу web-страницы, причем при нажатии на изображение можно было попасть на рекламируемый сайт. Это так называемый баннер, один из основных способов рекламы сайтов в Сети (рис. 21.2). Рис. 21.2. Баннеры Баннером[56] называется рисунок в формате Gif или Jpeg, рекламирующий какой-либо ресурс Интернета и имеющий определенный размер. При размещении на web-странице баннер является ссылкой, ведущей на рекламируемый ресурс, то есть пользователь компьютера, нажавший на баннер, перейдет на тот сайт Интернета, который рекламируется этим баннером. В принципе баннер — это красивая замена обычной ссылке. Ничего не мешает использовать его вместо обычных ссылок на соответствующие сайты. Но в Интернете существуют специальные баннерные сети, специализирующиеся на распространении баннеров в Сети. В такую сеть обьединяется большое количество сайтов, согласных демонстрировать на своих страницах баннеры других ресурсов Интернета в обмен на показ своих баннеров на других сайтах или за определенную плату. Баннерная сеть устроена так. В Интернете с помощью специального программного обеспечения создается особый ресурс. На нем организуется база данных, содержащая адреса сайтов-участников и их баннеры — обычно картинки в формате Gif или Jpeg, или Flash-ролики, удовлетворяющие определенным критериям. На каждом сайте — участнике баннерной сети в страницы сайта его web-мастером устанавливается специально разработанный код, при своей загрузке сообщающий в центр баннерной сети адрес этого сайта и отображающий на странице сайта из базы данных сети выбранный произвольно или с учетом определенных критериев баннер. Отображение на странице сайта баннера, предоставленного баннерной сетью, называется показом баннера и является единицей расчетов между баннерной сетью и ее участниками. В баннерной сети ведется учет, сколько раз на том или ином сайте были показаны баннеры других сайтов, и рассчитывается в соответствии с правилами баннерной сети количество возможных показов баннеров этого сайта на других ресурсах Интернета, входящих в эту баннерную сеть. Разница между количеством показов чужих баннеров на сайте и числом показов баннера этого сайта на других сайтах называется комиссией и оговаривается заранее в правилах баннерной сети. Обычно комиссия составляет от пятидесяти до десяти процентов, то есть на каждые десять показов на сайте чужих баннеров баннерная сеть обязуется показать баннер этого сайта на других сайтах, например, девять раз при комиссии в десять процентов. В результате у баннерной сети образуется некоторый излишек показов баннеров (каждый сайт — участник баннерной сети как бы «отдает» ее создателям некоторое количество показов чужих баннеров на своих страницах). Возможность показов баннеров в пределах этого излишка баннерной сетью продается желающим: то есть баннеры сайта, не участвующего в баннерной сети и не показывающего на своих страницах баннеры других ее участников (или показывающего в слишком малом количестве), могут быть показаны на сайтах — участниках сети за определенную плату. За счет этого баннерная сеть живет и, возможно, приносит доход своим создателям. При больших размерах баннерной сети в Интернете размещается несколько ресурсов, обычно представляющих из себя отдельные предназначенные исключительно для работы с баннерной сетью компьютеры, на которых хранятся баннеры и база данных по ним и по сайтам-участникам. При необходимости показа баннера на каком-либо web-сайте он загружается с ближайшего компьютера баннерной сети. Код, отображающий баннер на web-странице, пишется так (обычно с использованием скриптов на Javascript), чтобы при повторных загрузках пользователем той же страницы отображался уже другой баннер, берущийся с компьютера баннерной сети, а не из кэша браузера пользователя. На настоящее время в русской части Интернета наиболее большими являются баннерные сети InterReklama Advertising (http://www.ir.ru) и Russian Link Exchange (http://www.linkexchange.ru). Эти сети предоставляют большой выбор дополнительных услуг. Например, можно показывать чужие баннеры на одном сайте, а рекламировать своим баннером другой. Имеются богатые возможности по указанию сайтов, на которых должен показываться баннер — можно, например, дать баннерной сети указание показывать тот или иной баннер лишь на сайтах, посвященных определенной тематике или только пользователям из Москвы, — такие настройки называются таргетингом. Таргетинг — это адресация баннера, обращающегося в баннерной сети, на определенные сайты или определенным посетителям. При регистрации в баннерной сети внимательно изучите возможности таргетинга и постарайтесь максимально их использовать. В самом деле, если ваш сайт посвящен оружию, то зачем рекламировать его на сайтах, посвященных кройке и шитью, и наоборот? И если ваш сайт целиком и полностью на русском языке, то какой смысл показывать его баннер на компьютерах, где нет поддержки русского языка (а это тоже может определить баннерная сеть)? Грамотное использование таргетинга может серьезно увеличить процент отклика на баннеры. Компьютер баннерной сети определяет по IP-адресу пользователя, загружающего страницу с баннером, его местоположение, и выдает ему баннер в соответствии с условиями таргетинга баннеров. Узнать физическое местоположение пользователя нетрудно — если, к примеру, IP-адрес пользователя (абсолютно условно) — 123.124.125.126, а согласно базе данных по провайдерам России, вложенной в компьютер баннерной сети, этот адрес принадлежит московскому провайдеру NewTech, то пользователь с таким IP-адресом, скорее всего, в Москве и находится. Таргетинг позволяет адресовать свою рекламу наиболее вероятным ее потребителям — ясно, что рекламой фармацевтического сайта с наибольшей вероятностью заинтересуются посетители медицинских сайтов, а вот посетителям сайтов с новым программным обеспечением она вряд ли будет нужна. Кроме того, практически все банерные сети позволяют «накапливать» показы баннеров — можно показать на своем сайте чужие баннеры, например, тысячу раз в течение месяца, запретив показы в сети своих баннеров, а затем, устроив большое обновление своего сайта, дать команду баннерной системе показать все девятьсот «накопленных» баннеров (при комиссии в десять процентов) в один день. Таким образом можно приурочивать рекламные кампании и приход новых посетителей к тем или иным событиям на сайте. У многих баннерных сетей имеются свои особые условия. Так, обычно на странице сайта можно размещать баннеры нескольких баннерных систем, но некоторые системы неодобрительно относятся к такой практике и требуют, чтобы других баннеров на странице было немного. У всех баннерных систем есть "защита о накруток" — при попытке сделать программу, которая будет загружать страницу своего сайта с баннером несколько тысяч раз в сутки баннерная система выявит эту ситуацию (попросту определив IP-адрес компьютера, с которого проводилась массовая загрузка страницы с баннером) и в лучшем случае не засчитает эти показы, а в худшем — исключит сайт из баннерной системы. Также практически все баннерные системы не принимают баннеров с порнографическими рисунками или ненормативной лексикой. В Сети есть система «Баннербанк», предназначенная специально для создания баннерных сетей. Любой пользователь может создать в ней свою баннерную сеть без каких-либо серьезных затрат. В настоящее время на базе «Баннербанка» работает множество подобных сетей, организованных частными пользователями, — к примеру, Баннерообмен научных ресурсов (http://www.srbe.net). Обычно такие сети объединяют сайты одной тематики, что очень выгодно в плане рекламы. Располагается «Баннербанк» по адресу http://go.bb.ru. Интерфейс сервера отличается удобством и многофункциональностью. Существует определенный стандарт размеров баннеров. У каждой сети в принципе может быть свой стандарт, но чаще всего используются общепринятые международные правила. Так, обычно баннер должен иметь размер 468*60 пикселов. Используется также стандарт 100*100 пикселов и другие форматы, например, 234*60 и.т.д. Иногда баннерные сети используют сложные баннеры, представляющие собой форму с выпадающими меню, кнопками выбора и т. д. Использовать возможность систем обмена баннерами, конечно, привлекательно, но перед тем, как это делать, стоит все же подумать. Помните, что не только ваш баннер будет показываться на сайтах Интернета, но и вам на своем сайте придется терпеть чужие баннеры. Не помешает ли это его дизайну и восприятию? Системы обмена баннерами хорошо использовать тогда, когда сайт уже в какой-то степени «раскручен» и посещаем, особенно если сами эти баннеры рекламируют другой сайт, не тот, на котором показываются баннеры системы обмена. Так можно «раскрутить» малоизвестный сайт за счет более известного. Соотношение между количеством кликов на баннере и количество его показов называется кликабельностью баннера. Обычно это соотношение не превышает десятых долей процента и сильно зависит от вида баннера. Считается, что наилучшую кликабельность дает квадратный баннер размером 100*100 с приказывающей направленной надписью (типа "Ты студент? Жми сюда"), расположенный справа внизу страницы. Также весьма кликабелен баннер 468*60, находящийся на расстоянии 1/3 от верхней границы экрана. Следует помнить, что основное предназначение баннера — не столько привлечение посетителей на сайт, сколько информация о его наличии на просторах Сети. Поэтому по возможности старайтесь указывать на баннере название и URL своего сайта, а также его тематику. Может, посетитель и не нажмет на баннер, но нужное имя наверняка запомнится, и потом, когда ему потребуется именно та информация, что доступна с вашего сайта, оно само всплывет в памяти. Недопустимы баннеры, по своему сюжету не связанные с тематикой сайта. Если на баннере изображены полуобнаженные женщины, то тот, кто на него нажимает, ожидает увидеть в результате своего действия именно их, и ничего более. И если он не получает желаемого, то разочарование заставит его очень плохо думать об авторе рекламируемого таким образом сайта. Вряд ли это вам нужно. Другие способы Можно придумать множество других способов привлечения посетителей на свой сайт. Однако всегда следует помнить, что главное на сайте — это его информационное содержание. Поэтому следует стремиться не к простому увеличению посещаемости сайта, а к тому, чтобы сайт посещали именно те, кому его информационное наполнение действительно необходимо и интересно. Если на сайт заходит пользователь в поисках нужной ему информации, а там ее не оказывается, то вряд ли он будет очень рад своему визиту, если только не найдет на сайте еще что-нибудь, его интересующее. Например, можно сделать листовки с адресом сайта и раздавать их всем желающим. Если сайт предназначен для какой-либо определенной группы лиц (например, для студентов), то стоит сделать упор на рекламу именно в этой среде. Можно посещать различные гостевые книги других сайтов и помещать в каждую из них краткую рекламу своего сайта, — это, конечно, стоит делать несколько завуалированно, например, предлагая посетителям гостевой книги обсудить какую-либо публикацию, доступную на вашем сайте. Можно давать обьявления в обычные газеты (лучше в газеты бесплатных обьявлений). И уж, конечно, никогда не надо забывать указывать адрес своего сайта на визитках и подписях к письмам. И помните, что цель рекламы — не прославление своего имени в Сети, а донесение до пользователей Интернета информации о том, что у вас есть другая информация, которая может быть им полезной. И только. А собственная слава придет потом, если то, что находится на вашем сайте, действительно нужно людям. Полезные советы · В Microsoft Outlook Express имеется возможность во время получения почты узнать, каков совокупный обьем получаемых сообщений. Для этого нужно подвести курсор к наименованию процесса в окне «Задачи» и посмотреть всплывающую подсказку. Ну, а узнав обьем и количество пришедших сообщений, можно понять, стоит ли дальше продолжать их загружать или пришла пора лезть в ящик через web-интерфейс или протокол IMAP (смотря где ящик расположен), чтобы его почистить. Для доступа к ящику по протоколу IMAP можно использовать специальные программы — например, Magic Mail Monitor (бесплатный, можно взять с адреса www.geocities.com/SiliconValley/Vista/2576), которые в соответствии с возможностями протокола позволяют просматривать заголовки сообщений, информацию об их отправителе и размере на почтовом сервере без загрузки самих сообщений, а также удалять ненужные письма прямо с сервера. В этой главе вы найдете небольшую подборку полезных советов и приемов web-дизайна, которые помогут сделать ваш сайт красивее и удобнее, а вашу работу — более продуктивной. Отправка почты с сайта На многих сайтах в Сети вы наверняка могли видеть поля ввода информации, которые предназначены для получения каких-либо данных от посетителей. Скажем, заполняет посетитель анкету, нажимает кнопку «Отправить», и вся введенная информация автоматически пересылается администратору данного сайта. С помощью языка PHP такую форму ввода можно сделать за пару минут — об этом подробно рассказано в главе 19. Но что же тогда делать тем, чей сайт расположен на сервере бесплатного хостинга, на котором нет возможности работать с PHP? Только одно — использовать почтовую программу посетителя. Ведь она есть практически у всех, — электронная почта по-прежнему остается самым популярным сервисом Всемирной Сети. Пусть на основе данных из формы будет сформировано письмо, которое поместится в папку исходящих писем почтового клиента посетителя и отправится при первом же сеансе работы с почтой. Несмотря на некоторое неудобство такой схемы, у посетителя наверняка останется положительное впечатление от сайта вследствие такого проявления оказанного ему внимания. Для того, чтобы поместить на web-страницу сервис отправки почты, необходимо вставить в нее форму ввода данных, реализуемую с помощью тэга Параметр enctype показывает, что из себя представляет содержимое письма. Так, если он отсутствует или браузер не может его воспринять, то данные формы пересылаются в виде вложения. Вот примерный текст формы, отправляющей на определенный адрес письмо, созданное из данных, введенных в форму. Я желаю заказать книгу . Доставить почтой Доставить по подписке Союзпечати Контактная информация для связи с Вами: Ваш адрес электронной почты: На рис. 22.1 показано, как она выглядит на web-странице. Формирование письма произойдет, как только посетитель нажмет кнопку, имеющую тип «submit». Однако, к сожалению, данный процесс полноценно пройдет лишь в том случае, если в качестве используемой по умолчанию почтовой программы установлен Microsoft Outlook Express или Microsoft Outlook. Другие почтовые клиенты будут обрабатывать передаваемые им браузером данные, введенные в форму, не совсем корректно. Скажем, The Bat! не способен брать из формы что-либо, кроме адреса получателя и темы, — то есть само письмо, увы, отправлено не будет. Во избежание подобных ситуаций следует предупредить посетителя сайта в пояснительном тексте рядом с формой отправки о том, что ее следует использовать только при установленном в качестве почтового клиента по умолчанию Microsoft Outlook Express (или Microsoft Outlook), и указать рядом с формой ваш обычный адрес электронной почты для пользователей остальных почтовых клиентов. Рис. 22.1. Так выглядит описанная в тексте форма для отправки писем Автопереход Для того, чтобы после загрузки web-страницы происходил автоматический переход на другую страницу, принято ставить в ее области window.location.replace("адрес страницы, куда произойдет перенаправление, обязательно с http://"); Команда window.location.replace() загружает в браузер посетителя страницу с указанным адресом, но не помещает информацию о ней в «Историю» ваших путешествий в Web. Тем самым предотвращается случайное возвращение посетителя на страницу с перенаправлением. Если вам пришлось переместить свой сайт на другой сервер, то оставьте на его предыдущем месте небольшую страничку с вышеприведенными тэгом или скриптом перенаправления на ваш новый адрес. Тогда те посетители, которые придут на ваш сайт из каталогов и поисковых систем, где вы регистрировали еще старый адрес сайта, не будут для вас потеряны. Restricted Area — Защищенная зона Если надо организовать на сайте группу web-страниц, доступ в которую будет возможен лишь при помощи пароля, то обычно данное задание реализуется с помощью сценариев на каком-нибудь CGI-языке: Perl, PHP. На серверах бесплатного хостинга использовать данные языки обычно запрещено, однако можно прибегнуть к нехитрому приему, основанному на JavaScript. Придумайте пароль. Создайте страницу с именем, совпадающим с паролем (например, если пароль — hgty23jyhg, то страница должна иметь имя hgty23jyhg.htm), а на ту страницу, откуда производится переход в часть сайта, защищенную паролем, вставьте форму с полем ввода пароля, кнопкой типа button и небольшой скрипт: При нажатии кнопки произойдет переход на страницу, имя которой было введено в поле ввода текста. Как такая форма выглядит — показано на рис. 22.3. Рис. 22.3. Пароль на вход — без CGI. Однако этот способ ограничения доступа возможен не на всех серверах, а только на тех, где запрещен так называемый "листинг директорий". Листинг директорий — это возможность просмотра содержимого папки на удаленном сервере при отсутствии в ней файла, загружаемого по умолчанию (или при неправильной конфигурации web-сервера даже при наличии такого файла). Вы наверняка во время путешествий по Интернету встречались с ситуацией, когда вместо запрошенной web-страницы высвечивается некое подобие Проводника Windows, а в верхней строчке — ссылка на "Parent Directory" (рис. 22.4)? Рис. 22.4. Здесь листинг директорий разрешен… Это означает, что на этом сервере листинг директорий разрешен, а запрошенной вами страницы не существует. Список файлов в окне браузера — это другие файлы в той же папке, в которой должна была бы быть запрошенная вами web-страница. Если же на сервере листинг директорий запрещен, то при попытке обратиться к несуществующей web-странице будет выдано сообщение об отсутствии на сервере такой страницы. Оно будет сгенерировано либо браузером, который получит соответствующее уведомление от сервера (рис. 22.5), либо самим сервером. В последнем случае обычно демонстрируется небольшая реклама этого сервера. Рис. 22.5…а здесь запрещен. Ясно, что ограничение доступа к страницам сайта, описанное выше, возможно только там, где листинг директорий запрещен. В противном случае достаточно будет ввести любой неправильный пароль, чтобы просмотреть все файлы сайта. Поэтому перед размещением сайта следует проверить допустимость листинга директорий на сервере, где предполагается его расположить, запросив наверняка несуществующую web-страницу. Где можно применить такую структуру разграничения доступа? Да хотя бы в системе онлайнового обучения. При организации образовательных ресурсов с системой контроля знаний возникает проблема разграничения доступа к заданиям разной степени сложности, а также к ответам на них. Сделайте в этом случае так, чтобы паролем для перехода к следующему вопросу был правильный ответ на предыдущий. Или, скажем, ваш сайт посвящен вопросам медицины, но вы не хотите, чтобы некоторую информацию узнали неспециалисты. Например, технология лечения бронхиальной астмы в случае использования теми, кто не знает некоторых аспектов и тонкостей развития этого заболевания, способна привести к тяжелым осложнениям. Вследствие этого доступ к страницам, содержащим ее описание, желательно предоставлять лишь дипломированным врачам. Выясните посредством переписки по электронной почте степень компетентности желающего ознакомиться с содержимым «защищенной» части вашего сайта и отправьте ему пароль. Если вы не хотите использовать один и тот же пароль для всех посетителей, то просто заведите на каждого желаемого посетителя по странице с уникальным именем-паролем. На каждую же из этих страниц поместите параметр refresh, как описано выше, перенаправляющим посетителя на заглавную страницу «защищенной» части. Для добавления нового посетителя «защищенной» части вам потребуется всего лишь поместить на свой сайт маленькую однотипную страницу с параметром refresh и именем, соответствующим паролю нового пользователя. Безусловно, в последнем случае существует риск того, что кто-нибудь из не очень сознательных посетителей станет распространять адрес заглавной страницы «защищенной» части вашего сайта. Это, конечно, неприятная перспектива, но ее можно в значительной степени предотвратить, регулярно меняя имена страниц «защищенной» части и, соответственно, ссылки на них на страницах с именами-паролями.[57] Но самое интересно, что подобную систему разграничения доступа можно применить отнюдь не только при создании сайтов. Программа Microsoft HTML Help Workshop дает возможность создавать файлы HTML-справки вроде тех, что лежат в основе справочной системы Microsoft Office 2000 или Microsoft Internet Explorer 4.0 и выше (они имеют расширение .chm). При этом в качестве основы для таких файлов берется совокупность связанных между собою web-страниц. Скажем, вы можете отконвертировать ваш сайт в chm-файл, и тогда он будет занимать меньше места и находиться в одном файле. В результате передать его другу или отослать по почте целиком станет легче. Так вот. После создания chm-файла узнать имена web-страниц, послуживших для него источниками, можно лишь декомпилировав его той же программой Microsoft HTML Help Workshop. При этом все ссылки внутри этого файла между вошедшими в него web-страницами сохранятся, и та система разграничения доступа, что была описана выше, будет полностью функциональна. В итоге вы, даже не умея программировать, легко сможете создать систему контроля знаний, набор загадок и ответов, базу знаний с разграниченным доступом. Достаточно будет лишь оформить ваш проект как сайт и научиться работать с Microsoft HTML Help Workshop, что очень легко — у последней интерфейс интуитивно понятный. Воспользоваться вашим творением сможет любой владелец Microsoft Internet Explorer 4.0 или более поздней версии. Microsoft HTML Help Workshop входит в состав пакета Microsoft Office 2000 Developer Edition, а кроме того, доступна на сайте www.microsoft.com. Выпадающее меню Если вы хотите на web-страницу поместить выпадающее меню для быстрой навигации по сайту, например, такое, как на рис. 22.6, где при выборе какого-либо пункта происходит автоматический переход на соответствующую страницу, то его можно сделать с помощью средств JavaScript. Вот пример такого скрипта: Рис. 22.6. Выпадающее меню — удобный способ ориентации на сайте. А для того, чтобы при выборе того или иного пункта меню происходило открытие выбранной страницы в новом окне, первая строка сценария должна иметь вид Событие onchange происходит при изменении значения меню — при выборе того или иного его пункта. Команда top.location.href="адрес" заставляет браузер перейти по указанному адресу, а команда window.open="адрес" открывает web-страницу по этому адресу в отдельном окне. «This» — это заменитель имени обьекта select. Свойство этого обьекта this.selectedIndex принимает значение порядкового номера выбранного пункта, а если ему задать значение 0, то выбранным станет самый первый пункт. Команда this.options[this.selectedIndex]. value принимает значение, указанное в свойстве value выбранного пункта. Если ваш сайт не очень большой, но содержит много различных материалов, то в качестве карты сайта удобно использовать не отдельную страницу, а такое выпадающее меню, в котором перечислены все матералы. Всплывающая подсказка Это простой прием, но о нем, увы, знают не все web-мастера. Чтобы добавить к любому обьекту web-страницы всплывающую подсказку, как, скажем, на рис. 22.7, добавьте в его тэг параметр title="Подсказка". К примеру, для тэга это будет выглядеть как . Добавлять всплывающие подсказки можно практически к любым тэгам web-страницы. И к тэгу , и Рис. 22.7.Добавить к гиперссылке всплывающую подсказку просто, а для посетителя — удобно. Динамическая карта сайта Представим себе, что нам надо разработать сайт, содержащий научные статьи по различным областям, скажем, медицины. Статей немного — всего десять-пятнадцать штук, но необходимо обеспечить удобство посетителя при работе с сайтом, и, поскольку статьи большие, дать каждой краткое описание ее содержания — реферат, поскольку загружать все статьи посетителю вряд ли потребуется. Возникает вопрос — а как разместить на сайте эти рефераты и список статей? На одной заглавной странице? Но тогда она получится очень большая, и ее придется прокручивать, что, во-первых, потребует от посетителя лишних движений мышью или нажатий на клавиши, а, во-вторых, приведет к трудности восприятия всего обьема информации на странице. Разместить каждый реферат на своей странице (или даже на специальной странице с рефератами)? Но тогда для перехода на страницу с рефератом посетителю придется нажимать мышью ссылку, что, во-первых, требует лишних действий, а, во-вторых, и это главное, уводит посетителя с главной страницы, а он может затем туда и не вернуться и не посмотреть остальные разделы сайта. Как же быть? Как обеспечить удобство работы с насыщенной информацией главной страницей? Очень хорошим способом было бы размещение всей информации (например, краткого содержания остальных страниц сайта) на его первой странице так, чтобы она была доступна вся сразу, но без прокрутки. Например, так, как сделано на странице http://antorlov.euro.ru/resurses.htm (рис. 22.8). Рис. 22.8. Чтобы прочитать реферат статьи, не надо даже ни на что нажимать. Достаточно просто подвести курсор к ее названию. При заходе на нее в левой части страницы пользователь видит список статей, а справа от списка — небольшое приветствие. Как только он просто наведет, даже не нажмет, курсор мыши на какое-либо название статьи в списке, то на месте приветствия появится краткий реферат статьи. Нажав же на название, он может загрузить архив со статьей. Если посетитель пожелает прочитать статью в online-режиме, то для этого на странице предназначены кнопки справа, ведущие на страницы, содержащие тексты статей. В результате посетителю, пришедшему на эту страничку, достаточно «пробежать» курсором по списку и, даже не переводя глаза, прочитать все рефераты, чтобы получить полное представление о содержании сайта. Удобно? Да, действительно. Одно движение руки и чтение текста на одном и том же месте — и вся информация сайта вам известна. Для тех же, кто привык к традиционным длинным прокручивающимся спискам статей с рефератами, предназначена специальная кнопка внизу справа под списком. При нажатии на нее на экране появится новое окно со списком статей, причем появится почти мгновенно, так как список будет не грузиться с сервера, а сгенерируется из содержимого странички. Как же это реализовать? Использовать возможности VBScript и Dynamic HTML. Скачайте страничку с вышеуказанного адреса и посмотрите, как она устроена. Графики там мало (только фон, портрет и кнопки навигации), так что ее дизайн без графики заметно не изменится. Для того, чтобы устройство подобной страницы было понятно, приведу краткую ее схему, в которой содержатся основные структурные элементы. Данное пояснение также демонстрирует возможности HTML и языков сценариев. Вначале — краткое пояснение. Тэг Заголовок страницы. Верхняя часть страницы. При наведении курсора на нее текст в правой части таблицы меняется на приветствие. Начало самой таблицы Первая колонка, соответствующая названиям статей Создание места для отображения рефератов путем слияния ячеек между собой. Число NN должно быть равно количеству статей плюс один. Тот самый тэг, содержимое которого будет меняться при наведении курсора на ссылки. Изначально здесь может быть короткий текст, который будет виден во время загрузки страницы — пока она полностью не загрузится. Приветствие посетителю. Оно будет загружаться тогда, когда курсор находится над верхней или нижней частью таблицы, замещая собой текст предыдущего тэга. Само по себе не видно посетителю — это просто "место хранения" текста приветствия. document.all.txt0.innerHTML=document.all.privet.innerHTML; Этот скрипт исполняется сразу после окончания загрузки страницы и автоматически замещает изначальный текст тэга Основное «хранилище» текстов рефератов. Каждая строка типа Правая часть первой строки таблицы. Содержит описание еще одной колонки — для того, чтобы можно было разместить в правой колонке ссылки на online-варианты статей. Основной блок сценария. Каждый такой фрагмент описывает одну строку таблицы, строка содержит название статьи, ссылку на ее архив, ссылку на online-вариант статьи, а также команду Dynamic HTML, выпол няющуюся при наведении курсора на строку и заменяющую содержимое видимого тэга Таких фрагментов должно стоять друг за другом столько, сколько рефератов и статей представлено на странице. Естественно, в каждом следующем фрагменте ссылки и параметр onmouseover должны быть другими, — document.all.txt0.innerHTML=document.all.txt2.innerHTML и т. д. Конец таблицы Кнопка, запускающая скрипт, помещенный ниже. Он выводит содержимое всех тэгов Заголовок скрипта. В нем указывается язык скрипта — VBScript. Sub btn1_onClick() Означает, что скрипт выполняется при клике на кнопку btn1. Set nwnd=window.open Эта команда открывает новое окно браузера и подготавливает его для вывода в него данных. er="URL сайта" Адрес сайта, на котором расположены архивы статей (с знаком "/" в конце). Подставляется в адреса для скачивания файлов в тексте открытого нового окна — чтобы можно было сохранить этот текст на жестком диске и впоследствии загрузить файлы. nwnd.document.writeln (" Список Запись заголовка новой страницы. nwnd.document.writeln (txtNN.innerHTML+" Собственно выведение текстов рефератов в новое окно. Таких строчек должно быть столько же, сколько и рефератов. В каждой строчке должно быть указано соответствующее значение txtNN и fileNN — для каждого реферата. nwnd.document.writeln (" Эти статьи доступны на сайте Запись конца страницы. End Sub Конец скрипта. Нижняя часть страницы. При наведении курсора на нее текст в правой части таблицы меняется на приветствие. Конец страницы. Этот текст является основой, «костяком» страницы. При разработке сайта на эту основу можно добавлять графику, текст, другие скрипты. Так, поскольку Netscape Navigator и остальные браузеры не поддерживают многие возможности Dynamic HTML, то для них не стоило бы скрывать текст рефератов — они ведь тогда не смогут его отобразить! Выход — в небольшом скрипте: if (navigator.appName == "Microsoft Internet Explorer") { document.write (" } Этот скрипт нужно расположить на месте тэга "", то оно будет иметь размеры, указанные в таблице (то есть здесь — высота в 10 пикселов и ширина в 20 пикселов).
", всего с одним рисунком. Подчеркнутый адрес является ссылкой. Как видите, возможности таблиц стилей позволяют сделать web-страницу похожей на красочный полиграфически изданный буклет, причем без использования сложной и медленно загружающейся графики.
", а затем в скрипт или описание события элемента — команду: "pict.src="picture2.jpg""(то есть установить значение свойства «источник» — src — элемента pict как picture2.jpg). При выполнении этой команды исходный рисунок picture1.jpg будет замещен новым — picture2.jpg. Как можно видеть, такая возможность отrрывает очень широкие перспективы перед web-дизайнерами. Можно, к примеру, организовать «галерею»: посетитель нажимает название картины и ему тут же, без перехода на другую страницу, показывается эта картина.
", и тогда они будут отображаться при просмотре web-страницы через браузер. Кроме того, несложные графические файлы могут быть конвертированы в специальный формат VML и вставлены в web-страницу, однако VML способен воспринимать только браузер Microsoft Internet Explorer версии 5.0 и выше, как, впрочем, и web-архивы — файлы, в которых с помощью использования стандарта MIME обьединяются в один файл web-страница и все размещенные на ней рисунки и другие обьекты.
" путь к ее файлу. Если графический обьект располагается в той же директории, что и web-страница, на которой он размещен, то в его тэге "
" достаточно указать только название файла. Если он расположен в одной из папок сайта, на котором находится web-страница, то можно указать относительный путь к нему — типа "
". Если же рисунок, включаемый в web-страницу, располагается на другом сайте, то этом случае в тэге "
" должен быть указан полный адрес рисунка — вида "
". При просмотре страницы браузер сам загрузит нужную графику с указанного адреса. Полный адрес рисунка можно указывать и в двух других случаях.
Глава 18. Script Editor: web — редактор из недр Office
, и др. — можно вызвать диалоговое окно "Table"-"Insert Table", указать там нужные параметры таблицы, и ее пустая заготовка будет вставлена в документ, — останется только разместить рисунки и текст. Кликнув правой кнопкой мыши на каком-либо тэге и выбрав пункт Properties, можно задать параметры тэга в специальном диалоговом окне, и они будут правильно и корректно переведены на язык HTML и помещены в код.
Глава 19. PHP: интерактивность в действии
Глава 20. Правильный проект — залог успеха
Глава 21. Размещение и реклама сайта
Глава 22. Приемы и секреты web-дизайна
, и
. Если вам надо добавить подсказку к тэгу, который не допускает такого (скажем, кнопка формы), то просто окружите этот обьект тэгами