Методические рекомендации для специалиста в области организации дистанционного обучения по разработке Web-сайта Москва (стр. 3 из 6)

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

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

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

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

Графические редакторы делятся на два типа: растровые и векторные. Рассмотрим наиболее используемые редакторы растровой графики.

Microsoft Paint – редактор, входящий в стандартную поставку операционных систем Microsoft. Он обладает набором простейших функций (кисточка, карандаш, резинка и т.д.), которые позволяют создавать несложные картинки. К сожалению, для обработки графики он практически не пригоден.

Adobe Photoshop – мощный пакет для профессиональной обработки растровой графики. Это целый комплекс, обладающий многочисленными возможностями модификации растрового рисунка, имеющий огромный набор различных фильтров и эффектов, причем есть возможность подключать инструменты независимых производителей. Пакет предлагает, например, средства для восстановления поврежденных изображений, ретуширования фотографий или создания различных коллажей. Потенциал этого пакета огромен. Начиная с версии 5.5 в пакет включена программа Adobe ImageReady, предоставляющая огромные возможности по обработке графики под WEB (оптимизация изображений, создание анимированных gif, «разрезание» картинок на более мелкие и т.д.).

PhotoPaint – еще один известный графический редактор (из пакета Corel Draw) для обработки растровой графики, конкурирующий с Adobe Photoshop. Здесь также имеются все необходимые инструменты для обработки графики, разнообразные фильтры, текстуры. Разница лишь в удобстве работы, интерфейсе и скорости наложения фильтров (наложение происходит немного медленнее).

Графический редактор Painter предоставляет широкие возможности для эмуляции реальных инструментов рисования: графит, мел, масло и т.д. Он также позволяет имитировать фактуру поверхности материалов, живопись, создавать анимацию. Этот редактор удобен для разработки фоновых рисунков или Web-страниц в стиле живописи.

Существует ряд простейших редакторов (Microsoft Photo Editor, Microsoft Photo DRAW), также позволяющих реализовать задачи обычных пользователей, но не удовлетворяющих запросам профессионалов.

Рассмотрим редакторы векторной графики.

Редактор Adobe Illustrator позволяет создавать, обрабатывать и редактировать векторную графику. По своей мощности он эквивалентен растровому редактору Adobe Photoshop: имеет аналогичный интерфейс, позволяет подключать различные фильтры и эффекты, понимает многие графические форматы, даже такие как *.cdr (Corel Draw) и *.swf (Flash).

CorelDraw – известный графический пакет, обладающий средствами для обработки векторной графики. Пакет по своей мощности практически не уступает графическим редакторам Adobe Photoshop и Adobe Illustrator. Помимо обработки векторной графики, в этом пакете существует обработчик растровой графики (Photo Paint), трассировщик изображений, редактор шрифтов, подготовки текстур и создания штрих кодов, а также огромные коллекции с изображениями (CorelGallery).

Создавая сайт или страницу специалист в области организации ДО должен выбрать структуру Web-страницы. Рассмотрим вопросы создания фиксированных и гибких Web-страниц.

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

Разработка гибких страниц. Web-страницы по умолчанию гибкие. Текст и элементы HTML-файла попадают в окно браузера, заполняя все доступное пространство, вне зависимости от размеров дисплея. Если размер окна браузера изменяется, элементы повторно выводятся, чтобы настроиться на новые размеры. В этом и проявляется сущность Web. Многие дизайнеры сознательно разрабатывают страницы таким образом, чтобы они выдерживали расширения и сжатия Web-окна. Этот подход имеет свои достоинства и недостатки. К достоинствам гибких страниц относится следующее: Web-страницы будут отображаться на дисплеях с разным разрешением; гибкую страницу можно настроить для вывода на любом дисплее; заполнено все пространство дисплея, отсутствует нежелательное свободное место, наличие которого часто планируется разработчиками страниц с фиксированными размерами; дизайн гибких страниц делает их доступными для большинства пользователей. Недостатки гибких страниц: на больших дисплеях длина строки может оказаться чрезмерной, когда текст заполняет всю ширину окна браузера; на больших дисплеях элементы будут расположены на экране достаточно гармонично, на маленьких дисплеях они оказываются скученными; результаты гибкого дизайна непредсказуемы, и страница у разных пользователей будет выглядеть по-разному.

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

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