Определение типа и версии броузера

Как известно, броузеры отличаются широтой толкования стандартов HTML. Один и тот же код в каждом из броузеров проявляется несколько по-разному. Чтобы получить одинаковый результат иногда требуется писать разный код - для каждого броузера свой. И, разумеется, функция, которая бы сообщала нам о том, подходит броузер для отображения странички в полном объеме или нужно ограничиться урезанной версией, была бы как нельзя кстати.

Узнать тип используемого броузера достаточно просто. Нужно прочитать значение свойства appName объекта navigator. Точно таким же образом из свойства navigator.appVersion мы выуживаем версию броузера. Все это реализуется следующим фрагментом кода:

var browser_name = navigator.appName; var browser_version = parseFloat(navigator.appVersion);

В принципе, эти переменные уже можно использовать для того, чтобы писать броузерозависимый код. Но мы поступим немного по-другому и для удобства воспользуемся механизмом флажков. Т.е. определим некую глобальную логическую переменную, например, browser_ok и в зависимости от результата проверок полученных ранее переменных browser_name и browser_version присвоим ей значение true (если по результатам проверки броузер удовлетворяет неким условиям) или false (в противном случае).

Логичный вопрос - зачем все нужно так усложнять? И ответ - для упрощения написания сложных функции и избежания повторных проверок.

Итак, вот пример кода, в котором мы проверяем броузер на соответствие следующим критериям: он должен быть либо Internet Explorer, либо Netscape Navigator и иметь версию не ниже 4-ой: var browser_ok = false; if (browser_name == "Netscape" && browser_version >= 4.0) browser_ok = 'true'; else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 4.0) browser_ok = 'true';

Разумеется, условие может быть и более сложным, в зависимости от того, какие цели Вы преследуете. Кроме проверки типа и версии броузера мы можем также узнать количество используемых цветов, ширину и высоту экрана, возможность поддержки определенных плагинов и другие не менее полезные вещи, а значит, и скорректировать поведение скрипта. Можно завести более одного флажка, если мы собираемся писать разный код для разных броузеров. В данном конкретном случае мы просто выполнили проверку броузера на соответствие 4-ой версии. Это было сделано с целью безболезненного отсечения старых версий броузеров (чтобы они не показывали ошибку при обращении к страничке) и для проверки возможности использования DHTML.

Итак, код проверки броузера и выставления флажка, сигнализирующего о том, что броузер нам подходит, мы написали. А теперь научимся этим пользоваться. Основное правило заключается в том, что весь зависимый от этого флажка код нужно предварять проверкой его значения:

