...::: Web-studio "Cherry-Design" :::...

Содержание сайта

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

Web-Studio "Cherry-Design" ...
студия Михаила Мельникова

2.9.2005 - | Новая работа Авторские курсы "Cherry-Courses" Подробнее...
1.9.2005 - | Календарь на десктоп! Сентябрь 2005 года Подробнее...

...попробуй на вкус!


...::: Как создать привлекательный web-сайт? :::...

Вишенки

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

Как создать привлекательный web-сайт?

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

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

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

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

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

  • Скорость загрузки Ваших страничек - НИ ОДИН НОРМАЛЬНЫЙ ЧЕЛОВЕК НЕ БУДЕТ ЖДАТЬ ЗАГРУЗКИ ВАШИХ СТРАНИЧЕК В ТЕЧЕНИЕ ЧАСА. Отсюда следует вывод - странички нужно оптимизировать для получения наименьшего их размера (разумеется, в пределах разумного). Давайте посчитаем максимально допустимый объем средней web-странички.

    Принимая к рассмотрению тот факт, что подавляющее число людей (и небольших организаций) имеют доступ к Internet через коммутируемую связь, т.е. по телефону (и, к тому же, немаловажный факт - за повременную оплату) и средняя скорость доступа по модему в России составляет 14,400 Кб/c, можно посчитать время, затрачиваемое на перекачку одного килобайта (это без учета того факта, что большинство людей держат открытыми одновременно 2-3 или более копий броузера - в этом случае просто разделите среднюю скорость доступа на количество открытых броузеров).

    Следовательно, средняя скорость перекачки равна 14,400Кбит/с / 8 =1,800 Кбайт/с - это в идеальном случае, на самом деле немного меньше из-за повторных передач ошибочно принятых блоков. Поэтому примем среднюю скорость равную 1,200-1,500Кб/с. Только не путайте данную скорость, которая является скоростью до провайдера, со скоростью перекачивания Вашей странички, она может оказаться намного меньше, так как информация, достигшая Вашего компьютера, проходит через несколько компьютеров (как правило, 10-15), и скорость определяется самым узким звеном в цепи.

    Допустим, днем загруженность маршрутизаторов (компьютеров, передающих информацию из одной сети в другую) больше, чем ночью. Кроме этого, если Ваш сервер находится на компьютере, который соединен с провайдером по коммутируемой (или выделенной) линии на скорости 14,400Кб/с, то человек, сидящей по другую сторону Internet, ни за что не добьется скорости выше этой (я исключаю случаи с Proxy-сервером, т.к. на них, в основном, хранится часто запрашиваемая информация - например, странички поисковых систем). Я принимаю допустимым время загрузки одной странички не более 40 секунд (эта величина взялась из личного опыта :), отсюда - 40*1,200= 48Кб - это и будет тот максимальный объем, который может иметь страничка вместе со всей графикой, находящейся на ней. Если Вам требуется разместить информацию большего размера, то предупредите об этом пользователя или распределите информацию по нескольким страничкам.

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

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

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

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

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

Следующая статья >>


...::: Аппаратная конфигурация компьютера web-дизайнера :::...

Вишенки

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

Аппаратная конфигурация компьютера

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

Итак, какова же аппаратная оснащенность web-дизайнера? Для начала нужно сразу сказать, что Вам потребуется не самый слабый компьютер. Он должен поддерживать разрешение от 800x600 точек при глубине цвета TrueColor, иметь как минимум 32-64M памяти, быть оснащенным CDROM-ом, очень желательно, чтобы были также сканер и звуковая карта. А теперь по порядку: зачем все это нужно?

Хорошая видеокарта
с разрешением от 800x600 и глубиной цвета True Color (это карты с объемом памяти больше или равным 2M), хорошо, чтобы и с акселератором - эти требования основаны на том факте, что большинство людей имеют 14- и 15- дюймовые мониторы и, как правило, на них оптимальным разрешением является именно 800x600. Какое отношение это имеет к web-мастерингу? Самое непосредственное, так как в 99% случаев WEB-странички смотрят в окне, раскрытом на весь экран. И в трудных случаях верстки Вам нужно будет представить, как это будет выглядеть в таком режиме. Цветовая глубина True Color нужна для обработки фотографий без искажений, так как не очень легко проводить коррекцию фотографий, если Ваш монитор поддерживает разрешение в 256 цветов. Графический ускоритель нужен для ускорения прорисовки Вашего экрана - при работе с изображениями (особенно в векторной графике) перерисовка занимает значительную часть ресурсов компьютера. И, в конечном итоге, время, сэкономленное на ожидании прорисовки, Вы сможете использовать более продуктивным способом.

Объем памяти >= 32M
очень желателен, так как при изготовлении web-страничек Вы будете держать открытыми, в среднем, около 7-8 программ и из них пару монстров типа CorelDraw 7.0-8.0 или PhotoShop 4.0-5.0. Дело в том, что любая многозадачная операционная система в случае нехватки ей оперативной памяти будет использовать так называемую виртуальную, которая, в конечном счете, - просто файл на диске. Система будет скидывать на диск сегменты памяти программы, которая не использовалась дольше других, с целью предоставления памяти текущей задаче. А в случае обратного переключения на нужную задачу - восстановление с диска сегментов памяти. Скорости доступа к физической и виртуальной памяти отличаются на три порядка, поэтому для продуктивной работы желательно иметь памяти побольше. Отсюда, в принципе, идет и следствие - процессор помощнее.

CD-ROM
для работы Вам понадобится использовать клипарты и профессиональные фотографии, а они, в основном, распространяются на компакт-дисках. Кроме этого, он пригодится и в том случае, если Вы захотите использовать на своих страничках звук.

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

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

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


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

Вишенки

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

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

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

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

Программа обработки растровой графики
Одна из важнейших программ, которую Вам придется освоить. Она Вам поможет при сканировании фотографий и их коррекции. При помощи этой программы вы сможете создавать те невообразимые эффекты, которые Вы видите в 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, которая была куплена корпорацией как один из конкурентов. Сейчас доступна уже ее вторая версия. Данная программа, в отличие от двух предыдущих, очень быстрая и маленькая, но некоторые эффекты и команды, доступные в других программах, в ней сделать или трудно, или вообще невозможно.

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

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

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

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

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

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

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

  • Ulead GIF Animator - программа, позволяющая Вам создавать анимированные GIFы. Обеспечивает полный контроль над выходным файлом. Обладает очень мощными средствами оптимизации.

  • Фильтры для Adobe PhotoShop - их количество просто огромно, но реально понадобится немного. Они способны существенно повысить работоспособность и двумя-тремя нажатиями создать впечатляющие эффекты. Но только не переборщите с ними - во всем нужна мера :).

  • Macromedia Flash! - практически стандарт для использования в web векторных изображений. Обладает собственной средой разработки и позволяет создавать впечатляющую векторную анимацию.

  • Программы для создания VRML-миров, или 3D-программы, позволяющие экспортировать в данный формат. В качестве примера могу порекомендовать неплохую программу создания VRML-миров Internet3D Space Builder.

  • Программы для обработки звука - могут понадобиться, если того требует Ваша страничка. Это программы вообще отдельного класса, но для простой обработки звука, например, подойдет CoolEdit.

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


...::: Информация - вот основа Internet! :::...

Вишенки

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

Информация - вот основа Internet!

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

На какой круг людей рассчитан web-сайт?

Спросите себя об этом. На тинэйджеров или на профессоров-медиков? - от этого вопроса напрямую зависит и дизайн сайта, и та информация, которую следует размещать на сайте. Исходя из контингента предполагаемых посетителей попытайтесь встать на их точку зрения и расставьте пункты меню Вашего сайта в порядке привлекательности для посетителя (а не для web-мастера) - это может оказаться достаточно трудно, но можно уже после запуска сайта проверить статистику посещаемости разделов и, исходя из этого, скорректировать меню. В качестве примера можно привести, допустим, некий предполагаемый web-сайт некой предполагаемой фирмы ;-), специализирующейся на предоставлении финансовой информации. А теперь вопрос: какая самая интересная информация для пользователя? История фирмы? НЕТ. Штат сотрудников? НЕТ. Услуги? НЕ совсем. Курс доллара? ДА-ДА-ДА. И эта информация должна быть доступна на первой странице, а не в каких-то там меню, закопанных в дебрях сайта.

Что собой представляет информация?

On-line публикацию статьи или статистические данные, полемику по горячему вопросу или интервью со звездой?

Давайте начнем с публикации в Internet книги. Книги рассчитаны на чтение от начала до конца (исключая справочники и словари) - мы к этому привыкли, поэтому и в Internet мы должны поместить ее таким образом, чтобы ее можно было читать от начала и до конца. Гипертекст позволяет организовать оглавление в виде удобных гиперссылок и перейти сразу к нужному разделу; но если человек читает все подряд, то в конце каждого раздела мы должны сделать ссылку на следующий, не заставляя человека пробираться назад в поисках оглавления. Кроме этого, в отличие от обычной книги, в которой то и дело появляются сноски, в HTML-документе такую сноску можно и должно оформить как переход к глоссарию или отдельной страничке, на которой эта сноска объясняется.

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

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

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


...::: Что такое стильный web-сайт? :::...

Вишенки

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

Что такое стильный web-сайт?

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

Стильность web-сайта достигается несколькими приемами. Можно выделить следующие элементы, участвующие в создании стиля:

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

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

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

    <body bgcolor="#669900" text="#333333" link="#669900" vlink="#666666" alink="#000000">

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

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

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

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


...::: JavaScript: полезные функции (часть III) :::...

Вишенки

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

JavaScript:
полезные функции (часть III)

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

Общие соображения и HTML-код формы

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

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

<form action="/cgi-bin/formmail.cgi" onsubmit="return SendForm();">

Ваше имя: *<input type="text" name="name"><br>
Электронный адрес: *<input type="text" name="email"><br>
Тема сообщения: <input type="text" name="subject"><br>
Сообщение: <textarea name="message"></textarea><br><br>

<input type="submit" value="Отправить">
<input type="reset" value="Очистить">

</form>

* - необходимые для заполнения поля

Заметьте, что в отличие от обычной формы непосредственно в теге <form> мы отслеживаем событие onsubmit и при его наступлении вызываем функцию проверки формы SendForm().

Почему выбран именно такой способ вызова функции? Ведь можно было применить, например, событие onClick? Ответ простой - при использовании события onClick кнопку "Submit" придётся заменить обычной кнопкой. И, в случае, если в броузере отключена поддержка JavaScript, мы не сможем отправить форму (!). Отслеживание же события OnSubmit лишено этого недостатка, т.к. даже при отключенной поддержке скриптов форма будет отправлена.

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

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

Функция проверки формы перед отправкой

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

Для начала напишем общую обвязку функции:

<script language="JavaScript">
<!--

function SendForm() {

// Здесь мы разместим код функции

return true;
}

//-->

</script>

Применённый нами способ вызова функции через событие onSubmit в качестве результата работы функции требует возврата одного из логических значений: true или false. И, в зависимости от этого значения, форма либо будет отправлена, либо нет.

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

<script language="JavaScript">
<!--

function SendForm() {

if (document.forms[0].name.value == "") {
alert('Пожалуйста, введите Ваше имя');
document.mailform.name.focus();
return false
}

if (document.forms[0].email.value == "") {
alert('Пожалуйста, введите электронный адрес');
document.mailform.email.focus();
return false
}

return true;
}

//-->

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

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

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

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

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

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

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

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

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

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

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

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

<script language="JavaScript">
<!--

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(), так что теперь текст ошибки напрямую зависит от имени поля.

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

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


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

Вишенки

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

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

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

Что особенного в графике, применяемой
на web-страничках?

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

Для использования в Web применяется два основных формата файлов - GIF и JPG. Сейчас продвигается новый формат для web-графики под названием PNG (произносится "пинг"), но он пока еще мало распространен и не все броузеры его понимают, поэтому с этим форматом мы пока разбираться не будем.

Итак, приступим к разбору форматов GIF и JPG, опишем их основные свойства и особенности.

Формат GIF

  • Поддерживает не более 256 цветов (меньше можно и часто нужно :);
  • Использует палитру цветов;
  • Использует сжатие без потери информации по методу LZW (который подобен применяемому в архиваторе PKZIP и, следовательно, GIF-файлы практически не сжимаются);
  • Поддерживает чересстрочную развертку;
  • Является поточным форматом, т.е. показ картинки начинается во время перекачки;
  • Позволяет назначить любому из цветов в палитре атрибут прозрачный, что применяется при создании так называемых прозрачных GIFов;
  • Имеет возможность сохранения в одном файле нескольких изображений, что находит свое применение при изготовлении анимированных GIFов;
  • Поддерживает возможность вставки в файл управляющих блоков, которые позволяют вставлять комментарии в файл (например, об авторских правах :), осуществлять задержку между показами изображений и т.д.

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

