Основы web-дизайна. Графические редакторы

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

2015-09-02

408.54 KB

50 чел.


Поделитесь работой в социальных сетях

Если эта работа Вам не подошла внизу страницы есть список похожих работ. Так же Вы можете воспользоваться кнопкой поиск


Федеральное государственное автономное

образовательное учреждение

высшего профессионального образования

«СИБИРСКИЙ ФЕДЕРАЛЬНЫЙ УНИВЕРСИТЕТ»

Институт нефти и газа

Кафедра «Химическая технология природных энергоносителей и углеродных материалов»

РЕФЕРАТ

Основы web-дизайна. Графические редакторы.

 

Преподаватель ________ ______________  ______________ ______________

Студент ____________________ ________ ______________  ______________

СОДЕРЖАНИЕ

Введение……………………………………………………………………………....6

1. Основные понятия web-дизайна……………………………………………….....8

 1.1. Web-дизайн, web-страница, основы строения сайта……………………......8

 1.2. Web-редактор, примеры………………………………………………...........10

      1.2.1. Текстовые редакторы для разработки Web приложений……………..11

      1.2.2. Стандартные средства разработки для Unix систем………………….12

      1.2.3. Профессиональные среды разработки и их ответвления……………13

      1.2.4. Визуальные редакторы для разработчиков WEB……………………14

 1.3. Языки…………………………………………………………………………..15

      1.3.1. Клиентские языки………………………………………………………..15

      1.3.2. Сервисные языки………………………………………………………...16

2. Представление о web-сайте……………………………………………………...18

 2.1. Создание web-сайта…………………………………………………………..18

 2.2. Основные положения…………………………………………………………18

 2.3. Структура документа………………………………………………………...20

 2.4. Тэги тела документа………………………………………………………….20

 2.5. Список базовых тэгов HTML………………………………………………..24

 2.6. Тэги списков…………………………………………………………………..25

 2.7. Гипертекстовые ссылки……………………………………………………....29

 2.8. Таблицы………………………………………………………………………..35

 2.9. Оптимизация графики для Web……………………………………………...36

 2.10. Основы CSS………………………………………………………………….37

3. Виды компьютерной графики…………………………………………………...49

 3.1. Растровая графика…………………………………………………………….49

      3.1.1. Разрешение оригинала…………………………………………………..49

      3.1.2. Разрешение экранного изображения…………………………………...50  

      3.1.3. Разрешение печатного изображения и понятие линиатуры…………50

      3.1.4. Динамический диапазон………………………………………………...50

      3.1.5. Связь между параметрами изображения и размером файла………...52

      3.1.6. Масштабирование растровых изображений…………………………52

      3.1.7. Adobe Photoshop…………………………………………………………53

      3.1.8. GIMP……………………………………………………………………...55

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

      3.2.1. Математические основы векторной графики…………………………58

      3.2.2. Adobe Illustrator………………………………………………………….60

      3.2.3. Corel Draw………………………………………………………………..62

 3.3. Программные средства обработки трехмерной графики………………….64

4. Представление графических данных……………………………………………66

 4.1. Форматы графических данных………………………………………………67

 4.2. Цвет и цветовые модели……………………………………………………...69

      4.2.1. Цветовая модель CIE Lab……………………………………………….70

      4.2.2. Цветовая модель RGB…………………………………………………...70

      4.2.3. Цветовая модель HSB…………………………………………………...71

      4.2.4. Цветовая модель CMYK………………………………………………...71

ЗАКЛЮЧЕНИЕ…………………………………………………………………….72

СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ……………………………….74

        

   


РЕФЕРАТ

Данная курсовая работа содержит пояснительную записку из 74 страниц текста, 7 формул, 2 таблиц, 7 изображений и 10 литературных источников.

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

ГРАФИКИ, ПИКСЕЛЬ, ЯЗЫК, HTML, ТЕГ, JPEG, СКРИПТ, МИКШЕР, CSS, БИТ, ШРИФТ, СТИЛЬ, ЯЧЕЙКА, ИЗОБРАЖЕНИЕ.

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

ВВЕДЕНИЕ

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

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

Представление данных на мониторе компьютера в графическом виде впервые было реализовано в середине 50-х годов для больших ЭВМ, применявшихся в научных и военных исследованиях. С тех пор графический способ отображения данных стал неотъемлемой принадлежностью подавляющего числа компьютерных систем, в особенности персональных. Графический интерфейс пользователя сегодня является стандартом “де-факто” для программного обеспечения разных классов, начиная с операционных систем.

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

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

Рисунок 1 – Примеры графики.

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

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

1. Основные понятия web-дизайна.

1.1. Web-дизайн, web-страница, основы строения сайта.

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

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

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

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

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

Если мы говорим о сайтах, то не можем не упомянуть о блоках. Само слово «блок» имеет множество значений. В среде веб-разработок блоки, в разном понимании этого слова, встречаются и в программировании, и в верстке, и в дизайне. В общих чертах блок – это элемент структуры, как правило, состоящий из других элементов. Стандартная страница в интернете состоит из нескольких блоков: это шапка сайта (header), содержимое (content), подвал (footer), а также меню навигации.

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

Насколько высокой должна быть шапка? Настолько, чтобы расположенному в ней логотипу не было тесно и при этом все элементы логотипа можно было рассмотреть. Контент

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

Подвал – очень часто этому элементу не уделяют должного внимания, однако шапка сайта и подвал – это как обложка книги: читать книгу без обложки можно, но отношение уже не то.

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

Web-страница — документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.

Веб-страницы обычно создаются на языках разметки HTML и могут содержать гиперссылки для быстрого перехода на другие страницы.

Информация на веб-странице может быть представлена в различных формах:

  1.  текст
  2.  статические и анимированные графические изображения
  3.  аудио
  4.  видео
  5.  апплеты

1.2. Web-редактор, примеры.

Web-редактор — программа, использующаяся для редактирования HTML документов.

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

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

Современные редакторы программного кода, позаимствовали свой функционал у визуальных текстовых редакторов, а также у специализированных средств текстовой разработки, прилагаемых к различным компиляторам. От текстовых редакторов и офисных пакетов современные средства разработки страниц интернет, впитали всё самое лучшее в области представления текстовой и графической информации на экране компьютера. От специализированных редакторов, прилагаемых к компиляторам программ, как на языке Pascal или C, редакторы кода страниц интернет впитали возможность подсветки синтаксиса и подстановки элементов кода.

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

Текстовыми редакторами для Web разработки принято называть те программы, которые впитали в себя лучшие качества работы с кодом и подсветкой синтаксиса на различных языках. Для программирования приложений в интернет применяются специальные средства разработчиков, которые умеют работать с данными HTML, CSS, PHP, JavaScript.

WYSIWYG (What You See Is What You Get) —вид программ, имеющий дело с представлениями результатов работы программного кода на экране в графическом виде, который применяется разработчиками интернет-приложений. Эти редакторы позволяют отображать результаты работы кода на экране в удобном для пользователей виде.

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

1.2.1. Текстовые редакторы для разработки Web приложений.

Они предлагают более гибкие возможности и аккуратные результаты по сравнению с визуальными редакторами и появились несколько раньше, чем вторые, как инструмент Web разработчика.

Notepad++ (Windows, Linux, Mac).

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

PHPeditor.

  1.  Простенький продукт, для работы с HTML и PHP.
  2.  Главным плюсом данной программы является мощная функция поиска и замены сразу по нескольким файлам, которая работает очень быстро;
  3.  Программа имеет возможность подсветки синтаксиса HTML, PHP;
  4.  Есть инспектор кода HTML и PHP;
  5.  Включён встроенный сервер, для проверки серверных приложений;
  6.  Многовкладочный интерфейс;
  7.  Функции вставки;
  8.  Поддержка макросов;
  9.  Запись шаблонов кода с небольшим первоначальным набором.

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

1.2.2. Стандартные средства разработки для Unix систем.

Vim (Windows, Mac, Linux).

В сущности – это весьма удобная программа для консоли linux, которая просто незаменима у системных администраторов. Основам владения Vim учат на специальных курсах. Так что тема обсуждения этого редактора просто бесконечная. Это тема скорее разработки самого приложения для разработки, чем его функционала.

Fraise (Mac).

Простой в использовании и не перегруженный функционалом редактор для Mac Fraise, содержит необходимые инструменты для простой разработки приложений для Web без дополнительных плагинов:

  1.  Подсветка синтаксиса;
  2.  Удобная работа с блоками;
  3.  Поиск и замена;
  4.  Блоки для быстрого ввода тегов HTML и CSS;
  5.  Встроенный браузер с функцией автоматического обновления при замене стилей;
  6.  Закрытие тэгов нажатием одной кнопки;
  7.  Инспектор HTML.

Этот редактор создан специально для Mac и является хорошей заменой стандартному текстовому редактору. Он является приложением Smultron, по этой причине он работает только в поздних версиях ОС Mac, либо, при установленном Smultron.

1.2.3. Профессиональные среды разработки и их ответвления.

Komodo Edit (Windows, Linux, Mac).

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

Возможности Komodo Edit ограничиваются в свободной версии, достаточно скромным функционалом по сравнению с Komodo IDE, но что конкретного может предложить нам Komodo Edit:

  1.  Поддержка подсветки синтаксиса на большинстве языков программирования для интернета;
  2.  Автозаполнение и закрытие тегов;
  3.  Файловый менеджер и менеджер проектов;
  4.  FTP – клиент, работающий по разным протоколам;
  5.  Встроенный браузер для просмотра результатов работы;
  6.  Функции поиска и замены с регулярными выражениями;
  7.  Многооконный интерфейс с вкладками;
  8.  Проверка html кода tidy.

Функционал этим далеко не ограничивается, так что он удовлетворяет любым нуждам. Хотя, сама программа может показаться слегка громоздкой для пользователей Linux. Дело в том, что встроенный браузер и клиент ftp — это не совсем то, что требуется от текстового редактора. Есть программы, которые справляются с этими задачами гораздо лучше интегрированных решений.

Bluefish Editor (Windows, Linux).

Bluefish Editor — возможно так же существует аналог для Mac. Пожалуй единственное решение для Linux в плане разработки, которое годится для решения любых задач. В целом функционал программы аналогичен, функциям Aptana Studio. Эта программа для профессионалов. Весь её функционал не перечислить. Поэтому настройка её требует определённых навыков. Главным недостатком этого редактора, является, на мой взгляд, медлительность и неповоротливость.

1.2.4. Визуальные редакторы для разработчиков WEB

Перейдём к освоению самых удобных и полезных редакторов визуального типа. Это слишком обширная сфера, чтобы заниматься дополнительной рекламой платного программного обеспечения. Мы сосредоточимся на бесплатных программах данного типа, о которых не так много известно и сказано.

Macromedia Dreamweaver MX.

