Рассылка www.vns.ru
№1 27 января 2002 г.
Веб-дизайн от А до Я
в выпуске:
графика: советы и хитрости
выбираем себе форум
правила хорошего тона
индикатор праздников
 
для дизайнера:
CorelDRAW
Macromedia Flash
MS Front Page
Dreamweaver
Чат-форум
Статьи
Шрифты
Программы


Здравствуйте!

Мы будем благодарны всем советам, пожеланиям, замечаниям какие можно нам высказать по этому адресу.
Архив рассылок вы можете посмотреть здесь.

ГРАФИКА: советы и хитрости


Обязательно рисуйте все сами. Не используйте первые попавшиеся картинки, поставляемые с HTML редакторами. Тем более не воруйте картинки даже на самых дальних узлах. Нейтральный фон. Многие помещают в качестве фона логотипы и тому подобную мишуру. Это вызывает усталость глаз, затрудняет чтение (если есть, что читать), раздражает пользователя. Необходимо поддерживать все кодировки на профессиональных узлах. Этим Вы проявляете уважение к пользователям других систем и расширяете контингент пользователей. Желательна возможность выбора кодировки на любой странице. Если пользователь нашел Вас по ссылке, ему не придется идти в корень Вашего узла для выбора кодировки и заблудиться по пути обратно. Не забывайте про alt="" в картинках. Не у всех быстрые линии, тем более у нас в стране. Позаботьтесь о тех у кого отключен показ рисунков. Не позволяйте читателю заблудиться в структуре ваших документов. Если вы разрабатываете большое дерево документов, в них стоит помещать так называемые "путеводные ссылки", с помощью которых читатель может в любой момент вернуться на домашнюю страницу или же к заглавным страницам. Не используйте значки "Under Construction" - это пошло. Напишите где-нибудь сбоку вежливое извинение и предложение зайти попозже. Если уж Вам так нравятся яркие картинки, поместите ее в самом верху главной страницы, а не в каждом из 3-х Ваших фрэймов. Не пихайте на главную страницу фоновые звуки и другие нестандарты. Очень раздражает, когда в качестве приветствия получаешь сообщение об отсутствующем plagin'е. Пользователь должен знать, что его ожидает. Постарайтесь не использовать метку <BLINK>, даже если очень хочется. Следите за читаемостью текста. Попробуйте прочитать текст темносинего цвета написанный на грязнокоричневом фоне. А если у пользователя не лучшее зрение? А если у него еще и не лучший монитор? Если пользователю нужно будет прилагать усилия для чтения содержимого вашего узла, то он уйдет от вас очень скоро и никогда не вернется обратно. Не злоупотребляйте анимированными 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 байт.Более того, 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

Удачи! Демченков Владимир ( vdem@bk.ru )
www.web.sanatory.net

[ к содержанию ]
Выбираем себе форум


