Программы для создания web-страниц

Поскольку документ Web представляет собой текстовый файл, для его редактирования можно использовать не только Блокнот, но и любой текстовый редактор, например, из состава MS-DOS, Norton Commander или FAR. Кстати, многие пользователи так и делают, набирая в ручную HTML-код в этих простейших редакторах.

 

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

 

· Существуют конверторы текстовых документов, подготовленных в Word и Word Perfect, в формат HTML-файлов (такой конвертор имеется, например, в самом процессоре Word 97/2000).

Кроме перечисленных трех категорий, существуют программы, объединяющие в себе черты текстовых и визуальных HTML-редакторов. К таким программам относится, например, Hot-Metal разработки компании SoftQuad Software.

Достоинство – легкость в работе, не обязательно знать хорошо языки разметки.

Недостаток – генерируется некоторое количество некорректного кода.

· Визуальные редакторы HTML, то есть редакторы типа WYSIWIG (например, Microsoft FrontPage, Netscape Navigator Gold и др.). при работе в этих программах пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа.

Достоинство – легкость в работе, не обязательно знать хорошо языки разметки.

Недостаток – генерируется некоторое количество некорректного кода.

 

· Редакторы собственно HTML-текстов, позволяющие автоматизировать набор и редактирование кода (например, Dreamweaver, HomeSite, SiteEdit, WebEditor и многие другие). Эти программы дают возможность пользователю быстро и легко вставлять в документ элементы HTML, проверять синтаксис команд, выполнять запуск и отладку страницы, не покидая окна редактора. Вообще работа в таких редакторах напоминает работу в интерактивной среде программирования типа Delphi или Visual Basic.

Достоинство – «чистый» код.

Недостаток – необходимо хорошо знать веб-программирование.

ЛЕКЦИЯ 6. Основы цифровой обработки изображений и звука.
Веб-технологии и мультимедиа. (2 часа)

 

Изображения в Интернет: технологии GIF, JPEG, PNG, Flash.

Сегодня для многих людей Всемирная паутина является визуальной средой. Графика не только усиливает воспри­ятие материала пользователем; при условии эстетической привлекательности она может улучшить получаемые им впечатления. В то же время злоупот­ребление графикой может оказать отрицательное воздействие, и в результате получится медленный и непригодный для использования сайт. Корректное применение изображений в Web - не просто дело вкуса. Для этого требует­ся комплексное понимание различных форматов файлов, таких как GIF, JPEG и PNG. Основная цель дизайнера - сбалансировать качество изобра­жений с их размером при загрузке.

Форматы изображений

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

В своей исходной форме растровое изображение является лишь совокупно­стью пикселов, имеющих различные цветовые значения. Из-за большого количества пикселов и цветовой информации необработанные растровые изображения могут быть очень объемными. Несжатое растровое изображе­ние размером в 800x600 пикселов с 24-битным цветом заняло бы больше 1 Мбайт (800 х 600 х 24 = 11 520 000 бит / 81 = 1 440 000 байт). Учитывая их возможный размер, растровые форматы изображений почти всегда задейст­вуют тот или иной вид сжатия. Вообще говоря, существуют две формы сжа­тия изображений: без потерь и с потерями. При сжатии без потерь сжатое изображение идентично несжатому. Так как все данные в изображении должны быть сохранены, степень сжатия и соответствующая экономия в размерах файла относительно невелики. С другой стороны, сжатие с поте­рями не сохраняет изображение в точности, но может обеспечить намного более высокую степень сжатия. При использовании сжатия с потерями за счет снижения качества изображения достигается уменьшение его размера. Так как человеческий глаз едва ли сможет заметить потерю качества, подоб­ный компромисс с использованием сжатия, вероятно, приемлем.

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

 

Рисунок 6.1. Различия между растровыми и векторными изображениями

 

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

Хотя в стандарте HTML нет данных о том, какие форматы изображений могут применяться в Web, браузеры, в основном, поддерживают одни и те же их типы. В Web основными растровыми форматами изображений явля­ются GIF (Graphics Interchange Format, формат обмена графическими данными) и JPEG (Joint Photographic Experts Group, объединенная группа экс­пертов в области фотографии). Формат PNG (Portable Network Graphics, пе­реносимая сетевая графика) сейчас, наконец, делает некоторые успехи, но пока что его нельзя назвать общеупотребительным.

