Обязательно рисуйте все сами. Не используйте первые
попавшиеся картинки, поставляемые с HTML редакторами. Тем более не воруйте
картинки даже на самых дальних узлах.
Нейтральный фон. Многие помещают в качестве фона логотипы
и тому подобную мишуру. Это вызывает усталость глаз, затрудняет чтение (если
есть, что читать), раздражает пользователя.
Необходимо поддерживать
все кодировки на профессиональных узлах. Этим Вы проявляете уважение к
пользователям других систем и расширяете контингент пользователей.
Желательна возможность выбора кодировки на любой
странице. Если пользователь нашел Вас по ссылке, ему не придется идти
в корень Вашего узла для выбора кодировки и заблудиться по пути обратно.
Не забывайте про alt="" в картинках. Не у всех быстрые
линии, тем более у нас в стране. Позаботьтесь о тех у кого отключен показ
рисунков.
Не позволяйте читателю заблудиться в структуре
ваших документов. Если вы разрабатываете большое дерево документов, в них
стоит помещать так называемые "путеводные ссылки", с помощью
которых читатель может в любой момент вернуться на домашнюю страницу или же к
заглавным страницам.
Не используйте значки "Under Construction" - это пошло.
Напишите где-нибудь сбоку вежливое извинение и предложение зайти попозже. Если
уж Вам так нравятся яркие картинки, поместите ее в самом верху главной
страницы, а не в каждом из 3-х Ваших фрэймов.
Не пихайте на главную страницу фоновые звуки и другие
нестандарты. Очень раздражает, когда в качестве приветствия получаешь
сообщение об отсутствующем plagin'е. Пользователь должен знать, что его
ожидает.
Постарайтесь не использовать метку
, даже если очень хочется.
Следите за читаемостью текста. Попробуйте прочитать текст
темносинего цвета написанный на грязнокоричневом фоне. А если у пользователя
не лучшее зрение? А если у него еще и не лучший монитор? Если пользователю
нужно будет прилагать усилия для чтения содержимого вашего узла, то он уйдет
от вас очень скоро и никогда не вернется обратно.
Не злоупотребляйте анимированными GIF'ами и прочим
движением, т.к. это сильно отвлекает пользователя от остального содержимого
узла, а при долгом просмотре (например: чтение материала) начинает раздражать
немилосердно.
Лучше проставлять размеры у картинок, которые влияют на
раскладку (layout) страницы для сохранения ее первозданного вида при
отключенных картинках. но если Вы используете иллюстрации к статье, то
наоборот, нужно убрать параметры размеров, чтобы большие пустые пятна не
мешали читать текст.
Если Вы используете BACKGROUND="fone.gif", то неплохо так же
задать и BGCOLOR="#RRGGBB", где #RRGGBB - цвет, соответствующий
основному цвету изображения fone.gif. При загрузке такая страница производит
более благоприятное впечатление, так как фоновое изображение подгружается в
последнюю очередь.
Вставляйте оглавление в начало больших документов. Иногда
возникает необходимость объединить некоторую информацию в один достаточно
большой документ. В этом случае для облегчения навигации по документу в его
начало стоит вставить оглавление, содержащее ссылки на различные
информационные разделы, содерщащиеся в этом документе. Тогда читателю не
придется просматривать весь документ в поисках интересующей его информации -
он сможет сразу перейти к ней по ссылке из оглавления.
Лучше думать сначала. Перед тем, как начать делать сайт,
тщательно продумайте его структуру на предмет общего "дерева" страниц, ссылок
между ними и использования графики. Это позволит вам потратить меньше времени
на его создание пользователю больше удобства при его просмотре.
Старайтесь, чтобы имена файлов соответствовали
содержимому (как вы его видите). Например: если ссылка "Наши
партнеры" будет вести к файлу kakieto_pridurki.html то ... И, к тому же,
соответствие имени файла его содержимому немного повысит рейтинг ваших страниц
в поисковых системах.
Предоставьте возможность браузерам использовать строку состояния
по назначению. Мало того, что пользователь не может получить
дополнительной информации о ссылке, но, кроме того, еще и текст, бегущий в
строке состояния, обычно очень плохо читается.
Первое впечатление о вашем узле< складывается от просмотра
его заглавной страницы, а если еще учесть, что более 75% пользователей уйдут с
нее через 10 секунд, не найдя того, что им нужно, то целесообразно будет
помещать активное содержание страницы (информация о том, что конкретно
пользователь может найти на этом сайте) будет целиком умещаться в окне
браузера при просмотре в разрешении 1024Х860 (основное количество пользователей
пользуются именно этим разрешением либо выше).
Создайте прозрачный GIF размером 1x1 и используйте ее для
точной подгонки расположения элементов вашего узла или создания разделительных
пространств, выставляя аттрибуты <WIDTH> и <HIGHT>.
Если Вы помещаете страницы узла в таблицы с фиксированной шириной
(например 600 пикселей), не забывайте помещать всю таблицу внутрь тэга
<CENTER>...</CENTER>. Этим вы сильно улучшите внешний вид
узла при просмотре в больших разрешениях (например 1600Х1200).
Не используйте маленький GIF для фона>. Однажды дизайнер хотел
получить "полосатый" фон и использовал для этого
<BODY BACKGROUND="backgrnd.gif">. Полоски были двухцветные,
горизонтальные и находились на расстоянии 10 пикселей друг от друга. Желая
уложить файл для фона в минимальное количество байт, автор сделал его размером
1х11 пикселей. В итоге, даже на машине с хорошей видеокартой, я с большим
удивлением наблюдал, как фон выводится строчка за строчкой, в течении секунды
или двух. Не так уж и долго, но зрелище раздражающее. Ведь только для того,
чтобы нарисовать один ряд такого фона (в 11 пикселей высотой) картинка
выводилась на экран несколько сотен раз! Ошибка в том, что человек не вдавался
в тонкости формата GIF. А последний больше всего "любит" горизонтальные
области одного цвета. И сжимает их с максимальной эффективностью. Сравните:
BCKGRND1.GIF, размером 1х11 пикселей "весит" 42 байта, а BCKGRND2.GIF,
размером 100х11 пикселей -- 80 байт.
bckgrnd1.gif - 42 байта
- bckgrnd2.gif - 80 байт
Более того, BCKGRND3.GIF (1000х11 пикселей) обошелся бы автору всего в
199 байт. Вывод: даже в ВЕБ-дизайне скупой платит дважды!
Хороший совет для совсем начинающих. Именно по дизайну, а не по верстке.
Попробуйте сделать сайт, используя только 3 цвета, включая текст. Три и не
больше. Я не говорю про невозможность оттенков, их можно сделать достаточно
много, но в рамках одного цвета. Если получилось гармонично, то попробуйте 2
цвета. Далее совет, из моего интуитивного опыта, тоже для начинающих. Если на
странице использован какой-то элемент, выделяющийся из общего фона, например
синяя страница, а в верхнем углу нарисовна фиговина 50*50 желтая, то надо
постараться использовать этот цвет в другой части страницы, чтобы воображаемая
прямая между ними проходила через всю страницу. И, наконец, последний совет.
Не спешите использовать в дизайне экзотические шрифты. В большинстве своем они
выделяются из общего дизайна, если только не натягивать дизайн на шрифт.
Получится лучше, если Вы текст, написанный стандартным шрифтом, обработаете
руками в PhotoShope или другой графической программе до получения нужного Вам
результата.
SHTML - это HTML документ,
просматриваемый сервером перед отправкой на наличие SSI (Server-Side Includes).
SSI выполняются, и результат их работы подставляется в посылаемый
документ.
Не используйте очень большие таблицы на
страничке Если есть возможность, поделите таблицу на несколько
более мелких таблиц или вообще откажитесь от них. Это связано с тем, что
содержимое таблицы не выводится на экран до тех пор, пока вся таблица не
скачана. И у пользователя создается иллюзия медленной загрузки этой страницы,
что нежелательно.
Так можно атоматически перенаправить
посетителя на другую страницу:
<html>
<head>
<title>WebClub Has
Moved</title>
<meta http-equiv="Refresh"
content="15;URL=http://www.webclub.ru/">
</head>
<body
bgcolor="#ffffff">
<h1 align=center>Web-masters Club
переместился</h1>
<hr>
<h2 align=center>Подождите 15
секунд или воспользуйтесь ссылкой:
<a href="http://www.webclub.ru">
http://www.webclub.ru
</a></h2>
</body>
</html>
Строка DOCTYPE (DTD), расположенная в
первой строке HTML документа, описывает стандарт HTML, который используется в
этом документе. Два наиболее используемых DTD: HTML 3.2: <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
HTML 2.0: <!DOCTYPE HTML
PUBLIC "-//IETF//DTD HTML//EN">
Чтобы заменить кнопку в формена
изображение используйте: <INPUT TYPE="image" SRC="graphic.gif"
HEIGHT="xx" WIDTH="yy" ALT="submit"
BORDER="0">
Если при размещении странички на сайте не видно
картинок, а в локальной версии всё было в порядке, то проверьте
следующее:
1. Адреса картинок не относительные, а абсолютные (типа
file///....).
2. Могут стоять неправильные слэши: не "/", а "\". В URL, как
правило, применяются прямые слэши "/".
3. FTP может класть на сервер файлики
с именами, написанными заглавными буквами - PICTURE.GIF, в то время как в тексте
будет прописано picture.gif или Picture.gif - для ОС типа UNIX это не одно и
тоже
Если Вы делаете карту ссылок из одного
изображения, разбитого на несколько частей, учтите, что язык HTML символ
перевода каретки (конец строки) воспринимает как пробел. Поэтому ВСЕ
тэги, которые у Вас формируют Вашу карту ссылок, нужно писать в ОДНУ
строчку, иначе между картинками будут
промежутки!
Для того, чтобы "собрать" один HTML-документ из нескольких
кусков, нужно использовать команды SSI (Server-Side
Includes):
<!--#include file="ssi/menu.html" --> - путь к
файлу указывается от текущего файла (файла, в котором расположена
команда).
<!--#include virtual="/ssi/menu.html" --> - путь к
файлу указывается от корня сервера.
Таким образом, например, можно задать
меню, одинаковое для всех страниц сервера, и хранить его в отдельном файле.
Тогда его изменение отразится на всем сервере и не потребует кропотливой работы
по правке всех HTML-страниц Вашего
сервера.
У адреса mailto:, применяемого для отправки писем, можно
задать и другие опции, крома самого адреса. Например, адрес такого вида: mailto:name@domain.ru?subject="Happy
Birthday!"&Body="Happy Birthday To You, My Friend!" задает, кроме
адреса, subject и даже текст самого письма.
Как избавиться от противной синей рамки по периметру
рисунка, который является ссылкой, очень прсто поставьте значение border равное нулю.