function somefunction() { if (browser_ok == 'true') { // здесь и располагается зависимый код } }

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

Оптимизация графики

Для web-страниц очень важным является вопрос размера фотографии. Какого размера их делать? Не будут ли они слишком долго грузиться? При оптимизации можно уменьшить размер файла, но вряд ли стоит оптимизировать фотографию, не несущую смысловой нагрузки. Самый первый этап оптимизации - выделение в фотографии главного (с отбрасыванием всего остального) и акцентирование на иллюстрируемом элементе. Это достигается при помощи операции кадрирования и нахождения наиболее выразительной части, передающей смысл фотографии. После этой операции уже можно оптимизировать изображение, и в этом случае оно действительно будет иметь наименьший размер.

А с размерами фотографий нужно придерживаться определенного компромисса - не делайте их слишком мелкими, на которых даже под лупой ничего не разглядишь, и не делайте их слишком огромными, чтобы время не растянулось в вечность. Хотя, разумеется, есть исключения: правильно оптимизированная большая фотография может занимать время пересылки, эквивалентное времени пересылки обычной фотографии и, наоборот, дурно оптимизированный маленький рисунок будет грузиться до конца дней. Под обычной фотографией я понимаю фотографию размером примерно 250x300 пикселей и занимающую порядка 6-10 килобайт. Это не значит, что все Ваши фотографии должны иметь такие размеры, но площадь фотографии должна быть ей эквивалентна. Эти рекомендации относятся к "иллюстрирующим" текст фотографиям и не относятся к рисункам, выполняющим функции элементов навигации.

В этой статье приведены некоторые базовые сведения по применению графики на web-страницах. А в последующих статьях я опишу различные аспекты изготовления и оптимизации графики.

Назад | Содержание | Вперед

Оптимизация изображений в формате GIF

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Формат GIF сильно отличается от JPG и использует совершенно другие методы оптимизации. Он предназначен для хранения изображений с количеством цветов не более 256, поддерживает палитру и использует сжатие без потерь по методу LZW.

Методы оптимизации можно разделить на следующие типы (исключая оптимизацию анимированных GIFов):

уменьшение количества цветов

оптимизация палитры изображения

стилизация изображения

искажение размеров изображения

фрагментарная оптимизация

оптимизация "прозрачных" изображений

использование чересстрочной развертки

Теперь разберемся по порядку с этими методами и приемами оптимизации.

Оптимизация изображений в формате JPG

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Итак, графика для Ваших страничек готова. Но выкладывать ее на сервер еще рано, так как уже не раз было сказано - если странички качаются долго, то толку от них нет. Эта статья посвящена оптимизации изображений в формате JPG.

Данный формат хранит изображения c цветовой глубиной 24bpp (TrueColor) и использует сжатие с потерей информации. У него не так уж много способов оптимизации, точнее сказать, - один: выбрать оптимальный коэффициент сжатия.

Для осуществления такой оптимизации нужен графический пакет или утилита, которые позволяют нам регулировать степень сжатия изображения. К сожалению, PhotoShop в базовой конфигурации не позволяет нам свободно регулировать степень сжатия (он предлагает несколько фиксированных значений). Правда, для него можно найти модули, специально подключаемые для осуществления данной операции. Для оптимизации графики лучше воспользоваться программами типа PhotoPaint или PaintShopPro. В этих программах возможно регулирование степени сжатия либо заданием процента потерь, либо заданием значения качества от 0 до 255.

Оптимизация палитры изображения

Преобразование полноцветного изображения в индексное (т.е. - с использованием палитры) является важной операцией, и тут нужно сказать несколько слов о том, как это делается современными графическими пакетами.

Палитра конечного изображения может быть либо фиксированной, либо оптимизированной. В первом случае графический редактор просматривает каждую точку изображения и подбирает ей ближайшую по цвету из палитры. Этот способ дает самые худшие результаты с точки зрения верности воспроизведения цветов. Попробуйте, например, преобразовать фотографию красной розы в индексное изображение, используя палитру, содержащую оттенки зеленого ;) Это, конечно, крайний случай, но это даст Вам возможность оценить качество преобразования с использованием фиксированной палитры. Тем не менее, данный способ применяется - в основном для того, чтобы изображения приемлемо выглядели на мониторах с малым количеством цветов (16, 256). Обычно в этом случае пользуются т.н. палитрой Netscape (или безопасной палитрой), состоящей из набора часто используемых цветов и их оттенков. Палитра Netscape гарантирует, что изображения, использующие эту палитру, будут одинаково показаны всеми броузерами. Для иллюстрации - посмотрите на два изображения: левое использует оптимизированную палитру, а правое - фиксированную палитру Netscape.

Во втором случае, когда используется оптимизированная палитра, графический редактор вначале анализирует рисунок и составляет список всех используемых в изображении цветов. Далее, на основании частоты появления цветов, составляется палитра, которая называется оптимизированной. После этого, уже обычным способом, просматривается рисунок, и цвет пикселя изменяется на ближайший из палитры. Этот способ дает гораздо лучшие результаты (см. рисунок выше), и именно его следует применять, если у Вас нет иных причин для использования фиксированной палитры.

При оптимизации конкретного изображения задача состоит в том, чтобы выбрать наиболее оптимальное количество цветов в палитре. Тут уместно сказать о способе увеличения количества используемых цветов при их недостатке, т.н. дизеринг (Dithering). Например, у нас есть 16 стандартных чистых цветов, а нам нужен отсутствующий оранжевый цвет. В таком случае, мы можем составить его из красных и желтых точек, разместив их в шахматном порядке. Издалека нашим глазам покажется, что это сплошной оранжевый цвет. Это классический пример дизеринга; его использование при преобразовании изображений может дать очень хорошие результаты. Но с точки зрения оптимизации размеров файла происходит совсем обратное. Дизеринг может увеличить размер файла, причем довольно существенно (он может стать больше, чем до оптимизации :). А все дело в методе хранения изображения форматом GIF. Изображение перед сохранением на диске подвергается сжатию методом LZW, а основная особенность этого метода заключается в том, что сжатию лучше всего поддаются области, заполненные однородным цветом, и хуже всего - области, состоящие из набора разноцветных точек. Дизеринг же как раз и основан на том, что получает недостающие цвета путем "перемешивания" точек разных цветов. Поэтому к оптимизации при помощи дизеринга нужно относиться очень аккуратно и по возможности не использовать. Ниже приведены две картинки: обе используют фиксированную палитру, но к правой применен дизеринг, а к левой - нет. Посмотрите, как изменилось изображение, а заодно обратите внимание на размеры файлов.

Оптимизация "прозрачных" изображений

Формат GIF позволяет сохранять т.н. "прозрачные" изображения. На самом деле, GIF не поддерживает прозрачность в изображениях (т.н. альфа-канал), он лишь позволяет назначить одному любому цвету в палитре атрибут прозрачности. Когда броузер рисует на экране такой GIF, то, встречая "прозрачный" пиксель, он просто игнорирует его и не печатает на экране. Само по себе это хорошо, но в случае использования метода сглаживания краев изображения (anti-aliasing) и последующего сохранения в формате GIF, возникает проблема появления ореола вокруг прозрачного изображения в случае, если GIF показывается на фоне, отличном от того, на котором происходил anti-aliasing. Это прямое следствие отсутствия поддержки канала прозрачности форматом GIF. Единственным способом уменьшения проявления этого эффекта является назначение прозрачным пиксела по цвету, близкому к фону, на котором будет использоваться GIF, и проведение anti-aliasing'а на этом же фоне. Ниже приведены два изображения: на левом anti-aliasing проведен на белом фоне, и поэтому ореол не заметен, а на правом - на контрастном синем, и ореол хорошо виден.

Отправка формы по почте

Давайте разберем типичный пример - отправку формы по почте. Для этого мы воспользуемся готовой программой из архива Matt Wright, предназначенной для отсылки содержимого формы по почте - FormMail. Этот скрипт нужно сконфигурировать и разместить на web-сервере в специальном каталоге, где располагаются CGI-программы. Обычно он называется cgi-bin (для уверенности проконсультируйтесь с вашим провайдером - предоставляет ли он услуги по размещению CGI-скриптов, и как называется каталог для размещения скриптов). А на страничке - описать форму. Таким образом, нам нужно подготовить два файла: создать HTML-форму и сконфигурировать Perl-скрипт под наши нужды.

Первое правило профессионального web-дизайна

Для чего же мы должны учитывать то, как смотрятся наши странички в обоих броузерах, если имеется стандарт языка HTML, и все они обязаны правильно просматривать код? А в том-то и дело, что интерпретируют они код по-разному (иногда очень по-разному), причем не только версии разных броузеров, но и разные версии одного и того же броузера. Причиной этого явилась конкуренция компаний, когда они вводили новые тэги для повышения конкурентоспособности своих продуктов. И как следствие любой закрытой программы, они по разному понимают значение тех или иных тэгов.

Отсюда, первое правило - профессиональный web-дизайнер просто обязан знать, как просматриваются его странички во всех популярных броузерах и их различных версиях.

Подготовка к регистрации

Ну вот, описание уже составлено, ключевые слова найдены. Но не спешите, ведь все каталоги и поисковые системы, при регистрации, запрашивают практически одинаковую информацию. Каждый раз ее вводить это достаточно утомительное и долгое занятие. Ускорить процесс можно, если заранее составить краткий паспорт сайта. Который может выглядеть примерно так:

Название сайта: Web-studio "Cherry-Design"

URL сайта: http://www.cherry-design.spb.ru/

Описание сайта: Дизайн и изготовление web-сайтов, их поддержка и раскрутка в сети. Статьи и ссылки по web-дизайну, полезные рекомендации.

Ключевые слова: дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML, JavaScript, CGI, SSI, ASP, вишня, cherry.

Контактное лицо: Михаил Мельников

E-mail регистрации: cherry-design@mail.ru

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

Благодаря такой схеме, мы теперь сможем заполнять поля в формах, используя обычный способ "копирования и вставки" (Cut&Paste), что сильно ускоряет процесс.

Осталось найти список поисковых систем и приступить к регистрации. Для удобства, я уже давно создал такой список. Каждая ссылка в нем открывается в новом окне, что позволяет зарегистрировать сайт "не сходя с места". Если у Вас русскоязычный ресурс, то достаточно зарегистрироваться только в первой части списка.

После выбора конкретной поисковой системы, Вам нужно будет найти в ней пункт меню типа "Добавить сайт" или "Предложить ресурс". В некоторых каталогах и поисковых системах, этот пункт запрятан достаточно хорошо и придется проявить смекалку, чтобы отыскать его. Ну а далее, все просто - нужно следовать появляющимся на экране инструкциям, которые немного отличаются в разных системах.

Назад | Содержание | Вперед

Подготовка страничек для поисковых систем

Кроме правильной регистрации сайта в поисковой системе (см. предыдущую статью), нужно еще и подготовить наши странички для правильной их индексации. В отличие от каталогов, поисковые системы берут ключевые слова и описание сайта непосредственно из кода странички. Для этой цели служат два META-тега - "description" и "keywords". Первый отвечает за описание сайта, которое будет выводиться при ответе на запрос, а второй определяет ключевые слова при поиске.

Тут будет уместно сказать, что не все поисковые системы придерживаются такой методики. Во-первых, многие системы проверяют, чтобы содержание ключевых слов соответствовало основному тексту странички. Во-вторых, нельзя повторять ключевые слова несколько раз - Вас могут вообще не включить в базу данных. В-третьих, полнотекстовые поисковые системы анализируют все содержимое странички, но ключевые слова в них имеют приоритет при поиске.

Если Вы уже подготовили паспорт сайта, то ключевые слова и краткое описание у Вас уже есть. Для моего сайта, к примеру, две строчки кода для поисковых систем будут выглядеть так:

Для более широкого охвата потенциальной аудитории ключевые слова и описание сайта рекомендуется корректировать в соответствии со смыслом данной странички. Это повысит вероятность попадания на Ваш сайт. Скажем, для этой статьи я скорректирую описание и ключевые слова следующим образом:

Общее же описание сайта останется для "нейтральных" страничек.

Подготовка текстов

Кроме разработки структуры, важной частью данного этапа является подготовка текстов. Оригинальные тексты, например, взятые из буклета компании и выложенные в неизменном виде будут читаться плохо, ведь они разрабатывались совершенно для другого стиля восприятия информации. И на сайте такой текст будет смотреться отчужденно - это заметно. И, к сожалению, сей факт будет говорить лишь о пренебрежении авторов к своему сайту. Сайт может быть безумно красив, но лишь умные тексты позволят Вам удержать своего посетителя - не забывайте об этом.

Публикация текстов в Сети имеет свою специфику и буквальное повторение структуры буклета "О компании" будет ошибкой. Буклет просматривают линейно - сверху вниз и слева направо - по страничкам. Соответственно, и пишется текст, который последовательно излагает всю информацию. Для web-страничек же более логичным является способ структурированного представления информации. При этом варианте - в основной статье излагаются общие вопросы, а более подробное их освещение вынесено на отдельные странички, переход к которым, осуществляется по ссылке. Ссылка может быть, как в конце странички и таким образом она будет служить указателем на следующую страничку (это аналогично линейному просмотру информации), так и непосредственно внутри текста - указывая посетителю способ узнать о данном вопросе подробнее.

В чем преимущество именно такого способа представления информации? А в том, что посетитель читает лишь то, что ему нужно. Некоторым достаточно краткого обзора, в то время как другие предпочитают углубляться в суть вещей. Структурируя большую статью, мы разбиваем ее на ряд небольших фрагментов, каждый из которых содержит один из аспектов рассматриваемого вопроса. И читатель, волен, выбирать путь, по которому идти - отбирая лишь ту информацию, которая ему действительно интересна. А второе преимущество является следствием первого - небольшие странички очень быстро грузятся, что немаловажно.

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

Стиль изложения информации. Он является не менее важной частью, чем стиль дизайна и столь же уникален для хорошего сайта. На корпоративных сайтах, как правило, стиль изложения достаточно официален, но даже в этом случае, тексты желательно подготовить, а не выкладывать, всем надоевшую, информацию из пресс-релиза.

Структура готова, тексты написаны - вот теперь, пожалуй, и можно приступать к созданию набросков дизайна. На этой стадии очень важно выбрать инструмент, с которым Вы будете работать. Первоначальный вариант можно набросать и карандашом на листке бумаге, но его придется переносить в электронный вид. Многие web-дизайнеры предпочитают использовать для целей макетирования растровые или векторные редакторы, которые позволяют свободно манипулировать объектами на будущей страничке. Результатом этого этапа должна быть готовый эскиз.

Заметьте, что до сих пор, мы так и не приступили к HTML-кодированию, потому что на самом деле это далеко не первая по важности вещь и все вышеперечисленные шаги могут занять большую часть, отведенного на создание сайта, времени. Ведь, в конце концов, написание HTML-кода есть дело техники. Да, есть некоторые глюки и несостыковки со стандартами, но все это преодолимо. В то время, как вышеописанные шаги есть процесс творческий. Не забывайте об этом и увлекаясь кодированием не упускайте из виду более важные вещи.

Назад | Содержание | Вперед

Подсвечивание пунктов меню

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

Для начала, нам будет необходимо нарисовать каждую кнопку меню в двух вариантах: в "отжатом" и "нажатом" состояниях. Будем считать, что это уже сделано и перейдем к рассмотрению механизма, который обеспечивает нужную нам функциональность.

Начнем с написания HTML-кода меню. Это несложно и будет выглядеть примерно так:

Это обычное меню, составленное из графических элементов. Я опустил несущественные для понимания детали - такие как указание высоты и ширины изображения, тег ALT и т.п. Заметьте, однако, что для каждой картинки указан атрибут name, который понадобится для ссылки на картинку.

Теперь мы немного модифицируем меню, добавив в него вызов функций смены изображения. Для отслеживания попадания курсора мышки на изображение мы воспользуемся событием onMouseOver и привяжем к нему вызов функции смены изображения:

onMouseOver="change('pic1','pic/pic-1-on.gif');"

А для отслеживания ухода курсора с изображения, на помощь придет событие onMouseOut которое также вызывает функцию смены изображения, но уже с другими параметрами:

onMouseOut="change('pic1','pic/pic-1.gif');"

В первом случае мы указываем ссылку на изображение "нажатой кнопки", а во втором, соответственно, "отжатой" (или исходной картинки, что суть одно и тоже).

Теперь напишем всю конструкцию полностью на примере одного пункта меню:

Подобным образом необходимо обработать каждый пункт нашего меню. Отличие будет заключаться лишь в смене значения атрибута name, который для каждого пункта должен быть уникальным и соответствующей коррекции значений параметров в вызовах функций onMouseOver и onMouseOut.

Перед тем, как перейти к написанию кода, поговорим о том, каким образом мы можем управлять изображениями на страничке.

Как я писал в одной из более ранних статей, броузер перед показом странички на экране, разбивает ее на составляющие блоки и заносит их в свою базу данных, предоставляя нам доступ к информации посредством объектной модели. В частности, все картинки сохраняются в объекте images, который, в свою очередь, входит в объект document. И, например, для того, чтобы заменить одно изображение другим, нам достаточно воспользоваться следующей конструкцией:

document.images["pic1"].src = "pic/pic-1-on.gif";

Обратите внимание, что для ссылки на конкретное изображение (ведь на страничке их может быть много), мы используем имя картинки, которое указали в атрибуте name тега <img>. В данном примере, мы изменили изображение обычной кнопки, на ее "нажатый" вариант.

Точно таким же образом, мы можем обратиться и к другим атрибутам картинки: ширине (width), высоте (heigth), поясняющему тексту (alt) и т.д. В нашем же случае достаточно будет изменить только ссылку на картинку, т.к. изображения "обычной" и "нажатой" кнопки имеют одинаковые размеры.

Все необходимые знания для написания функции у нас уже есть, так что приступим. Вот код на JavaScript, который осуществляет подмену изображений. В качестве параметров мы передаем ему имя рисунка и ссылку на изображение "нажатой" (или "отжатой") кнопки:

function change(img, ref) { if (browser_ok == 'true') { document.images[img].src = ref; } }

О способе определения типа и версии броузера, подробно написано в первой статье цикла о JavaScript.

Предварительная загрузка изображений

Я специально выделил этот момент в отдельный подраздел, т.к. он очень важен и сильно сказывается на качестве эффекта и визуальной загрузке странички.

Для чего используется предварительная загрузка изображений? Ответ лежит в самом механизме работы интернет - как известно, любая страничка состоит из набора файлов, которые загружаются одновременно с основной страничкой. Но есть одна особенность - загружаются только картинки, которые видны на экране. Наш же эффект построен на подмене изображений и соответственно часть картинок при загрузке не видна.

Предварительная загрузка заключается в том, что мы заранее скачиваем невидимые картинки в кэш компьютера. Если предзагрузка не используется, то при смене картинки будет происходить заметная задержка - связанная с тем, что картинка будет загружаться непосредственно с сервера.

Механизм предварительной загрузки изображений осуществляется при помощи следующего фрагмента кода:

if (browser_ok == 'true') { a1=new Image; a1.src="pic/pic-1-on.gif"; a2=new Image; a2.src="pic/pic-2-on.gif"; a3=new Image; a3.src="pic/pic-3-on.gif"; }

Мы просто создаем объект Image для каждой невидимой в данный момент картинки и указываем адрес изображения. Это приводит к тому, что, дойдя до этого фрагмента кода, броузер инициирует загрузку изображений точно так же, как и для обычных видимых картинок. К концу загрузки странички, абсолютно все картинки ее составляющие находятся в кэше, и от этого будут загружаться мгновенно.

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

При грамотной нарезке страничек сайта, мы можем использовать часть изображений первой страницы во внутренних. Подобный механизм реализован на моем собственном сайте (www.cherry-design.spb.ru). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика составляющая пункты меню.

Надеюсь, что приведенные выше скрипты и описание механизма их работы, покажутся Вам полезными, и, используя их, Вы сможете реализовать свои задумки.

Архив с примерами скриптов, рассмотренных в данной статье, можно взять отсюда.

Продолжение следует...

Назад | Содержание | Вперед

Применение фоновых рисунков

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

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

В общем случае проблема заключается в том, как ячейки наследуют фон таблицы. Internet Explorer просто рассматривает ячейки как прозрачные по отношению к фону и никак не изменяет внешний вид фонового изображения. А вот Netscape Navigator рассматривает фон в каждой ячейке как совершенно независимый от фона таблицы и в каждой ячейке прорисовывает фон заново. Это приводит к тому, что фоновое изображение в таблице коверкается невероятным образом.

Для обхода этой особенности NN фоновые рисунки в таблице нужно помещать не напрямую, а используя вложенные таблицы. Причем во внешней (я выделил ее зеленым цветом) прописывается адрес фоновой картинки, а во внутренней требуется в качестве фона указать пустой URL:

Отсутствие атрибута background во внутренней таблице NN воспринимает таким странным образом, что отказывается показывать фон, указанный во внешней таблице. И единственный способ борьбы с этим - именно пустой URL.

Ну, вот пожалуй, этой статьей мы и завершим небольшой цикл о совместимости броузеров. А в следующей статье мы поговорим о том, как красиво оформить таблицы.

Назад | Содержание | Вперед

Проблемы с таблицами стилей

В последнее время в связи с широким распространением DHTML, CSS и 4-х версий броузеров возникла новая проблема, связанная с кодировками. И причиной ее появления служит использование каскадных таблиц стилей (CSS).

Как известно, CSS позволяет нам задать конкретный шрифт, который будет использоваться для отображения текста. И вроде бы, мы можем пользоваться абсолютно любым шрифтом, и от этого захватывает дух. Но проблема заключается в том, что шрифты берутся из набора, установленного на компьютере у посетителя, а вовсе не у Вас. И именно Ваш набор шрифтов совершенно не обязан быть у других. Как правило, его там и нет.

Что же делать? Неужели нельзя пользоваться разными шрифтами? Можно! Но с рядом ограничением и пониманием того факта, что даже при этих ограничениях у некоторых людей Ваша страничка не будет просматриваться.

Каковы же эти ограничения?

Первое и основное заключается в том, чтобы использовать только стандартные шрифты, поставляемые с Windows и гарантированно находящиеся на машине клиента. А этих шрифтов, как известно всего три. Вот их список: "Arial", "Times New Roman", "Courier".

А второе - корректное описание шрифта в таблице стилей и перечисление в списке также и других заменяющих шрифтов. В конце списка должно быть обязательное указание общего семейства шрифта (с засечками, без засечек, моноширинный и т.д.). При помощи такого описания мы увеличиваем потенциальную аудиторию нашего сайта. Пример корректного описания шрифтов в таблице стилей показан ниже.

Почему же нельзя использовать другие шрифты? Потому что в этом случае недостающий шрифт будет подменен ближайшим подходящим по умолчанию. Для уменьшения вероятности этого мы и используем в CSS список заменяющих шрифтов. Но еще хуже, если шрифт будет на компьютере, но окажется нерусифицированной версией. В этом случае текст будет отображен некими спецсимволами из набора знаков центральной Европы - всевозможные знаки с умляутами, апострофами, тильдами и т.п.

Из всего вышесказанного следует вывод - со шрифтами следует работать осторожно. И до сих пор много чисто текстовых надписей отливается в GIF. Ситуация не изменится до тех пор, пока шрифт нельзя будет загружать на клиентскую машину, подобно тому, как это происходит с картинкой. На самом деле, такая технология уже есть и реализована, например, в 4-ом Internet Explorer. Но она еще слишком сыра и, что самое главное, шрифт должен быть представлен в специальном формате. Будем надеяться, что в будущем это станет стандартом, а пока нужно с осторожностью пользоваться шрифтами, отливая редкие в графику и используя в CSS только стандартные.

Назад | Содержание | Вперед

Программа обработки растровой графики

одна из важнейших программ, которую Вам придется освоить. Она Вам поможет при сканировании фотографий и их коррекции. При помощи этой программы вы сможете создавать те невообразимые эффекты, которые Вы видите в Internet, рекламах и т.д. По моему мнению, обязательными являются следующие умения для этого класса программ:

Сканирование фотографий;

Коррекция отсканированных и готовых фотографий, в том числе - тоновая и цветовая коррекция;

Ретушь фотографий;

Умение кадрировать;

Понимание различий в форматах графических файлов;

Грамотное использование фильтров;

Работа со слоями.

В качестве конкретных программ можно привести следующие:

Adobe PhotoShop 3.0-5.0 - данная программа является лидером в области графических программ такого рода, но она требует и соответствующих ресурсов от Вашего компьютера.

Paint Shop Pro 4.0-5.0 - по моему мнению, лучшая shareware-программа, которая, к тому же, поддерживает фильтры от Adobe PhotoShop и очень быстро работает с объемными (>20M) фотографиями. Может импортировать и экспортировать изображения в 40-50 разных форматов.

Некоторые работы Вам придется делать, используя разные редакторы. Идеальных редакторов нет, некоторые лучше делают одно, некоторые - другое.

Программа обработки векторной графики

еще одна из важных для дизайнера программ. Позволяет создавать с нуля или с использованием клипарта различные логотипы, кнопки, эффектные надписи и т.п. вещи. Принципы векторных редакторов сильно отличаются от растровых, поэтому осваивать их придется отдельно; зато, освоив их, Вы заодно сможете изготавливать для себя фирменные визитки, бланки, брошюры (как побочный эффект :). Вам потребуются следующие навыки:

Умение работать с графическими объектами (группировка, наложение, получение нестандартных объектов);

Умение работать с кривыми и узлами кривых;

Умение работать с направляющими и сеткой;

Умение разбираться в цветовых моделях (RGB, CMYK, HSB);

Работа с текстом - умение разместить его на любой кривой;

Грамотное использование градиентов и заливок (включая фрактальные);

Грамотное использование эффектов.

Типичными представителями данного класса являются Corel DRAW 7.0-8.0 и Adobe Illustrator - они обе являются лидерами в своих областях и, соответственно, располагают самыми последними достижениями в области векторной графики. В противовес этим тяжеловесам можно порекомендовать симпатичную и быструю программку Corel Xara!; пусть Вас не вводит в заблуждение слово Corel - данная программа разработана фирмой XARA, которая была куплена корпорацией, как один из конкурентов. Сейчас доступна уже ее вторая версия. Данная программа, в отличие от двух предыдущих, очень быстрая и маленькая, но некоторые эффекты и команды, доступные в других программах, в ней сделать или трудно, или вообще невозможно.

Программная часть

Вот мы и добрались до программирования. И, сначала, разберемся с некоторыми моментами.

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

n = Math.floor(Math.random()*(banners.length/3));

Но, как я уже упоминал раньше, мы договорились, что одновременно на страничке будут показываться четыре баннера. И, следовательно, после каждой генерации случайного числа нам необходимо проверить, что данный баннер не совпадает с 3-мя другими. К тому же нам нужно где-то хранить уже сгенерированные числа. Для решения этих задач, мы организуем еще один массив - случайных чисел и при каждой генерации нового числа будем сопоставлять его с найденными ранее. Полный код, который решает эти проблемы, приведен ниже:

var i, j; var flag; // Флажок, используемый для проверки совпадения var banners_show = 4; // Число показываемых на страничке баннеров

var rand = new Array(banners_show-1);

for (i=0; i<banners_show; i++) { do { flag=0; n = Math.floor(Math.random()*(banners.length/3)); for (j=0; j<i; j++) { if (n == rand[j]) { flag=1; } } } while (flag); rand[i] = n; }

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

Для отрисовки баннеров, мы напишем простую функцию, и будем передавать ей в качестве параметра порядковый номер баннера на страничке. Используя этот номер, мы читаем из массива rand[] случайное число для конкретного баннера и уже используя его, находим все необходимые для отрисовки данные:

function Show_Banner(number) {

n=rand[number-1];

document.write('<a href="' + banners[n*3+2] + '"><img src="banners/' + banners[n*3] + '"' + 'border=0 width=' + banner_width + ' height=' + banner_height + ' alt="' + banners[n*3+1] + '"></a>');

}

Вот, практически и все, наша локальная баннерная система готова. Осталось только четыре раза вызвать функцию Show_Banner() из подходящей части странички. Нужно, только не забыть, что код JavaScript отделяется от html тегами <script></script>:

.......

Для проверки работоспособности локальной баннерной системы, несколько раз нажмите в броузере кнопку Reload и убедитесь, что каждый раз генерируются разные и не совпадающие друг с другом баннеры.

Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.

Назад | Содержание | Вперед

Программы, используемые в web-мастеринге

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Для изготовления профессиональных страничек Вам придется профессионально изучить несколько профессиональных программ :).

