 |
|
|
|
|
|
Хитрости и советы
- Обязательно рисуйте все сами. Не используйте
первые попавшиеся картинки, поставляемые с HTML редакторами. Тем
более не воруйте картинки даже на самых дальних узлах.
- Нейтральный фон. Многие помещают в качестве
фона логотипы и тому подобную мишуру. Это вызывает усталость глаз,
затрудняет чтение (если есть, что читать), раздражает
пользователя.
- Необходимо поддерживать
все кодировки на профессиональных узлах. Этим Вы проявляете
уважение к пользователям других систем и расширяете контингент
пользователей.
- Желательна возможность выбора кодировки на любой
странице. Если пользователь нашел Вас по ссылке, ему не
придется идти в корень Вашего узла для выбора кодировки и
заблудиться по пути обратно.
- Не забывайте про alt="" в картинках. Не у
всех быстрые линии, тем более у нас в стране. Позаботьтесь о тех у
кого отключен показ рисунков.
- Не позволяйте читателю заблудиться
в структуре ваших документов. Если вы разрабатываете большое
дерево документов, в них стоит помещать так называемые
"путеводные ссылки", с помощью которых читатель
может в любой момент вернуться на домашнюю страницу или же к
заглавным страницам.
- Не используйте значки "Under Construction" -
это пошло. Напишите где-нибудь сбоку вежливое извинение и
предложение зайти попозже. Если уж Вам так нравятся яркие
картинки, поместите ее в самом верху главной страницы, а не в
каждом из 3-х Ваших фрэймов.
- Не пихайте на главную страницу фоновые звуки и другие
нестандарты. Очень раздражает, когда в качестве
приветствия получаешь сообщение об отсутствующем plagin'е.
Пользователь должен знать, что его ожидает.
- Постарайтесь не использовать метку
, даже если очень
хочется.
- Следите за читаемостью текста. Попробуйте
прочитать текст темносинего цвета написанный на грязнокоричневом
фоне. А если у пользователя не лучшее зрение? А если у него еще и
не лучший монитор? Если пользователю нужно будет прилагать усилия
для чтения содержимого вашего узла, то он уйдет от вас очень скоро
и никогда не вернется обратно.
- Не злоупотребляйте анимированными GIF'ами и
прочим движением, т.к. это сильно отвлекает пользователя от
остального содержимого узла, а при долгом просмотре (например:
чтение материала) начинает раздражать немилосердно.
- Лучше проставлять размеры у картинок, которые
влияют на раскладку (layout) страницы для сохранения ее
первозданного вида при отключенных картинках. но если Вы
используете иллюстрации к статье, то наоборот, нужно убрать
параметры размеров, чтобы большие пустые пятна не мешали читать
текст.
- Если Вы используете BACKGROUND="fone.gif", то неплохо
так же задать и BGCOLOR="#RRGGBB", где #RRGGBB - цвет,
соответствующий основному цвету изображения fone.gif. При загрузке
такая страница производит более благоприятное впечатление, так как
фоновое изображение подгружается в последнюю очередь.
- Вставляйте оглавление в начало больших
документов. Иногда возникает необходимость объединить
некоторую информацию в один достаточно большой документ. В этом
случае для облегчения навигации по документу в его начало стоит
вставить оглавление, содержащее ссылки на различные информационные
разделы, содерщащиеся в этом документе. Тогда читателю не придется
просматривать весь документ в поисках интересующей его информации
- он сможет сразу перейти к ней по ссылке из оглавления.
- Лучше думать сначала. Перед тем, как начать
делать сайт, тщательно продумайте его структуру на предмет общего
"дерева" страниц, ссылок между ними и использования графики. Это
позволит вам потратить меньше времени на его создание пользователю
больше удобства при его просмотре.
- Старайтесь, чтобы имена файлов соответствовали
содержимому (как вы его видите). Например: если ссылка
"Наши партнеры" будет вести к файлу konchenye_idioty.html то ...
И, к тому же, соответствие имени файла его содержимому немного
повысит рейтинг ваших страниц в поисковых системах.
- Предоставьте возможность браузерам использовать строку
состояния по назначению. Мало того, что пользователь не
может получить дополнительной информации о ссылке, но, кроме того,
еще и текст, бегущий в строке состояния, обычно очень плохо
читается.
- Первое впечатление о вашем узле складывается
от просмотра его заглавной страницы, а если еще учесть, что более
75% пользователей уйдут с нее через 10 секунд, не найдя того, что
им нужно, то целесообразно будет помещать активное содержание
страницы (информация о том, что конкретно пользователь может найти
на этом сайте) будет целиком умещаться в окне браузера при
просмотре в разрешении 800Х600 (основное количество пользователей
пользуются именно этим разрешением либо выше).
- Создайте прозрачный 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 или другой графической
программе до получения нужного Вам результата.
-
Задача: Облегчение работы по размещению объектов на
отдельно взятой странице (фактически верстка).
Примечание: для тех, кто пишет HTML-код руками или
пользуется не визивиг-овыми редакторами.
Результат: Ваши таблицы, графика, текст находятся на
странице в определенных им местах.
Способ достижения:
1. Рисуется картинка размером 1024х768 (или меньшего размера,
как кому будет удобней), на которую наносятся вертикальные и
горизонтальные линии шириной в 1 пиксел(pixel), через каждые 50,
100 точек (соответственно примерно 1,75 или 3,5 см) и разметка
(1-я линия - "50", 2-я - "100", и т.д.).
Обращу внимание на то, что нужно рисовать линию ограничивающую
рисунок снизу потому, что в случае, если Вы этого не сделали и у
вас страница имеет скроллинг, произойдет примерно следующее: ------+------+------
| |
------+------+------
| | <-- первый показ фона
------+------+------
| |
<-- дырка :)
| |
------+------+------
| | <-- второй показ фона
Назовем эту картинку, например table.gif.
2. Помещаем эту картинку как фоновый ресунок, для чего в
исходный код страницы пишем: <body
background="table.gif" ... >.
3. Смотрите страницу и распределяете ее элементы в удобном для
Вас виде.
4. Подкладываете реальный фоновый рисунок, для чего пишете
backgr.gif вместо table.gif.
| [ К следующей главе | К оглавлению | К предыдущей главе] |
