|
|
Графика
на Вашей странице
Хитрости от мастера
-
Обязательно рисуйте все сами.
Не используйте первые попавшиеся картинки, поставляемые с 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.
[Оглавление]
|
|