Macromedia Dreamweaver MX — полный функционал этой программы не известен, наверное, даже самим разработчикам. Недаром так много сказано об этом в книгах, которые вы можете найти на прилавках книжных магазинов об этой программе. Она работает практически с любыми данными мультимедиа.

AdobeGolive и Adobe LiveMotion.

Неограниченный функционал при разработке, вёрстке, и нарезке страниц. Многие считают функционал AdobeGolive недостаточным, но комплексное использование программного обеспечения Adobe вне конкуренции. Эта тема не для короткой статьи, а для многотомных трудов по Adobe.

Microsoft Front Page.

Это удобная, простая в использовании, визуальная среда разработки. Не отличается чистотой кода на выходе. Но в то же время она позволяет работать с различными мультимедийными данными и не требует знания особых навыков, помимо знания Ms Word. Может загружать готовые страницы по ftp, На данный момент Front Page в пакетах Microsoft Office заменен на Microsoft Expression Web и Microsoft Office SharePoint Designer.

Существует (1997 бесплатная версия FrontPage Express, которая делает достаточно чистый код, который, впрочем, уже не соответствует стандартам HTML. Но если вам на скорую руку надо сверстать сложную таблицу - это именно то, что вам надо. Дистрибутива у FrontPage Express нет, работает без установки.

WYSIWYG WEB Builder.

WYSIWYG WEB Builder — условно бесплатная программа, которая предоставляет пользователям весь спектр возможностей для построения сайтов, без знания специальных языков и кодов. Можно набросать готовый сайт в считанные минуты, просто кликая мышкой на понравившихся элементах и перетаскивая их на страницу сайта. Тем не менее в программе присутствуют так же инструменты для создания сложных форм, стилей и внедрения различных объектов из интернета и проекта сайта.

1.3. Языки.

1.3.1. Клиентские языки.

Как следует из названия, программы на клиентских языках обрабатываются на стороне пользователя как правило, их выполняет браузер. Это и создает главную проблему клиентских языков — результат выполнения программы (скрипта) зависит от браузера пользователя. То есть, если пользователь запретил выполнять клиентские программы, то они исполняться не будут, как бы ни желал этого программист. Кроме того, может произойти такое, что в разных браузерах или в разных версиях одного и того же браузера один и тот же скрипт будет выполняться по-разному. С другой стороны, если программист возлагает надежды на серверные программы, то он может упростить их работу и снизить нагрузку на сервер за счет программ, исполняемых на стороне клиента, поскольку они не всегда требуют перезагрузку (генерацию) страницы. Самыми распространенными клиентскими языками программирования являются:

  1.  JavaScript
  2.  VBScript
  3.  ActionScript
  4.  Java
  5.  CoffeeScript

1.3.2. Сервисные языки.

Когда пользователь дает запрос на какую-либо страницу (переходит на неё по ссылке или вводит адрес в адресной строке своего браузера), то вызванная страница сначала обрабатывается на сервере, то есть выполняются все программы, связанные со страницей, и только потом возвращается к посетителю по сети в виде файла. Этот файл может иметь расширения: HTML, PHP, ASP, ASPX, Perl, SSI, XML, DHTML, XHTML.

Работа программ уже полностью зависима от сервера, на котором расположен сайт, и от того, какая версия того или иного языка поддерживается. К серверным языкам программирования можно отнести: PHP, Perl, Python, Ruby, любой .NET язык программирования (технология ASP.NET), Java, Groovy.

Важной стороной работы серверных языков является возможность организации непосредственного взаимодействия с системой управления базами данных (или СУБД) — сервером, на котором упорядоченно хранится информация, которая может быть вызвана в любой момент. Популярными среди систем управления базами данных являются:

  1.  Firebird
  2.  IBM DB2
  3.  IBM DB2 Express-C
  4.  Microsoft SQL Server
  5.  Microsoft SQL Server Express
  6.  mSQL
  7.  MySQL
  8.  Oracle
  9.  PostgreSQL
  10.  SQLite
  11.  Sybase Adaptive Server Enterprise


2. Представление о web-сайте.

2.1. Создание web-сайта.

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

2.2. Основные положения

Все тэги HTML начинаются с "<" (левой угловой скобки) и заканчиваются символом ">" (правой угловой скобки). Как правило, существует стартовый тэг и завершающий тэг. Для примера приведем тэги заголовка, определяющие текст, находящийся внутри стартового и завершающего тэга и описывающий заголовок документа:

<TITLE> Заголовок документа </TITLE>

Завершающий тэг выглядит также, как стартовый, и отличается от него прямым слешем перед текстом внутри угловых скобок. В данном примере тэг <TITLE> говорит WEB-браузеру об использовании формата заголовка, а тэг </TITLE> - о завершении текста заголовка.

Некоторые тэги, такие, как <P> (тэг, определяющий абзац), не требуют завершающего тэга, но его использование придает исходному тексту документа улучшенную читаемость и структурируемость.

HTML не реагирует на регистр символов, описывающих тэг, и приведенный ранее пример может выглядеть следующим образом:

<title> Заголовок документа </title>

Дополнительные пробелы, символы табуляции и возврата каретки, добавленные в исходный текст HTML-документа для его лучшей читаемости, будут проигнорированы WEB-браузером при интерпретации документа. HTML-документ может включать вышеописанные элементы, только если они помещены внутрь тэгов <PRE> и </PRE>. Более подробно о тэгах <PRE> будет написано ниже.

2.3. Структура документа

Когда WEB-браузер получает документ, он определяет, как документ должен быть интерпретирован. Самый первый тэг, который встречается в документе, должен быть тэгом <HTML>. Данный тэг сообщает WEB-браузеру, что ваш документ написан с использованием HTML. Минимальный HTML-документ будет выглядеть так:

<HTML>

...тело документа...

</HTML>

Заголовочная часть документа <HEAD>. Тэг заголовочной части документа должен быть использован сразу после тэга <HTML> и более нигде в теле документа. Данный тэг представляет собой общее описание документа. Избегайте размещать какой-либо текст внутри тэга <HEAD>. Стартовый тэг <HEAD> помещается непосредственно перед тэгом <TITLE> и другими тэгами, описывающими документ, а завершающий тэг </HEAD> размещается сразу после окончания описания документа. Например:

<HTML>

<HEAD>

<TITLE>Список сотрудников</TITLE>

</HEAD>

Технически, стартовые и завершающие тэги типа <HTML>, <HEAD> и <BODY> необязательны. Но настоятельно рекомендуется их использовать, поскольку использование данных тэгов позволяет WEB-браузеру уверенно разделить заголовочную часть документа и непосредственно смысловую часть.

Заголовок документа <TITLE>. Большинство WEB-браузеров отображают содержимое тэга <TITLE> в заголовке окна, содержащего документ и в файле закладок, если он поддерживается WEB-браузером. Заголовок, ограниченный тэгами <TITLE> и </TITLE>, размещается внутри <HEAD>-тэгов, как показано выше на примере. Заголовок документа не появляется при отображении самого документа в окне.

Комментарии. Как любой язык, HTML позволяет вставлять в тело документа комментарии, которые сохраняются при передаче документа по сети, но не отображаются браузером. Синтаксис комментария:

<!--Это комментарий-->

Комментарии могут встречаться в документе где угодно и в любом количестве.

2.4. Тэги тела документа.

Тэги тела документа идентифицируют отображаемые в окне компоненты HTML-документа. Тело документа может содержать ссылки на другие документы, текст и другую форматированную информацию.

Тело документа <BODY>. Тело документа должно находиться между тэгами <BODY> и </BODY>. Это та часть документа, которая отображается как текстовая и графическая (смысловая) информация вашего документа.

Уровни заголовков <Hx>. Когда пишется HTML-документ, текст структурно делится на просто текст, заголовки частей текста, заголовки более высокого уровня и т.д. Первый уровень заголовков (самый большой) обозначается цифрой 1, следующий - 2, и т.д. Большинство браузеров поддерживает интерпретацию шести уровней заголовков, определяя каждому из них собственный стиль. Заголовки выше шестого уровня не являются стандартом и могут не поддерживаться браузером. Заголовок самого верхнего уровня имеет признак "1". Синтаксис заголовка уровня 1 следующий:

<H1>

Заголовок первого уровня

</H1>

Заголовки другого уровня могут быть представлены в общем случае так:

<Hx>

Заголовок x-го уровня

</Hx>,

где x - цифра от 1 до 6, определяющая уровень заголовка.

Тэг абзаца <P>.

В отличии от большинства текстовых процессоров, в HTML-документе обычно игнорируются символы возврата каретки. Физический разрыв абзаца может находиться в любом месте исходного текста документа (для удобства его читаемости). Однако браузер разделяет абзацы только при наличии тэга <P>. Если вы не разделите абзацы тэгом <P>, ваш документ будет выглядеть как один большой абзац.

Дополнительные параметры тэга <P>:

<P ALIGN=left|center|right>, позволяют выравнивать абзац по левому краю, центру и правому краю соответственно.

Центрирование элементов документа. Вы можете центрировать все элементы документа в окне браузера. Для этого можно использовать тэг <CENTER>.

Все элементы между тэгами <CENTER> и </CENTER> будут находиться в центре окна.

Тэг преформатирования <PRE>. Тэг преформатирования, <PRE>, позволяет представлять текст со специфическим форматированием на экране. Предварительно сформатированный текст заканчивается завершающим тэгом </PRE>. Внутри предварительно сформатированного текста разрешается использовать:

1) перевод строки

2) символы табуляции (сдвиг на 8 символов вправо)

3) непропорциональный шрифт, устанавливаемый браузером.

Использование тэгов, определяющих формат абзаца, таких как <Hx> или <ADDRESS>, будет игнорироваться браузером при помещении их между тэгами <PRE> и </PRE>.

Далее идет несколько более подробный пример, собранный из предыдущих:

<HTML>

<HEAD>

<TITLE> Список сотрудников </TITLE>

</HEAD>

<BODY>

<H2> Список сотрудников нашей фирмы </H2>

<H3> Составлено: 30 июля 1996 года </H3>

Данный список содержит фамилии, имена и отчества

всех сотрудников нашей компании. <P>

Список может быть использован только в служебных целях. <P>

</BODY>

</HTML>

Вот, что вы увидите на экране браузера:

Список сотрудников нашей фирмы

Составлено: 30 июля 1996 года

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Список может быть использован только в служебных целях.

Заголовок "Список сотрудников" не отображен браузером как часть документа. Он появится в заголовке окна браузера.

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

Куликов Роман <BR> Проспект Свободный,<BR> 82/6 <BR>

Дополнительный параметр позволяет расширить возможности тэга <BR>.

<BR CLEAR=left|right|all>