Итак, какие же программы Вам понадобятся? Ниже я буду приводить конкретные категории программ с объяснениями - для чего они нужны.

Программы просмотра web-страничек

или броузеры - в настоящее время имеется только два броузера, заслуживающих упоминания - это "Microsoft Internet Explorer" и "Netscape Navigator". Сейчас приближаются уже пятые версии данных программ, но, по статистике, наиболее используемыми являются их 4-ые версии. Поэтому для контроля внешнего вида Ваших страничек Вам придется использовать их. Причем на компьютере должны стоять обе версии. Хорошая WEB-страничка должна одинаково выглядеть в любом из этих броузеров. Я не отговариваю Вас от использования последних расширений стандарта HTML и JAVA-скрипты, но позаботьтесь о том, чтобы владельцы броузеров, не поддерживающих эти расширения, могли все же прочитать Вашу страничку.

Программы распознавания текста

могут Вам сэкономить массу времени, избавляя от ручного набора напечатанных текстов. Программ по распознаванию русского языка всего две - это CuneiForm и FineReader. Используйте по возможности последние версии. По качеству распознавания они примерно одинаковы, но мне больше нравится FineReader.

Простой текстовый редактор

понадобится для ручного исправления и добавления HTML-кода, т.к. существующие визуальные редакторы не могут полностью контролировать процесс создания web-странички (а если Вы делаете страничку со сложным дизайном, то, возможно, Вам придется весь код писать в редакторе ;). В качестве примера подойдет обычный "Блокнот" из стандартной поставки Windows или один HTML-редакторов, которые имеют встроенные команды на проверку правильности тэгов и структуры документов, например, HoTMetaL.

