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

С выходом новых версий браузеров стали использовать средства по работе со слоями.

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

Векторная графика.

Типы компьютерных изображений.

Имеются два основных класса компьютерных изображений: векторные и растровые.

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

Растровые изображения задаются матрицей, описывающей точки экрана и их цвет. Чем выше качество растрового изображения (больше пикселей и больше глубина цвета), тем больше потребуется памяти для хранения информации для каждого пикселя. Суть принципа точечной графики: если надо закодировать какой-то объект, то на него "накладываем" сетку и создаем матрицу (таблицу) той же размерности, заполняя единицами ячейки, наложенные на объект, и нулями вне объекта. Если границы оригинал - объекта параллельны границам ячеек сетки, получается идеальная матрица (bitmap) из нулевых и единичных битов, которая представляет закодированное изображение объекта. Если эту матрицу вывести на экран или принтер или на диск для хранения, то получим оттиск объекта.

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

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

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

• несложные векторные изображения обладают меньшими размерами по сравнению с растровыми изображениями;

• векторные изображения являются масштабируемыми, что означает возможность их увеличения или уменьшения без каких - либо искажений;

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

Р

ис. 4. Пример растрового и векторного изображения.

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

Основным элементом векторной графики является линия. Узлы и отрезки находятся на самом нижнем уровне. Существует несколько типов линий и узлов. Узел задаётся парой чисел (x,y).

Сегментом называется отрезок, соединяющий два узла.

Заливка – это узор или цвет, выводимый в замкнутой области, ограниченной кривой.

Рис. 5. 1 – исходное изображение, 2 – рисунок (как совокупность векторов), 3 – разгруппированный рисунок в виде набора контуров, 4 - представление рисунка в виде сегментов, состоящих из узлов и отрезков, модификация рисунка путём изменения положения узлов и управляющих точек, 5 – однотонная заливка.

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

Элементы компьютерной графики.

Заполнение многоугольника. Способы:

Определением принадлежности пикселя экрана многоугольнику.

Штриховкой.

Заливка области с затравкой.

Определение принадлежности пикселя многоугольнику. Простейший способ заполнения многоугольника – определять, принадлежит ли пиксель многоугольнику или нет.

Рис. 6. Определением принадлежности пикселя экрана многоугольнику

Если пиксель внутри - суммарный угол, составленный отрезками, соединяющих пиксель и вершины = 360°. Пиксель снаружи – суммарный угол = 0°

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

Рис. 7. Заполнение шриховкой.

Для каждой строки сканирования вычисляются X - координаты пересечений со всеми ребрами, X - координаты пересечений сортируются, закраска ведется между парами отсортированных координат.

Заливка области с затравкой. Задаются:  заливаемая (перекрашиваемая) область,· код пикселя, которым будет выполняться заливка, начальная точка в области, начиная с которой начнется заливка. Закрашиваются те пиксели, которые являются соседними с затравочным. Потом происходит переопределение затравочного пикселя.

Расширением двумерной графики является трёхмерная векторная графика, нашедшая своё широкое применение в программах анимации.

Рис. 8. Правая и левая системы координат.

Система координат называется правой, если для совмещения с положительной полуосью Y положительную полуось X требуется повернуть на +90 при этом направление движения расположенного вдоль оси Z и поворачивающегося против часовой стрелки правого винта и положительной полуоси Z совпадают.

В однородных координатах точка представляется четырехмерным вектором [ x y z w ], где w =1, а матрицы преобразований имеют размер 4×4. Точка в пространстве определяется вектором а с учетом однородных координат - (X,Y,Z,H) или (X*,Y*,Z*,1).

Преобразование в однородных координатах:

Обобщенная матрица преобразования для трехмерного случая имеет вид:

Э
та матрица состоит из четырех частей:

Матрица 3*3 меняет масштаб, осуществляет сдвиг и вращение изображения, 1*3 – перенос, 3*1 – преобразование в перспективе, 1*1 – общее изменение масштаба.

И
зменение масштаба:

(X,Y,Z,1)* = (AX, EY, JZ, 1).

Сдвиг:

(X,Y,Z,1)* =(X+YD+HZ, BX+Y+IZ,CX+FY+Z,1).

Вращение:

где T – вращение относительно указанной оси.

Пространственный перенос:

( X,Y,Z,1)* = (X+L, Y+M, Z+N, 1).

Проецирование:

Комбинированные вращения, которые следуют за проецированием из центра, лежащего в бесконечности, являются основой для получения аксонометрических проекций всех типов. Для наиболее распространенных типов аксонометрических проекций - изометрии и диметрии - углы поворота имеют следующие значения: a_z =-450, b_x=350; g_y=-200; d_x=200.

Для построения косоугольных проекций пользуются различными вариантами сдвига.

Для получения псевдореального изображения в центральной проекции оси координат следует расположить следующим образом. Начало координат расположить в левом нижнем углу. Ось X направить направо, ось Y наверх, ось Z вглубь экрана, от наблюдателя.

Рис. 9 . Система координат для получения псевдореального изображения в центральной проекции.

Расстояние до экрана обозначить через z0<0, (x,y,z) – координаты объекта в пространстве, (X,Y) – на экране. Тогда матрица преобразования имеет вид:

( x,y,z,1)* = (X*,Y*,0,H)

Т.к. величина H должна быть равна 1, то последний вектор надо разделить на H.

Реалистичное представление сцен.

Включает:

• Модели освещения.

• Механизмы отражения света.

• Модели закраски.

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

• Тени.

• Фактура.

• Трассировка лучей.

• Излучательность.

Источники света подразделяются на излучающие и отражающие, источники точечные и  распределенные, источники  рассеянного света.