Данный параметр позволяет не просто выполнить перевод строки, а разместить следующую строку, начиная с чистой левой (left), правой (right) или обоих (all) границ окна браузера. Например, если рядом с текстом слева встречается рисунок, то можно использовать тэг <BR> для смещения текста ниже рисунка:

<p> Как вы можете видеть, данная схема демонстрирует связь<BR CLEAR=left> <img src="files/3/http://www.softexpress.com/images/schema1.gif" align=baseline> Мастер/Деталь </p>.

Неразрывная строка <NOBR>. Если вы не хотите, чтобы браузер автоматически переносил строку, то вы можете обозначить ее тэгами <NOBR> и </NOBR>. В этом случае браузер не будет переносить строку даже если она выходит за нраницы экрана; вместо этого браузер позволит горизонтально прокручивать окно. Например:

 <NOBR> Данная строка является самой длинной строкой документа, которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

Если же вы хотите все же позволить разбиение данной строки на две, но в строго запланированном месте, то вставьте тэг <WBR> в это место. Например:

 <NOBR> Данная строка является самой длинной строкой документа,<WBR> которая не допускает какого-либо разбиения, где бы то ни было </NOBR>

Данная строка является самой длинной строкой документа,

которая не допускает какого-либо разбиения, где бы то ни было.

Цитата <BLOCKQUOTE>. Данный тэг предназначен для обозначения в документе цитаты из другого источника. Текст, обозначенный тэгом <BLOCKQUOTE>, отступает от левого края документа на 8 пробелов. Например:

 На открытии данной конференции глава представительства произнес: <P> <BLOCKQUOTE> Сегодня один из величайших дней для нашей компании.<BR> Мы открыли новую технологию, позволяющую нашим клиентам повысить производительность их настольных систем в несколько раз. </BLOCKQUOTE>

При отображении браузером данный текст будет выглядеть так:

На открытии данной конференции глава представительства произнес:

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

2.5. Список базовых тэгов HTML

Таблица 1 - Основные тэги

Стартовый

  Завершающий

Описание

<HTML>

</HTML>

Обозначение HTML-документа

<HEAD>

</HEAD>

Заголовочная часть документа

<TITLE>

</TITLE>

Заголовок документа

<BODY>

</BODY>

Тело документа

<H1>

</H1>

Заголовок абзаца первого уровня

<H2>

</H2>

Заголовок абзаца второго уровня

<H3>

</H3>

        Заголовок абзаца третьего уровня

<H4>

</H4>

Заголовок абзаца четвертого уровня

<H5>

</H5>

Заголовок абзаца пятого уровня

<H6>

</H6>

Заголовок абзаца шестого уровня

<P>

</P>

Абзац

<PRE>

</PRE>

Форматированный текст

<BR>

Перевод строки без конца абзаца

<BLOCKQUOTE>

</BLOCKQUOTE>

Цитата

Описанные ранее тэги - это все, что необходимо для того, чтобы начать работать с HTML.

2.6. Тэги списков.

Существует три основных вида списков в HTML-документе:

а) пронумерованный

б) непронумерованный

в) список описаний

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

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

Пронумерованный список начинается стартовым тэгом <OL> и завершается тэгом </OL>. Каждый элемент списка начинается с тэга <LI>. Например:

<OL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

1. Программирование

2. Алгоритмизация

3. Проектирование

Тэг <OL> может иметь параметры:

<OL TYPE=A|a|I|i|1 START=n>

где: TYPE - Вид счетчика:

A - большие латинские буквы (A,B,C...)

a - маленькие латинские буквы (a,b,c...)

I - большие римские цифры (I,II,III...)

i - маленькие римские цифры (i,ii,iii...)

1 - обычные цифры (1,2,3...)

START=n

Число, с которого начинается отсчет

Например:

<OL TYPE=I START=15> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </OL>

XV. Программирование

XVI. Алгоритмизация

XVII. Проектирование.

Непронумерованные списки. Для непронумерованных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

Пронумерованный список начинается стартовым тэгом <UL> и завершается тэгом </UL>. Каждый элемент списка начинается с тэга <LI>. Например:

<UL> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

Программирование

Алгоритмизация

Проектирование

Тэг <UL> может иметь параметр:

<UL TYPE=disc|circle|square>

Тип тэга <UL> определяет внешний вид маркера как вид по умолчанию (disc), круглый (circle) или квадратный (square). Например:

<UL TYPE=square> <LI> Программирование <LI> Алгоритмизация <LI> Проектирование </UL>

Программирование

Алгоритмизация

Проектирование

Вложенные списки. Дадим пример вложенных списков:

<HTML> <HEAD> <TITLE> Список сотрудников </TITLE> </HEAD> <BODY> <H2> Список сотрудников нашей фирмы </H2> <H3> Составлено : 30 июля 1996 года </H3> Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании. <P> Список может быть использован только в служебных целях. <P> <OL> <LI> Дирекция <UL> <LI> Иванов И.И. <LI> Петров К.В. </UL> <LI> Отдел маркетинга <UL> <LI> Варшавская Е.Л. <LI> Самсонов Д.М. </UL> </OL> </BODY> </HTML>

Вот, что вы увидите на экране браузера:

Список сотрудников нашей фирмы

Составлено : 30 июля 1996 года

Данный список содержит фамилии, имена и отчества всех сотрудников нашей компании.

Список может быть использован только в служебных целях.

1. Дирекция

Иванов И.И.

Петров К.В.

2. Отдел маркетинга

Варшавская Е.Л.

Самсонов Д.М.

Элемент списка <Li>.

Тэг <LI> может иметь параметры:

<OL TYPE=disc|circle|squade> или <OL TYPE=A|a|I|i|1 VALUE=n>

в зависимости от того, в списке какого вида находится данный элемент.

TYPE

Вид маркера (см. <UL>) или счетчика (см.OL)

VALUE=n

Значение для элемента пронумерованного списка (его номер). Все дальнейшие номера элементов списка будут отсчитываться от этого номера.

Например:

<OL TYPE=I START=15> <LI> Программирование <LI TYPE=i VALUE=25> Алгоритмизация <LI> Проектирование </OL>

XV. Программирование

XVI. Алгоритмизация

Проектирование

Список определений.

Список определений начинается с тэга <DL> и завершается тэгом </DL>. Данный список служит для создание списков типа "термин"-"описание". Каждый термин начинается тэгом <DT> , а описание - тэгом <DD>. Например:

<DL> <DT> <B> Отдел маркетинга </B> <DD> Данный отдел занимается продвижением продуктов и услуг <DT> <B> Финансовый отдел </B> <DD> Данный отдел занимается всеми финансовыми операциями <DT> <B> Отдел кадров </B> <DD> Данный отдел занимается учетом и набором новых сотрудников фирмы, распределением отпусков, отслеживанием больничных листов и т.д. </DL>

Отдел маркетинга

Данный отдел занимается продвижением продуктов и услуг

Финансовый отдел

Данный отдел занимается всеми финансовыми операциями

Отдел кадров

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

2.7. Гипертекстовые ссылки.

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

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

Внимание! Вы можете использовать ссылки как для перемещения по документу, так и для перемещения от одного документа к другому. Однако HTML не поддерживает возврат на предыдущую ссылку, если перемещение происходило внутри документа. Если вы используете ссылки внутри документа, а затем нажимаете на клавишу Back, то вы не перейдете на предыдущую ссылку, а вернетесь на ту часть документа, которую вы просматривали до этого.

Графика внутри документа

Одна из наиболее привлекательных черт Web - возможность включения ссылок на графические и иные типы данных в HTML-документ. Делается это при помощи тэга <IMG...ISMAP>. Использование данного тэга позволяет значительно улучшить внешний вид и функциональность документов.

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

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop ISMAP>

Опишем элементы синтаксиса тэга:

URL:

Обязательный параметр, имеющий такой же синтаксис, как и стандартный URL. Данный URL указывает браузеру где находится рисунок. Рисунок должен храниться в графическом формате, поддерживаемом браузером. На сегодняшний день форматы GIF и JPG поддерживаются большинством браузеров.

ALT="text":

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

HEIGTH=n1:

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

WIDTH=n2:

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

ALIGN:

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

ISMAP:

Этот параметр сообщает браузеру, что данное изображение позволяет пользователю выполнять какие-либо действия, щелкая мышью на определенном месте изображения. Данная возможность является расширением HTML и будет обсуждена нами позже.

Приведем пример использования данного тэга:

<IMG SRC="http://www.softexpress.com/images/nekton.jpg" ALT="СофтСервис лого" ALIGN="top" ISMAP>

С версии HTML 2.0 у тэга <IMG> появились дополнительные параметры:

<IMG SRC="URL" ALT="text" HEIGHT=n1 WIDTH=n2 ALIGN=top|middle|bottom|texttop|absmiddle|baseline|absbottom BORDER=n3 VSPACE=n4 HSPACE=n5 ISMAP>

Новые параметры:

BORDER:

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

VSPACE:

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

HSPACE:

То же самое, что и VSPACE, но только по горизонтали.

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

Описание фонового рисунка включается в тэг BODY и выглядит следующим образом:

<BODY BACKGROUND="picture.gif">.

Задание стандартных цветов. Многие HTML-авторы любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Чтобы задать эти цвета, необходимо включить в тэг <BODY> дополнительные параметры:

<BODY BGCOLOR="#XXXXXX" TEXT="#XXXXXX" LINK="#XXXXXX">

где каждый из параметров определяет цвет того или иного элемента. Опишем эти параметры:

BGCOLOR:

Цвет фона документа

TEXT:

Цвет простого текста документа

LINK:

Цвет ссылки. Цвет задается шестизначным числом в шестнадцатеричном формате по схеме RGB (Red, Green, Blue). Цвет #000000 соответствует черному, а цвет #FFFFFF - белому. Например:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#9690CC">

Данная строка определяет белый цвет фона документа, черный текст и серебристые ссылки.

Горизонтальная линия. Используя тэг <HR>, вы можете разделить текст горизонтальной чертой.

Формат тэга:

<HR SIZE=number WIDTH=number|percent ALIGN=left|right|center NOSHADE>

Параметры тэга:

SIZE:

Толщина линии в пикселях.

WIDTH:

Ширина линии в пикселях или процентах от ширины окна браузера.

ALIGN:

Расположение на экране (слева | по центру | справа).

NOSHADE:

По умолчанию линия представлена в 3D виде с тенью. NOSHADE позволяет представить линию просто однотонной темной полоской.

2.8. Таблицы.

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

Основные тэги таблицы:

Таблица: <TABLE>...</TABLE>:

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

Строка таблицы: <TR>...</TR>:

Количество строк таблицы определяется количеством встречающихся пар тэгов <TR>..</TR>. Строки могут иметь атрибуты ALIGN и VALIGN, которые описывают визуальное положение содержимого строк в таблице.