Рамка вокруг фрагмента текста

Выделить фрагмент текста можно не только при помощи фонового цвета, но и, например, заключив фрагмент текста в рамку. О том, как сделать корректную рамку, описано в следующей статьей. Здесь же я просто приведу код и расскажу о некоторых особенностях. Итак, код выглядит следующим образом:

<table width="368" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000"><tr><td> <table width="100%" cellpadding="10" cellspacing="1" border="0"> <tr> <td bgcolor="#ffffff">Здесь располагается фрагмент текста</td> </tr> </table> </td></tr></table>

Как и в случае с подложкой, мы используем таблицу в одну ячейку и точно также атрибут cellpadding используется для задания отступов вокруг текста. Разница лишь в том, что теперь таблица используется для задания рамки, а не фона. Результат выглядит следующим образом:

Посмотрите, текст в рамке обращает на себя внимание не меньше, чем подложка. А ведь можно еще и совместить эти способы!

Распечатка страницы из кода

Иногда требуется распечатать страничку, причем сделать это нужно непосредственно из кода. Сначала кажется, что это невозможно, но все не так плохо. На самом деле в Netscape Navigator для этого есть, даже, встроенный механизм. Достаточно просто вызвать метод window.print()

А вот для получения такого же результата в Internet Explorer мы применим не совсем обычный способ и воспользуемся специализированным объектом ActiveX, который и позволит нам распечатать страничку.

Таким образом, наша задача разделилась на две части. Первая - определить тип броузера, а вторая корректно вставить объект на страничку. Вот пример кода, который делает все необходимые действия:

var browser_name = navigator.appName;

function printit(){

if (browser_name == "Netscape") { window.print() ; } else { var WebBrowser = '<object id="WebBrowser1" width=0 height=0 classid="clsid:8856F961-340A-11D0-A96B-00C04FD705A2"></object>'; document.body.insertAdjacentHTML('beforeEnd', WebBrowser); WebBrowser1.ExecWB(6, 2); }

//--> </script>

Осталось только вызвать этот код. Для этого, к примеру, можно воспользоваться событием onClick:

<a href="#" onClick="printit();">Распечатать статью</a>

Только не путайте этот скрипт с версиями страничек "для распечатки". Страничка для распечатки это обычный html-файл, из которого убрали дизайнерское оформление и оставили очень простую верстку, чтобы при печати не было лишних элементов. Приведенный же выше код непосредственно посылает страничку на принтер.

Продолжение следует...

Назад | Содержание | Вперед

Рисунок сотен слов дороже нам

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Теперь поговорим о графике на Web-страничках, ведь именно благодаря ей WWW стала самым популярным сервисом Internet, именно ей мы обязаны всему этому многообразию страничек.

С чего начинается сайт?

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

Очень важный вопрос - с чего начать создание сайта? У Вас есть огромное желание и впереди наполеоновские планы, но есть небольшое затруднение - Вы не знаете с какого конца к этому подступиться. Тем более, если делаете это в первый раз. Возможно, у Вас уже есть опыт создания простенькой домашней странички, но достаточно большой и законченный сайт требует к себе иного подхода.

Одно из больших заблуждений, при создании сайта, заключается в том, что начинать нужно с дизайна. Но это вовсе не так, и едва ли большую часть времени, ушедшего на создание сайта, будут занимать дизайн и верстка.

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

Сага о фреймах

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Для чего применяются фреймы? Как правильно с ними работать? Когда их лучше избегать и какие подводные камни могут подстерегать нас на этом пути?

Ширина таблицы и ячеек

Как известно, ширину таблицы можно задать либо в абсолютных единицах (пикселях), либо в относительных (проценты). Как, впрочем, и ширину ячейки. Но в отличие от ширины таблицы, которая точно выдерживается обоими броузерами, ширина ячейки подчиняется гораздо более хитрым правилам.

Internet Explorer послушно соблюдает указанную ширину ячейки. Netscape Navigator же принимает указанные значения не более как желаемые рекомендации. Истинную ширину каждой ячейки он рассчитывает после анализа количества текста в соседних ячейках, и в тех, где текста больше, он расширяет ячейку, а где меньше - сужает. Ширина же пустых ячеек стремится к нулю (разумеется, в случае, если весь столбец состоит из пустых ячеек). И, практически, никогда получаемая ширина ячейки не равна значению, указанному в атрибуте width тега <td>.

Из этих рассуждений следует вывод, что использовать атрибут width в качестве надежного средства указания ширины ячейки практически бесполезно. Абсолютно надежным способом для случаев верстки в таблицах с фиксированной шириной является вставка невидимых распорок, получаемых при помощи прозрачного однопиксельного GIF-а. Для "резиновых" таблиц такого надежного способа, к сожалению, нет.

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

Как видите, в данном случае атрибут width в тэге <td> не использовался совсем. Вся работа по фиксации ширины ячейки была выполнена при помощи однопиксельного GIF-а. Обратите внимание, что ширина вставки должна быть одинаковой во всех ячейках одного столбца. А сумма ширин всех вставок в одной строке должна равняться общей ширине таблицы. Кроме того, если Вы заметили, то после вставки однопиксельного GIF-а, идет тег <br>. Его задача заключается в том, чтобы весь текст, который будет находиться в этой ячейке, не повлиял на ее ширину.

В следующей статье мы подробно разберемся с проблемами, возникающими при помещении разрезанного изображения в таблицу.

Назад | Содержание | Вперед

Сканер

желательно иметь планшетный, с достаточной разрешающей способностью и цветовой глубиной не менее 24bpp. В основном, материалы, которые Вы желаете поместить на WEB, будут находиться в состоянии, далеком от электронного. Как правило, все фотографии приходится сканировать - без этого, абсолютно точно, не обойтись. Много текстовой информации приходит в виде напечатанных документов, электронные версии которых давно потерялись или их вовсе не было. В этом случае большую помощь окажут программы по распознаванию текста, а им тоже нужен сканер.

Так что, как видите, компьютер по мощности нужен не ниже тех, которые применяют в полиграфии. Вышеперечисленные параметры обеспечат Вам комфортную работу, но если Ваш компьютер не оснащен всем перечисленным - не беда. Изготовить профессиональную WEB-страничку можно и на более слабом компьютере, просто это займет гораздо больше времени. Если есть желание, то Вы сделаете Вашу страничку самой лучшей в мире. :)

Назад | Содержание | Вперед

Слуга двух господ (Часть I)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Да, это - бедный web-дизайнер, которому приходится тратить уйму сил для укрощения и дрессировки страничек, чтобы на них было приятно смотреть и при помощи Internet Explorer, и при помощи Netscape Navigator.

Общее правило при написании совместимых страничек звучит так: есть некоторый набор вещей, который можно сделать как в и IE, так и в NN, но только при помощи разных тэгов или разных параметров одного и того же тэга. Причина, по которой мы можем писать совместимые странички, заключается в том, что непонятные для себя тэги и параметры броузер игнорирует.

Слуга двух господ (Часть II)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Ну, хорошо, с тем, что не нужно делать, мы уже оэнакомились. А что же все-таки можно делать? На какие моменты следует обратить внимание при изготовлении совместимых web-страничек? Какие уловки при этом используются?

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

Обязательно закрывайте все тэги (кроме одиночных).

Внимательно смотрите за вложенностью тэгов - они не должны пересекаться. Не допускайте такой ситуации, когда внешний тэг закрывается раньше, чем внутренний: <b><i>правильно</i></b> <b><i>неправильно</b></i>

В тэге <body> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона и станет нечитаемым.

Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. При желании Вы можете заключать в кавычки все параметры, но это не является обязательным.

Для всех изображений, помещаемых в HTML-код, обязательно указывайте ширину, высоту и толщину рамки, которую нужно установить в ноль, если у изображения не должно быть рамки. Отсутствие значений ширины и высоты хотя бы у одной картинки при табличной верстке приведет к тому, что загрузка страницы визуально сильно увеличится, т.к. в этом случае страничка начнется прорисовываться только после полной загрузки всех нужных изображений.

Для всех изображений, несущих некоторую смысловую нагрузку, нужно прописывать параметр alt тэга <img>. Причем текстовое описание должно выражать смысл изображения, это позволит просматривать Ваши странички при отключенной графике и все же понять смысл иллюстраций.

