Краткое содержание в Интернете 1 Краткое содержание 3 часть I 10 Основы Интернета 10 Что такое Интернет 11



Скачати 11.08 Mb.
Сторінка31/35
Дата конвертації31.03.2017
Розмір11.08 Mb.
1   ...   27   28   29   30   31   32   33   34   35

(horizontal rule — горизонтальная линейка). Однако следует отметить, что многие разработчики не всегда удачно используют этот элемент. Горизонтальная линия привлекает вни­мание пользователя, просматривающего страницу, поэтому ее целесообразно при­менять в качестве разделителя, например, баннера и навигационной панели или навигационной панели и основного текста страницы. Для размещения на страни­це горизонтальной линии перетащите ее значок со вкладки Basic панели объектов. Параметры линии можно изменить в окне инспектора. Чтобы добавить для ли­нии цвет, выберите ее, щелкните на вкладке Outline окна страницы и воспользуй­тесь всплывающим списком всех доступных атрибутов.

ПРИМЕЧАНИЕ

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

Вставка рисунков

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

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

Для размещения изображения на странице откройте ее и перетащите значок фай­ла с вкладки Files на свободную область страницы. Позицию рисунка на странице определите с помощью указателя мыши. При необходимости изображение можно поместить даже в ячейку таблицы. Существует также другой способ добавления графических объектов на страницу: поместите значок изображения на страницу и установите для него связь с исходным файлом из окна Image Inspector.

Чтобы добавить на страницу такие объекты, как видео, файлы Flash (SWF), фай­лы с векторной графикой (SVG) или другие специальные графические файлы, выполните последовательность действий, аналогичную описанной выше. Для этих файлов предусмотрены специальные значки на панели объектов. Путем вы­бора того или иного значка можно указать программе GoLive, какой код следует добавлять при помещении этих файлов на страницу. Файлы, созданные в графиче­ских приложениях Adobe, можно редактировать перед их размещением на странице.

Добавление ссылок

В качестве гиперссылки вы можете использовать либо фрагмент текста, либо гра­фическое изображение (или его часть). Для того чтобы создать текстовую ссыл­ку, выберите фрагмент текста и щелкните на значке New Link панели Text Inspector. Для включения в гиперссылку графического изображения сначала выделите его, затем перейдите на вкладку Link панели Image Inspector и щелкните на значке New Link. После создания гиперссылки с помощью описанных методов укажите, с ка­ким объектом ее необходимо связать: файлом на вкладке Files или внешней веб­страницей.

Использование таблиц

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

Версия GoLive 6 предоставляет возможность создать таблицу с нужным вам ко­личеством строк и столбцов. Нажмите клавишу Ctrl, щелкните на значке Table па­нели объектов и установите требуемое число строк и столбцов. Затем, отпустив клавишу Ctrl, перетащите таблицу с панели объектов на страницу.

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

Добавление и форматирование строк, столбцов или ячеек

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

Иногда возникает необходимость объединить несколько ячеек таблицы. Не забы­вайте, что объединение ячеек приводит к потере их содержимого. Поэтому перед выполнением этой процедуры содержимое ячеек следует сохранять отдельно. Чтобы объединить ячейки, выделите их и в контекстном меню таблицы и выбе­рите команду Merge Cells. Контекстное меню таблицы содержит почти все ко­манды, которые могут понадобиться при работе с таблицей.

Вставка текста или графики в таблицу

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

Импортирование текста в таблицу

Существует возможность импортировать текст в редактор GoLive из таких при­ложений, как Excel или FileMaker Pro. Сначала экспортируйте текст или данные из таблиц, предварительно разделив их символами табуляции (в качестве разде­лительных знаков можно использовать запятую, пробел или точку с запятой). Возвратитесь в редактор GoLive и вставьте на страницу новую таблицу. Щелкни­те правой кнопкой мыши в таблице и выберите в контекстном меню команду Tab Delimited Text. В появившемся диалоговом окне Open File укажите имя файла и сим- вол-разделитель, а затем импортируйте файл. GoLive автоматически вставит в таб­лицу дополнительные строки и столбцы, чтобы разместить текст.

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