Ячейка таблицы: <TD>...</TD>:

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=left и VALIGN=middle. Данное расположение может быть исправлено как на уровне описания строки, так и на уровне описания ячейки.

Заголовок таблицы: <TH>...</TH>:

Ячейка заголовка таблицы имеет ширину всей таблицы; текст в данной ячейке имеет атрибут BOLD и ALIGN=center.

Подпись: <CAPTION>...</CAPTION>:

Данный тэг описывает название таблицы (подпись). Тэг <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=top, но может быть явно установлен в ALIGN=bottom. ALIGN определяет, где - сверху или снизу таблицы - будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Основные атрибуты таблицы:

BORDER:

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

ALIGN:

Если атрибут ALIGN присутствует внутри тэгов <CAPTION> и </CAPTION>, то он определяет положение подписи для таблицы (сверху или снизу). По умолчанию ALIGN=top. Если атрибут ALIGN встречается внутри <TR>, <TH> или <TD>, он управляет положением данных в ячейках по горизонтали. Может принимать значения left (слева), right (справа) или center (по центру).

VALIGN:

Данный атрибут встречается внутри тэгов <TR>, <TH> и <TD>. Он определяет вертикальное размещение данных в ячейках. Может принимать значения top (вверху), bottom (внизу), middle (по середине) и baseline (все ячейки строки прижаты кверху).

NOWRAP:

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

COLSPAN:

Указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчании - 1.

ROWSPAN:

Указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчании - 1.

COLSPEC:

Данный параметр позволяет задавать фиксированную ширину колонок либо в символах, либо в процентах, например COLSPEC="20%".

2.9. Оптимизация графики для Web

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF.

JPEG-формат хорошо передает цветовые и тоновые раскаты, размытые границы (например, фото). JPEG-файл хорошо масштабируется в браузере. Плохо передает ровные плоскости цвета, в компрессии уступает GIF-формату. При сохранении в JPEG-формате выбирайте качество "medium".

GIF-формат хорошо передает ровные плоскости цвета, жесткие границы (например, векторную графику, логотипы). Имеет максимальную компрессию, допускает прозрачный фон. Плохо масштабируется в браузере, искажает цветовые и тоновые раскаты. Используйте GIF-формат, если изображение без значительных потерь переводится в 128-цветовую гамму с включенной опцией "dithering". В противном случае лучше сохранять изображение в JPEG-формате. Для экспорта файла в GIF-формат сначала проиндексируйте его цветовую палитру в Adobe Photoshop:

1. Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения - 15-25 цветов) Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

2. По возможности избегайте включения опции "dithering"- она увеличивает размер файла. Эта опция необходима, только если в изображении присутствует цветовой или тоновой раскат (напр. тень). Назначая прозрачный фон, после применения "dithering" убедитесь, что фон не стал "клетчатым".

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

2.10. Основы CSS.

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

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

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

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

Давайте рассмотрим, как мы можем воплотить столь замечательные возможности в жизнь.

Практическое освоение CSS. Как вам уже известно, информация о стилях может располагаться либо в отдельном файле, либо непосредственно в коде Web-странички. Расположение описания стилей в отдельном файле имеет смысл в случае, если вы планируете применять эти стили к большему, чем одна, количеству страниц. Для этого нужно создать обычный текстовый файл, описать с помощью языка CSS необходимые стили, поместить этот файл на Web-сервере, а в коде Web-страниц, которые будут использовать стили из этого файла, нужно будет сделать ссылку на него. Делается это с помощью тега <LINK>, располагающегося внутри тега <BODY> ваших страниц:

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Первые два параметра этого тега являются зарезервированными именами, требующимися для того, чтобы сообщить браузеру, что на этой страничке будет использоваться CSS. Третий параметр – HREF= «URL» – указывает на файл, который содержит описания стилей. Этот параметр должен содержать либо относительный путь к файлу – в случае, если он находится на том же сервере, что и документ, из которого к нему обращаются – или полный URL («http://...») в случае, если файл стилей находится на другом сервере.

Второй вариант, при котором описание стилей располагается в коде Web- странички, внутри тега <BODY>, в теге <STYLE type="text/css">... </STYLE>. В этом случае вы можете использовать эти стили для элементов, располагающихся в пределах странички. Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Это делается с помощью параметра STYLE, используемого при применении CSS с большинством стандартных тегов HTML. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS – возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим.

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

НАЗВАНИЕ_ЭЛЕМЕНТА {свойство: значение;},

Где НАЗВАНИЕ_ЭЛЕМЕНТА – имя HTML -тега (H1, P, TD, A и т. д.), а параметры в фигурных скобках – список свойств элемента и присвоенных им значений. Более подробно команды языка CSS мы рассмотрим чуть позже.

Пример:

H1 {font-size: 30pt; color: blue;}

В этом примере всем заголовкам на странице, оформленным тегом Н1, присваивается размер шрифта 30 пунктов и синий цвет.

Также элементы страниц, созданные с использованием CSS, используют механизм наследования: т. е. если вы располагаете изображение внутри тега <P>...</P>, оформленного с помощью CSS, с отступами, так, чтобы параграф занимал только определенную часть ширины страницы, изображение также унаследует значения отступов, указанные для этого параграфа.

CSS реализует возможность присваивать стили не всем одинаковым элементам страницы, а избирательно – для этого используется параметр CLASS = "имя класса" или идентификатор ID=«имя элемента», присваивающиеся любому элементу страницы. Рассмотрим эти возможности подробнее.

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

Пример:

.b-с {font-weight: bold; text-align: center}

– описание стиля для класса b-с

Все элементы класса b-с будут отображаться жирным шрифтом с выравниванием по центру страницы (или ячейки таблицы).

<P CLASS="b-с">Текст параграфа</P>

– параграфу присвоен стиль класса bс.

<TD CLASS="b-c">текст</TD>

– ячейке таблицы присвоен стиль класса b-c.

Содержащийся в ячейке текст будет отображаться согласно описанию класса.

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

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

Свойства элементов, управляемых с помощью CSS. В настоящее время язык CSS насчитывает довольно большое количество свойств элементов HTML, которыми он может управлять. Но из-за того, что этот стандарт еще очень молод, в полном объеме его пока не поддерживают наиболее популярные браузеры (Netscape Navigator и Microsoft Internet Explorer). Последние версии этих браузеров могут работать с довольно большим количеством команд CSS, а вот 3-и версии или совсем не поддерживают его (Netscape Navigator 3), или поддерживают, но лишь частично (Microsoft IE 3). Более того, поскольку разработчики из этих компаний никак не могут договориться между собой, последние версии браузеров поддерживают неодинаковый набор свойств CSS. Все это делает малоприемлемым использование CSS в полном объеме, так как, при использовании CSS для форматирования элементов страницы и просмотре ее с помощью браузера версии ниже 4 й, есть большая вероятность увидеть нечто такое, что вам не понравится. Поэтому будет разумнее воздержаться от использования CSS для форматирования основной структуры страниц до всеобщего перехода на последние версии браузеров. В то же время, применяя «безопасные», т. е. совместимые с максимальным количеством браузеров элементы CSS, вы можете сильно облегчить себе жизнь и сделать ваши Web-странички более привлекательными в плане шрифтового оформления, а пользователи, путешествующие по Internet с помощью устаревших браузеров, просто этого не увидят, но также они не увидят и тех кошмаров, которые появляются при использовании CSS для верстки страниц.

Таблица 2 -  Тэги CSS.

СВОЙСТВА ШРИФТА

font-family

Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.P {font-family: Times New Roman, sans-serif;}

font-weight

Определяет степень жирности шрифта с помощью трех параметров: lighter, bold, bolderB {font-weight: bolder;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size: 400pt;}

font-size

Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)H1 {font-size: 200%;}H2 {font-size: 150px;}H3 {font-size: 400pt;}

ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

color

Определяет цвет элементаI {color: yellow;}

background-color

Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Обратите внимание, что браузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом. Посмотрите пример (рис. 3, 4 ), вот его исходный код:<HTML><HEAD><TITLE>Пример использования CSS</TITLE><STYLE type=”text/css”>H1 {font-size: 300%;}</STYLE></HEAD><BODY bgcolor=white><center><BR><H1 style=”background-color: teal; color: white;”>Cascading</H1><H1 style=”background-color: navy; color: yellow;”>Style</H1><H1 style=”background-color: gold; color: brown;”>Sheets</H1></BODY></HTML>В этом примере в разделе <STYLE> всем элементам <Н1> на этой страничке был установлен размер 300 % от нормы. Затем каждому из элементов <H1> были присвоены собственные значения цвета фона и цвета символов.

СВОЙСТВА ТЕКСТА

text-decoration

Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текстH4 {text-decoration: underline;}A {text-decoration: none;}.wrong {text-decoration: line-through;}

text-align

Определяет выравнивание элемента. P {text-align: justify}H1 {text-align: center}

text-indent

Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.P {text-indent: 50pt;}

line-height

Управляет интервалами между строками текста.P {line-height: 50 %}

СВОЙСТВА ГРАНИЦ

marginleft

Устанавливают значения отступов вокруг элемента.IMG { margin-right: 20pt}P { margin-left: 2cm}

margin-rightmargin-rightmargin-top

Устанавливают значения отступов вокруг элемента.IMG { margin-right: 20pt}P { margin-left: 2cm}

ЕДИНИЦЫ ИЗМЕРЕНИЯ

px

Пикселы

cm

Сантиметры

mm

Миллиметры

pt

Пункты (типограф.)

%

Проценты

Итак, перейдем к изучению безопасных элементов CSS. Описание свойств элементов в CSS состоит из названия свойства с последующим присвоением ему определенного значения. Название свойства и его значение разделены двоеточием.

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

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

Есть еще одна небольшая, но очень полезная хитрость – это способ скрыть от устаревших браузеров описания стилей, располагающихся в теге <STYLE>, внутри раздела<HEAD>. Поскольку браузер был написан несколько лет назад, когда никакого CSS еще и в планах не было, он просто не поймет, что это такое написано внутри <STYLE>…</STYLE>, и выдаст все описания стилей на страничку, как обычный текст. Для того чтобы предотвратить это, необходимо заключить описания стилей в тег комментариев. Делается это очень просто.

<HEAD>

<STYLE type="text/css">

<!--

описания стилей

-- >

</STYLE>

</HEAD>

где

<!-- – тег, открывающий комментарий, а> – закрывающий.

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

Еще один из интересных вариантов применения CSS скрывается за, казалось бы, простой возможностью: вы можете указывать значения отступов вокруг объектов, как отрицательные величины! Это позволяет накладывать один слой текста на другой и получать весьма интересные и привлекательные результаты.

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

Создадим новый html-файл и составим описание стилей для трех объектов:

<HEAD>

<STYLE type="text/css">

BODY {font-family: Verdana; font-size: 70pt; font-weight: bold;}