Рассматривайте web-страничку, как состоящую из нескольких смысловых блоков (верхняя шапка, меню, основной текст, рекламный блок и т.д.) и наиболее важные из них отмечайте комментариями начала и конца. Это позволит Вам легко ориентироваться в сложных страничках и при правильном построении структуры сайта легко изменить дизайн страниц в будущем.

Регистр букв в именах файлов и ссылках на них должен совпадать. Это особенно важно при размещении сайта на web-сервере под UNIX, иначе Вы вдруг обнаружите, что прекрасно работающий локальный вариант сайта на Вашей машине вдруг оказывается неработоспособным при помещении его на web-сервер. Проще всего названия файлов и ссылки писать всегда в нижнем регистре.

Для ссылок на внутренние страницы используйте по возможности относительные адреса. В будущем, при переносе или реорганизации сайта, Вам понадобится гораздо меньше усилий.

При использовании формы на страничке внимательно смотрите за тем, чтобы все элементы, составляющие форму (<input>, <select>, <textarea>, и т.д.), находились между тэгами <form></form>. Иначе у Вас неминуемо возникнут проблемы с Netscape Navigator-ом.

Если у Вас возникет сомнение в том, что некоторый код будет корректно обрабатываться одним из броузеров, то лучше сразу проверить это, написав тестовую страничку. Это сбережет Вам массу времени и нервов при отладке страничек.

При использовании JavaScript всегда обращайте внимание на регистр букв в ваших переменных и функциях, т.к. язык различает регистр и для него переменные MyVar и myvar совершенно разные. При придумывании имен для переменных и функций помните о том, что в языке есть зарезервированные имена и встроенные функции. При совпадении названия Вашей функции со встроенной Вы можете потерять кучу времени для установления этого факта.

Бытует мнение, что под IE, странички писать легче, чем под NN. Это верно, но только отчасти. Такое мнение сложилось из-за того, что NN неправильный код не обрабатывает и, соответственно, показывает страничку как есть, т.е. с ошибками. IE поступает по-другому - при обработке неправильного кода он пытается предугадать недостающие тэги или пропущенные параметры.

Например, в большинстве случаев незакрытый парный тэг будет обработан Explorer-ом так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше учиться писать корректный код, и тогда нареканий в адрес NN будет гораздо меньше.

Но все же следует признать, что некоторые механизмы рендеринга в Navigatore действительно работают не совсем логично (иногда даже совсем не логично :) и абсолютно не так, как в Explorer-е. В этих случаях приходится просто запоминать глюки и особенности NN, как, впрочем, и IE :)

Особенно много усилий прикладывается при написании совместимых страничек, использующих табличную верстку. Особенностей и приемов здесь вагон и маленькая тележка. Вот об этом мы и поговорим в следующей статье.

Продолжение следует...

Назад | Содержание | Вперед

Слуга двух господ (Часть III)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Таблицы, таблицы, таблицы... Ну куда нам без них? В настоящее время ни одна более-менее сложная верстка не обходится без применения таблиц. И опять же нам нужно примирить страничку как с IE, так и с NN.

Начнем с того, что применяются таблицы для верстки не по своему прямому назначению, а лишь как каркас, который позволяет нам относительно свободно манипулировать блоками информации на нашей страничке. Благодаря именно таблицам мы можем создавать такие эффекты, как верстка в несколько колонок, применение эффектов состыковки картинки и фона, точное позиционирование графики, цветные подложки под текст, тонкие линии на всю ширину или высоту странички и т.д.

При использовании таблиц в качестве каркаса нужно скрупулезно соблюдать несколько правил, позволяющих избежать уже известных проблем:

Даже если таблица будет в одну ячейку, то обязательно прописывайте ее полную форму:

Помещать содержимое таблиц можно только внутри тегов <td></td>. Между <table> и <tr>, а также между <tr> и <td> не должно быть ничего, за исключением пробелов и символа перевода строки. Всегда закрывайте табличные тэги. Netscape Navigator не понимает незакрытых таблиц и немедленно вызывает проблемы. Как правило, это проявляется в том, что в IE страничка показывается нормально, а в NN мы видим абсолютно чистую страницу. Никогда не оставляйте пустую ячейку. Если нужно, чтобы в ячейке ничего не было, то нужно вместо текста подставить неразрывный пробел  . Иначе ячейка в Netscape Navigator будет показана некорректно. Выравнивание таблицы по ширине страницы лучше всего производить при помощи внешних, по отношению к таблице, тегов <center></center> и <div></div>, а не при помощи атрибута align в тэге <table>. Также для совместимости с Netscape Navigator. Все характеристики, относящиеся к формату ячеек (такие как цвет фона или выравнивание текста) задавать только в тэге <td>. Если какие-то атрибуты относятся ко всей строке таблицы, то их можно задать и в тэге <tr>. Воздержаться от использования атрибутов colspan и rowspan, кроме случаев, когда нужно объединить все ячейки в одной строке. Вместо этого лучше пользоваться вложенными таблицами.

Для того, чтобы таблицу можно было использовать в качестве каркаса для странички, в ней нужно прописать нулевые значения атрибутов, задающих толщину рамки и расстояния между ячейками и текстом:

Такая таблица будет не видна в броузере, но будет успешно выполнять свои функции. Во время же отладки страницы имеет смысл прописать толщину рамки, равной единице. Это позволит быстро найти ошибку, допущенную при верстке.

Слуга двух господ (Часть IV)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

А теперь разберемся, как и для чего разрезают картинки и зачем помещают их в таблицы. И какие проблемы при этом могут возникнуть?

Слуга двух господ (Часть V)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

Рассмотрим следующие, наиболее часто применяемые эффекты, реализуемые при помощи таблиц:

Верстка текста в несколько колонок Цветные подложки под текст Рамка вокруг фрагмента текста Применение фоновых рисунков

Сменяющаяся картинка

Пример использования данного эффекта можно наблюдать непосредственно на моем собственном сайте.

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

Как и в предыдущем случае, начнем с корректировки HTML-кода. В данном варианте он будет состоять из двух фрагментов: описание изображения, которое будет меняться и описание областей, при попадании на которые вызывается скрипт. Это может быть, к примеру, то же самое меню:

Соответственно, придется скорректировать и поведение функций. В функцию over(), которая вызывается в результате попадания курсора в активную область, достаточно передать только ссылку на заменяющее изображение. Вызов же функции out() осуществляется и вовсе без параметров:

function over(ref) { if (browser_ok == 'true') { document.images[img].src = ref; } }

function out() { if (browser_ok == 'true') { document.images[img].src = "pic/default.gif"; } }

Вот мы и разобрались со всеми вариантами скриптов, для реализации эффекта RollOver. Но, подождите еще немножко, т.к. осталось рассмотреть еще один очень важный вопрос:

Собираем картинку

Ну вот, картинка нарезана, и у нас оказалась целая куча фрагментов, которые нам нужно собрать воедино. Вот теперь мы и воспользуемся таблицей. Для начала мы должны написать каркас. Количество строк и столбцов в таблице должно точно соответствовать их количеству в сетке. Предположим, что мы разрезали изображение таким образом, что получилось 3 строки и 4 столбца. В этом случае каркас будет выглядеть так:

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

Неправильно

Правильно

Почему именно так? Все для той же совместимости с Netscape. Дело в том, что любой пробел между тэгами NN воспринимает как некое пространство, имеющее ширину. И как только мы помещаем в таблицу картинку, не соблюдая это правило, так моментально между фрагментами образуется зазор, сквозь который начинает просвечивать фон. Особенно хорошо это видно, если края фрагментов контрастирует с фоном страницы. В Internet Explorer все, разумеется, показывается нормально.

В идеале, желательно писать весь код внутри ячейки в одну строчку, и в этом случае никогда не возникнет проблем. Но строчка может оказаться слишком длинной, и это скажется на удобочитаемости кода. В этом случае можно переносить строчки, разрывая их внутри тэгов. Именно так я и поступил в вышеприведенном примере.

При помещении картинки в таблицы нужно обязательно прописывать высоту и ширину для каждого фрагмента, чтобы броузер мог начинать отрисовку страницы не дожидаясь, когда скачаются все фрагменты. Также обязательно прописывание атрибутов border="0" и alt. Пример правильного кода приведен ниже: ... <tr> <td><img src="pic/pic-1-1.gif" width="100" height="20" border="0" alt="фрагмент 1"></td> <td><img src="pic/pic-1-2.gif" width="100" height="20" border="0" alt="фрагмент 2"></td> <td><img src="pic/pic-1-3.gif" width="100" height="20" border="0" alt="фрагмент 3"></td> <td><img src="pic/pic-1-4.gif" width="100" height="20" border="0" alt="фрагмент 4"></td> </tr> ...

Если фрагмент должен одновременно служить ссылкой (например это пункт меню), то изображение нужно заключить в тэг <a>, не забывая, что между тэгами нельзя оставлять пробелов:

<td><a href="http://www.somewhere.com"><img src="pic/somepic.gif" width="100" height="20" alt="" border="0"></a></td>

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

Назад | Содержание | Вперед

Создание формы

Начнем, пожалуй, с формы. Описание формы будет заключаться между тэгами <form> и </form> и содержать внутри себя элементы формы. Мы сделаем самый минималистический вариант формоотправителя, который будет содержать следующие поля: имя, электронный адрес, текст сообщения. HTML-код нашей странички выглядит следующим образом: <html> <head><title>Форма для отправки по почте</title></head> <body>

<form name="Request" action="/cgi-bin/formmail.pl" method="post"> <input type=hidden name="recipient" value="yourmail@domain.com"> <input type=hidden name="subject" value="Запрос информации"> Ваше Имя: <br> <input type=text name="Имя"><br> E-mail: <br> <input type=text name="E-mail"><br> Сообщение: <br> <textarea name="Сообщение"></textarea><br><br> <input type=submit value="Отослать"> <input type=reset value="Очистить"> </form>

</body> </html>

Немного разъяснений по вышеприведенному коду. Обратите внимание на параметр action в тэге <form> - он определяет адрес нашего скрипта (.pl - стандартное расширение для программ, написанных на PERL). Первые элементы в форме - это специальные скрытые поля для передачи информации скрипту: поле recipient определяет e-mail, на который мы хотим отослать содержимое формы, а поле subject - строку, которая будет появляться как "тема письма". Далее идет уже описание непосредственно полей формы. Их может быть сколько угодно, но каждое из них должно иметь имя (параметр name в тэге <input>), т.к. результатом работы скрипта будет письмо, в котором каждая строка состоит из пары значений: имени поля и его содержимого. И заканчивается форма двумя кнопками, служащими для отправки сообщения (submit) и очистки формы до начального состояния (reset).