А теперь рассмотрим свойства и особенности второго популярнейшего формата в сети.

Формат JPEG

  • Позволяет сохранять полноцветные изображения с количеством цветов 16,7 млн. цветов (или 24bpp), причем, если в рисунке меньше цветов, то перед сохранением файла он все равно преобразуется в полноцветное изображение;
  • Использует сжатие с потерями информации, за счет чего достигает диких степеней сжатия файлов;
  • Поддерживает прогрессивную развертку, т.е. изображение появляется вначале с плохим качеством и в процессе загрузки постепенно улучшается.

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

Всю работу по обработке графики делайте в промежуточном формате

Ну вот, с форматами разобрались, теперь рассмотрим некоторые особенности работы с графикой. Несмотря на то, что мы сохраняем изображения в GIF-файле с поддержкой 256 цветов или в JPG-файле с 16,7 млн. цветов, работать с изображением нужно в каком-нибудь промежуточном формате, который позволяет сохранять картинку без искажений и без потери глубины цвета (например, TIFF и внутренние форматы редакторов типа PSD). Дело в том, что в процессе работы Вам понадобится многократно изменять или искажать изображение, что, в конце концов, приводит к многократной перезаписи файла. Многократная запись в формате GIF приведет к тому, что потеряются оттенки изображения, а в формате JPG - каждая новая перезапись файла будет вносить новые искажения, и через некоторое время фотография будет выглядеть ужасно. Поэтому всю работу по обработке графики делайте в промежуточном формате (и не смущайтесь огромными размерами файла) и только на самом последнем этапе преобразуйте изображение в нужный формат (часто - одновременно с оптимизацией размера файла).

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

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

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

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


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

Вишенки

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

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

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

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

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

JPG-файл с сильными искажениями Как определить оптимальную степень сжатия?

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

Если такую операцию проводить с каждой фотографией, то это может занять слишком много времени. Но есть выход - все фотографии можно подразделить на некоторые подтипы (например: черно-белые фотографии, тонированные фотографии, пейзажи и т.д.) и к каждому подтипу подобрать свой оптимальный коэффициент. Впоследствии можно просто применять ранее найденный коэффициент ко всем подобным фотографиям. Ниже представлены две одинаковые фотографии, но только с разной степенью коэффициента сжатия JPG. Слева - фотография, записанная в PhotoShop 5.0 со степенью сжатия 3 (не оптимизированная), а правая оптимизирована при помощи Ulead SmartSaver Pro. Обратите внимание на размеры фотографий: они различаются в три раза (при одинаковом качестве изображения).

Не оптимизированная фотография (14.91KB) Оптимизированная фотография (4.14KB)

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

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

Обычная развертка Прогрессивная развертка

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


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

Вишенки

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

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

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

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

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

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

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

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

Полная палитра (256 цветов) - 7.88KB Оптимизированная палитра (32 цвета) - 3.28KB

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

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

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

Оптимизированная палитра (256 цветов) Фиксированная палитра Netscape (256 цветов)

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

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

Фиксированная палитра Netscape (256 цветов) - 3.58KB Фиксированная палитра Netscape (256 цветов) + дизеринг - 4.77KB

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

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

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

Следующий метод оптимизации основан на искажении размеров рисунка. Его нельзя применять к обычным рисункам, но он очень хорошо подходит для рисунков, состоящих из элементов типа линий и однородных областей. Допустим, нам понадобился рисунок, представляющий из себя черный квадрат (Малевича ;) размером 100x100 пикселей. Для уменьшения размера файла сделаем т.н. однопиксельный (т.е. размером 1x1 пиксель) GIF черного цвета. Как обычно, вставим его в HTML-файл, но размеры картинки укажем те, что нужны нам (100x100). Броузер сам растянет наш пиксель до нужных размеров, а мы получим большую экономию :). Подобным же образом можно использовать однопиксельные GIFы других цветов, но наибольшую пользу может принести прозрачный однопиксельный GIF. При помощи него удобно задавать пустышки на страницах, абзацные отступы, фиксировать минимальную ширину (высоту) таблицы и делать другие полезные вещи.

Методом искажения очень удобно создавать графические разделительные линии. Достаточно нарисовать ее сечение шириной (высотой) в один пиксель, а в HTML-документе указать нужную ширину линии (или высоту, если линия вертикальная). Линия, расположенная под абзацем, сделана именно таким способом.

Эта линия создана с применением искажения размера (63 байта)

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

Фрагментарная оптимизация применяется в случае, если у нас есть некоторое большое изображение, содержащее сильно отличающиеся по количеству цветов области. В этом случае изображение можно разрезать на фрагменты и поместить их в таблицу, тогда в броузере оно будет выглядеть как единое целое. Теперь каждый фрагмент исходного рисунка мы оптимизируем отдельно. Для фрагментов, содержащих мало цветов, вполне может хватить палитры в 8 или 16 цветов, а для богатых цветами фрагментов можно использовать полную палитру в 256 цветов или сохранить в формате JPG. Этот способ позволяет уменьшить объем, занимаемый исходным файлом, примерно раза в 2-3 (в зависимости от конкретного изображения); кроме того, изображение будет загружаться более равномерно, т.к. все фрагменты будут качаться параллельно. Хотя, если количество фрагментов превысит 10, то возможного выигрыша и не получится, т.к. каждый фрагмент должен будет хранить свою копию палитры и служебной информации.

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

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

Anti-Aliasing проведен на белом фоне Anti-Aliasing проведен на синем фоне

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

И, наконец, еще об одной особенности формата. Версия GIF89a позволяет сохранять файлы с использованием чересстрочной развертки. При использовании этого способа строчки, составляющие изображение, перемежаются, и при загрузке броузер вначале показывает каждую 8-ую строчку, потом каждую 4-ую, каждую 2-ую, и, наконец, загружается полное изображение. Это немножко похоже на жалюзи :). При этом посетитель вашей странички сможет понять, что же нарисовано на данной картинке, не дожидаясь ее полной загрузки, что очень удобно. Так что, если у Вас нет на то иных причин, записывайте все GIF-файлы с использованием чересстрочной развертки. Приведенные ниже изображения показывают разницу при загрузке нормальных (слева) и чересстрочных (справа) изображений.

Обычная развертка Чересстрочная развертка


...::: Броузеры, которые мы выбираем :::...

Вишенки

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

Броузеры, которые мы выбираем

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

Давайте вспомним. Что лежит в основе Web-страничек? Верно, язык HTML, и определятся он как текст в формате ASCII со вставкой специальных разметочных кодов (или тегов). И, когда броузер отображает страничку, то он находит эти коды и выполняет соответствующие им действия (например, встречая тег <b>, начинает вывод последующего текста полужирным шрифтом, а встречая </b> - прекращает это делать). Полный набор таких тегов называется спецификацией и поддерживается WWW-консорциумом, в который входят все основные компании, разрабатывающие программное обеспечение для Internet (в том числе и Microsoft с Netscape). В идеале, все броузеры должны удовлетворять данным спецификациям, но, к сожалению, реальная жизнь и конкуренция между ведущими производителями броузеров вносят свои коррективы.

Напомню, что первоначально HTML позиционировался как язык логической разметки текста, независимый от устройства вывода. То есть теги воспринимались как указание к выделению части текста некоторым образом. Отсюда в языке имеется множество т.н. логических тегов типа <strong>, <em>, … , к сожалению, редко применяющихся. Фраза "независимый от устройства вывода" обозначает, что результат интерпретации HTML-кода может быть выведен не только на экран, но и, к примеру, на звуковую карту (когда компьютер сам будет читать Вам содержимое HTML-странички) или на специальное устройство, воспроизводящее содержимое странички кодом Брайля. Но получилось так, что язык HTML, в конце концов, превратился в язык описания страниц на экране компьютера.

В настоящий момент имеются два броузера, особенности которых должен учитывать web-дизайнер при изготовлении страничек. Это "Netscape Navigator" и "Microsoft Internet Explorer" (а вдруг кто не знает :) На самом деле броузеров гораздо больше, но они все вместе занимают всего около 1% рынка и, как правило, стремятся к совместимости с одним из двух лидеров. Между собой лидирующие броузеры делят рынок в соотношении примерно 75/25 (на данный момент лидирует Internet Explorer). Так что, в дальнейшем будут рассматриваться только эти программы.

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

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

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

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

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

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

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

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

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

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


...::: Интерактивность! Что? И как? :::...

Вишенки

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

Интерактивность! Что? И как?

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

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

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

Как это осуществляется технически? А вот как - на стороне сервера мы размещаем нужные программы, базы данных,... и конфигурируем web-сервер таким образом, чтобы он смог передавать запросы пользователей из сети обрабатывающей программе и получать от нее результат. Делается это посредством протокола CGI - Common Gateway Interface (что по-русски звучит как "общий шлюзовый интерфейс"). CGI - это набор правил, по которым сервер передает запрос программе. Любая программа, написанная таким образом, чтобы удовлетворять этим требованиям, сможет использоваться на Web-сервере.

Язык программирования, на котором пишется программа, большого значения не имеет, и может быть использован любой. Наиболее популярным языком программирования, используемым для написания несложных программ, следует признать PERL - язык, первоначально разработанный для написания отчетов и идеально подошедший для несложных CGI-программ. Текст языка на PERL принято называть скриптом (не путать с JavaScript - программа на PERL выполняется на стороне сервера, в то время как JavaScript - на стороне клиента). Язык является интерпретирующим, то есть анализирующим текст программы в процессе выполнения. Для работы PERL на web-сервере должен быть установлен и правильно сконфигурирован соответствующий интерпретатор.

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

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

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

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

Начнем, пожалуй, с формы. Описание формы будет заключаться между тегами <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).

Конфигурирование скрипта

Теперь сконфигурируем скрипт. Опуская несущественные для нас детали, листинг нашего скрипта можно представить так:

#!/usr/bin/perl

$mailprog = '/usr/lib/sendmail';
@referers = ('www.cherry-design.spb.ru','195.5.155.48');

# Здесь располагается код скрипта.

В данном случае вся конфигурация сведется к установке IP-адреса компьютера, на котором расположен web-сервер, и конфигурированию путей для программ perl и sendmail. Первая программа - непосредственно интерпретатор языка PERL, а вторая - это программа, к которой обращается скрипт, и которая осуществляет посылку сообщения по почте. Адрес расположения PERL-интерпретатора всегда задается первой строкой в скрипте, и в данном случае программа доступна по адресу /usr/bin/perl. Расположение программы sendmail задается второй строчкой в нашем листинге. И, наконец, третья строчка задает имя и IP-адрес web-сервера (для примера я указал параметры моего сайта).

Вот, практически, и все. Наш скрипт осталось только переписать в каталог. Но тут есть одна тонкость - дело в том, что скрипт будет располагаться на UNIX-машине, а текст в UNIX-формате имеет одно отличие от Windows: конец строки в UNIX обозначается символом возврата каретки <CR>, а в Windows - парой символов: перевод строки <LF> и возврат каретки <CR>. Если переписать такой файл по FTP в режиме BINARY, то скрипт работать не будет!!! При копировании скрипта на web-сервер нужно установить режим ASCII, который автоматически преобразует концы строк к UNIX-формату.

У скрипта FormMail есть много дополнительных и очень удобных возможностей. Например - переадресация странички с подтверждением отправки сообщения или проверка правильности заполнения полей. Если Вас это заинтересует, то сходите на страничку Мэтта, и там Вы найдете не только описание FormMail, но и много других полезных скриптов. В этой статье я хотел просто показать, как применять готовые скрипты для нужд своего сайта, и поэтому опустил все несущественные детали и остановился на рассмотрении практических вопросов.


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

Вишенки

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

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

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

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

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

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

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

<!--#command param="value" -->

где # - признак начала SSI-вставки;
command - SSI-команда;
param - параметры SSI-команды.

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

<!--#include virtual="/path/file.ssi" -->

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

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

Следующая команда - это команда установки значения переменной:

<!--#set var="pic" value="picture.gif" -->

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

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

<!--#echo var="pic" -->

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

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

<!--#set var="A" value="123" -->
<!--#set var="B" value="$A456" -->

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

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

<!--#if expr="condition" -->
<!--#elif expr="condition" -->
<!--#else -->
<!--#endif -->

где condition - условие для сравнения.

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

<!--#set var="Monday" -->
<!--#if expr="$Monday " -->
<p>Сегодня понедельник.</p>
<!--#else -->
<p>Что угодно, но не понедельник.</p>
<!--#endif -->

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

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