.z1 { color: silver; margin-top: 100px; margin-left: 70px;}

.z2 {color: navy; margin-top: -118px; margin-left: 68px;}

</STYLE>

</HEAD>

В этом описании мы присвоили <BODY> (впрочем, это мог быть практически любой другой тег) размер, шрифт и начертание – в таком стиле будут отображаться все элементы страницы. Это было сделано лишь ради стремления уменьшить размер файла странички, вместо этого можно было описать эти параметры дважды: для каждого из классов z. Далее мы описываем два стиля, которые отличаются цветом и размером отступов вокруг них: нижний слой описывается стилем z1, а верхний – z2. Используя отрицательные значения отступов и подбирая нужное значение, мы добиваемся того, что верхний слой как бы наползает на предыдущий...

<BODY bgcolor=white>

<DIV class="z1">EC-NET</DIV>

<DIV class="z2">EC-NET</DIV>

</BODY>

Откроем наш любимый Web-редактор и создадим файл с будущим названием styles.css (название файла может быть любым). Опишем в этом файле стиль параграфа <P>, который будет использоваться на всех страничках нашего сайта:

P {

font-family: Times New Roman, serif;

color: #000000;

margin-left: 15%;

margin-right: 15%;

margin-top: 1pt;

margin-bottom: 1pt;

text-indent: 1cm;

text-align: justify;

}

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

В этом стиле мы задали, что параграфы <P> на всех страничках, которые используют это описание, будут отображаться шрифтом Times New Roman или в случае, если этот шрифт на машине не установлен, другим шрифтом, но из этого семейства (serif). Цвет шрифта мы установили черный, выравнивание – полное (по обеим сторонам).

Также мы установили для параграфа ряд значений отступов. Это было сделано со следующей целью: по умолчанию параграф в HTML отображается равным практически 95 % страницы и с интервалами между параграфами, равными 180 % межстрочного интервала. Читать такие параграфы не очень удобно, так как интервалы между ними слишком велики, а ширина параграфа слишком большая. Посмотрите на журнал, который вы сейчас держите в руках: текст сверстан в колонки для того, чтобы его было удобнее читать. В стиле параграфа, который мы создали, установлены боковые отступы в 15 % ширины окна и вертикальные отступы в 1 пункт – так текст статьи будет гораздо читабельнее.

Давайте так же создадим стиль для заголовков статей:

H2 {

font-family: Verdana, Arial Cyr, Arial;

font-weight: bold;

font-size: 14pt;

color: black;

margin-left: 20%;

margin-top: 1cm;

text-align: left;

}

Все заголовки наших страниц, оформленные тегом <H2>, будут отображаться жирным шрифтом Verdana или, если этот шрифт не установлен, шрифтом Arial. Размер заголовка мы установим равным 14 пунктам, цвет черный, отступ слева равен 20 % ширины страницы, а отступ сверху – 1 см. Заголовок будет выравниваться относительно левого края страницы.

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

Для того чтобы «привязать» созданные нами стили к нашим страничкам, во все html-файлы в разделе <HEAD> мы должны поместить строку со ссылкой на файл стилей и с указанием об использовании CSS:

<LINK REL=STYLESHEET TYPE="text/css" HREF="styles.css">

Поскольку файл со стилями будет находиться в том же каталоге сервера, что и остальные странички, параметр HREF="URL" в нашем случае будет просто именем нашего файла стилей (styles.css).


3. Виды компьютерной графики

3.1. Растровая графика.

Растровый графический редактор — специализированная программа, предназначенная для создания и обработки изображений. Подобные программные продукты нашли широкое применение в работе художников-иллюстраторов, при подготовке изображений к печати типографским способом или на фотобумаге, публикации в интернете. 
Растровые графические редакторы позволяют пользователю рисовать и редактировать изображения на экране компьютера, а также сохранять их в различных растровых форматах, таких как, например, JPEG и TIFF, позволяющих сохранять растровую графику с незначительным снижением качества за счёт использования алгоритмов сжатия с потерями, PNG и GIF, поддерживающими хорошее сжатие без потерь, и BMP, также поддерживающем сжатие (RLE), но в общем случае представляющем собой несжатое «попиксельное» описание изображения. 

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

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

·     разрешение оригинала;

·     разрешение экранного изображения;

·     разрешение печатного изображения.

3.1.1. Разрешение оригинала. 

Разрешение оригинала измеряется в точках на дюйм (dots per inch – dpi) и зависит от требований к качеству изображения и размеру файла, способу оцифровки и создания исходной иллюстрации, избранному формату файла и другим параметрам. В общем случае действует правило: чем выше требование к качеству, тем выше должно быть разрешение оригинала.

3.1.2. Разрешение экранного изображения.  

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

Мониторы для обработки изображений с диагональю 20–21 дюйм (профессионального класса), как правило, обеспечивают стандартные экранные разрешения 640х480, 800х600, 1024х768,1280х1024,1600х1200,1600х1280, 1920х1200, 1920х1600 точек. Расстояние между соседними точками люминофора у качественного монитора составляет 0,22–0,25 мм.

Для экранной копии достаточно разрешения 72 dpi, для распечатки на цветном или лазерном принтере 150–200 dpi, для вывода на фотоэкспонирующем устройстве 200–300 dpi. Установлено эмпирическое правило, что при распечатке величина разрешения оригинала должна быть в 1,5 раза больше, чем линиатура растра устройства вывода. В случае, если твердая копия будет увеличена по сравнению с оригиналом, эти величины следует умножить на коэффициент масштабирования.

3.1.3. Разрешение печатного изображения и понятие линиатуры. 

Размер точки растрового изображения как на твердой копии (бумага, пленка и т. д.), так и на экране зависит от примененного метода и параметров растрирования оригинала. При растрировании на оригинал как бы накладывается сетка линий, ячейки которой образуют элемент растра. Частота сетки растра измеряется числом линий на дюйм (lines per inch – Ipi) и называется линиатурой.

Размер точки растра рассчитывается для каждого элемента и зависит от интенсивности тона в данной ячейке. Чем больше интенсивность, тем плотнее заполняется элемент растра. То есть, если в ячейку попал абсолютно черный цвет, размер точки растра совпадет с размером элемента растра. В этом случае говорят о 100% заполняемости. Для абсолютно белого цвета значение заполняемости составит 0%. На практике заполняемость элемента на отпечатке обычно составляет от 3 до 98%. При этом все точки растра имеют одинаковую оптическую плотность, в идеале приближающуюся к абсолютно черному цвету. Иллюзия более темного тона создается за счет увеличения размеров точек и, как следствие, сокращения пробельного поля между ними при одинаковом расстоянии между центрами элементов растра. Такой метод называют растрированием самплитудной модуляцией (AM).

Интенсивность тона (так называемую светлоту) принято подразделять на 256 уровней. Большее число градаций не воспринимается зрением человека и является избыточным. Меньшее число ухудшает восприятие изображения (минимально допустимым для качественной полутоновой иллюстрации принято значение 150 уровней). Нетрудно подсчитать, что для воспроизведения 256 уровней тона достаточно иметь размер ячейки растра 256 = 16 х 16 точек.

При выводе копии изображения на принтере или полиграфическом оборудовании линиатуру растра выбирают, исходя из компромисса между требуемым качеством, возможностями аппаратуры и параметрами печатных материалов. Для лазерных принтеров рекомендуемая линиатура составляет 65-100 Ipi, для газетного производства – 65-85 lpi, для книжно-журнального – 85-133 lpi, для художественных и рекламных работ – 133-300 lpi.

При печати изображений с наложением растров друг на друга, например многоцветных, каждый последующий растр поворачивается на определенный угол. Традиционными для цветной печати считаются углы поворота: 105 градусов для голубой печатной формы, 75 градусов для пурпурной, 90 градусов для желтой и 45 градусов для черной. При этом ячейка растра становится косоугольной, и для воспроизведения 256 градаций тона с линиатурой 150 lpi уже недостаточно разрешения 16х150=2400 dpi. Поэтому для фотоэкспонирующих устройств профессионального класса принято минимальное стандартное разрешение 2540 dpi, обеспечивающее качественное растрирование при разных углах поворота растра. Таким образом, коэффициент, учитывающий поправку на угол поворота растра, для цветных изображений составляет 1,06.

3.1.4. Динамический диапазон.

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

Для оптических сред, пропускающих свет, динамический диапазон лежит в пределах от 0 до 4. Для поверхностей, отражающих свет, значение динамического диапазона составляет от 0 до 2. Чем выше динамический диапазон, тем большее число полутонов присутствует в изображении и тем лучше качество его восприятия.

3.1.5. Связь между параметрами изображения и размером файла.

 Средствами растровой графики принято иллюстрировать работы, требующие высокой точности в передаче цветов и полутонов. Однако размеры файлов растровых иллюстраций стремительно растут с увеличением разрешения. Фотоснимок, предназначенный для домашнего промотра (стандартный размер 10х15 см, оцифрованный с разрешением 200-300 dpi, цветовое разрешение 24 бита), занимает в формате TIFF с включенным режимом сжатия около 4 Мбайт. Оцифрованный с высоким разрешением слайд занимает 45-50 Мбайт. Цветоделенное цветное изображение формата А4 занимает 120-150 Мбайт.

3.1.6. Масштабирование растровых изображений.

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

Рисунок 2 - Эффект пикселизации при масштабировании растрового изображения.

3.1.7. Adobe Photoshop.

        Adobe Photoshop — растровый графический редактор, разработанный и распространяемый фирмой Adobe Systems. Этот продукт является лидером рынка в области коммерческих средств редактирования растровых изображений, и наиболее известным продуктом фирмы Adobe. Часто эту программу называют просто Photoshop. В настоящее время Photoshop доступен на платформах Mac OS X/Mac OS и Microsoft Windows. Ранние версии редактора были портированы под SGI IRIX, но официальная поддержка была прекращена начиная с третьей версии продукта. Несмотря на то, что изначально программа была разработана для редактирования изображений для печати на бумаге (прежде всего, для полиграфии), в данное время она широко используется в веб-дизайне. В более ранней версии была включена специальная программа для этих целей — Adobe ImageReady, которая была исключена из версии CS3 за счёт интеграции её функций в самом Photoshop. 
Photoshop тесно связан с другими программами для обработки медиафайлов, анимации и другого творчества. Совместно с такими программами, как Adobe ImageReady (программа упразднена в версии CS3), Adobe Illustrator, Adobe Premiere, Adobe After Effects и Adobe Encore DVD, он может использоваться для создания профессиональных DVD, обеспечивает средства нелинейного монтажа и создания таких спецэффектов, как фоны, текстуры и т. д. для телевидения, кинематографа и всемирной паутины. Основной формат Photoshop, PSD, может быть экспортирован и импортирован во весь ряд этих программных продуктов. Photoshop CS поддерживает создание меню для DVD. Совместно с Adobe Encore DVD, Photoshop позволяет создавать меню или кнопки DVD. Photoshop CS3 в версии Extended поддерживает также работу с трёхмерными слоями. 
         Photoshop поддерживает следующие цветовые модели: 

  1.  RGB 
  2.  LAB 
  3.  CMYK
  4.  Grayscale
  5.  BitMap 
  6.  Duotone 
               

