лПДЙТПЧЛБ — ЬФП ЧБЦОП. В смысле, кодировка — это важно. Именно таким образом будет выглядеть данная фраза, будучи записанной в кодировкеKOI8-R. Очевидно, что если разработчик какой-либо web-страницы ненароком спутает кодировку или просто установит ее значение неправильно, посетители будут долго любоваться на подобный бессмысленный набор символов, но прочитать его, увы, не смогут.
Как вы уже знаете, некоторые http-серверы умеют автоматически изменять кодировку web-страниц в зависимости от настроек пользовательского броузера, однако на самом сервере документы хранятся в какой-либо одной кодировке. Если конкретной информации о том, в какой кодировке следует загружать страницы на сервер, администрация узла не предоставляет, в девяноста процентах случаев из ста по умолчанию используется кодовая страница windows-1251, а в остальных это, скорее всего, KOI8-R. Известно, что программное обеспечение, работающее под управлением операционной системы Microsoft Windows, в том числе текстовый редактор Notepad, сохраняет файлы на диск в кодировкеwindows-1251. Как быть, если согласно требованиям сайта, предоставляющего вам web-хостинг, необходимо размещать данные в другой кодировке? Вот для этого и существуют многочисленные программы-перекодировщики кириллицы.
Программа ConvHTML, разработанная С. Поповым из Усинска, автоматически перекодирует текстовые файлы и документы HTML из Windows 1251 в KOI8-Rи обратно. Интерфейс ее предельно прост (рис. 9.1).
Рис. 9.1. Интерфейс программы ConvHTML
Рабочее окно ConvHTML разделено на две вертикальные части: в левой указывается список документов, подлежащих перекодированию, а в правой отображается результат работы программы. Панель инструментов в интерфейсе ConvHTML отсутствует, вместо нее имеется селектор, с помощью которого можно указать, в какую кодировку вы намерены транслировать файл. Конвертация web-страниц с использованием программы ConvHTML осуществляется достаточно быстро: в меню Файл следует выбрать пункт Открыть и указать нужный документ, после чего программа спросит вас, желаете ли вы перекодировать только этот документ или все файлы, содержащиеся в данной директории. Для того чтобы выполнить конвертацию документа, необходимо выбрать пункт Перекодировать и сохранить в том же меню. Программа сохранит отконвертированный файл под старым именем в исходной папке.
К достоинствам утилиты ConvHTML можно отнести простой и доступный интерфейс, возможность работы с файловыми списками, возможность преобразовывать из кодировки в кодировку как html-документы с расширениями .htm и .html, так и текстовые файлы. Главным недостатком является то, что данная программа умеет обращаться только с двумя кодовыми страницами, которых на практике используется значительно больше, а также то, что она сохраняет файл с использованием его первоначального имени, замещая при этом старый, и не дает возможности сохранить перекодированный документ в другой директории.
СОВЕТ Преобразуя составляющие ваш сайт html-документы в другую кодировку, сделайте копию папки, в которой они хранятся. Если процесс конвертации прошел с ошибкой или впоследствии у вас возникла необходимость внести изменения в уже перекодированный документ, вы можете использовать исходную копию, заместив ею старый файл и перекодировав донную web-страницу заново.
Программа ConvHTML доступна для свободного копирования на многочисленных сайтах Интернета, предлагающих посетителям бесплатное программное обеспечение. К примеру, ее можно поискать на сервере, расположенном по адресу http://www.freeware.ru.
Программа-перекодировщик SNK DEcode (рис. 9.2) была создана специалистами российской компании «Тихая Гавань М», она доступна для бесплатной загрузки на сайте http://www.book.ru/snk. В отличие от утилиты ConvHTML SNKDEcode является полнофункциональным приложением, предназначенным для трансляции кириллицы из одной кодировки в другую. Эта программа поддерживает следующие направления конвертации файлов: KOI8-R -> Windows-1251и обратно, Alt DOS -» Windows-1251 и обратно, KOI8-R -> Windows-1251,ISO - Windows-1251, MAC - Windows-1251 и, наконец, Unicode - Windows-1251. Возможна также конвертация файлов по заданной пользователем схеме, с преобразованием какого-либо файла из одной кодировки в другую в произвольном порядке.
Рис. 9.2. Интерфейс программы SNK DEcode
SNK DEcode поддерживает конвертацию текстовых файлов и документов HTML, файлов RTF, а также текстовых файлов с произвольным расширением. Главная панель содержит стандартные кнопки очистки рабочего пространства программы, открытия файла, копирования и вставки фрагментов кода из буфера обмена, сохранения текущего документа в произвольную директорию, вывода обрабатываемого кода на принтер, а также несколько других весьма полезных кнопок. Функция Перезагрузить в начальном виде позволяет восстановить состояние окон после внесения в документы каких-либо изменений, функция Запомнить — сделать «моментальный снимок» рабочего пространства программы, которое восстанавливается при нажатии кнопки Перезагрузить в начальном виде, и, наконец, функция Поменять местами меняет местами рабочие окна.
Перекодировка осуществляется нажатием соответствующей кнопки на панели инструментов. При выборе пункта По схеме программа выводит на экран диалоговое окно, позволяющее пользователю задать произвольный алгоритм трансляции файла (рис. 9.3).
Рис. 9.3. Диалоговое окно настройки пользовательской схемы трансляции файла
Пользовательская схема перекодировки формируется следующим образом: вменю, появляющемся при нажатии на расположенную в левом верхнем углу окна кнопу, следует выбрать исходную кодировку, а в меню, появляющемся при нажатии на кнопку, расположенную правее, — кодировку, в которую осуществляется трансляция. Включение пары кодировок в список осуществляется нажатием кнопки Добавить, отправка созданного списка на исполнение — нажатием кнопки Выполнить. Сформированный таким образом список кодовых пар отображается в левом поле диалогового окна настройки пользовательской схемы трансляции, правое окно содержит перечень сохраненных на диске схем. Управлять этим перечнем можно с использованием кнопок Сохранить и Удалить. При нажатии на первую из них текущая схема записывается на диск, а при помощи второй можно уничтожить неиспользуемую схему. Кнопка Очистить удаляет все компоненты списка кодовых пар и, наконец, кнопка Закрыть закрывает данное диалоговое окно.
Рабочее пространство программы SNK DEcode разделено на два вертикальных поля аналогично программе ConvHTML: в одном из них отображается исходный текст преобразуемого файла, в другом — его отконвертированная версия.
Помимо основных программных свойств SNK DEcode имеет еще целый ряд полезных дополнительных функций, вызываемых с применением меню Сервис. Для их использования необходимо выделить при помощи мыши в окне исходного текста какую-либо символьную последовательность и выбрать соответствующий пункт указанного меню. Функции Верхний регистр и Нижний регистр преобразуют символы выделенной фразы соответственно в заглавные или строчные, функции Lat - Cyr и Cyr - Lat изменяют латинские символы на символы кириллицы и обратно в соответствии с их расположением на клавиатуре компьютера. Команда Убрать пробелы удаляет все лишние пробелы из выделенного участка преобразуемого документа, сокращая итоговый размер файла, и, наконец, функция Убрать теги удаляет из исходного файла все элементы разметки HTML, оставляя в нем лишь содержательный текст.
Не лишена эта программа и существенных недостатков. Главное упущение разработчиков SNK DEcode заключается в том, что данное приложение умеет открывать файлы с расширением .htm, но, увы, не распознает документы с расширением .html, что вызывает ряд ощутимых неудобств у пользователей.
Небольшая утилита Exclude Symbols, автором которой является Александр Вардугин из Кемерово, отличается поразительной функциональностью и нетрадиционным англоязычным интерфейсом (рис. 9.4).
Данная утилита позволяет работать с файловыми списками, иными словами —перекодировать содержимое целых директорий, а кроме того, умеет автоматически распознавать кодировку исходного текста. Это очень удобно в случае, если какая-либо папка содержит подлежащие обработке файлы в различных кодировках: вам не надо указывать отдельные настройки для каждого из преобразуемых документов, Exclude Symbols самостоятельно определит исходную кодировку и решит, необходимо транслировать файл или нет. Программа поддерживает четыре кодовые страницы: KOI8-R, Windows-1251, DOS-866 и ISO, в пределах этих стандартов возможна трансляция текстовых файлов и документов HTML. Помимо прямых функций Exclude Symbols позволяет выполнять еще целый ряд полезных действий: преобразование всех содержащихся в документе символов в заглавный или строчный регистр, произвольную замену одних символов в исходном файле другими, замену пробелов отступами табуляции и оптимизацию файлов методом удаления из них лишних пробелов. Эту удобную утилиту можно бесплатно загрузить с сервера http://perecod.chat.ru.
Рис. 9.4. Интерфейс программы Exclude Symbols
Небольшая программа Виктора Степанова со скромным названием «Перекодировка кириллицы» (рис. 9.5) доступна для бесплатного копирования с сайта http://perecod.chat.ru или с домашней странички разработчика (http://www.glasnet. ru/~victors). Она не требует инсталляции и готова к запуску сразу после загрузки с удаленного сервера.
Рис. 9.5. Внешний вид программы Перекодировка кириллицы
Среди особенностей этой программы следует отметить расширенные возможности работы с файловыми списками: она позволяет обрабатывать как отдельные файлы формата TXT, HTML и RTF, так и целые каталоги с вложенными подкаталогами. Примечательно, что помимо кодовых страниц Windows-1251,KOI8-R, DOS, ISO и MAC, в которых может быть сохранен исходный файл, Перекодировка кириллицы может преобразовывать текст обрабатываемых документов в Unicode и транслит с сохранением всех правил записи слов русского языка в транслитеральной кодировке. Интерфейс программы (см. рис. 9.5)состоит из трех функциональных полей: в верхнем можно указать исходный файл или директорию (а можно набрать путь с клавиатуры или воспользоваться кнопкой Открыть), в меню Кодировка следует выбрать исходную кодовую страницу преобразуемых файлов из предложенного списка, в поле Результат указывается целевая кодировка. Еще одной полезной особенностью данной утилиты является меню Строки, с помощью которого можно задать преобразование символов переноса строк транслируемого текста в стандарт различных операционных систем.
Как видите, ассортимент программного обеспечения, предназначенного для конвертирования файлов из одной кодировки кириллицы в другую, чрезвычайно велик. Выбирайте любую программу, соответствующую вашим вкусам, целям или потребностям, и перекодируйте на здоровье.
На нашей планете нет двух абсолютно одинаковых людей, равно как и нет двух абсолютно одинаковых программ. Если бы все броузеры были совершенно идентичны, web-дизайнеру стало бы просто скучно жить. Причем ощутимые различия наблюдаются не только между клиентским программным обеспечением разных производителей, но и между двумя версиями одной и той же программы. Внешне интерфейс Microsoft Internet Explorer 4.0 и Microsoft InternetExplorer 5.0 может быть схожим вплоть до деталей, однако, уверяю вас, набор «глюков» у них совершенно различен. Однако самые существенные расхождения в алгоритмах обработки кода HTML имеются в двух наиболее популярных броузерах, созданных компаниями, которые никак не могут договориться между собой, чтобы достичь хотя бы приблизительного соответствия в отображении их продукцией интернетовских web-страниц. Разумеется, я имею в виду Internet Explorer и Netscape Navigator.
Начинающих web-мастеров, как правило, несказанно удивляет тот факт, что страничка, созданная ими в Microsoft FrontPage или оптимизированная для Microsoft Internet Explorer, выглядит в Netscape совсем не так, как планировал автор. Происходит это, прежде всего, потому, что, во-первых, интерпретаторы данных броузеров обрабатывают код HTML по-разному, во-вторых, поддерживают различные наборы функций HTML, CSS и Java-скриптов. Директивы каскадных таблиц стилей, которые не распознаются в Netscape Navigator или имеют в перечисленных броузерах различное отображение, были упомянуты в восьмом уроке. Что же касается проблем, возникающих при трансляции кода HTML, они затрагивают в основном размеры и начертание шрифтов, а также процесс распознавания цветов, заданных не шестнадцатеричной цифровой меткой, а символьной нотацией. Некоторые «глюки» Netscape Navigator и InternetExplorer вполне безобидны. Но я остановлюсь в этом разделе книги как раз на обидных «глюках», которые вполне могут испортить тщательно разработанный дизайн ваших web-страниц, а лично вам, естественно, нервы.
Самая распространенная проблема, с которой рано или поздно сталкиваются практически все создатели web-сайтов, заключается в том, что сверстанная в невидимой таблице web-страница отображается в Internet Explorer абсолютно нормально, а вот в Netscape Navigator самым непредсказуемым образом «плывет»: четко и с большим трудом подогнанные друг к другу элементы дизайна разъезжаются в разные стороны.
Происходит это потому, что Netscape Navigator высчитывает ширину таблицы в процентах согласно установленному экранному разрешению либо в пикселах, если данный параметр задан в открывающем таблицу теге. Поэтому, если, например, задать ширину таблицы как 100 % от ширины экрана, а одну из колонок — в пикселах, Internet Explorer отобразит документ корректно, a Netscape Navigator моментально «запутается» в вычислениях размеров столбцов и ячеек. Рецепт борьбы с этой неприятностью достаточно прост: используйте для всей таблицы один и тот же метод указания ширины и высоты различных ее элементов, не смешивайте разные варианты.
Второе досадное недоразумение наблюдается обычно при попытке создать невидимую таблицу, два крайних столбца которой, заполненные одноцветной заливкой, выполняют роль вертикальных ограничительных линий, «отсекающих» содержательную часть документа от расположенного справа и слева пустого поля. Примером реализации такой таблицы может служить следующий отрывок html-кода:
<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0" WIDTH="640">
<TR>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
<TD WIOTH="3"></TD>
<TD WIDTH="628"><H1 АLIGN="СЕNTER">Различия популярных броузеров</Н1>
</TD>
<TD WIDTH="3"></TD>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
</TR>
<TR>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
<TD WIDTH="3"></TD>
<TD WIDTH="628"></TD>
<TD WIDTH="3"></TD>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
</TR>
<TR>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
<TD WIDTH="3"></TD>
<TD WIDTH="628"><p ALIGN="JUSTIFY"> : : :
Текст web-странички
</TD>
<TD WIDTH="3"></TD>
<TD WIDTH="3" BGCOLOR="#808080"></TD>
</TR>
</TABLE>
Как видите, в этом примере была сформирована прозрачная таблица общей шириной 640 точек, состоящая из пяти столбцов. Первый столбец, заполненный серым цветом, играет роль вертикальной ограничительной линии и имеет ширину три пиксела, второй столбец такой же ширины выполняет роль отступа для текста странички от предыдущего, закрашенного столбца, третий столбец шириной 628 точек включает информационное содержимое документа, за ним следует еще один «отступ» и, наконец, вторая вертикальная ограничительная линия. Первая строка таблицы содержит заголовок документа, вторая строка является вертикальным отступом текста от заголовка, а третья выполняет роль контейнера для информационного текста. То, как будет выглядеть данная страничка в броузере Microsoft Internet Explorer, показано на рис. 9.6.
Рис. 9.6. Отображение таблицы с вертикальными ограничительными линиями в Microsoft Internet Explorer
Красиво, не правда ли? Безусловно, красиво: тонкие вертикальные ограничители придают web-страничке определенный шарм и своеобразный запоминающийся стиль. Что же, теперь загрузим html-документ, содержащий тот же самый код, в Netscape Navigator (рис. 9.7).
Рис. 9.7. Отображение таблицы с вертикальными ограничительными линиями в Netscape Navigator
Что случилось? Куда делись наши замечательные вертикальные линии? Нетрудно догадаться, что их «украл» интерпретатор html-кода броузера Netscape Navigator, который попросту игнорирует разметку столбцов и ячеек таблицы, если они ничем не заполнены. Как только в листинге html-документа встречается пустая табличная строка, Netscape Navigator, не мудрствуя лукаво, выбрасывает этот код, посчитав, что подобная строка ровным счетом никому не нужна ивставлена в таблицу явно по недосмотру web-дизайнера, от нечего делать не поленившегося набрать десяток-другой лишних команд.
Означает ли это, что теперь вам нужно отказаться от использования в дизайне вертикальных ограничительных линий? Ничего подобного. От этого серьезного недуга броузера Netscape Navigator излечит простое средство: создайте в любом графическом редакторе файл формата GIF, представляющий собой полностью прозрачный рисунок размерами 1x1 пиксел, и поместите его в каждую не содержащую никакой информации ячейку вашей таблицы. Этот файл будет невидим для пользователя, но он гарантирует вас от неприятностей, связанных с обработкой кода интерпретатором Netscape Navigator. Можно избавиться от этой проблемы еще проще, поставив в коде каждой пустой ячейки таблицы тег <BR>.
Продолжим сравнение броузеров. Следующим номером нашей программы является выравнивание таблиц с помощью тега форматирования абзаца <Р>. Запишем код простой таблицы, позиционированной по центру экрана:
<Р ALIGN="CENTER">
<TABLE BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="73">
<TR>
<TD WIDTH="82"><P ALIGN="CENTER">A</P></TD>
<TD WIDTH="83"><P ALIGN="CENTER">B</P></TD>
</TR>
<TR>
<TD WIDTH="82"><P ALIGN="CENTER">C</P></TD>
<TD WIDTH="83"><P ALIGN="CENTER">D</P></TD>
</TR></TABLE></P>
Результат обработки этого кода броузерами Internet Explorer и Netscape Navigator вы можете увидеть на рис. 9.8.
Рис. 9.8. Различия в обработке тега <Р> Internet Explorer и Netscape Navigator при выравнивании таблиц
Очевидно, что Netscape Navigator просто проигнорировал директиву <Р ALIGN="CENTER"> при интерпретации кода HTML. Проблема решается просто: не используйте тег <Р> для выравнивания таблиц. Вместо этого будет вполне достаточно добавить атрибут ALIGN="CENTER" в тег описания таблицы, и все различия будут устранены:
<TABLE ALIGN="CENTER" BORDER="1" CELLPADDING="0" CELLSPACING="0" WIDTH="73">
КОД ТАБЛИЦЫ
</TABLE>
И это еще далеко не все. Следует отметить, что Netscape Navigator, по всей видимости, страдает какой-то болезненной аллергией на тег <Р>, используемый совместно с командами разметки таблиц. Представьте себе вполне реальную ситуацию: вы хотите создать невидимую таблицу, содержащую текст, который
должен быть позиционирован по всей ее ширине. Что для этого необходимо сделать? Правильно, указать директиву <Р ALIGN="JUSTIFY"> внутри ячейки, в которой вы размещаете текст:
<TABLE BORDER="0" CELLPADDING="0" CELISPACING="0"><TR>
<TD><H1 ALIGN="СЕNTER">Различия популярных броузеров</Н1>
</TD>
</TR>
<TR>
<TD P ALIGN="JUSTIFY"> Текст таблицы</Р>
</TD>
</TR>
</TABLE>
Итак, необходимый тег <Р>, обеспечивающий «растягивание» текста по всей ширине невидимой таблицы, теперь указан там, где это необходимо. Радостно потирая руки, вы загружаете страничку в Internet Explorer и Netscape Navigator(рис. 9.9).
Рис. 9.9. Различия в обработке тега <Р> броузерами Internet Explorer и Netscape Navigator
Как видите, в Internet Explorer таблица отобразилась на удивление корректно, а вот Netscape Navigator в очередной раз проигнорировал команду <Р>. Самое удивительное заключается в том, что эта проблема исчезает, как только вы укажете в теге <TABLE> атрибут WIDTH, явно задав ширину таблицы в пикселах или в процентах от видимой ширины экрана.
Хотите еще примеров? Пожалуйста. Netscape Navigator терпеть не может, когда web-мастер вставляет пробелы или переносит строку внутри кода HTML, описывающего гиперссылку. Согласно спецификации языка разметки гипертекста, броузеры должны игнорировать пользовательские переносы строк и случайные пробелы в листинге web-страниц. Однако создатели Netscape Navigator спецификацию HTML, видимо, не читали. Поэтому, если вы запишете тег <А>, например, следующим образом:
<А HREF="file.html">
<IMG SRC="link.GIF" WIDTH="166" HEIGHT="42"
ALT="Гиперссылка" BORDER="0">
</A>
Netscape Navigator нарисует чуть ниже гиперссылки некрасивый символ подчеркивания (рис. 9.10). Зачем — непонятно.
Рис. 9.10. Появление нежелательного символа подчеркивания при отображении гиперссылки в броузере Netscape Navigator
Подобный символ возникает при использовании пробелов или переносов строк в коде любой гиперссылки, текстовой или графической. Бороться с этим досадным «глюком» популярного броузера можно лишь одним способом, записывая тег <А> вместе со всеми атрибутами в одну строку:
<А HREF="file.html"><IMG SRC="link.GIF" WIDW166" HEIGHT="42" ALT="Гиперссылка" BORDER="0"></A>
Несколько добрых слов хочется сказать о значениях параметров таблиц, используемых броузерами Internet Explorer и Netscape Navigator по умолчанию.
Возьмем в качестве примера код простой таблицы, состоящей из двух строк и двух столбцов, заполненных черной заливкой, а текст будем выводить на экран белым цветом, использовав для этого тег <FONT>:
<TABLE>
<TR>
<TD BGCOLOR="#000000"><FONT COLOR="|FFFFFF">A</FONT></TD>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">B</FONT></TD>
</TR>
<TR>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">C</FONT></TD>
<TD BGCOLOR="#000000"><FONT COLOR="#FFFFFF">D</FONT></TD>
</TR>
</TABLE>
Загрузим файл, содержащий этот код, в оба броузера.
Наблюдается небольшое несоответствие в ширине отступов между ячейками таблицы, которое кажется несущественным на первый взгляд, но может стать камнем преткновения при разработке сложных таблиц для компоновки вашего сайта. Вывод очевиден: необходимо стараться по возможности явно указывать все параметры ячеек, столбцов и таблицы в целом, чтобы избежать разночтений html-кода интерпретаторами различных броузеров.
Разумеется, на этом различия в отображении элементов web-страниц броузерами Microsoft Internet Explorer и Netscape Navigator не исчерпываются: любой web-дизайнер сможет навскидку перечислить вам еще с десяток подобных несоответствий. Однако все наиболее опасные «подводные камни», встречающиеся при создании собственных html-документов и их отладке с целью обеспечить идентичность отображения в броузерах всех типов, мы уже рассмотрели. Остальные «мелкие проблемы» решаются, как правило, традиционным и проверенным методом — практикой.
Многие начинающие web-дизайнеры, разрабатывая свой первый самостоятельный проект, сталкиваются иногда с весьма трудной задачей, связанной с отображением графики в документах HTML. Проблема заключается в том, что согласно изученным вами ранее «постулатам» web-дизайна каждый html-документдолжен быть максимально компактным, тогда как большое количество иллюстраций, появляющихся, например, при создании виртуального фотоальбома, значительно перегружает файл, пропорционально увеличивая время его считывания с сервера.
Решить эту проблему, оптимизировав объем итогового html-документа, можно двумя методами. Первый метод заключается в следующем. Создавая фотоальбом, подготовьте две копии каждого изображения: одну — нормального размера и качества, такую, которую вы и хотели бы поместить на свою web-страничку, вторую — в уменьшенном масштабе и с низким разрешением. Разместите на web-странице уменьшенные копии картинок, назначив для каждой из них свойства гиперссылки с атрибутом TARGET="_blank", которая перенаправит пользователя к большому графическому файлу. В документ вставьте пояснение для посетителей о том, что щелчок кнопкой мыши на любом рисунке приведет к его загрузке в отдельном окне броузера в увеличенном масштабе. Тогда пользователю, не заинтересованному в разглядывании ваших фотографий, не придется подолгу дожидаться окончания считывания странички с удаленного узла. Если же он все-таки захочет полюбоваться на некоторые из опубликованных вами иллюстраций, ему не составит труда выбрать наиболее интересные из них. Такой подход к представлению графики в Интернете носит название «предварительного просмотра», или, по-английски, «preview».
Если мы назовем файл, содержащий уменьшенную копию картинки, picture1.jpg, а файл нормального размера — picture2.jpg, то html-код гиперссылки, описанной выше, будет выглядеть следующим образом:
<А HREF="picture2.jpg" TARGET="_blank"><IMG SRC="../picture1.JPG" WIDTH="100" HEIGHT="98" АLT="Уменьшенная картинка" BORDER="0"></A>
Второй метод ускорения загрузки графических файлов с сервера несколько отличается от предыдущего. Если, предположим, ваш сайт содержит фото галерею, доступ к которой открывается с пятой — шестой странички по счету, все содержащиеся в ней графические файлы можно загрузить в клиентский компьютер заранее, на предыдущих страницах, выводя их на экран размером 1x1пиксел. Код, осуществляющий подобный вывод графики, выглядит так: <IMGSRC="URL графического файла" WIDTH="1" HEIGHT="1">. Изображение при этом станет невидимым для посетителя сайта, но сохранится в кэше его машины, а при последующем открытии данной картинки она будет загружаться уже с жесткого диска локального компьютера. Таким образом, у пользователя создается впечатление, что изображение выводится на экран очень быстро. Однако за все надо платить: время загрузки предыдущих страниц при этом пропорционально увеличивается. Дабы посетитель вашего сайта не скучал, в процессе выгрузки графики его можно развлечь чем-нибудь другим: например, предложить почитать новости или подборку свежих анекдотов.
Выводим иллюстрации в отдельном окне
Иногда необходимо организовать вывод графических изображений в отдельном окне, приблизительно так, как это описано в предыдущем разделе, но вам хотелось бы, чтобы новое окно броузера не содержало кнопок навигации, адресной строки, полос прокрутки и чтобы его заданный первоначально физический размер был фиксированным. Как этого добиться? Достаточно просто: следует использовать несложный сценарий JavaScript, запрещающий изменение пользователем размеров окна и удаляющий из него все ненужные вам компоненты.
Скрипт, написанный на языке Java, интегрируется в web-страницу при помощи тега <SCRIPT> с атрибутом LANGUAGE, который помещается в начало кода html-документа, либо между тегами <HEAD> и </HEAD>, или же сразу после директивы <BODY>. Сам текст сценария не отображается в окне броузера при загрузке документа, он исполняется .подобно подпрограмме в случае определенного действия пользователя, например, открытия или закрытия окна. Встроенные в web-страницу сценарии JavaScript интерпретируются броузером вместе с кодом разметки гипертекста и вызываются на исполнение из тела html-документа специальными директивами. Описание правил записи тега <SCRIPT> включено в спецификацию языка HTML 4.0 и потому здесь не приводится. Поскольку подробный обзор синтаксиса языка JavaScript выходит за рамки этой книги, ниже мы рассмотрим лишь отдельные аспекты его применения.
Итак, для того чтобы организовать вывод графического изображения в отдельном окне фиксированного размера без кнопок навигации и полос прокрутки, в тело html-документа необходимо поместить следующий код:
<BODY>
<SCRIPT LANGUAGE="JavaScript">
function picture( ){
window.open("URL. определяющий адрес расположения картинки", "newwindow", config=''width-ширина картинки, height-высота картинки, toolbar=0, location=0, directories=0, status=1, menubar=0, scrollbars=0, resizable=0");
}
</SCRIPT>
Тело html-документа
</BODY>
Записываемый в коде сценария JavaScript адрес картинки лучше всего приводить в абсолютном виде, с указанием протокола передачи данных и имени целевого графического файла, например, http://www.myserver.ru/images/picture.jpg. Атрибут config определяет конфигурацию создаваемого окна. Значения параметров width и height, устанавливающих ширину и высоту картинки в пикселах, следует увеличить на 10-15 точек, поскольку в новом окне изображение будет иметь отступы сверху и снизу, а значит, определенная его часть может оказаться скрытой за границей окна. Остальные параметры атрибута config принимают одно из двух возможных значений: 0 — определяемый параметром элемент не отображается на экране и 1 — определяемый параметром объект отображается вместе с другим содержимым. Так, параметр toolbar выводит на экран (или не выводит) панель инструментов с функциональными кнопками,параметр location — адресную строку, directories — список директорий, status —строку состояния в нижней части окна, menubar — системную панель, содержащую меню Файл, Правка, Вид и т. д., параметр scrollbars — полосы прокрутки, и, наконец, параметр resizable разрешает или запрещает произвольное изменение размеров окна пользователем.
Определитель picture( ), записанный правее директивы function, является уникальным именем данной функции JavaScript, которое будет использовано в дальнейшем для вызова этой функции на исполнение. Если вы планируете выводить на экран подобным образом несколько разных графических файлов, для каждого из них придется написать отдельную функцию, отличающуюся от предложенной выше лишь именем, адресом расположения целевого файла и значениями размеров картинки.
Для того чтобы активизировать созданный сценарий JavaScript, в теле html-документа необходимо разместить соответствующую гиперссылку, включающую ряд необходимых параметров. Для подготовки такой ссылки можно использовать графическую миниатюру рисунка, отображаемого броузером в отдельном динамически появляющемся окне. Код гиперссылки в этом случае будет выглядеть следующим образом:
<A HREF="javascript:picture()"><IMG SRC="URL миниатюры картинки" WDTH="ширина миниатюры" НЕIGHT="высота миниатюры" BORDER="0"АLT="Альтернативный текст"></А>
где picture() — уникальное имя функции, вызываемой при активизации гиперссылки.
Добавляем страницу в Избранное
Наверняка вы встречали на некоторых сайтах Интернета текстовые или графические гиперссылки, при нажатии на которые данная страничка автоматически добавляется в список ресурсов, расположенный в меню Избранное броузера Microsoft Internet Explorer. Самым простым методом реализации такой функции является использование соответствующего сценария JavaScript.
Нарисуйте небольшое изображение, которое впоследствии сыграет роль графического представления вашей ссылки, после чего сохраните его на диске под именем favorites.gif. Можно переходить к редактированию содержимого web-страницы, адрес которой вы хотите добавить в список меню Избранное. В общем виде код данной функции будет выглядеть следующим образом:
<А HREF="javascript:window. external. AddFavorite (URL вашей web-странички', 'Краткое описание вашей странички')"><IMG SRC="URL расположения файла favorites.gif" АLT="Альтернативный текст" BORDER="0" WIDTH="Ширина изображения" НЕIGНТ="Высота изображения"></А>
А вот пример применения подобного сценария JavaScript:
<А HREF="javascript:window. external. AddFavorite ('http://www.smile.pl.ru'. 'Юморная страничка Валентина Холмогорова')"><IMG SRC="../images/favorites.gif" АLT="Добавить сайт в 'Избранное'" BORDER="0" WIDTH="15" HEIGHT="10"></A>
Этот текст размещается в том месте листинга html-документа, в котором вы хотели бы представить гиперссылку. Если вместо графической гиперссылки вы планируете использовать обычную, текстовую, код функции заметно упрощается:
<А HREF="javascript:window. external. AddFavorite
('URL вашей web-странички'. 'Краткое описание вашей странички')">
Добавить сайт в 'Избранное'</А>
Можно реализовать данную возможность иным, менее компактным и более трудоемким способом, а именно — с использованием специальной функции JavaScript, помещенной в заголовок html-документа. Для этого наберите в любой строке html-кода между тегами <HEAD> и </HEAD> следующий текст:
<SCRIPT LANGUAGE="JavaScript">
var url="URL вашего сайта"
var title="Kpaткoe описание вашего сайта "function bookmark(){
if (document.all)
window. external. AddFavorite(url.title)
}
</SCRIPT>
В предложенной выше функции, имеющей уникальное на данной странице имя bookmark, определены две переменные, url и title. Первая из них указывает на адрес, по которому размещается ваша страничка в сети Интернет, вторая содержит ее краткое описание. При вызове функции bookmark на исполнение броузер автоматически заносит значения обеих переменных в папку Избранное. Для того чтобы выполнить данный сценарий, в код html-документа необходимо добавить следующий текст гиперссылки:
<А HREF="javascript:bookmark()">Добавить сайт в 'Избранное'</А>
Вместо текста «Добавить сайт в 'Избранное'» может быть использовано любое графическое изображение, специфицированное тегом <IMG>.
Главным недостатком обоих методов является то, что указанные функции работают только в броузере Microsoft Internet Explorer и не поддерживаются Netscape Navigator.
Создаем систему быстрой навигации
Если объем разрабатываемого вами сайта достаточно велик, к тому же он имеет сложную логическую структуру, а количество составляющих его документов и разделов превышает возможности человеческой памяти или фантазии, пользователю не всегда представляется удобным использовать для путешествия по такому ресурсу стандартные средства навигации, выполненные в виде кнопок или текстовых ссылок. Для того чтобы облегчить посетителям задачу поиска среди обилия опубликованных вами документов того, который им нужен, опытные web-дизайнеры дублируют традиционные кнопки, направляющие пользователя к основным разделам ресурса, системой быстрой навигации, представляющей собой выпадающее меню. Выбор одного из пунктов этого меню переводит посетителя на соответствующую web-страницу. Такое меню можно создать с применением стандартных средств JavaScript.
Общий вид кода формы меню, выполняющего функции системы быстрой навигации, таков:
<FORM>
<SELECT NAME="forml" SIZE="1"
onchange="top. location. href=this.options[this.selectedindex].value; this.selectedindex=0">
<OPTION SЕLЕСТЕD>Перейти в следующий раздел сайта:</OPTION>
<OPTION VALUE="URL первой странички">Страница 1</OPTION>
<OPTION VALUE="URL второй странички">Страница 2</OPTION>
<OPTION VALUE="URL N-й странички">Страница N</OPTION>
</SELECT>
</FORM>
В качестве значения атрибута value тега OPTION следует указать полный либо сокращенный адрес URL, по которому находится страничка, определяемая каждым пунктом меню. Между тегами <OPTION> и </OPTION> записывается название данной странички. Внешний вид отображенной в окне броузера формы быстрой навигации по сайту показан на рис. 9.11.
Рис. 9.11. Форма быстрой навигации по сайту
Если вы хотите, чтобы документ, открываемый при выборе какого-либо пункта навигационного меню, загружался в новом окне, вторую строку предложенного выше кода необходимо заменить следующей:
<SELECT NAME="form1" SIZE="1" onchange="window.open(this.options[this.selectedlndex].value): this.selectedindex=0">
В ряде случаев возникает необходимость запретить доступ к какому-либо разделу вашего сайта неавторизованным пользователям, то есть лицам, не знающим соответствующий пароль. Традиционный алгоритм установки пароля на web-страницу подразумевает использование подключенного к обычной форме CGI-скрипта, управляющего процедурой передачи данных в момент нажатия пользователем кнопки Отправить и осуществляющего процесс авторизации.
ПРИМЕЧАНИЕ Авторизацией называется процедура проверки введенного пользователем в какую-либо интерактивную форму пароля или сочетания логического идентификационного имени и пароля на подлинность.
Очевидно, что применение такого метода на практике неизбежно связано с необходимостью размещения сценариев CGI в специальной серверной директории и запуска программ на удаленном узле, что требует как минимум наличия у васправ администратора. Альтернативным путем, не вызывающим необходимости вступать в переговоры с владельцами сервера, предоставляющего вам web-xoc-тинг, для получения у них разрешения на использование технологии CGI, является простая защита вашего сайта от несанкционированного доступа посредством применения JavaScript.
Общий механизм такой защиты действует следующим образом. В одной из директорий вашего сайта с условным названием private создается независимый раздел, содержимое которого и будет составлять вашу защищенную зону. В другой папке с условным названием access содержится пустой html-документ, имя которого совпадает с придуманным вами паролем, а заголовок <HEAD> содержит МЕТА-определитель, осуществляющий автоматическую переадресацию(редирект) броузера на стартовую страницу защищенной зоны. Постараюсь пояснить изложенную здесь методику чуть подробнее. Если, например, стартовый документ закрытого паролем раздела сохранен в файле с именем getting.html, асам пароль представляет собой следующую последовательность цифр и символов: xQ17kDFr4ty, то файл, хранящийся в папке access, должен будет называться xQ17kDFr4ty.html и содержать в заголовке директиву <МЕТА HTTP-EQUIV="Refresh". CONTENT="10: URL=. ./private/getting.html">. Теперь вам осталось только разместить на web-странице, с которой осуществляется доступ в закрытый раздел, содержащую JavaScript форму с предложением ввести в ее текстовое поле пароль. После нажатия на кнопку Отправить JavaScript автоматически добавит вконец заданной пользователем символьной последовательности расширение .html и переадресует броузер к web-странице с получившимся названием, которая, в свою очередь, переадресует его к стартовому документу защищенной зоны. Очевидно, что такой алгоритм позволяет размещать в папке access неограниченное количество страниц с именами, соответствующими различным паролям, благодаря чему вы можете менять число и состав посетителей, имеющих доступ к закрытому разделу.
Следует отметить, что разработка такой элементарной защиты имеет смысл лишь в том случае, когда в настройках web-сервера, предоставляющего вам хостинг, установлена функция отображения файла not_found.html с сообщением об ошибке, если пользователь пытается загрузить страницу с неправильным именем или отсутствующий на сервере документ. Если данная функция отключена, сервер продемонстрирует в рабочем окне броузера список всех файлов, имеющихся в данном разделе его диска, причем каждый из них пользователь сможет открыть по собственному желанию. Администрация многих узлов, предоставляющих бесплатный web-хостинг, понимает, что содержимое пользовательских директорий может являться информацией сугубо конфиденциальной, и потому запрещает посетителям доступ к списку файлов, составляющих сайты своих клиентов.
Очевидно также, что существует элементарный способ обойти такую несложную защиту: достаточно узнать у имеющих доступ к закрытой зоне вашего ресурса пользователей имя ее стартового файла и название директории, в которой он размещается. Выход из этой ситуации может быть только один: почаще меняйте пароли и название стартового документа защищенного раздела. А теперь самое главное — код интерактивной формы, которая позволит пользователям осуществить переход в защищенную зону вашего ресурса:
<FORM NAME="access1">
Пожалуйста, введите пароль:
<INPUT NAME="passwd" TYPE="password">
<INPUT TYPE="button" VALUE="Отправить"
onclick=(window. location. href=document. accessl. passwd value +" html")>
</FORM>
Счетчик посещений представляет собой интерактивный графический элемент дизайна web-страницы, управляемый соответствующим сценарием CGI с данного либо с удаленного сервера. Изображение счетчика состоит из набора отдельных графических файлов, каждый из которых содержит символ одной цифры. CGI-скрипт фиксирует открытие документа в клиентском броузере и прибавляет к последнему значению счетчика единицу, соответствующим образом изменяя составляющую его картинку. Таким образом, владелец ресурса может определить количество посещений, или «хитов» (от англ, hit — нажатие), имевших место в течение какого-либо интервала времени.
Внешнее оформление счетчиков может быть совершенно различным и зависит, в первую очередь, от фантазии создававшего их дизайнера.
Сами же счетчики можно условно разделить на две обширные категории по их функциональному назначению. Первая категория включает в себя счетчики, изначально предназначенные исключительно для подсчета посещений.
Поскольку включение в состав web-страницы такого счетчика требует от разработчика ресурса администраторского доступа к серверной директории, в которой размещаются CGI-скрипты, можно пойти несколько иным путем: зарегистрироваться на одном из многочисленных сайтов, предлагающих посетителям установку бесплатных счетчиков, и пользоваться сценарием CGI, запускаемым с этого узла. После регистрации вы получите отрывок html-кода, который следует просто вставить в листинг вашей web-страницы через буфер обмена. В качестве своеобразной оплаты за это сервер, сдавший вам в аренду один из своих счетчиков, включит в его изображение небольшой рекламный баннер либо станет еженедельно отсылать в ваш почтовый ящик корреспонденцию с подробной статистикой посещений вашей web-странички за истекшие семь дней и, разумеется, неизбежной рекламой. Краткий перечень сайтов, предлагающих своим посетителям бесплатные счетчики посещений, приведен в табл. 9.1.
Таблица 9.1. Перечень серверов, предлагающих установку бесплатных счетчиков
|
Адрес сервера |
Предоставление статистики |
Наличие рекламы |
|
Да Нет Да Нет Да Нет Да Нет Да Нет По желанию Да Нет |
Нет Нет Да Нет Нет Нет Нет Нет Да Да Нет Да Да |
Счетчики, относящиеся ко второй категории, предоставляются пользователю популярными поисковыми машинами, и помимо своей основной функции они осуществляют подсчет рейтинга странички в соответствующем разделе тематического каталога данной поисковой системы. Рейтинг определяется количеством уникальных посетителей вашего сайта в сутки: CGI-скрипт, установленный на поисковом сервере, фиксирует IP-адрес посетителя, открывающего данную страницу в своем броузере, и текущее состояние счетчика изменяется на единицу только в том случае, если этот IP-адрес не содержится в базе посещений вашего сайта, обновляющейся каждые двадцать четыре часа. Повторные загрузки документа в одну и ту же клиентскую машину игнорируются. Сделано это с целью пресечь попытки владельцев сайтов искусственно «накрутить» показания счетчика, поскольку от этих показаний зависит положение вашей странички в каталоге ресурсов поискового сервера: чем больше посещений — тем выше ссылка на ваш сайт находится в списке прочих ресурсов Интернета и, соответственно, тем больше новых пользователей каталога станут вашими читателями. Внешний вид нескольких популярных счетчиков, бесплатно предоставляемых разработчикам web-страниц различными поисковыми системами, представлен на рис. 9.12.
Рис. 9.12. Внешний вид счетчиков, предоставляемых поисковыми системами
Для того чтобы получить такой счетчик и установить его на своей страничке, вам необходимо зарегистрироваться в соответствующем разделе выбранной вами поисковой системы, ввести в форму регистрации адрес, по которому размещается ваш сайт (если ресурс еще не создан или не опубликован в Интернете, поисковая система откажется от регистрации), указать внешний вид счетчика, в случае если возможно несколько вариантов, и, наконец, поместить через буфер обмена предложенный вам поисковой машиной код в соответствующую строку листинга html-документа. Счетчик запущен.
Давайте кратко рассмотрим особенности и возможности нескольких наиболее популярных счетчиков данной категории.
Rambler (http://www.rambler.ru). Счетчик, предоставляемый этой поисковой системой, считается на сегодня наиболее популярным и авторитетным в русскоязычной части Интернета. Пользователю предлагаются три основных статистических параметра: количество уникальных хитов, количество уникальных посетителей и количество повторных перезагрузок страницы. На самом сервере www.rambler.ru можно при желании получить более подробную статистику, например, среднее количество посетителей по часам и по дням недели. Возможен выбор из множества вариантов внешнего оформления счетчика, оптимизированных для разного цветового решения страницы. Можно выбрать счетчик, не демонстрирующий посетителю количество хитов, а просто указывающий на то, что данная страница входит в состав пользователей системы рейтинга Rambler.
Aport (http://www.aport.ru). Данный счетчик во многом аналогичен счетчику поисковой системы Rambler и обсчитывает тот же ассортимент статистических параметров. Подробную статистику посещений за истекшие сутки можно также получить на сервере поисковой машины.
SpylLOG (http://www.spylog.ru). Счетчик Spy LOG является наиболее полным из всех счетчиков, предоставляемых другими аналогичными системами. Он отражает количество посетителей, навестивших ресурс с момента установки счетчика на странице, за истекшие 24 часа, а также количество пользователей, присутствуощих на сайте в настоящий момент времени. Имеется широкий выбор из множества вариантов оформления счетчика, причем все они достаточно удачны с тонки зрения дизайна. На сервере http://www.spylog.ru доступна подробная статистика посещений использующей счетчик странички, причем данные обсчитываются более чем по 600 параметрам. Вам продемонстрируют распределение ваших пользователей по регионам, часам и дням недели, предоставят данные о том, каким программным обеспечением они пользуются для выхода в Интернет, покажут наиболее популярные маршруты по ресурсу, наиболее популярные разделы сайта и предоставят множество других полезных данных.
List.RU (http://www.list.ru). Этот счетчик является весьма популярным в российском Интернете. На его изображении индицируется информация о хитах и уникальных посещениях, те же данные можно получить на сервере статистики в сводке за последние 30 суток. Помимо прочего, List.RU помесячно обсчитывает информацию о локации ваших читателей по странам мира и формирует отчет о других web-страницах, на которых размещена ссылка на ваш ресурс.
Count.RU (http://www.count.ru). Статистическая служба Count.RU появилась на свет относительно недавно, но уже завоевала признание многочисленных владельцев интернетовских информационных ресурсов. Помимо традиционной статистики по количеству хитов и уникальных посетителей за сутки и последние 30 дней система Count.RU анализирует информацию о распределении пользователей вашего сайта по странам и регионам России, предлагает отчет о ресурсах, публикующих ссылки на вашу страницу. Так же как и с помощью счетчика List.RU, на сервере Count.RU вы можете узнать данные о типе броузера, установленного на компьютерах ваших посетителей, версию используемой ими операционной системы, значения экранного разрешения и цветовой палитры их мониторов.
Завершая тему, хочу привести несколько общих советов, соблюдая которые вы сможете правильно разместить счетчик на своей web-странице и добиться его корректной работы.
Существует мнение, что каждый профессиональный сайт должен иметь гфстевую книгу — снабженный специальной интерактивной формой раздел, в котором посетители данного ресурса могут оставить свои пожелания и предложения разработчикам или владельцам странички. Гостевые книги также работают на основе технологии CGI. Если вы имеете доступ к серверной директории CGI-BIN, вы можете воспользоваться одним из наборов скриптов для создания гостевых книг, которые доступны для загрузки с серверов, предлагающих бесплатное программное обеспечение, например, с сайта http://www.freeware.ru.Там же можно найти подробные инструкции по установке и настройке таких сценариев.
Однако на большинстве интернетовских узлов, бесплатно предоставляющих клиентам web-хостинг, доступ к использованию технологии CGI закрыт. В этом случае вы можете воспользоваться альтернативным вариантом: зарегистрируйтесь на одном из сайтов, специализирующихся на предоставлении всем желающим уже готовых к использованию бесплатных гостевых книг, и установите на своей страничке ссылку на данный сервер. Гостевая книга готова к употреблению.
Практически все серверы, предоставляющие пользователям бесплатные гостевые книги, позволяют вносить в их структуру определенные настройки, посредством которых вы можете «подогнать» гостевую книгу под дизайн своего сайта. Установив на ваших web-страницах гиперссылку, ведущую на гостевую книгу, а в настройках самой гостевой книги — обратную ссылку, вы тем самым замыкаете гостевую книгу и собственный сайт в единую логическую структуру. Многие пользователи даже не заметят, что ваша гостевая книга физически расположена на другом сервере. Платой за право использования данной услуги станет включение в страницы вашей гостевой книги рекламного баннера размещающего ее сервера.
Краткий список сайтов, предлагающих своим клиентам размещение бесплатных гостевых книг, приведен в табл. 9.2.
Таблица 9.2. Сайты, предлагающие размещение бесплатных гостевых книг
|
Адрес сервера |
Возможные настройки параметров гостевой книги |
Реклама |
|
http://www .guestbook . land .ru
|
Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет и рисунок, изображение в заголовке книги Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет Редактирование записей, оповещение о добавлении новой записи по электронной почте, фоновый цвет и рисунок, изображение в заголовке книги, добавление пользовательской навигации, графических и текстовых элементов Доступ к изменению кода HTML составляющих книгу страниц Настройки фонового цвета книги, возможность редактирования записей, система автоматической блокировки нецензурных выражений Только редактирование записей |
Баннер
Баннер
Ссылка
Нет Баннер
Целых 4 баннера |
Если вы пользуетесь популярным Интернет-пейджером программой ICQ, вашу домашнюю страничку наверняка украсит небольшой графический индикатор, показывающий посетителям, находитесь ли вы в настоящий момент в режиме online или отключены от Интернета. Установить такой индикатор можно, включив в соответствующую строку листинга своей web-страницы отрывок html-кода, который будет иметь следующий вид:
<IMG SRC="http://online.mirabilis.com/scripts/online.dll?icq= ВАШ_HOMEP_ICQ&: img=КОД_ИЗОБРАЖЕНИЯ" WIDTH="Ширина картинки" WIDTH="Высота картинки">
Вместо слов BAIII_HOMEP_ICQ в данный код следует вставить ваш ICQ UIN, строка «код изображения» определяет внешний вид индикатора, а параметры ширины и высоты картинки могут варьироваться в зависимости от выбранного вами графического представления индикатора. Коды изображений, их геометрические размеры и внешний вид показаны в табл. 9.3.
В качестве наглядного примера использования индикатора состояния ICQ в составе web-страницы, если принять, что номер ICQ — 65064023, можно привести следующий отрывок кода:
<IMG
SRC="http://online.mirabilis.com/scripts/online.dll?icq=65064023&arnp:img=3"
WIDTH="249" HEIGHT="17">
Создавая новый проект, который впоследствии, согласно вашим замыслам, будет привлекать сотни и тысячи посетителей в день, помните десять простых правил, которые помогут вам быстрее добиться поставленной цели.
1. Не перегружайте дизайн декоративными элементами. Излишнее количество графики «утяжеляет» страницу, увеличивая время ее загрузки в броузер, усложняет процесс обновления ресурса, делает практически невозможным внесение изменений в компоненты оформления страниц и, наконец, просто затрудняет восприятие информации.
2. Сделайте вашей настольной книгой орфографический словарь русского языка. Обилие ошибок в тексте сайта несказанно раздражает пользователей.
3. Обращайте пристальное внимание на мелкие детали оформления страницы: кнопки навигации, разделительные линии, маркеры списков. Незначительная на первый взгляд неаккуратность в мелочах моментально испортит общее впечатление о ресурсе.
Таблица 9.3. Коды изображений индикаторов состояния ICQ
|
Код изображения |
Высота и ширина картинки |
|
1 2 3 4 5 6 7 8 9 |
WIDTH="44" HEIGHT="14" WIDTH="80" HEIGHT="21" WIDTH="249" HEIGHT="17" WIDTH="141" HEIGHT="23" WIDTH="18" HEIGHT="18" WIDTH="98" HEIGHT="34" WIDTH="233" HEIGHT="15" WIDTH="55" HEIGHT="14" |
4. Не публикуйте иллюстрации и тексты, взятые с чужих web-страниц, если только на них специально не указано, что данные элементы можно свободно копировать и использовать. То же самое касается и концептуальных дизайнерских решений. Слухи распространяются по Интернету очень быстро, и если неожиданно выяснится, что вы незаконно воспользовались результатами чьих-либо трудов, это испортит вашу репутацию на всю жизнь.
5. Не злоупотребляйте клипартами и шаблонами. Безусловно, возможность воспользоваться готовыми решениями на начальном этапе является тяжелым искушением. Однако где гарантия, что этого не сделает сотня - другая ваших коллег? Если вы используете клипарт или готовый шаблон, внесите в его дизайн или компоновку хотя бы незначительные изменения.
6. Не воруйте сами у себя. Если несколько ваших проектов будут похожи как две капли воды, отличаясь только цветовыми решениями и формой кнопок, у пользователей могут возникнуть нехорошие мысли, касающиеся степени развитости вашей фантазии. Узнаваемый авторский стиль — это одно, слепое копирование дизайнерских решений — совсем другое. Клонирование до добра не доводит.
7. Если посетители вашего сайта присылают вам письма с предложениями, пожеланиями и комментариями, отвечайте на всю приходящую корреспонденцию незамедлительно. Игнорирование читательских писем — кратчайший путь к скатыванию популярности вашего ресурса до нулевого значения. Если занятость не позволяет вам ежедневно отвечать на приходящую почту, заготовьте заранее с десяток шаблонов, содержащих ответы на возможные послания. Эти ответы должны как минимум включать слова благодарности за проявленное беспокойство, обещание рассмотреть все пожелания посетителя и выражение надежды на то, что читатель снова заглянет на вашу страничку. Если вы не имеете возможности даже бегло проглядывать почту, заведите себе секретаря.
8. Реагируйте на советы посетителей оперативно. Если хотя бы два человека сообщат вам о том, что щелчок мышью на одной из опубликованных вами гиперссылок приводит к появлению сообщения об ошибке, разберитесь с проблемой, не откладывая ее в долгий ящик. Иначе вы рискуете больше никогда не увидеть этих пользователей, а также их знакомых и знакомых друзей их знакомых на своей страничке.
9. Публикуйте только проверенную информацию. Если, например, вы напишете на своем сайте, что Билл Гейтс - женщина, обосновав данное предположение сотней различных аргументов, вы, безусловно, без труда добьетесь нескольких сотен посещений вашей странички в день. Но при этом вы, во-первых, подвергаете себя опасности получить по голове лично от Билла Гейтса, а во-вторых, ваша репутация распространителя непроверенной информации вряд ли поможет вам в бизнесе, поиске друзей или деловых партнеров.
10. Старайтесь избегать использования в текстах технического и нетехнического сленга, просторечий и ненормативной лексики. Кто-нибудь обязательно не поймет, что именно вы имеете в виду, остальные, скорее всего, поймут вас неправильно. Помните: как вы будете относиться к своим посетителям, в точности так же и они будут относиться к вам.
В этом уроке мы научились:
