Файл: Уроки HTML.docx

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

Как браузеры работают с прозрачными изображениями

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

При разработке GIF-изображений вы распологаете буквально миллионами цветов - 16,7 миллиона оттенков и тонов красного, зеленого и синего. Хотя у вас есть миллионы вариантов, одновременно можно использовать только 256 цветов. Каждый цвет представлен числом от 1 до 256. Таким образом графические программы (например Photoshop) и веб-браузеры распознают каждый цвет. Они не понимают слово "синий", но понимают число, скажем 175.

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

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

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

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

Создание прозрачных gif-изображений

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

Создание прозрачных GIF-изображений - не очень хитрое дело, но в этом процессе есть несколько довольно сложных этапов, если вы не совсем уверены в том, что делаете. Я буду использовать Adobe Photoshop 3.0 (rus.edit.). Ничего страшного если версия вашего Photoshop'а старше. Необходимый плагин есть во всех версиях программы:

1. Запустите Adobe Photoshop и откройте GIF-изображение, с которым вы хотите работать.

2. Если изображение было в сохранено в формате GIF, читайте следующий шаг. Если изображение было сохранено в формате JPeG, то необходимо войти в Режим (Mode) и переключиться на Индексированные цвета (Indexed Colors). После этого действия вспылвает окно. В принципе, вы можете поэксперементировать над всеми параметрами, а так, все выставляется на оптимальный режим.

3. Далее нужно войти в Файл (File) -> Экспорт (Export) -> GIF89a Export. После этого выходит плагин, отвечающий за создание прозрачной основы в GIF-изображении. Имеется инструменты: Увеличение, Перетаскивание и Установка Просрачности ;). Также дано изображение в оригинале. Выберите инструмент Установка Прозрачности и кликните на том месте изоюбражения, где нужно создать прозрачную основу. Например имеем белый круг на черном фоне. Кликнув на черный цвет инструментом, черный цвет становится прозрачным.

Можно попробовать сделать подобное на программе PaintShop Pro:

1. Запустите PaintShop Pro и откройте GIF-изображение, с которым вы хотите работать.

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

3. Теперь переместите курсор мыши в любое место фона вашего рисунка и нажмите на правую кнопку мыши. Пипетка позволяет выбирать цвета, кликая на них мышью. Левая кнопка мыши управляет передним планом, а правая - фоном.

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

5. Теперь вы можете сохранить вновь созданное прозрачное GIF-изображение. Выбераете команду строки меню PaintShop Pro File -> Save As... (файл -> сохранить как...). Появится диалогове окно Save As... где нужно указать имя файла и место, куда его записывать.

6. Нажмите кнопку Options (Параметры). Появится диалоговое окно File Preferences (Предварительные установки). Здесь вы можете точно задать, в каком виде PaintShop Pro необходимо сохранить цвет, указанный вами в качестве прозрачного.

7. Установите переключатель Set the transparency value to the background color (Установить фоновому цвету значение прозрачного). Таким образом вы укажите PaintShop Pro, что текущий цвет фона (заданный в Color Palette) будет прозрачным на веб-странице.

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

Наложение изображений

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

Чтобы разрешить эту дилемму, разработано новое ключевое слово тега <img>, которое дает возможность разработчикам и посетителям воспользоваться обоими преимуществами. Это ключевоек слово низкого разрешения LOWSCR="...". Оно сообщает браузеру, что сначала следует загрузить малий файл изображения с низким разрешением, а затем, когда загрузится все страница, вывести нормальное изображение с высоким разрешением.

На практике разработчики веба часто применяют большие цветные изображения, которые слишком велики для использования на веб-странице. Вместо этого они с помощью графического пакета, такого как PaintShop Pro или Photoshop, создают друблирующий файл с ухудшенной версией той же графики (содержащей черно-белое изображение или изображение меньшего размера). Браузер сначала загружает на страницу изображение, заданное ключевым словом LOWSCR="...". Затем, закончив загрузку остальной части, он загружает обычное изоюражение, заданное стандартным ключем SRC="...".

Допустим, например, что у меня есть два изображения. Одно называется LOWCAR.GIF. Это черно-белая версия цветной фотографии машины. Чтобы использовать слово LOWSCR, я ввожу следующую строку: <img src="HIGHCAR.GIF" lowscr="LOWCAR.GIF">

Вот и все!

Итог занятия

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

Уроки html'а. Урок # 12.

Ссылки на веб-страницах

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