Последние версии включают в себя Adobe Camera RAW — плагин, разработанный Томасом Кноллом, который позволяет читать ряд RAW-форматов различных цифровых камер и импортировать их напрямую в Photoshop.

Поддерживается обработка изображений, с глубиной цвета 8 бит (256 градаций на один канал), 16 бит (используется 15 битов плюс один уровень, то есть 32769 уровней) и 32 бит (используются числа одинарной точности с плавающей запятой). Возможно сохранение в файле дополнительных элементов, как то: направляющих (Guide), каналов (например, канала прозрачности — Alpha channel), путей обтравки (Clipping path), слоёв, содержащих векторные и текстовые объекты. Файл может включать цветовые профили (ICC), функции преобразования цвета (transfer functions). Допускаются неквадратные пиксели (

Рисунок 3 - Среда Adobe Photoshop.

3.1.8. GIMP. 

GNU Image Manipulation Program или GIMP (Гимп) — растровый графический редактор, программа для создания и обработки растровой графики. Частично поддерживается векторная графика. Проект основан в 1995 году Спенсером Кимбелломи Питером Маттисом как дипломный проект, в настоящий момент поддерживается группой добровольцев. Распространяется на условиях GNU General Public License. 
Изначально сокращение «GIMP» означало англ. General Image Manipulation Program, а в 1997 году полное название было изменено на «GNU Image Manipulation Program», и программа официально стала частью проекта GNU. 
Типичные задачи, которые можно решать при помощи GIMP, включают в себя создание графики и логотипов, масштабирование и кадрирование фотографий, раскраска, комбинирование изображений с использованием слоёв, ретуширование и преобразования изображений в различные форматы. 
GIMP является одним из первых действительно пользовательских свободных приложений.
       GIMP является высококачественным приложением для фоторетуши и позволяет создание оригинальных изображений; высококачественным приложением для создания экранной и веб-графики; является платформой для создания мощных и современных алгоритмов обработки графики учёными и дизайнерами; позволяет автоматизировать выполнение повторяющихся действий; легко расширяем за счёт простой установки дополнений. 
       В GIMP присутствует достаточно неплохой набор инструментов цветокоррекции: 

  1.  кривые; 
  2.  уровни; 
  3.  микшер каналов;
  4.  постеризация; 
  5.  тон-насыщенность;
  6.  баланс цветов;
  7.  яркость-контраст;
  8.  обесцвечивание. 

При помощи фильтров, инструментов, масок и слоёв с разными типами наложения (всего 22) можно: 

- выравнивать заваленный горизонт; 
-  убирать искажения, вносимые оптикой; 
-  корректировать перспективу; 
-  выполнять клонирование объектов с учётом перспективы; 
-  кадрировать фотографии; 
-  удалять дефекты вроде пыли на матрице (штамп, лечебная кисть); 
-  имитировать использование различных цветофильтров; 
-  «вытаскивать» потерянную детализацию в тенях; 
-  реализовано управление цветом. 
Рисование 
- несколько рисующих инструментов; 
-  свободно масштабируемые кисти; 
-  поддержка графических планшетов. 
Экранные фильтры. 

Дополнительные возможности по коррекции изображений на протяжении всей работы реализованы в виде экранных фильтров. К ним относятся: имитация разных типов дальтонизма (протанопия, дейтеронопия, тританопия); 

-  гамма-коррекция; 
-  коррекция контраста; 
-  управление цветом. 
Настраиваемый интерфейс. 

Плавающие палитры легко группируются и перегруппируются; 
возможна полная перенастройка клавиатурных комбинаций, действий мыши, а также устройств ввода вроде Griffin Powermate; 
любое меню можно превратить в свободно перемещаемое окно (GNU/Linux/UNIX). 

Автоматизация. 

Отсутствие средств автоматической записи сценариев компенсируется в GIMP большим числом языков, на которых можно писать сценарии: 
- TinyScheme, иначе Script-Fu (в комплекте с программой); 
-  Python (в комплекте с программой); 
-  Ruby; 
-  Perl;  
-  Java (экспериментально, часть проекта gimp-sharp); 
-  Tcl (в настоящее время не поддерживается). 

С помощью этих инструментов можно писать как интерактивные сценарии и модули для GIMP, так и создавать изображения полностью автоматически, например, генерировать «на лету» изображения для веб-страниц внутри программ CGI или выполнять пакетную цветокоррекцию и преобразования изображений. Следует отметить, что для пакетной обработки изображений всё же лучше подходят пакеты наподобие ImageMagick. 


Рисунок 4 –  Среда GIMP.

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

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

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

3.2.1. Математические основы векторной графики.

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

Точка. Этот объект на плоскости представляется двумя числами (х, у), указывающими его положение относительно начала координат.

Рисунок 5  - Объекты векторной графики.

Прямая линия. Ей соответствует уравнение

y=kx+b.                                     (1)

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

Отрезок прямой. Он отличается тем, что требует для описания еще двух параметров – например, координат x1 и х2 начала и конца отрезка.

Кривая второго порядка. К этому классу кривых относятся параболы, гиперболы, эллипсы, окружности, то есть все линии, уравнения которых содержат степени не выше второй. Кривая второго порядка не имеет точек перегиба. Прямые линии являются всего лишь частным случаем кривых второго порядка. Формула кривой второго порядка в общем виде может выглядеть, например, так:

x2+a1y2+a2xy+a3x+a4y+a5=0.                            (2)

Таким образом, для описания бесконечной кривой второго порядка достаточно пяти параметров. Если требуется построить отрезок кривой, понадобятся еще два параметра.

Кривая третьего порядка. Отличие этих кривых от кривых второго порядка состоит в возможном наличии точки перегиба. Например, график функции у = x3 имеет точку перегиба в начале координат (рис. 15.5). Именно эта особенность позволяет сделать кривые третьего порядка основой отображения природных объектов в векторной графике. Например, линии изгиба человеческого тела весьма близки к кривым третьего порядка. Все кривые второго порядка, как и прямые, являются частными случаями кривых третьего порядка.

В общем случае уравнение кривой третьего порядка можно записать так:

x3+a1y3+a2x2y+a3xy2+a4x2+a5y2+a6xy+a7x+a8y+a9=0.               (3)

Таким образом, кривая третьего порядка описывается девятью параметрами. Описание ее отрезка потребует на два параметра больше.

Рисунок 6 - Кривая третьего порядка и кривая Безье.

Кривые Безье. Это особый, упрощенный вид кривых третьего порядка (см. рис. 6). Метод построения кривой Безье (Bezier)основан на использовании пары касательных, проведенных к отрезку линии в ее окончаниях. Отрезки кривых Безье описываются восемью параметрами, поэтому работать с ними удобнее. На форму линии влияет угол наклона касательной и длина ее отрезка. Таким образом, касательные играют роль виртуальных “рычагов”, с помощью которых управляют кривой.

3.2.2. Adobe Illustrator.

Adobe Illustrator — векторный графический редактор, разработанный и распространяемый фирмой Adobe Systems. 
Adobe Illustrator был задуман как редактор векторной графики, однако дизайнеры используют его в самых разных целях. Он очень удобен для быстрой разметки страницы с логотипом и графикой — простого одностраничного документа, не содержащего текст. 
  Adobe Illustrator, первоначально разработанный для платформы Macintosh, — известная и широко используемая программа создания изображений. Существуют версии для Macintosh, Microsoft windows и NeXT. Мощные возможности Adobe Illustrator обусловлены тем, что в качестве графических объектов здесь реализованы кривые Безье, а также наличием простого пользовательского интерфейса, который обеспечивает точное позиционирование сплайновых графических объектов. Использование кривых Безье дает некоторые преимущества при моделировании естественных (а в определенных случаях и искусственных) объектов, файлы Adobe Illustrator применяются для обмена графическими элементами.
          Формат AI инкапсулирует и формализует в структурированном файле подмножество языка описания страницы (PDL) PostScript. Такие файлы предназначены для отображения на принтере PostScript, но могут включать и растровую версию изображения, обеспечивая тем самым его предварительный просмотр. PostScript в полной реализации представляет собой мощный и сложный язык и способен определять почти все, что может быть отображено на двумерном устройстве вывода, формат AI адаптирован для хранения традиционных графических данных: рисунков, чертежей и декоративных надписей. Отметим все же, что файлы AI могут быть очень сложными. Мощь PostScript обусловлена в основном возможностью определять последовательности операций и затем объединять их простыми синтаксическими средствами. Эта скрытая сложность в файлах Adobe Illustrator иногда (но не всегда) сводится к минимуму.  Простые файлы AI конструировать довольно легко, и прикладная программа сможет создавать файлы, которые будут прочитаны любой программой чтения AI и распечатаны на любом PostScript-принтере. А вот чтение файлов AI — совсем другое дело. Некоторые операции могут оказаться слишком сложными для реализации и моделирования программой визуализации. Поэтому разработчики часто предпочитают не визуализировать изображение из данных этого подмножества PostScript. Тем не менее следует отметить, что, как правило, почти все изображение можно реконструировать простыми операциями. Если хотите разработать программу чтения файлов Adobe Illustrator, то рекомендуем в качестве подсказки воспользоваться исходными текстами системы GNU GhostScript, которая содержит почти полную реализацию языка PostScript. 
           PostScript, а, следовательно, и его подмножество AI, представляет собой особый язык со своими правилами. Поэтому, прежде чем начать работать с AI-файлами и изучать спецификацию и ознакомится с документацией по PostScript.

3.2.3. Corel Draw.

CorelDRAW Graphics Suite X4 предоставляет все необходимые инструменты для продуктивной работы современного дизайнера. Интуитивно понятные инструменты для векторного иллюстрирования и макетирования страниц позволяют создавать великолепные дизайнерские решения. Профессиональное программное обеспечение для редактирования фотографий помогает ретушировать и улучшать фотографии. Растровые изображения можно легко преобразовать в редактируемые и масштабируемые векторные файлы. Каким бы ни был ваш проект, CorelDRAW Graphics Suite X4 упростит рабочий процесс и вдохновит вас новыми возможностями для творчества. 
Уже многие годы CorelDraw является основным рабочим инструментом для большинства дизайнеров и художников, работающих в среде Windows. Пакет приложений CorelDraw 6 Suite для Power Macintosh, как и его родственник для Windows, воплощает философию компании Corel - "чем больше, тем лучше". Набор содержит восемь приложений и утилит: недавно приобретенный Corel текстовый процессор WordPerfect 3.5, CorelDream 3D 6 (моделирование и рендеринг), CorelArtisan 6 (рисование и редактирование графики), а также CorelTexture (генератор текстур), плюс к этому - 1000 шрифтов Type 1 и 1000 изображений в формате Photo CD. Наш обзор посвящен, главным образом, модулю иллюстративной двухмерной графики CorelDraw. 
           Главное место на рабочем экране CorelDraw занимает настраиваемая панель инструментов. Стандартная панель инструментов позволяет в большинстве случаев одним щелчком получить быстрый доступ к функциям меню File и Edit. Но за внешне простым интерфейсом скрывается множество дополнительных инструментальных панелей. Панель цветов позволяет работать с цветовыми пространствами RGB, CMYK, HSV, HSB, LAB, YIQ и градациями серого. Можно также выбрать цветовую палитру из восьми вариантов, в том числе Pantone и Trumatch, или создать свою собственную. 
           Инструменты CorelDraw способствуют эффективной работе с минимальными перемещениями мыши, а также дают возможность точного численного задания параметров. Многие мощные возможности, типа команды Blend, поддерживают динамическое связывание. Эффект Blend применим к объектам, для которых произведено заполнение с градационным переходом цветов. Инструменты заполнения CorelDraw предлагают исключительное разнообразие типов заполнений: ровный цвет, PostScript, векторные или растровые шаблоны (включая 24-разрядные цветные фотографии), фрактальные текстуры и четыре типа заполнений с градациями. Фрактальные заполнения создают огромное разнообразие интересных текстур и поверхностей, хотя побочным эффектом такой гибкости при высоких разрешениях может стать катастрофическое снижение производительности. Однако общее количество вариантов заполнения в CorelDraw позволяет создавать уникальные шаблоны и текстуры, что невозможно ни в Illustrator, ни во FreeHand. В действительности, CorelDraw - единственный из трех пакетов, в котором можно вставить растровое изображение в векторный объект и использовать его как мозаичный узор для заполнения. 
       К числу замечательных возможностей CorelDraw относятся его уникальные фильтры, которые называются Lens Effects. В роли линзы может выступить любая векторная форма, включая текст. А сам эффект применим к любому векторному или растровому объекту, который располагается под линзой. Объекты, расположенные под линзой, могут быть "заморожены". В этом случае создается копия только той части объекта, которая видима сквозь линзу. При этом сам объект остается в исходном состоянии и может редактироваться.

 

Рисунок 7 - Corel Draw.

3.3. Программные средства обработки трехмерной графики.

На персональных компьютерах основную долю рынка программных средств обработки трехмерной графики занимают три пакета. Эффективней всего они работают на самых мощных машинах (в двух- или четырехпроцессорных конфигурациях Pentium II/III, Xeon) под управлением операционной системы Windows NT.

Программа создания и обработки трехмерной графики 3D Studio Max фирмы Kinetix изначально создавалась для платформы Windows. Этот пакет считается “полупрофессиональным”. Однако его средств вполне хватает для разработки качественных трехмерных изображений объектов неживой природы. Отличительными особенностями пакета являются поддержка большого числа аппаратных ускорителей трехмерной графики, мощные световые эффекты, большое число дополнений, созданных сторонними фирмами. Сравнительная нетребовательность к аппаратным ресурсам позволяет работать даже на компьютерах среднего уровня. Вместе с тем по средствам моделирования и анимации пакет 3D Studio Max уступает более развитым программным средствам.

Программа Softimage 3D компании Microsoft изначально создавалась для рабочих станций SGI и лишь сравнительно недавно была конвертирована под операционную систему Windows NT. Программу отличают богатые возможности моделирования, наличие большого числа регулируемых физических и кинематографических параметров. Для рендеринга применяется качественный и достаточно быстрый модуль Mental Ray. Существует множество дополнений, выпущенных “третьими” фирмами, значительно расширяющих функции пакета. Эта программа считается стандартом “де-факто” в мире специализированных графических станций SGI, а на платформе IBM PC выглядит несколько тяжеловато и требует мощных аппаратных ресурсов.

Наиболее революционной с точки зрения интерфейса и возможностей является программа Мауа, разработанная консорциумом известных компаний (Alias, Wavefront, TDI). Пакет существует в вариантах для разных операционных систем, в том числе и Windows NT. Инструментарий Мауа сведен в четыре группы: Animation (анимация), Modeling (моделирование), Dynamic (физическое моделирование), Rendering (визуализация). Удобный настраиваемый интерфейс выполнен в соответствии с современными требованиями. На сегодняшний день Мауа является наиболее передовым пакетом в классе средств создания и обработки трехмерной графики для персональных компьютеров.

4. Представление графических данных.

4.1. Форматы графических данных.

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

TIFF (Tagged Image File Format). Формат предназначен для хранения растровых изображений высокого качества (расширение имени файла .TIF). Относится к числу широко распространенных, отличается переносимостью между платформами (IBM PC и Apple Macintosh), обеспечен поддержкой со стороны большинства графических, верстальных и дизайнерских программ. Предусматривает широкий диапазон цветового охвата – от монохромного черно-белого до 32-разрядной модели цветоделения CMYK. Начиная с версии 6.0 в формате TIFF можно хранить сведения о масках (контурах обтравки) изображений. Для уменьшения размера файла применяется встроенный алгоритм сжатия LZW.

PSD (PhotoShop Document). Собственный формат программы Adobe Photoshop (расширение имени файла .PSD), один из наиболее мощных по возможностям хранения растровой графической информации. Позволяет запоминать параметры слоев, каналов, степени прозрачности, множества масок. Поддерживаются 48-разрядное кодирование цвета, цветоделение и различные цветовые модели. Основной недостаток выражен в том, что отсутствие эффективного алгоритма сжатия информации приводит к большому объему файлов.

PCX. Формат появился как формат хранения растровых данных программы PC PaintBrush фирмы Z-Soft и является одним из наиболее распространенных (расширение имени файла .PCX). Отсутствие возможности хранить цветоделенные изображения, недостаточность цветовых моделей и другие ограничения привели к утрате популярности формата. В настоящее время считается устаревшим.

JPEG (Joint Photographic Experts Group). Формат предназначен для хранения растровых изображений (расширение имени файла .JPG). Позволяет регулировать соотношение между степенью сжатия файла и качеством изображения. Применяемые методы сжатия основаны на удалении “избыточной” информации, поэтому формат рекомендуют использовать только для электронных публикаций.

GIF (Graphics Interchange Format). Стандартизирован в 1987 году как средство хранения сжатых изображений с фиксированным (256) количеством цветов (расширение имени файла .GIF). Получил популярность в Интернете благодаря высокой степени сжатия. Последняя версия формата GIF89a позволяет выполнять чересстрочную загрузку изображений и создавать рисунки с прозрачным фоном. Ограниченные возможности по количеству цветов обусловливают его применение исключительно в электронных публикациях.

PNG (Portable Network Graphics). Сравнительно новый (1995 год) формат хранения изображений для их публикации в Интернете (расширение имени файла .PNG). Поддерживаются три типа изображений – цветные с глубиной 8 или 24 бита и черно-белое с градацией 256 оттенков серого. Сжатие информации происходит практически без потерь, предусмотрены 254 уровня альфа-канала, чересстрочная развертка.

WMF (Windows MetaFile). Формат хранения векторных изображений операционной системы Windows (расширение имени файла .WMF). По определению поддерживается всеми приложениями этой системы. Однако отсутствие средств для работы со стандартизированными цветовыми палитрами, принятыми в полиграфии, и другие недостатки ограничивают его применение.

EPS (Encapsulated PostScript). Формат описания как векторных, так и растровых изображений на языке PostScript фирмы Adobe, фактическом стандарте в области допечатных процессов и полиграфии (расширение имени файла .EPS). Так как язык PostScript является универсальным, в файле могут одновременно храниться векторная и растровая графика, шрифты, контуры обтравки (маски), параметры калибровки оборудования, цветовые профили. Для отображения на экране векторного содержимого используется формат WMF, а растрового – TIFF. Но экранная копия лишь в общих чертах отображает реальное изображение, что является существенным недостатком EPS. Действительное изображение можно увидеть лишь на выходе выводного устройства, с помощью специальных программ просмотра или после преобразования файла в формат PDF в приложениях Acrobat Reader, Acrobat Exchange.

PDF (Portable Document Format). Формат описания документов, разработанный фирмой Adobe (расширение имени файла .PDF). Хотя этот формат в основном предназначен для хранения документа целиком, его впечатляющие возможности позволяют обеспечить эффективное представление изображений. Формат является аппаратно-независимьм, поэтому вывод изображений допустим на любых устройствах – от экрана монитора до фотоэкспонирующего устройства. Мощный алгоритм сжатия со средствами управления итоговым разрешением изображения обеспечивает компактность файлов при высоком качестве иллюстраций.

4.2. Цвет и цветовые модели.

В компьютерной графике применяют понятие цветового разрешения (другое название – глубина цвета). Оно определяет метод кодирования цветовой информации для ее воспроизведения на экране монитора. Для отображения черно-белого изображения достаточно двух бит (белый и черный цвета). Восьмиразрядное кодирование позволяет отобразить 256 градаций цветового тона. Два байта (16 бит) определяют 65 536 оттенков (такой режим называют High Color). При 24-разрядном способе кодирования возможно определить более 16,5 миллионов цветов.

С практической точки зрения цветовому разрешению монитора близко понятие цветового охвата. Под ним подразумевается диапазон цветов, который можно воспроизвести с помощью того или иного устройства вывода (монитор, принтер, печатная машина и прочие). В соответствии с принципами формирования изображения аддитивным или субтрактивным методами разработаны способы разделения цветового оттенка на составляющие компоненты, называемые цветовыми моделями. В компьютерной графике в основном применяют модели RGB и HSB (для создания и обработки аддитивных изображений) и CMYK (для печати копии изображения на полиграфическом оборудовании). Цветовые модели расположены в трехмерной системе координат, образующей цветовое пространство, так как из законов Гроссмана следует, что цвет можно выразить точкой в трехмерном пространстве.

Первый закон Грассмана (закон трехмерности): любой цвет однозначно выражается тремя составляющими, если они линейно независимы. Линейная независимость заключается в невозможности получить любой из этих трех цветов сложением двух остальных.

Второй закон Грассмана (закон непрерывности): при непрерывном изменении излучения цвет смеси также меняется непрерывно. Не существует такого цвета, к которому нельзя было бы подобрать бесконечно близкий.

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

C1=R1R+G1G+B1B;                           (4)
C2=R2R+G2G+B2B; (5)
Cn=RnR+GnG+BnB; (6)
Cсумм=(R1+R2+…+Rn)R+(G1+G2+…+Gn)G+ (B1+B2+…+Bn)B.          (7)

4.2.1. Цветовая модель CIE Lab.

В 1920 году была разработана цветовая пространственная модель CIE Lab (Communication Internationale de I'Eclairageмеждународная комиссия по совещанию. L, a, b – обозначения осей координат в этой системе). Система является аппаратно независимой и потому часто применяется для переноса данных между устройствами. В модели CIE Lab любой цвет определяется светлотой (L) и хроматическими компонентами: параметром a, изменяющимся в диапазоне от зеленого до красного, и параметром b, изменяющимся в диапазоне от синего до желтого. Цветовой охват модели CIE Lab значительно превосходит возможности мониторов и печатных устройств, поэтому перед выводом изображения, представленного в этой модели, его приходится преобразовывать.

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

4.2.2. Цветовая модель RGB.

Цветовая модель RGB является аддитивной, то есть любой цвет представляет собой сочетание в различной пропорции трех основных цветов – красного (Red), зеленого (Green), синего (Blue). Она служит основой при создании и обработке компьютерной графики, предназначенной для электронного воспроизведения (на мониторе, телевизоре). При наложении одного компонента основного цвета на другой яркость суммарного излучения увеличивается. Совмещение трех компонентов дает ахроматический серый цвет, который при увеличении яркости приближается к белому цвету. При 256 градационных уровнях тона черному цвету соответствуют нулевые значения RGB, а белому – максимальные, с координатами (255,255,255).

4.2.3. Цветовая модель HSB.

Цветовая модель HSB разработана с максимальным учетом особенностей восприятия цвета человеком. Она построена на основе цветового круга Манселла. Цвет описывается тремя компонентами: оттенком (Hue), насыщенностью (Saturation) и яркостью (Brigfitness). Значение цвета выбирается как вектор, исходящий из центра окружности. Точка в центре соответствует белому цвету, а точки по периметру окружности – чистым спектральным цветам. Направление вектора задается в градусах и определяет цветовой оттенок. Длина вектора определяет насыщенность цвета. На отдельной оси, называемой ахроматической, задается яркость, при этом нулевая точка соответствует черному цвету. Цветовой охват модели HSB перекрывает все известные значения реальных цветов.

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

4.2.4. Цветовая модель CMYK.

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

голубой (cyan) = белый - красный = зеленый + синий;

пурпурный (magenta) = белый - зеленый = красный + синий;

желтый (yellow) = белый - синий = красный + зеленый.

Такой метод соответствует физической сущности восприятия отраженных от печатных оригиналов лучей. Голубой, пурпурный и желтый цвета называются дополнительными, потому что они дополняют основные цвета до белого. Отсюда вытекает и главная проблема цветовой модели CMY – наложение друг на друга дополнительных цветов на практике не дает чистого черного цвета. Поэтому в цветовую модель был включен компонент чистого черного цвета. Так появилась четвертая буква в аббревиатуре цветовой модели CMYK (Cyan, Magenta, Yellow, blacK). Для печати на полиграфическом оборудовании цветное компьютерное изображение необходимо разделить на составляющие, соответствующие компонентам цветовой модели CMYK. Этот процесс называют цветоделением. В итоге получают четыре отдельных изображения, содержащих одноцветное содержимое каждого компонента в оригинале. Затем в типографии с форм, созданных на основе цветоделенных пленок, печатают многоцветное изображение, получаемое наложением цветов CMYK.


ЗАКЛЮЧЕНИЕ

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

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

Все области применения - будь то инженерная и научная, бизнес и искусство - являются сферой применения компьютерной графики. Возрастающий потенциал ПК и их громадное число - порядка 100 миллионов - обеспечивает соблазнительную базу для капиталовложений и роста. Неизвестно, как долго продлиться тенденция удвоения капиталовложений, особенно под воздействием цен, однако  ожидается устойчивое 10% ежегодное повышение в последующие 5 лет. Сегодня особенно привлекательны для инвесторов компании, специализирующиеся на графических интерфейсах пользователя, объектно-ориентированных программах, виртуальной реальности и программном обеспечении параллельных процессов.

По увеличению числа графических терминалов от 100 в 1964 году до 50.000 в 1977 году, а уже в 1994 году 3 млн. рабочих станций и 60 млн. ПК используются только в США. Машинная графика имеет сегодня промышленную базу, оцениваемую в 36 млрд. долл., которая обеспечивает работой около 300 тысяч специалистов. Она продолжает лидировать в вопросах обеспечения нашего взаимодействия с компьютерами и организации доступа к информации. Мы вступаем в новую эпоху расширения полномочий графических систем при движении по информационной супермагистрали.


СПИСОК ИСПОЛЬЗОВАННЫХ ИСТОЧНИКОВ

1) Информатика: Базовый курс/С.В.  Симонович и др. – СПб.: «Питер», 2001

2) http://ru.wikipedia.org/wiki

