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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

CD-ROM

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

цветовая схема web-сайта - она начинается с выбора тех трех цветов страницы, которые используются для представления обычного текста, ссылок и посещенных ссылок. Все эти параметры указываются в тэге <body>. Ниже, для примера, приведена строчка, задающая цвета на этих страничках: <body bgcolor="#669900" text="#333333" link="#669900" vlink="#666666" alink="#000000">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

//--> </script>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

_Footer.shtml

</body> </html>

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

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

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

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

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

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

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

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

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

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

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

function SendForm() {

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

return true; }

//-->

</script>

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

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

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, что свидетельствует об успешной проверке.

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

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

Для генерации случайного числа мы воспользуемся 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)

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

_Header.shtml

Хорошая видеокарта

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

Каскадные таблицы стилей или 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">



</style>

</head>

Теперь эти стили можно применять в любом месте html-кода. Для этого используется следующая конструкция:

<p class=header>Этот текст написан стилем header<p>

<p class=red>Этот текст написан красным цветом<p>

Как видите, все не так уж сложно. Главное понять основные принципы. Кроме определения новых классов мы также имеем возможность переопределять стандартные теги. Например, тег <p>:

<style type="text/css">



</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)

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

Каскадность стилей

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

использование отдельного стилевого файла и вставка его при помощи тега <link> описание стиля в заголовке документа применения стиля как параметра в теге.

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

Например, мы определили во внешнем стилевом файле, что текст в теге <p> должен быть написан при помощи шрифта высотой 10 пунктов. Но если в заголовке странички мы дополнительно укажем, что тот же текст в теге <p> должен быть написан шрифтом в 12 пунктов, то текст будет выведен именно таким кеглем - т.е. стиль в заголовке странички переопределил стиль во внешнем файле.

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

<!--

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, который, кстати, содержит и прекрасный справочник свойств.

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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



</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">



</script>

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

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

<script language="JavaScript">



</script>

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

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

<script language="JavaScript">



</script>

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

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

var string = location.search;

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

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

<script language="JavaScript">



</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">



</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. По крайней мере, пока. Данный способ добавления странички в избранное я описывал раньше, поэтому не буду здесь повторяться. Те, кого это заинтересовало, могут прочитать об этом вот здесь.

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

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

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

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

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

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

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

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

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

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

Использование тэга <marquee> - нежелательно точно по тем же причинам, что и у тэга <blink>.

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

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

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь сконфигурируем скрипт. Опуская несущественные для нас детали, листинг нашего скрипта можно представить так: #!/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, но и много других полезных скриптов. В этой статье я хотел просто показать, как применять готовые скрипты для нужд своего сайта, и поэтому опустил все несущественные детали и остановился на рассмотрении практических вопросов.

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

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

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

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

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

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

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

</html>

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

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

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

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

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

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

Некоторые специальные программы

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

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

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

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

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

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

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

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

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

Mike Melnikov (cherry-design@mail.ru)

Web-studio "Cherry-Design"

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

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

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

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

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

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

Объем памяти => 32M

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

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

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

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

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

</form>

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

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

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

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

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

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

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

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

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

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