index.shtml

<!--#set var="title" value="Что такое SSI?" -->
<!--#set var="keywords" value="SSI, SHTML, CGI, Apache" -->
<!--#set var="description" value="Пример использования SSI." -->

<!--#include virtual="ssi/_header.shtml" -->

Здесь находится текст нашей странички.

<!--#include virtual="ssi/_footer.shtml" -->

Теперь напишем код для этих SSI-вставок:

_header.shtml

<html>
<head>
<title><!--#echo var="title" --></title>
<meta name="keywords" content="<!--#echo var="keywords" -->">
<meta name="description" content="<!--#echo var="description" -->">
</head>
<body>

_footer.shtml

</body>
</html>

Как видите, основной документ предельно упрощён и состоит из директив, устанавливающих значения переменных title, keywords и description, которые и будут подставлены в код странички при обработке SSI-вставок, определяющих код для верхней и нижней частей странички. Реальный код SSI-вставок обычно гораздо сложнее и может включать в себя большее количество определяемых переменных и сложных условий, формирующих окончательный вид странички.

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

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

Вот, вкратце, то, что можно рассказать о SSI. Если Вас это заинтересовало, то, возможно, Вам будет интересно прочитать статью на сайте web-клуба, где об этом написано более подробно и приведён полный список SSI-директив с примерами.


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

Вишенки

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

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

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

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

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

Для примера разберёмся с установкой отступов в теге <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-сайта отбрасывать возможности, которые невозможно реализовать в обоих броузерах. Да, это, конечно, немного обидно, но лучше уж мы немного пожертвуем каким-нибудь эффектом, чем оставим огромную часть посетителей за бортом своего сайта. Не правда ли?

Эти возможности лучше не использовать

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

  • Использование атрибута bgproperties=fixed в теге <body>. Его появление заставляет фоновое изображение оставаться неподвижным, но, к сожалению, данный атрибут поддерживается только IE, начиная с версии 2.

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

  • Использование ActiveX компонентов. Такие странички будут работать исключительно на Windows-платформах.

  • Использование тега <iframe> для создания плавающих фреймов - поддерживается исключительно IE4 и выше.

  • Использование тега <blink> - мигающий текст. Во-первых, он применим только в NN, начиная с 3-ей версии, а во-вторых, его применение не несёт ничего, кроме раздражения и желания моментально уйти со странички.

  • Использование тега <marquee> - нежелательно точно по тем же причинам, что и у тега <blink>. Разница только в том, что он поддерживается только IE.

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

  • Указание ширины и высоты изображений в процентах - поддерживается только IE.

Этот список, конечно, не полон, но это основные ошибки. Всё, что описано, касается сайта, выставляемого в Internet. Если же Вы делаете сайт для внутренней сети (intranet), то можете использовать всё, что Вам заблагорассудится :).


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

Вишенки

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

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

Версия для распечатки
Версия
для распечатки
Ну хорошо, с тем, что не нужно делать, мы уже ознакомились. А что же всё-таки можно делать? На какие моменты следует обратить внимание при изготовлении совместимых 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 будет гораздо меньше.

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

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


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

Вишенки

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

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

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

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

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

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

    <table>
    <tr>
    <td><!-- содержимое таблицы --></td>
    </tr>
    </table>

  • Помещать содержимое таблиц можно только внутри тегов <td></td>. Между <table> и <tr>, а также между <tr> и <td> не должно быть ничего, за исключением пробелов и символа перевода строки.

  • Всегда закрывайте табличные теги. Netscape Navigator не понимает незакрытых таблиц и немедленно вызывает проблемы. Как правило, это проявляется в том, что в IE страничка показывается нормально, а в NN мы видим абсолютно чистую страницу.

  • Никогда не оставляйте пустую ячейку. Если нужно, чтобы в ячейке ничего не было, то нужно вместо текста подставить неразрывный пробел &nbsp;. Иначе ячейка в Netscape Navigator будет показана некорректно.

  • Выравнивание таблицы по ширине страницы лучше всего производить при помощи внешних, по отношению к таблице, тегов <center></center> и <div></div>, а не при помощи атрибута align в теге <table>. Также для совместимости с Netscape Navigator.

  • Все характеристики, относящиеся к формату ячеек (такие, как цвет фона или выравнивание текста), задавать только в теге <td>. Если какие-то атрибуты относятся ко всей строке таблицы, то их можно задать и в теге <tr>.

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

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

<table border="0" cellspacing="0" cellpadding="0">

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

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

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

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

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

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

<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки в первой строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки в первой строке -->
</td>
</tr>
<tr>
<td><img src="/pic/1x1.gif" height="1" width="100"><br>
<!-- содержимое 1-ой ячейки во второй строке -->
</td>
<td><img src="/pic/1x1.gif" height="1" width="200"><br>
<!-- содержимое 2-ой ячейки во второй строке -->
</td>
</tr>
</table>

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

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


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

Вишенки

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

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

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

Для чего разрезают изображения?

Ведь проще сразу поместить картинку на страничку! Для этого есть несколько важных причин:

  • при загрузке страницы все её элементы качаются броузером параллельно. Таким образом, одна картинка размером 100Кб будет качаться дольше, чем 10 картинок по 10Кб;

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

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

  • для организации ссылок на картинках. Есть два способа сделать это.

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

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

Как правильно резать?

Ну вот, зачем резать картинку мы выяснили, теперь перейдём к вопросу - как правильно резать?

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

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

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

После того, как мы определили фрагменты, можно приступать непосредственно к нарезке. Удобнее всего это делать, расставив направляющие в PhotoShop (или ImageReady) и воспользовавшись инструментом "Crop". Но, подождите ещё минутку, важное предостережение - если вы собираетесь резать сложную композиционную картинку, то перед началом желательно перевести всё изображение к одной палитре, иначе может оказаться так, что фрагменты изображения будут иметь не совпадающие на краях оттенки цветов.

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

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

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

<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

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

Неправильно

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

Правильно

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

Почему именно так? Всё для той же совместимости с 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>

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


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

Вишенки

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цветные подложки под текст

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

<table border="0" cellpadding="10" cellspacing="0" bgcolor="#ffff99">
<tr>
<td>Здесь располагается фрагмент текста.</td>
</tr>
</table>

Цвет подложки мы можем задавать, используя атрибут bgcolor для таблицы. А чтобы текст на подложке не "прилипал" к границам, мы установим зазор при помощи атрибута cellpadding. Вот, в общем-то, и всё, что требуется. И результат будет выглядеть вот так:

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

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

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

<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 используется для задания отступов вокруг текста. Разница лишь в том, что теперь таблица используется для задания рамки, а не фона. Результат выглядит следующим образом:

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

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

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

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

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

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

<table background="picture.gif" width="368" cellpadding="0" cellspacing="0" border="0"><tr><td>
<table background="" width="368" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
...
...
...
</table>
</td></tr></table>

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

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


...::: Как оформить таблицу? :::...

Вишенки

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

Как оформить таблицу?

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

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

  • bgcolor - цвет фона в таблице или ячейке;
  • border - толщина рамки таблицы;
  • cellspaсing - расстояние между ячейками;
  • cellpadding - расстояние от рамки до содержимого ячейки.

Обычная таблица

Начнём с обычной таблицы. Как видите, даже устанавливая атрибут border равным единице, мы не получаем рамку толщиной в один пиксель. Это происходит из-за того, что при отрисовке таблицы используются псевдотрёхмерные границы и реальная толщина рамки всегда больше указанной. В дополнение к цвету, которым нарисована таблица, используются ещё два: цвет тени и цвет подсветки. В IE имеются атрибуты borderColor, borderColorDark и borderColorLight, которые позволяют контролировать три этих цвета. Установив borderColorDark и borderColorLight равными цвету фона, мы можем добиться толщины рамки в один пиксель, но ведь это будет работать только в IE - а значит, нам не подходит.

<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>

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

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

<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>

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

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

<table width="368" cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="3" border="0">
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>

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

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

<table width=368 cellpadding="0" cellspacing="0" border="0"
bgcolor="#000000"><tr><td>
<table width="100%" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</td>
<td bgcolor="#e0e0e0">&nbsp;</td>
</tr>
<tr>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
<td bgcolor="#ffffff">&nbsp;</td>
</tr>
. . .
. . .
. . .
</table>
</td></tr></table>

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

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

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

<table width="368" cellpadding="0" cellspacing="0" border="0">
<tr><td colspan="4" bgcolor="#000000"><img src="1x1.gif"
width="1" height="1" border="0"></td></tr>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
. . .
. . .
. . .
<tr><td colspan="4" bgcolor="#000000"><img src="1x1.gif"
width="1" height="1" border="0"></td></tr>
</table>

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

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

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

<table width="368" cellpadding="0" cellspacing="1" border="0">
<tr>
<td bgcolor="#e0e0e0">1-1</td>
<td bgcolor="#e0e0e0">1-2</td>
<td bgcolor="#e0e0e0">1-3</td>
<td bgcolor="#e0e0e0">1-4</td>
</tr>
. . .
. . .
. . .
</table>

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. Варьируя толщину рамки, её цвет, цвет текста, цвет подзаголовков и расстояние между ячейками, мы можем сделать практически любую таблицу. Главное - экспериментировать, и тогда можно придумать совсем уж экзотические варианты.


...::: Как правильно регистрировать сайт? :::...

Вишенки

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

Как правильно регистрировать сайт?

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

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

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

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

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

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

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

Ключевые слова

К подбору ключевых слов стоит подойти серьёзно. Правильный их выбор позволяет сильно повысить позицию сайта при запросах.

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

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

Описание сайта

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

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

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

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

Название сайта: 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

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

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

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

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


...::: Бойцы невидимого фронта :::...

Вишенки

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

Бойцы невидимого фронта

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

Запомните! Все META-теги не несут визуальной информации и должны располагаться в секции <head></head> документа.

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

Автоматическое перенаправление

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

<meta http-equiv="refresh" content="3; url=http://www.newaddress.com/">

В данном примере мы передали броузеру указание, чтобы он автоматически перешёл на страничку по адресу http://www.newaddress.com/ после 3-хсекундной задержки. Задержка нужна, чтобы пользователь успел прочитать информацию.

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

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

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

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

<meta name="description" content="Дизайн и изготовление web-сайтов, их поддержка и раскрутка в сети. Статьи и ссылки по web-дизайну, полезные рекомендации.">

<meta name="keywords" http-equiv="keywords" content="дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML, JavaScript, CGI, SSI, ASP, вишня, cherry">

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

<meta name="description" content="Использование META-тегов на страничках. Типичные задачи и их решения.">

<meta name="keywords" http-equiv="keywords" content="дизайн, design, web-design, веб-дизайн, web-мастеринг, web, веб, www, поддержка, раскрутка, реклама, баннер, баннерик, кнопка, оптимизация, статьи по веб-дизайну, ссылки по web-дизайну, gif, jpg, HTML, JavaScript, CGI, SSI, ASP, вишня, cherry, META, ключевые слова, автоматический редирект, перенаправление">

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

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

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

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

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

<meta http-equiv="expires" content="Mon, 01 Jan 1990 00:00:00 GMT">

Другие полезные META-теги

Кроме описанных выше тегов, есть ещё несколько, которые часто встречаются на web-страничках.

К примеру, META-тег с параметром "author" служит для указания автора странички и учитывается некоторыми поисковыми системами. И вообще, у каждой странички должен быть автор, так что имеет смысл пользоваться этим тегом.

Похожий META-тег с параметром "generator" автоматически проставляется различными HTML-редакторами и содержит информацию о программе, в которой была сделана страничка. Хотя смысла от этого тега, IMHO, немного. Некоторые авторы в его описании дублируют информацию META-тега "author".

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

<meta http-equiv="content-type" content="text/html;
charset=Windows-1251">

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

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


...::: Немного слов о кодировках :::...

Вишенки

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

Немного слов о кодировках

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

История возникновения

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

Стандартизирована только половина таблицы, т.н. ASCII-код - первые 128 символов, которые включают в себя буквы латинского алфавита. И с ними никогда не бывает проблем. Вторая же половина таблицы (а всего в ней 256 символов - по количеству состояний, который может принять один байт) отдана под национальные символы, и в каждой стране эта часть различна. Но только в России умудрились придумать целых 5 различных кодировок. Термин "различные" обозначает то, что одному и тому же символу соответствует разный цифровой код. Т.е. если мы неправильно определим кодировку текста, то нашему вниманию предстанет абсолютно нечитаемый текст.