3) Информатика: Практикум  по технологии работы на компьютере/од редакцией И.В. Макаровой. – 2-е издание. – М.: «Финансы и статистика», 1998.

4) Вин Дж. Искусство WEB-дизайна. Самоучитель. – СПб.: Питер, 2003. -224 с.

5) Григин И.Е. РНР 5.1. Руководство программиста. – СПб.: Питер, 2006. – 490с.

6) Дронов В.А. Самоучитель. Macromedia Dreamweaver 8. – СПб.: БХВ-Петербург, 2006. – 320 с.

7) Дунаев В. Самоучитель Java Script. 2-е издание. СПб.: Питер, 2006. – 395 с.

8) Кингсли-Хью Э., Кингсли-Хью К. Java Script 1.5. Учебный курс. – СПб.: Питер, 2002. – 272 с.

9) Комолова Н.В. HTML. Учебный курс. – СПб.: Питер, 2006. – 268 с.

10) Курушин В.Д. Графический дизайн и реклама. Самоучитель. – М.: ДМК Пресс, 2001. 272 с.

67



 

Другие похожие работы, которые могут вас заинтересовать.
14421. Рассмотрение дизайна логотипа в качестве основы фирменного стиля 21.3 KB
  Тема моей курсовой работы является актуальной так как рынок услуг постоянно развивается и всем компаниям необходимо иметь фирменный знак как основной атрибут стратегии развития возрастающего числа компаний. Только в одной стране существует более 500 тысяч предприятий для каждого из них вопрос о собственном логотипе как основе фирменного стиля становится наиболее острым поскольку его разработка длительный и сложный процесс. Для реализации данной цели были поставлены следующие задачи: определить понятие фирменного стиля...