Статьи по web-дизайну

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

Ниже приведены некоторые статьи, написанные мною с целью помочь начинающим WEB-дизайнерам. Статьи основаны на информации, распыленной в различных источниках (начиная с книг и кончая Internet, или наоборот :), а также на личном опыте.

Как создать привлекательный web-сайт - некоторые общие размышления, которые, тем не менее, имеют под собой твердую почву.

Аппаратная конфигурация компьютера - для того, чтобы начать творить, нужно иметь хороший и надежный инструмент.

Программы, используемые в web-мастеринге - хороший инструмент иметь мало - нужно его еще и освоить.

Информация - вот основа Internet! - самый первый вопрос, который можно предъявить web-сайту - для чего ты, собственно, нужен?

Что такое стильный web-сайт? - почему на одни странички ходить приятно, а с других хочется уйти почти сразу?

Рисунок сотен слов дороже нам - провожают по уму, а встречают - все же по одежке. Её величество Графика :-)

Оптимизация изображений в формате JPG - у Вас есть красивая фотография, а если она еще и быстро пересылается, то и все остальные смогут ее оценить.

Оптимизация изображений в формате GIF - у Вас есть красивая фотография в формате GIF ;), а если она еще и быстро пересылается, то и все остальные смогут ее оценить.

Броузеры, которые мы выбираем - как это влияет на нас и наших посетителей? И почему некоторым из них не нравится Ваш дизайн (как одна из возможных причин :)?

Интерактивность! Что? И как? - как сделать так, чтобы посетители Ваших страничек могли отправить Вам сообщение? Краткое руководство по созданию формы на Вашей страничке и ее отсылки по почте с использованием готового CGI-скрипта.

Зачем нам нужен SSI? - краткое и понятное объяснение о применении включений на стороне сервера и получаемых от этого преимуществ.

Слуга двух господ (часть I) - нет-нет, это не комедия Карло Гольдони, и Труффальдино здесь ни при чем. Это... несчастный web-дизайнер, прилагающий массу усилий, чтобы угодить и приверженцам Microsoft Internet Explorer, и приверженцам Netscape Navigator.

Слуга двух господ (часть II) - продолжаем наш практикум по написанию совместимых страничек. И на этот раз остановимся на правилах, применение которых позволяет резко уменьшить количество проблем с совместимостью.

Слуга двух господ (часть III) - таблицы, как основное средство верстки сложного дизайна, и особенности их использования при создании совместимых страничек. Слуга двух господ (часть IV) - а теперь разберемся как и для чего разрезают картинки и зачем помещают их в таблицы. Слуга двух господ (часть V) - невидимые таблицы - очень мощное средство. Правильное их применение позволяет получать эффекты, другими способами довольно трудно достижимые. Как оформить таблицу? - Давайте-ка займемся сегодня оформлением таблиц. Вам наверняка не нравится, как оформлены таблицы по умолчанию. То, что называется рамкой, практически никогда не вписывается дизайн. А их псевдотрехмерность просто ужасна! Как правильно регистрировать сайт? - Итак, Вы сделали первую версию своего сайта и даже вывесили его в Internet, но через некоторое время Вы заметите, что на него практически никто не ходит, за исключением Вас и изредка Ваших друзей. Бойцы невидимого фронта - Если Вы еще не догадались, то я имею в виду META-теги. Их роль не заметна при отображении странички. Это лишь команды для web-сервера или броузера, но команды важные. Немного слов о кодировках - Кто об этом все знает, тот может пропустить эту статью, остальным же я поведаю о причинах возникновения различных кодировок и проблемах web-дизайна, связанных с ними. Как работает формат JPEG? - Знание некоторых принципов возмещает незнание многих фактов. Сегодня мы поговорим о технологии сжатия JPEG и о том, за счет чего достигаются столь сильные степени сжатия. JavaScript и объектная модель - Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно. JavaScript: полезные функции (часть I) - Продолжаем разговор о применении скриптов на web-страничках. И начнем мы, пожалуй, с написания некоторых функций, которые нам впоследствии очень пригодятся. JavaScript: полезные функции (часть II) - Несколько небольших и полезных Java-скриптов позволяющих добавить к функциональности сайта некоторые приятные мелочи. JavaScript: полезные функции (часть III) - С этой статьи мы начнем разбираться с более сложными и функционально-законченными скриптами. И начнем с написания универсальной функции проверки формы перед отсылкой на сервер. Сага о фреймах - Для чего применяются фреймы? Как правильно с ними работать? Когда их лучше избегать и какие подводные камни могут подстерегать нас на этом пути? JavaScript: полезные функции (часть IV) - Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. С чего начинается сайт? - Как лучше всего организовать работу по созданию сайта? Чему следует уделить больше внимания? И с чего же все-таки следует начать? JavaScript: полезные функции (часть V) - Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание". JavaScript: полезные функции (часть VI) - Немного специфическая статья и посвящена она решению проблем, возникающих при использовании на сайте фреймов. И, в частности, проблеме индексации таких сайтов поисковыми роботами и формированию фреймовой структуры при обращении к одной из внутренних страничек. История про CSS (часть I) - Поговорим о каскадных таблицах стилей. Их применение позволяет перейти на новый уровень создания сайтов и добиваться нужных эффектов оформления более простыми и логичными способами. История про CSS (часть II) - Продолжаем разговор о применении таблиц стилей. Сначала разберемся с каскадностью стилей, а потом перейдем к рассмотрению синтаксиса и обзору наиболее часто встречающихся параметров, применяемых при создании стилей.

Стилизация изображения

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

Структура объектной модели

Чтобы было понятно, о чем мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель Internet Explorer-а версии 4 и выше.

window - объект, дающий доступ к окну броузера frames - объект, дающий доступ к фреймам

window... window... ...

document - объект, содержащий в себе всю страничку

all - полная коллекция всех тегов документа forms - коллекция форм anchors - коллекция якорей appleеs - коллекция апплетов embeds - коллекция внедренных объектов filters - коллекция фильтров images - коллекция изображений links - коллекция ссылок plugins - коллекция подключаемых модулей scripts - коллекция блоков <script></script> selection - коллекция выделений stylesheets - коллекция объектов с индивидуально заданными стилями

history - объект, дающий доступ к истории посещенных ссылок navigator - объект, дающий доступ к характеристикам броузера location - объект, содержащий текущий URL event - объект, дающий доступ к событиям screen - объект, дающий доступ к характеристикам экрана

Объектная модель Netscape Navigator-а немного отличается от вышеприведенной, но ее смысл точно такой же. А использование JavaScript позволяет нам обойти различия в реализации объектных моделей.

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

Как видите, структура объектной модели достаточно сложна, но строго определена, и существует однозначный способ доступа к любому свойству или методу. Синтаксис полностью соответствует тому, что используется в объектных языках. Т.е. нижележащие объекты отделяются от вышележащих точкой, и для доступа к конкретному свойству нужно просто корректно построить строку доступа.

И, как Вы понимаете, вот здесь-то на сцену и выходит скриптовый язык, который и позволяет нам манипулировать объектами.

Как любой язык программирования, JavaScript имеет определенный набор типов переменных, операторов, встроенных функций и объектов. Изучение JavaScript как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишите сами.

Структурирование информации

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

Для более удобной организации мыслей, структуру желательно предварительно написать на листочке бумаги или хотя бы в блокноте (который в Windows, а не который бумажный ;).

Возьмем, для примера, небольшую компанию, которая решила открыть свое представительство в интернет. Как правило, основная структура таких сайтов достаточно общая. Давайте ее напишем:

Новости компании Информация о фирме Услуги фирмы Каталог товаров Контактная информация

Теперь эту структуру необходимо скорректировать для конкретной фирмы. Возможно, что у компании есть несколько одинаковых по объему областей деятельности и в этом случае, конечно же, имеет смысл добавить еще несколько пунктов меню в верхний уровень.

При составлении структуры будущего сайта, подавите в себе желание поместить все пункты меню на одну страничку. Человек комфортно воспринимает не более 7-ми пунктов, и их большее количество вызывает подсознательное отторжение при просмотре. Слишком сложное не вызывает желания разбираться.

Для того, чтобы этого избежать и используется иерархическое построение меню. Правильное структурирование информации позволяет нам выделить основные разделы сайта, а все второстепенные разделы будут доступны после выбора одного из основных. Описанное замечание относится также и к меню 2-го уровня - при большом количестве пунктов, имеет смысл ввести меню 3-го уровня. Но не более! Будет уже слишком.

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

Таблица без рамки

А можно сделать таблицу и вовсе без рамки. Для этого не нужно использовать ни вложенных таблиц, ни других трюков. Достаточно просто обнулить атрибут border и установить cellspacing равным желаемому просвету между ячейками. Теперь нужно закрасить все ячейки в желаемый цвет и - пожалуйста:

1-1	1-2	1-3	1-4
2-1	2-2	2-3	2-4
3-1	3-2	3-3	3-4
4-1	4-2	4-3	4-4

Как видите, мы можем достаточно сильно менять внешний вид таблицы при помощи стандартных средств HTML 3.2. Варьируя толщину рамки, ее цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать и тогда можно придумать совсем уж экзотические варианты.

Назад | Содержание | Вперед

Таблица с фоновой подсветкой ячеек

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

Таблица с горизонтальными линиями

А теперь попробуем сделать табличку, содержащую только горизонтальные разделительные линии. Предыдущий способ со вложенными таблицами не подойдет, т.к. при вложенных таблицах мы всегда получаем и горизонтальные и вертикальные линии рамки. При помощи CSS или атрибута frame в IE4 мы можем получить желаемое. Но ведь мы хотим, чтобы все гляделось еще и в Netscape, причем, желательно, начиная с третьих версий броузеров.

Выход заключается в том, чтобы в качестве горизонтальной разделительной линии использовать ячейку самой таблицы. Для этого мы воспользуемся атрибутом colspan, чтобы линия была по ширине всей таблицы, прозрачный пиксель для фиксации высоты ячейки в один пиксель и закрасим ячейку цветом разделительной линии. Все! Осталось только разместить данную конструкция между ячейками с данными.


1-1	1-2	1-3	1-4

2-1	2-2	2-3	2-4