Что касается векторной графики, в Web преобладает формат Flash, но одобренный W3C формат SVG (Scalable Vector Graphics, масштабируемая векторная графика) также получа­ет распространение. Другие форматы изображений - например, различные связанные с UNIX форматы вроде ХВМ
(X Bitmap, Х-растровая карта) и ХРМ (X Pixelmap, Х-пиксельная карта) и формат Windows (BMP) - зачас­тую внутренне поддерживаются браузерами, но в основном представляют исторический интерес, и пользоваться ими не стоит. Со временем господ­ствующими станут скрытые форматы, например, основанные на элементар­ных волнах; но, по крайней мере, сейчас нужно придерживаться хорошо зарекомендовавшими себя GIF и JPEG. Обсудим основные форматы изо­бражений и некоторые из их ценных возможностей.

Формат GIF

GIF является наиболее широко распространенным форматом графических файлов Web. Существуют два основных типа GIF: GIF87 и GIF89a. Обе раз­новидности формата используют 8-битный цвет (256 цветов) и LZW-метод сжатия без потерь (название метода LZW образовано из первых букв фами­лий его создателей: Lempel-Ziv-Welch) и имеет расширение gif. Формат GIF89a дополнительно поддерживает прозрачность и анимацию; обе эти возможности мы обсудим позднее в данном разделе. Сегодня, говоря об изображениях GIF, мы всегда допускаем применение GIF89a, и не делаем различия между указанными форматами, независимо от того, действительно ли в изображении применяются анимация или прозрачность.

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

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

Формат JPEG

Другой распространенный в Web формат графических файлов - JPEG. Файлы этого формата обычно имеют расширение jpg или jpeg. Формат JPEG, стандарт для которого установлен группой экспертов по фотографи­ческим изображениям (Joint Pictuie Expert Group), использует метод сжатия с потерями. Он предназначен для отображения фотографических изображе­ний, содержащих тысячи и даже миллионы цветов или оттенков серого. По­скольку этот формат применяет сжатие с потерями, всегда существует воз­можность выбора между меньшим размером файла и лучшим качеством изображения. Тем не менее, формат JPEG позволяет хранить изображения с 24-битным цветом в файлах гораздо меньшего размера, чем GIF, что позво­ляет существенно сэкономить пространство на диске или время загрузки. Пример выбора оптимального соотношения качества и размера файла JPEG показан на рис. 14.10. Обратите внимание на серьезное уменьшение размера файла вследствие совсем незначительной потери качества.

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

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

Формат PNG

PNG (Portable Network Graphics, переносимая сетевая графика) поддержива­ет все особенности формата GIF в дополнение к некоторым другим воз­можностям Во-первых, алгоритм сжатия для PNG не является патентован­ным, в отличие от формата GIF, который сжимается с помощью алгоритма LZW (принадлежащего Unisys) Некоторые дизайнеры выражали обеспоко­енность потенциальными проблемами, возникавшими из-за патентных при­тязаний Unisys на сжатие LZW, но пока что до судебных разбирательств не доходило. Кроме того, алгоритм сжатия PNG немного лучше того, что применяется в GIF. Ко все­му прочему, PNG обеспечивает слегка усовершенствованную чересстрочную развертку.

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

Flash

Относительно распространенным в сети Internet становится векторный формат изображений Flash от компании Macromedia, обозначающийся рас­ширением файла swf. Этот формат, в основном, известен возможностью соз­дания анимации, но, помимо этого, он может применяться для проектирова­ния статических, масштабируемых, неподвижных изображений (см. http:// www.webdesignref.com/examples/staticflash.htm). Его преимущество в том, что изображение можно с легкостью масштабировать, расширяя его на доступ­ное экранное пространство, или, как показано на рис. 14.18, детализировать. Во многих случаях размер таких изображений столь же незначителен, как и размер GIF.

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

 

⇐ Предыдущая567891011121314Следующая ⇒

Поделиться:

Воспользуйтесь поиском по сайту: