Инструментальные средства создания Web-сайтов.

Процесс создания документа HTML “вручную”, не прибегая к специализированным приложениям, заключается в следующем:

-         создать минимальную веб-страницу в файле с расширением .htm;

-         вставить внутрь тегов текст;

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

-         внедрить в документ необходимые объекты: рисунки, таблицы, видео- клипы, аудио- файлы, апплеты Java, скрипты и т.д. при помощи тегов языка HTML;

-         вставить гипертекстовые связи;

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

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

Для создания документа формата HTML достаточно простого текстового редактора типа Блокнот. Однако в таких редакторах весь HTML-текст приходится писать вручную. Для удобства можно воспользоваться редакторами, которые автоматизируют ввод тегов, подсвечивая другими цветами сами теги и их атрибуты, или же позволяют готовить оформление страницы, генерируя код автоматически. Такие современные редакторы, как Microsoft FrontPage или Macromedia Dreamweaver, позволяют готовить документы в этих двух режимах по выбору. Рассмотрим более подробно их назначение и основные характеристики.

Microsoft FrontPage – редактор для начинающих разработчиков веб-страниц, он предоставляет полный набор средств для разработки и организации веб-сайтов в различных режимах. Задача пользователя сводится к тому, что он располагает тексты, изображения и гиперссылки так, как ему нужно, а FrontPage сам генерирует необходимый HTML-код. (Необходимо учитывать, что код, сгенерированный FrontPage, не всегда является оптимальным).

Работа в редакторе FrontPage похожа на работу с текстовым процессором Microsoft Word. В нем есть стандартные кнопки, такие, как полужирный шрифт, курсив и подчеркивание, маркированные и нумерованные списки, повтор и отмена операции и т. п. Ввод текста в окне редактора происходит так же, как в Word; форматирование страниц осуществляется с помощью таблиц и фреймов[1][1].

Редактор FrontPage позволяет одновременно открывать несколько файлов (страниц) и быстро переходить от одной страницы к другой. Редактор также позволяет скопировать страницу (вместе со всем кодом HTML) из Интернет и отредактировать ее.

Программный пакет DreamWeaver, как и FrontPage, предназначен для проектирования различных сайтов и редактирования их непосредственно с FTP-сервера, это более мощный редактор, им чаще пользуются профессионалы. Создание сайта так же можно начать в режиме WYSIWYG (what you see is what you get — что видите, то и получаете).

Оба редактора позволяют создавать каскадные таблицы стилей (CSS), анимацию, элементы ActiveX, а так же добавлять объекты JavaScripts.

Благодаря своим возможностям добавлять новые свойства веб-страницам широкое распространение получили Java-апплеты, которые имеют расширение cls. Файлы загружаются как отдельные элементы, но обычно распространяются в заархивированном виде (в виде пакетов *.zip, укомплектованных некоторыми файлами поддержки – документацией, графическими и звуковыми файлами в зависимости от предназначения апплета).

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

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

В WWW используются в основном два формата графических изображений – GIF и JPEG. Изображения в этих форматах воспроизводятся самими браузерами без использования встраиваемых модулей. Реже используют специально созданный формат PNG (Portable Network Graphics)- переносимая сетевая графика.

GIF (Graphic Interchange Format) разработан фирмой ComputerServe с целью уменьшения объема графических файлов. GIF – это первый графический формат, широко поддерживаемый веб-браузерами. GIF- файлы – это файлы растровых изображений, в которых используется не более 256 индексированных цветов (indexed color). Графическая информация, сохраняемая в GIF-файле, сжимается при помощи специальных алгоритмов сжатия с минимальными потерями информации. Рекомендуется использовать для веб-графики разрешение 72 пикселя на дюйм, т.к. именно эта величина разрешения используется при преобразовании в формат GIF.

JPEG (Joint Photographic Experts Group) представляет собой растровое изображение, в котором может быть использовано до 16,7 млн. цветов (24-битовый цвет). Сжатие JPEG-изображений, как правило, сопровождается потерями информации, т.к. основано на отбрасывании мелких деталей. Для этого формата также рекомендуется создавать рисунки с разрешением 72 пикселя на дюйм.

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

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

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

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

Библиотека рисунков содержит уже готовые к использованию изображения. Загрузить ее можно через Интернет, например, с сервера Yahoo или c компакт-диска. Однако библиотеки рисунков обладают одним существенным недостатком – не вы одни имеете возможность ими пользоваться.

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

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

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

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

На завершающем этапе подготовки рисунка для сайта лучше использовать программы растровой графики типа Adobe Photoshop, поскольку форматы GIF и JPEG являются растровыми. По этой причине для создания объектов изображения (например, текста) используют программы векторной графики, а затем экспортируют рисунок в программу растровой графики.