Разбивка страницы на фреймы

Если вы хотите использовать на своих веб-страницах фреймы, обратитесь ко вкладке Frames панели объектов, где имеются начальные наборы фреймов. Соз­дайте новую пустую страницу, которая будет содержать набор фреймов, и щелк­ните на вкладке Frame Layout. Затем перетащите набор фреймов со вкладки Frames панели объектов на страницу. Чтобы точно указать нужные вам фреймы, а также задать их размер, определить границы, прокрутку и т. п., используйте панель Frameset Inspector. Затем щелкните внутри каждого раздела фрейма для ото­бражения инспектора фреймов, позволяющего дать название выбранному разде­лу, указать первую страницу, которая будет его заполнять, и целевой фрейм.

Просмотр HTML-кода в процессе работы

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

Лучше всего просматривать HTML-код в режиме просмотра Split Source. Щелкни­те на двунаправленной стрелке (кнопка Show/Hide Split Source в левой нижней час­ти вкладки Layuot окна страницы), и GoLive разделит окно на две части. При вы­боре какого-либо элемента его HTML-код отобразится в нижней части окна. Если вы хотите работать только с кодом, щелкните правой кнопкой мыши в лю­бом месте кода и активизируйте команду View Local Mode. Это же контекстное меню позволяет выбрать различные параметры просмотра, например выделение цветом синтаксических конструкций.



Глава 23

Создание графических файлов для Веб

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

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

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

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

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

Форматы графических файлов Веб

В зависимости от способа создания и формата хранения компьютерные графиче­ские изображения подразделяются на два основных типа.


  • Векторные изображения. Состоят из линий и других графических объектов разных цветов и оттенков. Форма объекта описывается математически с ис­пользованием координат опорных точек. Изображения хорошо масштабиру­ются без потери качества.

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

В веб-документах обычно используют растровые изображения, представленные в двух форматах: GIF (Graphics Interchange Format) и JPEG (Joint Photographic Experts Group). Считается перспективным также растровый формат PNG (Porta­ble Network Graphics), однако широкого распространения он пока не получил. Поэтому в этой главе в основном описано, как создавать файлы формата GIF и JPEG для веб-страниц.

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

Формат GIF

Формат GIF был создан компанией CompuServe для обеспечения передачи гра­фики через модемы. Основным ограничением формата является невозможность хранить изображения с большим количеством цветов и оттенков — GIF-изобра­жения должны состоять не более чем из 256 цветов, включая черный и белый.

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

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

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

Формат JPEG

Формат JPEG разрабатывался для хранения цветных фотографий с полным на­бором цветовых оттенков (более 16,7 млн.). Для черно-белых фотографий ис­пользование формата JPEG не дает каких-либо существенных преимуществ, по сравнению с форматом GIF.

В формате JPEG применяется сжатие с потерями. В этом случае на одном из этапов сжатия изображение разбивается на участки размером 8x8 пикселов (блоки). Ко­личество информации, исключаемой при сжатии, зависит от требуемого качества изображения. При максимальных уровнях сжатия детали полностью стираются, и блок становится серым. При средних и низких уровнях сжатия в файле сохра­няется приблизительная информация о цвете данного участка. Таким образом, в отличие от других растровых форматов, сохраняющих изображение поточечно, JPEG хранит примерные цвета, и каждый раз при воспроизведении изображения на экране компьютер производит синтез цвета (что является процессом ресурсо­емким). Степень сжатия файлов JPEG может задаваться пользователем. В боль­шинстве случаев обеспечивается очень высокая степень (до 100:1) без заметного ухудшения качества изображения. Учтите, что сжимать JPEG-файл архиватором не имеет никакого смысла, поскольку он уже сжат.

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

Другие форматы файлов