3-1	3-2	3-3	3-4

4-1	4-2	4-3	4-4

Таблица с толстой рамкой

Практически то же самое, что и таблица с тонкой рамкой, за исключением того, что мы изменили значение атрибута cellspacing, сделав его равным 3 пикселям. Используя подобный механизм можно придать рамке любую желаемую толщину.

Таблица с тонкой рамкой

Но к счастью, есть другой способ, позволяющий делать красивые таблички с тонкими рамками. И этот способ - вложенные таблицы. В этом случае во внутренней таблице устанавливается ненулевое расстояние между ячейками, а во внешней прописывается цвет фона равный цвету рамки. Благодаря этому в зазоры ячеек становится видно фон внешней таблицы. И если мы закрасим ячейки внутренней таблицы цветом фона страницы, то нашему взору предстанет красивая табличка с тонкими рамками.

Текстовый процессор

с возможностью проверки орфографии - очень полезен для набора текста и исправления ошибок в распознанных текстах. Как пример - обычный "Microsoft Word".

Третье правило профессионального web-дизайна

Все странички принадлежат одной большой объединенной сети (WWW называется :), и в этой сети находятся совершенно разные компьютеры: IBM PC-совместимые, Apple Macintosh, различные версии UNIX, Amiga, : Да и все что угодно. И все эти платформы, так скажем, немного отличаются при выводе графики на экран. Вряд ли шрифт в Linux будет точно таким же, как в Windows, да и палитра цветов по умолчанию может отличаться, и алгоритм дизеринга при выводе на экран, и : В общем, если сайт важный и представляет интерес для широкого круга пользователей, то обязательно протестируйте сайт на разных платформах и под разными операционными системами. Это было третье правило профессионального Web-дизайнера :)

И не забывайте про текстовые броузеры, самым известным представителем которых является Lynx. Сайт может быть сколь угодно красив, но что от этого толку, если его не увидят! Поэтому всегда думайте о том, как сайт будет выглядеть в текстовом варианте. Навигация должна оставаться простой и понятной. И достигается это простыми способами: если у вас меню в виде картинки, то не поленитесь снабдить все картинки подписями, а если не получается, то продублируйте меню текстовыми ссылками внизу страницы. Владельцы текстовых броузеров будут счастливы :) И заметьте, что ни один из текстовых броузеров не отображает таблицы, а текст внутри ячеек выводит сплошным потоком (слева направо и сверху вниз). То же самое с фреймами.

В общем, не все ладно в мире броузеров. Придут времена и все они будут показывать странички так, как описано в спецификации, но сейчас : Сейчас нам приходится учитывать все нюансы и особенности броузеров при изготовлении Web-страниц.

Назад | Содержание | Вперед

Уменьшение количества цветов

Для большинства изображений, не являющихся фотографиями, количество необходимых для воспроизведения цветов часто меньше 256. Лишние цвета можно убрать из изображения, тем самым уменьшив его размер. Это возможно потому, что GIF поддерживает размер палитры меньше 256 цветов. Теоретически, мы можем задать любое число цветов палитры в диапазоне 2-256, например, 37 цветов или 101. Практически же, количество цветов в изображении выбирается из ряда: 2, 4, 8, 16, 32, 64, 128, 256. Это связано с тем, что для представления цвета используется всегда целое число бит, а приведенный выше ряд является рядом максимального количества цветов при использовании от 1 до 8 бит на пиксель (1bpp-8bpp). В случае, если мы используем, допустим, только 101 цвет в рисунке, для сохранения пикселя все равно будет использовано 7 бит. Поэтому при оптимизации количества цветов нужно ориентироваться на приведенный выше ряд. Это позволит получить более качественную картинку. Сравните два изображения - они не очень-то и отличаются, но левое использует полную палитру в 256 цветов, а правое - палитру, состоящую только из 32 цветов. И, соответственно, различаются размеры файлов (примерно в 2 раза).

Универсальная функция проверки

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

Первым делом, мы создадим массив, где перечислим имена всех полей, которые требуют проверки:

required = new Array("name", "email");

Такой подход позволит нам очень легко добавлять и модифицировать список обязательных полей без непосредственного изменения кода самой функции.

Дополнительно к вышеописанному массиву, мы добавим еще один, который будет содержать текст ошибки для конкретного поля:

required_show = new Array("Ваше имя", "электронный адрес");

Это позволит нам свободно варьировать текст об ошибках и правильно пользоваться русским языком, а не удовольствоваться неудобоваримыми фразами типа "name не введен".

Имея массив обязательных для заполнения полей, всю проверку можно осуществлять в цикле. Вот как будет выглядеть модифицированная функция проверки:

required = new Array("name", "email"); required_show = new Array("Ваше имя", "электронный адрес");

function SendForm () {

var i, j;

for(j=0; j<required.length; j++) { for (i=0; i<document.forms[0].length; i++) { if (document.forms[0].elements[i].name == required[j] && document.forms[0].elements[i].value == "" ) { alert('Пожалуйста, введите ' + required_show[j]); document.forms[0].elements[i].focus(); return false; } } }

return true; }

//-->

</script>

В цикле происходит проверка всех полей формы на совпадение с "обязательными". В случае, если совпадение произошло, проверка осуществляется аналогично тому, как это было описано выше, но с одним нюансом - введение массива с сообщениями об ошибках потребовало небольшой модификации функции alert(), так что теперь текст ошибки напрямую зависит от имени поля.

Вот, в общем-то, и все. Данная функция вполне универсальна и с минимальными корректировками (в сущности - содержимое двух массивов) может быть адаптирована к любой форме.

Архив с примером скрипта, рассмотренного в данной статье, можно взять отсюда.

Назад | Содержание | Вперед

Условия задачи и ограничения

А теперь, давайте, более подробно сформулируем условия задачи и введем ряд ограничений, которые упростят программирование. Баннерная система должна выполнять следующие функции:

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

Накладываем на эти условия некоторые ограничения:

баннеры будут фиксированного размера, и храниться в формате GIF или JPEG на страничке мы будем одновременно показывать четыре баннера

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

имя файла альтернативный текст адрес странички, на которую ссылается баннер

Для удобства хранения и обновления базы баннеров, лучше всего выделить ее описание в отдельный файл и подключить при помощи механизма вставки внешнего js-файла. Это делается в секции заголовка при помощи следующей конструкции:

А вот так, будет выглядеть содержимое файла banners.js

var banners = new Array(

"pic-01.gif", "Text #1", "http://www.link1.com/", "pic-02.gif", "Text #2", "http://www.link2.com/", "pic-03.gif", "Text #3", "http://www.link3.com/", "pic-04.gif", "Text #4", "http://www.link4.com/", "pic-05.gif", "Text #5", "http://www.link5.com/", "pic-06.gif", "Text #6", "http://www.link6.com/", "pic-07.gif", "Text #7", "http://www.link7.com/", "pic-08.gif", "Text #8", "http://www.link8.com/", "pic-09.gif", "Text #9", "http://www.link9.com/", "pic-10.gif", "Text #10", "http://www.link10.com/" )

Как видите, структура массива не очень сложна. Под каждый баннер отводится три последовательные ячейки, в которых и хранятся: имя файла, альтернативный текст, адрес ссылки.

Установка отступов на страничке

Для примера разберемся с установкой отступов в тэге <body>. Если мы откроем руководство по HTML, которое нам предлагает Microsoft, то прочитаем там, что задать отступы на страничке можно при помощи следующих атрибутов:

leftmargin - отступ слева

rightmargin - отступ справа

topmargin - отступ сверху

bottom margin - отступ снизу

Будем последовательны и откроем теперь руководство по HTML со стороны Netscape, где прочитаем, что атрибуты для задания отступов выглядят следующим образом:

marginwidth - отступ слева и справа

marginheight - отступ сверху и снизу

А теперь мы напишем код, который задает отступы слева и сверху и корректно показывается как в IE, так и в NN. Вы уже наверно догадались, что он должен выглядеть следующим образом: <body leftmargin="0", topmargin="0", marginwidth="0" marginheight="0">

Вуа-ля! Все нормально работает. IE видит только свои атрибуты, а NN свои, и всем хорошо :).

Сколько же всего таких хитростей? Неужели их нужно все помнить? Вовсе нет, нужно просто запомнить несколько наиболее употребимых и уже на стадии проектирования web-сайта отбрасывать возможности, которые невозможно реализовать в обоих броузерах. Да, это конечно немного обидно, но лучше уж мы немного пожертвуем каким-нибудь эффектом, чем оставим огромную часть посетителей за бортом своего сайта. Не правда ли?

В каких случаях уместно применять фреймы?

Честно говоря, есть очень мало задач, которые нельзя решить без использования фреймов. Первоначально введенные для того, чтобы облегчить создание механизма навигации по сайту, на данный момент они, по-моему, ясно показали, что не справляются с этой задачей. Для этой цели гораздо лучше подходит технология SSI.

Тем не менее, в каких случаях оправдано их применение?

в случае, если стоит задача быстро создать сайт и все странички уже написаны, а ни времени, ни желания их переделывать нет если нужно, чтобы часть странички (чаще всего логотип или меню) всегда находились перед глазами для дизайнерских изысков, наконец...

Но есть один удачный способ применения фреймов - создание системы помощи для сложных сайтов. В этом случае очень удобно открывать новое окно, где уже и используется фреймовая структура. Это очень похоже на встроенную систему помощи Windows.

Верстка текста в несколько колонок

Практически все новостные сайты верстаются именно таким образом, располагая в одной колонке непосредственно текст, а в других или краткие новости или рекламу. Достигается этот эффект за счет все тех же невидимых таблиц.

Сама таблица будет состоять всего из одной строки, а ячейки мы будем использовать в качестве формирователей колонок. Причем удобнее не ограничиваться всего лишь минимальным количеством колонок, необходимых для формирования внешнего вида. Дополнительно желательно использовать пустые колонки и возможно фиксировать их однопиксельным GIF-ом. Эти пустые колонки мы используем в качестве полей для текста. Поля повышают удобство чтения и эстетически странички выглядят приятнее.

Но для примера мы ограничимся простой версткой в две колонки:

В этой колонке, например, может быть основной текст статьи, который и будет составлять основной смысл странички.

А в этой мы можем разместить краткие анонсы других статей и ссылки на них.

А вот и код для такой верстки:

