25 уроков web-дизайна

Архив

Урок второй
Таблицы - это не то, что вы подумали

Итак, вы освоили какой-либо из HTML-редакторов, изучили язык HTML. Значит ли это, что вы сможете создавать красивые страницы? Отнюдь. Дело в том, что HTML обладает весьма существенным недостатком: он не позволяет разместить текст или картинку на странице так, как вам хочется. Один и тот же текст при разных экранных разрешениях будет выглядеть по-разному. Например, при разрешении 800х600 он может занять одну строчку, а при 640х480 - две. А если учесть, что разные браузеры на разных компьютерах используют различные шрифты...

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

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

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

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

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

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

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

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



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

Пример первый. Выворотка

Светлый текст на темном фоне - это очень эффектно

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

Пример второй. "Большая" графика



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

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

Урок третий
Немного о графике

Вы уже знаете, что HTML-файл включает в себя текст и графику. Впрочем, графика не является частью страницы, HTML только содержит ссылку, показывающую, где лежит файл, из которого надо взять графическое изображение и вставить в это место текста. Ссылsrc="/printimages/305src="/printimages/305src="/printimages/305-306/еет вид <IMG src="/printimages/305-306/ИМЯ ФАЙЛА" ALT="АЛЬТЕРНАТИВНЫЙ ТЕКСТ">. В параметре "Имя файла" указывается его название и путь доступа к нему, если файл находится на том же сервере, что и HTML-страница. Однако здесь можно указать и любой сетевой URL, то есть вы можете взять графический файл с любой машины в Сети и вставить его в вашу страницу. "Альтернативный текст" - это необязательный параметр; он нужен, если вашу страницу будут смотреть при помощи браузера, в котором отключен показ графики. В этом случае вместо картинки будет показан текст, который вы ввели в качестве "альтернативного". Картинка будет показана в масштабе 1:1, то есть того размера, в каком она хранится в исходном файле. Однако вы можете задать любой размер показа, вставив дополнительные параметры width= "количество пикселов" и height= "количество пикселов" после параметра "ИМЯ ФАЙЛА". Но злоупотреблять этим не следует, поскольку увеличение картинки резко снижает ее качество; уменьшать же ее не имеет смысла, так как размер файла при этом не уменьшится, и, согласитесь, - нерационально, когда маленькая картинка грузится так же долго, как и большая.

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

Далее. Для показа на вашей страничке годится графический файл далеко не любого формата. Стандартными являются три формата графики: GIF, JPG и PNG.

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

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

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

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

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

Не забывайте, что:

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

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

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

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

Имейте в виду, что существует множество методов преобразования фотоизображения до 256 цветов, умещающихся в GIF. Причем не всегда можно заранее сказать, как поведет себя то или иное изображение при преобразовании его тем или иным методом. Бывает, что менее "качественный" метод неожиданно дает лучший результат. Так что стоит попробовать разные способы и посмотреть, что получилось. Рекомендую вам программу Paint Shop Pro, которую можно скачать с сайта www.tucows.com. Она позволяет явно задавать методы преобразования, а само преобразование выполняет превосходно. Немаловажно и то, что Paint Shop Pro дает очень небольшие искажения при сохранении файлов в формате JPG. По своим возможностям она близка к знаменитому Photoshop, но намного компактнее и шустрее.

Есть и еще одно обстоятельство, которое надо иметь в виду при работе с GIF-файлами. Они поддаются оптимизации. Дело в том, что в этих файлах часто хранится служебная информация. Для показа изображения она не нужна, то есть является, по сути, "лишней". Это могут быть "авторские" метки программы, создавшей файл, "лишние" цвета в палитре, которые реально не используются в изображении, и многое другое. При помощи специальных программ служебную информацию можно удалить и тем самым довольно сильно уменьшить размер файла. В частности, эту операцию можно проделать при помощи программы Animagic GIF. Кроме того, вы можете оптимизировать графику, которая уже находится на вашей странице. Инструкции можно найти на www.webreference.com и www.gifwizard.com.

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

При создании анимированного изображения вы в любом графическом редакторе рисуете картинки, из которых будет складываться движущееся изображение, а затем загружаете их в специальную программу анимации, где указываете, как картинки должны чередоваться. Таких программ существует великое множество. Я, например, пользуюсь упомянутой выше Animagic GIF, которую можно скачать с того же tucows. Подобная программа входит и в стандартную поставку Paint Shop Pro пятой версии.

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

Первый кадр - пустое поле. Показывается один раз.



Второй кадр. Показывается 1 раз.



Третий кадр. Показывается 6 раз.



Четвертый кадр. Показывается 1 раз.



Пятый кадр. Показывается 20 раз.



Шестой кадр. Показывается 1 раз.



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


Слева обычный рисунок. Справа - с прозрачным фоном.

Создавать GIF с прозрачным фоном может любой продвинутый текстовый редактор. Умеют это делать и Paint Shop Pro и Animagic GIF.

Ну вот, собственно, и все.

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