Большинство современных браузеров отображает только графические файлы форматов GIF или JPEG. Отдельные браузеры поддерживают формат PNG, ко­торый гарантирует лучшее сжатие и большую точность передачи цветов, чем GIF, и обеспечивает прозрачность и постепенное проявление изображения. Основны­ми причинами создания формата PNG были стремление преодолеть ограниче­ния, присущие форматам JPEG и GIF, и необходимость обойти проблемы, свя­занные с соблюдением авторских прав при использовании второго из них.

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

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

Продукты компаний Adobe и Macromedia, основных поставщиков программного обеспечения для создания графических файлов Веб, поддерживают векторные форматы Веб. Первая из этих компаний продвигает свой формат SVG (Scalable Vector Graphics), а вторая — SWF (Flash), но обе явно стремятся к общему стан­дарту. Браузер Internet Explorer также поддерживает собственный векторный формат - VML.

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

LuRaTech Wavelet (LWF), обеспечивающий высокую степень сжатия при до­вольно высоком качестве. Последний отличается тем, что предоставляет возмож­ность при сжатии заранее установить размер будущего файла.

Однако в настоящее время разработчику веб-страниц лучше ориентироваться на два наиболее распространенных в Интернете формата — GIF и JPEG, поскольку они поддерживаются всеми браузерами.

Файлы в форматах GIF и JPEG

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

Использование текстовых редакторов для создания файлов Веб

Текстовые редакторы, поддерживающие технологию WYSIWYG, позволяют соз­давать веб-страницы с графикой. Эти программы могут из встроенных изображе­ний, рисунков, диаграмм и других нетекстовых объектов, находящихся на стра­нице, генерировать изображения в формате GIF или JPEG. Например, если для создания веб-страницы с графикой применяется Microsoft Word, то после записи ее на диск изображения сохраняются в формате GIF. В файлы GIF также будут преобразованы формулы и другие встроенные объекты, такие как электронные таблицы и диаграммы.

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

Графические программы, позволяющие создавать файлы для Веб

По своему назначению графические программы можно разделить на три основ­ных типа.



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

  • Программы создания иллюстраций. Предназначены для создания векторных изображений и поэтому обычно имеют меньший набор средств оптимизации растровых файлов (таких как GIF и JPEG), используемых в Веб. К подобным программам относятся Macromedia Freehand, CorelDRAW и Adobe Illustrator.

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

Ниже перечислена лишь часть широко известных графических программ.

  • Microsoft Paint (версия для Windows ХР). Позволяет рисовать простые изо­бражения или считывать изображение в растровом формате Windows (BMP), PNG, JPEG или GIF, а затем его редактировать. После этого можно сохранить изображение в формате GIF или JPEG, а не в PCX (собственном формате про­граммы Paint).

  • Adobe Photoshop. Графическая программа общего назначения профессио­нального уровня, которая позволяет сканировать и корректировать изображе­ния. Программа Photoshop также читает ряд графических файловых форматов. Она дает возможность настраивать изображения, а затем выводить их в фор­матах GIF, JPEG и многих других. Версия этой программы Photoshop Limited Edition (LE) выполняет те же основные задачи и часто поставляется в ком­плекте со сканерами. Демонстрационную версию программы Photoshop мож­но загрузить с сайта фирмы Adobe (www.adobe.com).

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

  • Paint Shop Pro. Широко известная программа, во многом аналогичная про­грамме Photoshop. Как и последняя, она позволяет читать файлы изображе­ний разных форматов, сканировать, редактировать, рисовать изображения и вставлять в них текст. Пробную версию этой программы можно загрузить с сайта www.jasc.com.

  • Macromedia Fireworks. Программа обработки графической информации про­фессионального уровня, специально разработанная для создания веб-страниц с графикой. Она позволяет преобразовать в форматы GIF и JPEG файлы мно­гих графических форматов. Вы можете загрузить демонстрационную версию Fireworks с сайта компании Macromedia (www.macromedia.com).

  • Gimp. Свободно распространяемая графическая программа, позволяющая создавать и обрабатывать изображения, а также выполнять ретуширование фотографий. Поддерживает форматы GIF, JPEG и PNG. Информацию о про­грамме можно найти на сайте www.gimp.com.

  • Lview Pro. Еще одно широко известное средство обработки рисунков и фото­графий, аналогичное Paint Shop Pro. Эта программа предоставляет некоторые специальные средства обработки изображений Веб. Пробную версию данного приложения можно загрузить с веб-узла www.lview.com.