Кодировки появились исторически. Первая широко используемая российская кодировка называлась KOI-8. Её придумали, когда адаптировали к русскому языку систему UNIX. Это было ещё в семидесятых - до появления персоналок. И до сих пор в UNIX это считается основной кодировкой.

Потом появились первые персональные компьютеры, и началось победное шествие DOS. Вместо того, чтобы воспользоваться уже придуманной кодировкой, Microsoft решила сделать свою, ни с чем не совместимую. Так появилась DOS-кодировка (или 866 кодовая страница). В ней, кстати, были введены спецсимволы для рисования рамок, что широко использовалось в программах, написанных под DOS. Например, в том же Norton Commander-е.

Параллельно с IBM-совместимыми развивались и Macintosh-компьютеры. Несмотря на то, что их доля в России очень мала, тем не менее потребность в русификации существовала и, разумеется, была придумана ещё одна кодировка - MAC.

Время шло, и 1990 году Microsoft явила на свет первую успешную версию Windows 3.0-3.11. А вместе с ней и поддержку национальных языков. И снова был проделан такой же фокус, как и с DOS. По непонятным причинам они не поддержали ни одну из уже существовавших ранее (как это сделала OS/2, принявшая за стандарт DOS-кодировку), а предложили новую Win-кодировку (или кодовая страница 1251). Де-факто она стала самой распространённой в России.

И, наконец, пятый вариант кодировки связан уже не с конкретной фирмой, а с попытками стандартизации кодировок на уровне всей планеты. Занималась этим ISO - международная организация по стандартам. И, догадайтесь, что они сделали с русским языком? Вместо того, чтобы принять за "стандартную русскую" какую-нибудь из вышеописанных, они придумали ещё одну (!) и назвали её длинным неудобоваримым сочетанием ISO-8859-5. Разумеется, она тоже оказалась ни с чем не совместимой. И в настоящий момент эта кодировка практически нигде не применяется. Кажется, её используют только в базе данных Oracle. По крайней мере, я ни разу не видел текст в этой кодировке. Тем не менее, её поддержка присутствует во всех броузерах.

Сейчас идет работа над созданием новой универсальной кодировки (UNICODE), в которой предполагается в одну кодовую таблицу запихнуть все языки мира. Тогда точно проблем не будет. Для этого на каждый символ отвели 2 байта. Таким образом, максимальное количество знаков в таблице расширилось до 65535. Но до момента, когда все перейдут на UNICODE, остаётся ещё слишком много времени.

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

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

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

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

<meta http-equiv="content-type" content="text/html;
charset=Windows-1251">

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

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

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

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

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

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

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

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

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

<style type="text/css">
<!--
.serif { font-family : "Times New Roman", "Geneva", "serif"; }
.sanserif { font-family : "Arial", "Helvetica", "sans-serif"; }
.mono { font-family : "Courier", "monospace"; }
-->
</style>

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

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


...::: Как работает формат JPEG? :::...

Вишенки

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

Как работает формат JPEG?

Версия для распечатки
Версия
для распечатки
Знание некоторых принципов возмещает незнание многих фактов. Сегодня мы поговорим о технологии сжатия JPEG и о том, за счёт чего достигаются столь сильные степени сжатия.

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

Что же такого необычного в YUV представлении цвета по сравнению с RGB? А то, что оно наиболее близко к "естественному", тому, которое неосознанно выполняет человек. Y-компонента, или яркость, тесно связана с качеством картинки. Точнее сказать, Y - это и есть картинка, только чёрно-белая. Компоненты U и V содержат информацию о цвете и позволяют нам раскрашивать Y-картинку.

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

Человеческий глаз устроен таким образом, что наиболее чувствителен именно к яркостной составляющей изображения (Y-компонента) и наименее к цветовым. Причина этого феномена лежит в физиологии. Вы, наверно, помните, что зрачок представляет собой оптическую линзу, которая фокусирует изображение на глазное дно, покрытое палочками и колбочками. Ну так вот, палочки - это сенсоры, воспринимающие именно яркостную составляющую, а колбочки - цветовую. Причём палочек на порядок больше, чем колбочек, и они гораздо более чувствительны к свету. Вспомните поговорку "Ночью все кошки серы". Почему так? Почему вечером все теряет цвет? Именно из-за того, что количества падающего на зрачок света не хватает для того, чтобы вызвать реакцию колбочки. Но и чувствительность человеческого глаза к разным цветам тоже величина непостоянная. Зрачок более чувствителен к нижней части цветового спектра, нежели к верхней. Формат JPEG как раз и учитывает эти особенности.

Анализируя частотную информацию о появлении цветов, удаётся избавиться от части информации уже в процессе квантования. При этом цвета в верхней части спектра исключаются, что практически не сказывается на зрительном восприятии образа. Также исключается часть яркостной информации. Грубо говоря, JPEG просто отбрасывает от яркостной составляющей половину полезного сигнала, а от цветовой - 3/4. Это, конечно, примерно, т.к. существуют градации и более сложные схемы сжатия.

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

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

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

Статья появилась как результат переписки с Сергеем Ерёминым по поводу оптимизации JPEG - за что ему большое спасибо.


...::: JavaScript и объектная модель :::...

Вишенки

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

JavaScript и объектная модель

Версия для распечатки
Версия
для распечатки
Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что-угодно. Как известно, всего два языка претендуют на лавры победителя в броузере. Это VBScript - подмножество Visual Basic-а и JavaScript. Вот последним мы и займёмся как наиболее универсальным.

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

Что такое объектная модель?

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

Сейчас же путь странички до дисплея гораздо дольше. Давайте поэтапно проследим её путь:

  1. Страничка скачивается с сайта и размещается в памяти компьютера;
  2. Производится анализ странички, в результате которого она препарируется на составляющие;
  3. Блоки, из которых состоит страничка (<body></body>, <head></head>, <p></p> и т.д.), размещаются во временной базе данных соответственно структуре объектной модели;
  4. База данных становится доступной другим программам и, в-частности, рендеру, который выводит страничку на экран. Для доступа и управления содержимым этой базы данных броузер предоставляет нам механизм объектов и скриптовый язык, посредством которого и выполняется доступ.

Разумеется, содержимое базы может быть изменено до вывода на экран, что и позволяет работать DHTML. Но объектная модель остаётся работать даже после того, как страничка показана на экране дисплея. Это даёт нам возможность в небольших пределах (а в последних версиях HTML 4.0 практически полностью) менять содержимое странички после загрузки.

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

Чтобы было понятно, о чём мы говорим, рассмотрим общую структуру объектной модели. Ниже приведена объектная модель 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 как такового как раз и заключаются в запоминании всего этого. Но, как Вы понимаете, оторванный от объектной модели, он мало полезен сам по себе. А потому я просто расскажу о популярных эффектах, применяемых на страничках, попутно давая пояснения. И надеюсь, что если это Вас заинтересует, то более сложные вещи Вы уже напишете сами.

Как и где размещать код скрипта?

Но сначала мы немного отвлечёмся от эффектов и поговорим о том, как и где размещать JavaScript. Так как язык скриптовый и рассчитан на работу на web-страничках, то его код размещается непосредственно в HTML-коде странички. Причём, код на JavaScript обычно состоит из двух частей:

  1. Функции, которые вызываются из кода странички в ответ на какое-то событие;
  2. Код событий, которые вызывают функции :)).

Описание функций должно располагаться в теге <head></head> - это гарантирует нам, что к моменту вызова функции она уже будет находиться в памяти компьютера. Для вставки кода используется специальный тег <script>, в параметрах которого мы и определяем конкретный язык. Вот пример типичного описания JavaScript-вставки:

<script language="JavaScript">
<!--

function somefunction()
{
// здесь располагается код функции
}

//-->
</script>

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

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

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


...::: JavaScript: полезные функции (часть I) :::...

Вишенки

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

JavaScript:
полезные функции (часть I)

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

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

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

Как известно, броузеры отличаются широтой толкования стандартов 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') {
// здесь и располагается зависимый код
}
}

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

Генерация случайного числа

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

Для генерации случайного числа мы воспользуемся JavaScript-объектом Math, метод random которого генерирует случайное число от 0 до 1. Но, так как нам обычно нужны целые числа из некоего диапазона, то будет логичным написать небольшую функцию, которая все это будет делать автоматически. Вот как выглядит соответствующий фрагмент кода:

function getrandom() {

var min_random = 0;
var max_random = 10;

max_random++;

var range = max_random - min_random;
var n=Math.floor(Math.random()*range) + min_random;

return n;
}

Перед использованием скрипта нужно лишь определить границы диапазона, в которых генерируется случайное число (соответственно, переменные min_random и max_random)

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


...::: JavaScript: полезные функции (часть II) :::...

Вишенки

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

JavaScript:
полезные функции (часть II)

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

Дата модификации документа

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

Есть два способа добиться нужного нам результата. Первый заключается в том, что строчку с датой вы корректируете вручную, а второй, и он более привлекательный, заключается в использовании свойства lastModified объекта document. Для этого в нужном месте странички достаточно вставить следующую конструкцию:

<script language="JavaScript">
<!--

document.write ("Дата последней модификации: " + document.lastModified);

//-->
</script>

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

<script language="JavaScript">
<!--

LastDate = new Date(document.lastModified);

LastDay = LastDate.getDate(); // Считываем число
LastMonth = LastDate.getMonth(); // Считываем месяц
LastYear = LastDate.getYear(); // Считываем год

LastYear = LastYear % 100;
LastYear = ((LastYear < 50) ? (2000 + LastYear) : (1900 + LastYear));

document.write ("Дата последней модификации: ", LastDay, "/", LastMonth+1, "/", LastYear);

//-->
</script>

Теперь осталось только прочитать день, месяц и год, воспользовавшись методами объекта Date и напечатать дату в нужном нам формате. Именно так и сделано в вышеприведённом скрипте, который печатает дату в формате, соответствующем региональным настройкам России (ДД/ММ/ГГГГ).

Обратите внимание на два обстоятельства. Первое - это то, что при печати месяца мы увеличиваем его на единичку, так как метод getMonth() возвращает нам номер месяца в виде целого числа от 0 (январь) до 11 (декабрь).

А второе заключается в том, что год мы печатаем не сразу, а вначале решаем проблему 2000 года. В данном случае эта проблема заключается в том, что метод getYear() в версии JavaScript от Microsoft возвращает нам год в виде четырёх цифр, а в версии Netscape Navigator в виде последних двух (после 2000 года в виде трех :), которые следует рассматривать как смещение от 1900 года.

Решение проблемы осуществляется достаточно просто - вначале мы берём остаток от целочисленного деления на 100 и тем самым гарантированно получаем год в виде двух последних цифр. Теперь нужно выяснить, к какому веку относятся эти две цифры - для этого мы сравниваем их с 1950-м годом и считаем, что если число меньше 50, то это уже новый век, а иначе - старый. Данным способом мы превратили проблему 2000 года в проблему 2050 года :), когда эта уловка уже наверняка потеряет смысл.

Как сделать страничку стартовой?

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

Этот приём может быть полезен для информационных ресурсов, но не стоит им особо злоупотреблять.

К сожалению, на данный момент скрипт будет работать только под Internet Explorer версии 5.x. Учтите это. Сам же код требуется разместить в подходящем месте, а выглядит он так:

<p><a href="#" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.yoursite.com/'); return false;">Сделать стартовой страницей</a></p>

Желающие могут сделать стартовой, например, мою страничку. ;-)

Добавление странички в "Избранное"

Подобно предыдущему скрипту, этот приём также работает лишь под Internet Explorer, но уже начиная с 4-ой версии. И точно такие же замечания по поводу его уместности.

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

<p><a href="#" onClick="window.external.addFavorite('http://www.yoursite.com/', 'Description'); return false;">Добавить сайт в Избранное</a></p>

Желаете проверить? Нажмите здесь, и Вы сможете добавить в избранное мой сайт. :-)

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

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

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

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

<script language="JavaScript">
<!--

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-файл, из которого убрали дизайнерское оформление и оставили очень простую вёрстку, чтобы при печати не было лишних элементов. Приведённый же выше код непосредственно посылает страничку на принтер.

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


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

Вишенки

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

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

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

Нужно ли использовать фреймы?

Для начала давайте решим, для чего используются фреймы. Они появились ещё во второй версии Netscape Navigator-а и предназначались для облегчения навигации при создании страничек (так тогда казалось).

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

