Webmaster's secrets | |
‘Ћ„…ђ†ЂЌ€… |
‘одержание | ‚перед | Ќазад |
ЋђѓЂЌ€‡Ђ–€џ ‘Ђ‰’Ђ |
‘одержание | ‚перед | Ќазад |
Ќе используйте на своих сайтах стрелки "вперед" и "назад", особенно, если ‚аш сайт имеет иерархическую структуру (см. 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="фракталы сжатие архивирование графика">
Љогда вставлЯете в текст ссылку, выделЯйте только одно-два ключевых слова, несущих основную смысловую нагрузку. Ќи в коем случае не приписывайте "кликните здесь" (в лесу, что-ли?). ‚ крайнем случае, припишите название или адрес стр аницы и выделите его. ‚от несколько примеров правильного выделениЯ слов длЯ ссылки:
Џри использовании больших рисунков с картами четко выделЯйте ссылки (псевдо-кнопками, границами, выделЯющимисЯ надписЯми - см. например http://www.usatoday.com) и пишите маленькое примечание: "™елкните мышью на интересующей ‚ас теме". €збегайте "adventure page", заставлЯющих людей излазить курсором мыши всю страницу, чтобы найти хоть какую-то ссылку. € не забывайте про краткий текстовый вариант карты.
ђегулЯрно проверЯйте все свЯзи на своем сайте. ‚полне возможно, что некоторые узлы уже не существуют или находЯтсЯ на реконструкции, поэтому имеет смысл удалЯть такие ссылки. Ќе ссылайтесь на узлы "under construction" - может со здатьсЯ впечатление, что вы не знаете других не менее интересных, но уже закоченных сайтов.
Ќи в коем случае не изменЯйте цвета ссылок на странице, но если это все-таки необходимо по соображениЯм дизайна, используйте разные цвета длЯ новых ссылок (Яркие) и уже посещенных (блеклые).
Њожно описать ссылку на страницу в строке статуса окна браузера - это позволЯет разместить горазда больше информации, чем обычно:
Џри этом OnMouseOut (событие происходит тогда, когда курсор мыши уходит за пределы текста ссылки) будет работать только на Netscape Navigator, а в других надпись останетсЯ в строке статуса. ЋбратнаЯ сторона этой медали в том, что пользователи, которые любЯт смотреть адреса страниц в строке статуса окна браузера, их не увидЯт, что, чест но говорЯ, не очень и радует. ђешайте сами, что лучше длЯ ваших посетителей.
„лЯ навигации на линейном сайте (который Я все-таки категорически не рекомендую создавать) помещайте вверху и внизу каждой страницы ссылки соответственно "начало" и "продолжение".
|
(начало)
(продолжение) |
ЋбЯзательно добавлЯйте (внизу страницы) ссылки на оглавление, на печатную версию, на резюме статьи (если хотите) и на соотносЯщиесЯ с содержанием страницы.
Ћдин из приемов навигации на иерархических - это "директории", как например такой:
/ ѓлавнаЯ страница / Џрограммное обеспечение / ђедакторы
‘м. также хороший пример на http://www.yahoo.com
Ћдин из самых замечательных способов навигации в гипертексте, который Я когда-либо видел, воплощен в Delphi On-Line 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>
|
„алее пишете текст длЯ центрированиЯ или вставлЯете картинку. ‚ конце приписываете:
</td></tr></table> |
’аблицы — это действительно очень мощное средство в 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 — и файлов меньше и вызов короче).
Љак сделать красную строку? Ќужно вставить пЯть – десЯть непереносимых пробелов:
‘имволы "дефис" и "тире": символ "дефис" (en-dash) вставлЯетсЯ по коду –, а "тире" (em-dash) — по коду —. Љ сожалению, это работает не на всех платформах (только на Windows и Macintosh).