В Веб имеются десятки других превосходных графических программ. Как правило, для поиска графического программного обеспечения лучше всего использовать два адреса http://www.download.com и http://www.shareware.com. Сайт TUCOWS, находя­щийся по адресу http://www.tucows.com, также содержит списки графических про­грамм, используемых в Веб. Дополнительная информация о загрузке и установке программ из Веб приведена в главе 28.

Создание изображений в формате GIF или JPEG

Каким же образом создать изображение в формате GIF или JPEG, используя гра­фическую программу? Вы можете нарисовать его с нуля, отсканировать готовое изображение либо преобразовать существующий файл в формат GIF или JPEG.


  • Рисование изображения с нуля. Для создания изображения GIF или JPEG можно использовать такую программу рисования, как Photoshop или Paint Shop Pro. Начните с команды New (Создать) из меню File (Файл). В некоторых программах рисования после выбора данной команды появляется диалоговое окно, в котором можно выбрать размер изображения, число цветов и иные па­раметры, описанные в этой главе. В других программах рисования подобные характеристики устанавливаются по умолчанию.

  • Сканирование изображения. Если к вашему компьютеру подключен сканер, можно использовать графическую программу для получения электронной ко­пии изображения. Выберите команду Acquire (Сканировать) из меню File (Файл) (или аналогичную), чтобы начать процесс сканирования.

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

    1. Выберите команду открытия существующего файла из меню File (Файл). В окне, появляющемся затем в большинстве программ, обычно нужно задать тип файла, который вы хотите открыть (например, файл AI Adobe Illustrator или файл BMP Windows), либо выбрать нужный файл, отобразив имена файлов всех доступных типов.

    2. Воспользуйтесь командой Save As (Сохранить как) из меню File (Файл) или ана­логичной командой для сохранения копии изображения. В появившемся диа­логовом окне укажите тип файла GIF или JPEG.

    3. Найдите в этом окне элементы для управления некоторыми из атрибутов, опи­санных в настоящей главе.

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

Преобразование изображений в форматы GIF и JPEG

Для преобразования изображения из первоначального формата в формат GIF или JPEG может потребоваться принятие компромиссных решений. (Некоторые программы сделают выбор за вас, если вы не знаете, как задавать соответствую­щие переменные.) Активизируйте в своей программе команду Options (Парамет­ры) или Preferences (Параметры) в меню Tools (Сервис), View (Вид) или Edit (Правка), а затем в открывшемся окне найдите параметры, соответствующие разным типам файлов. Вами или программой могут быть приняты решения в отношении выбо­ра следующих параметров.


  • Цвета. Чем меньше цветов, тем меньше объем файла, но это, скорее всего, бу­дет означать ухудшение качества или точности передачи цветов первоначаль­ного изображения. Если вы решите изменить число цветов, то программа мо­жет предоставить возможность задать способ замены исключаемых цветов: использовать имитацию цвета или выбрать ближайший цвет. Обратитесь к разделу «Обеспечение качества изображений» этой главы, где более подробно рассказано о представления цвета и палитрах.

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

  • Версия GIF и постепенное отображение графики. Выберите формат GIF89a, если хотите использовать постепенное отображение графики (interlacing), а затем установите флажок Interlacing. Дополнительные сведения содержатся далее в разделе «Специальные эффекты».

Если изображение получено в программе, не позволяющей сохранить его в фор­мате GIF или JPEG, скопируйте изображение из окна программы в буфер обмена (в Microsoft Windows выделите его и нажмите клавиши Ctrl+C). Затем создайте окно нового изображения в программе, которая может сохранить файл в формате GIF или JPEG (например, Microsoft Paint в Windows ХР), и вставьте туда исход­ное изображение (нажмите клавиши Ctrl+V). После этого файл можно сохранить в формате GIF или JPEG.