Основные недостатки сайта, построенного с применением фреймов, следующие:

  • странички сайта не индексируются обычными поисковыми системами, исключая первую страницу. Это происходит из-за того, что страница описания фреймов не содержит в себе ссылок вида <a href="">...</a> и поисковые роботы, естественно, не могут попасть на внутренние странички. Приходится прикладывать дополнительные усилия, чтобы всё-же осуществить это. В частности, вводить вышеупомянутые ссылки именно для роботов;

  • в случае попадания не на первую страничку сайта не существует "официального" способа перейти на первую страничку сайта - приходится вручную редактировать путь в адресной строке броузера;

  • ввиду того, что фреймовая структура сайта придаёт ему достаточно узнаваемый вид, большинство подобных страничек выглядит достаточно однообразно;

  • невозможно поставить закладку на внутреннюю страничку сайта. А это уже серьёзно! Представьте, что Вы наткнулись на очень интересную статью и желаете, например, поместить ссылку в свою коллекцию или послать другу её адрес. Так вот, ни то, ни другое Вы сделать не сможете - фреймы скрывают истинный адрес странички. Ради справедливости нужно сказать, что этот адрес всё-же можно узнать, открывая ссылку в новом окне;

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

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

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

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

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

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

Механизм работы фреймов

Если всё-же решено применять фреймы, то давайте разберёмся с тем, как правильно писать HTML-код и работать с ними.

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

index.htm - страничка-контейнер

<html>
<head>
<title>Frame page</title>
</head>

<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>

<noframes>
<p>Ваш броузер не поддерживает фреймы, пожалуйста, обновите его.</p>
</noframes>

</html>

И сразу напишем код для страничек, входящих в фреймовую структуру:

left.htm - страничка, содержащая меню

<html>
<head>
<title>Menu page</title>
</head>

<body>

<a href="topic_1.htm" target="content">topic #1</a><br>
<a href="topic_2.htm" target="content">topic #2</a><br>
<a href="topic_3.htm" target="content">topic #3</a><br>
<a href="topic_4.htm" target="content">topic #4</a><br>

</body>
</html>

right.htm - страничка, в которой будут отображаться основные статьи сайта

<html>
<head>
<title>Content page</title>
</head>

<body>

<p>Эта страничка будет грузиться по-умолчанию, и
на ней обычно размещают приветственный текст.</p>

</body>
</html>

Как можно заметить, страничка-контейнер отличается от обычной лишь тем, что вместо тега <body> мы используем тег <frameset>, в котором непосредственно и определяются фреймы. Но сам по себе он описывает лишь количество и размеры фреймов и не описывает странички, входящие во фрейм. Это можно сделать при помощи тега <frame>. Давайте-ка подробнее разберём наш пример:

<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>

В параметре тега <frameset> мы определяем, что страничка будет разделена по-вертикали и состоять из двух колонок (если нам нужно разделить окно по-горизонтали, то тогда вместо параметра cols нужно применять параметр rows).

В принципе, колонок может быть и больше, чем две. Их количество определяется значением параметра cols (rows), которое представляет собой цифры и знаки, разделённые запятыми. Каждое значение определяет ширину колонки. Ширина, как, впрочем, и высота, может задаваться в процентах, пикселах и при помощи знака звёздочки, обозначающей - "всё оставшееся пространство". Вот примеры определения фреймов:

<frameset cols="200,*"> - 2 колонки, одна из которых имеет фиксированную ширину в 200 пикселей;

<frameset rows="25%, 50%, 25%"> - 3 строчки, высоты которых определены в процентах от высоты окна броузера;

<frameset rows="*, 2* ,*"> - то же самое, что и предыдущая строчка, но записанная при помощи звёздочек. Цифра перед звёздочкой указывает количество повторов. Ширина одной звёздочки определяется как среднее арифметическое между всеми звёздочками в строке с учетом коэффициентов перед ними.

Как я уже сказал выше, тег <frameset> является контейнером, и в качестве его элементов должны быть написаны строчки для каждой колонки (строки) при помощи тега <frame>. Вот пример описания:

<frame src="left.htm" name="menu" scrolling=no noresize>

  • src - URL странички, которая будет помещена во фрейм;
  • name - имя странички, по которому к ней можно будет обращаться;
  • scrolling, noresize, ... - параметры, управляющие поведением фрейма, - возможностью изменять пользователем ширину фрейма и управлять появлением полосы прокрутки в случае, если содержимое странички не помещается на экране.

Обратите внимание на параметр name - он является очень важным и позволяет нам манипулировать с фреймом. Как же это осуществляется? Внимательно рассмотрим файл left.htm, в котором содержится наше меню. В самом файле нет ничего необычного, а вот в написании ссылок на странички есть. Если присмотреться, то можно заметить, что добавился ещё один параметр target="content" - вот именно он и отвечает за то, в каком окне будет загружаться файл по ссылке:

<a href="topic_1.htm" target="content">topic #1</a>

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

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

  • _blank - открывает ссылку в новом окне;
  • _top - открывает ссылку на всё окно, если она находилась во фрейме. Другими словами, она разрушает структуру фрейма и загружает файл во всё окно;
  • _parent - открывает ссылку в родительском окне.

До сих пор в качестве элементов контейнера <frameset> мы использовали простые теги <frame>, но мы также можем использовать и контейнер <frameset>. В этом случае мы получаем т.н. вложенные фреймы. Вот пример:

<frameset rows="40,*">
<frame src="up.htm" name="logo" scrolling=no noresize>
<frameset cols="160,*">
<frame src="left.htm" name="menu" scrolling=no noresize>
<frame src="right.htm" name="content" scrolling=no noresize>
</frameset>
</frameset>

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

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

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

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

Кстати, рамку фрейма можно убрать, указав параметр frameborder=0.

И ещё одно! Для броузеров, которые не понимают фреймов, есть специальный тег <noframes>. Как раз он и определяет, что увидит пользователь с броузером, который не поддерживает фреймов. Обычно в этом месте либо размещают надпись, подобную той, что написал я, либо указывают список основных разделов сайта, чтобы человек всё-же смог просмотреть странички.

Dixi.


...::: JavaScript: полезные функции (часть IV) :::...

Вишенки

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

JavaScript:
полезные функции (часть IV)

Версия для распечатки
Версия
для распечатки
Сегодня мы разберёмся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript. Данная функция, кстати, может быть полезна и программистам на ASP.

Для чего это нужно?

Механизм баннеров позволяет оживить страничку и зрительно создать впечатление, что сайт все время меняется. Наиболее полезна эта функция будет для контент-сайтов - очень удобно создавать баннеры для конкретных статей и размещать их в локальной баннерной системе. Лучше всего, конечно, механизм прокрутки баннеров организовать на стороне сервера с применением Perl, PHP или ASP, но не у всех, к сожалению, есть доступ к CGI-скриптам. И, в этом случае, для решения задачи мы можем воспользоваться встроенными скриптовыми языками.

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

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

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

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

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

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

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

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

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

<script language="JavaScript" src="banners.js"></script>

А вот так, будет выглядеть содержимое файла 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/"
)

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

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

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

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

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

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

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

var rand = new Array(banners_show);

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>:

<script>
<!--
Show_Banner(1);
//-->
</script>

.......

<script>
<!--
Show_Banner(4);
//-->
</script>

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

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


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

Вишенки

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

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

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

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

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

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

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

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

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

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

  1. Новости компании
  2. Информация о фирме
  3. Услуги фирмы
  4. Каталог товаров
  5. Контактная информация

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

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

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

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

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

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

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

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

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

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

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

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


...::: JavaScript: полезные функции (часть V) :::...

Вишенки

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

JavaScript:
полезные функции (часть V)

Версия для распечатки
Версия
для распечатки
Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространённым. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание". Мне не кажется это название удачным, но, всё-же, давайте приступим.

Эффект может встречаться в различных вариантах, самые распространённые из которых - это:

  • подсвечивание пунктов меню
  • бегающий указатель
  • сменяющаяся картинка

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

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

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

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

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

<a href=""><img src="pic/pic-1.gif" name="pic1"></a><br>
<a href=""><img src="pic/pic-2.gif" name="pic2"></a><br>
<a href=""><img src="pic/pic-3.gif" name="pic3"></a>

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

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

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

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

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

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

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

<a href="page.htm" onMouseOver="change('pic1','pic/pic-1-on.gif');"
onMouseOut="change('pic1','pic/pic-1.gif');"><img
src="pic/pic-1.gif" name="pic1"></a>

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

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

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

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

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

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

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

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

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

Бегающий указатель

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

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

<img src="pic/pointer.gif" name="pic1"><a
href="news.htm" onmouseover="over('pic1');"
onmouseout="out('pic1');"><img src="pic/pic-1.gif"></a>

Обратите внимание на несколько особенностей. Во-первых, вместо одной функции смены изображения нам понадобятся две, т.к. действия, производимые при попадании курсора в область пункта меню и покидании её, слегка отличаются. Мы назовём эти функции соответственно over() и out(). Во-вторых, заметьте, что атрибут name тега <img> переместился из описания пункта меню в описание указателя - ведь теперь мы подсвечиваем не меню, а указатель!

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

function over(img) {
if (browser_ok == 'true') {
document.images[img].src = "pic/pointer-on.gif";
}
}

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

Осталось разобраться с отличиями, которые присущи третьему варианту эффекта, а именно...

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

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

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

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

<img src="pic/default.gif" name="pic">
...
<a href="page_1.htm" onmouseover="over('pic/image-1.gif');" onmouseout="out();"><img src="pic/pic-1.gif"></a><br>
<a href="page_2.htm" onmouseover="over('pic/image-2.gif');" onmouseout="out();"><img src="pic/pic-2.gif"></a><br>
<a href="page_3.htm" onmouseover="over('pic/image-3.gif');" onmouseout="out();"><img src="pic/pic-3.gif"></a>

Соответственно, придётся скорректировать и поведение функций. В функцию 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. Но подождите ещё немножко, т.к. осталось рассмотреть ещё один очень важный вопрос:

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

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

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

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

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

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). Если Вы к нему внимательно присмотритесь, то обнаружите, что почти вся необходимая графика грузится на первой страничке и открытие внутренних разделов сайта происходит почти мгновенно. В частности, оказываются уже загруженными фрагменты логотипа разных цветов и графика, составляющая пункты меню.

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

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


...::: JavaScript: полезные функции (часть VI) :::...

Вишенки

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

JavaScript:
полезные функции (часть VI)

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

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

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

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

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

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

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

Ну а как же всё-таки подготовить сайт с фреймами к правильной индексации? Как уже было сказано выше, проблема заключается в отсутствии на страничке-контейнере ссылок на основные разделы сайта. Значит, нам нужно просто добавить эти ссылки самим. И поместим мы их в секции <noframes></noframes>, которая, кстати, специально была придумана для таких случаев. Заметьте также, что этот способ позволяет нам сделать сайт доступным для броузеров, которые не поддерживают фреймы.

А вот и пример корректного кода, осуществляющего всё сказанное выше:

<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>

</html>

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

Решение проблемы с формированием
структуры фреймов

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

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

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

Использование же JavaScript даёт нам в руки гораздо более мощные средства и позволяет полностью сформировать всю фреймовую структуру и отобразить страничку в одном из фреймов.

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

<script language="JavaScript">
<!--
location.href="anotherpage.htm";
//-->
</script>

Свойство href объекта location содержит адрес текущей страницы, который, кстати, можно в любой момент прочитать. И если мы при помощи скрипта поместим в эту переменную адрес какой-либо другой странички, то броузер немедленно осуществит переход.

Второй приём - это передача скрипту параметров при помощи адресной строки (так называемый метод GET). Осуществляется это добавлением к адресу странички знака '?' (вопрос) и перечислением после него всех необходимых переменных и их значений. Если переменных несколько, то они отделяются друг от друга при помощи знака '&' (амперсанд). Вот несколько примеров передачи параметров посредством метода GET:

http://www.domain.com/page.htm?name=John&id=1986321
search.php?keyword=design&area=title&type=full
guestbook.asp?page=2

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

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

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

<script language="JavaScript">
<!--
location.href="index.htm?"+location.pathname;
//-->
</script>

Заметьте, что конструкция несколько сложнее, чем я описал выше. В качестве параметра адреса я использовал свойство pathname объекта location, которое содержит полный путь текущей странички от корня сайта (для любопытных - location.href - содержит абсолютный адрес странички, включая название протокола и имя домена).

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

<script language="JavaScript">
<!--
if (window.parent.frames.length == 0) {
location.href="index.htm?"+location.pathname;
}
//-->
</script>

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

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

<script language="JavaScript">
<!--
document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
document.write('<frame src=\"content.htm\" name=\"content\">');
document.write('</frameset>');
//-->
</script>

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