Оптимизацию графических файлов для веб-сайта можно осуществлять в графическом редакторе Adobe Photoshop или Adobe ImageReady.

В WWW все большую популярность получает Flash-технология, разработанная компанией Macromedia. Это оптимальное средство разработки мультимедийного информационного наполнения и приложений для Интернета. О применяемой во Flash-технологии анимации нужно сказать особо. Обычные компьютерные видеоролики состоят из набора растровых изображений, последовательно сменяющих друг друга с частотой несколько десятков кадров в секунду. Для хранения таких видеозаписей требуются огромные объемы памяти, а для передачи в реальном времени через Интернет нужны сверхскоростные каналы связи. Хотя существующие алгоритмы позволяют сжимать видеозапись в десятки и даже сотни раз, это все равно решает проблему лишь отчасти, поскольку хранить и передавать приходится каждый кадр фильма.

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

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

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

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

Библиотечные объекты могут представлять собой не только векторные графические рисунки, но также импортированные растровые изображения, аудиофрагменты в форматах WAV или MP3, самостоятельные Flash-ролики, кнопки или интеллектуальные Smart-клипы[2][2]. Одни библиотечные символы могут включаться в состав других, это позволяет просто и экономно создавать серии объектов, различающихся отдельным деталями. Фильм обычно содержит большое количество экземпляров одного и того же символа. Но поскольку его описание хранится только однократно, любое изменение, внесенное в образец символа, отражается на всех его экземплярах, хотя и не влияет на их расположение или трансформацию.

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

Для воспроизведения флэш-ролика в браузере необходимо установить специальный элемент контроля ActiveX (для InternetExplorer) или plug-in (для Netscape Navigator). У большинства пользователей Сети он уже установлен. А если он отсутствует, то при первом попадании на веб-страницу, содержащую объект ShockwaveFlash[3][3], соответствующий элемент ActiveX или plug-in будет автоматически установлен в браузер, причем эта процедура занимает не больше времени, чем загрузка веб-страницы. ShockwaveFlash стал очень перспективным стандартом для WWW.

Достоинствами технологии ShockwaveFlash являются: работа с растровой и векторной графикой, относительно небольшой размер файла, интерактивность, работа со звуком, работа с видео.

Интерактивный характер использования видеофрагментов Macromedia Flash существенно улучшает восприятие информации. Прежние способы работы с видеофрагментами требуют запуска внешних проигрывателей, что часто из-за несовместимости платформ вызывает проблемы. Macromedia Flash может импортировать видео в любом формате, который поддерживается в QuickTime или в Windows Media Player, в том числе MPEG, DV (Digital Video), MOV (QuickTime) и AVI. Видеоизображение можно масштабировать, вращать, наклонять, к нему можно применить маски, его можно анимировать, а при помощи сценариев сделать интерактивным.

С помощью редактора Macromedia Flash создается промежуточный файл с расширением .fla для внутреннего пользования и редактирования (аналог .psd в Adobe Photoshop). Для использования в Сети данный файл конвертируется в файл с расширением .swf. Кстати, возможна конвертация .fla файла и в другие популярные форматы - avi, анимированный gif, java и т.д.

Прилагаемая к редактору утилита AfterShock создает фрагмент HTML-кода (включающий Java-скрипт), который надо будет добавить в веб-страницу. Он позволит загружать соответствующие .swf файлы и автоматически устанавливать Shockwave Flash в браузеры, где он не установлен.

В редактор Flash включено такое мощное средство, как объектно-ориентированный язык сценариев ActionScript, имеющий широкий диапазон возможностей. Помимо основных действий можно управлять объектами, изменяя любые их параметры, загружать дополнительные модули, обмениваться данными со скриптами на HTML-странице, написанными на языке JavaScript. Целая подборка специальных функций служит для математических вычислений, необходимость в которых нередко возникает при работе с графикой. Встроенный контроль синтаксиса и удобные средства отладки помогут найти ошибки в сценарии. Являясь модульным языком программирования, ActionScript позволяет писать сценарии, представляющие собой небольшие модули, которые выполняют строго определенные функции, например остановку или воспроизведение клипа. Модули относительно автономны, однако ни один из них не является независимым от всех прочих компонентов фильма. В общих чертах задача авторов фильмов сводится к тому, чтобы связать сценарии ActionScript с соответствующими кнопками, клипами и кадрами. Когда при воспроизведении фильма пользователь щелкает на какой-то кнопке или просто наступает черед кадра или клипа, с которым связан определенный сценарий ActionScript, этот сценарий автоматически запускается. Это вовсе не значит, что сценарии ActionScript не могут быть изощренными, сложными. Модульность языка предполагает лишь то, что в большинстве случаев работа программиста над фильмом сводится к написанию небольших по объему сценариев для кнопок, клипов и кадров.

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

Скачано с www.znanio.ru