Получение иллюстраций для Веб из Интернета

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

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

Бесплатные источники графической информации в Интернете быстро появляют­ся и исчезают, поэтому лучшим средством для изучения мира графического ис­кусства в Веб является поисковая машина или путеводитель Веб. Например, на веб-узле Google (http://google.com) выберите раздел Image и введите ключевые слова для поиска нужного рисунка.

Специальные эффекты

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

Постепенное отображение

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

Файл GIF, отображаемый браузером постепенно, называется чересстрочным изо­бражением GIF (interlaced GIF). Этот эффект может применяться только в фай­лах новейшего формата GIF, который получил название GIF89a. (Более старым распространенным форматом GIF является GIF87a.) Большинство средств соз­дания файлов GIF позволяют создавать чересстрочные файлы нового формата.

Файл JPEG, изображение которого проявляется постепенно, называется файлом JPEG с прогрессивным отображением (progressive JPEG — p-JPEG). Постепен­ное проявление изображения, хранящегося в формате JPEG, — это сравнительно новый эффект, поэтому старые браузеры и графические программы его не под­держивают и вообще не могут отобразить файлы этого формата.

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

Прозрачность

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

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

Задание прозрачного цвета для файлов GIF

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

Обратите внимание, что многие графические программы не показывают прозрач­ный цвет в качестве такового автоматически. Вам может потребоваться устано­вить специальный режим просмотра (обычно в меню View (Вид) программы), что­бы увидеть, как в действительности выглядит изображение. Можно также для проверки прозрачности открыть изображение в веб-браузере. Если у вас появят­ся затруднения при использовании эффекта прозрачности, просмотрите раздел «Устранение проблем, связанных с прозрачностью».

В следующих трех разделах подробно описаны методы задания прозрачности для изображения в программах Adobe Photoshop, Macromedia Fireworks и Paint Shop Pro.

Использование программы Adobe Photoshop

Для создания прозрачных изображений в формате GIF вы можете воспользо­ваться программой Adobe Photoshop. При этом нужно сначала создать прозрач­ный фон, а затем задать эффект прозрачности и сохранить файл в формате GIF. Чтобы получить прозрачное изображение, выполните следующие действия.


    1. В окне Photoshop откройте файл изображения и в палитре Layers (Слои) выде­лите фоновый слой.

    2. В поле Opacity (Непрозрачность) палитры Layers (Слои) установите значе­ние 0 %.

    3. В меню File (Файл) выберите команду Save for Web (Сохранить для Веб).

    4. Убедитесь, что в открывшемся окне сохранения файла установлен флажок Transpsrency (Прозрачность), а в списке Matte (Матовый) выбран элемент None, и нажмите кнопку ОК.

    5. В открывшемся окне введите имя файла и нажмите кнопку ОК.

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

Использование программы Macromedia Fireworks

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


      1. Активизируйте команду Export Preview (Просмотр экпорта) меню File (Файл) и в списке Format (Формат) открывшегося диалогового окна (рис. 23.1) выбе­рите элемент GIF.

      2. В списке, расположенном под областью предварительного просмотра, замени­те значение No Transparency (Отсутствие прозрачности), установленное по умолчанию, значением Index Transparency (Индекс прозрачности).


Г

Ш Export Preview

(10

Options File Animation

JPEG Preview 0 Saved Settings:

Format; .JPEG V

26 27K 4- sec @56kbps ИвИНННН^^ v

Quality. V




Smoothing; Wo Smoothing




| | Progressive

p~~| Sharpen Color Edges






R:006G:097B:2110S61d3




[7~| Remove Unused Colors

vJlDBlffll "1>м 1

1 Export... II OK 11 Cancel



1   ...   27   28   29   30   31   32   33   34   35


База даних захищена авторським правом ©lecture.in.ua 2016
звернутися до адміністрації

    Головна сторінка