Для обработки переменных, передаваемых в адресной строке, JavaScript нам предоставляет свойство search объекта location (право, очень удобный объект - без его помощи мы не смогли бы сделать то, что делаем :). Данное свойство хранит в себе адрес строки запроса, которая располагается сразу после знака '?'. Т.е. оно содержит адрес нашей внутренней странички (!). Но использовать это значение пока рано, т.к. строка запроса содержит и начальный знак вопроса. Поэтому для начала нам необходимо его отрезать:

var string = location.search;
var current_page=string.substring (1, string.length);

А теперь я приведу полный, модифицированный вариант скрипта:

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
if (location.search == "") {
document.write('<frame src=\"content.htm\" name=\"content\">');
} else {
document.write('<frame src=\"' + current_page + '\" name=\"content\">');
}
document.write('</frameset>');
//-->
</script>

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

document.write('<frame src=\"' + current_page + '\" name=\"content\">');

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

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

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

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

Основной индексный файл мы формируем при помощи конструкций JavaScript. А что будет, если на сайт зайдёт человек с броузером, который не поддерживает JavaScript? В этом случае мы вообще ничего не увидим, ведь сформировать фреймы будет некому. Так что для разрешения этой проблемы мы воспользуемся тегами <noscript></noscript>, внутри которых разместим обычное описание фреймов.

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

<html>
<head>
<title>Пример документа с фреймами</title>
</head>

<script language="JavaScript">
<!--

var string = location.search;
var current_page=string.substring (1, string.length);

document.write('<frameset cols=\"180,*\">');
document.write('<frame src=\"menu.htm\" name=\"menu\">');
if (location.search == "") {
document.write('<frame src=\"content.htm\" name=\"content\">');
} else {
document.write('<frame src=\"' + current_page + '\" name=\"content\">');
}
document.write('</frameset>');

//-->
</script>

<noscript>

<frameset cols="180,*">
<frame src="menu.htm" name="menu">
<frame src="content.htm" name="content">
</frameset>

<noframes>
<a href="content.htm">Содержание сайта</a>
<a href="page_1.htm">Страница #1</a>
<a href="page_2.htm">Страница #2</a>
<a href="page_3.htm">Страница #3</a>
</noframes>

</noscript>

</html>

Как поставить ссылку на внутреннюю страничку?

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

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

А второй способ - опять же использование JavaScript, но он, к сожалению, ограничен только версиями Internet Explorer выше 5.0. По крайней мере, пока. Данный способ добавления странички в избранное я описывал раньше, поэтому не буду здесь повторяться. Те, кого это заинтересовало, могут прочитать об этом вот здесь.

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

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


...::: История про CSS (часть I) :::...

Вишенки

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

История про CSS (часть I)

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

Для чего нужны таблицы стилей?

Каскадные таблицы стилей, или CSS (от английского Cascading Style Sheets), являются следствием дальнейшего развития HTML и дают нам возможность перейти на следующий уровень представления информации. Таблицы стилей позволяют разделить смысловое содержимое странички и его оформление.

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

Однако с тех пор много чего изменилось, и стандарт HTML потерял первоначальную стройность. Вначале Netscape добавил "улучшенные теги", которые позволили более широко управлять внешним видом представляемой информации. Нововведение прижилось, и все расширения Netscape стали стандартом de facto. Потом точно также поступила Microsoft. Когда спохватились, то HTML представлял собой ужасную смесь логических и оформительских тегов, несовместимых расширений и полностью перестал отвечать первоначальной концепции - представлять информацию на любом устройстве независимо от его характеристик по выводу информации.

Тогда была предпринята широкомасштабная стандартизация. В результате чего на свет явился стандарт HTML 3.2. Он не был революционным, а лишь расставил по местам все нововведения и выработал общие рекомендации для производителей броузеров. Революционные изменения были введены в новом стандарте - HTML 4.0 или, как его стали называть, Dynamic HTML. В обращение были введены слои, таблицы стилей и универсальная объектная модель броузера.

В новом стандарте попытались вернуться к истокам концепции HTML. Четвёртая версия, как и первая, рекомендует создавать странички таким образом, чтобы они могли быть воспроизведены на любом устройстве - будь это 21" монитор или маленький чёрно-белый экран сотового телефона.

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

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

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

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

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

Подключение таблиц стилей

Для осуществления этой задачи мы можем воспользоваться одним из 3-х предлагаемых методов:

  • внешний файл
  • описание в секции заголовка
  • inline-описание

Начнём с самого простого, с так называемого inline-описания, или описания, встроенного в тег:

<p style="color:red; text-align:center;"> Этот текст переопределён стилем</p>

При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый лёгкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега. Этот способ не слишком отличается, к примеру, от прямого описания внешнего вида при помощи тега <font>.

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

При использовании этого метода описание стилей необходимо разместить в секции заголовка:

<head>
....
<style type="text/css">
<!--
.header { text-align : center; font-size : 27pt;}
.red { color : red; }
-->
</style>
</head>

Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

<p class=header>Этот текст написан стилем header<p>
<p class=red>Этот текст написан красным цветом<p>

Как видите, всё не так уж сложно. Главное - понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:

<style type="text/css">
<!--
p { text-align : center; font-size : 12pt;}
-->
</style>

Теперь весь текст, заключённый в теги <p></p>, будет выглядеть так, как определено данным стилем. Это очень удобно и позволяет легко адаптировать уже существующие странички к использованию стилей. Кроме того, это несколько уменьшает объём файла за счёт отсутствия лишних атрибутов class.

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

Каким же образом производится внедрение внешнего файла? Для начала создается стилевой файл с описанием всех нужных нам классов (mystyle.css):

.header { text-align : center; font-size : 27pt;}
.red { color : red; }
p { text-align : center; font-size : 12pt;}

А потом ссылка на него внедряется в документ при помощи тега <link>:

<head>
....
<link rel="stylesheet" type="text/css" href="css/mystyle.css" title="MyStyleSheet">
....
</head>

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

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

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


...::: История про CSS (Часть II) :::...

Вишенки

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

История про CSS (Часть II)

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

Каскадность стилей

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

  • использование отдельного стилевого файла и вставка его при помощи тега <link>
  • описание стиля в заголовке документа
  • применение стиля как параметра в теге.

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

Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

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

<style type="text/css">
<!--
a.link { text-decoration: none; color:red; }
-->
</style>
</head>

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

<a href="#"><span style="color: #000000;">Copyright (C) 1998-2001 Cherry-Design</span></a>

Сделали мы это при помощи параметра style, а он, как Вы помните, действует лишь в пределах того тега, в котором был определён. Что нам и нужно.

Вы наверняка обратили внимание, что в вышеприведённом примере я ввёл в обращение новый тег <span></span>. Он предназначен специально для таких случаев. Всё, что он делает, - это определяет некую область, к которой мы можем применить стиль. Это очень удобный тег, т.к. не вставляет ни до, ни после себя ненужных отбивок (т.е. пустое вертикальное пространство), как это делает тег <p>.

В каких тегах лучше определять стили посредством класса? Чаще всего для этого используется одна из следующих конструкций:

<p class="big">Что-то</p>
<td class="big">Что-то</td>
<div class="big">Что-то</div>
<span class="big">Что-то</span>

Тег <div> подобен <span>, но только с тем отличием, что делает до и после себя отбивку (точно так же, как и <p>). А вот стиль текста, которым набрано основное содержимое странички, лучше всего сделать переопределением тега <p>, а не определением отдельного класса.

И небольшое дополнение, связанное с корректным показом в обоих броузерах, - если Вы используете табличную вёрстку для дизайна сайта, то определять стиль основного текста нужно не только в теге <p>, но и в <td>, т.к. Netscape категорически отказывается наследовать стили, присвоенные до таблицы.

Разобравшись с каскадностью, давайте поговорим о синтаксисе.

Синтаксис CSS

Описание каждого класса делается при помощи конструкции, подобной этой:

.small { font-size: 9pt; }

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

.small { font-size: 9pt; color: #eeeeee; text-align: center; }

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

<p class=small>Накладываем стиль на этот текст</p>
<td class=small>Накладываем стиль на этот текст</td>

Раз есть универсальные классы, то, вероятно, существуют и какие-то другие? Всё правильно, ещё бывают так называемые теговые классы:

p.small { font-size: 9pt; }

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

<p class=small>Этот текст будет выведен стилем small</p>
<td class=small>А этот останется неизменным</td>

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

p, td { font-size: 9pt; color:green;}

Такой приём называется группировкой, и в данном случае мы определили и для <p>, и для <td> одинаковый размер и цвет текста.

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

Псевдоклассы

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

a { text-decoration: none; }
a:hover { text-decoration: underline; }

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

А вот и другой пример псевдокласса - определение буквицы в начале абзаца:

p:first-letter { font-size: 200%; font-weight: bold; }

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

Комментарии

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

/* Этот текст является комментарием */

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

Основные параметры CSS

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

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

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

Рассмотрим подробнее параметры, используемые для управления внешним видом текста и форматирования абзацев - как наиболее часто употребляемые.

Основные параметры шрифта

    font-weight: [bold|normal|number] - жирность шрифта
    font-style: [normal|italic|oblique] - наклон шрифта
    font-size: number - размер шрифта
    font-family: name - гарнитура шрифта
    color: number - цвет шрифта
    background-color: number - цвет подложки
    background: url - текстурная подложка

Основные параметры абзаца

    text-align: [left|right|center|justify] - выравнивание
    text-indent: number - отступ красной строки
    line-height: number - интерлиньяж
    letter-spacing: number - трекинг

    padding-left: number - отступ от текста слева
    padding-right: number - отступ от текста справа
    padding-top: number - отступ от текста сверху
    padding-bottom: number - отступ от текста снизу

    margin-left: number - отступ от границы слева
    margin-right: number - отступ от границы справа
    margin-top: number - отступ от границы сверху
    margin-bottom: number - отступ от границы снизу

Единицы измерения в CSS

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

  • относительный размер в процентах (%)
  • относительный размер при помощи словесного описания (larger, smaller, xx-small, x-small, small, medium, large, x-large, xx-large)
  • абсолютный размер в типографских единицах - размер может задаваться в пунктах (pt), пиках (pc), пикселях (px), средней шириной буквы "m" (em), средней шириной буквы "x" (eх)
  • абсолютный размер в стандартных единицах длины - размер может задаваться в сантиметрах (cm), миллиметрах (mm), дюймах (in)
  • абсолютный в пикселях (px)

Задание цвета в CSS

Цвет для тех свойств, где это нужно, может быть определён одним из трёх способов:

  • при помощи названия цвета: yellow, red, green, grey,..
  • шестнадцатеричным заданием цвета в формате #RRGGBB: #ff0000, #883490, #ffffff,..
  • десятичным заданием составляющих цвета в формате rgb(red, green, blue): rgb(255,0,0), rgb(100,23,78),..

И закончим эту статью несколькими примерами описания таблицы стилей:

.epigraph {
font-size: 12pt;
font-style: italic;
text-align: right;
color: rgb(127,127,0);
}

p.big {
font-size: 16px;
font-weight: bold;
color: #ff0000;
}

.menu {
font-weight: bold;
font-size: 9pt;
font-family: arial, helvetica, sans-serif;
}

a:hover {
color: #b63a3a;
text-decoration: none;
}

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


...::: Рисуем баннеры :::...

Вишенки

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

Рисуем баннеры

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

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

При создании сайта необходимо учитывать наличие баннеров и соответственно выстраивать дизайн.

На просторах Рунета популярны несколько типоразмеров баннеров, самые распространенные из которых - это 468x60, 100x100 и 88x31 (обычно называемые кнопками). Баннеры остальных размеров применяются гораздо реже и обычно только для локальных баннерных сетей (125x125, ушки на Lenta.Ru и т.п.)

Кроме отличия в размерах, баннеры могут быть разного типа:

  • графические
  • html-баннеры
  • flash-баннеры

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

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

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

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

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

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

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

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

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

При измерении эффективности баннеров пользуются термином CTR - измеряемого в процентах и выражающего отношение числа показов баннера к числу нажатий на него. Это не единственный показатель, но наиболее известный. Для обычных баннеров он составляет от 0.5% до 1.5%. Большие значения присущи обычно только порноиндустрии (там может доходить и до 15%).

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

Технические соображения

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

Художественные соображения

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

Что такое загадка в дизайне? Вы когда-нибудь видели такие картины, вглядываясь в которые снова и снова ты открываешь для себя что-нибудь новенькое? Это тот самый случай. Дизайнер как бы придумывает загадку, а потом ее "шифрует", зритель же постепенно открывает эти загадки (в большинстве случаев на подсознательном уровне), а в качестве разгадки чаще всего выступает слоган. Если мы используем анимированный GIF, то возможностей больше, и мы можем разбить загадку на несколько кадров и приоткрывать её постепенно...

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

  1. Слогана
  2. Визуала, иллюстрирующего слоган (вступающего в игру со слоганом)
  3. Цветовой гаммы (для имиджевых баннеров цвета часто совпадают с цветом рекламируемого сайта)
  4. Дополнительного текста (адрес странички, пояснительный текст)
  5. Дополнительных элементов оформления, подчёркивающих основную мысль и стиль баннера. В случае имиджевых баннеров очень удобно сделать один шаблон и, подставляя разные слоганы и визуалы, получить целую серию баннеров.

Сделать эффективный и красивый баннер не так легко и может запросто занять несколько часов. Запомните одно правило - если созданный баннер Вам не нравится, то, вряд ли он понравится другим! Впрочем, это правило относится вообще к любой творческой деятельности. ;)

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

  1. Для начала необходимо выяснить, какую цель мы преследуем, создавая данный баннер. А для этого зададим себе несколько вопросов о том, что рекламирует этот баннер и кого он может потенциально заинтересовать. Поставим себя на место посетителя, который ищет рекламируемый нами сайт, и спросим себя, что бы мы хотели увидеть на баннере?
  2. Получив ответы на предыдущие вопросы, необходимо сформулировать идею или сценарий (это уже в случае с анимированным баннером).
  3. Наконец, подходим к придумыванию слогана, который наиболее точно выразит нашу идею или сценарий (придумать нужно обязательно несколько вариантов - минимум 10-15). Остаемся на этом этапе до тех пор, пока придуманный слоган нам самим не понравится. :)
  4. Графическая часть - вот теперь можно запускать PhotoShop и реализовывать идею в картинке. Подбирать из клипарта или самому рисовать подходящий под слоган визуал.
  5. Делаем первую версию баннера, потом ещё одну, и ещё одну, и ещё одну, пока ... не начнёт очень сильно нравиться.
  6. Окончательно оптимизируем баннер.