20996. Графические объекты в среде Delphi 365.54 KB
  Цель работы: изучение графических возможностей среды Delphi для создания учебного материала по графике в Delphi. Для работы с графикой в Delphi существует библиотека визуальных компонентов VCL скрывающая механизм взаимодействия приложения с операционной системой и облегчающая работу с графикой. В каждом параграфе предлагается основной теоретический материал по теме практические задания с описанием пошагового выполнения действий для их выполнения вопросы для закрепления основных умений и навыков вырабатываемых в процессе изучения...
5674. Графические приемы в стилизации портрета 35.25 KB
  Стилизацию начали применять в работах художники с начала 18 века. Исследования стилизации портретного жанра дает возможность понять упрощенность, четкость, контрастность линейного рисунка, в основе которого лежит штрих, пятно, линия
1643. История европейского и отечественного дизайна 300.29 KB
  Дизайн – всего одно понятие, а включает в себя в нашем сознании: массовый и элитный дизайн, китч, стайлинг, поп-дизайн, единичный арт-дизайн, городской публишь-арт, архитектурный дизайн, промышленный дизайн, Web-дизайн, графический дизайн, кустарный дизайн, исторический футуро-дизайн
1628. РЕАЛИЗАЦИЯ САЙТА, СОЗДАНИЕ ЭЛЕМЕНТОВ ДИЗАЙНА 41.62 KB
  Интернет (англ. Internet, от лат. inter - между и англ. net - сеть), всемирная компьютерная сеть, соединяющая вместе тысячи сетей, включая сети вооруженных сил и правительственных организаций, образовательных учреждений, благотворительных организаций, индустриальных предприятий и корпораций всех видов, а также коммерческих предприятий
21081. ДИЗАЙН-ПРОЕКТ WEB-САЙТА ФАКУЛЬТЕТА АРХИТЕКТУРЫ И ДИЗАЙНА 1.87 MB
  Раньше сайты образовательных учреждений были довольно простыми и представляли собой сайты-визитки. Их создание происходило по довольно простому принципу: создавался сайт университета, а для факультетов создавались отдельные страницы. Это объяснялось тем, что интернет не являлся настолько значимым в жизни людей и не оказывал такого влияния на принимаемые решения.
2703. Анализ конкурентной среды регионального рынка услуг строительного дизайна 40.16 KB
  У предприятий сферы услуг как правило имеются рычаги воздействия на факторы конкурентоспособности оперируя которыми оно может обеспечивать определенный уровень конкурентоспособности на обслуживаемых рынках. Поскольку конкурентоспособность предприятия сферы услуг определяется не только внутренними факторами но и факторами внешней экономической среды предприятия процесс анализа конкурентоспособности предприятия должен включать два направления анализа: анализ факторов внутренней среды формирования конкурентоспособности предприятия; анализ...
76. Запуск AutoCAD, основные элементы интерфейса, основные графические примитивы 186.54 KB
  После загрузки utoCD на экране монитора появится его главное меню панели инструментов системное меню командная строка и т. Например: При построении окружности командная строка имеет вид: Commnd line Командная строка: 3P 2P TTR Center point : Элементы разделенные символом “ †являются дополнительными а элемент заключенный в треугольные скобки “ †является элементом “по умолчаниюâ€.Drw toolbr Панель инструментов “Чертитьâ€:Drw menuPoint Раздел главного меню “ЧертитьТочкаâ€: Single Point ТочкуCommnd line...
8162. Разработка дизайна и технологии изготовления женского гарнитура из золотого сплава с драгоценными камнями 2.14 MB
  Целью работы является разработка дизайна и технологии изготовления женского гарнитура из золотого сплава с драгоценными камнями. В связи с этим по заказу ООО Ювелирная компания Драгоценности Урала разработан дизайн и технология изготовления женского гарнитура из золотого сплава со вставками из сапфиров и рубинов. Целью данной дипломной работы является разработка дизайна и технологии изготовления...
17816. Основы Linux 45.52 KB
  Войти в свой домашний каталог. Для этого нужно сделать команду cd Вы находитесь в своем рабочем каталоге. Здесь хранятся ваши пользовательские файлы и настройки программ, которые вы используете. Создать следующую структуру каталогов и файлов,в домашнем каталоге создать каталог inform...
© "REFLEADER" http://refleader.ru/
Все права на сайт и размещенные работы
защищены законом об авторском праве.