Каждый, заводя себе сайт, задумывался об хорошем форуме. Сейчас существует только несколько хороших форумов. Это Vbulletin, Ikonboard, UBB, wwwthreads и ita-forum. Мы разберём каждый форум по отдельности. У каждого форума есть свои преимущества и недостатки.

   Начнём, с самого лучшего, на мой взгляд форум. Это Vbulletin ( http://www.vbulletin.com ). Этот форум просто феноменален по своим возможностям, но является платным (но если потрудиться, то можно достать и бесплатную версию). Его можно настроить, выбирая стиль, цвета, различные шрифты, и настраивая форум под дизайн своего сайта. Имеется несколко уровней управления форумом  (обычный пользователь, модератор, супер модератор, администратор). На каждый случай пользователю высылается сообщение по e-mail, это может быть регистрация, подписка на тему, ошибка, смена данных (пароль или e-mail). Для пользователей предусмотрено всё - это поддержка аватаров,различных титулов,приватных сообщений и много других интересных возможностей. Но есть один недостаток. Это плохая оптимизация под дизайн графически.

  Следующее творение, это ita-forum. Этот продукт выделяется тем, что он не "буржуйский", а наш, российский. Автор этого творения - Ita-Studio ( http://www.ita-studio.com ).  Этот форум поддерживает аватары, имеет простую настройку так как весь на русском языке. Но самая главна яотличительня черта от других форумов, это лёгкая настройка графических объектов под дизайн. Если владеть графикой в  совершенстве, то можно из обычного форума сделать очень красивую вещь.

  Продукт сайта http://www.wwwthreads.org - форум wwwthreads.Чем понравился мне отот форум ? Это единственный форум, где нет ничего лишнего и где всё стоит на своих местах. Он очень легко настраивается, но к сожалению полная версия форума является платной, но можно скачать и бесплатную версию, в которой меньше полезных функций. Страницы грузятся очень быстро, графика используется только в отдельных местах. Здесь нельзя ставить аватары, но можно выкладывать свои фото в своей анкете. И очень очень мало графики. Приятно форум воплощён на http://www.hostforum.ru.

  Форум Ikonboard - продукт сайта www.ikonboard.com . очень многие web-мастера отдали предпочтение именно этому форуму. Он очень прост в установке и содержит массу полезных функций. Очень просто в употреблении, но администратирование форума лично мне доставляло много хлопот. Имеется много переводов к этому форуму, но самым популярным и точным является перевод "RU-BOARD TEAM", находящейся по адресу www.ru-board.com . Есть в этом форуме недостатки - очень плохо поддаётся настройке верхняя часть форума, то есть его титульная часть. Также по-моему предлагается очень маленькая анкета для пользователей. Ikonboard не легко оптимизируется под нужный дизайн.

  Остался только один форум - UBB (Ultimate Bulletin Board) - продукт сайта http://www.infopop.com. Он очень удобен в пользовании, но поддерживает мало функций по настройке дизайна. Именно по этому почти везде, при использовании этого форума, некоторые цвета сливаются и получается этакая "каша". Я думаю дальше не стоит разбрирать этот форум, так как самое важно про него уже написано.

  Здесь выложены описания самых "употребляемых" форумов, и прочитав их вы можете выбрать наиболее подходящий вариант и ставить себе на сайт. Некоторые согласятся с моим мнением, а некоторые нет, ведь всегда были голоса "за" и "против".

Бочкарёв Антон
http://www.wmaster.ru - Всё для веб-мастера.


[ к содержанию ]

Правила хорошего тона в веб-дизайне
Желательно чтобы сайт нормально выглядел как в NC так и в Internet Explorer`е и в разных режимах монитора (640X480, 800X600, 1024X784). Правда я считаю, что рассчитывать на пользователей с разрешением 640X480 неверно, потому что большинство работает в 800X600 и все больше переходит к 1024X768.

Не стоит использовать на страничке много анимации или JAV`ы, у некоторых одна картинка или JAVA аплет грузится более минуты. Также не очень здорово когда на страничке установлены часы или бегущая строка.

Еще один очень важный момент - это использование правильных цветов на страничке. Текст должен быть контрастным и прекрасно читаться.

При использовании 'BACKGROUND`а' необходимо установить цвет под слойки (BGCOLOR) похожим на цвет картинки используемой в качестве 'BACKGROUND`а'

Что касается фреймов, то тут есть несколько мнений. Я считаю что они только добавляют удобства, если используются с умом. Если вы используете фреймы для упрощения навигации по серверу, не используйте в управляющем фрейме текстовые ссылки, т.к. у разных пользователей установлен неодинаковый регистр шрифта и у некоторых текст может не поместиться в фрейм, а это очень неприятно. Также следует следить, чтобы ссылки открывались в нужном фрейме или в новом окне браузера.

Не желательно использовать значки типа 'Under Construction', хороший сайт должен и так постоянно обновляться.

Если вы создаете корпоративный сайт не используйте картинки из бесплатных коллекций.

Чтобы расположить все на страничке подобающим образом, хорошо использовать таблицу со значением BORDER=0. Для создания отступов можно использовать прозрачный gif размером 1x1 пиксель используя теги HSPACE и VSPACE для достижения нужной цели.

Желательно предложить альтернативную версию сайта - без наворотов для пользователей старых браузеров и низкоскоростных соединений.

Источник: InfoCity


[ к содержанию ]
Индикатор праздников

Индикатор текущего и наступающего праздника.

Индикатор представляет из себя кнопку 88x31, позволяет настроить его на часовой пояс в котором находиться ваш сайт, выбрать за сколько дней оповестить о приближающемся празднике. Но главное достоинство индикатора, наряду с тем что он напоминает и поздравляет посетителей сайта со 108 праздниками - раскрутка сайта на котором его устанавливают!

Работает это так:
Если посетитель кликнул по индикатору, то скрипт индикатора записывает в базу переданные ему параметры (URL сайта куда переходить по кнопке, ALT текст для тега IMG кнопки, и URL источника графики кнопки), затем ваша кнопка будет показываться на главной странице системы открыток и в каталоге выбора изображений под открытку до тех пор пока на другом сайте не кликнут по индикатору. В качестве источника графики используются только кнопки 88x31 размером не более 16384 байт.

В зависимости от качества исполнения вашей кнопки, её продуманности и привлекательности можно за 1 клик получить от 1 до 10 посетителей на сайт с которого пришёл клик. Своего рода сеть обмена кнопками между нашей системой открыток, и другими сайтами.

Более подробно прочитать о сервисе и получить код индикатора можно на странице:
http://nop-esc.ru/raduga/i_indic.htm

Система открыток "RADUGA .:. NOP E.S.C." расположена по адресу:
http://nop-esc.ru/cgi-bin/raduga/raduga.cgi

К участию в системе обмена кнопками не принимаются сайты пропагандирующие жестокость гнев, вражду на почве половой и рассовой дискриминации, порно сайты, однако и на этих сайтах может быть установлен индикатор, просто для его установки ненужно заполнять поля URL, ПУТЬ, ALT в форме генератора кода.

Кнопка сайтов нарушающих установленные правила будет игнорироваться системой.


[ к содержанию ]
Интересные ресурсы


Сюда может попасть любой желающий. Послать заявку...

Авторам

Вы хотите, чтобы ваши статьи были опубликованы в этой рассылке? Если вы считаете, что можете написать о дизайне, скриптам, графике и т.п., если Вам есть что сказать и о чем рассказать, я буду рад сотрудничеству с Вами. Присылайте свои предложения и статьи.
Давайте вместе делать общее дело! Присылайте свои соображения, мысли, истории... поделитесь своим опытом.
В качестве гонорара Вы получите показы сети RLE (от 1000 до 10000) плюс N-кол-во читателей, которые посетят Ваш сайт.
Буду рад сотрудничеству.

http://www.vns.ru

ведущий рассылки: Павел