<< Предыдущая статья


Cherry-News ::: Статьи ::: Падал новогодний снег ::: Часть 1

cherry-news

Rambler's Top100 свежий выпуск : архив : статьи : утилиты : опросы : рассылка : отзывы : о проекте

8535 (+14)

21 декабря 2004 года

Падал новогодний снег

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

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

Часть I

Предварительная подготовка и создание заготовки открытки на Flash

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

Ниже я буду подробно объяснять, как написать этот скрипт, используя "Flash MX 2004", но общие принципы остаются неизменными, и Вы можете достаточно легко модифицировать его для других языков, скажем для JavaScript. Для облегчения программирования и переносимости кода программа на ActionScript будет вынесена в отдельный файл и подключена к основному мультфильму при помощи директивы #include.

Рисуем новогоднюю открытку

Создайте три слоя-дорожки на временной шкале
Перед тем как переходить непосредственно к программированию, давайте нарисуем нашу открытку. Запустите Flash и создайте новый документ с размерами 640x300 пикселей. В настройках мультфильма выберите версию ActionScript 1.0. Теперь на временной шкале (Timeline) создайте следующие слои для нашего мультфильма:

  • actions - здесь будут размещаться скрипты, управляющие мультфильмом
  • snow - здесь будут размещаться объекты, участвующие в создании снегопада
  • card - и наконец, в этом слое будет размещаться сама открытка

Выделив первый кадр в слое actions и открыв панель "Actions", напишите в нем следующий код:

// Подключаем внешние скрипты
#include "snow.as"

// Инициализируем снежинки
init_snowflakes();

// Останавливаем проигрывание мультфильма
stop();

Перетащите снежинку точно в левый верхний угол мультфильма и дайте экземпляру имя "snow"
Теперь переходим в первый кадр слоя snow. Сейчас нам нужно будет нарисовать снежинку и сохранить ее в библиотеке как мувиклип с именем snowflake. Проще всего нарисовать снежинку кистью от руки - просто нарисуйте неровный круг белым цветом (снежные хлопья у нас ведь белые, правда?) и уменьшите его до размеров 10x10 пикселов. Границы у снежинки быть не должно. После того как снежинка сохранена в библиотеке, удалите ее со сцены.

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

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

onClipEvent(enterFrame) {

    // Перерисовываем снежинки
    _root.draw_snowflakes();
}

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

Вот такая вот открытка получилась у меня

Осталось ее сохранить. Так как у нас будет несколько файлов в проекте, то лучше всего создать отдельную папку "snow" и уже в ней сохранить открытку под именем snow.fla. Ура, готово! С предварительной подготовкой закончено, и в следующей части переходим к сути, т.е. к программированию и разбору алгоритма поведения снежинок.

Часть 1 - ее Вы читаете сейчас

Кнопки

Доска объявлений "On-board" Кнопка проекта "Cherry-News"

Свои мнения, пожелания и вопросы по выпускам Вы можете присылать по адресу cherry-news@yandex.ru.
Я оставляю за собой право цитировать письма, пришедшие по вышеуказанному адресу.
Copyright © 2001-2005 Михаил Мельников. Перепечатка без разрешения запрещена.


...::: Web-studio "Cherry-Design" | Статьи по web-дизайну :::...

Вишенки

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

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

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

33. Рисуем баннеры - Посвятим-ка мы немного времени баннерам и поразмышляем на тему: как сделать баннер более эффективным? Поговорим о слоганах и воздействии баннера на читателя.

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

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

30. JavaScript: полезные функции (часть VI) - Немного специфическая статья и посвящена она решению проблем, возникающих при использовании на сайте фреймов. И, в частности, проблеме индексации таких сайтов поисковыми роботами и формированию фреймовой структуры при обращении к одной из внутренних страничек.

29. JavaScript: полезные функции (часть V) - Эффект, который мы сейчас рассмотрим, является, пожалуй, самым распространенным. И заключается он в смене изображения при наведении на него мышкой. Часто можно слышать английское название эффекта - RollOver, что обычно переводят как "перекатывание".

28. С чего начинается сайт? - Как лучше всего организовать работу по созданию сайта? Чему следует уделить больше внимания? И с чего же все-таки следует начать?

27. JavaScript: полезные функции (часть IV) - Сегодня мы разберемся с тем, как организовать на страничке локальную баннерную систему, пользуясь только средствами JavaScript.

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

25. JavaScript: полезные функции (часть III) - С этой статьи мы начнем разбираться с более сложными и функционально-законченными скриптами. И начнем с написания универсальной функции проверки формы перед отсылкой на сервер.

24. JavaScript: полезные функции (часть II) - Несколько небольших и полезных Java-скриптов, позволяющих добавить к функциональности сайта некоторые приятные мелочи.

23. JavaScript: полезные функции (часть I) - Продолжаем разговор о применении скриптов на web-страничках. И начнем мы, пожалуй, с написания некоторых функций, которые нам впоследствии очень пригодятся.

22. JavaScript и объектная модель - Скриптовые языки в некотором роде перевернули мир, и именно благодаря им появился DHTML, который позволяет делать со страничкой практически что угодно.

21. Как работает формат JPEG? - Знание некоторых принципов возмещает незнание многих фактов. Сегодня мы поговорим о технологии сжатия JPEG и о том, за счет чего достигаются столь сильные степени сжатия.

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

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

18. Как правильно регистрировать сайт? - Итак, Вы сделали первую версию своего сайта и даже вывесили его в Internet, но через некоторое время Вы заметите, что на него практически никто не ходит, за исключением Вас и изредка Ваших друзей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


...::: Web-studio "Cherry-Design" | Articles about web-design :::...

Вишенки

Articles about web-design

Russian version
of articles
I brought some articles written by me with purpose of sharing some experience in building websites and some interesting things observed on the web. They were written for beginning web designers and would be useful to someone who want to transform his home pages to a developed web site, for web developers to look at expertise of others, and just for inquisitive persons who always want to know what's under the hood.

Original articles are in russian Below you can read some articles translated in english by Viktor Elfimoff.

33. We're draw banners - we'll spend a little time on advertising banner and talk how to make banner more effective, consider impact of the banner on the visitor.

28. What does site begin with? - Probably, this article should be the first, we'll discuss the beginning of creating web site and basic steps, which should be undertaken prior to the beginning work on sketches of the site.

22. JavaScript and object model - script languages in some sense have turned the world, dynamic web has appeared, which allows to do practically everything.

8. Optimization in GIF format - GIF format differs from JPG and uses other methods of compression.

7. Optimization in JPG format - you have a nice photo, and if it is loaded fast, then others can evaluate it too.

6. Picture is worth a thousand words - someone will be remembered by his mind, but dress makes first impression.

5. What is a stylish site? - why one page catches, and an other you want to leave right away.

4. Information is the basis of Internet - the very first question which can be presented to a web site: what are you up to?

3. Software for web-design - to create professional web pages you should professionally study some professional software.

1. How to create attractive website? - some common speculations, which, nevertheless, have rigid soil.


...::: Web-studio "Cherry-Design" | Контактная информация :::...

Вишенки

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

Контактная информация

Вот Вы и добрались до странички с контактной информацией :-) Ну что же, если Вы желаете о чем-то спросить, поделиться информацией или заказать изготовление web-сайта, то пишите по адресу
cherry-design@mail.ru. Если у Вас с этим адресом возникнут проблемы, то можете воспользоваться вторым: cherry-design@newmail.ru

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

Ваше имя *

Должность

Компания

Страна

Город

E-mail *

URL сайта

Чтобы Вы хотели узнать? *


...::: Web-studio "Cherry-Design" | Глоссарий web-терминов :::...

Вишенки

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

Глоссарий web-терминов