<table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">Здесь располагается текст левой колонки.</td> <td> </td> <td valign="top">Ну а здесь текст правой колонки.</td> </tr> </table>

Я воспользовался всего тремя ячейками. Две, из которых содержат непосредственно текстовую информацию, а средняя просто служит разделителем между колонками. Ведь мы не хотим, чтобы колонки слились в одну. Ведь, правда?

Тут нужно упомянуть, что на самом деле подобного же эффекта можно добиться при помощи атрибута cellspacing или cellpadding. Но у такого способа есть несколько ограничений. В случае использования атрибута cellpadding кроме пространства между колонками, мы также получим некоторое пространство слева и справа от колонок. А такой вариант не всегда подходит. Атрибут cellspacing хотя и свободен от этого недостатка, но его применение не позволяет нам делать разное пространство между колонками, если их больше трех. В тоже время вышеописанный способ с пустой колонкой универсален и свободен от всех этих недостатков.

Обратите внимание на атрибут valign="top", прописанный для ячеек, содержащих текст. Как правило, колонки редко бывают заполнены одинаковым объемом текста и в этом случае одна колонка становится короче другой. И чтобы текст в короткой колонке не уполз вниз, мы используем атрибут valign, который прижимает текст в колонках к верху ячейки.

Визуальные редакторы

позволяют быстро разрабатывать несложные web-странички и корректировать уже написанные, но с ними нужно быть осторожными, т.к., благодаря именно им, Ваша страничка может плохо глядеться в другом броузере.

Наиболее известные кандидаты - это "Microsoft Front Page" и "Netscape Composer" (или в ранней версии - редактор, встроенный в поставку "Netscape Navigator Gold"). Используйте из них тот, который Вам больше нравится. Иногда Вам придется вручную исправлять код, сгенерированный данными программами.

Второе правило профессионального web-дизайна

Кроме этого, приходится также учитывать тот факт, что пользователи имеют компьютеры с различной аппаратной конфигурацией. Я не имею ввиду, что кто-то ходит по Web на 286 машине (а вдруг правда? :), но есть много вполне современных компьютеров, которые обладают низкой разрешающей способностью. За примерами далеко ходить не надо - ноутбук. Большое их количество выпускается с черно-белым экраном, а цветные ноутбуки чаще всего ограничены палитрой в 256 цветов. Или, например, палмтопы (становящиеся популярными карманные компьютеры) под управлением Windows CE - они изначально были черно-белыми.

Вот, добрались и до второго правила - профессиональный Web-дизайнер должен просматривать странички при различном количестве цветов. И в случае необходимости делать странички с использованием только безопасной палитры.

Web-дизайн и кодировки

А теперь о том, как все эти кодировки связаны с web-дизайном. Проблема заключается как в web-серверах, так и в броузерах. Обе составляющие должны общаться на одном языке и в одной кодировке, и только в этом случае броузер будет понимать то, что ему посылает сервер.

Со стороны сервера мы должны установить систему, которая умеет предварительно посылать сообщение о том, в какой кодировке будет прислана страница. А броузер это сообщение должен принять и, соответственно, настроиться на нужное отображение. Если все сделано корректно, то проблем не возникает. Но действительность вносит свои коррективы и неправильная настройка web-сервера может привести к тому, что, послав сообщение о том, что сейчас будет страничка в кодировке win-1251, сервер присылает ее в KOI-8. Разумеется, броузер путается, ведь он не в состоянии самостоятельно определить кодировку страницы. Он всего лишь пользуется указаниями сервера и, соответственно, показывает страничку неправильно.

Имеется способ указать кодировку странички не на сервере, а непосредственно в HTML-коде. Для этого используется специальная версия META-тега с параметром charset, задающим нужный язык. Например, для странички написанной в кодировке Win1251, соответствующий код будет выглядеть так:

Но, к сожалению, с этим тегом связано несколько проблем. В России очень распространен способ, при котором web-сервер автоматически определяет, в какой кодировке приходит запрос от клиента и отдает страничку web-броузеру уже перекодированной. Вот тут нас и поджидает небольшой подводный камень. META-тег может сыграть плохую шутку. Дело в том, что указания на страничке имеют приоритет по сравнению с командами, присылаемыми web-сервером и правильно перекодировав страничку, сервер, тем не менее, не может изменить содержимое тега META. Происходит несовпадение реальной кодировки, в которой пришла кодировка, и указаниями в теге META. Такую страничку нельзя будет нормально просмотреть и перекодировать средствами броузера. Выбор кодировки вручную в данном случае не поможет, т.к. тег META имеет приоритет и над установками броузера. Единственный способ сделать это - сохранить страничку и удалить злосчастный тег.

В связи со всеми этими проблемами в РУНЕТ-е не рекомендуется применять данный тег вообще. В таком случае просмотр будет осуществляться в той кодировке, на которую настроен броузер, если сервер не пришлет уведомление о кодировке документа. В случае несовпадения ее можно достаточно легко переключить. Кроме того, если по умолчанию выставлять кодировку Win-1251, то у 95% Ваших посетителей страничка сразу же будет показана правильно.

Зачем нам нужен SSI?

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

А! Так Вы даже и не знаете, что это такое? И, тем более, не понимаете, зачем он Вам нужен? Что же, значит, Вы пришли, куда надо. Сегодня здесь всем объясняют - зачем им нужен SSI :-)

Как все нормальные люди, вначале расшифруем аббревиатуру SSI - Server Side Includes или, по-русски, - включения на стороне сервера. Понятно? Нет? Ну, тогда расскажу поподробнее:

SSI - это директивы, вставляемые прямо в HTML-код и служащие для передачи указаний Wев-серверу. Встречая такие директивы, которые, кстати, называются SSI-вставками, Web-сервер интерпретирует их и выполняет соответствующие действия. Какие, спросите Вы? А вот, например: вставка HTML-фрагмента из другого файла, динамическое формирование страничек в зависимости от некоторых переменных (например, типа броузера) и другие не менее приятные вещи.

Преимущества SSI проявляются, когда нам нужно поддерживать достаточно большой по объему сайт, имеющий определенную структуру и повторяющиеся элементы кода на всех страничках. Вообще, при применении серверных включений сайт удобно рассматривать как состоящий из отдельных блоков, каждый из которых отвечает за свою часть странички. Эти блоки практически неизменны и повторяются от страницы к странице. В эти блоки можно вынести такие элементы странички как: главное меню, рекламные вставки, повторяющиеся элементы оформления страничек и т.д. Физически эти блоки представляют собой просто HTML-файлы, содержащие часть кода, нужную для выполнения их задачи.

Для того, чтобы сервер знал, что страничка не обычная, а содержит SSI-директивы, она имеет специальное расширение: *.shtml или *.shtm, наличие которого и заставляет web-сервер предварительно обрабатывать странички. Вообще-то, расширение может быть любое - в зависимости от конфигурации web-сервера, но в основном применяется именно *.shtml.

Полная страничка формируется web-сервером на лету, собирая код странички из таких вот блоков. Для того, чтобы указать серверу, какой блок нужно вставить и в каком месте странички, используется специальная форма записи в виде комментария. Вот такая:  где # - признак начала SSI-вставки; command - SSI-команда; param - параметры SSI-команды.

SSI- команд насчитывается около десятка, но я расскажу только о самых употребимых. Самая популярная команда - это команда включения содержимого одного файла в другой:  где include - команда вставки; virtual - параметр, определяющий, как трактовать путь - как абсолютный (file) или как относительный (virtual); "/path/file.ssi" - путь к включаемому файлу.

Результатом ее выполнения будет вставка содержимого файла file.ssi в месте появления данной директивы. При просмотре сформированного исходника HTML-файла мы не увидим никаких признаков SSI, т.к. данный механизм действует абсолютно прозрачно для броузеров, они получают исключительно корректный HTML-код.

Следующая команда - это команда установки значения переменной:  где var - команда установки значения переменной; pic - имя переменной; picture.gif - значение переменной.

В данном случае мы определили переменную с именем pic и присвоили ей строковое значение "picture.gif". Значение переменной pic теперь доступно внутри SSI-вставки, и мы можем его использовать по нашему усмотрению. Например, используя одну и ту же SSI-вставку, но с разными значениями определенной в ней переменной, мы получим различные результаты. Перед тем, как показать реальный пример использования переменных в SSI-включениях, я расскажу о некоторых командах, применяемых при работе с переменными. Во-первых, это команда печати значения переменной: 

Ее выполнение приведет к тому, что в месте появления команды напечатается значение переменной pic, т.е. "picture.gif".

Переменная может участвовать в выражениях, в этом случае перед ней ставится знак '$', показывающий, что это именно переменная, а не просто текст. Вот пример:  

После такого присвоения переменная B будет содержать строку "123456". Если же в текст понадобится просто вставить знак '$' или какой-нибудь из других специальных знаков, то его нужно предварить слешем, вот так: '\$'. В некоторых случаях для избежания двусмысленности значение переменной может быть заключено в фигурные скобки: "${A}".

Более сложное применение переменных возможно с использованием условных операторов, имеющих следующую форму написания:     где condition - условие для сравнения.

В зависимости от результатов проверки мы можем подставить тот или иной фрагмент кода. Допустим, мы можем проанализировать тип броузера пользователя и в зависимости от этого выдать либо код для Netscape Navigator-а, либо Internet Explorer-а. Это может оказаться полезным в некоторых случаях, когда невозможно сделать страничку, которая корректно отображалась бы в обоих броузерах. Вот пример использования условного оператора:   <p>Сегодня понедельник.</p>  <p>Что угодно, но не понедельник.</p> 

В данном случае условием проверки является существование переменной $Monday и, в зависимости от этого, подстановка того или иного HTML-кода.

Теперь давайте рассмотрим реальный пример применения SSI для формирования сложного документа из нескольких SSI-вставок. Вначале напишем текст основного HTML-документа, полагая, что SSI-вставки находятся в каталоге /ssi:

Запрет кэширования страничек

Для определенного круга задач необходимо, чтобы страничка каждый раз загружалась с сервера, а не из кэша web-броузера.

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

Для решения этой задачи мы можем непосредственно запретить броузеру кэшировать наши странички. И, разумеется, мы сделаем это при помощи META-тега, воспользовавшись его свойством "expires". Оно указывает дату устаревания содержимого странички. Для того, чтобы страничка не кэшировалась, нам достаточно установить прошедшую дату. Например, вот так:

Звуковая карта

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