Символы "дефис" и "тире"...
Не используйте на своих сайтах стрелки "вперед" и "назад", особенно, если Ваш сайт имеет иерархическую структуру (см. http://info.med.yale.edu/caim/StyleManual_Top.HTML). Что вы лично подразумеваете под стрелками? К какому документу хотите забросить своего посетителя? Вы уверены, что он хочет попасть именно туда?. Стрелки вообще не самое удачное средство для навигации на сайте, суще
ствуют и более удачные способы (о них ў ниже). Пока же ў избегайте стрелок.
Рис. 1. Стрелки на Yale's Web Style Manual
Предупреждайте посетителя вашего сайта о страницах, размер текста на которых превышает 20 килобайт. Пусть
для него не станет неожиданностью длительная загрузка какого-нибудь "краткого содержания" на 100 килобайт.
Если вдруг ваш сайт переехал, то оставьте на старом месте одну страничку с надписью: "Мы переехали! Наш новый URL ў www.newurl.ru. Одну минуточку..." и
вставьте в "голову" страницы строку:
<meta http-equiv="refresh" content="0; url=http://www.NEWURL.ru">
Эта строка заставит браузер перейти к странице по новому адресу. Ее также можно использовать, если у вас есть видеокамера, которая передает изображения или если информация на вашей странице часто меняется (например, котировки акций или если это простой chat - (http://chat.radio-msu.net)).
Одна из самых распространенных ошибок web-мастеров ў это пропуск номера кодовой страницы или вообще указание неправильной. Если вы не настроили соответствующим образом Microsoft FrontPage97, то вас ждут такие же проблемы. Кодовую страницу помогает указать тот же тег meta:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
или
<meta http-equiv="Content-Type" content="text/html; charset=koi8-r">
И проверьте свой FrontPage: в меню Page Properties в рамке HTML Encoding в обоих сроках должно стоять "Cyrillic".
Индексеры некоторых поисковых машин (например, AltaVista Search) проверяют у страниц тег meta также на предмет наличия описания содержимого страницы, а также на предмет ключевых слов. Я рекомендую вам вставлять такие теги в каждую важную страницу:
<meta name="description" content="Здесь можно привести довольно пространное описание вашей страницы">
<meta name="keywords" content="фракталы сжатие архивирование графика">
Когда вставляете в текст ссылку, выделяйте только одно-два ключевых слова, несущих основную смысловую нагрузку. Ни в коем случае не приписывайте "кликните здесь" (в лесу, что-ли?). В крайнем случае, припишите название или адрес стр
аницы и выделите его. Вот несколько примеров правильного выделения слов для ссылки:
Загляните на нашу информационную страницу
Свои комментарии присылайте по адресу abcpp@portal.ru
Что у нас нового? Заработала новая система поиска, появились новые разделы, открылся кибермагазин.
The tutorial contains sections on mowing, sharpening the mower, and buying a mower. (Пример Tim Berners Lee).
При использовании больших рисунков с картами четко выделяйте ссылки (псевдо-кнопками, границами, выделяющимися надписями - см. например http://www.usatoday.com) и пишите маленькое примечание: "Щелкните мышью на интересующей Вас теме". Избегайте "adventure page", заставляющих людей излазить курсором мыши всю страницу, чтобы найти хоть какую-то ссылку. И не забывайте про краткий текстовый вариант карты.
Регулярно проверяйте все связи на своем сайте. Вполне возможно, что некоторые узлы уже не существуют или находятся на реконструкции, поэтому имеет смысл удалять такие ссылки. Не ссылайтесь на узлы "under construction" - может со
здаться впечатление, что вы не знаете других не менее интересных, но уже закоченных сайтов.
Ни в коем случае не изменяйте цвета ссылок на странице, но если это все-таки необходимо по соображениям дизайна, используйте разные цвета для новых ссылок (яркие) и уже посещенных (блеклые).
Можно описать ссылку на страницу в строке статуса окна браузера - это позволяет разместить горазда больше информации, чем обычно:
<a href="info.html"
OnMouseOver="window.status='Более полная информация по телевизорам'; return true;"
onMouseOut="window.status=''"
>Телевизоры</a>
При этом OnMouseOut (событие происходит тогда, когда курсор мыши уходит за пределы текста ссылки) будет работать только на Netscape Navigator, а в других надпись останется в строке статуса. Обратная сторона этой медали в том, что пользователи, которые любят смотреть адреса страниц в строке статуса окна браузера, их не увидят, что, чест
но говоря, не очень и радует. Решайте сами, что лучше для ваших посетителей.
Для навигации на линейном сайте (который я все-таки категорически не рекомендую создавать) помещайте вверху и внизу каждой страницы ссылки соответственно "начало" и "продолжение".
|
(начало)
****************************************************************
*****************************************************************
***************************************************************
*****************************************************************
********************************************************
****************************************************************
*****************************************************************
***************************************************************
*****************************************************************
********************************************************
(продолжение)
|
Обязательно добавляйте (внизу страницы) ссылки на оглавление, на печатную версию, на резюме статьи (если хотите) и на соотносящиеся с содержанием страницы.
Один из приемов навигации на иерархических - это "директории", как например такой:
/ Главная страница / Программное обеспечение / Редакторы
См. также хороший пример на http://www.yahoo.com
Один из самых замечательных способов навигации в гипертексте, который я когда-либо видел, воплощен в Delphi On-Line Help.
Перечислю все основные преимущества такой организации гипертекста:
Во-первых, на главной странице приводится большое количество актуальных ссылок на внутренние страницы.
Во-вторых, верхнее меню всегда остается видимым на экране, даже когда приходится скроллировать текст внизу (наверное, одно из самых первых применений современных фреймов).
В-третьих, при выборе одной из ссылок See Also, Properties, Methods, Events или Tasks появляется дополнительное подменю (что можно легко реализовать с помощью JavaScript), в котором приводится уточняющий список ссылок. Таким образом возникает интересный психологический эффект, при котором посетитель не чувствует дискомфорта от перехода на совершенно новую страницу.
В-четвертых, все статьи Delphi Online Help стандартизованы, то есть выглядят абсолютно одинаково. Другими словами, все статьи имеют единый стиль.
В-пятых, если распечатывать текст в главном фрейме, то стрелки навигации видны не будут и ничто не будет отвлекать внимания от основного текста.
Замечу, что принцип организации меню в отдельном фрейме сейчас чрезвычайно широко используется, но уровень динамизма страниц еще не достиг уровня Windows Help.
Как это ни странно, но некоторые люди предпочитают читать текст на бумаге, а не на экране монитора. Будьте экономны в размещении информации на странице, старайтесь отдать содержанию как можно больше. Посмотрите на страницу M_I_5.HTML руководства по стилю из Йеля (рис. 1): при распечатке этой страницы две трети листа будут просто пустыми, еще четверть займут рисунки и разная повторяющаяся информация (Ф. И. О. автора, название центра, название документа, авторские права и т.д., хотя все можно было бы разместить в одну строку) и только на оставшейся части можно будет найти какой-то полезный текст (эта часть выделена зеленым цветом). Можно, конечно, скачать ТРЕТЬЮ часть этого сайта, чтобы затем распечатать одну конкретную страницу (остроумно, правда?) Никогда так не делайте, ина
че вряд ли кто-нибуд
ь будет читать ваши страницы во второй раз.
Далее, Патрик Линч, автор этого Web Style Manual, использовал таблицу, в которую и поместил весь текст (!). В результате справа остается просто гигантское поле (при высоком разрешении), а при узком окне у браузера наоборот - появляется горизонтальная полоса прокрутки (верный признак плохого дизайна). Опять же, здоровенные "кнопки" для навигации. Общая оценка сайтам подобного типа — "2 с минусом".
Как же избежать столь неэффективного использования места?
1) Во-первых, никогда не ограничивайте ширину текста. При использовании таблиц указывайте их ширину только в процентах (и никогда - в пикселах).
2) Вставляйте больше иллюстраций к тексту. Лучше всего GIFы с небольшим количестовм цветов (8-16). Маленькие рисунки можно увеличить в два раза (значения атрибутов height и width тега img больше фактической высоты и ширины в два раза).
3) Используйте многоколоночный текст. НО: начало и конец колонок должны размещаться в пределах одного экрана, чтобы читателю не пришлось скроллировать текст вверх/вниз. Вот пример такого текста:
****************************************************************
*****************************************************************
***************************************************************
*****************************************************************
********************************************************
**************************** *****************************
******************************* ******************************
***************************** *********************************
****************************** *******************************
******************************* ********************************
****************************** ********************************
************************** *******************************
*****************************************************************
**************************************************************
**************************** *****************************
******************************* ******************************
***************************** *********************************
****************************** *******************************
******************************* ********************************
****************************** ********************************
************************** *******************************
***************************************************************
*****************************************************************
*****************************************************************
4) Добавьте побольше заголовков размером ¦ 3 и 4.
При проектировании узла в первую очередь разберитесь с информацией, которую вы собираетесь поместить - она должна быть самой свежей и интересной. Во вторую очередь обратите внимание на структуру сайта - она должна быть понятной, страницы должны быть простыми для использования, навигация должна быть эффективной и интуитивно понятной, а ссылки должны быть отлажены и быть в большом количестве. И только в последнюю очередь можно приняться за украшательство страниц.
Непременный атрибут каждого сайта - даже состоящего из десятка страниц - полное оглавление с кратким информативным описанием каждого пункта. Не забывайте, что оглавление - это "последняя соломинка" для потерявшегося на вашем сайте посетителя и именно оно позволяет быстро найти нужную информацию. Великолепно в этом случае будет смотреться outline на Java или что-нибудь подобное.
Все говорят, что каждый сайт должен иметь свой единый стиль. Что входит в это понятие? Во-первых, один и тот же фон для всех страниц. Во-вторых, одини и те же стили заголовков (гарнитура, размер, начертание). В-третьих, единая цветовая палитра для оформления сайта. В-четвертых, одни и те же меню, адреса и ссылки. И так далее.
Считается хорошим тоном предлагать посетителям весь материал сайта в виде единого файла, что весьма удобно для печати (не забудьте только его сжать!). И идите дальше - создайте архивный файл с копией всего сайта - чтобы его можно было бы легко просматривать в off-line. Во-первых, создать такой файл очень легко, во-вторых, пользователи в off-line гарантированно дождутся загрузки всей страницы со всеми рисунками и звуками, а в-третьих, это поднимает ваш рейтинг!
Самая большая проблема для русских сайтов ў это разные кодировки русского языка. Если вы не знаете, в какой кодировке написать свою главную страницу, поступите так: напишите русские слова в кодовой странице 1251, а чуть ниже напишите английские или русские в другой кодировке:
Добро пожаловать на мою главную страницу!
Welcome to my homepage!
И так далее. Поскольку на главной странице обычно не очень много текста, то такой прием будет выглядеть вполне нормально. А далее просто продублируйте каждую ссылку и рядом укажите, на страницу в
какой кодировке каждая из них ссылается:
Фотогаллерея (CP1251)
Фотогаллерея (KOI8R)
Photo Gallery (English)
Другой подход: сделайте несколько маленьких рисунков с русским текстом и поместите их на главную страницу. Это выглядит жутко, грузится невообразимо долго, но зато всегда работает.
Самый последний способ: пусть ваш сервер автоматически определяет кодировку клиента. Для этого можно использовать механизм SSI (Server Side Includes) или ASP (Active Server Pages), благодаря которому можно узнать много информации о клиенте (однако не все, что хотелось бы). При запросе страницы в переменную HTTP_USER_AGENT заносится строка, которая содержит:
Название браузера
Его версию
Платформу, на которой он работает
Дополнительную информацию
Вот примеры:
Microsoft Internet Explorer for Windows 95
Mozilla/2.0 (compatible; MSIE 3.0; Windows 95)
Netscape Navigator 3.0 for Windows 95
Mozilla/3.0 (Win95; I)
Netscape Navigator 3.0 for Macintosh (on PowerPC)
Mozilla/3.01 [ja] (Macintosh; I; PPC)
А вот пример документа index.shtml, который будет отвечать за определение кодировки и загрузки соответствующе закодированных страниц:
<!--#if "&&HTTP_USER_AGENT&&" contains "Win" goto IncludeCp1251 -->
<!--#if "&&HTTP_USER_AGENT&&" contains "OS/2" goto IncludeCp866 -->
<!--#if "&&HTTP_USER_AGENT&&" contains "X11" goto IncludeKoi8r -->
... другие кодировки ...
<!--#label IncludeCp1251--><!--#include "cp1251.html"--><!--#break-->
<!--#label IncludeCp866--> <!--#include "cp866.html"--> <!--#break-->
<!--#label IncludeKoi8r--> <!--#include "koi8r.html"--> <!--#break-->
...и так далее...
Обязательное требование для каждой страницы (не боюсь повторится, потому что это черезвычайно актуально): обязательно включайте в каждую страницу свое имя (web-Мастера, а не дизайнера), свой e-mail, a для корпоративных страниц - телефон и адрес фирмы, и - непременно - полный URL текущей страницы. Старайтесь разместить эту информацию так, чтобы она не занимала много места - всуньте все в один параграф, наклонным шрифтом размером ¦1-2.
На каждом уважающем себя узле есть страницы "Что нового", "Что крутого", "Вопросы и ответы" (FAQ), "Наши ссылки", "Наши анонсы" (Coming On Next Week). За время существования Интернет уже выработались некоторые стандарты на оформление узла (как стандарт IBM CUA на интерфейс программ) и эти страницы - одна из частей неписанного стандарта.
Придерживайтесь правила: чтобы дойти от одной страницы вашего сайта до любой другой, нужно сделать 3-5 щелчков мыши. Это очень важно: несоблюдение этой характеристики позволяет вашему посетителю легко потеряться на сайте даже очень маленького размера.
Насколько длинной должна быть одна страница? Нельзя дать универсального ответа на все случаи жизни. Например, на главной странице текста должно быть немного, а лучше - побольше (10-20) ссылок на разные, отличающиеся друг от друга темы (а Джеймс Сабо, редактор NetGuide, советует на главной странице размещать не более 4-х ссылок). На периферии упирайте на информацию и размещайте весь ее объем целик
ом на одной странице. Во-первых, одну большую страницу можно загрузить быстрее, чем множество мелких, во-вторых, ее можно будет быстро читать по мере загрузки, а в-третьих большие страницы легко распечатать.
Три примера на эту тему: два плохих ў результаты поиска на http://altavista.digital.com (всего десять ссылок за один проход) и http://info.med.yale.edu/caim/stylemanual/M_I_3.HTML (первая часть без всяких ссылок на продолжение и проч.) и один хороший — книги http://www.betabooks.mcgraw-hill.com (хотя 300КБ на страницу ў это, конечно, многовато).
Главная страница не должна превышать один экран. В крайнем случае - полтора.
Тестируйте свои страницы в разном разрешении и при разном количестве цветов. Для этого незаменимым помощником является программа QuickRes из Microsoft PowerToys, которая позволяет менять разрешение "на лету".
Есть хороший тест на содержательность страницы: распечатайте ее. При этом не менее 3/4 ее должно быть занято информативным текстом. (Это не относится к главной странице).
Ничто не придаст вашему сайту столько привлекательности, как простая "Феня Дня". Это может быть какой-то анекдот, рисунок, фото любимой девушки (каждый день — новой...) или что-нибудь еще. Можно пойти дальше и менять содержимое страницы при каждом заходе посетителя на страницу...
Экран компьютера должен быть равномерно заполнен вашей страницей независимо от разрешения! Количество информации, способное уместиться при разрешении 640х480 и 1027х768 очень разное. И страницы, сделанные для 640х480 при последенем разрешении выглядят очень плохо. В эффективном размещении материала на странице вам помогут таблицы (width="100%", height="100%") и фреймы.
Размещайте свои сайты в Интернет только после всех доделок или — по крайней мере — не используйте значок — просто бесит.
Если вы (1) используете картинку как ссылку на другую страницу, (2) картинка не выглядит как простая кнопка или стрелка, то (1) поставьте у картинке атрибут border в "2" или больше, (2) напишите в атрибуте alt о ссылке.
Более того, у всех рисунков (и вообще - у всех объектов) пишите атрибуты height и width — тогда браузер не будет во время загрузки страницы постоянно переформатировать текст (эти атрибуты автоматически проставляет Microsoft FrontPage).
ВСЕГДА указывайте размер загружаемой графики в атрибуте alt тега img (alt="symphony.jpeg; (100KB)") или в тексте ссылки, даже если рисунок меньше 10 килобайт. А картинки больше 20КБ старайтесь вообще не использовать.
Простой способ сделать разноцветные пульки (bullets): рисуете GIF-файл с
какой-нибудь картинкой (скажем, белый кружок на черном фоне), а затем просто присваиваете кружку прозрачный цвет. В тексте документа рисунок вставляете рисунок в таблицу с таким цветом фона, каким бы вы хотели видеть пульку. Заметьте, что цвет фона у
рисунка пульки должен совпадать с цветом фона основного документа - иначе будут видны квадратные границы. Более подробно этот вопрос рассмотрен по адресу
http://www.microsoft.com/workshop/author/other/mytips-f.htm.
Вверху ў таблица с рисунком в каждой ячейке, внизу ў та же таблица, но без рисунков.
Очень красиво будет смотреться на странице большая буквица. Ее можно оформить тремя разными способами:
Прием ¦1. Простое выделение первой буквы.
<font color="teal" size="7"><b>Д</b></font>авным-давно в стародавние времена...
|
[ Результат ]
Прием ¦2. Вставка в таблицу, отжатую влево:
<table align="left" border="0">
<tr>
<td>
<font color="blue" size="7"></b>Д</b></font>
</td>
</tr>
</table>авным-давно в стародавние времена...
|
[ Результат ]
Прием ¦3. Вставка в таблицу с другим фоном:
<table width="30" align="left" border="0">
<tr>
<td bgcolor="blue">
<font color="white" size="7"><b>Д</b></font>
</td>
</tr>
</table>авным-давно в стародавние времена...
|
[ Результат ]
Прием ¦4. Буквица с отступом от основного текста:
<table width="100%" border="0">
<tr>
<td bgcolor="blue" valign="top" width="30" align="center">
<font color="white" size="7"><b>Д</b></font>
</td>
<td width="100%">
авным-давно в стародавние времена...
</td>
</tr>
</table>
|
[ Результат ]
Прием ¦5. Буквица по середине:
<table width="50%" align="left" border="0">
<tr>
<td width="100%"> </td>
<td>
<font color="blue" size="7">>b<Д>/b<</font>
</td>
</tr>
</table>авным-давно в стародавние времена...
|
[ Результат ]
Для того, чтобы выровнять какую-либо картинку или текст по вертикали, поместите их в таблицу, у которой указана высота как самой таблицы, так и ее ячейки. К сожалению, Internet Explorer и Netscape Navigator по разному понимают атрибут height="100%": первый думает о полной высоте своего окна (это даже больше, чем видимая часть), а второй ў о высоте таблицы. Есть два способа разрешения этого конфликта.
Способ ¦1, простой.
Напишите просто:
<table height="90%">
<tr>
<td height="90%">
<img src="1.jpg" >
</td>
</tr>
</table>
|
[ Результат ]
Это будет довольно ровно центрировать картинку "1.jpg" в MSIE и будет практически по центру в NN.
Способ ¦2, не намного сложнее.
Можно применить JavaScript:
<script>
if (navigator.appVersion.indexOf("MSIE") != -1)
document.writeln("<table><tr><td height='90%'>");
else
document.writeln("<table height='99%'><tr><td height='100%'>");
</script>
|
Далее пишете текст для центрирования или вставляете картинку. В конце приписываете:
Таблицы ў это действительно очень мощное средство в HTML. Используйте их чаще и ваши страницы стаут выглядеть более правильно и стандартно. Напоследок я приведу некоторые нетрадиционные примеры применения таблиц.
Отступ слева.
<table border="0">
<tr>
<td width="10%"> </td>
<td width="90%">
...Здесь текст для отступления...
</td>
</tr>
</table>
|
Отступ справа.
<table border="0">
<tr>
<td width="90%">
...Здесь текст для отступления...
</td>
<td width="10%"> <td></tr>
</table>
|
Две колонки.
<table border="0">
<tr>
<td width="50%">
...Здесь первая колонка...
</td>
<td width="10">
<!-- Это промежуток между колонками -->
</td>
<td width="50%">
...Здесь вторая колонка...
</td>
</tr>
</table>
|
Ну и так далее...
В последнее время очень часто стали применяться фреймы. Чтобы убрать разделяющую фреймы полосу, напишите frameborder="0",а чтобы убрать расстояние между фреймами - напишите border="0" для Netscape Navigator и framspacing="0" для Internet Explorer (можно написать
их оба - тогда оба браузера будут показывать фреймы корректно).
Помещайте все картинки и фреймы одной страницы в ту же директорию, что и саму страницу. Вам будет легче ориентироваться на своем сайте, а вашим посетителям будет проще скопировать вашу страницу со всеми картинками к себе. Но часто используемые (более 1 раза) картинки поместите в отдельную директорию /images/, позволяя браузеру читать их из кэша.
Существует достаточно интересный способ нетрадиционного променения фреймов (я прочитал о нем в Windows Tech Journal). Дело в том, что когда вы описываете размеры каждого фрейма в теге frameset, можно сделать так, чтобы некоторые фреймы были либо за границами экрана либо имели нулевую ширину или высоту:
<frameset rows="100%,*">
<frame src="main.htm" name="main"> <!-- Видимый фрейм -->
<frame src="lib.htm" name="lib" noresize> <!-- Невидимый фрейм -->
</frameset>
|
Использовать невидимые фреймы можно самыми разными способами (ведь их содержание нельзя увидеть) ў для фоновой загрузки картинок; для хранения важных данных — переменных, настроек; для создания библиотек скриптов и так далее. (Замечу в скобках, что для последнего лучше всего использовать сам родительский файл с тегом frameset — и файлов меньше и вызов короче).
Как сделать красную строку? Нужно вставить пять v десять непереносимых пробелов:
Красная строка...
Символы "дефис" и "тире": символ "дефис" (en-dash) вставляется по коду –,
а "тире" (em-dash) ў по коду —. К сожалению, это работает не на всех платформах (только на Windows
и Macintosh).