CGI
Cookie
E-mail
FAQ
FTP
GIF
HTML
HTTP
IP
JAVA
JAVAScript
JPEG
Perl
Plug-In
PNG
RealAudio, RealVideo
Script
Tag
URL
VRML
Броузер
Виртуальные сервера
Глубина цвета
Доменное имя
Клиент
Гостевая книга
Кодовая таблица
Поисковая система
Разрешение экрана
Сервер
Счетчик посещений
Фреймы
Ниже приведена расшифровка некоторых терминов, применяемых в WEB-дизайне и в Internet. Список не претендует на полноту и предназначен, в основном, для тех, кто пока еще плохо ориентируется в Internet-технологиях.

  • CGI (Common Gateway Interface) - интерфейс, позволяющий взаимодействовать программам клиента с программами, запущенными на сервере. Подробнее...

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

  • E-mail (Электронная почта) - основной способ связи в Internet. Каждый абонент электронной почты имеет свой личный почтовый адрес, состоящий из имени пользователя в системе и названия компьютера, на котором запущен почтовый сервер, разделенных знаком @. С точки зрения пользователя, электронная почта представляет собой программу, позволяющую отправлять сообщения, прямо набирая их на компьютере, и получать письма, отправленные другими.

  • FAQ (Frequently Asked Questions) - список часто задаваемых вопросов по какой-то определенной теме. Составляется либо отдельным человеком, либо группой людей, как правило, специалистами в данной области. Обычно их можно найти на WEB-сайтах и в группах новостей. Русский вариант - ЧаВо (Часто задаваемые вопросы и ответы на них).

  • FTP (File Transfer Protocol) - протокол передачи файлов, а также программа, его реализующая. Протокол был разработан для передачи файлов между компьютерами, использующими сеть на основе TCP/IP, в том числе и в Internet. Для доступа к некоторой информации посредством FTP на компьютере, c которого осуществляют доступ, должен быть установлен т.н. FTP-клиент, а на другом, соответственно, FTP-сервер. В WEB-практике FTP-доступ используется для доступа к страничкам WEB-сайта, обычно расположенным на сервере провайдера.

  • GIF (Graphic Interchange Format) - наиболее распространенный в Internet графический формат. Позволяет хранить изображения, имеющие до 256 цветов, поддерживает прозрачность, анимацию, чересстрочную развертку, возможность сохранения в одном файле несколько изображений. Подробнее...

  • HTML (HyperText Markup Language) - язык разметки гипертекстовых документов - основной способ хранения и передачи документов в Internet. Представляет собой обычный текстовый файл. В качестве элементов форматирования используются так называемые тэги (tag). Главной особенностью HTML является способность использовать гиперсвязи (links), благодаря которым возможны ссылки на другие документы, как локальные, так и находящиеся на другом конце земного шара, а также внедрение в документы изображений, звука, видео и т.д.

  • HTTP (Hyper Text Transfer Protocol) - протокол передачи файлов, подобный FTP, но со встроенным идентификатором типа передаваемой информации (MIME - формат). Главным образом используется в WWW.

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

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

  • JAVAScript - язык программирования, основанный на объектном представлении броузера. Текст программы встроен непосредственно в HTML-документ и интерпретируется самим броузером. Применяется в основном для создания таких эффектов, как: бегущая строка, рисунки, изменяющие свой вид при подведении курсора и т.д. Подробнее...

  • JPEG (Joint Photographic Expert Group) - второй по популярности графический формат для использования в Internet. Для хранения использует метод сжатия с потерей информации, благодаря чему позволяет достигать фантастических уровней сжатия. Применяется в основном для хранения высококачественных фотографий. Подробнее...

  • Perl - язык программирования. Программы, написанные на Perl, запускаются на стороне сервера. В основном применяется на UNIX-ориентированных WEB-серверах. Применяется для обеспечения доступа к базам данным, создания динамических страничек и т.п.

  • Plug-In (Встраиваемый модуль) - программа, расширяющая возможности какого-нибудь программного пакета. Обычно встраивается в тело пакета и вызывается непосредственно из программы, для которой предназначен. Например: Kai’s Power Tools - Plug-In для графического редактора Photoshop, добавляющий некоторые специальные эффекты. Или: Cosmo Player: Plug-In для броузера Netscape Navigator, позволяющий просматривать VRML-миры.

  • PNG (Portable Network Graphic) - новый графический формат (читается: пинг), введенный для замены формата GIF после того, как с последним возникли патентные проблемы. Так как формат новый, то поддерживается очень небольшим количеством броузеров и лишь некоторыми видами программного обеспечения. Практически не распространен в WEB. В отличие от GIF, позволяет хранить изображения, имеющие глубину цвета до 64 бит на пиксел, поддерживает отдельный альфа-канал, несколько улучшенное сжатие.

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

  • Script - программа, написанная на каком-либо языке программирования для взаимодействия клиента с сервером. Например: Script на Perl для подсчета количества посещений.

  • Tag (Тэг) - элемент НТМЛ, представляет из себя текст, заключенный в угловые скобки <>, является активным элементом, изменяющим представление следующей за ним информации. Может иметь некоторые атрибуты. Обычно имеются два тэга - открывающий и закрывающий. Например <b> и </b> - данные тэги описывают текст, находящийся между ними, как полужирный.

  • URL (Uniform Resource Locator) - универсальный адрес ресурса - уникальное имя, однозначно определяющее документ в сети Internet. Наиболее широко используется в WEB. Когда Вы хотите cослаться на какой-то документ в сети, то пользуетесь стандартным соглашением по написанию URL, например http://www.microsoft.com/index.htm.

  • VRML (Virtual Reality Modeling Language) - язык моделирования виртуальной реальности. Подобен HTML, только описывает графические трехмерные объекты путем перечисления используемых в сцене примитивов и их координат. Позволяет создавать сложные сцены с наложением текстур, установкой источников цвета и камер. Сам файл представляет собой либо обычный ASCII-файл, либо сжатый бинарный.

  • Броузер (Browser) - программа, позволяющая просматривать ресурсы Всемирной паутины. Подробнее...

  • Виртуальные сервера (Virtual Servers) - используются для присвоения одному компьютеру нескольких доменных имен. Например, microsoft.com, www.microsoft.com, ftp.microsoft.com - это виртуальные адреса одного и того же компьютера. Обычно реальный WEB-сервер поддерживает несколько разных виртуальных серверов.

  • Глубина цвета (Color Depth) - количество бит, приходящихся на один пиксел (bpp); чем больше это число, тем больше цветов может использовать изображение. Наиболее популярны следующие разрешения: 8bpp (256 цветов), 16bpp (65536 цветов), 24bpp (более 16,7 млн. цветов). Чем больше глубина цвета, тем больше размер изображения.

  • Доменное имя (Domain Name) - уникальный идентификатор, который назначается определенному IP-адресу. Доменное имя дает возможность обращаться к компьютеру по имени типа www.company.com, вместо запоминания его числового эквивалента.

  • Клиент (Client) - компьютер, с которого осуществляется доступ к серверу с целью обмена или получения информации.

  • Гостевая книга (Guest Book) - программа, запущенная на стороне сервера. Позволяет посетителям высказать свое мнение о страничках и послать его авторам. Некоторые странички позволяют ознакомиться с комментариями других посетителей.

  • Кодовая таблица - таблица соответствий символов и их положений в таблице. Исторически сложилось так, что в России есть несколько несовместимых кодировок, т.е. одинаковые символы имеют различные коды в разных кодировках. Это приводит к тому, что при просмотре страничек не в той кодировке, на которую настроен броузер, экран засоряется непонятными символами. В России распространены следующие кодировки: WIN1251 (Windows), KOI-8 (Unix), СP866(DOS), Macintosh, ISO-8859-5 (Unix). Подробнее...

  • Поисковая система (Search Engine) - система, предназначенная для поиска и доставки информации. Организована с целью каталогизации информации. Обычно использует индексацию HTML-страниц, чтобы в дальнейшем было легко находить данную информацию. Подробнее...

  • Разрешение экрана (Screen Resolution) - размер экрана монитора по ширине и высоте в пикселах. Самыми популярными являются разрешения 640x480, 800x600, 1024x768. Чем более высокое разрешение имеет компьютер, тем более качественное изображение он способен выводить на экран.

  • Сервер (Server) - компьютерная система, к которой возможен удаленный доступ с целью обмена информацией.

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

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


...::: Web-studio "Cherry-Design" | Полезные ссылки :::...

Вишенки

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

Полезные ссылки

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

1. Российские web-дизайнерские студии - краткие описания с комментариями.

2. Программы для web-дизайнера - джентльменский набор :), применяемый мною при изготовлении web-сайтов (HTML-редакторы, GIF-аниматоры, полезные утилиты).

3. Странички посвященные web-дизайну - документация, приемы работы, советы,...

4. Ресурсы по JavaScript и DHTML - учебники, статьи по созданию кросс-броузерных страничек, архивы скриптов.

5. Ссылки на cайты, посвященные ASP - статьи для начинающих, справочники по ASP, VBScript, JavaScript, ADO, SQL, IIS, архивы бесплатных ASP-приложений и компонентов.

6. Web-promotion (или раскрутка сайта) - полезные советы по раскрутке сайта, баннерообменным сетям, рекламным компаниям и т.д.

7. Поисковые системы и каталоги - самые популярные поисковые системы и Internet-каталоги.

8. Архивы фотографий - сайты, предоставляющие бесплатные фотографии, именно фотографии, а не готовые кнопки, буллеты и т.п.

9. Странички, посвященные работе с PhotoShop - приемы работы, полезные эффекты, описания фильтров и еще много чего.

10. Архивы программ - ShareWare, FreeWare, Demo-версии программ, утилиты и все, чего Ваша душа пожелает :).

11. Сайты о шрифтах - различная информация, посвященная шрифтам: история возникновения, типы шрифтов, особенности применения в web-дизайне, шрифтовые архивы.

12. Бесплатный хостинг, E-mail, доменные имена - избранные адреса страничек, предоставляющих данные услуги. Ссылки отсортированы по качеству, чем выше, тем лучше.

13. Разное - полезные для web-дизайнера ссылки, по разным причинам не вошедшие в другие разделы.


...::: Web-studio "Cherry-Design" | Новости сайта :::...

Вишенки

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

Новости сайта

Рассылка
"Cherry-News"
События 1999, 2000, 2001, 2002, 2003 и 2004 года
Пролетели очередные 12 месяцев, и настал новый 2005 год, а значит, страничка с новостями опять начнется с чистого листа и что на ней появится, Вы сможете узнать, иногда заглядывая на нее. Или просто подпишитесь на рассылку, тогда новости сами будут к Вам приходить.

2 сентября 2005 года
Новая работа. Авторские курсы "Cherry-Courses". Мой новый, на этот раз коммерческий, проект совместно с Ленинградским областным институтом развития образования (сокращенно ЛОИРО). Учебные курсы по ряду компьютерных дисциплин.Подробнее...

1 сентября 2005 года
Обои-календарь на сентябрь 2005 года. Для того чтобы установить их, выберите картинку с нужным Вам разрешением и после ее полной загрузки, щелкните правой кнопкой мышки. Из ниспадающего меню выберите команду "Сделать рисунком рабочего стола". Полный набор календариков в разделе "Календарь на десктоп!"

>> 800x600 >> 1024x768 >> 1280x960 >> 1600x1200

Обои-календарь на Сентябрь 2005 года

1 августа 2005 года
Обои-календарь на август 2005 года. Подробная информация в разделе "Календарь на десктоп!"

5 июля 2005 года
Обои-календарь на июль 2005 года. Подробная информация в разделе "Календарь на десктоп!"

1 июня 2005 года
Обои-календарь на июнь 2005 года. Подробная информация в разделе "Календарь на десктоп!"

7 мая 2005 года
Обои-календарь на май 2005 года. Подробная информация в разделе "Календарь на десктоп!"

1 апреля 2005 года
Обои-календарь на апрель 2005 года. Подробная информация в разделе "Календарь на десктоп!"

3 марта 2005 года
Обои-календарь на март 2005 года. Подробная информация в разделе "Календарь на десктоп!"

12 февраля 2005 года
Пополнение в музее дизайна. В архив ушли сайт благотворительного фонда "Дети Отечества" и сайт международного фестиваля "Поколение XXI". Справделивости ради, стоит сказать, что сайты уже достаточно давно не обновлялись владельцами, а теперь они уже окончательно исчезли из сети. Теперь бывший дизайн можно посмотреть только в моем музее. Подробнее....

2 февраля 2005 года
Обои-календарь на февраль 2005 года. Подробная информация в разделе "Календарь на десктоп!"

12 января 2005 года
Обои-календарь на январь 2005 года. Подробная информация в разделе "Календарь на десктоп!"


...::: Web-studio "Cherry-Design" | Услуги студии :::...

Вишенки

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

Услуги студии

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

Как делаются web-сайты?

Процесс создания web-сайта многоступенчатый и, как правило, состоит из следующих шагов:

  • Сбор и обработка информации, выявление целей и задач сайта. Для кого он будет предназначен в первую очередь? Какую информацию имеет смысл помещать в Internet? Насколько часто будет обновляться информация?..

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

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

  • Изготовление макета и проверка удобства навигации и общего впечатления от сайта.

  • Верстка страниц в HTML-код, с попутной обработкой фотографий и правкой текста.

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

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

  • Выбор места для размещения сайта (хостинг) и непосредственно его размещение.

  • Шаги, направленные на раскрутку сайта: регистрация в поисковых системах, изготовление и размещение рекламных баннеров, обмен ссылками с родственными сайтами и т.д.

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

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

Как долго это происходит?

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

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

Сколько это стоит?

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

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

Спасибо за внимание! :)


...::: Web-studio "Cherry-Design" | Готовые работы :::...

Вишенки

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

Готовые работы

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

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

"Yuko-Travel" - заметки путешественника
Если Вас интересуют дальние страны и есть желание путешествовать, то этот сайт, наверняка, будет Вам интересен! Заметки и общие впечатления о путешествиях в разные страны: Европа и Соединенные Штаты Америки, Чили и Антарктика, Аляска и Чукотка...

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

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

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

Интернет-обозрение "Cherry-News"
Один из моих некоммерческих проектов. Абсолютно нерегулярные заметки, посвященные web-дизайну. Статьи по интернет-технологиям, общим принципам дизайна, программированию на PHP и JavaScript. Обзоры полезных программ и интересных сайтов.

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

Фотогалерея "Cherry.Gallery"
Некоммерческий проект. Моя собственная виртуальная фотогалерея с разбивкой по категориям и расширенным набором возможностей для просмотра фотографий.

Туристическое агентство "Russian-Travel"
Организация туров из любой точки мира в Москву и Санкт-Петербург - для небольших групп и тех, кто предпочитает путешествовать в одиночку.

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

Офисный центр "GOLDEX"
Компаниям нужны офисы, а крупным компаниям крупные офисы и желательно в центре города. А где же их взять? Вот тут на помощь и приходят офисные или бизнес-центры, которые сдают офисы в аренду и предоставляют все необходимые услуги для ведения бизнеса.

Виртуальные открытки "Cherry-Cards"
Некоммерческий проект студии. Основной особенностью и обязательным требованием является использование только авторских работ при создании открыток.

Доска объявлений "On-board"
Здесь Вы можете совершенно бесплатно, т.е. даром :), разместить свое объявление в любой из 8 доступных категорий: работа, недвижимость, автомобили, аудио и видео, компьютеры, знакомства, услуги, разное.

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

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

Магнитогорский театр куклы и актера "Буратино"
Вся наша жизнь - театр! В том числе и кукольный ;) Тем более, если это Магнитогорский театр куклы и актера "Буратино". А почему такое странное название? Куклы и актера? Почему не просто кукольный театр? А вот сходите, там все и узнаете.