Вы находитесь на странице: 1из 1357

Оглавление

Обзор курса и подготовка.................................................................................................................... 7

проект 1. мини-приложение .............................................................................................................39

проект 2. Веб-дизайн и планирование ..................................................................................... 204

проект 3. веб-разработка и внедрение ..................................................................................... 303

проект 4. веб-портфолио ................................................................................................................. 548

проект 5. интерактивная игра ...................................................................................................... 738

проект 6. цифровое повествование .......................................................................................... 968

проект 7. мобильное приложение ............................................................................................1153

проект 8. финальное веб-портфолио . .....................................................................................1334


Обзор курса и подготовка
«Цифровой дизайн: основы веб-дизайна» — одногодичный учебный курс, состоящий из от-
дельных проектов, который предназначен для получения профессиональных и коммуника-
ционных навыков в области профессионального веб-дизайна и разработки с использовани-
ем программных средств корпорации Adobe. Курс «Визуальный дизайн» развивает навыки
в четырех ключевых областях:
xx Управление проектом и совместная работа;
xx Дизайн;
xx Исследования и общение;
xx Профессиональная продукция с использованием инструментов веб-авторинга.
Учащиеся получают эти ключевые навыки по спирали — каждый проект добавляет более
сложные навыки к основным умениям.
Учебный курс «Цифровой дизайн» затрагивает каждую из этих областей, используя подход
проработки проектов. Каждый проект разделен на фазы, соответствующие процессам дизай-
на и разработки, начиная с планирования проекта и заканчивая его оценкой и запуском. Что-
бы приблизиться к среде профессиональной работы, учащиеся постепенно переносят свою
работу из индивидуального процесса в коллективный процесс.
Дизайн и техническая работа по своей природе интерактивны, поэтому проекты содержат
задания, требующие от учащихся проведения оценки с последующим редизайном и дора-
боткой. Особое внимание уделяется концепциям разработки и принципам тщательного, эф-
фективного дизайна.
На следующей диаграмме показана последовательность и этапы проекта.

Первый семестр. Мини-приложения, веб-дизайн и веб-разработка

Мини-
приложение Веб-дизайн
и планирование Веб-разработка
и внедрение
Веб-портфолио

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


интерактивного контента и приложений
Интерактивная игра
Цифровое
повествование Мобильное
приложение Финальное
веб-портфолио
8  Обзор курса и подготовка

Проекты первого семестра


В первом семестре учебного курса «Цифровой дизайн» (проекты 1-4) рассматриваются во-
просы, составляющие основу создания веб-продуктов: принципы графического дизайна,
проектная документация, раскадровки, веб-разработка, навыки совместного управления
проектами, такие как проведение интервью и планирование проекта, рецензирование и ре-
дизайн. Работы в проектах направлены на разработку эффективных коммуникаций, кото-
рые можно разместить во Всемирной паутине. Учащиеся разработают мини-приложение,
множество графических изображений, клиентский веб-сайт и веб-портфолио. Данный учеб-
ный курс обладает большой гибкостью.
В этом семестре акцент выполнен на такие ключевые навыки:
xx Навыки межличностного общения, такие как интервьюирование и ответы на отзывы;
xx Дизайн клиентских веб-сайтов;
xx Решение проблем с использованием доступных многочисленных перспектив;
xx Процесс дизайна и эффективного взаимодействия;
xx Коллективное обучение и оценка работы в среде совместной разработки;
xx Технические навыки продукции для Всемирной паутины.
В первом семестре учащиеся используют программные продукты Adobe Photoshop CS6,
Adobe Illustrator CS6 и Adobe Fireworks CS6 для создания статичной и интерактивной гра-
фики. Для дизайна и разработки веб-сайтов используется программа Adobe Dreamweaver
CS6. Данный материал подготовит учащихся к сдаче экзамена «Сетевые коммуникации с
использованием Adobe Dreamweaver CS6».

Проекты второго семестра


Во втором семестре курса «Цифровой дизайн» (проекты 5-8) подход сосредоточен на полу-
чении навыков дизайна и разработки с основным акцентом на разработке многофункцио-
нального интерактивного контента. Учащиеся продолжат работу индивидуально и в группах
и займутся созданием многофункционального интерактивного контента, таким как интерак-
тивные игры, цифровые повествования и мобильные приложения. Основное внимание об-
ращается на дизайн многофункционального интерактивного контента, раскадровки мульти-
медийных элементов, технических заданиях на разработку и итеративной работе совместно
с клиентами. Учащиеся подготовят проектную документацию и визуальные компоненты,
которые оценят клиенты. Учащиеся разработают проекты в сфере многофункционального
интерактивного контента, которые решают конкретные задачи коммуникации. Учащиеся
разовьют технические навыки, чтобы выполнить требования клиентов.
В этом семестре акцент выполнен на такие ключевые навыки:
xx Навыки межличностного общения, такие как интервьюирование и ответы на отзывы;
xx Навыки общения с клиентами, с использованием проектной документации или специ­
фикаций;
Цифровой дизайн: основы веб-дизайна  9

xx Дизайн и редизайн в соответствии с требованиями клиента;


xx Технические навыки работы с мультимедийными объектами, такие как киноэффекты и
переходы;
xx Разработка решений, включающих эффективные системы навигации и цифровые пове-
ствования.
Во втором семестре учащиеся получат навыки работы в программе Adobe Flash Professional
CS6 для реализации проектов, требующих наличия многофункционального интерактивного
контента. Данный материал подготовит учащихся к сдаче экзамена «Работа с многофункци-
ональным интерактивным контентом в Adobe Flash Professional CS6».

Другие модели обучения


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

Программно-ориентированная модель
Опираясь на данный курс, вы можете сосредоточиться на обучении работе с конкретными
программами — Adobe Fireworks CS6, Adobe Dreamweaver CS6 или Adobe Flash CS6. Прак-
тические руководства вы найдете как среди материалов курса «Цифровой дизайн», так и
отдельно.
Подойдите к описываемой модели творчески, пытайтесь включить активные методы обуче-
ния. В этом случае, вы сможете использовать все или отдельные проекты с целью изучения
работе в конкретных программах. В таблице ниже представлена схема изучения отдельных
программ в каждом проекте.

Adobe Adobe
Adobe Flash
Dreamweaver Fireworks
Проект 1: Мини-приложение
Проект 2: Веб-дизайн и планирование
Проект 3: Веб-разработка и внедрение
Проект 4: Веб-портфолио
Проект 5: Интерактивная игра
Проект 6: Цифровое повествование
Проект 7: Мобильное приложение
Проект 8: Финальное портфолио
в русском издании нумерация шагов не соблюдена, поэтому залитые ячейки указывают на упоминание
данной программы в соответствующем проекте
10  Обзор курса и подготовка

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

Будьте креативными!
Используйте курс «Цифровой дизайн» как отправную точку для развития своих собствен-
ных проектов и программ, которые будут адаптированы для обучения в вашем случае. Ис-
пользуя существующие технические руководства, преподаватели могут формировать пол-
ностью завершенные учебные проекты, основанные на конкретных темах, представляющих
интерес. Если вы создаете собственные проекты или учебные программы, пожалуйста, поде-
литесь ими с сообществом Adobe Education Exchange (edexchange.adobe.com), здесь же вы
можете просмотреть дополнительные ресурсы, которые могут быть полезны для обучения
работе с программами пакета Adobe Creative Suite 6.

Таблица навыков
Управление Исследование Технические
Дизайн
проектом и общение навыки
Проект 1: Мини- xx Дизайн xx Дизайн для своей xx Понимание роли Программа Adobe
приложение для опре- аудитории (-й) и предназначе- Fireworks
Цели: деленной xx Применение прин- ния мини-при- xx Знакомство с ра-
xx Понимание, аудитории и ципов дизайна ложений бочим простран-
как использу- с определен- xx Создание каркасов xx Анализ и ством программы
ются CSS для ной целью xx Создание компо- критика мини- Adobe Fireworks
согласованно- xx Понимание зиций дизайна приложений и xx Создание каркасов
го дизайна этапов веб- xx Изучение основ веб-сайтов xx Создание компо-
xx Принципы разработки HTML и HTML5 xx Оценка и анализ зиций дизайна
хорошего xx Знакомство с CSS достоверности xx Подготовка изо-
дизайна xx Применение контента бражений
xx Каркас веб- аспектов дизайна xx Оценка и анализ Программа Adobe
страницы таких, как цвет, навигации по Photoshop
xx Настройка дизайн, макет, сайту xx Знакомство с ра-
мини-прило- контраст и ком- xx Понимание бочим простран-
жения позиция вопросов со- ством программы
xx Оценка и xx Интеграция изо- блюдения Adobe Photoshop
сравнение бражений и текста авторских прав xx Кадрирование,
веб-сайтов xx Планирование и надлежащее изменение раз-
Продолжитель- графики, с уче- использование мера и поворот
ность: 8–12 часов том потребностей материалов изображений
(2–3 недели) и аудитории xx Коррекция цвета
Цифровой дизайн: основы веб-дизайна  11

Управление Исследование Технические


Дизайн
проектом и общение навыки
xx Пропаганда и xx Ретуширование
практика право- изображений
вого использо- xx Сохранение фай-
вания изображе- лов в различных
ний форматах
xx Выяснение и Программа Adobe
анализ потреб- Dreamweaver
ностей и целей xx Знакомство с
аудитории ин- рабочим про-
формационного странством
дизайна программы Adobe
xx Участие в рецен- Dreamweaver
зировании xx Настройка про-
xx Общение и екта веб-сайта
представление xx Использование
проектных ре- панели Вставка
шений (Insert)
xx Получение отзы- xx Добавление изо-
вов о проекте бражений
xx Добавление
текста
xx Использование
приложения
Widget Browser
xx Вставка мини-
приложения в веб-
страницу HTML
xx Редактирование
и настройка пра-
вил CSS
xx Использование
панели Стили
CSS (CSS Styles)
xx Публикация фай-
лов во Всемир-
ной паутине
Проект 2: xx Составление xx Передача идей xx Оценка и анализ Программа Adobe
Веб-дизайн и плана проекта и информации достоверности Dreamweaver
планирование xx Разработка с помощью про- контента xx Понимание проб­
Цели: документа с стых каркасов xx Редактирование лемы доступности
xx Процесс дизайнерским xx Предоставление контента веб- Программа Adobe
професси- решением нескольких ди- сайта Fireworks
онального xx Анализ вари- зайнерских идей xx Оценка и анализ xx Знакомство с ра-
веб-дизайна антов с по- xx Обработка навигации веб- бочим простран-
xx Клиентский следующим информации, сайта ством программы
дизайн выбором полученной при Fireworks
наилучшего рецензировании
дизайна
12  Обзор курса и подготовка

Управление Исследование Технические


Дизайн
проектом и общение навыки
xx Процесс xx Обработка xx Создание каркасов xx Понимание и xx Создание карка-
формирова- контента на xx Создание компо- практика право- сов
ния команды основе ана- зиций дизайна вого использо- xx Создание компо-
дизайнеров лиза и раз- xx Создание рас- вания изображе- зиций дизайна
для разработ- мышлений кадровок ний xx Создание про-
ки веб-сайта xx Управление xx Создание про- xx Знакомство с тотипа
xx Взаимодей- и организа- тотипов инструментами xx Экспорт прото-
ствие и обще- ция работы xx Применение прин- для создания типа в программу
ние команды над вы- ципов дизайна анимации и Dreamweaver
с клиентом полнением xx Применение интерактивного
Продолжитель- множествен- информационной контента
ность: ных задач архитектуры xx Критика дизайна
12–18 часов связанных с xx Дизайн с учетом xx Способность
(3–4 недели) дизайном, в юзабилити и до- излагать цель и
сравнении с ступности задачи работы
разработкой xx Дизайн согласо- xx Способность
сайта ванных веб- сообщать и
xx Понимание страниц презентовать
ролей и обя- xx Понимание и при- дизайнерские
занностей менение аспектов решения
xx Обсуждение дизайна, таких, xx Предоставление
выходных как теория цвета, отзывов по про-
данных макет, контраст и екту
композиция xx Умение задавать
xx Дизайн для опре- наводящие во-
деленной ауди- просы для уточ-
тории и с опреде- нения и разъяс-
ленной целью нения задачи
xx Планирование xx Способность
графики и много- воспринимать и
функционального интерпретиро-
интерактивного вать отзывы
контента в зависи- xx Умение пони-
мости от потребно- мать и решать
стей и аудитории проблемы ди-
xx Дизайн в соответ- зайна
ствии с требова-
ниями клиента
Проект 3: Веб- xx Соблюдение xx Обеспечение xx Четкая передача Программа Adobe
разработка и и исполне- согласованности идей Photoshop
внедрение ние согласно доступности xx Презентация веб- xx Изменение раз-
Цели: плану про- xx Обеспечение сайта в группе меров изображе-
xx Эффектив- екта универсальной xx Запись критиче- ний
ная работа в xx Соблюдение навигации ских замечаний xx Поворот изобра-
команде и исполне- xx Интеграция изо- xx Предоставление жений
xx Клиентский ние согласно бражений, текста значимых отзы- xx Кадрирование
дизайн каркасу и и мультимедий- вов, содержащих изображений
прототипу ных объектов не только критику
Цифровой дизайн: основы веб-дизайна  13

Управление Исследование Технические


Дизайн
проектом и общение навыки
xx Разработка xx Соответствие xx Планирование xx Умение выслу- Программа Adobe
контента для и исполне- графики и муль- шивать и ин- Dreamweaver
многократно- ние участни- тимедийных объ- терпретировать xx Знакомство с ра-
го использо- ками проекта ектов на основе информацию и бочим простран-
вания своих ролей потребностей и отзывы ством программы
xx Примене- и обязанно- аудитории xx Демонстрация Dreamweaver
ние веб- стей xx Создание веб- понимания це- xx Настройка веб-
стандартов xx Определе- страниц согласно лей редизайна проекта
xx Процесс ре- ние задач и веб-стандартам xx Проведение ана- xx Изменение
цензирования расстановка xx Дизайн с помо- лиза юзабилити свойств документа
и редизайна приоритетов щью CSS xx Разработка xx Работа с пане-
xx Доступный xx Обработка xx Организация тестов контроля лями Вставка
веб-контент выходных страниц с помо- качества (Insert), Файл
Продолжитель- данных и щью CSS (File) и Активы
ность: соблюдение xx Знакомство с (Assets)
20–35 часов сроков за- HTML xx Добавление изо-
(5–7 недель) вершения xx Применение бражений
xx Управление основ HTML xx Добавление
файлами и xx Создание шабло- текста
использова- нов и дизайнов xx Создание списков
ние согла- для многократно- xx Создание таблиц
шений по го использования xx Создание карт
именованию xx Адаптация ссылок
файлов контента для xx Использование
xx Выполнение читабельности шаблонов CSS
цикла рецен- и расстановки xx Стилизация тек-
зирования и акцентов ста посредством
редизайна xx Дизайн для CSS
xx Выполне- различных xx Создание и из-
ние тестов устройств менение CSS,
контроля xx Учет размера решение проблем,
качества экрана и харак- связанных с CSS
теристик устрой- xx Создание шабло-
ства нов
xx Достижение со- xx Разработка веб-
гласованности сайта для различ-
макета и цветов ных устройств
xx Проектирование xx Извлечение и
тестов контроля возврат файлов
качества xx Добавление ви-
деороликов сред-
ствами HTML5
xx Проверка ссылок
xx Тестирование с
помощью при-
ложения Adobe
BrowserLab
xx Публикация веб-
файлов
14  Обзор курса и подготовка

Управление Исследование Технические


Дизайн
проектом и общение навыки
Программа Adobe
Fireworks
xx Оптимизация
изображений
xx Создание кнопок
xx Создание пане-
лей навигации
xx Создание раскры-
вающихся меню
Проект 4: Веб- xx Планиро- xx Дизайн единоо- xx Изучение и Программа Adobe
портфолио вание и бразных страниц исследование Fireworks
Цели: создание веб- xx Дизайн для областей ка- xx Оптимизация
xx Дизайн портфолио определенной рьерного роста в изображений
электронного xx Организация аудитории и с сфере дизайна и xx Создание кнопок
портфолио и управление определенной разработки xx Создание пане-
xx Планирова- контентом целью xx Сообщение лей навигации
ние, при- xx Создание xx Обеспечение информации xx Создание раскры-
менение и блок-схем единообразия и определенной вающихся меню
тестирование доступности аудитории xx Экспорт файлов
вариантов xx Обеспечение xx Определение в программу
дизайна веб- универсальной целей и способов Dreamweaver
сайта навигации использования Программа Adobe
xx Разработка xx Адаптация портфолио Photoshop
контента контента для xx Изложение заме- xx Изменение раз-
xx Единообразие удобочитаемости чаний и обеспе- мера и поворот
дизайна веб- и расстановка чение обратной изображений
сайта акцентов связи Программа Adobe
xx Презентация xx Написание и Dreamweaver
и отзывы редактирование xx Изменение
коллег контента веб- свойств доку-
Продолжитель- сайта мента
ность: xx Работа с панелью
5–10 часов Активы (Assets)
(1–2 недели) xx Использование
шаблонов CSS
xx Стилизация тек-
ста посредством
CSS
xx Создание и из-
менение CSS,
решение проблем,
связанных с CSS
xx Создание шабло-
нов
xx Создание веб-
форм
xx Публикация веб-
файлов
Цифровой дизайн: основы веб-дизайна  15

Управление Исследование Технические


Дизайн
проектом и общение навыки
Проект 5: Инте- xx Оценка опы- xx Проектирование xx Исследование, Программа Adobe
рактивная игра та взаимо- пользователь- оценка и анализ Flash
Цели: действия во ского взаимодей- использования xx Знакомство с ра-
xx Анимация и Всемирной ствия Flash при созда- бочим простран-
многофунк- паутине для xx Создание эскизов нии онлайн-игр ством программы
циональный реализации экрана примеров xx Оценка и анализ Flash
интерактив- различных интерактивного различных типов xx Применение
ный контент методик взаимодействия игр инструментов
для взаимо- многофунк- xx Изучение ауди- фигур
действия ционального тории и общего xx Работа со слоями
xx Получение интерактив- ландшафта игры xx Организация сло-
навыков ра- ного кон- xx Анализ имею- ев и библиотек
боты с Flash тента щихся в данный xx Создание ин-
xx Улучшение xx Определение момент игр терактивных
опыта взаи- цели игры, ее xx Изучение подхо- кнопок
модействия аудитории и дящих способов xx Работа с растро-
xx Оценка задач использования выми изображе-
многофунк- xx Определение мультимедийных ниями
ционального доступных элементов при xx Основы
интерактив- ресурсов и создании игр ActionScript
ного контента уровня навы- xx Оценка уровня xx Использование
Продолжитель- ков, необхо- сформированно- методов анима-
ность: димого для сти технических ции
23–30 часов разработки навыков коман- xx Создание и из-
(5–6 недель) игры ды в области менение текста
xx Написание разработки xx Создание эффек-
предложе- xx Связь целей тов на временной
ния для игры с опытом шкалы
игры, уделяя взаимодействия xx Создание про-
внимание пользователя зрачных кнопок
сценариям xx Сообщение и пре- xx Сохранение и
и характе- зентация дизай- использование
ристикам нерских решений шаблонов ани-
аудитории xx Критика дизайна маций
xx Сообщение xx Публикация до-
целей и задач кументов Flash
xx Написание сце-
нариев повество-
ваний к игре
Проект 6: Циф- xx Определение xx Проектирование xx Исследование Программа Adobe
ровое повество- цели, задач и пользователь- примеров много- Flash
вание аудитории ского взаимодей- функционально- xx Импорт и сжатие
Цели: ствия го интерактивно- аудиофрагментов
xx Анимация и го контента xx Создание видео-
многофунк- роликов формата
циональный Flash
интерактив-
ный контент
для общения
16  Обзор курса и подготовка

Управление Исследование Технические


Дизайн
проектом и общение навыки
xx Более глубо- xx Распределе- xx Дизайн для ауди- xx Понимание роли xx Работа с текстом
кий взгляд на ние ролей тории (-й) и задач цифро- и текстовыми
аудиторию и и задач в xx Представление вых повествова- эффектами
ее потребно- команде нескольких ди- ний xx Использование
стей xx Определе- зайнерских идей xx Анализ и эффек- инструментов
xx Улучшения ние задач и xx Применение тивное использо- фигур
взаимо- расстановка принципов вание цифровых xx Организация сло-
действия приоритетов графического повествований ев и библиотек
посетителей xx Следование дизайна xx Составление xx Работа со слоями
посредством плану про- xx Разработка тща- плана проекта xx Оптимизация
повествова- екта тельных и точных xx Написание размера файла
ний xx Понимание раскадровок сценариев циф- xx Работа с растро-
xx Организация ролей и xx Доступный ровых повество- выми изображе-
доступности распределе- дизайн ваний ниями
многофунк- ние ролей и xx Создание дизай- xx Проведение цик- xx Публикация и
ционального задач на, отвечающего ла рецензирова- тестирование ви-
интерактив- xx Определение требованиям ния и редизайна деофрагментов
ного контента функци- клиента xx Общение с кол- xx Применение ме-
Продолжитель- ональных xx Обработка и ото- легами тодов анимации
ность: требований бражение состав- xx Исследование xx Создание до-
20–28 часов приложения ной информации аудитории и со- ступного Flash-
(4–5 недель) xx Создание xx Создание эскизов ответствующих контента
клиентского интерактивного сайтов xx Сохранение и
дизайна взаимодействия xx Эффективное использование
xx Следование использование шаблонов ани-
роли и дове- Flash мации
дение работы xx Связь целей с Программа Adobe
до конца пользователь- Fireworks
ским взаимодей- xx Создание каркасов
ствием xx Создание компо-
зиций дизайна
Проект 7: xx Определение xx Сочетание контен- xx Исследование Программа Adobe
Мобильное целей, задач та и стиля с уче- существующих Flash
приложение и пользова- том потребностей рынков для при- xx Оптимизация
Цели: телей пользователей ложения размера файла
xx Юзабилити xx Обработка xx Создание карка- xx Анализ анало- xx Создание и
и согласован- и реко- сов гичных прило- редактирование
ность мендация xx Создание компо- жений текста
xx Разработка изменений зиций дизайна xx Создание поль- xx Работа с текстом
мобильного в процессе xx Учет размеров зовательских и текстовыми
приложения дизайна экрана сценариев эффектами
xx Индиви- xx Дизайн для xx Отбор значимой xx Создание инте-
дуальное и различных информации рактивных кнопок
коллективное устройств и форм xx Проведение xx Использование
рецензирова- вывода коллективного инструментов
ние рецензирования фигур
xx Критика дизайна xx Организация сло-
ев и библиотек
Цифровой дизайн: основы веб-дизайна  17

Управление Исследование Технические


Дизайн
проектом и общение навыки
Продолжитель- xx Создание дизайна xx Предоставление xx Работа со слоями
ность: 15–21 час с учетом юзаби- значимых от- xx Создание про-
(3–4 недели) лити зывов, содержа- зрачных кнопок
щих не только xx Программиро-
критику вание на языке
xx Связь целей ActionScript
приложения с xx Эмуляция
пользователь- устройств
ским опытом xx Публикация
взаимодействия мобильных при-
xx Написание и ложений
редактирование Программа Adobe
контента для Fireworks
приложения xx Создание каркасов
xx Проведение ана- xx Создание компо-
лиза юзабилити зиций дизайна
Проект 8: xx Проведение xx Дизайн согласо- xx Оценка и опре- Программа Adobe
Финальное веб- рецензирова- ванных страниц деление навыков Dreamweaver
портфолио ния xx Дизайн с опреде- xx Оценка и xx Обновление веб-
Цели: xx Обеспечение ленной целью и определение портфолио
xx Дизайн конструктив- для конкретной существующего xx Добавление
электронного ной критики аудитории портфолио мультимедийного
портфолио xx Планиро- xx Обеспечение xx Написание и контента в веб-
xx Практичные, вание и универсальной редактирование портфолио
эффективные обновление навигации контента порт-
веб-сайты существу- xx Обеспечение со- фолио
xx Согласован- ющего веб- гласованности и xx Презентация
ность дизайна портфолио доступности веб-портфолио
веб-сайта xx Организация xx Адаптация группе
xx Презентация и управление контента для xx Замечания и
и отзывы контентом удобочитаемости обеспечение об-
коллег xx Создание и расстановки ратной связи
Продолжитель- блок-схем акцентов xx Ведение записей
ность: 2–3 часа xx Составление по критике
(3–4 дня) плана за- xx Изучение и иссле-
пуска дование областей
работы в сфере
веб-дизайна и раз-
работки
xx Планирование
будущей карьеры
xx Освоение и прак-
тика долговре-
менных карьер-
ных навыков:
xx Навыки поис-
ка работы
xx Навыки пре-
зентации
18  Обзор курса и подготовка

Настройка учебного компьютера


Далее приведена техническая информация, которая необходима для подготовки компьютер-
ного класса или аудитории для работы над учебным курсом «Цифровой дизайн».

Adobe Fireworks CS6


Установите программу Adobe Fireworks CS6 на всех компьютерах. Системные требования и
процедура установки описаны в руководстве, включенном в комплект поставки программ-
ного обеспечения. Последние сведения о системных требованиях можно найти на сайте
www.adobe.com/ru/products/fireworks/tech-specs.html.

Windows
xx Процессор Intel® Pentium® 4 или AMD Athlon® 64.
xx Операционная система Microsoft® Windows® XP* с пакетом обновлений Service Pack 3,
Windows 7 с пакетом обновлений Service Pack 1 (32-разрядная или 64-разрядная версия)
или Windows 8 (32-разрядная или 64-разрядная версия).
xx 1 Гб оперативной памяти (рекомендуется 2 Гб).
xx 1 Гб свободного пространства на жестком диске для установки; дополнительное свобод-
ное пространство, необходимое для установки (не устанавливается на устройства хране-
ния Flash).
xx Разрешение экрана 12801024, 16-разрядная видеокарта.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Всемирной паутине и регистрация. Активация посредством
телефона невозможна.

OS X
xx Многоядерный процессор Intel®.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx 1 Гб оперативной памяти (рекомендуется 2 Гб).
xx 1 Гб свободного пространства на жестком диске; дополнительное свободное простран-
ство, необходимое для установки (не устанавливается на диск, для которого использу-
ется файловая система, чувствительная к регистру, или на устройства хранения Flash).
xx Разрешение экрана 12801024, 16-разрядная видеокарта.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.
Цифровой дизайн: основы веб-дизайна  19

Adobe Photoshop CS6


Установите программу Adobe Photoshop CS6 Extended на всех компьютерах. Системные тре-
бования и процедура установки описаны в руководстве, включенном в комплект поставки
программного обеспечения. Последние сведения о системных требованиях можно найти на
сайте www.adobe.com/ru/products/photoshop/tech-specs.html.

Windows
xx Процессор Intel® Pentium® 4 или AMD Athlon® 64.
xx Операционная система Microsoft® Windows® XP* с пакетом обновлений Service Pack 3,
Windows 7 с пакетом обновлений Service Pack 1 (32-разрядная или 64-разрядная версия)
или Windows 8 (32-разрядная или 64-разрядная версия).
xx 1 Гб оперативной памяти.
xx 1 Гб свободного пространства на жестком диске для установки; дополнительное свобод-
ное пространство, необходимое для установки (не устанавливается на устройства хране-
ния Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта с
256 Мб (рекомендуется 512 Мб) видеопамяти.
xx Система с поддержкой спецификации OpenGL 2.0.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Всемирной паутине и регистрация. Активация посредством
телефона невозможна.
*Некоторые функции ускорения GPU не поддерживаются операционной системой Windows XP.

OS X
xx Многоядерный процессор Intel® с 64-разрядной архитектурой.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx 1 Гб оперативной памяти.
xx 2 Гб свободного пространства на жестком диске; дополнительное свободное простран-
ство, необходимое для установки (не устанавливается на диск, для которого использу-
ется файловая система, чувствительная к регистру, или на устройства хранения Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта с
256 Мб (рекомендуется 512 Мб) видеопамяти.
xx Система с поддержкой спецификации OpenGL 2.0.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.
20  Обзор курса и подготовка

Adobe Illustrator CS6


Установите программу Adobe Illustrator CS6 на всех компьютерах. Системные требования и
процедура установки описаны в руководстве, включенном в комплект поставки программ-
ного обеспечения. Последние сведения о системных требованиях можно найти на сайте
www.adobe.com/ru/products/illustrator/tech-specs.html.

Windows
xx Процессор Intel® Pentium® 4 или AMD Athlon® 64.
xx Операционная система Microsoft® Windows® XP* с пакетом обновлений Service Pack 3,
Windows 7 с пакетом обновлений Service Pack 1 (32-разрядная или 64-разрядная версия)
или Windows 8 (32-разрядная или 64-разрядная версия).
xx 1 Гб оперативной памяти (рекомендуется 3 Гб) — для 32-разрядной версии; 2 Гб опера-
тивной памяти (рекомендуется 8 Гб) — для 64-разрядной версии.
xx 2 Гб свободного пространства на жестком диске для установки; дополнительное свобод-
ное пространство, необходимое для установки (не устанавливается на устройства хране-
ния Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта.
xx Привод DVD-ROM.
xx Для некоторых функций программы Adobe Bridge необходимо наличие DirectX 9-со-
вместимой видеокарты с минимум 64 Мб видеопамяти.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.

OS X
xx Многоядерный процессор Intel® с 64-разрядной архитектурой.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx 2 Гб оперативной памяти (рекомендуется 8 Гб).
xx 2 Гб свободного пространства на жестком диске; дополнительное свободное про-
странство, необходимое для установки (не устанавливается на диск, для которого
используется файловая система, чувствительная к регистру, или на устройства хра-
нения Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.
Цифровой дизайн: основы веб-дизайна  21

Adobe Dreamweaver CS6


Установите программу Adobe Dreamweaver CS6 на всех компьютерах. Системные требова-
ния и процедура установки описаны в руководстве, включенном в комплект поставки про-
граммного обеспечения. Последние сведения о системных требованиях можно найти на сай-
те www.adobe.com/ru/products/dreamweaver/tech-specs.html.

Windows
xx Процессор Intel® Pentium® 4 или AMD Athlon® 64.
xx Операционная система Microsoft® Windows® XP* с пакетом обновлений Service Pack 3,
Windows 7 с пакетом обновлений Service Pack 1 (32-разрядная или 64-разрядная версия)
или Windows 8 (32-разрядная или 64-разрядная версия).
xx 512 Мб оперативной памяти.
xx 1 Гб свободного пространства на жестком диске для установки; дополнительное свобод-
ное пространство, необходимое для установки (не устанавливается на устройства хране-
ния Flash).
xx Разрешение экрана 1280800, 16-разрядная видеокарта.
xx Среда Java™ Runtime Environment 1.6 (включена в дистрибутив).
xx Программное обеспечение QuickTime 7.6.6, необходимое для воспроизведения мульти-
медийного контента HTML5.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Всемирной паутине и регистрация. Активация посредством
телефона невозможна.

OS X
xx Многоядерный процессор Intel®.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx 512 Мб оперативной памяти.
xx 1,8 Гб свободного пространства на жестком диске; дополнительное свободное про-
странство, необходимое для установки (не устанавливается на диск, для которого ис-
пользуется файловая система, чувствительная к регистру, или на устройства хранения
Flash).
xx Разрешение экрана 1280800, 16-разрядная видеокарта.
xx Среда Java™ Runtime Environment 1.6.
xx Программное обеспечение QuickTime 7.6.6, необходимое для воспроизведения мульти-
медийного контента HTML5.
xx Привод DVD-ROM.
xx Широкополосное подключение к Интернету, необходимое для использования онлайн-
сервисов.
22  Обзор курса и подготовка

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


программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.

Adobe Flash Professional CS6


Установите программу Adobe Flash Professional CS6 на всех компьютерах. Системные тре-
бования и процедура установки описаны в руководстве, включенном в комплект поставки
программного обеспечения. Последние сведения о системных требованиях можно найти на
сайте www.adobe.com/ru/products/flash/tech-specs.html.

Windows
xx Процессор Intel® Pentium® 4 или AMD Athlon® 64.
xx Операционная система Microsoft® Windows® XP* с пакетом обновлений Service Pack 3,
Windows 7 с пакетом обновлений Service Pack 1 (32-разрядная или 64-разрядная версия)
или Windows 8 (32-разрядная или 64-разрядная версия).
xx 2 Гб оперативной памяти (рекомендуется 3 Гб).
xx 3,5 Гб свободного пространства на жестком диске для установки; дополнительное сво-
бодное пространство, необходимое для установки (не устанавливается на устройства
хранения Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800).
xx Среда Java™ Runtime Environment 1.6 (включена в дистрибутив).
xx Программное обеспечение QuickTime 7.6.6, необходимое для воспроизведения мульти-
медийного контента.
xx Для использования некоторых функции приложения Adobe Bridge необходимо наличие
видеокарты с поддержкой спецификации DirectX 9 и видеопамятью объемом не менее
64 Мб.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Всемирной паутине и регистрация. Активация посредством
телефона невозможна.

OS X
xx Многоядерный процессор Intel®.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx 2 Гб оперативной памяти (рекомендуется 3 Гб).
xx 4 Гб свободного пространства на жестком диске; дополнительное свободное простран-
ство, необходимое для установки (не устанавливается на диск, для которого использу-
ется файловая система, чувствительная к регистру, или на устройства хранения Flash).
Цифровой дизайн: основы веб-дизайна  23

xx Разрешение экрана 1024768 (рекомендуется 1280800).


xx Среда Java™ Runtime Environment 1.6.
xx Программное обеспечение QuickTime 7.6.6, необходимое для воспроизведения мульти-
медийного контента.
xx Привод DVD-ROM.
xx Для работы программное обеспечение требует однократной активации. Для активации
программного обеспечения, подписки и доступа к онлайн-сервисам, требуется широко-
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.

Adobe Flash Player 11


Windows
xx Процессор стандартной архитектуры с тактовой частотой не менее 2,33 ГГц или процес-
сор Intel® Atom™ с тактовой частотой не менее 1,6 ГГц для нетбуков.
xx Операционная система Microsoft® Windows® XP (32-разрядная версия),Windows Server®
2003 (32-разрядная версия), Windows Server 2008 (32-разрядная версия), Windows Vista®
(32-разрядная версия), Windows 7 (32- и 64-разрядные версии)или Windows 8 (32- и
64-разрядные версии).
xx Браузер Internet Explorer версии не ниже 7.0, или Mozilla Firefox версии не ниже 4.0, или
Google Chrome, или Safari версии не ниже 5.0, или Opera версии не ниже 11.
xx 512 Мб оперативной памяти (для нетбуков рекомендуется 1 Гб).
xx Видеокарта с видеопамятью объемом не менее 128 Мб.

OS X
xx Процессор Intel Core™ Duo с частотой не менее 1,83 ГГц.
xx Операционная система Mac OS X версии 10.6.8, 10.7 или выше.
xx Браузер Safari версии не ниже 5.0, или Mozilla Firefox версии не ниже 4.0, или Google
Chrome, или Opera версии не ниже 11.
xx 512 Мб оперативной памяти.
xx Видеокарта с видеопамятью объемом не менее 128 Мб.

Улучшение учебного процесса


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

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


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

Управление файлами
Чтобы сократить время, необходимое для оценки работы учащихся, убедитесь, что все учеб-
ные материалы и работы учащихся сохранены и записаны надлежащим образом (предпо-
чтительно на сервере учебного центра). В этом вам могут помочь следующие рекомендации:
xx Каталоги учащихся: все учащиеся должны иметь собственные каталоги для работы. Имя
каталога может включать фамилию учащегося, инициалы и период обучения (например,
сем7_м_иванов).
xx Резервное копирование: учащиеся могут захотеть записывать копии своих каталогов на
DVD-диски.
xx Работа из дома: учащиеся могут захотеть работать из дома, но при этом иметь возмож-
ность переносить выполненную работу на компьютеры учебного центра (например, по-
средством протокола FTP, DVD-дисков, внешних жестких дисков или Flash-устройств).
xx Рабочий процесс: если учащиеся работают дома, используя электронную почту, убеди-
тесь, что на компьютерах учебного заведения обеспечивается эффективная защита от
вирусов и что все задания имеют четкое обозначение для простоты идентификации и
организации (например, сем7_логотип_м_иванов).
xx Юридические вопросы: если вы планируете размещать работы учащихся во Всемирной
паутине, изучите правила учебного центра, касающиеся размещения фотографий или
имен учащихся. Возможно, не следует указывать полные имена и адреса электронной
почты учащихся.

Атмосфера в аудитории
Использование технологии как части уроков может привести к проблемам управления, ко-
торые не связаны с изучаемым материалом. Этот курс разработан для того, чтобы ввести
учащихся в профессиональную рабочую среду и наладить эффективный учебный процесс.
xx Плакаты с наилучшими примерами дизайна: поскольку данный учебный курс сосредото-
чен на принципах хорошего дизайна, вы можете распечатать несколько примеров удачно
разработанных веб-сайтов и раздать их в аудитории. Также можно раздать примеры «хо-
рошего» и «плохого» дизайна. Примеры хороших и плохих вариантов дизайна должны
Цифровой дизайн: основы веб-дизайна  25

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

Этичное использование информации и данных


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

торией, чтобы помочь им выработать хорошие привычки и придерживаться рекомендуемых


норм для дальнейшей работы. Ниже приведены некоторые моменты, на которые следует
обратить внимание учащихся:
xx Достоверность сведений: если учащиеся используют информации из Всемирной паути-
не, научите их постоянно учитывать и анализировать необъективность информации, ее
распространенность и источники, а также искать подтверждение в различных источни-
ках. Можно обучить учащихся использовать несколько методик поиска, например те,
что описаны на сайте компании November Learning по адресу novemberlearning.com/
resources/information-literacy-resources/.
xx Авторское право: укажите учащимся на необходимость получения разрешения на ис-
пользование графики и изображений, созданных другими людьми, и на авторские права
их собственных работ.

Ограниченные ресурсы (цифровые фотоаппараты, видеокамеры, сканеры и т. д.)


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

Профессиональные навыки
Этот курс разработан для введения учащихся в профессиональную деятельность. Вы можете
сосредоточить внимание на профессиональных аспектах несколькими способами.
xx Навыки межличностного общения: учащимся необходимы навыки общения с людьми,
которые помогут обсудить работу с клиентами. Вы можете привлечь учащихся к обсуж-
дению проектов между собой или с вами для развития навыков общения с клиентами.
xx Мониторинг проекта: подчеркните необходимость создания планов и графиков работ
для управления временем. Вы можете приучить учащихся к составлению короткого еже-
дневного отчета о состоянии выполнения задания по времени. Помогите учащимся уста-
новить приоритеты, если это необходимо.
xx Работа в команде: научить учащихся работать индивидуально и в составе команд — это
довольно сложная задача. Вы должны подчеркивать важность обеих типов работы, оце-
нивая работу каждого, а также их вклад в достижение общих целей команды, работу по
решению конфликтов в команде и умение сотрудничать с другими членами команды для
развития эффективных методов работы.
Цифровой дизайн: основы веб-дизайна  27

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


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

Преподавание различных дисциплин


Вы можете освещать некоторые темы совместно с преподавателями изобразительного ис-
кусства, бизнеса, русского языка и естественных наук. Вы можете организовать учебный
процесс так, чтобы посещать вместе с учащимся занятия других преподавателей для смены
обстановки или приглашать других преподавателей в аудиторию, а также создавать проек-
ты, которые покрывают материал других предметов. Это особенно полезно при изучении
следующих тем:
xx Графический дизайн: преподаватель по искусству может рассказать о линиях, «правиле
третей» и о типографике.
xx Дизайн веб-страниц: преподаватель по искусству может рассказать о композиции, цве-
тах и фигурах.
xx Дизайн и создание веб-страниц: преподаватель по делопроизводству может обсудить с
учащимися вопросы квалификационных требований, зарплату и навыки, необходимые
для работы в области печатного производства и графического дизайна. Преподаватель
по маркетингу может присоединиться к этому обсуждению, рассказав о целевых ауди-
ториях и задачах.
xx Контент веб-страницы: преподаватель по русскому языку и литературе может научить
учащихся писать тексты для различных аудиторий.
28  Обзор курса и подготовка

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

Навыки дизайна

0 — не соответствует 3 — соответствует 5 — превосходит


Категория
ожиданиям ожиданиям ожидания

Композиция Неудачно использу- В некоторой степени Свободное пространство,


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

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

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

0 — не соответствует 3 — соответствует 5 — превосходит


Категория
ожиданиям ожиданиям ожидания
Юзабилити Навигация использует- Навигация используется Логичная навигация
ся на некоторых стра- на всех страницах сайта, используется на всех
ницах, не все переходы все переходы работают. страницах сайта, все
работают. Навигация Навигация позволяет переходы работают.
не позволяет перейти перейти на большинство Навигация позволяет
на основные страницы основных страниц сайта перейти на все основные
сайта и интуитивно не и интуитивно понятна. страницы сайта и
понятна. Некоторые Некоторые страницы интуитивно понятна.
страницы загружаются загружаются долго, но Страницы загружаются не
долго, задержка вы- многие задержки оправ- очень долго, все заметные
звана использованием даны. задержки оправданы.
несоответствующих
элементов.
Применение Использование тех- Использование техниче- Использование технических
технических нических приемов не ских приемов и эффек- приемов и эффектов поло-
элементов влияет на восприятие тов последовательно жительно влияет на воспри-
(в програм- аудитории (благо- соответствует целям и ятие аудитории (благодаря
мах Adobe даря легкости чтения, идее сайта, но не влияет легкости чтения, удобной
Dreamweaver, удобной навигации и на восприятие аудитории навигации и так далее) и
Adobe так далее) или не под- (благодаря легкости чте- поддерживает общую идею и
Fireworks, держивает общую идею ния, удобной навигации цели сайта. Использование
Adobe и цели сайта. и так далее). Использо- этих приемов или эффектов
Photoshop, вание этих приемов или оправдано, не отвлекает и не
Adobe эффектов оправдано, не избыточно.
Illustrator или отвлекает и не избыточ-
Adobe Flash) но.
Раскадровка Раскадровка содержит Раскадровка содержит Раскадровка содержит
неполную или противо- полную информацию, од- полную, тщательно подо-
речивую информацию о нако ее несколько слож- бранную и очень точную
проекте. но интерпретировать. информацию.

Технические навыки

0 — не соответствует 3 — соответствует 5 — превосходит


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

0 — не соответствует 3 — соответствует 5 — превосходит


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

Навыки исследовательской работы и общения


0 — не соответствует 3 — соответствует 5 — превосходит
Категория
ожиданиям ожиданиям ожидания
Процесс Процесс дизайна не Процесс разработки Процесс разработки дизайна
дизайна включает все необходи- дизайна включает не- включает все необходимые
мые элементы, напри- обходимые элементы, элементы, например, эскизы,
мер, эскизы, карту сайта, например, эскизы, карту карту сайта, раскадровку и
раскадровку и ком- сайта, раскадровку и комментарии по проекту. Фи-
ментарии по проекту. комментарии по проек- нальный продукт точно от-
Финальный продукт ту. Финальный продукт ражает раскадровку, включая
не полностью отражает отражает раскадровку все ревизии раскадровки на
раскадровку и отзывы. и учитывает некоторые основе отзывов и продуман-
отзывы. ных дизайнерских решений,
принятых в процессе дизайна.
Отзывы Рецензии проектов дру- Рецензии проектов Рецензии проектов дру-
гих учащихся неадек- других учащихся вклю- гих учащихся включают
ватны с точки зрения чают некоторый анализ тщательный и глубокий
контента и дизайна. контента и дизайна. анализ контента и дизай-
Используется непро- Используется достаточ- на. Используется точная
фессиональная лексика, но профессиональная профессиональная лексика,
отзывы часто некон- лексика, комментарии комментарии связаны с кон-
структивны. связаны с контентом и тентом и дизайном. Отзывы
дизайном. Отзывы не всегда конструктивны.
всегда конструктивны.
Цифровой дизайн: основы веб-дизайна  31

0 — не соответствует 3 — соответствует 5 — превосходит


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

Навыки управления проектом

0 — не соответствует 3 — соответствует 5 — превосходит


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

0 — не соответствует 3 — соответствует 5 — превосходит


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

Стандарт ISTE NETS*S для учащихся


Международное общество технологий в образовании (ISTE) — надежный источник повы-
шения квалификации, приобретения знаний, защищенности и лидерства в инновациях. Эти
стандарты, указанные в учебном курсе «Цифровой дизайн», интегрируются в различные виды
деятельности, в которых задействованы учащиеся в процессе работы над каждым проектом.
1. Творчество и инновации.
Учащиеся демонстрируют творческое мышление, исследовательские подходы и разрабаты-
вают инновационные продукты и процессы с использованием технологии. Учащиеся:
а. Применяют имеющиеся знания для получения новых идей, продуктов или процессов;
б. Создают оригинальные произведения как средство выражения личности или группы.
в. Используют модели и симуляции для исследования сложных систем и проблем.
г. Определяют тенденции и прогнозируют возможности.
2. Коммуникации и сотрудничество.
Учащиеся используют цифровые средства и среды для общения и коллективной работы, в
том числе на расстоянии, поддержки индивидуального обучения и возможности обучения
других. Учащиеся:
а. Взаимодействуют, сотрудничают и работают со сверстниками, экспертами или другими
участниками, используя различные цифровые среды и средства.
б. Эффективно распространяют информацию и идеи для разных аудиторий с использова-
нием различных средств и форматов.
в. Развивают культурное понимание и глобальную осведомленность, работая с другими
учащимся, которые могут быть представителями других культур.
Цифровой дизайн: основы веб-дизайна  33

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


ния проблем
3. Исследования и информационная компетентность.
Учащиеся умеют применять цифровые инструменты для сбора, оценки и использования ин-
формации. Учащиеся:
а. Планируют стратегии исследования
б. Находят, организовывают, анализируют, оценивают, обобщают и используют информа-
цию из различных источников и сред
в. Оценивают и отбирают источники информации и цифровые средства на основе целесо-
образности для конкретных задач.
г. Обрабатывают данные и отчитываются о результатах.
4. Критическое мышление, решение проблем и принятие решений.
Учащиеся используют умение критически мыслить для планирования и проведения науч-
ных исследований, управления проектами, решения проблем и принятия обоснованных ре-
шений, используя соответствующие цифровые инструменты и ресурсы. Учащиеся:
а. Выявляют и определяют подлинные проблемы и важные вопросы для проведения ис-
следования.
б. Планируют и управляют деятельностью по разработке решения или выполнения про-
екта.
в. Собирают и анализируют данные для определения решений проблем и/или принятия
решений, основанных на полученной информации.
г. Используют различные процессы и перспективы для исследования альтернативных ре-
шений.
5. Цифровое гражданство.
Учащиеся понимают гуманитарные, культурные и социальные вопросы, связанные с инфор-
мационными технологиями и практикой легального и этичного поведения. Учащиеся:
а. Заявляют и практикуют безопасное, правовое и ответственное использование инфор-
мации и технологий.
б. Демонстрируют позитивное отношение к использованию технологий, которые поддер-
живают сотрудничество, обучение и производительность.
в. Демонстрируют личную ответственность за постоянное повышение квалификации.
г. Являются лидерами в использовании цифровых технологий.
6. Применение технологии и технологические концепции.
Учащиеся демонстрируют четкое понимание технологических концепций и систем, и их
применения. Учащиеся:
а. Понимают и используют технологические системы;
34  Обзор курса и подготовка

б. Эффективно и продуктивно выбирают и используют приложения.


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

Программа сертификации Adobe Certified Associate


В течение последних нескольких лет корпорация Adobe провела исследование с целью изу-
чения базовых навыков, необходимых учащимся для эффективной работы с инструментами
в области печатного производства и графического дизайна. Изучив мнения преподавателей,
специалистов в области дизайна, коммерческих предприятий и учебных заведений по всему
миру, компания сформулировала базовые навыки, необходимые для создания видеопроек-
тов. Следующий набор основных целей обучения входит в экзамены «Сетевые коммуника-
ции с использованием Adobe Dreamweaver CS6» и «Работа с многофункциональным инте-
рактивным контентом в Adobe Flash Professional CS6» и интегрирован в курс «Цифровой
дизайн».

Цели экзамена «Сетевые коммуникации с использованием Adobe


Dreamweaver CS6»
Разработка требований к проекту
1.1. Формулирование основных задач веб-сайта, определение целевой аудитории и ее по-
требностей.
1.2. Выбор веб-контента, соответствующего назначению веб-сайта и требованиям целевой
аудитории.
1.3. Демонстрация знания стандартных требований к защите авторских прав (связанные
термины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.4. Демонстрация знания стандартов доступности веб-сайтов, учитывающих потребности
людей со зрительной и двигательной недостаточностью.
1.5. Принятие решений о создании веб-сайта на основе собственного анализа и имеющихся
технических требований.
1.6. Осведомленность в принципах управления проектами.

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


2.1. Демонстрация знания рекомендаций, общих и относящихся к Dreamweaver, в отноше-
нии проектирования веб-сайтов, таких как поддержка согласованности, отделение содержи-
мого от проекта, использование стандартных шрифтов и визуальной иерархии.
2.2. Создание проектов веб-сайтов, полностью совместимых с различными операционными
системами, версиями и конфигурациями веб-браузеров и устройствами.
Цифровой дизайн: основы веб-дизайна  35

2.3. Демонстрация знаний основных принципов разработки макетов страниц.


2.4. Определение ключевых принципов создания удобного, доступного веб-сайта, содержа-
щего понятный и разборчивый текст.
2.5. Демонстрация знания блок-схем, раскадровок и каркасных методов изображения объ-
ектов для создания веб-страниц и карты сайта (индекса сайта), которые поддерживают за-
планированную иерархию веб-сайта.
2.6. Обмен информацией с другими специалистами (например, коллегами и клиентами) о
планах по проектированию.

Знание интерфейса Adobe Dreamweaver CS6


3.1. Умение работать с элементами интерфейса Dreamweaver.
3.2. Использование палитры Вставка (Insert).
3.3. Использование инспектора свойств.
3.4. Использование палитры Ресурсы (Assets).
3.5. Использование палитры Файлы (Files).
3.6. Настройка рабочего пространства.

Добавление контента с помощью Dreamweaver CS6


4.1. Демонстрация знания языка гипертекстовой разметки.
4.2. Определение веб-сайта Dreamweaver.
4.3. Создание, сохранение веб-страницы, добавление заголовка и имени.
4.4. Добавление текста на веб-страницу.
4.5. Вставка изображений и добавление дополнительного текста на веб-страницу.
4.6. Добавление ссылок на веб-контент с использованием гиперссылок, ссылок электрон-
ной почты и ссылок на именованные привязки.
4.7. Включение видео и звука в веб-страницу.
4.8. Оснащение контента анимацией и интерактивными возможностями.
4.9. Добавление на веб-страницу навигационных панелей, изображений ролловеров и кно-
пок, созданных в графическом редакторе.
4.10. Создание карт ссылок.
4.11. Импорт табличных данных в веб-страницу.
4.12. Импорт в веб-страницу и отображение документов Microsoft Word или Microsoft
Excel.
4.13. Создание форм.
36  Обзор курса и подготовка

Организация контента с помощью Dreamweaver CS6


5.1. Установка и изменение свойств документа.
5.2. Упорядочение макета веб-страницы при помощи относительно и абсолютно располо-
женных тегов div и стилей CSS.
5.3. Изменение текста и свойств текста.
5.4. Изменение изображений и свойств изображений.
5.5. Создание шаблонов веб-страниц.
5.6. Использование основных HTML-тегов для настройки HTML-документов, формати-
рования текста, добавления ссылок, создания таблиц и построения упорядоченных и неупо-
рядоченных списков.
5.7. Добавление заголовков, доступных для поисковых систем во Всемирной паутине.
5.8. Применение CSS для многократного использования ресурсов.

Оценка и обслуживание веб-сайта с использованием Dreamweaver CS6


6.1. Проведение технических тестов.
6.2. Определение методов, которые позволяют выявить ресурсы, доступные для повторно-
го использования.
6.3. Определение методов, предназначенных для сбора отзывов пользователей.
6.4. Управление ресурсами, ссылками и файлами веб-сайта.
6.5. Публикация файлов веб-сайта на удаленном сервере и их обновление.

Цели экзамена «Работа с многофункциональным интерактивным


контентом в Adobe Flash Professional CS6»
Разработка требований к проекту
1.1. Формулирование основных задач многофункционального интерактивного контента,
определение целевой аудитории и ее потребностей.
1.2. Определение многофункционального интерактивного контента в зависимости от сре-
ды, в которой он будет использоваться (веб-сайты, мобильные устройства и т. д.).
1.3. Знакомство с методами создания доступного многофункционального интерактивного
контента.
1.4. Демонстрация знания стандартных требований к защите авторских прав (связанные
термины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.5. Осведомленность в принципах управления проектами.
1.6. Обмен информацией с другими специалистами (например, коллегами и клиентами) о
планах по проектированию и наполнению веб-сайта контентом.
Цифровой дизайн: основы веб-дизайна  37

Определение основных этапов создания многофункционального


интерактивного контента
2.1. Знание рекомендаций, общих и ориентированных на Flash, по проектированию много-
функционального интерактивного контента для веб-сайтов, мобильных приложений и при-
ложений AIR.
2.2. Демонстрация знаний основных принципов разработки контента.
2.3. Знакомство с методами создания доступного и понятного многофункционального ин-
терактивного контента (в том числе с использованием технологии Flash).
2.4. Использование материалов раскадровки для проектирования многофункционального
интерактивного контента.
2.5. Упорядочение документа Flash.

Знание интерфейса Adobe Flash Professional CS6


3.1. Умение работать с элементами интерфейса Flash.
3.2. Использование инспектора свойств.
3.3. Использование временной шкалы.
3.4. Изменение свойств документа.
3.5. Использование направляющих и линеек Flash.
3.6. Использование редактора движения.
3.7. Знакомство с типами файлов Flash.
3.8. Знакомство с последними наработками, позволяющими уменьшить размеры опубли-
кованного файла Flash.

Создание элементов многофункционального интерактивного контента


с помощью Flash Professional CS6
4.1. Принятие решений о создании многофункционального интерактивного контента на
основе собственного анализа и имеющихся технических требований.
4.2. Использование инструментов на панели Инструменты (Tools) для выделения, созда-
ния графики и текста и управления ими.
4.3. Импорт и редактирование графики.
4.4. Создание текста.
4.5. Изменение свойств текста.
4.6. Создание объектов и преобразование их в символы (включая графику, фрагменты ро-
лика и кнопки).
4.7. Знакомство с символами и библиотекой.
38  Обзор курса и подготовка

4.8. Изменение символов и отдельных элементов.


4.9. Создание масок.
4.10. Создание анимаций (изменение фигур, положений, размеров, цветов и настроек про-
зрачности).
4.11. Добавление простых элементов управления при помощи ActionScript® 3.0.
4.12. Импорт и использование звуковых дорожек.
4.13. Добавление и экспорт видеороликов.
4.14. Публикация и экспорт документов Flash.
4.15. Предоставление доступа к документам Flash.

Оценка элементов многофункционального интерактивного контента


с помощью Flash Professional CS6
6.1. Проведение базовых технических тестов.
6.2. Определение методов, которые позволяют выявить ресурсы, доступные для повторно-
го использования.
Проект 1. Мини-приложение
Продолжительность: 8—12 часов

Обзор проекта
В рамках этого проекта, учащиеся применят свои знания принципов дизайна, HTML и CSS
для настройки существующего мини-приложения. Анализируя мини-приложения и веб-
сайты, они будут учиться определять и подчеркивать цели и аудиторию. Они также узнают
о этапах веб-разработки и публикации веб-проектов.
Основная цель этого проекта для учащихся — узнать и понять, как CSS позволяют добиться
согласованности и легко вносить изменения, затрагивающие весь веб-сайт. Упор делается на
понимание принципов дизайна при инструктировании их в плане изменения и настройки
каскадных таблиц стилей мини-приложения.
Результат проекта: настроенное мини-приложение
Примечание. Некоторые разделы данного проекта приведены в соответствии с программой экза-
мена «Сетевые коммуникации с использованием Adobe Dreamweaver CS6» Adobe Certified Associate.
После этапов проекта и технического руководства приведены цели данного экзамена.

Цели проекта
По завершении проекта, учащиеся разовьют следующие навыки:

Навыки управления проектами


xx Дизайн для определенной аудитории и с определенной целью
xx Понимание этапов веб-разработки

Навыки дизайна
xx Дизайн для своей аудитории (-й)
xx Применение принципов дизайна
xx Создание каркасов
xx Создание композиций дизайна
xx Изучение основ HTML и HTML5
xx Знакомство с CSS
xx Применение аспектов дизайна таких, как цвет, дизайн, макет, контраст и композиция
xx Интеграция изображений и текста
xx Планирование графики, с учетом потребностей и аудитории
40  Проект 1. Мини-приложение

Исследовательские и коммуникативные навыки


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

Технические навыки
Программа Adobe Fireworks
xx Знакомство с рабочим пространством программы Adobe Fireworks
xx Создание каркасов
xx Создание композиций дизайна
xx Подготовка изображений
Программа Adobe Photoshop
xx Знакомство с рабочим пространством программы Adobe Photoshop
xx Кадрирование, изменение размера и поворот изображений
xx Коррекция цвета
xx Ретуширование изображений
xx Сохранение файлов в различных форматах
Программа Adobe Dreamweaver
xx Знакомство с рабочим пространством программы Adobe Dreamweaver
xx Настройка проекта веб-сайта
xx Использование панели Вставка (Insert)
xx Добавление изображений
xx Добавление текста
xx Использование приложения Widget Browser
xx Вставка мини-приложения в веб-страницу HTML
xx Редактирование и настройка правил CSS
xx Использование панели Стили CSS (CSS Styles)
xx Публикация файлов во Всемирной паутине
Программное обеспечение и материалы для выполнения проекта
xx На всех компьютерах должна быть установлена программа Adobe Fireworks CS6
xx На всех компьютерах должна быть установлена программа Adobe Photoshop CS6
Цифровой дизайн: основы веб-дизайна  41

xx На всех компьютерах должна быть установлена программа Adobe Dreamweaver CS6


xx Цифровые фотоаппараты
xx Презентация: «Введение в принципы дизайна»
xx Презентация: «Введение в принципы дизайна веб-страниц»
xx Бланк: «Анализ веб-сайтов»
xx Презентация: «Введение в HTML и CSS»
xx Раздел: «Введение в HTML и CSS»
xx Презентация: «Этапы разработки веб-проекта»
xx Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6»
xx Раздел по программе Adobe Fireworks: «Создание каркасов»
xx Файл: slideshow_widget_wireframe.fw.png
xx Файл: spry_slideshow_widget_comp1.fw.png
xx Файл: spry_slideshow_widget_comp2.fw.png
xx Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
xx Раздел: «Рецензия»
xx Раздел: «Основы цифровой фотосъемки»
xx Раздел: «Принципы и нормы авторского права»
xx Раздел по программе Adobe Photoshop: «Обзор рабочего пространства программы Adobe
Photoshop CS6»
xx Раздел по программе Adobe Fireworks: «Предварительная обработка фотографий»
xx Раздел по программе Adobe Photoshop: «Изменение размеров, вращение и кадрирование
изображений»
xx Раздел по программе Adobe Photoshop: «Коррекция цвета»
xx Раздел по программе Adobe Photoshop: «Ретушь фотографий»
xx Раздел по программе Adobe Photoshop: «Сохранение файлов в различных форматах»
xx Раздел по программе Adobe Dreamweaver: «Обзор рабочего пространства программы
Adobe Dreamweaver CS6»
xx Раздел по программе Adobe Dreamweaver: «Работа с приложением Widget Browser»
xx Раздел по программе Adobe Dreamweaver: «Добавление изображений»
xx Раздел по программе Adobe Dreamweaver: «Работа с панелью Вставка программы Adobe
Dreamweaver»
xx Раздел по программе Adobe Dreamweaver: «Создание и изменение каскадных таблиц
стилей»
xx Раздел по программе Adobe Dreamweaver: «Публикация файлов во Всемирной паутине»

Дополнительные ресурсы
xx Технические данные и контент
xx Ключевые термины
42  Проект 1. Мини-приложение

xx Стандарты для учащихся ISTE NETS*S


xx Программа Adobe Certified Associate, экзамен «Сетевые коммуникации с использовани-
ем Adobe Dreamweaver CS6»

Этапы проекта
1. Познакомьте учащихся с целями проекта.
xx Знакомство с принципами дизайна
xx Знакомство с HTML и CSS
xx Анализ мини-приложений и веб-сайтов
xx Знакомство с каркасами и композициями дизайна
xx Выбор и подготовка изображений
xx Редактирование и настройка правил CSS
xx Добавление мини-приложения на веб-страницу HTML

Знакомство с принципами дизайна

(Рекомендуемое время: 50–100 минут)


2. Познакомьте учащихся с концепцией использования принципов дизайна для оценки и
определения веб-дизайна. Используйте следующую презентацию для представления от-
дельных принципов дизайна.
Презентация: «Введение в принципы дизайна»
3. Продемонстрируйте учащимся, по крайней мере, два веб-сайта: один с хорошим дизай-
ном, а другой — с неудачным, и обсудите их с точки зрения согласованности и визуаль-
ной иерархии. Попросите учащихся определить элементы дизайна в примерах веб-сайтов.
Определите на некоторых веб-страницах визуальные элементы, которые могут поддержи-
вать содержимое иерархии, такие как схема навигации, использование цвета, тексты заго-
ловков, шрифты (цвет, выделение и размер), отступы и выравнивание, заголовки разделов
и списки.
Презентация: «Введение в принципы дизайна веб-страниц»
4. Если позволит время, обсудите некоторые или все советы по дизайну из книги «Веб-
Дизайн: книга Стива Круга или «не заставляйте меня думать!»» Стива Круга (Символ-
Плюс, 2008):
xx Убедитесь, что самая важная информация заметна: набрана более крупным, жирным
шрифтом, расположена вверху страницы, отделена большими пробелами.
xx Объедините похожий контент визуально: сгруппируйте его под заголовками, выровняй-
те, приведите к одному виду или размеру, сгруппируйте по областям.
xx Создайте визуальную иерархию контента: используйте рамки внутри рамок, заго-
ловки и подзаголовки с отступами, чтобы продемонстрировать элементы как части
иерархии.
Цифровой дизайн: основы веб-дизайна  43

Анализ мини-приложения

(Рекомендуемое время: 50–100 минут)


5. Теперь, когда учащиеся уяснили принципы дизайна, познакомьте их с использованием
мини-приложений на веб-страницах. Обсудите в группе роль и назначение мини-приложе-
ний, особенно на крупных веб-сайтах. Поскольку мини-приложения различаются по типам
и задачам, ниже приведены некоторые ключевые направления дискуссии:
xx Мини-приложения — это полезные приложения, которые можно внедрять в веб-страницу,
блог или социальные медиа для выполнения определенной функции. Они отображают
информацию и предлагают пользователям выполнять некоторые действия.
xx Мини-приложение — это фрагмент автономного кода (как правило, сочетающего языки
HTML, CSS и JavaScript), который часто создается путем повторного использования су-
ществующего кода или фрагментов кода HTML.
xx Некоторые мини-приложения просты и обеспечивают расширенный опыт взаимодей-
ствия. К таким относятся панели «аккордеон», панели вкладок, кнопки, диалоговые
окна, всплывающие окна, поля для установки флажков, переключатели и слайд-шоу.
xx Некоторые мини-приложения представляют собой небольшие программы, которые
открываются в более крупных. Такого рода мини-приложения включают биржевые
котировки и новости, инструменты поиска Google, eBay и других популярных веб-
сайтов с поисковыми системами, часы и счетчики, игры, новостные ленты и многое
другое.
6. Продемонстрируйте учащимся разнообразные мини-приложения и помогите им опреде-
лить конкретные цели и функции каждого. Обсудите следующее:
xx Какова цель мини-приложения?
xx Каковы его функции?
xx Кто представляет собой аудиторию?
xx Кто создал мини-приложение?
Примечание. Вы можете подобрать несколько популярных мини-приложений, демонстрирующих
различные функциональные возможности и цели.

Приложение Adobe Dreamweaver Widget Browser содержит различные мини-приложе-


ния, которые можно продемонстрировать учащимся. Чтобы получить доступ к приложе-
нию Widget Browser в программе Adobe Dreamweaver, создайте новый HTML-документ,
в меню Вставка (Insert) выберите пункт Мини-приложение (Widget), а затем щелкни-
те мышью по ссылке Widget Browser в открывшемся диалоговом окне. Widget Browser
представляет собой AIR-приложение Adobe, которое вам будет необходимо установить
на свой компьютер. Потребуется бесплатно зарегистрировать учетную запись Adobe ID
для доступа к приложению Widget Browser и загрузки мини-приложений. Для данного
проекта, компьютеры учащихся должны иметь доступ к приложению Widget Browser, по-
этому, обратите внимание на требование наличия Adobe ID при подготовке к обучению
данному проекту.
44  Проект 1. Мини-приложение

Анализ веб-сайтов

(Рекомендуемое время: 50–100 минут)


7. Теперь, когда вы обсудили мини-приложения, объясните, что сейчас вы рассмотрите веб-
сайты. Начните с общегруппового обсуждения целей и аудитории сайта. Выясните, какая
информация определяет цели, аудиторию и потребности этой аудитории. Сосредоточьте
обсуждение на веб-сайтах, имеющих разделы, ориентированные на различную аудиторию.
Например, можно противопоставить сайт МЧС для взрослого населения, www.mchs.gov.ru, с
их сайтом для детей, www.spas-extreme.ru и обсудить следующие моменты:
xx Цель сайта
xx Аудиторию сайта
xx Как на сайте используются принципы дизайна, чтобы подчеркнуть цель и аудиторию
8. Продемонстрируйте техники анализа веб-сайтов. Критерии оценки сайтов могут вклю-
чать в себя следующее:
xx Дизайн
xx Визуальная разметка
xx Согласованность структуры
xx Цветовая схема
xx Визуальная иерархия элементов
xx Контент
xx Уклон
xx Актуальность
xx Источник
xx Возможность подтверждения информации
9. Разделите аудиторию на небольшие группы и попросите каждую группу оценить веб-
сайт вашего учебного заведения с точки зрения дизайна и контента.
Бланк: «Анализ веб-сайтов»
Примечание. Если у вашего учебного заведения нет веб-сайта или он не подходит для данного
упражнения, можно использовать другой веб-сайт, имеющий отношение к учащимся.

10. Когда учащиеся закончат оценку дизайна и согласованности элементов веб-сайта ваше-
го учебного заведения, открыть веб-сайт в браузере, выберите в меню Вид (View) команду
Просмотр HTML-кода (Page Source) и продемонстрируйте учащимся исходный код. Кратко
объясните, что такое язык HTML и как он работает. Расскажите вкратце о каскадных табли-
цах стилей и почему важно использовать CSS при создании дизайна.
Презентация: «Введение в HTML и CSS»
Раздел: «Введение в HTML и CSS»
11. Продемонстрируйте вкратце, какие теги следует включить в каждый документ HTML
(<html>, <head> <title>, <body>).
Цифровой дизайн: основы веб-дизайна  45

12. Кратко обсудите важность CSS в следующих случаях:


xx Упрощает форматирование текста.
xx Позволяет поддерживать согласованный дизайн веб-страниц.
xx Позволяет вносить изменения сразу по всему сайту.
13. Кратко обсудите рекомендации по использованию каскадных таблиц стилей и позна-
комьте учащихся с тремя основными типами стилей CSS: классами, селекторами тегов и
идентификаторами. Используя исходный код, продемонстрируйте учащимся, где и как при-
менялись CSS на веб-сайте учебного заведения.

Каркасы, композиции дизайна и настройка мини-приложения


(Рекомендуемое время: 100–150 минут)
14. Объясните, что в другом проекте они пройдут через все этапы процесса разработки. Од-
нако в рамках данного проекта они будут работать только с каркасами и композициями ди-
зайна, которые помогут им настроить мини-приложение Spry Image Slideshow With Filmstrip
для использования на веб-сайте учебного заведения.
Примечание. Если у вашего учебного заведения нет веб-сайта или он не подходит для данного
упражнения, можно добавить мини-приложение на другой сайт.

15. Вкратце обсудите и определите этапы разработки веб-проекта:


xx Определить:
xx Цели, целевую аудиторию, контент и требования к готовому проекту.
xx План проекта.
xx Создание контента
xx Структура:
xx Информационная архитектура и проектная документация.
xx Блок-схемы для отображения общей структуры веб-сайта.
xx Каркасы для закрепления основной структуры страниц веб-сайта.
xx Дизайн:
xx Дизайн композиций для создания подробных альтернативных вариантов дизайна.
xx Рецензирование композиций с клиентом для выяснения его предпочтений относи-
тельно дизайна.
xx Редизайн после получения отзывов от клиента.
xx Создание раскадровки.
xx Создание прототипа.
xx Сборка и тестирование:
xx Создание сайта на основе раскадровки.
xx Техническая проверка и тестирование юзабилити, ведение записи ошибок и требова-
ний по изменению дизайна.
46  Проект 1. Мини-приложение

xx Пересмотр с учетом результатов тестов.


xx Техническая проверка и тестирование юзабилити переделанного веб-сайта.
xx Финальная презентация для клиента и окончательная редакция
xx Запуск:
xx План запуска
Презентация: «Этапы разработки веб-проекта».
16. Попросите учащихся придумать собственные мини-приложения и элементы дизайна,
которые сделают его согласованным. Ниже приведены наводящие вопросы:
xx Какой шрифт вы используете для названий или заголовков?
xx Какими цветами вы отформатируете шрифты названий или заголовков?
xx Какой шрифт вы используете для описаний?
xx Каким цветом вы отформатируете шрифт описаний?
xx Как ваша панель навигации и текстовая навигация помогут посетителям узнать, в каком
разделе сайта они находятся?
17. Познакомьте учащихся с интерфейсом, терминологией и основными панелями и ин-
струментами программы Adobe Fireworks CS6.
Коротко продемонстрируйте приемы создания каркаса в программе Adobe Fireworks, объяс-
нив учащимся, что им придется заново создать каркас веб-сайта своего учебного заведения,
определяющий, где на странице будет размещено мини-приложение. Для использования в
этом упражнении, учащимся предложен каркас мини-приложения Spry Image Slideshow.
Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6»
Раздел по программе Adobe Fireworks: «Создание каркасов»
Файл: slideshow_widget_wireframe.fw.png
18. Предоставьте учащимся время для повторного создания каркаса главной страницы на
веб-сайте учебного заведения.
19. Познакомьте учащихся с концепцией композиции дизайна  — электронного чертежа,
демонстрирующего детальный дизайн веб-страницы или проекта. Продемонстрируйте об-
разец композиции дизайна, чтобы обсудить и подчеркнуть следующие аспекты:
xx Настроение: Композиция — это первое впечатление о том, как в действительности будет
выглядеть проект. Он должен немедленно передать соответствующее сообщение, к при-
меру, веселый, серьезный, молодой, организованный, модный или для всей семьи.
xx Цвет: Цвета должны быть хорошо скоординированы, соответствовать настроению и сти-
лю проекта, и обеспечивать достаточно контраста, чтобы дизайн был удобочитаемым.
Обсудите цвета из веб-безопасной палитры и решите, стоит ли учащимся работать толь-
ко с ними. Если позволит время, продемонстрируйте учащимся сайт Adobe Kuler (kuler.
adobe.com) и объясните, как пользоваться этим сервисом для создания и сохранения
пользовательских цветовых палитр с целью визуального дизайна любого проекта.
Цифровой дизайн: основы веб-дизайна  47

xx Шрифты: Чтобы добиться эффекта, не меняйте шрифты слишком часто. Подумайте,


как размер и толщина шрифтов привлекают внимание. При создании большинства веб-
проектов используются одни или два шрифта, а для дальнейшего различения меняются
их размер, цвет и толщина. Убедитесь, что контраст между шрифтом и цвета фона до-
статочно резкий, чтобы текст был разборчивым. Обсудите, какие шрифты общие для
операционных систем Windows и OS X.
xx Изображения: Изображения отражают контент и настроение. Фотографии должны
быть высокого качества. Текст, используемый с изображением должен располагаться до-
статочно близко, чтобы быть визуально связанным с изображением. Логотип организа-
ции должен располагаться правильно, быть нужного размера и т.д.
xx Текст: Посетители, скорее всего, будут просматривать информацию, а не читать ее пол-
ностью. Самая большая проблема — как использовать ровно столько текста, сколько
нужно, чтобы передать ключевые сообщения. Организуйте текст таким образом, чтобы
посетители могли просмотреть его и найти значимую информацию.
xx Навигационные элементы: Кнопки, меню и панели навигации должны отражать настро-
ение веб-сайта и эффективно сочетаться с цветом сайта, шрифтами и изображениями.
Файл: spry_slideshow_widget_comp1.fw.png
Файл: spry_slideshow_widget_copm2.fw.png
20. Попросите учащихся составить как минимум одну композицию дизайна мини-прило-
жения Spry Image Slideshow With Filmstrip, используя программу Adobe Fireworks.
Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
21. После того, как учащиеся завершат композиции, попросите несколько человек выста-
вить свои работы на рассмотрение группе.
Раздел: «Рецензия»

Выбор и подготовка изображений

(Рекомендуемое время: 50–100 минут)


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

Раздел: «Основы цифровой фотосъемки»


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

Раздел: «Принципы и нормы авторского права»


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

24. Объясните, что большинство изображений необходимо отредактировать. Предоставьте


учащимся время, чтобы отредактировать изображения в программе Adobe Fireworks CS6
или Adobe Photoshop CS6 и ознакомьте их с интерфейсом, терминологией и основными па-
нелями и палитрами. Обсудите и продемонстрируйте назначение слоев в программах Adobe
Photoshop и Adobe Fireworks.
Раздел по программе Adobe Photoshop: «Обзор рабочего пространства программы Adobe
Photoshop CS6»
25. Используя метод «я делаю, мы делаем, вы делаете», обсудите и продемонстрируйте
следующие техники, чтобы помочь учащимся сделать как можно лучшие фотографии для
слайд-шоу:
xx Навигация: Продемонстрируйте инструменты навигации по изображению, поворота
холста, а также панорамирования и масштабирования.
xx Кадрирование и выравнивание: используйте инструмент Рамка (Crop) для удаления
нежелательных элементов с фотографии.
xx Изменение размера: Используйте команды изменения размера изображения и холста,
чтобы изменить размер изображения.
xx Коррекция цвета: Используйте инструменты на палитре Коррекция (Adjustments)для
автоматической коррекции цвета.
xx Ретуширование: Примените инструмент Штамп (Clone Stamp) для удаления нежела-
тельных элементов, используйте инструмент Точечная восстанавливающая кисть (Spot
Healing Brush) для ретуширования небольших областей изображения, или инструмент
Красные глаза (Red Eye) для удаления эффекта красных глаз.
xx Разрешение: Подготовьте изображение для публикации во Всемирной паутине, прове-
рив разрешения.
xx Экспериментирование: Поэкспериментируйте и отследите изменения с помощью пали-
тры История (History), и удалите нежелательные операции с помощью команды Отмена
(Undo).
Раздел по программе Adobe Fireworks: «Предварительная обработка фотографий»
Раздел по программе Adobe Photoshop: «Изменение размеров, вращение и кадрирование изо-
бражений»
Раздел по программе Adobe Photoshop: «Коррекция цвета»
Раздел по программе Adobe Photoshop: «Ретушь фотографий»
Раздел по программе Adobe Photoshop: «Сохранение файлов в различных форматах»
Цифровой дизайн: основы веб-дизайна  49

Примечание. Демонстрируя инструменты редактирования, вы можете обсудить идею обратимого ре-


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

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


и для слайд-шоу, и в качестве соответствующих миниатюр диафильма. Объясните, что они
также должны выбрать порядок, в котором изображения будут появляться в слайд-шоу.
Необходимые размеры изображений для мини-приложения Spry Image Slideshow With
Filmstrip:
xx Горизонтальные изображения: 800 пикселов в ширину и 533 пиксела в высоту
xx Вертикальные изображения: 533 пиксела в ширину и 800 пикселов в высоту
xx Горизонтальные миниатюры: 200 пикселов в ширину и 133 пиксела в высоту
xx Вертикальные миниатюры: 133 пиксела в ширину и 200 пикселов в высоту

Редактирование и настройка правил CSS

(Рекомендуемое время: 100–150 минут)


27. Познакомьте учащихся с интерфейсом, терминологией и рабочими пространствами
программы Adobe Dreamweaver CS6. Используя метод «я делаю, мы делаем, вы делаете»,
обсудите и продемонстрируйте следующие техники:
xx Определения элементов интерфейса программы Adobe Dreamweaver.
xx Выбор и настройка рабочего пространства программы Adobe Dreamweaver.
xx Выбор представлений: Дизайн (Design), Код (Code), Разделение (Split), Live.
xx Создание нового документа.
Раздел по программе Adobe Dreamweaver: «Обзор рабочего пространства программы Adobe
Dreamweaver CS6»
28. Познакомьте учащихся с приложением Adobe Dreamweaver Widget Browser. Объяс-
ните, что Widget Browser представляет собой приложение с визуальным интерфейсом, по-
зволяющее просматривать и настраивать мини-приложения. С помощью Widget Browser
вы можете добавить мини-приложения в Adobe Dreamweaver, чтобы с легкостью вставлять
их на свои веб-страницы. Продемонстрируйте, как добавить мини-приложение Spry Image
Slideshow With Filmstrip в свои мини-приложения. Продемонстрируйте, как сохранить фай-
лы мини-приложений на жесткий диск компьютера. Продемонстрируйте, как вставить ми-
ни-приложение Spry Image Slideshow With Filmstrip в HTML-документ в программе Adobe
Dreamweaver и/или открыть файлы мини-приложений, сохраненные на компьютере.
Раздел по программе Adobe Dreamweaver: «Работа с приложением Widget Browser»
29. Объясните, что учащимся теперь нужно вставить изображения. В представлении Код
(Code) или Разделение (Split), продемонстрируйте учащимся расположение изображений
слайд-шоу. Применив метод «я делаю, мы делаем, вы делаете», продемонстрируйте, как вста-
вить их изображения в слайд-шоу Spry Image Slideshow With Filmstrip и как изменить раз-
меры изображений в программе Adobe Dreamweaver.
50  Проект 1. Мини-приложение

Раздел по программе Adobe Dreamweaver: «Добавление изображений»


Раздел по программе Adobe Dreamweaver: «Работа с панелью Вставка программы Adobe
Dreamweaver»
30. Напомните учащимся о каскадных таблицах стилей, которые они видели на веб-сайте
учебного заведения. Объясните, что теперь они изменят шрифт, текст, цвет, границы и т.п. в
слайд-шоу Spry Image Slideshow With Filmstrip с помощью таблицы стилей в соответствии с
их композицией дизайна.
Примечание. Программа Adobe Dreamweaver предоставляет возможность настройки мини-приложе-
ния в интерфейсе Widget Browser, однако при этом учащиеся не научится вносить изменения на-
прямую в таблицу стилей CSS. Можно отметить, что в будущем учащиеся смогут настроить стили CSS
мини-приложения в интерфейсе Widget Browser.

31. Продемонстрируйте, как открыть файл каскадных таблиц стилей мини-приложения


(basic_fs.css) на панели Стили CSS (CSS Styles). Используя стили, имеющиеся в файле
CSS, рассмотрите их особенности на панели Стили CSS (CSS Styles), чтобы продемонстри-
ровать учащимся типы стилей и правил, используемых для создания CSS в мини-приложе-
нии Spry Image Slideshow With Filmstrip.
Раздел по программе Adobe Dreamweaver: «Создание и изменение каскадных таблиц стилей»
32. Попросите учащихся внести коррективы в файл basic_fs.css в соответствии с их компо-
зициями дизайна. Попросите их выбрать стиль на панели Стили CSS (CSS Styles) и внести
изменения в существующее свойство стиля. Затем попросите их изменить характеристики
стиля, чтобы увидеть, как изменение проявляется на странице. (Можно нажать кнопку При-
менить (Apply), чтобы увидеть изменения без закрытия диалогового окна, если использует-
ся кнопка Изменить стиль (Edit Style)).
Примечание. Если позволит время, дайте учащимся задание создать новый стиль и добавить его в
файл CSS.

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

Добавление мини-приложений на веб-страницу

(Рекомендуемое время: 50–100 минут)


34. После завершения учащимися мини-приложений, попросите их сохранить файлы ми-
ни-приложения. Объясните, что мини-приложения сохраняются в папках Spry, со всеми со-
ответствующими таблицами CSS, сценариями JavaScript, изображениями и так далее.
35. Объясните, что теперь необходимо опубликовать и/или продемонстрировать мини-
приложения. Выберите из несколько вариантов в зависимости от наличия времени и ресур-
сов. Учащиеся должны опубликовать и/или отобразить свои мини-приложения одним из
следующих способов:
Цифровой дизайн: основы веб-дизайна  51

xx Если у вас нет доступа к веб-серверу, используйте команду Предварительный просмотр


в браузере (Preview In Browser),чтобы отобразить HTML-страницу с мини-приложе-
нием. Объясните, что для просмотра мини-приложений в веб-браузере необходимо вы-
брать команду меню Файл ⇒ Предварительный просмотр в браузере (File ⇒ Preview In
Browser) и выбрать нужный веб-браузер. Если они еще не сохранили свои HTML-файл,
следует сделать это до просмотра.
xx Попросите учащихся опубликовать на веб-сервере пустую HTML-страницу со вставлен-
ным мини-приложением.
xx Используйте HTML-файл домашней страницы вашего учебного заведения, в который
учащиеся вставят свои мини-приложения согласно каркасам, а затем просмотрите стра-
ницу или опубликуйте ее на веб-сервере.
Раздел по программе Adobe Dreamweaver: «Публикация файлов во Всемирной паутине»
Примечание. Если учащиеся готовятся к сдаче к сдаче экзамена Adobe Certified Associate, «Сетевые
коммуникации с использованием Adobe Dreamweaver CS6», публикация файлов на удаленный сер-
вер — одна из целей экзамена, поэтому этот вопрос следует рассмотреть здесь. Кроме того, учащие-
ся также будут иметь возможность опубликовать свой сайт, выполняя инструкции в Проекте 3.

Презентация работы
(Рекомендуемое время: 30–50 минут)
36. Попросите нескольких или всех учащихся представить свои мини-приложения аудито-
рии и объяснить, где они планируют разместить мини-приложение на главной странице учеб-
ного заведения, причины подобного размещения, и какие настройки и почему они провели.

Дополнительные задания
Проект можно дополнить следующими заданиями:
xx Дополнительное исследование дизайна: Выполните дополнительное исследование графи-
ческого дизайна. Пусть учащиеся найдут во Всемирной паутине дополнительные при-
меры каждого принципа дизайна.
xx Изучение: Чтобы предоставить учащимся больше сведений о каскадных таблицах сти-
лей, организуйте учащихся в группы, которым нужно будет подробнее изучить данную
тему и представить результаты аудитории.
Темы могут быть следующие:
xx Появление CSS
xx Действующие стандарты по CSS Консорциума W3C
xx Преимущества использования CSS
xx Подготовка к студенческому семинару: Можно попросить небольшую группу учащихся
просмотреть разделы об использовании программы Adobe Dreamweaver или справочные
сведения во Всемирной паутине, helpx.adobe.com/ru/dreamweaver.html, и выяснить,
как настроить локальный сайт и корневую папку. Эта группа может представить ауди-
тории обоснование необходимости создания сайта и объяснить, почему это так важно.
52  Проект 1. Мини-приложение

xx Конспектирование идей: Предложите учащимся законспектировать решения, которые


были приняты в процессе планирования их мини-приложений. Этот документ позволит
учащимся поразмышлять над данным процессом и создаст основу для подготовки пла-
нов последующих проектов.
xx Интервью: Чтобы помочь учащимся лучше понять важность создания каркаса веб-сайта,
найдите веб-дизайнера, которого они смогут расспросить о процессе планирования.
xx Помощь в аудитории: Чтобы побудить учащихся развивать самостоятельность при
поиске помощи, назначьте небольшую группу или пару учащихся, которые освоят
сложные навыки и представят результаты аудитории. Попросите их определить клю-
чевые термины (такие, как оптимизация) и объяснить значимость этих терминов
применительно к существующей задаче. Затем попросите учащихся сделать трех-,
пятиминутный доклад в начале занятия и продемонстрировать навык и полученные
результаты.
xx Учащиеся, справившиеся с заданием быстрее всех: Учащихся, заканчивающих работу
раньше, попросите импортировать их мини-приложения в программу Adobe Flash и соз-
дать мини-приложение для мобильного устройства или планшета или опубликовать про-
ект как мобильное приложение с помощью программ Adobe Dreamweaver и PhoneGap
(phonegap.com).

Оценка
xx По нескольким критериям, представленным далее в разделе «Критерии оценки».

Дополнительные ресурсы
xx Обзор пошаговых инструкций для учащихся, приведенных в этом проекте.
xx Видеоуроки, ориентированные на навыки, необходимые для выполнения этого проекта,
можно найти на сайте Adobe TV по адресу tv.adobe.com/show/digital-design-cs6/.
xx Дополнительные учебные ресурсы по созданию мини-приложений и другим темам этого
проекта можно найти по адресу edexchange.adobe.com.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Fireworks можно найти в справочных материалах программы.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Dreamweaver можно найти в справочных материалах программы.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Photoshop можно найти в справочных материалах программы.
xx При необходимости дополнительную информацию по авторскому праву можно найти на
веб-сайте по адресу fairuse.stanford.edu.

Мини-приложения
xx Обзор мини-приложений и бесплатная галерея: www.widgetbox.com/info/widgets/
explanation/ и www.widgetbox.com/widgets/.
Цифровой дизайн: основы веб-дизайна  53

xx Все о мини-приложениях: www.webopedia.com/DidYouKnow/Hardware_Software/


widgets.asp.
xx Создание HTML-фрагментов: support.sitekreator.com/html_snippet.html.
xx Ежедневно обновляющийся список бесплатных ресурсов для Всемирной паутины: www.
webresourcesdepot.com.
xx Приложение Adobe Dreamweaver Widget Browser: labs.adobe.com/technologies/
widgetbrowser/.
xx Работа с приложением Widget Browser: www.adobe.com/devnet/dreamweaver/articles/
using_widget_browser.html.
xx Обзор фреймворка Spry: labs.adobe.com/technologies/spry/home.html.

Фотография
xx Сведения по композиции изображений для начинающих фотографов можно найти по
адресу www.connectedphotographer.com/issues/issue200411/00001426001.html.
xx Советы по созданию композиций в цифровой фотографии можно найти по адресу digital-
photography-school.com/blog/digital-photography-composition-tips.
xx Различную информацию по цифровым фотоаппаратам можно найти по адресу www.
malektips.com/digital_cameras_help_and_tips.html.
xx Список ресурсов с советами по съемке потрясающих изображений можно найти по адре-
су www.kodak.com/ek/US/en/Consumer_Products/Tips_Projects_Center/Tips_from_
the_Pros.htm.
xx Советы по построению композиций изображений и определения элементов визуального
дизайна доступны по адресу photoinf.com/General/Robert_Berdan/Composition_and_
the_Elements_of_Visual_Design.htm.

Ключевые понятия
xx HTML
xx HTML5
xx Авторское право
xx Каркас
xx Каскадные таблицы стилей (CSS)
xx Композиции дизайна
xx Мини-приложение
xx Принципы дизайна

Стандарт ISTE NETS*S для учащихся


Этот проект соответствует технологическим стандартам ISTE NETS*S. В зависимости от
тематики и содержания, которые выбирает учащийся, вы можете изучить стандарты, при-
нятые в вашем государстве.
54  Проект 1. Мини-приложение

1. Творчество и инновации.
Учащиеся демонстрируют творческое мышление, исследовательские подходы и разрабаты-
вают инновационные продукты и процессы с использованием технологии. Учащиеся:
а. Применяют имеющиеся знания для получения новых идей, продуктов или процессов;
б. Создают оригинальные произведения как средство выражения личности или группы.
2. Коммуникации и сотрудничество.
Учащиеся используют цифровые средства и среды для общения и коллективной работы, в
том числе на расстоянии, поддержки индивидуального обучения и возможности обучения
других. Учащиеся:
а. Взаимодействуют, сотрудничают и работают со сверстниками, экспертами или другими
участниками, используя различные цифровые среды и средства.
3. Исследования и информационная компетентность.
Учащиеся умеют применять цифровые инструменты для сбора, оценки и использования ин-
формации. Учащиеся:
б. Находят, организовывают, анализируют, оценивают, обобщают и используют информа-
цию из различных источников и сред
4. Критическое мышление, решение проблем и принятие решений.
Учащиеся используют умение критически мыслить для планирования и проведения науч-
ных исследований, управления проектами, решения проблем и принятия обоснованных ре-
шений, используя соответствующие цифровые инструменты и ресурсы. Учащиеся:
б. Планируют и управляют деятельностью по разработке решения или выполнения проекта.
5. Цифровое гражданство.
Учащиеся понимают гуманитарные, культурные и социальные вопросы, связанные с инфор-
мационными технологиями и практикой легального и этичного поведения. Учащиеся:
а. Заявляют и практикуют безопасное, правовое и ответственное использование инфор-
мации и технологий.
6. Применение технологии и технологические концепции.
Учащиеся демонстрируют четкое понимание технологических концепций и систем, и их
применения. Учащиеся:
а. Понимают и используют технологические системы;
б. Эффективно и продуктивно выбирают и используют приложения.

Программа сертификации Adobe Certified Associate, экзамен «Сетевые


коммуникации с использованием Adobe Dreamweaver CS6»
1.1. Формулирование основных задач веб-сайта, определение целевой аудитории и ее по-
требностей.
Цифровой дизайн: основы веб-дизайна  55

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


аудитории.
1.3. Демонстрация знания стандартных требований к защите авторских прав (связанные тер-
мины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.5. Принятие решений о создании веб-сайта на основе собственного анализа и имеющихся
технических требований.
1.6. Осведомленность в принципах управления проектами.
2.1. Демонстрация знания рекомендаций, общих и относящихся к Dreamweaver, в отноше-
нии проектирования веб-сайтов, таких как поддержка согласованности, отделение содержи-
мого от проекта, использование стандартных шрифтов и визуальной иерархии.
2.3. Демонстрация знаний основных принципов разработки макетов страниц.
2.4. Определение ключевых принципов создания удобного, доступного веб-сайта, содержа-
щего понятный и разборчивый текст.
2.5. Демонстрация знания блок-схем, раскадровок и каркасных методов изображения объ-
ектов для создания веб-страниц и карты сайта (индекса сайта), которые поддерживают за-
планированную иерархию веб-сайта.
2.6. Обмен информацией с другими специалистами (например, коллегами и клиентами) о
планах по проектированию.
3.1. Умение работать с элементами интерфейса Dreamweaver.
3.2. Использование палитры Вставка (Insert).
3.3. Использование инспектора свойств.
3.6. Настройка рабочего пространства.
4.1. Демонстрация знания языка гипертекстовой разметки.
4.3. Создание, сохранение веб-страницы, добавление заголовка и имени.
4.4. Добавление текста на веб-страницу.
4.5. Вставка изображений и добавление дополнительного текста на веб-страницу.
5.1. Установка и изменение свойств документа.
5.2. Упорядочение макета веб-страницы при помощи относительно и абсолютно располо-
женных тегов div и стилей CSS.
5.4. Изменение изображений и свойств изображений.
5.6. Использование основных HTML-тегов для настройки HTML-документов, форматиро-
вания текста, добавления ссылок, создания таблиц и построения упорядоченных и неупоря-
доченных списков.
5.8. Применение CSS для многократного использования ресурсов.
6.5. Публикация файлов веб-сайта на удаленном сервере и их обновление.
56  Проект 1. Мини-приложение

Критерии оценки
0 — Результат 3 — Результат
5 — Результат превосходит
не соответствует соответствует
ожидания
ожиданиям ожиданиям
Оценка веб- Отсутствует или Оценка сайта включает в Оценка сайта включает в себя
сайта не завершена себя визуальное представ- визуальное представление с до-
ление с документами об кументами об авторских правах.
авторских правах, анализ Оценка содержит исчерпываю-
особенностей дизайна и щий анализ особенностей дизайна
достоверности контента. и достоверности контента в том,
как они соотносятся с эффектив-
ностью веб-сайта по отношению к
его аудитории и цели.
Каркас мини- Отсутствует или Каркас воссоздает сайт Каркас воссоздает сайт учебного
приложения не завершен учебного заведения и в заведения и в нем отведена область
нем отведена область для для размещения мини-приложе-
размещения мини-при- ние. Он опирается на принципы
ложения. Он опирается дизайна и содержит информацию
на принципы дизайна и о вариантах размещения и на-
содержит информацию о вигации. Учащиеся четко обосно-
вариантах размещения и вывают принятые дизайнерские
навигации. Учащиеся чет- решения для мини-приложения.
ко обосновывают приня- В объяснениях также содержит-
тые дизайнерские решения ся обобщенная информация об
для мини-приложения. анализе мини-приложения и
веб-сайта.
Композиции Отсутствует или Композиции дизайна Композиции дизайна учащегося
дизайна не завершены учащегося точно отражают точно отражают аудиторию, цели,
аудиторию, цели, выбор выбор цвета, настроение, изобра-
цвета, настроение, изо- жения, текст и выбранный вариант
бражения, текст и выбран- навигации. Отобранные компози-
ный вариант навигации. ции отражают различные подходы
Отобранные композиции к дизайну. Композиции сочетаются
отражают различные под- с общим дизайном сайта, для кото-
ходы к дизайну. Компози- рого предназначено мини-прило-
ции сочетаются с общим жение и учащиеся могут объяснить
дизайном сайта, для каким образом были применены
которого предназначено принципы дизайна для оказания
мини-приложение. влияния на аудиторию.
Работа с изо- Отсутствует или Учащийся верно при- Учащийся верно и уместно при-
бражениями не завершена меняет цветокоррекцию, меняет цветокоррекцию, инстру-
инструменты выделения и менты выделения и ретуширова-
ретуширования при работе ния при работе с изображениями
с изображениями и фокуси- и фокусировке на теме компо-
ровке на теме композиции. зиции. Изменения изображения
Изменения изображения поддерживают изначальное
поддерживают изначальное значение изображения.
значение изображения.
Цифровой дизайн: основы веб-дизайна  57

0 — Результат 3 — Результат
5 — Результат превосходит
не соответствует соответствует
ожидания
ожиданиям ожиданиям
Мини-прило- Отсутствует или Учащийся разбирается в Учащийся разбирается и может
жение не завершено стилях CSS и применяет их четко рассказать о стилях CSS
для настройки мини-при- и применяет их для настройки
ложения. Учащийся создает мини-приложения. Учащийся
CSS, сочетая измененные и создает CSS, сочетая изменен-
новые стили. Учащиеся пу- ные и новые стили. Учащиеся
бликуют мини-приложения публикуют мини-приложения на
на HTML-странице. веб-сайте учебного заведения.

Анализ веб-сайтов
Имя учащегося: ____________________________________ Дата: __________________
URL-адрес: ______________________________________________________________
Название сайта: ___________________________________________________________
Категория: ______________________________________________________________

Визуальная разметка
Опишите визуальные элементы на стартовой странице. Что привлекло ваше внимание в
первую очередь?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

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

Если на странице расположены изображения, увеличивают ли они ценность контента, или


служат для украшения и привлечения внимания? Если изображения увеличивают ценность
контента, опишите, каким образом.
_______________________________________________________________________
_______________________________________________________________________
58  Проект 1. Мини-приложение

_______________________________________________________________________
_______________________________________________________________________

Насколько быстро происходит заполнение страницы? Стоила ли страница времени, потра-


ченного на ожидание?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько хорошо компоновка текста помогает посетителям в понимании основного смыс-


ла контента сайта? Придерживается ли расположение и стиль текста подходящей визуаль-
ной иерархии? Если так, каким образом визуальная иерархия помогает посетителям понять
контент страницы?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Согласованность структуры
Повторяются ли какие-либо элементы на последующих страницах? Эти элементы служат
для украшения или для навигации?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Способствует или препятствует повторение достижению конечной цели сайта?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько согласованно расположение схемы навигации?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  59

Насколько согласованны цвета?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько согласованны шрифты и размеры шрифтов? Как различаются стили текста?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Цветовая схема
Соответствует ли цветовая схема цели и характеру сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Каким образом цветовая схема помогает или препятствует в достижении конечной цели сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Предвзятость контента
Можете ли вы сказать, почему сайт был создан? Есть ли организация, связанная с сайтом, и
если так, какого типа эта организация?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Ясно ли для вас, какая доля контента сайта относится к фактам, а какая основана на сужде-
ниях?
_______________________________________________________________________
_______________________________________________________________________
60  Проект 1. Мини-приложение

_______________________________________________________________________
_______________________________________________________________________

Есть ли в представленной информации какая-либо предвзятость? Существует ли скрытая


цель?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Актуальность контента
Когда информация на странице была размещена в первый раз?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Когда информация проверялась в последний раз?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Присутствуют ли какие-либо другие признаки того, что данная информация актуальна? Ка-
чественны ли связанные ссылки?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Источник контента
Кто несет ответственность за контент данного сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  61

Какой квалификацией и опытом обладает автор для написания страниц по теме данного
сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Существует ли возможность проверки легитимности автора, например, посредством адреса


электронной почты, телефонного номера или почтового адреса?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Кто спонсор сайта? Проводился ли обзор сайта, получал ли сайт какие-либо награды?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Какое доменное имя у сайта? Что говорит вам о сайте данное имя?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Подтверждение контента
Какие еще сайты обладают информацией по данной теме?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Отличается ли эта информация?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
62  Проект 1. Мини-приложение

Являются ли эти другие источники достоверными?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Введение в HTML и CSS


Прежде чем начинать изучать каскадные таблицы стилей (CSS), вы должны получить базо-
вые знания о HTML — языке программирования, используемом для создания веб-страниц.
Структура и внешний вид веб-страницы определяются ее исходным кодом. Язык программи-
рования, используемый для написания этого кода веб-страниц — это язык гипертекстовой
разметки или HTML.
Если просмотреть исходный код большинства веб-страницы, вы увидите строку за строкой
обычного текста, в окружении коротких команд, называемых HTML тегами. Эти теги заклю-
чены в квадратные скобки в начале и в конце блоков текста, и они указывают веб-браузеру,
как отображать информацию, находящуюся между тегами и взаимодействовать с ней. Теги
заключаются в угловые скобки (<>) и обычно указываются парами: начальный (открываю-
щий) и конечный (закрывающий) теги. В примере ниже показаны два HTML-тега, сообщаю-
щие веб-браузеру, где начинается и заканчивается абзац текста (рис. 1.1). Сами HTML-теги
не отображаются в браузере.

Открывающий тег абзаца Закрывающий тег абзаца

<p>Это абзац текста.</p>

Рис. 1.1. Пример HTML тегов

При верстке веб-страниц с помощью программы Adobe Dreamweaver в представлении Ди-


зайн (Design), HTML-код создается автоматически. При работе в Adobe Dreamweaver вы
увидите следующие распространенные теги:
xx <html> </html> описывает веб-страницу
xx <head> </head> описывает заголовок веб-страницы
xx <body> </body> описывает отображаемый контент страницы
xx <h1> </h1> отображается заголовок в диапазоне размеров от h1 (самый крупный) до h6
(самый мелкий)
xx <p> </p> форматирует текст как абзац
xx <strong> </strong> выделяет текст полужирным
xx <em> </em> акцентированный текст, отображается как курсив
Цифровой дизайн: основы веб-дизайна  63

xx <br> создает конец (разрыв) строки


xx <a href=”http://www.example.com”> </a> создает ссылку на веб-страницу
Примечание. В программе Adobe Dreamweaver применяется форматирование кода цветом, чтобы
помочь вам определить общие категории тегов и элементы кода в представлении Код (Code).

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

О правилах CSS
Правило CSS состоит из двух частей: селектора и определения (или в большинстве случаев,
набора определений). Селектор — это термин (например, p, h1, имя класса или идентифика-
тора), который идентифицирует форматируемый элемент.
Набор определений определяет свойства стиля. В следующем примере, h1 (тег заголовка) –
селектор, а все, что находится между фигурных скобок ({ и }) — набор определений (указы-
вающим свойства заголовка h1):

h1 {
font-family: Georgia, 典imes New Roman , Times, serif;
font-size: 18px;
text-transform: uppercase;
color: #090;
}
64  Проект 1. Мини-приложение

Отдельное определение состоит из двух частей: свойства (например, font-family) и значения


(например, Georgia). В предыдущем правиле CSS, был создан определенный стиль для те-
гов h1: текст всех тегов h1, связанных с этим стилем будет величиной 18 пикселов, набран
шрифтом Georgia, прописными буквами, и выделен цветом #090.
Стиль (формирующийся из правила, или набора правил) находится в коде, отдельно от тек-
ста, который он, собственно, форматирует — обычно во внешней таблице стилей или в разде-
ле заголовка HTML-документа. Так, одно правило для тегов h1 может быть применено сразу
ко многим тегам (а в случае внешних таблиц стилей, правило можно применить ко многим
тегам сразу на нескольких разных страницах) (рис. 1.2). Таким образом, CSS предоставляет
возможность очень легко вносить обновления. При обновлении CSS правила в одном месте,
форматирование всех элементов, которые используют определенный стиль, автоматически
обновляется в соответствии с новым стилем.

Рис. 1.2. Обновление правил CSS в одной локации влечет за собой обновление всех элементов

Существуют три основных типа стилей CSS:


xx Стиль класса (Класс): Похож на стили, используемые в текстовых редакторах и програм-
мах предпечатной подготовки. Например, вам необходимо отформатировать весь текст
шрифтом Arial размером 10 пунктов, темно-зеленого цвета. Вы можете создать класс с
этими атрибутами, а затем применить этот стиль ко всему тексту в разделе тела страниц
на вашем сайте. Имена классов должны начинаться с точки и могут содержать любую
комбинацию букв и цифр (например, .myhead1).
xx Стиль тега (Селектор тега): Применяет глобальное форматирование для отдельных те-
гов HTML, а не отдельных областей.
xx Предположим, вы хотите изменить стиль заголовка 1, чтобы текст всегда был фиолето-
вым. Вместо того чтобы создать класс и применить его ко всем заголовкам 1 в документе,
можно создать селектор тега с этим атрибутом и применить его к тегу <h1> определен-
ного заголовка 1. По сути, вы переопределяете HTML-тег.
xx Стиль идентификатора (Идентификатор): уникальный идентификатор (ID) для сти-
ля, применяемого к заголовкам, баннерам, меню и другим элементам, встречающимся
Цифровой дизайн: основы веб-дизайна  65

только в одном месте в документе. Используется однократно в документе или странице.


Идентификаторы должны начинаться со знака решетки (октоторпа) (#) и может содер-
жать любую комбинацию букв и цифр (например, #myID1).
CSS правила могут располагаться следующим образом:
xx Внутренние таблицы стилей — наборы правил CSS, включенные в тело отдельного тега
(посредством его атрибута style) этого документа. Все правила этой таблицы действуют
только на содержимое этого тега.
xx Глобальные таблицы стилей — это наборы правил CSS, включенные в тег style в разделе
заголовка HTML-документа.
xx Внешние таблицы стилей — это наборы правил CSS, хранящиеся в отдельном, внешнем
файле CSS (.css) (не HTML-файле). Вы связываете этот файл с одной или несколькими
страницами веб-сайта с помощью ссылки или правила @import в разделе заголовка до-
кумента.

Эволюция HTML и CSS


HTML и CSS — постоянно развивающиеся веб-стандарты.
HTML5 — пятая версия языка HTML, в которую добавлены теги для поддержки мульти-
медийных элементов и динамической графики в современных веб-браузерах и различных
устройствах. Спецификация CSS3 определяет новый набор модульных правил о том, как
HTML-контент представляется в веб-браузерах.
В программе Adobe Dreamweaver, вы можете верстать веб-страницы в том числе и на языке
HTML5. Adobe Dreamweaver предоставляет подсказки кода для элементов HTML5 и стилей
CSS3 при верстке страницы в представлении Код (Code). Для упрощения создания HTML5-
страниц с нуля программа содержит шаблонные макеты.
Вы должны соблюдать следующие рекомендации при верстке страниц на языке HTML5:
xx Используйте элемент <!doctype html>, чтобы сообщить браузерам, что веб-страница на-
писана на языке HTML5.
xx Примените элемент <meta charset=»utf-8»>, сообщить браузерам, какой набор символов
используется в документе.
xx Используйте семантические теги разметки <article>, <section>, <header>, <nav> и дру-
гие, чтобы повысить уровень структурной значимости HTML5-документов.
xx Спроектируйте и протестируйте контент в целом ряде браузеров и устройств, которые
поддерживают возможности HTML5.
Просмотрите следующие материалы по HTML5 и CSS3 консорциума W3C:
xx Спецификации HTML5 Консорциума W3C: dev.w3.org/html5/spec/single-page.html
xx Отличия HTML5 от HTML4: www.w3.org/TR/html5-diff/
xx Главная страница сайта Консорциума W3C, посвященная CSS: www.w3.org/Style/CSS
66  Проект 1. Мини-приложение

Обзор рабочего пространства программы


Adobe Fireworks CS6
В этом руководстве вы узнаете, как:
xx Работать с рабочим пространством Adobe Fireworks CS6: инструментами, окнами доку-
мента, меню, палитрами и панелями.
xx Настроить рабочее пространство.
xx Изменить масштаб документа.
xx Перемещаться по документу с помощью инструментов и палитр.

Изучение рабочего пространства


Когда вы запускаете программу Adobe Fireworks в первый раз и открываете документ, ра-
бочее пространство включает в себя панель приложения, панель инструментов, инспектор
свойств, меню и другие палитры (рис. 1.3). В центре рабочего пространства расположено
окно документа. Панель инструментов, расположенная в левой части рабочего простран-
ства, разделена на поименованные категории, содержащие группы инструментов такие, как
Растр. (Bitmap), Вектор (Vector) и Web.
Инспектор свойств отображается под окном документа и первоначально отображает свой-
ства документа. Содержимое данной панели обновляется по мере того, как вы работаете с
документом. При выборе инструмента, в инспекторе свойств отображаются свойства и па-
раметры этого инструмента, при выборе объекта в документе, на панели отображаются свой-
ства и параметры объекта.
Палитры изначально сгруппированы с правой стороны рабочего пространства.
Для создания и управления документами и файлами в программе Adobe Fireworks, исполь-
зуются различные элементы рабочего пространства такие, как палитры, панели и окна. Лю-
бое расположение этих элементов называется рабочим пространством. Рабочие простран-
ства программ пакета Adobe Creative Suite 6 выглядят одинаково, чтобы вам было проще
переходить из одного приложения в другое. Вы также можете адаптировать каждое при-
ложение, к тому, как вам привычно работать, выбрав одно из множества заданных рабочих
пространств или создав собственные настройки.
xx Панель приложения в верхней части содержит переключатель рабочих пространств, меню
(только для Windows) и прочие средства управления приложениями. В операционной
системе OS X, в некоторых программах, вы можете отобразить или скрыть эту панель,
выбрав команду меню Окно ⇒ Панель приложения (Window ⇒ Application Bar).
xx Окно документа отображает файл, с которым вы работаете. Окна документов могут рас-
полагаться как вкладки, а в некоторых случаях, сгруппированы и закреплены.
xx Панель инструментов содержит инструменты для создания и редактирования изображе-
ний, иллюстраций, элементов страницы, и так далее. Инструменты со схожими функци-
ями сгруппированы.
Цифровой дизайн: основы веб-дизайна  67

Переключатель рабочих пространств


Панель
приложения

Окно документа

Панель
инструментов

Палитры
Инспектор
свойств

Рис. 1.3. Рабочее пространство программы Adobe Fireworks CS6

xx Инспектор свойств отображает параметры и свойства выбранного элемента.


xx Палитры помогают контролировать и изменять проекты. В качестве примера палитр
можно привести Слои (Layers), Выровнять (Align) и Библиотека документов (Document
Library). Палитры могут быть сгруппированными, плавающими или закрепленными.

Настройка рабочего пространства


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

Сохранение пользовательского рабочего пространства


1. Переместите элементы интерфейса программы Adobe Fireworks и манипулируйте ими
в соответствии с вашими потребностями (рис. 1.4).
2. В меню переключателя рабочих пространств, выберите вариант Сохранить текущие
(Save Current) (рис. 1.5). Откроется диалоговое окно, в котором необходимо ввести назва-
ние нового рабочего пространства (рис. 1.6).
68  Проект 1. Мини-приложение

Рис. 1.4. Макет пользовательского рабочего пространства

3. Введите название рабочего пространства.


4. Нажмите кнопку OK, чтобы закрыть диалоговое окно.
5. Щелкните мышью по переключателю рабочих пространств. Обратите внимание, что
название нового рабочего пространства доступно в меню переключателя среди предустанов-

Рис. 1.5. Переключатель рабочих Рис. 1.6. Диалоговое окно нового рабочего
пространств пространства
Цифровой дизайн: основы веб-дизайна  69

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

Рис. 1.7. Выбор сохраненного рабочего пространства


с помощью переключателя рабочих пространств

Работа с файлами в программе Adobe Fireworks


В общих чертах, в программе Adobe Fireworks вы открываете документы и графические фай-
лы точно так же, как и в других приложениях. Новые документы в Adobe Fireworks сохра-
няются в формате Portable Network Graphic (PNG). PNG — собственный формат файлов
программы Adobe Fireworks.
Изображения, созданные в программе Adobe Fireworks можно экспортировать или сохра-
нять в различных веб и графических форматах. Независимо от оптимизации и выбранных
настроек экспорта, исходный файл Adobe Fireworks в формате PNG файл сохраняется, что
позволяет с легкостью редактировать его впоследствии.

Создание нового документа


1. Выберите команду меню Файл ⇒
Создать (File ⇒ New). Откроется диа-
логовое окно Новый документ (New
Document) (рис. 1.8).
2. По желанию измените любые из за-
данных значений:
xx Размер документа.
xx Разрешение документа.
xx Цвет холста:
Белый цвет (White) устанавливает бе-
лый цвет фона холста.
Прозрачный (Transparent) создает неви-
димый фон. Рис. 1.8. Диалоговое окно Новый документ
70  Проект 1. Мини-приложение

Пользовательский (Custom) задействует палитру цветов, чтобы установить пользователь-


ский цвет фона.
3. Нажмите кнопку OK.

Обзор панели инструментов


Панель инструментов в программе Adobe Fireworks состоит из шести категорий: Выделить
(Select), Растр (Bitmap), Вектор (Vector), Web, Цвета (Colors) и Просмотр (View) (рис. 1.9).

Инструмент Указатель Инструмент Выделение в группе


Инструмент Масштабирование Инструмент Кадрирование

Инструмент Область Инструмент Лассо


Инструмент Волшебная палочка Инструмент Кисть
Инструмент Карандаш Инструмент Ластик
Инструмент Размытие Инструмент Штамп

Инструмент Линия Инструмент Перо


Инструмент Прямоугольник Инструмент Текст
Инструмент Свободное перо Инструмент Нож

Инструмент Прямоугольная
Фрагмент
активная область
Кнопка Скрыть фрагменты Кнопка Показать фрагменты и активные
и активные области области

Инструмент Пипетка
Индикатор Цвет обводки
Индикатор Цвет заливки
Кнопки Задать цвета обводки/
заливки по умолчанию, Кнопка Полноэкранный режим с меню
Нет обводки или заливки и
Поменять цвета обводки/заливки
Кнопка Полноэкранный режим
Кнопка Стандартный режим Инструмент Масштаб
Инструмент Рука

Рис. 1.9. Панель инструментов


Цифровой дизайн: основы веб-дизайна  71

При выборе инструмента, в инспекторе свойств отображаются его параметры и настройки.


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

Использование инструмента Масштаб для навигации по документу


Инструмент Масштаб (Zoom) можно использовать для увеличения или уменьшения доку-
мента.

Изменение масштаба документа


1. Откройте документ и обратите внимание на уровень масштаба в нижней части окна до-
кумента (рис. 1.10). Здесь указано текущее увеличение вида изображения или уровень мас-
штабирования.
2. Выберите инструмент Масштаб (Zoom), щелкнув мышью по его значку на панели ин-
струментов (рис. 1.11) или нажав клавишу Z (клавиша для выбора данного инструмента).

Инструмент
Масштаб

Рис. 1.10. Уровень масштабирования Рис. 1.11. Панель инструментов


72  Проект 1. Мини-приложение

3. Щелкните мышью в любой позиции окна документа. Масштаб изображения изменится


в соответствие с предустановленной процентной величиной. Позиция, в которой вы щел-
кнули мышью, станет центром увеличенного вида.
4. С помощью инструмента Масштаб (Zoom), создайте рамку выделения, чтобы охватить об-
ласть документа (рис. 1.12). Выделенная область увеличится и заполнит все окно документа.
5. Чтобы уменьшить масштаб, щелкните мышью, удерживая клавишу Alt (Windows) или
Option (OS X) (рис. 1.13).

Рис. 1.12. Выделение прямоугольной Рис. 1.13. Уменьшение масштаба


области документа

Навигация по документу с помощью


инструмента Рука
Инструмент Рука (Hand) перемещает изо-
бражение в окне документа. Это полезно,
если вы хотите увидеть часть изображе-
ния, находящуюся в данный момент вне
поля зрения.

Использование инструмента Рука


1. Увеличивайте область документа,
пока часть изображения не окажется вне
поля зрения (рис. 1.14). Когда часть доку-
мента перестанет быть видимой в окне до-
кумента, появятся полосы прокрутки.
2. Выберите инструмент Рука (Hand)
на панели инструментов (рис. 1.15). Рис. 1.14. Окно документа с полосами прокрутки
Цифровой дизайн: основы веб-дизайна  73

3. С помощью инструмента Рука (Hand) перетащите документ, чтобы просмотреть раз-


личные его части (рис. 1.16).

Инструмент Рука

Рис. 1.15. Панель Рис. 1.16. Использование инструмента Рука


инструментов для перемещения по документу

Использование инспектора свойств


Инспектор свойств контекстно-зависим. Эта панель отображает свойства и параметры вы-
бранного в данный момент объекта, инструмента или документа. По умолчанию, инспектор
свойств закреплен в нижней части рабочего пространства.
Инспектор свойств может быть открыт на половину своей высоты и показывать две строки
свойств, или полностью и отображать четыре строки. Кроме того, можно полностью свер-
нуть инспектор свойств, оставив его в рабочем пространстве. Для переключения между эти-
ми тремя состояниями дважды щелкните мышью по вкладке инспектора (панели) или один
раз — по стрелке в левом верхнем углу.

Различные объекты и инспектор свойств


1. Открыв документ, выберите инструмент Указатель (Pointer) на панели инструментов,
а затем выделите объект в документе. Обратите внимание, что информация в инспекторе
свойств содержит тип изображения, размер и положение объекта (рис. 1.17).
2. Затем выберите инструмент Текст (Type) (и выделите область текста, если таковая име-
ется). Содержимое инспектора свойств изменится, и отобразятся элементы управления, по-
зволяющие форматировать текст (рис. 1.18).
74  Проект 1. Мини-приложение

Рис. 1.17. Инспектор свойств отображает характеристики растрового изображения

Рис. 1.18. Инспектор свойств отображает характеристики текста

Работа со слоями
Слои разделяют документ Adobe Fireworks на отдельные плоскости, как если бы элементы
иллюстрации были нарисованы на отдельных листах прозрачной пленки. Каждый объект в
документ находится на слое (рис. 1.19). Вы можете создать слой перед тем, как начнете ри-
совать или добавлять их по мере необходимости. Холст находится под всеми слоями и сам
по себе слоем не является.

Рис. 1.19. Модель слоев в программе Adobe Fireworks

Палитра Слои (Layers) отображает текущее состояние всех слоев на странице документа
(рис. 1.20). Активный слой выделен. Порядок наложения — это порядок, в котором объекты
отображаются в документе. Он определяет, как объекты одного слоя перекрываются объ-
ектами другого слоя. В программе Adobe Fireworks недавно созданные слои располагаются
сверху стопки слоев. Вы можете изменить порядок слоев и объектов в слоях, а также создать
вложенные слои и переместить объекты на них.
На палитре Слои (Layers) также отображаются маски и элементы управления непрозрачно-
стью и режимами наложения.
Цифровой дизайн: основы веб-дизайна  75

Развернуть/
Свернуть слой

Показать/
Скрыть слой Активны слой

Заблокировать/
разблокировать слой
Удалить выделение

Создать или дублировать Создать Новое растровое


слой вложенный слой изображение
Рис. 1.20. Палитра Слои

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

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


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

1. Создание эскиза на бумаге


От руки на бумаге набросайте эскиз главной страницы или экрана. Включите в него все основ-
ные элементы дизайна макета, которые вы хотели бы видеть на нескольких страницах или экра-
нах, к примеру, навигацию, области контента, заголовки и логотипы. Рассмотрим эти вопросы:
xx Графика. Какие изображения вы включите? Где будут размещаться графические элемен-
ты на странице или экране?
76  Проект 1. Мини-приложение

Рис. 1.21. Вариант каркаса

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

2. Сканирование и импорт проектов


С помощью сканнера создайте цифровую копию эскиза каркаса. Импортируйте ее в про-
грамму Adobe Fireworks.

3. Планирование общих элементов дизайна


Опираясь на эскиз, набросайте основные области дизайна каркаса с помощью основных ин-
струментов рисования и направляющих в программе Adobe Fireworks.

4. Создание нескольких каркасов страницы или экрана


На палитре Страницы (Pages) создайте нужное количество страниц или экранов для исход-
ного дизайна. По мере развития вы можете добавлять или удалять страницы или экраны по
необходимости.

5. Уникальные элементы на отдельных страницах или экранах


На каждую страницу добавьте уникальный дизайн, средства навигации или элементы веб-
формы. На палитре Общая библиотека (Common Library) вы сможете найти множество
кнопок, текстовых полей и раскрывающихся меню, которые ускорят процесс дизайна.
Цифровой дизайн: основы веб-дизайна  77

6. Имитация навигации с помощью ссылок


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

7. Экспорт готового интерактивного каркаса


Программа Adobe Fireworks предлагает несколько форматов вывода вашего прототипа, каж-
дый из которых сохраняет гипертекстовые ссылки для навигации по прототипу.

Создание каркасов с помощью программы Adobe Fireworks CS6


С помощью программы Adobe Fireworks вы создадите базовый двухстраничный интерактив-
ный каркас.

Инструкция, шаги с 1 по 3
В этом разделе вы набросаете каркас, отсканируете и импортируете его в программу Adobe
Fireworks, а затем распланируете общие элементы дизайна.

Создание каркаса из эскиза

1. Нарисуйте эскиз каркаса на бумаге. Включите в него все основные компоненты такие,
как навигация, области контента, заголовки и логотипы.
2. Отсканируйте эскиз в графический файл на компьютере.
3. Запустите программу Adobe Fireworks и создайте новый документ шириной 1024 пик-
села и высотой 700 пикселов.
Примечание. Эти стандартные размеры веб-страницы. Размеры могут отличаться, если вы разраба-
тываете мини-приложение.

4. Откройте палитру Слои (Layers) и создайте или переименуйте два слоя:


xx Каркас
xx Эскиз каркаса
Убедитесь, что слой Эскиз каркаса расположен
под слоем Каркас (рис. 1.22).
5. Выделив слой Эскиз каркаса, выберите ко-
манду меню Файл ⇒ Импорт (File ⇒ Import). От-
кроется диалоговое окно Импорт (Import).
6. Выберите файл, который вы сканировали в
шаге 2, и нажмите кнопку Открыть (Open).
7. Щелкните мышью по левому верхнему углу Рис. 1.22. На палитре Слои расположены
холста, чтобы поместить туда импортированный слои Каркас и Эскиз каркаса
78  Проект 1. Мини-приложение

эскиз. Необходимо масштабировать рисунок в соответствии с размером холста. Щелкните


мышью по импортированному эскизу, чтобы его выделить.
8. Эскиз может выходить за пределы холста или быть меньше размера холста.
9. В инспекторе свойств щелкните мышью по кнопке Сохранить пропорции (Constrain
Proportions) (рис. 1.23).

Текстовое поле Ширина


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

Кнопка Сохранить Положение


пропорции по осям X и Y

Рис. 1.23. Инспектор свойств

10. В текстовом поле Ширина выделенной области (Width Pixel Dimension) укажите зна-
чение 1024 и убедитесь, что значения координат X и Y установлены равными 0.
11. Нажмите клавишу Tab. Изображение изменится, чтобы соответствовать ширине хол-
ста.
12. На палитре Слои (Layers) заблокируйте слой Эскиз каркаса. Он станет фоном, на ко-
торый вы будете накладывать элементы каркаса.
13. Выделите слой Каркас.
14. Убедитесь, что отображаются линейки и направляющие. Если нет, выберите команды
меню Просмотр ⇒ Линейки (View ⇒ Rulers) и Просмотр ⇒ Направляющие ⇒ Показать
направляющие (View ⇒ Guides ⇒ Show Guides).
15. Для создания горизонтальной или вертикальной направляющей, перетащите указатель
мыши, удерживая нажатой кнопку мыши, от соответствующей точки на линейке к краю об-
ласти логотипа, области основного контента и первой кнопки навигации (рис. 1.24).
Примечание. Цвет направляющей можно изменить, чтобы сделать его более заметным на различных
фонах. Для изменения цвета направляющей, выберите команду меню Редактирование ⇒ Установ-
ки (Edit ⇒ Preferences) (Windows) или Fireworks ⇒ Установки (Fireworks ⇒ Preferences) (OS X) и
категорию Направляющие и сетки (Guides And Grids).

16. Выберите команду меню Просмотр ⇒ Направляющие ⇒ Заблокировать направля-


ющие (View ⇒ Guides ⇒ Lock Guides). Блокировка направляющих не позволит случайно
переместить их.
17. Выберите команду меню Просмотр ⇒ Направляющие ⇒ Привязка к направляющим
(View ⇒ Guides ⇒ Snap To Guides). Функция привязки позволяет выравнивать объекты
Цифровой дизайн: основы веб-дизайна  79

Рис. 1.24. Импортированный эскиз с добавленными направляющими

точно по направляющим, если объекты находятся недалеко от них. В категории Направля-


ющие и сетки (Guides And Grids) диалогового окна Установки (Preferences) направляющих
и сеток можно указать, насколько близким должно быть расстояние привязки.
18. На панели инструментов выберите инструмент Прямоугольник (Rectangle).
19. В инспекторе свойств внесите следующие изменения (рис. 1.25):
а. В раскрывающемся списке индикатора Заливка (Fill) выберите вариант Без заливки
(None).
б. В раскрывающемся списке индикатора Обводка (Stroke) выберите вариант Стандартный
⇒ Мягкая линия (Basic ⇒ Soft Line).
в. Установите темно-серый цвет обводки.
г. Установите ширину обводки 10 пикселов.
Параметр
Без заливки

Рис. 1.25. Параметры инструмента Прямоугольник в инспекторе свойств

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


та и области логотипа эскиза (рис. 1.26). Когда вы будете рисовать, прямоугольники при-
вяжутся к направляющим.
80  Проект 1. Мини-приложение

Рис. 1.26. Прямоугольники, созданные


вокруг элементов страницы
Рис. 1.27. Вокруг кнопки навигации создан
прямоугольник со скругленными углами

21. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle)


на панели инструментов.
22. Создайте прямоугольник вокруг первой кнопки навигации каркаса (рис. 1.27).
23. С помощью инструмента Указатель (Pointer) выделите прямоугольник со скругленны-
ми углами. Перетащите его влево, удерживая клавишу Alt (Windows) или Option (OS X),
чтобы создать копию прямоугольника, и установите ее над второй кнопкой навигации кар-
каса.
Примечание. Может появиться диалоговое окно с предупреждением, что изменение вложенных
элементов автофигур может привести к непредсказуемым результатам. Установите флажок Больше
не показывать (Don’t Show Again) и закройте окно, нажав кнопку OK.

24. Выберите команду меню Редактирование ⇒ Создать дубликат (Edit ⇒ Repeat


Duplicate). Это действие создает вторую копию, оставляя одинаковое расстояние между ко-
пиями.
25. Продолжайте создавать дубликаты, пока не получите необходимое количество кнопок
навигации согласно эскизу (рис. 1.28).
Теперь пришло время добавить текстовые метки.
26. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
27. На панели инструментов выберите инструмент Текст (Type).

Рис. 1.28. Три копии скругленных кнопок


Цифровой дизайн: основы веб-дизайна  81

28. В инспекторе свойств щелкните мышью по индикатору заливки и выберите темный


оттенок. Нажмите кнопку Выравнивание по центру (Center Alignment) и присвойте пара-
метру Размер (Text Size) значение 30.
29. Однократно щелкните мышью по области логотипа и введите текст Логотип.
30. Убедитесь в том, что «Быстрые» направляющие (Smart Guides) отображаются. Если
нет, выберите команду меню Просмотр ⇒ «Быстрые» направляющие ( View ⇒ Smart
Guides), а затем активируйте параметры Показать «быстрые» направляющие (Show Smart
Guides) и Привязка к «быстрым» направляющим (Snap To Smart Guides).
31. Перетащите текстовый блок в центр прямоугольника и добавьте текстовые метки к
остальным кнопкам навигации и в области основного контента. ««Быстрые» направляю-
щие (Smart Guides) помогут вам создать, выровнять, редактировать и преобразовывать объ-
екты с учетом их положения относительно других элементов.
32. Сбросьте флажок напротив пункта меню Просмотр ⇒ Направляющие ⇒ Показать на-
правляющие (View ⇒ Guides ⇒ Show Guides).
33. Как только вас устроит положение текста и прямоугольных элементов, скройте слой
Эскиз каркаса. Когда слой с эскизом скрыт, ваше изображение должно выглядеть так, как
показано на рис. 1.29.

Рис. 1.29. Готовый эскиз каркаса

34. Выберите команду меню Файл ⇒ Сохранить как (File ⇒ Save As) и сохраните файл в
формате PNG.
82  Проект 1. Мини-приложение

Инструкция, шаги 4 и 5
Теперь, когда вы создали простой каркас страницы или экрана, следующий шаг — создать
несколько страниц или экранов с различным контентом. Программа Adobe Fireworks CS6
позволяет создать столько страниц или экранов, сколько необходимо, содержащих общие и
уникальные для каждой страницы элементы.

Создание нескольких страниц или экранов на основе каркаса

1. Откройте палитру Страницы (Pages) (команда меню Окно ⇒ Страницы (Window ⇒


Pages)), если она не отображается в правой части рабочего пространства (рис. 1.30).

Меню параметров
страницы

Кнопка Создать/
дублировать слой

Рис. 1.30. Палитра Страницы

2. Щелкните правой кнопкой мыши (Windows) или щелкните мышью, удерживая клави-
шу Control (OS X), по текущей странице на палитре Страницы (Pages) и выберите команду
Задать в качестве главной страницы (Set As Master Page) из контекстного меню.
3. В нижней части палитры Страницы (Pages) дважды щелкните мышью по значку Соз-
дать/дублировать слой (Add Page), чтобы добавить две пустые страницы. На новых страни-
цах в качестве фона отображается главная страница.
4. Дважды щелкните мышью по названиям новых
страниц, чтобы их переименовать, присвоив, соот-
ветственно, имена Домашняя и Магазин (или любое
другое имя, которое вы будете использовать для вто-
рой страницы каркаса).
5. Перейдите на страницу Домашняя, выбрав ее
на палитре Страницы (Pages) (рис. 1.31).
6. Выбрав инструмент Текст (Type), добавьте заго-
ловок страницы в верхней части области основного
контента.
7. Перейдите на страницу магазина, выбрав ее на Рис. 1.31. Палитра Страницы
палитре Страницы (Pages) и также с помощью ин- с выбранной страницей Домашняя
Цифровой дизайн: основы веб-дизайна  83

струмента Текст (Type), добавьте заголовок страницы в верхней части области основного
контента, как и на странице Домашняя.
8. Выберите инструмент Прямоугольник (Rectangle) на панели инструментов.
9. В инспекторе свойств выберите нейтральные цвета заливки и обводки.
10. Нарисуйте прямоугольник в области основного контента второй страницы, рядом с за-
головком страницы. Этот прямоугольник служит заполнителем для изображения на страни-
це магазина или контента текстовой страницы (рис. 1.32).
11. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).

Рис. 1.32. Добавление заполнителя для контента на уровне страницы

Инструкция, шаг 6
В этом разделе вы добавите активные области для создания кнопок навигации или ссылок
между двумя страницами вашего прототипа.

Добавление навигации к каркасу

1. Перейдите на главную страницу, выбрав ее на палитре Страницы (Pages).


2. На панели инструментов выберите инструмент Прямоугольная активная область
(Rectangle Hotspot) (рис. 1.33).
84  Проект 1. Мини-приложение

Инструмент
Прямоугольная
активная
область

Рис. 1.33. Панель инструментов Рис. 1.34. Создание активных областей

3. Создайте активную область поверх прямоугольника Логотип.


4. Создайте активную область поверх второго прямоугольника, со скругленными углами
(рис. 1.34).
5. Используя инструмент Указатель (Pointer), выберите первую активную область.
6. В инспекторе свойств в раскрывающемся списке Ссылка (Link) укажите значение
home.htm (рис. 1.35).

Раскрывающийся
список Ссылка

Рис. 1.35. Инспектор свойств

7. Выделите вторую активную область и укажите в раскрывающемся списке Ссылка


(Link) инспектора свойств значение shop.htm (или имя файла вашей второй страницы).
Так как активные области находятся на главной странице, при экспорте файла из программы
Adobe Fireworks в интерактивный PDF-файл, каждая страница будет связана с другими.
8. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).

Инструкция, шаг 7
Экспортируйте интерактивный прототип вашего каркаса в формат PDF и в функциональ-
ный HTML-файл (рис. 1.36).
Интерактивный PDF-файл идеально подходит для просмотра клиентом потому, что можно
просмотреть весь веб-сайт или мини-приложение и вносить замечания по мере необходимо-
сти с помощью инструментов, доступных в программе Adobe Acrobat.
Программа Adobe Fireworks создает чистый HTML-файл, который может быть открыт
в большинстве веб-браузеров и HTML-редакторов. Вы можете проверить интерактив-
ные возможности каркаса и отредактировать его, при необходимости, в программе Adobe
Dreamweaver.
Цифровой дизайн: основы веб-дизайна  85

Рис. 1.36. Экспорт каркасов из программы Adobe Fireworks

Экспорт каркаса в интерактивный файл формата PDF

1. Выберите команду меню Файл ⇒ Экспорт (File ⇒ Export). Откроется диалоговое окно
Экспорт (Export) (рис. 1.37).
2. В раскрывающемся списке Экспорт (Export) выберите вариант Adobe PDF.
3. Убедитесь, что установлен флажок Показать PDF-файл после экспорта (View PDF
After Export).
4. Укажите имя и местоположение файла, а затем нажмите кнопку Сохранить (Save)
(Windows) или Экспорт (Export) (OS X).
Каркас будет экспортирован в формат PDF и открыт в программе Acrobat.
5. Проверьте, что ссылки каркаса работают верно (рис. 1.38).
86  Проект 1. Мини-приложение

Параметр Показать
PDF-файл после экспорта
Рис. 1.37. Диалоговое окно Экспорт

Рис. 1.38. Тестирование ссылок


в программе Acrobat
Цифровой дизайн: основы веб-дизайна  87

Экспорт каркаса в файл формата HTML

1. Выберите команду меню Файл ⇒ Экспорт (File ⇒ Export). Откроется диалоговое окно
Экспорт (Export).
2. Перейдите к папке на жестком диске, в которую следует экспортировать каркас.
3. В раскрывающемся списке Экспорт (Export) выберите вариант HTML и изображения
(HTML and Images).
4. В раскрывающемся списке Страницы (Pages) выберите вариант Все страницы (All
Pages).
5. Чтобы сохранить изображения в отдельную папку, установите флажок Изображения
в подпапку (Put Images In Subfolder). Вы можете выбрать конкретную папку или использо-
вать созданную программой Adobe Fireworks по умолчанию подпапку изображений.
6. Укажите имя файла, а затем нажмите кнопку Сохранить (Save) (Windows) или Экс-
порт (Export) (OS X).
После экспорта, вы увидите, что изображения и HTML-файл будут сохранены в папке, ко-
торую вы указали в диалоговом окне Экспорт (Export).
7. Перейдите к сохраненному файлу, откройте страницу home.htm в браузере, и проверь-
те, работают ли ссылки каркаса так, как должны (рис. 1.39).

Рис. 1.39. Тестирование HTML-файла в браузере


88  Проект 1. Мини-приложение

Создание композиций дизайна страницы


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

Рис. 1.40. Пример композиции дизайна

Программа Adobe Fireworks предоставляет идеальную среду работы с прототипами, преоб-


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

Процесс веб-дизайна
Обычно процесс веб-дизайна может состоять из нескольких этапов, включающих любые из
перечисленных ниже:
1. Брифинг — утверждение технических, дизайнерских целей и идей веб-проекта.
Цифровой дизайн: основы веб-дизайна  89

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


подобных вариантов веб-дизайна, анализ сайтов конкурентов, действий пользователей, их
личностей, анализ рынка, вариантов использования и многое другое.
3. Мозговой штурм — этап создания концепции, опирающийся на этапы брифинга и исследо-
вания, когда в короткий промежуток времени генерируется множество идей.
4. Творческое решение следует за этапом мозгового штурма. Здесь результаты брифинга, ис-
следования, а также идеи, объединяются для создания четкого направления дизайна. Этот
этап может включать в себя разработку технических спецификаций, составление блок-схем
информационной архитектуры, функционирующих каркасов и композиций дизайна. Этот
этап часто представляет собой итеративный, повторяющийся процесс, в котором решают-
ся проблемы, композиции представляются на рецензирование клиентом, разрабатывается
функциональность и вносятся изменения.
5. Производство — реализация веб-проекта в полной мере. Композиции дизайна оконча-
тельно доработываются и включаются в прототип каркаса, а веб-проект разворачивается в
полноценное производство.
Как вы могли заметить, композиции дизайна — важная частью процесса веб-дизайна с мо-
мента принятия творческого решения до этапа производства.
Рассмотрим следующие вопросы, пока вы будете планировать и создавать собственную ком-
позицию дизайна для веб-проекта.

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

Навигация
Чтобы посетители вашего сайта могли понять его контент, вам необходимо обеспечить яс-
ную навигацию. Посетители должны знать, в каком месте сайта они находятся, куда им не-
90  Проект 1. Мини-приложение

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

Создание композиций дизайна с помощью Adobe Fireworks CS6


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

Создание холста и импорт файлов


1. Запустите программу Adobe Fireworks и создайте новый документ, указав в нем раз-
меры своего веб-проекта.
2. Выделите Слой 1 и выберите команду меню Файл ⇒ Импорт (File ⇒ Import). Откро-
ется диалоговое окно Импорт (Import) (Windows) или Импорт файла (Import File) (OS X).
3. Перейдите к изображению, которое
хотите использовать в качестве фонового и
нажмите кнопку Открыть (Open).
4. Щелкните мышью в левом верхнем
углу холста, чтобы поместить туда импор- Координаты
тированный фон. Фоновое изображение XиY
появится на холсте.
5. Убедитесь, что в инспекторе свойств
значения координат X и Y равны 0 (рис. 1.41). Рис. 1.41. Инспектор свойств
6. Выберите команду меню Файл ⇒ Им-
порт (File ⇒ Import). Откроется диалоговое
окно Импорт (Import) (Windows) или Импорт файла (Import File) (OS X).
7. Перейдите к файлу логотипа и нажмите кнопку Открыть (Open). Откроется диалого-
вое окно Импорт страницы (Import Page) (рис. 1.42).
Каждый файл PNG программы Adobe Fireworks может содержать несколько страниц. Когда
вы вставляете файл PNG или страницы, содержащие объекты основного слоя, главная стра-
ница превращается в обычный слой и импортируется.
Цифровой дизайн: основы веб-дизайна  91

8. Нажмите кнопку Импорт (Import) (Windows)


или Открыть (Open) (OS X) в диалоговом окне Им-
порт страницы (Import Page).
9. Щелкните мышью по холсту рядом с верхним
краем и чуть правее левого верхнего угла, чтобы до-
бавить импортированный логотип. Логотип размещен
на холсте.
10. Выберите команду меню Файл ⇒ Импорт (File ⇒
Import). Откроется диалоговое окно Импорт (Import)
(Windows) или Импорт файла (Import File) (OS X).
11. Перейдите к файлу фотографии и нажмите кноп-
ку нажмите кнопку Открыть (Open).
12. Щелкните в области основного контента на хол- Рис. 1.42. Диалоговое окно
сте и добавьте импортированную фотографию. Фото- Импорт страницы
графия размещена на холсте.
13. Выберите команду меню Файл ⇒ Сохранить Как (File ⇒ Save As) и сохраните файл в
формате PNG.

Применение инструментов фигур, заливок и выравнивания


1. На панели инструментов выберите инструмент Прямоугольник (Rectangle).
2. В инспекторе свойств нажмите кнопку Градиентная заливка (Gradient Fill). Появится
всплывающая панель градиента (рис. 1.43).

Тип градиента

Сплошная Градиентная Цветовые узлы


заливка заливка

Рис. 1.43. Панель градиента в инспекторе свойств


92  Проект 1. Мини-приложение

3. Укажите Линейный (Linear) тип градиента,


если он еще не выбран.
4. Щелкните по цветовому узлу слева и вы-
берите темно-серый оттенок, например значение
#222222 в шестнадцатеричной системе (рис. 1.44).
Нажмите клавишу Enter.
5. Щелкните по цветовому узлу справа и выбе-
рите более светлый оттенок, например, значение
#333333.
6. Нажмите клавишу Enter, чтобы закрыть па-
нель градиента.
7. Перетащите указатель мыши, чтобы нари-
совать прямоугольник в нижней части холста.
Этот прямоугольник станет колонтитулом веб-
страницы. Рис. 1.44. Панель палитры цветов
8. Выберите команду меню Выделение ⇒ Отме-
нить выделение (Select ⇒ Deselect).
9. Выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle
Tool) на панели инструментов.
10. В инспекторе свойств нажмите кнопку Сплошная заливка (Solid Fill) и выберите свет-
ло-серый оттенок, например, значение #CCCCCC.
Примечание. К прямоугольнику со скругленными углами также можно применить и градиентную
заливку.

11. Нажмите клавишу Enter, чтобы закрыть панель Цвет Ширина Тип
градиента. обводки обводки обводки
12. В инспекторе свойств установите белый цвет
обводки (значение #FFFFFF), укажите величину в 1
пиксел в поле размера кончика и тип обводки Мягкий
(1 пиксел) (1-Pixel Soft) (рис. 1.45).
13. Убедитесь, что «быстрые» направляющие отобра-
жаются. Если нет, выберите команду меню Просмотр
⇒ «Быстрые» направляющие (View ⇒ Smart Guides),
а затем установите флажки Показать «Быстрые» на-
Рис. 1.45. Инспектор свойств
правляющие (Show Smart Guides) и Привязка к «бы-
стрым» направляющим (Snap To Smart Guides).
14. Перетащите указатель мыши, чтобы нарисовать на холсте прямоугольник с закруглен-
ными углами подходящий для использования в качестве кнопки.
15. Выделите прямоугольник со скругленными углами.
Цифровой дизайн: основы веб-дизайна  93

16. Выберите команду меню Редактирование ⇒ Создать дубликат (Edit ⇒ Duplicate)


трижды, чтобы создать в общей сложности четыре кнопки. При повторении команды дубли-
каты выбранного объекта будут появлять-
ся каскадом вниз от оригинала. Новый
дубликат появляется на 10 пикселов ниже
и на 10 пикселов правее предыдущего. Са-
мый последний дубликат оказывается вы-
деленным.
17. Выберите инструмент Указатель
(Pointer) и перетаскивайте прямоугольник
со скругленными углами вправо, пока рядом
с правым верхним углом объекта не появят- Рис. 1.46. Выравнивание объектов с помощью
ся «быстрые» направляющие (рис. 1.46). «быстрых» направляющих
18. Расположите остальные фигуры в
ряд между первым и последним прямоугольником со скругленными углами. Не беспокой-
тесь о расстоянии, вы скорректируете его в следующих шагах.
19. Выберите команду меню Окно ⇒ Выровнять (Window ⇒ Align). Откроется палитра
Выровнять (Align) (рис. 1.47).

Выравнивание центра по вертикали

Расположить равномерно по горизонтали

Рис. 1.47. Палитра Выровнять

20. Щелкните мышью по четырем фигурам прямоугольников, удерживая клавишу Shift, на


холсте или на палитре Слои (Layers).
21. На палитре Выровнять (Align) нажмите кнопки Выравнивание центра по верти-
кали (Align Vertical Center) и Расположить равномерно по горизонтали (Space Evenly
94  Проект 1. Мини-приложение

Horizontally). Фигуры прямоугольников со скругленными углами будут выровнены и вер-


тикали и распределены на холсте на равном расстоянии друг от друга.
22. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).

Применение инструментов для работы с текстом


1. Выберите инструмент Текст (Type) на панели инструментов. Текст в документе Adobe
Fireworks появляется в текстовом блоке (прямоугольник с маркерами).
2. Установите следующие параметры текста в инспекторе свойств (рис. 1.48):
xx Гарнитура: Georgia
xx Стиль шрифта: Regular
xx Размер шрифта: 46
xx Цвет шрифта: #ECECEC
Гарнитура Стиль шрифта Размер шрифта
Цвет
шрифта

Выравнивание

Рис. 1.48. Инспектор свойств

3. Щелкните мышью по холсту ниже логотипа. Появится блок текста автоматически уста-
новленного размера.
Блок текста автоматически установленного размера расширяется по горизонтали при вво-
де текста и уменьшается при удалении текста. Блоки текста автоматически установленного
размера создаются по умолчанию, когда вы щелкаете мышью по холсту при выбранном ин-
струменте Текст (Type) и начинаете ввод текста.
4. Введите слово Магазин.
5. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
6. Все еще с активным инструмен-
том Текст (Type) смените гарнитуру на
Verdana, и размер текста на 16 и убеди-
тесь, что текст выровнен по левому краю.
7. Перетащите указатель мыши по
холсту между заголовком Магазин и Рис. 1.49. Для создания блока текста
фотографией, чтобы создать блок текста фиксированной ширины, перетащите указатель
фиксированной ширины (рис. 1.49). мыши при активном инструменте Текст
Цифровой дизайн: основы веб-дизайна  95

Блок текста фиксированной ширины позволяет регулировать ширину текста в них. Блоки
текста фиксированной ширины создаются по умолчанию, когда вы перетаскиваете указа-
тель мыши, чтобы нарисовать блок текста при активном инструменте Текст (Type).
8. Добавьте текст-заполнитель для имитации двух или трех абзацев текста.
9. Чтобы переместить текстовый блок, перетащите его с помощью инструмента Указатель
(Pointer). Для изменения его размера, перетащите один из маркеров.
10. Выберите команду меню Выделение ⇒ Отменить выделение (Select ⇒ Deselect).
11. Выберите инструмент Текст (Type) и смените гарнитуру на Georgia, установите размер
шрифта 21, и темно-серый цвет текста (значение #222222).
12. Щелкните мышью по первому прямоугольнику со скругленными углами, чтобы соз-
дать блок текста автоматически установленного размера.
13. Введите слово Магазин.
14. Выберите инструмент Указатель (Pointer) и
перемещайте блок текста, пока не появятся горизон-
тальная и вертикальная «быстрые» направляющие.
Так текст будет выровнен по центру прямоугольника
со скругленными углами (рис. 1.50).
15. Щелкните мышью по блоку текста и прямоу-
гольнику со скругленными углами и, удерживая кла-
вишу Shift, выберите команду меню Изменение ⇒ Рис. 1.50. Используйте «быстрые»
Сгруппировать (Modify ⇒ Group). направляющие для выравнивания
текста и объектов
16. Повторите шаги 12—15 и создайте еще три
кнопки навигации: Дизайнер, Наш магазин и Блог.
17. Создайте текстовый блок в нижней части страницы поверх темно-серого прямоуголь-
ника колонтитула и добавьте текст нижнего колонтитула.
18. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save).

Рецензия
Имя учащегося: _______________________________ Дата: _______________________
Проект: _________________________________________________________________

Краткие сведения
Рецензирование — это важная часть процесса дизайна. Помимо того, что вы оцениваете
проект самостоятельно или вместе с вашим клиентом и вносите соответствующие изме-
96  Проект 1. Мини-приложение

нения, рецензирование может также принести пользу вашему проекту. Рецензирование


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

Процесс представления работы на рецензию


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

Рекомендации по комментированию и внесению


предложений
xx Перед тем, как предоставлять комментарии, просмотрите весь документ и убедитесь, что
намерения дизайнера вам понятны. Или, если работу на рецензию представляет дизай-
нер, в первую очередь вы должны обратить внимание на назначение, целевую аудиторию
и задачи этой работы.
xx Если назначение, целевая аудитория и задачи дизайнера понятны, задайте вопросы ди-
зайнеру, дайте свои комментарии и внесите предложения.
xx Отметьте сильные и слабые стороны документа (дизайн, макет, оформление и так далее).
xx Внесите предложения, но не отдавайте приказы. Например, не говорите «Вы должны
сделать это…». Лучше использовать местоимения первого лица: «Я вижу, что…» или
«Мне непонятно, почему…».
xx Уважайте и будьте внимательны к чувствам других. Не говорите и не пишите то, что вы
не хотели бы услышать в ответ. Для проявления жестокости нет причин.
xx Ваши комментарии должны быть понятными и четкими, чтобы ваш коллега точно знал,
что вы имеете в виду. Приводите конкретные примеры и ссылайтесь на принципы дизай-
на, композиции изображений, советы по созданию макетов и так далее, чтобы аргумен-
тировать вашу точку зрения. (Общие комментарии, как, например, «Это непонятно» или
«Это слишком размыто», не несут никакой практической пользы. Лучше использовать
такие комментарии: «Мне непонятен смысл этого изображения, поскольку в данном слу-
чае отсутствует его название».)
xx Если вы оформляете комментарии в письменном виде, прочтите их перед тем, как от-
править вашему коллеге. Ваши комментарии должны иметь смысл и быть написаны по-
нятным языком.
Цифровой дизайн: основы веб-дизайна  97

Основы цифровой фотосъемки


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

Преимущества цифровой фотосъемки


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

Начинаем цифровую фотосъемку


Думаете, что для цифровой фотосъемки вам нужен цифровой фотоаппарат? Подумайте луч-
ше. Все, что вам нужно — это компьютер, и можно начинать.

Получение изображений
Существует несколько способов получения снимков на компьютере:
xx Отсканируйте существующие фотографии и запишите их на CD-диск. Отсканируйте
уже сделанные фотографии. Если у вас есть сканер дома, на работе или в университе-
те, или услуги по сканированию вам предоставляет фотоателье, запишите свои лучшие
фотографии на CD-диск и так вы сможете легко и быстро перекинуть их на компьютер,
чтобы отредактировать, напечатать или отправить кому-либо.
xx В фотоателье попросите, чтобы фотографии записали на CD-диск, вместо того чтобы
напечатать. Если вы сделали фотографии с помощью пленочного фотоаппарата и при-
несли их в фотоателье, попросите записать их на CD-диск, а не печатать. Так у вас будет
возможность пользоваться всеми преимуществами цифровых фотографий.
xx Используйте цифровой фотоаппарат. Существует множество моделей цифровых фото-
аппаратов. Прежде чем совершить покупку, составьте список необходимых функций, ко-
торыми должен обладать ваш фотоаппарат.
98  Проект 1. Мини-приложение

Делаем снимок красивым


Очень приятно показывать свои фотографии родственникам, друзьям, преподавателям и
одноклассникам. Благодаря цифровым технологиям вы получаете действительно безгра-
ничные возможности. Вы можете:
xx Создать слайд-шоу для учебного проекта;
xx Создать фотоальбом, в котором будет видно, как изменились коллеги за учебный год;
xx Записывать фотографии на CD-диски;
xx Печатать поздравительные открытки, календари и плакаты;
xx Создавать оформления ковриков для мыши, кофейных чашек и пр.
Процесс цифровой фотосъемки быстрый, интересный и простой. Вам нужно только воображе-
ние и несколько щелчков кнопкой мыши — и готово. Хотите получить больше возможностей?
Используйте графический редактор Adobe Photoshop и проявите свои творческие способности.

Цифровые фотоаппараты: краткая история


Одно из главных достоинств цифровой фотосъемки — это то, что вы можете увидеть фотогра-
фию сразу же. С помощью нескольких щелчков кнопкой мыши вы можете скачивать, система-
тизировать, редактировать и отправлять свои цифровые фотографии. Кажется просто, верно?
Но известно ли вам, что мы шли к этому уровню развития фотосъемки 150 лет? Фотосъемка —
это искусство фиксации света. И именно в этом заключалась функция первых фотоаппаратов.
Первый фотоаппарат назывался камера обскура, он был оснащен большим стеклом, на кото-
рое проецировалось изображение; это изображение обводили по контуру карандашом.

Экскурс в прошлое
Процесс фотографии изобрел француз Луи Жак Манде Дагер в 1839 году. В 1850-е просмотр
фотографий людей и мест был популярным семейным времяпрепровождением — как про-
смотр телевидения в наши дни. Большинство фотографий представляли вещи в том свете, в
каком люди хотели их видеть.
Приблизительно во время гражданской войны в США (1861-1865 гг.) появился новый вид
фотосъемки  — фотожурналистика. Она была направлена на фиксацию военных событий.
Основоположником американской фотожурналистики был Мэтью Б. Брэди. Когда в газетах
стали печататься фотографии Брэди, люди поняли, насколько впечатляющими могут быть
фотографии.
В 1888 году Джордж Истман создал первый фотоаппарат для широкого использования. Он
назвал свою компанию Kodak, его фотоаппараты были просты в использовании, и пленки
хватало на 100 снимков. Цветная фотография была изобретена в 1907 году, но до 1935 года
она не пользовалась особой популярностью.
Первый цифровой фотоаппарат был создан в 1994 году. Тогда он стоил 18000 долларов и
обладал разрешением в 1 мегапиксел. За последние без малого 20 лет технология сильно
продвинулась вперед. Сейчас всего за 200 долларов можно купить цифровой фотоаппарат с
разрешением 17 мегапикселов.
Цифровой дизайн: основы веб-дизайна  99

Преимущества цифровой фотографии


Цифровая фотосъемка используется не только для создания хороших фотографий, но и для
важных задач в различных сферах деятельности: в полиции, здравоохранении, юриспруден-
ции, образовании, страховании, недвижимости, науке и многих других.
Благодаря цифровым фотографиям мы можем увидеть то, что никогда не видели. Космиче-
ский телескоп «Хаббл» отправляет на Землю цифровые фотографии из космоса с 1990 года.
Фактически, это, вероятно, самая большая цифровая фотокамера, когда-либо созданная, —
она величиной с автобус.
На одном из снимков запечатлена первая планета, обнаруженная за пределами Солнечной
системы. Эта планета почти в три раза больше, чем Юпитер, самая большая планета в нашей
системе. Но с помощью цифровых фотографий можно увидеть не только огромные пред-
меты. Также с их помощью можно увидеть крохотные объекты, такие как клетки и микро-
скопические частицы.
Задумайтесь на минуту о том, как вы могли бы использовать цифровую фотосъемку.
Может быть, вы бы раз в неделю делали снимки своего щенка или котенка, чтобы от-
слеживать его рост? Или вы бы начали создавать какой-либо арт-проект? Цифровая фо-
тосъемка предоставляет вам уникальные возможности. Приготовьтесь к удивительным
приключениям.

10 самых распространенных мифов о цифровой фотосъемке


На ранних этапах развития цифровой фотосъемки были трудности. Фотокамеры были до-
рогими. Качество фотографий оставляло желать лучшего. Было не так много средств редак-
тирования и обработки цифровых фотографий.
С тех пор многое изменилось к лучшему. Изменились и фотокамеры, и фотографии. Ин-
струменты обработки изображений сделали работу с цифровыми фотографиями простой
как никогда раньше.
Но по-прежнему некоторые люди негативно относятся к цифровой фотосъемке. Итак, мы
приводим 10 самых распространенных мифов — и опровергаем их:
1. Цифровые фотографии хуже пленочных. Сегодня цифровые фотоаппараты созда-
ют отличные фотографии, даже большего размера при печати. Пленка тоже совершен-
ствуется и позволяет делать хорошие фотографии, но цифровые технологии развивают-
ся быстрее.
2. Цифровые фотоаппараты большие и тяжелые. Существует множество маленьких,
очень легких цифровых фотоаппаратов со множеством функций. С их помощью также мож-
но создавать качественные фотографии.
3. Цифровые фотоаппараты медленно работают. На протяжении долгого времени циф-
ровые фотоаппараты работали медленнее, чем их пленочные собратья. С каждым годом ско-
рость их работы увеличивается.
100  Проект 1. Мини-приложение

4. Цифровые фотоаппараты дорого стоят. Цифровые технологии становятся все дешев-


ле. В скором будущем цифровые фотоаппараты будут стоить не дороже пленочных камер.
5. Чтобы передать цифровые фотографии на компьютер нужно много времени. Исполь-
зуйте USB-порт или устройство чтения карт памяти, это увеличит скорость копирования.
Самые быстрые устройства чтения карт памяти могут за одно и то же время скопировать на
компьютер в шесть раз больше данных, чем стандартный привод CD-дисков.
6. Цифровые фотографии сложно просматривать и редактировать. Теперь уже нет. На-
пример, программа Adobe Photoshop удивительно проста в изучении и использовании.
7. Цифровые фотографии сложно печатать. Печатать цифровые фотографии просто. Вы
можете напечатать их дома на принтере или через Интернет с помощью онлайновых фото-
сервисов.
8. Цифровые фотографии плохо выглядят на печати. Практически невозможно опреде-
лить различие между распечатанными цифровыми фотографиями и обычными пленочными
фотографиями.
9. Цифровые фотографии сложно систематизировать и хранить. Программа Adobe
Bridge представляет собой визуальный браузер, который упрощает поиск нужного фай-
ла. Существует две версии программы Adobe Bridge: полная версия открывает отдельное
окно приложения и совместима со всеми программами пакета Creative Suite, а палитра Mini
Bridge позволяет получить доступ к изображения непосредственно через интерфейс прило-
жения Photoshop. Можно защитить от потери свои исходные файлы с фотографиями — или,
как их еще называют, цифровые негативы — записав их на CD-диск.
10. Цифровая фотосъемка приносит слишком много удовольствия. Простите, но это
правда!

Принципы и нормы авторского права


Авторское право — это защита интеллектуальной собственности.
Интеллектуальная собственность представляет собой что-либо, написанное или созданное
человеком. Это может быть музыка, текст, картины, фотографии, звуки и т.д.
Положение о законном использовании входит в состав закона об авторском праве. В нем ут-
верждается, что ограниченные части материала могут быть использованы без письменного
разрешения для определенных целей, таких как новостное сообщение или учебная работа.
Однако в нем не раскрывается понятие «ограниченных частей», так что удостоверьтесь, что
вы не злоупотребляете материалом. Данное положение требует ссылаться на автора или
правообладателя любого используемого вами материала.
Creative Commons — некоммерческая организация, которая создала бесплатные для исполь-
зования публичные лицензии, с помощью которых авторы и правообладатели могут распро-
странять свои произведения более широко и свободно, а потребители контента легально и
более просто пользоваться этими произведениями.
Цифровой дизайн: основы веб-дизайна  101

Спектр лицензий четырех условий предоставляют набор «базовых прав», которые позволя-
ют распространять работы, защищенные авторским правом, по всему миру, без обмена и на
безвозмездной основе. Четыре условия включают в себя: атрибуцию (требование указывать
автора произведения), некоммерческое использование (запрет на использование произведе-
ния в целях получения прибыли), запрет на создание производных произведений и сохра-
нение условий (требование распространять производные произведения только на услови-
ях лицензии исходного произведения). Лицензии компании Creative Commons разрешают
сочетать данные условия. Для получения дополнительной информации посетите веб-сайт
creativecommons.org.
Производные произведения — материалы, защищенные авторским правом, которые были
переработаны или изменены. Такой материал защищен законом об авторском праве. Если
вы измените фотографию, защищенную авторским правом с помощью компьютерных про-
грамм, данная фотография все равно будет считаться защищенной и ее запрещено использо-
вать без письменного разрешения.
Академические стандарты для материалов, защищенных авторским правом, выше, чем для
других. Так как ученые и исследователи реализуют множество различных замыслов и ответ-
ственны за сообщение этих идей миру, эти сообщения должны удовлетворять более высоким
стандартам достоверности. Они должны ссылаться на автора не только при цитировании
точного высказывания другого человека, но и при цитировании идей, которые выражены
этими словами. Как исследователь, вы не можете перефразировать сказанное другим и не
указать ссылку на автора.
Библиографии — это списки источников, которые были использованы в научных исследо-
ваниях. При использовании источников во Всемирной паутине для научных исследований
или для проектирования, вы должны ссылаться на автора, где это необходимо. Зачастую
люди, которые используют изображения из Всемирной паутины для публикации на соб-
ственной веб-странице, создают список авторов изображений вместо библиографии.

Нормы авторского права


1. Материалы, защищенные авторским правом, не могут быть использованы без письмен-
ного разрешения автора материала (или его правообладателя).
2. Материал может быть защищен, даже если на нем не отображается символ ©. Даже если
нет упоминания об авторских правах, следует считать, что все материалы из другого источ-
ника защищены.
3. Наказание за нарушение законов об авторских правах может варьироваться от легкого
до серьезного. При нарушении закона об авторском праве вы можете просто получить со-
общение от автора по электронной почте с просьбой прекратить использование материала.
Если материал опубликован на веб-сайте, веб-мастер может закрыть ваш сайт. Также вы мо-
жете навлечь на себя судебное разбирательство.
4. Чтобы убедиться, что вами не нарушен какой-либо закон об авторских правах, важно
сделать следующее:
102  Проект 1. Мини-приложение

xx Написать и отправить электронное письмо автору или правообладателю и попросить


разрешение на использование материала. Не использовать его, пока не получено раз-
решение.
xx Следовать инструкциям на сайте, касающимся использования материала. Вас могут по-
просить создать ссылку на вашей странице или предупредить автора или правообладателя;
xx Самое главное: не использовать материал без письменного разрешения.
5. Чтобы заявить авторские права на ваш собственный материал, уведомление об автор-
ском праве на визуально воспринимаемый материал должно содержать один или несколько
из следующих элементов:
xx Символ © (буква С в круге), или слово «Copyright» или «Авторские права»;
xx Год первой публикации;
xx Имя правообладателя; (Пример: © 2012 Adobe Systems, Inc);
6. Уведомление об авторском праве для грампластинок и звукозаписей должно содержать
три элемента:
xx Символ (буква Р в круге)
xx Год первой публикации;
xx Имя правообладателя;
7. Уведомление об авторских правах должно быть размещено таким образом, чтобы «дать
разумное уведомление о претензии на авторское право».
Для более подробной информации об авторских правах посетите веб-сайт www.copyright.gov.

Обзор рабочего пространства программы


Adobe Photoshop CS6

Приступаем к работе с программой Adobe Photoshop


Рабочее пространство или среда программы Adobe Photoshop состоит из основного меню, рас-
положенного в верхней части экрана, и множества инструментов и палитр\панелей для редак-
тирования и добавления новых элементов к вашему изображению. Вы также можете добавить
другие команды и фильтры в интерфейс программы Adobe Photoshop, установив программное
обеспечение сторонних разработчиков, называемое внешними модулями (плагинами).
Программа Adobe Photoshop позволяет работать с растровыми, оцифрованными изображе-
ниями (то есть, с изображениями, имеющими плавные цветовые переходы, которые были
преобразованы в ряд маленьких квадратиков, или элементов изображения, называемых пик-
селами). Кроме того, вы можете работать с векторной графикой — иллюстрациями, которые
состоят из гладких линий, не теряющих четкость при масштабировании. Вы можете либо
создать изображение в программе Adobe Photoshop «с нуля», либо импортировать изобра-
жения из различных источников, например:
Цифровой дизайн: основы веб-дизайна  103

xx Фотографии с цифрового фотоаппарата;


xx Лицензионные компакт-диски с цифровыми изображениями;
xx Отсканированные фотографии, диапозитивы, негативы, рисунки и другие документы;
xx Захваченные видео стоп-кадры;
xx Рисунки, созданные в графических редакторах.
Дополнительную информацию по типам файлов, которые поддерживает программа Adobe
Photoshop CS6, см. в разделе «Форматы файла» в справочных материалах.
В этом разделе вы познакомитесь с рабочим пространством программы Adobe Photoshop
CS6, узнаете, как создавать пользовательские рабочие пространства, как открывать изо-
бражения, использовать палитру Свойства (Properties), создавать новые документы Adobe
Photoshop и использовать основные инструменты панорамирования и масштабирования.

Знакомство с рабочим пространством программы Adobe Photoshop


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

Знакомство с рабочим пространством программы Adobe Photoshop


1. Запустите программу Adobe Photoshop.
Если вы не видите ярлык программы Adobe Photoshop на рабочем столе, выберите команду
Пуск ⇒ Все программы ⇒ Adobe Photoshop CS6 (Start ⇒ All Programs ⇒ Adobe Photoshop
CS6) (Windows) или найдите эту программу в папке Applications или на панели Dock (OS X).
2. В меню переключателя рабочих пространств убедитесь, что напротив пункта Основная
рабочая среда (Essentials) установлен флажок. В этом меню выберите команду Сбросить
Основная рабочая среда (Reset Essentials), чтобы восстановить стандартное рабочее про-
странство (рис. 1.51)
Рабочее пространство программы
Adobe Photoshop показано на следу-
ющем рисунке.
3. По умолчанию, в рабочем про-
странстве Основная рабочая сре-
да (Essentials) программы Adobe
Photoshop (рис. 1.52) отображается
главное меню (Windows) или стро-
ка заголовка (OS X). Под главным
меню расположена горизонтальная
панель параметров, вертикальная
панель инструментов (слева), пали-
тры и одно или более независимых
окон изображения. Рис. 1.51. Меню переключателя рабочих пространств
104  Проект 1. Мини-приложение

Главное Панель Панель Окно Переключатель


меню параметров инструментов изображения рабочих пространств

Палитры
Палитра Палитра Палитра Палитра Слои
Mini Bridge Шкала времени Свойства

Рис. 1.52. Интерфейс программы Adobe Photoshop CS6

В главном меню различные команды организованы по отдельным подменю.


На панели параметров отображаются настройки инструмента, выбранного в текущий мо-
мент.
В окне изображения отображается файл, с которым вы работаете в настоящий момент.
На панели инструментов находятся кнопки инструментов, предназначенных для создания
и редактирования изображений, рисунков, элементов страниц и так далее. Инструменты со
схожими функциями объединены в группы.
Палитры позволяют осуществлять мониторинг проекта и выполнять различные операции с
изображениями. В качестве примера можно привести палитру Слои (Layers). Другой при-
мер – палитра Свойства (Properties), которая содержит контекстно-зависимые инструмен-
Цифровой дизайн: основы веб-дизайна  105

ты, используемые для быстрого обновления свойств масок, корректирующих слоев и слоев
видео. Две другие палитры, Mini Bridge и Шкала времени (Timeline), расположены под ок-
ном изображения.
Некоторые палитры отображаются по умолчанию, но вы можете отобразить любую палитру,
выбрав ее название в меню Окно (Window). Многие палитры содержат меню с командами,
настраивающими данную палитру. Вы можете разделять палитры, группировать, делать пла-
вающими или закреплять по вашему усмотрению.
Чтобы в любой момент времени восстановить рабочее пространство по умолчанию, выбе-
рите команду меню Окно ⇒ Рабочая среда ⇒ Основная рабочая среда (по умолчанию)
(Window ⇒ Workspace ⇒ Essentials (Default)) (рис. 1.53) или пункт Основная рабочая сре-
да (Essentials) в меню переключателя рабочих пространств. Также, вы можете выбрать ко-
манду Сбросить Основная рабочая среда (Reset Essentials) в меню переключателя рабочих
пространств (рис. 1.51).

Рис. 1.53. Выбор рабочего пространства по умолчанию

Настройка рабочего пространства с помощью переключателя рабочих


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

Настройка рабочего пространства


1. Чтобы создать новое рабочее пространство, переместите палитры нужным образом, на-
строив интерфейс программы Adobe Photoshop (рис. 1.54).
106  Проект 1. Мини-приложение

Рис. 1.54. Пользовательское представление интерфейса

2. В меню переключателя рабочих про-


странств выберите команду Новая рабочая
среда (New Workspace) (рис. 1.55).
На экране появится диалоговое окно Новая
рабочая среда (New Workspace) (рис. 1.56).
3. В поле ввода Имя (Name) укажите на-
звание создаваемого рабочего пространства
и установите флажки в группе элементов
управления Запомнить (Capture) (Клавиа-
турные сокращения (Keyboard Shortcuts) и
Меню (Menus)), выбрав элементы, которые Рис. 1.55. Создание нового рабочего
будут сохранены в рабочем пространстве. пространства с помощью команды Новая
рабочая среда
4. Щелкните по кнопке Сохранить
(Save).
Цифровой дизайн: основы веб-дизайна  107

Рис. 1.56. Диалоговое окно Новая рабочая среда

Название созданного рабочего простран-


ства появится в правом верхнем углу окна
программы, в переключателе рабочих про-
странств (рис. 1.57).
5. Откройте меню переключателя рабо-
чих пространств.
Даже если вы выбрали другое рабочее про-
странство, в любой момент времени вы мо-
жете вернуться к своему сохраненному ра-
бочему пространству, выбрав его название в
меню переключателя рабочих пространств.
Рис. 1.57. Выбор сохраненного рабочего
Программа Adobe Photoshop также запи- пространства
сывает любые изменения, вносимые в рас-
положение палитр при выполнении различных задач, поэтому, если вы переключитесь на
другое рабочее пространство, а затем вернетесь обратно в течение одного сеанса работы, па-
литры будут расположены точно так же, как вы их оставили до этого.
В любой момент времени вы можете восстановить настройки сохраненного рабочего про-
странства, выбрав команду Сбросить <имя рабочего пространства> (Reset <имя рабочего
пространства>) в меню переключателя рабочих пространств (рис. 1.57).

Открытие файла в программе Adobe Photoshop


Открыть файлы можно с помощью команды Открыть (Open) или подменю Последние до-
кументы (Open Recent).

Открытие файла
1. Чтобы открыть файл, выберите команду меню Файл ⇒ Открыть (File ⇒ Open) и от-
кройте папку, в которой находится желаемое изображение.
2. Выберите файл и щелкните по кнопке Открыть (Open).
108  Проект 1. Мини-приложение

Рис. 1.58. Файл, открытый в окне изображения

Файл откроется в отдельном окне, называемом окном изображения (рис. 1.58).


3. Чтобы закрыть файл изображения, выберите команду меню Файл ⇒ Закрыть (File ⇒
Close) или щелкните по кнопке Закрыть (Close), расположенной в строке заголовка окна, в
котором открыта фотография (не закрывайте программу Adobe Photoshop).

Открытие файла с помощью приложения Adobe Bridge

Вы можете также открыть файл с помощью приложения Adobe Bridge — файлового обозре-
вателя, помогающего быстро находить именно те файлы изображений, которые вам нужны.
Существуют две версии этой программы: полная версия, рабочая область которой содержит
различные элементы управления, и версия Mini Bridge (палитра, встроенная в интерфейс
программы Adobe Photoshop). Следующие шаги демонстрируют, как использовать палитру
Mini Bridge, чтобы открыть файлы (так же легко можно воспользоваться полной версией
программы).
1. Если палитра Mini Bridge закрыта,
щелкните по ее вкладке, расположенной
под окном изображения (рис. 1.59).
Рис. 1.59. Вкладка палитры Mini Bridge
Цифровой дизайн: основы веб-дизайна  109

Примечание. Вы можете также открыть палитру Mini Bridge, выбрав команду меню Файл ⇒ Обзор
в Mini Bridge (File ⇒ Browse In Mini Bridge).

Примечание. Если вы открываете палитру Mini Bridge в первый раз, на экране может появиться
предупреждающее сообщение Для просмотра файлов необходимо запустить программу Bridge
(Bridge must be running to browse files) и кнопка Запустить Bridge (Launch Bridge). Щелкните по
кнопке Запустить Bridge (Launch Bridge) для запуска программы Bridge в фоновом режиме и откры-
тия палитры Mini Bridge в программе Adobe Photoshop.

2. Используйте навигатор на вкладке Mini Bridge (Adobe Bridge) выбрать папку, в кото-
рой вы храните изображения.
3. Миниатюры изображений, находящихся в этой папке, появятся в окне палитры Mini
Bridge (рис. 1.60).
Вы можете фильтровать и сортировать изображения, используя кнопки Просмотр (View) и
Сортировка (Sort By).

Рис. 1.60. Палитра Mini Bridge

4. Выберите файл в окне палитры Mini Bridge и дважды щелкните мышью по его миниа-
тюре.
Изображение откроется в программе Adobe Photoshop.

Создание нового документа программы Adobe Photoshop


Вы можете создать новый документ программы Adobe Photoshop и указать его размеры, раз-
решение, цветовой режим и содержимое фона.

Создание нового документа


1. Выберите команду меню Файл ⇒ Создать (File ⇒ New).
110  Проект 1. Мини-приложение

Рис. 1.61. Диалоговое окно Новый, предназначенное для создания нового документа
Adobe Photoshop

На экране появится диалоговое окно Новый (New) с настройками создаваемого файла


(рис. 1.61).
2. В поле ввода Имя (Name) введите имя нового файла, а в полях ввода Ширина (Width)
и Высота (Height) укажите значения ширины и высоты холста.
3. Укажите значение параметра Разрешение (Resolution).
Для изображения, которое планируется использовать во Всемирной паутине, достаточно
разрешения 72 пиксела/дюйм. Для изображений, выводимых на печать, лучше использовать
более высокое разрешение, в диапазоне от 300 до 1200 пикселов/дюйм.
4. Выберите значение в раскрывающемся списке Цветовой режим (Color Mode).
Параметр Цветовой режим (Color Mode) определяет цветовой режим, используемый для
отображения и печати изображения, с которым вы работаете. Цветовые режимы програм-
мы Adobe Photoshop основаны на цветовых моделях, которые обычно используются для
изображений, применяемых в публикации. Можно выбрать значение Цвета RGB (RGB
Color) (Red, Green, Blue — Красный, Зеленый, Синий), Цвета CMYK (CMYK Color) (Cyan,
Magenta, Yellow, Black  — Голубой, Пурпурный, Желтый, Черный), Цвета Lab (Lab Color)
(основанное на CIE L* a* b*) и В градациях серого (Grayscale).
5. Выберите значение в раскрывающемся списке Содержимое фона (Background
Contents).
Вы можете выбрать фон белого цвета (Белый (White)), прозрачный фон (Прозрачный
(Transparent)) или фон определенного цвета (Цвет фона (Background Color)), который бу-
дет отображаться позади вашего изображения.
Цифровой дизайн: основы веб-дизайна  111

Обратите внимание, как изменяется информация о размере файла, отображаемая в правом


нижнем углу диалогового окна, при изменении настроек нового файла.
6. Щелкните по кнопке OK.
Новый файл откроется в окне изображения (рис. 1.62). Не забывайте сохранять результаты
вашей работы.

Рис. 1.62. Новое окно изображения

7. Чтобы сохранить файл в первый раз, выберите команду меню Файл ⇒ Сохранить как
(File ⇒ Save As).

Обзор панели инструментов


Программа Adobe Photoshop предоставляет интегрированный набор инструментов для
создания превосходных изображений для печати, размещения во Всемирной паутине и
просмотра на портативных (мобильных) устройствах (рис. 1.63). Некоторые инструменты
объединены в группы, при этом на панели инструментов отображается только один ин-
струмент из этой группы, а другие инструменты скрыты под ним. Маленький значок тре-
угольника, отображаемый в правом нижнем углу значка инструмента, говорит о том, что
под этим значком находятся скрытые инструменты. Чтобы выбрать скрытый инструмент,
нажав и удерживая кнопку мыши на этом маленьком треугольнике, выберите нужный ин-
струмент.
112  Проект 1. Мини-приложение

Рис. 1.63. Обзор панели инструментов

В следующем упражнении мы познакомимся с инструментом Масштаб (Zoom). Процесс вы-


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

Выбор и использование инструмента Масштаб на панели инструментов


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

1. Обратите внимание, что панель инструментов отображается в виде одной колонки.


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

Рис. 1.64. Панель инструментов


Строка
состояния

Уровень масштаба
изображения

Рис. 1.65. Уровень масштаба и строка


состояния в окне открытого изображения

3. Установите указатель мыши на кнопку с изображением лупы на панели инструментов,


чтобы на экране появилась всплывающая подсказка, представляющая название инструмента
и клавишу для его быстрого вызова (рис. 1.66).
4. Выберите инструмент Масштаб (Zoom), либо щелкнув по кнопке инструмента Мас-
штаб (Zoom) на панели инструментов, либо нажав клавишу Z — клавишу быстрого вызова
инструмента Масштаб (Zoom).
114  Проект 1. Мини-приложение

5. Установите указатель мыши в окно изо-


бражения. Обратите внимание, что теперь в
центре значка лупы отображается знак «плюс».
6. Щелкните в любой позиции окна изобра-
жения.
В результате этого действия произойдет увели-
чение масштаба отображения в соответствии
с предопределенным процентным значением,
которое заменит предыдущее в строке состоя-
ния. Позиция изображения, в которой вы щел-
кнули инструментом Масштаб (Zoom), станет
центром области увеличения. Если щелкнуть
снова, уровень масштаба увеличится до следу-
ющего предопределенного значения, вплоть до
максимального значения в 3200%. Рис. 1.66. Всплывающая подсказка
На палитре Навигатор (Navigator) вокруг уве-
личенной области отображается рамка красного цвета (рис. 1.67). Вы можете перетаскивать
эту красную рамку на палитре Навигатор (Navigator), для перемещения по изображению.
7. Нажмите и удерживайте клавишу Alt (Windows) или Option (OS X), чтобы в центре
лупы появился знак «минус» (рис. 1.68), а затем щелкните в любой позиции окна изображе-
ния. Затем отпустите клавишу Alt или Option.

Рис. 1.67. Увеличенная область, Рис. 1.68. Использование инструмента


отображаемая на палитре Навигатор Масштаб в режиме уменьшения

Теперь уровень масштаба уменьшится до предыдущего предопределенного значения.


Примечание. Вы можете также нажать и удерживать клавишу Alt (Windows) или Option (OS X) и
использовать колесико прокрутки мыши, чтобы увеличить или уменьшить масштаб отображения изо-
бражения.
Цифровой дизайн: основы веб-дизайна  115

Прокрутка изображения с помощью инструмента Рука


Инструмент Рука (Hand) позволяет прокручивать изображение внутри его окна. Это полез-
но использовать в том случае, когда вы хотите увидеть фрагмент изображения, находящийся
вне видимой области.
1. Откройте любое изображение и увеличьте масштаб его отображения, чтобы в окне изо-
бражения появились полосы прокрутки.
2. Выберите инструмент Рука (Hand) на панели инструментов (рис. 1.69). Вы можете так-
же нажать сочетание клавиш Shift+H.
3. Используя инструмент Рука (Hand), щелкните по изображению и, удерживая кнопку
мыши, перетаскивайте указатель мыши, чтобы увидеть различные фрагменты изображения
(рис. 1.70).

Рис. 1.69. Инструмент Рука на панели Рис. 1.70. Перетаскивание


инструментов изображения с помощью
инструмента Рука

Использование палитры Навигатор


Панорамирование или изменение масштаба отображения изображения на палитре Нави-
гатор (Navigator) — это еще один простой способ быстро изменить масштаб отображения,
особенно, когда точное процентное значение увеличения не существенно. Кроме того, это
отличный способ прокрутить изображение в окне, поскольку на эскизе четко виден тот фраг-
мент изображения, который отображается в окне изображения.
1. Если палитра Навигатор (Navigator) не видна на экране, выберите команду меню Окно
⇒ Навигатор (Window ⇒ Navigator) (рис. 1.67).
2. Найдите ползунковый регулятор, находящийся под эскизом изображения на палитре
Навигатор (Navigator), и перетащите ползунок вправо.
Масштаб изображения увеличится (рис. 1.71).
116  Проект 1. Мини-приложение

Рис. 1.71. Использование ползункового регулятора для увеличения или уменьшения масштаба
отображения изображения

3. Теперь перетащите ползунок влево, чтобы уменьшить уровень масштаба изображения


в окне изображения.

Предварительная обработка фотографий


Фотографии — неотъемлемая часть качественно разработанной веб-страницы и суще-
ствует множество вариантов представления фотографий на странице. Программа Adobe
Fireworks CS6 позволяет маскировать фотографии, используя фигуры или текст, настра-
ивать растушевку и тон фотографий так, чтобы они лучше подходили к общему дизайну
сайта (рис. 1.72).

Рис. 1.72. Маскированные и скорректированные изображение и текст


Цифровой дизайн: основы веб-дизайна  117

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

Наложение маски на фотографию


1. Запустите программу Adobe Fireworks и откройте фотографию, на которую должна
быть наложена маска.
2. Выберите инструмент Кисть (Brush), Карандаш (Pencil), Прямоугольник (Rectangle)
или Эллипс (Ellipse) и создайте на фотографии маскирующую область (рис. 1.73).

Рис. 1.73. Маскирующая область


118  Проект 1. Мини-приложение

3. Расположите маскирующую область так, чтобы она содержала изображение, которое


вы хотите использовать. Выделенная область может находиться как перед маскируемыми
объектами, так и позади них. Вы можете залить выделенную область цветом для упрощения
уточнения контуров области (рис. 1.74).
4. Выберите команду меню Редактирование ⇒ Вырезать (Edit ⇒ Cut), чтобы вырезать
объект, который следует маскировать.
5. С помощью инструмента Указатель (Pointer) выделите объект или группу объектов,
которые требуется маскировать. Если вы маскируете несколько объектов, их следует пред-
варительно сгруппировать.
6. Выберите команду меню Редактирование ⇒ Вставить как маску (Edit ⇒ Paste as
Mask). Вы увидите результат — фрагмент маскированной фотографии (рис. 1.75).

Рис. 1.74. Выберите объект, который следует Рис. 1.75. Фотография, видимая
вырезать через маску

7. Сохраните файл в формате Fireworks PNG. Это позволит позже вернуться к редактиро-
ванию маски.

Растушевка краев маски и добавление


эффектов
1. Щелкните мышью по миниатюре маски на пали-
тре Слои (Layers) (рис. 1.76).
2. В раскрывающемся списке Край (Edge), распо-
ложенном в группе Заливка (Fill) на панели инспек-
тора свойств (рис. 1.77), выберите пункт Растушевка
(Feather) и увеличьте параметр Степень растушевки
(Amount Of Feather) (введите значение в поле пра-
Рис. 1.76. Палитра Слои
Цифровой дизайн: основы веб-дизайна  119

вее списка Край (Edge) или нажмите кнопку с изображением направленной вниз стрелки и
переместите ползунковый регулятор).

Раскрывающийся Степень растушевки Флажок Показывать заливку


список Край и линию

Рис. 1.77. Инспектор свойств

3. Чтобы более ясно увидеть эффект растушевки, сбросьте


флажок Показывать заливку и линию (Show Stroke And Fill).
Края маски станут размытыми (рис. 1.78).
4. Чтобы добавить свечение, выберите миниатюру изобра-
жения (не маски) на палитре Слои (Layers).
5. В инспекторе свойств нажмите кнопку Добавить филь-
тры (+) (Add Filters (+)) и в открывшемся списке установите
флажок напротив параметра Тень и свечение ⇒ Внутренняя
тень слоя (рис. 1.79).
Откроется всплывающая панель Внутренняя тень слоя (Drop
Shadow) (рис. 1.80).
Рис. 1.78. Маска с
растушеванными краями

Рис. 1.79. Раскрывающийся список Добавить фильтры (+)


120  Проект 1. Мини-приложение

Непрозрачность
Смещение
Мягкость
Угол

Рис. 1.80. Всплывающая панель Внутренняя тень слоя

6. Увеличивайте параметры Сдвиг (Offset) и Ширина (Width) до тех пор, пока вы не уви-
дите эти изменения на маске изображения.
7. Настраивайте параметры Сглаживание (Softness), Непрозрачность (Opacity) и Цвет
(Color) до достижения желаемого результата.
8. По завершении работы с настройками, щелкните мышью за пределами всплывающей
панели или нажмите клавишу Enter (Windows) или Return (OS X) и панель Внутренняя
тень слоя (Drop Shadow) закроется.
9. Сохраните файл и экспортируйте изображение в формат JPEG или GIF.

Создание текстовой маски


1. Откройте фотографию, на которую должна быть наложена маска.
2. Создайте текст, который будет служить маской для изображения (рис. 1.81).
3. Отредактируйте размер и шрифт текста, а затем выберите команду меню Редактирова-
ние ⇒ Вырезать (Edit ⇒ Cut). Текст будет помещен в буфер обмена.
4. Выделите фотографию и выберите команду меню Редактирование ⇒ Вставить как ма-
ску (Edit ⇒ Paste as Mask).
Примечание. Видимой останется только часть фотографии, ограниченная областью текстовой маски
(рис. 1.82).

Рис. 1.81. Текст, который будет служить маской Рис. 1.82. Фотография, видимая
для изображения сквозь маску
Цифровой дизайн: основы веб-дизайна  121

5. Щелкните мышью по миниатюре изображения на палитре Слои (Layers) (рис. 1.83). На


изображении появится голубой маркер (рис. 1.84).

Миниатюра Маркер
изображения

Рис. 1.83. Миниатюра изображения Рис. 1.84. Текстовая маска с маркером


выделена

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

6. Перетащите изображение, чтобы изменить его положение внутри маски.


7. Экспортируйте изображение в файл формата JPEG или GIF.

Коррекция цветового тона фотографий


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

Коррекция цветового тона


1. Откройте фотографию, которую необходимо маскировать.
2. На палитре Слои (Layers) выберите растровое изображение, которое следует откоррек-
тировать.
3. Выберите команду меню Фильтры ⇒ Настройка цвета⇒ Цветовой тон/Насыщен-
ность (Filters ⇒ Adjust Color ⇒ Hue/Saturation). Откроется диалоговое окно Цветовой тон/
насыщенность (Hue/Saturation) (рис. 1.85)
4. Убедитесь, что установлен флажок Просмотр (Preview).
5. Переместите каждый из ползунковых регуляторов параметров Цветовой тон (Hue),
Насыщенность (Saturation), Яркость (Lightness) в положение, при котором фотография
будет производить желаемое впечатление.
122  Проект 1. Мини-приложение

Рис. 1.85. Диалоговое окно Цветовой тон/насыщенность

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


чение каждого из параметров можно задать в соответствующем текстовом поле.

6. Чтобы настроить общий цвет фотографии, в диалоговом окне Цветовой тон/насыщен-


ность (Hue/Saturation) установите флажок Тонирование (Colorize). По достижении желае-
мого результата нажмите кнопку OK, чтобы закрыть диалоговое окно.
7. Чтобы придать фотографии старинный вид, выберите команду меню Команды ⇒
Оформление ⇒ Преобразовать в сепию (Commands ⇒ Creative ⇒ Convert To Sepia Tone).
8. Чтобы сделать фотографию черно-белой, выберите команду меню Команды ⇒ Оформ-
ление ⇒ Преобразовать в градации серого (Commands ⇒ Creative ⇒ Convert To Grayscale)
(рис. 1.86).

Рис. 1.86. Изображение, цвет которого преобразован в градации серого


Цифровой дизайн: основы веб-дизайна  123

Изменение размеров, вращение


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

Создание резервной копии исходного изображения


Перед внесением любых изменений в изображение вы должны всегда сохранять это изобра-
жение под другим именем файла. Наибольшая гибкость достигается при сохранении изо-
бражения в формате PSD — стандартный формат программы Adobe Photoshop. Из одного
файла в формате PSD можно создать файлы в формате TIFF (для печати) или файлы в
формате JPEG (для использования во Всемирной паутине). К примеру, файлы в формате
PSD сохраняют информацию о слоях, поэтому при повторном открытии файла вы сможете
работать со слоями.

Изменение размеров изображений


Работая в программе Adobe Photoshop, рекомендуется использовать максимально возмож-
ное разрешение вашего изображения, что обеспечит большую гибкость при сохранении изо-
бражений в других форматах.

Размерность и разрешение изображения


Размеры в пикселах (размерность или ширина и высота) растрового изображения — это ко-
личество пикселов по его ширине и высоте. Разрешение определяет четкость деталей рас-
трового изображения и измеряется в пикселах на дюйм (ppi — pixel per inch). Чем больше
пикселов на дюйм, тем выше разрешение. Как правило, чем выше разрешение изображения,
тем лучшее качество получается при печати данного изображения.
xx Обычно, чтобы обеспечить хорошее качество при печати, изображение должно иметь
разрешение не менее 300 ppi.
xx Для изображений, которые будут использоваться на веб-страницах, допустимо разреше-
ние 72 ppi. Поскольку большинство экранов мониторов не способны отображать более
высокие разрешения, вы можете уменьшить размер файла, уменьшив разрешение изо-
бражения.
Примечание. Технологии, применяемые в экранах мониторов, и скорости доступа к Интернету по-
стоянно улучшаются. Тем не менее, стандарт разрешения 72 ppi продолжает широко использоваться,
и, по большей части, вы не прогадаете, если будете ориентироваться на него.
124  Проект 1. Мини-приложение

Комбинация размеров изображения и его разрешения определяет объем данных изображе-


ния. При изменении размеров или разрешения изображения, кроме случаев, когда выполня-
ется интерполяция изображения, объем данных изображения будет оставаться одним и тем
же. Если изменить разрешение изображения, его ширина и высота изменятся соответствую-
щим образом, чтобы «вместить» тот же объем данных изображения. И наоборот.
В программе Adobe Photoshop соотношение между размерами изображения и его разреше-
нием можно увидеть в диалоговом окне Размер изображения (Image Size) (рис. 1.87).

Рис. 1.87. Диалоговое окно Размер изображения с разрешением, равным 300 ppi

Изменение разрешения изображения


Изменение разрешения изображения влияет не только на его «экранные» размеры (разме-
ры, с которыми изображение отображается на экране монитора компьютера), но и на каче-
ство изображения и его печатных снимков.
1. Откройте изображение в программе Adobe Photoshop.
2. Сохраните изображение в файл с другим именем.
Этот шаг позволяет сохранить исходное изображение на тот случай, если вы захотите вос-
становить его. Перед внесением изменений вы должны всегда создавать копию исходного
изображения.
3. Выберите команду меню Изображение ⇒ Размер изображения (Image ⇒ Image Size).
На экране появится диалоговое окно Размер изображения (Image Size) (рис. 1.87).
Обратите внимание, что в этом диалоговом окне представлено две основные категории ин-
формации о размере изображения.
Цифровой дизайн: основы веб-дизайна  125

xx Группа элементов управления Размерность (Pixel Dimensions) отражает реальное коли-


чество пикселов, содержащихся в изображении. Количество пикселов определяет объ-
ем данных изображения. Если флажок Интерполяция (Resample Image) не установлен,
количество пикселов при изменении размеров или разрешения изображения будет оста-
ваться одинаковым.
xx Группа элементов управления Размер печатного оттиска (Document Size) позволяет
управлять размерами изображения при печати. Эти размеры также представляют собой от-
правную точку для того, как будет выглядеть данное изображение в другом документе, на-
пример, в файле программы Adobe InDesign. В последующих проектах вы будете помещать
изображения, созданные в программе Adobe Photoshop, в файлы программы Adobe InDesign.
4. Убедитесь, что флажок Интерполяция (Resample Image) сброшен.
Если флажок Интерполяция (Resample Image) установлен, при изменении размеров изобра-
жения происходит изменение объема данных или информации об изображении. Пока лучше
не включать эту функцию.
Примечание. Интерполяцию можно использовать для увеличения размеров изображения. Тем не
менее, поскольку получение новых пикселов с помощью интерполяции основано лишь на вычисле-
ниях, при возможности лучше использовать изображение с более высоким разрешением.

5. Измените значение параметра Разрешение (Resolution).


Обратите внимание на соответствующее изменение значений параметров Ширина (Width)
и Высота (Height). К примеру, разрешение изображения составляет 300 ppi, при этом при-
близительный размер его печатного оттиска равен 67 см. Размер печатного оттиска для
того же изображения с разрешением 72 ppi будет равен приблизительно 2530 см (рис. 1.88).
6. Щелкните по кнопке OK, чтобы закрыть диалоговое окно Размер изображения
(Image Size).

Рис. 1.88. Диалоговое окно Размер изображения с измененным разрешением (72 dpi)
126  Проект 1. Мини-приложение

Уменьшение размеров изображения (размерности)


Несмотря на то, что зачастую нет необходимости удалять информацию о пикселах, в неко-
торых случаях может потребоваться уменьшить общий размер (количество пикселов) изо-
бражения. Этот процесс подразумевает удаление пикселов, что позволяет уменьшить размер
файла изображения. Обычно данная операция выполняется при подготовке изображения
для размещения во Всемирной паутине или в другой электронной среде; для печати, как
правило, достаточно просто изменить размер печатного оттиска. (Безусловно, существуют и
другие причины для уменьшения размера файла, например, экономия дискового простран-
ства или ускорение процесса визуализации изображения.)
1. Выберите команду меню Изображение ⇒ Размер изображения (Image ⇒ Image Size).
На экране появится диалоговое окно Размер изображения (Image Size) (рис. 1.89).
В предыдущем упражнении мы уделили внимание только разрешению изображения (раз-
меру его печатного оттиска). На этот раз мы сосредоточимся исключительно на размерности
изображения.
2. Установите флажок Интерполяция (Resample Image), расположенный в нижней части
диалогового окна.
Обратите внимание, что параметры и раскрывающиеся списки группы элементов управле-
ния Размерность (Pixel Dimensions) стали активными, а также стали доступны флажки Со-
хранить пропорции (Constrain Proportions) и Масштабировать стили (Scale Styles).
Если установить флажок Сохранить пропорции (Constrain Proportions), при изменении
ширины будет автоматически изменяться высота изображения, и наоборот. Например, если
изначально ширина изображения равнялась 2000 пикселам, а высота — 1000 пикселам (со-
отношение ширины и высоты составляет 2:1), при установленном флажке Сохранить про-
порции (Constrain Proportions) указание ширины, равной 1000 пикселам, приведет к авто-
матическому изменению значения высоты изображения, которое станет равно 500 пикселам.
В большинстве случаев рекомендуется устанавливать этот флажок.
Примечание. Вы можете пока не обращаться внимания на флажок Масштабировать стили (Scale
Styles). Этот флажок имеет значение, когда к слоям изображения применены стили.

3. В раскрывающемся списке Интерполяция (Resample Image) выберите значение Бику-


бическая, четче (наилучшая для уменьшения) (Bicubic Sharper).
Этот вариант лучше всего подходит для уменьшения размеров изображения.
4. В поле ввода Ширина (Width) группы элементов управления Размерность (Pixel
Dimensions) введите желаемое значение ширины в пикселах (рис. 1.89).
Вы можете также указать значение ширины в процентах, выбрав в раскрывающемся списке
единиц измерения, расположенном справа от поля ввода Ширина (Width), значение Про-
центы (Percent) вместо значения Пикселы (Pixels).
5. Щелкните по кнопке OK, чтобы изменить размерность изображения.
Цифровой дизайн: основы веб-дизайна  127

Рис. 1.89. Изменение ширины изображения в диалоговом


окне Размер изображения

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


Контурная резкость (Unsharp Mask), выбрав команду меню Фильтр ⇒ Усиление резкости ⇒
Контурная резкость (Filter ⇒ Sharpen ⇒ Unsharp Mask). Это позволит избавиться от размытия,
возникающего в результате уменьшения размеров изображения.

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

Поворот изображения
Команды меню Вращение изображения (Image Rotation) позволяют вращать или зеркаль-
но отображать все изображение целиком. Эти команды не работают с отдельными слоями
или частями слоев, путями и рамками выделений. Если вы хотите повернуть выделение или
слой, используйте команды Трансформирование (Transform) или Свободное трансформи-
рование (Free Transform).
1. Откройте меню Изображение ⇒ Вращение изображения (Image ⇒ Image Rotation)
(рис. 1.90) и выберите одну из следующих команд:
xx 180°. Поворачивает изображение на пол-оборота.
xx 90° по часовой (90° CW). Поворачивает изображение по часовой стрелке на четверть
оборота.
128  Проект 1. Мини-приложение

xx 90° против часовой (90° CCW). Поворачивает изображение против часовой стрелки на
четверть оборота.
xx Произвольно (Arbitrary). Поворачивает изображение на указанный угол. Выбрав эту
команду, введите значение угла поворота в диапазоне от 0 до 359,99 в поле ввода Угол
(Angle) появившегося диалогового окна. Установите переключатель в положение ° по
часовой (CW) или ° против часовой (CCW), чтобы повернуть изображение по часовой
или против часовой стрелки соответственно.

Рис. 1.90. Подменю Вращение изображения

2. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save), чтобы сохранить поверну-
тое изображение.

Кадрирование изображений
Зачастую вы будете снимать фотографии, которые имеют большие размеры, чем требуется,
или же вы можете захотеть реструктурировать изображение, чтобы удалить нежелательные
фрагменты. Съемка кадров, которые имеют большие размеры, чем нужно, с максимальным
разрешением обеспечивает гибкость при выборе фрагментов изображения для кадрирова-
ния. Кадрирование — это процесс удаления фрагментов изображения с целью акцентирова-
ния внимания зрителя на определенном объекте или усиления композиции.
Цифровой дизайн: основы веб-дизайна  129

В программе Adobe Photoshop вы можете произвести кадрирование, определив необходи-


мую область одним из инструментов выделения и выполнив команду меню Изображение
⇒ Кадрировать (Image ⇒ Crop). Инструмент Рамка (Crop) на панели инструментов предо-
ставляет доступ к дополнительным инструментам кадрирования изображения. Вы можете
использовать инструмент Рамка (Crop) для выбора кадрируемой области или установить
инструмент Рамка (Crop) для обрезки изображения в заданных пропорциях. Далее вы узна-
ете, как использовать инструмент Рамка (Crop).

Правило третей
Различные наложения сеток на изображение, с помощью которых можно произвести ка-
дрирование, доступны в меню Просмотр (View) на панели параметров. Например, правило
третей  — основное железное правило всех изобразительных искусств, подразумевающее
наложение воображаемой сетки, которая состоит из двух горизонтальных и двух вертикаль-
ных линий, и которая делит видимое пространство на девять равных частей. Чтобы вызвать
визуальный интерес у зрителя и усилить композицию, объекты должны размещаться вдоль
этих горизонтальных и вертикальных линий или на их пересечении.

Кадрирование изображения при помощи инструмента Рамка


1. Щелкните по кнопке инструмента Рамка
(Crop) на панели инструментов (рис. 1.91).
Указатель мыши примет вид инструмента
Рамка (Crop).
2. Вы можете указать размеры кадри-
руемой области на панели параметров
(рис. 1.92).
Например, вы можете выбрать пункт Произ-
вольно (Unconstrained), который позволит
кадрировать изображение произвольным об-
разом. В качестве альтернативы, вы можете
Рис. 1.91. Инструмент Рамка
выбрать одну из предустановок в раскрыва-
ющемся списке, например Исходные про-
порции (Original Ratio) или другое стандартное соотношение сторон (такое как 16:9, так же
известное как широкоэкранное). Если вы обрабатываете несколько изображений и хотите
сохранить особый размер кадрирования, сохраните предустановку с помощью пункта Со-
хранить набор (Save Preset).
3. Выберите пункт Правило 1/3 (Rule of Thirds) в раскрывающемся списке Вид (View) на
панели параметров (рис. 1.93)
4. Путем перетаскивания указателя мыши над тем фрагментом изображения, который
следует сохранить, создайте рамку выделения (рис. 1.94).
130  Проект 1. Мини-приложение

Рис. 1.92. Раскрывающийся список Рис. 1.93. Раскрывающийся список Вид


предустановок соотношений сторон

Рамка выделения необязательно должна быть точной — вы настроите ее размеры на следу-


ющем шаге.
Поверх изображения появится сетка согласно правилу третей.
5. При необходимости настройте положение или размеры рамки выделения:
xx Чтобы переместить рамку выделения, щелкните мышью по области внутри рамки вы-
деления и, удерживая кнопку мыши, перетащите рамку в нужную позицию.
xx Чтобы изменить размеры рамки, перетащите один из маркеров, находящихся на рамке
выделения. Чтобы сохранить соотношение ширины и высоты рамки, при перетаскива-
нии углового маркера удерживайте нажатой клавишу Shift.
xx Чтобы повернуть выделенный фрагмент, установите указатель мыши за пределами
ограничительной рамки (указатель мыши примет вид двунаправленной изогнутой
стрелки) и перетащите его. Чтобы переместить центральную точку, вокруг которой
вращается выделенный фрагмент, перетащите кружок, расположенный в центре огра-
ничительной рамки. Выделенный фрагмент нельзя вращать в режиме Битовый формат
(Bitmap).
6. Если необходимо, используйте инструмент Выпрямить (Straighten) для изменения на-
клона камеры. Щелкните по кнопке Выпрямить (Straighten) на панели параметров и создай-
те линию на изображении, которая должна стать вертикальной или горизонтальной.
7. Определив область кадрирования, нажмите клавишу Enter (Windows) или Return
(OS X).
Изображение будет обрезано так, что на экране останется только выделенная область
(рис. 1.95).
Цифровой дизайн: основы веб-дизайна  131

Рис. 1.94. Выделенная Рис. 1.95. Выполненная операция


кадрируемая область кадрирования

Коррекция цвета
Открыв изображение в программе Adobe Photoshop, вы можете выбрать режим цвета или
настроить уровни яркости, преобразовать цветное изображение в черно-белое, а также вы-
полнить коррекцию цвета или дисторсии объектива. Тем самым вы можете улучшить внеш-
ний вид изображения и устранить проблемы, возникшие в процессе сканирования или съем-
ки фотографии.
Примечание. Большинство упражнений данного раздела в основном применяются к фотографиям.

Выполнение автоматических коррекций


Программа Adobe Photoshop предоставляет несколько команд, предназначенных для авто-
матической настройки качества изображения. Во многих случаях этих команд вполне до-
статочно. В конце данного раздела будет рассмотрено, как можно выполнить подобные на-
стройки вручную.
Команда Автотон (Auto Color) корректирует контрастность и цвета изображения, иденти-
фицируя на нем тени, средние тона и света.

Использование команды Автотон


1. Откройте изображение, которое следует скорректировать.
132  Проект 1. Мини-приложение

2. Выполните одно из следующих действий:


xx Щелкните по кнопке Уровни (Levels) или Кривые (Curves) на палитре Коррекция
(Adjustments) (рис. 1.96)

Уровни
Кривые
Черно-белое

Рис. 1.96. Палитра Коррекция

xx Выберите команду меню Слои ⇒ Новый корректирующий слой (Choose Layer ⇒ New
Adjustment Layer) и выберите один из пунктов Уровни (Levels) или Кривые (Curves).
Нажмите кнопку OK в открывшемся диалоговом окне Новый слой (New Layer).
Откроется палитра Свойства (Properties) (рис. 1.97).
Примечание. Вы также можете выполнить команду
Автоматическая Свернуть
меню Изображение ⇒ Автотон (Image ⇒ Auto Color) коррекция в пиктограмму
чтобы применить настройки непосредственно к слою. уровней
Имейте в виду, этот метод автоматически удаляет ин-
формацию об изображении. Вы не сможете выполнить
шаги, описанные ниже.

3. Щелкните по кнопке Авто (Auto), удерживая


клавишу Alt (Windows) или Option (OS X), на па-
литре Свойства (Properties).
Откроется диалоговое окно Параметры автома-
тической цветокоррекции (Auto Color Correction
Options) (рис. 1.98).
4. В группе параметров Модели (Algorithms)
диалогового окна Параметры автоматической
цветокоррекции (Auto Color Correction Options),
установите переключатель в положение Най-
ти темные и светлые цвета (Find Dark & Light
Colors).
Модели цветовой коррекции настроят тональный
диапазон, используя особые алгоритмы, такие как
тождественное отсечение всех слоев, индивидуаль-
ная настройка слоев или нахождение средних зна- Рис. 1.97. Группа элементов управления
чений светлых и темных пикселов изображения. Уровни на палитре Свойства
Цифровой дизайн: основы веб-дизайна  133

Рис. 1.98. Диалоговое окно Параметры автоматической цветокоррекции

5. Установите флажок Привязать к нейтральным средним тонам (Snap Neutral Midtones).


Программа найдет в изображении средние цветовые значения, близкие к нейтральным, и на-
строит уровни их цветовой гаммы (усредненные), чтобы сделать цвета нейтральными.
6. Укажите значения Тени (Shadows) и Света (Highlights), которые будут отсечены, и на-
стройте цвет Среднего тона (Midtones).
По умолчанию, программа Adobe Photoshop отсекает черные и белые пикселы, если их яр-
кость отличается менее чем на 0,1%, это значит, что она игнорирует первые 0,1% крайних
значений, когда идентифицирует яркие и темные пикселы изображения.
7. Убедитесь, что флажок Сохранить в качестве значения по умолчанию (Save As Default)
сброшен и нажмите кнопку OK.
Программа Adobe Photoshop применит настройки автоматической корректировки уровней
к изображению.
Просмотрите изменения фотографии. Изображение должно посветлеть в некоторых обла-
стях и потемнеть в других. В общем случае, четкость цветов (не путать с резкостью) должна
улучшиться.

Настройка уровней при помощи корректирующего слоя


Каждое изображение имеет диапазон тонов, начиная с самых темных пикселов и заканчивая
самыми светлыми пикселами. Фотографии выглядят лучше, когда их самые темные пиксе-
лы приближаются к черному цвету, а самые светлые пикселы — к белому цвету, обеспечи-
вая фотографию широким тональным диапазоном. Чтобы настроить самые темные и самые
134  Проект 1. Мини-приложение

светлые пикселы в вашем изображении, вы можете использовать команду Уровни (Levels)


в программе Adobe Photoshop. Кроме того, вы также можете настроить средние тона: серые
или гамма-тона вашего изображения, которые находятся в середине диапазона уровней яр-
кости.
При использовании корректирующего слоя вы можете вносить изменения в уровни тонов,
сохраняя исходное изображение. Термин «обратимое редактирование» означает, что вы
можете проводить бесконечное множество экспериментов над изображением, не опасаясь
испортить или изменить исходную фотографию. Использование корректирующих слоев по-
зволяет сохранить оригинал изображения нетронутым. В любой момент времени вы можете
включить или отключить слои, чтобы произвести тонкую настройку изображения.
1. Убедитесь, что никакой фрагмент фотографии не выделен. (Последующие изменения
будут применяться ко всему изображению.)
2. Если палитра Коррекция (Adjustments) не отображается на экране, выберите команду
меню Окно ⇒ Коррекция (Window ⇒ Adjustments).
3. Щелкните по кнопке Уровни (Levels) на палитре Коррекция (Adjustments).
Откроется палитра Свойства (Properties), на которой расположена гистограмма (рис. 1.99).
Вы можете выбрать одну из предустановок из раскрывающегося списка Набор (Preset) или
использовать гистограмму для тонкой настройки диапазона тонов изображения.
Гистограмма демонстрирует распределение пикселов на изображении, отображая количе-
ство пикселов в каждом уровне интенсивности цвета. На ней отображается детализация те-
ней (левая часть гистограммы), детализация сред-
них тонов (средняя часть) и детализация светов
(правая часть). Гистограмма может помочь опре-
делить, достаточно ли на изображении деталей для
хорошей коррекции.
4. Перетащите левый (черный) треугольник в
позицию, где начинаются самые темные цвета.
Обратите внимание, что самые темные фрагменты
изображения стали еще темнее.
5. Перетащите правый (белый) треугольник в
позицию, где начинаются самые светлые цвета.
Обратите внимание, что самые светлые фрагменты
изображения стали светлее.
6. Перетащите средний (серый) треугольник не-
много влево.
Обратите внимание, что средние тона стали свет-
лее.
7. Добившись желаемого результата, закройте Рис. 1.99. Настройки уровней
палитру Коррекция (Adjustments). на палитре Свойства
Цифровой дизайн: основы веб-дизайна  135

Примечание. Среди элементов управления корректирующего слоя Уровни (Levels) на палитре Кор-
рекция (Adjustments) присутствует кнопка Авто (Auto). Команда Авто (Auto) позволяет автоматически
скорректировать точки черного и точки белого в изображении. Для некоторых изображений, где
требуется обычное увеличение контрастности, это может дать неплохой результат; тем не менее, по-
скольку команда Авто (Auto) корректирует каждый цветовой канал по отдельности, может произойти
удаление цвета или могут появиться новые цветовые оттенки. Зачастую корректирование уровней
вручную позволяет добиться более точных результатов.

Рис. 1.100. Палитра Слои с корректирующим слоем Уровни

8. Выберите команду меню Окно ⇒ Слои (Window ⇒ Layers).


На экране появится палитра Слои (Layers). Обратите внимание, что на этой палитре по-
явился новый корректирующий слой с именем Уровни 1 (Levels 1) (рис. 1.100). Исходное
изображение по-прежнему остается неизменным на слое Фон (Background).

Настройка светлых и темных тонов при помощи инструментов


Осветлитель и Затемнитель
Команды, рассмотренные в предыдущем упражнении, изменяют светлые и темные тона для
всего изображения целиком. Иногда может потребоваться осветлить или затемнить опреде-
ленные области изображения. Например, можно осветлить тени на лице человека или сде-
лать ярче цвета в области изображения с недостаточным освещением.
Вы можете использовать инструменты Осветлитель (Dodge) и Затемнитель (Burn), чтобы
изменить яркость и затемнение определенных областей изображения. Термины затемнение
и осветление могут показаться странными, но, как и множество других функций програм-
мы Adobe Photoshop, они названы в соответствии с терминологией пленочной фотографии.
Осветление подразумевает пропускание большего количества света через негатив, позволяя
сделать область изображения светлее, а затемнение подразумевает пропускание меньшего
количества света, позволяя сделать область темнее.
Оба инструмента доступны на панели над инструментом Перо (Pen). По умолчанию ото-
бражается инструмент Осветлитель (Dodge). Чтобы выбрать инструмент Затемнитель
(Burn), нажмите и удерживайте кнопку мыши на кнопке инструмента Осветлитель (Dodge
(рис. 1.101).
136  Проект 1. Мини-приложение

Выбор инструмента Осветлитель


1. Щелкните по кнопке инструмента Осветлитель (Dodge) на панели инструментов
(рис. 1.101).
Указатель мыши примет вид кисти. Обычно кисть отображается в виде окружности.
2. Вы можете изменить размер и форму кисти на панели параметров (рис. 1.102).
Измените размер кисти в соответствии с размером области, которую следует осветлить.
3. Перетащите указатель мыши по фотографии над теми областями, которые следует ос-
ветлить.

Рис. 1.101. Инструменты Рис. 1.102. Настройки кисти


Осветлитель и Затемнитель
на панели инструментов
Примечание. Осветление требует определенных навыков. Вам может потребоваться открыть пали-
тру История (History), с помощью которой можно отменить любые действия.

Выбор инструмента Затемнитель


1. Нажав и удерживая кнопку мыши на кнопке инструмента Осветлитель (Dodge) на па-
нели инструментов, выберите инструмент Затемнитель (Burn) (рис. 1.101).
Указатель мыши примет вид кисти. Обычно кисть отображается в виде окружности.
2. Вы можете изменить размер и форму кисти на панели параметров (рис. 1.102).
Измените размер кисти в соответствии с размером области, которую следует затемнить.
3. Перетащите указатель мыши по фотографии над теми областями, которые следует за-
темнить.
Примечание. Затемнение требует определенных навыков. Вам может потребоваться открыть пали-
тру История (History), с помощью которой можно отменить любые действия.
Цифровой дизайн: основы веб-дизайна  137

Применение фильтра Контурная резкость


После ретуширования фотографии, многие профессионалы, работающие с программой
Adobe Photoshop, применяют фильтр Контурная резкость (Unsharp Mask). При выполне-
нии коррекции цвета на изображении может появиться едва заметное размытие. Фильтр
Контурная резкость (Unsharp Mask) делает изображение более резким путем настройки
контрастности деталей контура.
Примечание. Фильтр Контурная резкость (Unsharp Mask) — это лишь один из многих мощных
фильтров программы Adobe Photoshop. Многие из этих фильтров придают изображениям худо-
жественный вид. Вы можете поэкспериментировать с ними, выбирая различные фильтры в меню
Фильтр (Filter).

1. Убедитесь, что на фотографии никакой фрагмент не выделен. (Мы применим измене-


ния ко всему изображению.)
2. Выберите команду меню Фильтр ⇒ Усиление резкости ⇒ Контурная резкость (Filter
⇒ Sharpen ⇒ Unsharp Mask).
На экране появится диалоговое окно Контурная резкость (Unsharp Mask) (рис. 1.103).
3. Убедитесь, что флажок Просмотр (Preview) установлен, чтобы вы могли видеть резуль-
таты вносимых изменений на изображении.
4. Перетащите ползунковый регулятор Эффект (Amount), чтобы ваше изображение при-
обрело желаемую резкость.
5. Перетащите ползунковый регулятор Радиус (Radius), чтобы изменить значение этого
параметра.
Параметр Радиус (Radius) задает число пик-
селов, окружающих краевые пикселы, которые
будут затронуты эффектом усиления резкости.
Краевые пикселы — это пикселы в позиции стыка
двух разных цветов. По умолчанию, это значе-
ние равно 1. Для фотографий с высоким разре-
шением желательно использовать большее зна-
чение параметра.
6. Присвойте параметру Изогелия (Threshold)
значение 0 пикселов.
Параметр Изогелия (Threshold) определяет,
какими должны быть соседние пикселы, чтобы
считаться краевыми. Значение, равное 0, уси-
ливает резкость всех пикселов изображения.
Обычно параметру Изогелия (Threshold) при-
сваивается значение в диапазоне от 0 до 20, что-
бы избежать появления нежелательного «шума» Рис. 1.103. Диалоговое окно Контурная
на изображении. резкость
138  Проект 1. Мини-приложение

7. Когда изображение будет выглядеть должным образом, щелкните по кнопке OK, чтобы
применить изменения и закрыть диалоговое окно Контурная резкость (Unsharp Mask).

Преобразование цветного изображения


в черно-белое
Корректирующий слой Черно-белое (Black & White) позволяет преобразовать цветное изо-
бражение в полутоновое, обеспечив полный контроль над конвертацией отдельных цветов.
Вы можете также затенить полутоновое изображение, применив цветовой тон к изображе-
нию, или, к примеру, создать эффект сепии. Корректирующий слой Черно-белое (Black &
White) функционирует точно так же, как корректирующий слой Микширование каналов
(Channel Mixer), который также преобразует цветные изображения в черно-белые, позволяя
при этом настраивать входной уровень цветового канала.

Преобразование цветных изображений в черно-белые


1. Выполните одно из следующих действий:
xx Щелкните по кнопке Черно-белое (Black & White) на палитре Коррекция (Adjustments).
xx Выберите команду меню Слои ⇒ Новый корректирующий слой ⇒ Черно-белое (Layer
⇒ New Adjustment Layer ⇒ Black & White). В появившемся диалоговом окне Новый
слой (New Layer) введите имя корректирующего слоя и затем щелкните по кнопке OK.
Программа Adobe Photoshop выполнит полутоновую конвертацию и откроет палитру Свой-
ства (Properties) с настройками слоя Черно-белое (Black & White) (рис. 1.104).
Примечание. Вы можете также воспользоваться командой меню Изображение ⇒ Коррекция ⇒
Черно-белое (Image ⇒ Adjustments ⇒ Black & White). Но имейте в виду, что эта команда вносит не-
посредственные изменения в слой изображения и вызывает потерю данных изображения.

2. На палитре Коррекция (Adjustments) вручную настройте параметры преобразования,


используя ползунковые регуляторы, выполните автоматическое преобразование, щелкнув
по кнопке Авто (Auto), или выберите предустановку (рис. 1.104).
Раскрывающийся список Набор (Preset). Выберите системную предустановку или сохранен-
ную ранее (рис. 1.105). Чтобы сохранить предустановку, выберите команду Сохранить на-
бор «Черно-белое» (Save Black & White Preset) в меню палитры.
Кнопка Авто (Auto). Устанавливает смесь полутонов на основе значений цвета изображе-
ния, максимально увеличивая распределение значений серого цвета. Смесь, полученная с
помощью команды Авто (Auto), зачастую позволяет добиться отличных результатов, или
может быть использована в качестве отправной точки для тонкой настройки значений серо-
го с помощью ползунковых регуляторов цвета.
Ползунковые регуляторы цвета. Позволяют настраивать серые тона конкретных цветов изо-
бражения. Перетащите ползунковый регулятор влево, чтобы затемнить серые тона исходно-
го цвета изображения, или вправо, чтобы осветлить их.
Цифровой дизайн: основы веб-дизайна  139

Флажок Оттенок Раскрывающийся


список Набор

Рис. 1.104. Палитра Свойства с Рис. 1.105. Предустановки


настройками корректирующего слоя Черно- корректирующего слоя Черно-белое
белое

3. (Необязательный шаг) Для тонирования изображения, например тоном сепии, уста-


новите флажок Оттенок (Tint) (рис. 1.104). Для тонкой настройки цвета тона, щелкните по
образцу цвета параметра Оттенок (Tint), чтобы открыть диалоговое окно Выберите целевой
цвет (Color Picker).

Коррекция дисторсии объектива и настройка перспективы


Фильтр Коррекция дисторсии (Lens Correction) позволяет исправить распространенные де-
фекты объектива, такие как бочкообразная и подушкообразная дисторсия, виньетирование
и хроматическая аберрация. Фильтр можно использовать только для изображений с глуби-
ной цвета 8 или 16 бит/канал.
Вы можете также использовать этот фильтр для вращения изображения или исправления
перспективы изображения, вызванного вертикальным или горизонтальным наклоном фото-
аппарата. Сетка фильтра, отображаемая поверх изображения, делает эти настройки более
простыми и точными, чем при использовании команды Трансформирование (Transform).
140  Проект 1. Мини-приложение

Коррекция дисторсии объектива


1. Выберите команду меню Фильтр ⇒ Коррекция дисторсии (Filter ⇒ Lens Correction).
2. Щелкните по вкладке Заказная (Custom) (рис. 1.106).
3. Установите флажок Показать сетку (Show Grid) и измените масштаб изображения
(рис. 1.106). В процессе работы вы можете настроить расстояние между линиями сетки, что-
бы было проще оценить степень коррекции.
4. Настройте значения следующих параметров, чтобы исправить изображение, а затем на-
жмите кнопку OK.
Удалить искажение (Remove Distortion). Позволяет исправить бочкообразную или поду-
шкообразную дисторсию. Перетащите ползунковый регулятор, чтобы выпрямить горизон-
тальные и вертикальные линии, которые изогнуты либо к центру изображения, либо от его
центра. Данное исправление можно также выполнить с помощью инструмента Удалить ис-
кажение (Remove Distortion). Перетаскивание указателя мыши по направлению к центру

Элементы управления Флажок Вкладка Заказная


масштабированием Показать сетку

Рис. 1.106. Диалоговое окно Коррекция дисторсии


Цифровой дизайн: основы веб-дизайна  141

изображения исправляет бочкообразную дисторсию, а к краю изображения  — подушкоо-


бразную дисторсию.
Хроматическая аберрация (Chromatic Aberration). Исправляет цветную (красную/голу-
бую, зеленую/пурпурную или синюю/желтую) кайму. Увеличьте масштаб изображения,
чтобы поближе рассмотреть кайму в процессе исправления.
Виньетка (Vignette). Исправляет изображения, имеющие темные края, вызванные дефек-
том объектива или его неправильным затемнением.
Эффект (Amount). Задает степень освещения или затемнения по краям изображения.
Средняя точка (Midpoint). Определяет ширину области, на которую влияет ползунковый
регулятор Эффект (Amount). Укажите меньшее значение, чтобы применить эффект к боль-
шему фрагменту изображения. Укажите большее значение, чтобы ограничить эффект края-
ми изображения.
По вертикали (Vertical Perspective). Исправляет перспективу изображения, вызванную на-
клоном фотоаппарата вверх или вниз. Делает вертикальные линии на изображении парал-
лельными.
По горизонтали (Horizontal Perspective). Исправляет перспективу изображения, делая гори-
зонтальные линии параллельными.
Угол (Angle). Вращает изображение, чтобы исправить перемещение фотоаппарата или
чтобы внести изменения после исправления перспективы. Чтобы исправить этот дефект,
можно также использовать команду Выпрямить (Straighten). Перетащите указатель
мыши вдоль линии на изображении, которую следует сделать вертикальной или гори-
зонтальной.
Масштаб (Scale). Настраивает масштабирование изображения. Размер изображения в
пикселах не изменяется. Основное применение — удалить пустые области, вызванные кор-
рекцией подушкообразной дисперсии, вращения или перспективы. Увеличение масштаба
позволяет эффективно обрезать изображение и выполнить интерполяцию к исходным пик-
селным размерам.
Примечание. Исправление изображений с подобными проблемами проще всего выполнять с по-
мощью предустановок. Вы также можете использовать список предустановок фильтра Коррекция
дисторсии (Lens Correction), доступных в раскрывающемся списке Настройки (Settings). Предуста-
новка Линза по умолчанию (Lens Default) использует настройки, которые были сохранены ранее
для моделей фотоаппарата/объектива, фокусного расстояния и диафрагмы объектива, применявших-
ся для съемки изображения. Предустановка Предыдущее исправление (Previous Conversion) ис-
пользует настройки, которые применялись во время последней выполненной коррекции дисторсии.
Любая сохраненная предустановка отображается в нижней части раскрывающегося списка Настрой-
ки (Settings).

5. Выберите команду меню Файл ⇒ Сохранить (File ⇒ Save), чтобы сохранить изображе-
ние.
142  Проект 1. Мини-приложение

Ретушь фотографий
Помимо коррекции цвета, одна из наиболее распространенных задач, выполняемых в про-
грамме Adobe Photoshop, – ретуширование фотографий с целью исправления дефектов,
удаления нежелательных фрагментов изображения и исправления проблем, возникших в
процессе фотосъемки. В этом разделе рассматривается несколько способов ретуширования
фотографий с помощью соответствующих инструментов (рис. 1.107), включая инструменты
Точечная восстанавливающая кисть (Spot Healing Brush), Красные глаза (Red Eye), За-
платка (Patch) и Перемещение с учетом содержимого (Content-Aware Move).

Рис. 1.107. Инструменты ретуширования

Использование палитры История


Поскольку ретуширование само по себе основано на методе проб и ошибок, вы должны
уметь работать с палитрой История (History), предназначенной для отмены произведенных
действий.
Как большинство пользователей компьютеров, вы наверняка знакомы с командой Отменить
(Undo), доступной во многих программах. Эта команда позволяет отменить действие любой
последней выполненной команды.
В программе Adobe Photoshop, состояния, которые могут быть отменены с помощью ко-
манды Отменить (Undo), добавляются на палитру История (History). Палитра История
(History) хранит информацию о 20 последних командах, примененных к изображению, по-
зволяя отменить любую из этих команд. Когда вы выполняете некоторую команду, напри-
Цифровой дизайн: основы веб-дизайна  143

мер, трансформируете изображение или добавляете текст, эта команда добавляется на пали-
тру История (History). В списке команды отображаются в том порядке, в котором они были
выполнены. Название каждой команды в списке соответствует названию инструмента или
команды, с помощью которого вы изменили изображение.
Кроме того, вы можете сделать «снимок» определенного набора команд, чтобы вернуться к
нему в дальнейшем.
Примечание. Несмотря на потрясающие возможности палитры История (History), для ее функци-
онирования требуется большой объем оперативной памяти (RAM). Слои также потребляют зна-
чительные объемы памяти, поэтому, если вы работаете со сложным, многослойным изображением,
возможно, вы захотите уменьшить число сохраняемых состояний на палитре История (History). Для
этого выберите команду меню Редактирование ⇒ Установки ⇒ Производительность (Edit ⇒
Preferences ⇒ Performance) (Windows) или Adobe Photoshop ⇒ Установки ⇒ Производительность
(Adobe Photoshop ⇒ Preferences ⇒ Performance) (OS X).

Отмена операций
1. Откройте изображение в программе Adobe Photoshop.
2. Щелкните по кнопке История (History), расположенной в правой части окна програм-
мы (или выполните команду меню Окно ⇒ История (Window ⇒ History), чтобы открыть
палитру История (History) (рис. 1.108).
3. Выполните несколько команд — например, выделите фрагмент изображения, примени-
те фильтр и добавьте новый слой.
Это нужно для того, чтобы добавить несколько команд на палитру История (History).
4. Щелкните по любой из выполненных команд, например, по команде Перемещение
(Move) (рис. 1.109).
Обратите внимание, что изображение вернется к тому состоянию, когда была выполнена
выбранная команда. Любые команды, выполненные после данной команды, будут временно
отменены и затемнены на палитре История (History). На рис. 1.109, например, команды Ла-

Кнопка палитры
История

Рис. 1.108. Палитра История


144  Проект 1. Мини-приложение

Кнопка
Удалить

Рис. 1.109. Выбрана одна из предыдущих команд

стик (Eraser) Заливка (Paint Bucket) и Новый слой (New Layer) затемнены и не оказывают
никакого влияния на изображение.
В данный момент эти команды по-прежнему доступны на палитре История (History) (вы
можете выбрать любую из этих команд). Тем не менее, если сейчас вы выполните другую
команду, затемненные команды будут удалены навсегда.
5. Чтобы удалить команду, выберите ее и затем щелкните по кнопке Удалить (Delete)
(рис. 1.109).
Изображение вернется к состоянию, в котором оно находилось перед выполнением удален-
ной команды.

Управление снимками
Вы можете использовать команду Новый снимок (Snapshot), чтобы создать копию любого
состояния изображения, соответствующего определенной команде в списке команд на па-
литре История (History). Если изображение на текущий момент вас удовлетворяет, имеет
смысл создать его снимок.
1. В списке палитры История (History) щелкните по команде, для которой вы хотите соз-
дать снимок.
2. Щелкните по кнопке Новый снимок (Snapshot) (рис. 1.110).
3. При необходимости, прокрутите список палитры История (History) вверх, чтобы уви-
деть созданный снимок (рис. 1.109).
4. Чтобы вернуться к состоянию, сохраненному в снимке, щелкните по этому снимку, как
вы делаете это для любой другой команды в списке палитры История (History).
Вы можете сравнивать различные снимки, щелкая по ним.
Цифровой дизайн: основы веб-дизайна  145

Снимки

Кнопка Новый снимок

Рис. 1.110. Снимки на палитре История

Использование инструмента
Точечная восстанавливающая кисть
С помощью инструмента Точечная восстанавливающая кисть (Spot Healing Brush) мож-
но быстро удалить пятна или другие дефекты с фотографий. Он работает аналогично ин-
струменту Восстанавливающая кисть (Healing Brush): захватывает эталонные пикселы с
изображения или шаблона и замещает существующие пикселы таким образом, чтобы они
соответствовали текстуре, освещению, прозрачности и теням изображения. В отличие от ин-
струмента Восстанавливающая кисть (Healing Brush), Точечная восстанавливающая кисть
(Spot Healing Brush) не требует указания клонируемой области, она автоматически выбира-
ет пикселы вокруг ретушируемой области.
Примечание. Если вам нужно ретушировать большую область изображения или точно указать
клонируемую область, используйте инструмент Восстанавливающая кисть (Healing Brush) вместо
Точечная восстанавливающая кисть (Spot Healing Brush).

Использование инструмента Точечная восстанавливающая кисть


1. Щелкните по кнопке инструмента Точечная восстанавливающая кисть (Spot Healing
Brush) на панели инструментов.
Указатель мыши примет вид кисти. По умолчанию, кисть отображается в виде окруж-
ности.
2. Вы можете изменить размер или форму кисти на панели параметров (рис. 1.111).
Размер кисти должен быть несколько больше ретушируемой области, как показано на
рис. 1.112.
146  Проект 1. Мини-приложение

Рис. 1.111. Параметры инструмента Точечная восстанавливающая кисть

3. Убедитесь, что установлен флажок С учетом содержимого (Content-Aware).


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

Инструмент Точечная
восстанавливающая кисть

Рис. 1.112. Указатель инструмента


Точечная восстанавливающая
кисть помещен над областью
с дефектом
Цифровой дизайн: основы веб-дизайна  147

4. Установите указатель инструмента Точечная восстанавливающая кисть (Spot Healing


Brush) над областью, которую следует исправить (рис. 1.112)
5. Щелкните по изображению, чтобы выполнить коррекцию (рис. 1.113).

Рис. 1.113. Результат применения инструмента Точечная


восстанавливающая кисть

Использование инструмента Красные глаза


Если при съемке фотографий используется вспышка, это зачастую приводит к появлению
эффекта «красных глаз». Вы можете быстро исправить данный эффект, воспользовавшись
инструментом Красные глаза (Red Eye).

Использование инструмента Красные глаза


1. Щелкните по кнопке инструмента Красные глаза (Red Eye) на панели инструментов
(рис. 1.114).
2. Установите указатель инструмента Красные глаза (Red Eye) над дефектом, который
следует исправить и щелкните по изображению, чтобы выполнить коррекцию.
3. Если вы не удовлетворены результатом коррекции, измените один или более параметров
настроек на панели параметров (рис. 1.115), описанных ниже, и выполните коррекцию снова.
Параметр Размер зрачка (Pupil Size) определяет размер области, которая подвергается об-
работке инструментом Красные глаза (Red Eye).
Параметр Величина затемнения (Darken Amount) устанавливает уровень затемнения во
время коррекции.
148  Проект 1. Мини-приложение

Рис. 1.114. Инструмент Красные глаза

Рис. 1.115. Настройки инструмента Красные глаза

4. Щелкните по изображению, чтобы выполнить коррекцию (рис. 1.116).

Рис. 1.116. Результат применения


инструмента Красные глаза
Цифровой дизайн: основы веб-дизайна  149

Использование инструмента Заплатка


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

Использование инструмента Заплатка


1. Выделите объект, который бы вы хо-
тели убрать с изображения.
Например, на фотографии ниже нужно
убрать двух людей в левом нижнем углу
(рис. 1.117).
2. Выберите инструмент Заплатка
(Patch).
3. Удерживая кнопку мыши, выделите
область, которую следует восстановить.
Установите переключатель в положение
Источник (Source) на панели параметров
(рис. 1.118). Рис. 1.117. Изображение, к которому
необходимо применить инструмент Заплатка
Примечание. Вы можете настроить инстру-
мент Заплатка (Patch) до того, как выделите
область, которую требуется восстановить.

4. Для настройки выделенной области, выполните одно из следующих действий:


xx Удерживая клавишу Shift, обведите часть изображения, чтобы добавить область к вы-
делению.
xx Удерживая клавишу Alt (Windows) или Options (OS X), обведите часть выделенной об-
ласти, чтобы вычесть ее.
xx Удерживая сочетание клавиш Shift+Alt (Windows) или Shift+Options (OS X), об-
ведите часть изображения, чтобы выбрать область пересечения существующего вы-
деления.

Рис. 1.118. Настройки инструмента Заплатка


150  Проект 1. Мини-приложение

Рис. 1.119. Перетаскивание выделенной части изображения в клонируемую область

5. Установите указатель мыши внутрь вы-


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

Рис. 1.120. Исправленное изображение

Использование инструмента Перемещение с учетом содержимого


Инструмент Перемещение с учетом содержимого (Content-Aware) работает точно так же,
как и инструмент Заплатка (Patch), с той лишь разницей, что область, которая перемещает-
ся, не исчезает, а переносится в новую позицию. Инструмент автоматически выбирает изо-
бражение вокруг области выделения и заполняет ими область, оставшуюся после смещения.

Использование инструмента Перемещение с учетом содержимого


1. Выберите объект, который следует переместить.
Например, продолжим работу с фотографией с турнира по дерт-джампингу, показанной на
рис. 1.117. Было бы неплохо переместить райдера, расположенного справа, ближе к центру кадра.
2. Удерживая кнопку мыши, обведите изображение, которое хотите переместить. Убеди-
тесь, что оставили достаточное количество пикселов вокруг объекта, чтобы они могли соот-
ветствующим образом смешаться с фоновыми пикселами.
Цифровой дизайн: основы веб-дизайна  151

Примечание. Вы можете выделить область до того, как выбрать инструмент Перемещение с уче-
том содержимого (Content-Aware).

3. Для настройки выделенной области, выполните одно из следующих действий:


xx Удерживая клавишу Shift, обведите часть изображения, чтобы добавить область к вы-
делению.
xx Удерживая клавишу Alt (Windows) или Options (OS X), обведите часть выделенной об-
ласти, чтобы вычесть ее.
xx Удерживая сочетание клавиш Shift+Alt (Windows) или Shift+Options (OS X), обведите
часть изображения, чтобы выбрать область пересечения существующего выделения.
4. Установите указатель мыши внутрь выделенной части изображения и перетащите ее
границы в область, которую следует клонировать (рис. 1.121). Когда вы отпустите кнопку
мыши, выделенная область изображения изменится в соответствии с клонируемой областью
(рис. 1.122).

Рис. 1.54. Исходное изображение Рис. 1.55. Финальное, ретушированное


для ретуширования изображение

Сохранение файлов в различных форматах


Для каждой информационной среды — печати, Всемирной паутины и видеокоммуникаций —
требуются файлы в разных форматах. В этом разделе рассматривается процесс сохранения
файлов в соответствующих форматах для этих сред в программе Adobe Photoshop CS6.
При сохранении любого файла в программе Adobe Photoshop, необходимо помнить о том,
что финальное изображение будет выглядеть так, как оно отображается на экране мони-
тора. Иначе говоря, если некоторые слои скрыты, вы не увидите их в сохраненном изо-
бражении.
152  Проект 1. Мини-приложение

Сохранение файлов для Всемирной паутины


Для веб-страниц фотографии обычно сохраняются в формате JPEG. Формат JPEG  — это
наиболее используемый формат для фотографий, размещаемых на веб-страницах. (К дру-
гим распространенным форматам, используемым во Всемирной паутине, относится формат
GIF, который обычно применяется для изображений с ограниченным количеством цветов, и
формат PNG — реже используемый, но очень гибкий формат.)
Популярность формата JPEG обусловлена возможностью отличного сжатия файлов  — то
есть, вы можете уменьшить размер файла, не жертвуя качеством. Тем не менее, если степень
сжатия будет слишком высокой, качество изображения, безусловно, пострадает; важно най-
ти правильный баланс между качеством изображения и степенью сжатия.
Программа Adobe Photoshop позволяет упростить этот процесс, предоставляя команду Со-
хранить для Web (Save For Web). В диалоговом окне Сохранить для Web (Save For Web) вы
можете просматривать изображения в формате JPEG с различными степенями сжатия перед
тем, как сохранить их.
Примечание. Когда вы сохраняете файл, который будет использоваться во Всемирной паутине, при-
меняется его полный размер в пикселах. Размер документа не влияет на отображение изображения в
браузере. Например, если размеры изображения в пикселах составляют 640×480, в браузере данное
изображение будет отображаться с такими же размерами. Размер документа влияет только на печать
изображения.

Сохранение файла в формате JPEG


1. Запустите программу Adobe Photoshop и откройте любое изображение.
2. Выберите команду меню Файл ⇒ Сохранить для Web (File ⇒ Save For Web).
На экране появится диалоговое окно Сохранить для Web (Save For Web) (рис. 1.123).
3. В раскрывающемся списке Формат оптимизированного файла (Optimized File Format)
выберите значение JPEG, если оно еще не выбрано (рис. 1.124).
4. Щелкните по вкладке 2 варианта (2-Up), чтобы отобразить оригинал изображения вме-
сте с предварительным просмотром сохраняемого файла (рис. 1.125).
5. Настройте качество изображения, используя либо раскрывающийся список Качество
сжатия (Compression Quality), либо параметр Качество (Quality) (рис. 1.126).
Изменяя значения параметров, наблюдайте за тем, как качество нижней фотографии (пред-
варительный вариант изображения) влияет на размер файла. В идеальном случае необхо-
димо найти правильный баланс, чтобы сохранить качество изображения и получить мини-
мально возможный размер файла.
6. Добившись приемлемого результата, щелкните по кнопке Сохранить (Save).
При щелчке по кнопке Сохранить (Save) происходит автоматическое сохранение копии изо-
бражения в формате JPEG, с использованием выбранных настроек. Исходное изображение
Цифровой дизайн: основы веб-дизайна  153

Рис. 1.123. Диалоговое окно Сохранить для Web

Раскрывающийся список Формат


оптимизированного файла

Рис. 1.124. Раскрывающийся список Формат


оптимизированного файла

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


файла. Например, имя файла «banner_high.jpeg» представляет изображение в формате JPEG
с высоким качеством.
После сохранения копии изображения исходный файл остается открытым в программе
Adobe Photoshop.
154  Проект 1. Мини-приложение

Рис. 1.125. Диалоговое окно Сохранить для Web и устройств, вкладка 2 варианта

Раскрывающийся список
Качество сжатия
Раскрывающийся список
Формат Параметр Качество
оптимизированного
файла

Рис. 1.126. Параметры изображения в формате JPEG

Примечание. Если для исходного изображения также используется формат JPEG (многие цифровые
фотоаппараты используют формат JPEG для хранения фотографий), вы должны сохранить копию
этого изображения в другой локации на диске (или присвоить ей другое имя файла), чтобы избежать
путаницы.
Цифровой дизайн: основы веб-дизайна  155

Сохранение файлов для печати


Файлы для печати отличаются от изображений для дальнейшего использования во Всемир-
ной паутине: в данном случае применяется формат файла без сжатия и перед сохранением
изображения вы должны убедиться, что оно имеет достаточно высокое разрешение (предпо-
чтительно 300 ppi). Лучше всего импортировать изображение в программу Adobe Photoshop
с максимально возможным разрешением, чтобы обеспечить большую гибкость при сохране-
нии изображений различных типов.
Примечание. Вы можете напечатать изображение на принтере непосредственно из программы
Adobe Photoshop. Настройки, рассматриваемые в этом упражнении, могут использоваться для
отправки изображения на печать, переноса изображения на другой компьютер для последующей
печати, или переноса изображения в другое приложение.

Процесс сохранения файлов для печати состоит из трех этапов:


1. Установка для изображения разрешения, равного 300 ppi.
2. Преобразование изображения в цветовую модель CMYK (если изображение будет вы-
водиться на оборудовании для офсетной печати).
3. Сохранение файла в формате, подходящем для печати (без сжатия или без потерь), на-
пример, в формате TIFF.

Установка разрешения, равного 300 ppi


Установка более высокого разрешения имеет существенное значение для обеспечения гиб-
кости и качества.
1. Откройте изображение в программе Adobe Photoshop.
2. Выберите команду меню Изображение ⇒ Размер изображения (Image ⇒ Image Size).
На экране появится диалоговое окно Размер изображения (Image Size) (рис. 1.127).

Рис. 1.127. Диалоговое окно


Размер изображения
156  Проект 1. Мини-приложение

3. Убедитесь, что флажок Интерполяция (Resample Image) сброшен.


Когда этот флажок сброшен, вы изменяете только разрешение изображения, не удаляя или
добавляя пикселы.
4. Введите значение 300 в поле ввода Разрешение (Resolution) (рис. 1.127).
Убедитесь, что в качестве единицы измерения для параметра Разрешение (Resolution) вы-
брано значение Пикселы/дюйм (pixels/inch).
5. Щелкните по кнопке OK.
Чтобы просмотреть изображение с теми размерами, которые будут использованы при печа-
ти, выберите команду меню Просмотр ⇒ Размер при печати (View ⇒ Print Size.

Преобразование изображения в цветовую модель CMYK


Для отображения фотографий компьютеры используют комбинации красного, зеленого и
синего цветов (RGB — red, green, blue). Для печати цветных фотографий офсетные печатные
машины используют голубой (синий), розовый (красный), желтый и черный цвета. Это на-
зывается CMYK-печатью. При печати фотографии на струйном принтере вы можете продол-
жать работу с изображением в режиме RGB, но если вы подготавливаете изображение для
печати в типографии, его необходимо сконвертировать в цветовую модель CMYK.
Чтобы увидеть, как будет выглядеть изображение при использовании цветовой модели
CMYK, выберите команду меню Просмотр ⇒ Варианты цветопробы ⇒ Формы CMYK
(View ⇒ Proof Setup ⇒ Working CMYK). (Для некоторых изображений вы можете не
заметить вообще никаких отличий.) Такой режим просмотра называется мягкой цвето-
пробой.
Примечание. Мягкие цветопробы — это приблизительные пробные варианты отображения изо-
бражений. То, что вы видите на экране, зависит от качества и настроек вашего монитора, а также от
условий освещения на вашем рабочем месте. При печати вы можете наблюдать другие результаты.
Но, несмотря на это, мягкие цветопробы могут оказаться полезными.

Кроме того, программа Adobe Photoshop позволяет увидеть, как данное изображение будет
выглядеть при печати на различных принтерах, включая большинство моделей компании
Epson, и офсетных печатных машин. Для этого выберите команду меню Просмотр ⇒ Вари-
анты цветопробы ⇒ Заказной (View ⇒ Proof Setup ⇒ Custom).
1. Сохраните копию изображения.
2. Выберите команду меню Изображение ⇒ Режим ⇒ CMYK (Image ⇒ Mode ⇒ CMYK
Color).
3. Если изображение содержит слои, программа Adobe Photoshop предложит вам выпол-
нить сведение этих слоев. Щелкните по кнопке Выполнить сведение (Yes).
(Поскольку вы сохранили копию данного файла, в дальнейшем вы можете открыть эту со-
храненную копию, чтобы восстановить слои.)
Цифровой дизайн: основы веб-дизайна  157

Сохранение файлов в формате TIFF


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

1. Выберите команду меню Файл ⇒ Сохранить как (File ⇒ Save As).


На экране появится диалоговое окно Сохранить как (Save As) (рис. 1.128).

Раскрывающийся
список Тип файлов

Рис. 1.128. Диалоговое окно Сохранить как

2. В раскрывающемся списке Тип файлов (Format) выберите значение TIFF (*.TIF,


*.TIFF) (Windows) или TIFF (OS X).
3. Щелкните по кнопке Сохранить (Save).
158  Проект 1. Мини-приложение

На экране появится диалоговое окно


Параметры TIFF (TIFF Options)
(рис. 1.129).
4. Поскольку изображение будет
печататься на принтере, нам не нуж-
но выполнять его сжатие. Оставьте
переключатель Сжатие изображе-
ния (Image Compression) в положе-
нии Нет (None), а переключатель
Порядок пикселов (Pixel Order)  —
в положении Перемежающийся
(Interleaved).
Примечание. На практике сжатие изо-
бражений в формате TIFF используется
крайне редко.

5. Переключатель Формат (Byte


Order) установите в положение, со-
ответствующее вашей операцион-
ной системе (IBM PC (Windows)
или Macintosh (OS X)). Рис. 1.129. Диалоговое окно Параметры TIFF
6. Поскольку изображение будет
печататься на принтере, вам также не нужно сохранять слои. Убедитесь, что переключатель
Сжатие слоев (Layer Compression) установлен в положении Удалить слои и сохранить ко-
пию (Discard Layers And Save A Copy). Это позволяет выполнить сведение слоев в изобра-
жении.
7. Щелкните по кнопке OK.
Примечание. Если изображение имеет только слой Фон (Background), положение Удалить слои
и сохранить копию (Discard Layers And Save A Copy) переключателя Сжатие слоев (Layer
Compression) будет недоступно.

Печать изображений и сохранение настроек печати


Бывают ситуации, когда необходимо напечатать копию изображения на локальном прин-
тере. Программа Adobe Photoshop предоставляет множество возможностей для настройки
параметров печати, включая следующие команды:
Печатать (Print). Отображает диалоговое окно Печать (Print), которое позволяет просма-
тривать настройки печати, выбирать принтер, указывать количество копий, задавать пара-
метры вывода и параметры управления цветом.
Печать одного экземпляра (Print One Copy). Печатает одну копию файла без отображения
диалогового окна.
Цифровой дизайн: основы веб-дизайна  159

Установив настройки печати и параметры управления цветом должным образом, вы можете


сохранить выбранные настройки в качестве предустановки для дальнейшего использования.
1. Выберите команду меню Файл ⇒ Печатать (File ⇒ Print).
На экране появится диалоговое окно Печать (Print) (рис. 1.130).
2. Выполните одно или несколько действий из следующего списка:
xx Используйте раскрывающийся список Принтер (Printer), чтобы выбрать принтер.
xx Укажите количество копий для печати.
Область предварительного Настройка параметров Задает ориентацию Кнопка
просмотра принтера и печати страницы Параметры печати

Позволяет указать параметры Позиция и масштаб Группы настроек Метки


управления цветом изображения печати и Возможности
Рис. 1.130. Диалоговое окно Печать
160  Проект 1. Мини-приложение

xx Выберите ориентацию страницы (портретная или альбомная).


xx Если необходимо, щелкните по кнопке Параметры печати (Print Settings), чтобы вы-
брать специфические настройки вашего принтера, драйверов к нему и операционной си-
стемы, такие как размер бумаги и ее расположение.
xx Выбрав вариант в раскрывающемся списке Управление цветом (Color Management),
укажите значения параметров управления цветом.
xx Настройте позицию и масштаб изображения относительно выбранного размера бумаги
и ориентации.
xx Выберите необходимые параметры в группах настроек Метка печати (Printing Marks) и
Возможности (Functions).
3. Выполните одно или несколько действий из следующего списка:
xx Чтобы напечатать изображение, щелкните по кнопке Печать (Print).
xx Чтобы закрыть диалоговое окно, не сохраняя настройки, щелкните по кнопке Отмена
(Cancel).
xx Чтобы сохранить настройки и закрыть диалоговое окно, щелкните по кнопке Готово
(Done).
Примечание. Если на экране появится предупреждение о том, что размер печатаемого изображения
превышает размер печатного листа, щелкните по кнопке Отмена (Cancel), выберите команду меню
Файл ⇒ Печатать (File ⇒ Print), и в появившемся диалоговом окне Печать (Print) установите фла-
жок Подогнать под формат листа (Scale To Fit Media).

Создание изображений для видеопроектов


Программа Adobe Photoshop позволяет создавать изображения с различными соотношени-
ями сторон, чтобы они правильно отображались на устройствах, например, видеоэкранах.
Вы можете указать определенные параметры видеоизображения (в диалоговом окне Но-
вый (New)), чтобы компенсировать изменение масштаба, когда готовое изображение будет
вставлено в видеоклип.

Безопасные зоны
С помощью предустановки Фильмы и видео (Film & Video) можно также создать документ
с непечатаемыми направляющими, которые обозначают безопасные зоны действия и титров
на изображении (рис. 1.131). Используя значения в раскрывающемся списке Размер (Size),
можно создавать изображения для различных видеосистем — NTSC, PAL или HDTV.
Безопасные зоны полезно использовать при подготовке программ для широкого вещания
или видеофильмов. В большинстве бытовых телевизоров задействуется процесс забегания
развертки — в результате, края изображения, находящиеся за пределами видимой области
экрана, обрезаются, а центральная часть изображения увеличивается. Степень забегания
развертки у различных телевизоров отличается. Чтобы гарантировать отображение необхо-
димой информации на экранах большинства телевизоров, текст должен находиться внутри
безопасной зоны титров, а все другие важные элементы — внутри безопасной зоны действия.
Цифровой дизайн: основы веб-дизайна  161

Безопасная зона
действия (внешний
прямоугольник)

Безопасная зона
титров (внутренний
прямоугольник)

Рис. 1.131. Направляющие в новом документе, обозначающие безопасные зоны


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

1. Создайте новый документ.


На экране появится диалоговое окно Новый (New) (рис. 1.132).

Рис. 1.132. Диалоговое окно Новый


162  Проект 1. Мини-приложение

2. В раскрывающемся списке Набор (Preset) диалогового окна Новый (New) выберите


значение Фильмы и видео (Film & Video).
3. В раскрывающемся списке Размер (Size) выберите размер изображения, соответствую-
щий видеосистеме, в которой будет демонстрироваться данное изображение. В данном при-
мере выбрано значение NTSC DV (рис. 1.133).

Рис. 1.133. Раскрывающийся список Размер

4. Щелкните по значку Дополнительно (Advanced), чтобы выбрать цветовой профиль и


значение попиксельной пропорции.
Важно. По умолчанию, для документов с неквадратными пикселами включена функция Коррекция про-
порций (Pixel Aspect Ratio Correction). Эта функция позволяет масштабировать изображение так, как оно
будет отображаться на устройстве вывода с неквадратными пикселами (обычно на видеоэкране).

5. Щелкните по кнопке OK, чтобы закрыть диалоговое окно Новый (New).


6. Щелкните по кнопке OK, чтобы закрыть появившееся предупреждение «Коррекция
попикселной пропорции включена только для просмотра. Чтобы добиться максимального
качества изображения, отключите ее» (Pixel aspect ratio correction is for preview purposes only.
Turn it off for maximum image quality).
Откроется новый документ (рис. 1.131).
7. Чтобы увидеть, как будет отображаться данное изображение на мониторе компьютера
(с квадратными пикселами), выберите команду меню Просмотр ⇒ Коррекция пропорций
(View ⇒ Pixel Aspect Ration Correction).
Цифровой дизайн: основы веб-дизайна  163

К примеру, на рис. 1.134 показано изображение с


несколькими кругами, отображаемое при вклю-
ченной (вверху) и выключенной (внизу) функ-
ции Коррекция пропорций (Pixel Aspect Ration
Correction).
Примечание. Вы можете одновременно просматривать
изображение с включенной и выключенной функцией
Коррекция пропорций (Pixel Aspect Ration Correction).
Открыв изображение с неквадратными пикселами и
включив функцию Коррекция пропорций (Pixel Aspect
Ration Correction), выберите команду меню Окно ⇒
Упорядочить ⇒ Новое окно для [имя документа]
(Window ⇒ Arrange ⇒ New Window For [имя докумен-
та]). В новом окне выберите команду меню Просмотр
⇒ Коррекция пропорций (View ⇒ Pixel Aspect Ration
Correction), чтобы отключить функцию Коррекция
пропорций (Pixel Aspect Ration Correction).

8. Если к вашему компьютеру подключено устрой-


ство отображения, например, видеоэкран, вы можете
просмотреть документ на этом устройстве, выполнив
команду меню Файл ⇒ Экспортировать ⇒ Просмо- Рис. 1.134. Разноцветный круг в
треть видео (File ⇒ Export ⇒ Render Video). документе с размером NTSC DV
(720480 пикселей), просматриваемом
Примечание. При создании изображений для видео- на мониторе компьютера (с
проектов вы можете загрузить набор соответствующих квадратными пикселями) с
операций (включенных в программу Adobe Photoshop), включенной (вверху) и выключенной
чтобы автоматизировать выполнение определенных (внизу) функцией Коррекция
задач, — например, масштабирование изображений пропорций
с целью соответствия размерам видео и установка
нужных пропорций.

Обзор рабочего пространства программы


Adobe Dreamweaver CS6
Вы можете получить доступ к инструментам, командам и возможностям Adobe Dreamweaver
CS6 с помощью меню или посредством элементов управления на панели Вставка (Insert)
или в других панелях программы. Наиболее часто используемые элементы интерфейса
Adobe Dreamweaver (рис. 1.135) — окно документа, панель Вставка (Insert), другие панели
и инспектор свойств.
Окно документа отображает текущий документ при его создании и редактировании.
Панель Вставка (Insert) содержит элементы управления для создания и вставки таких
164  Проект 1. Мини-приложение

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

Окно документа и панели


Рабочее пространство программы Adobe Dreamweaver (рис. 1.135) позволяет просматривать
и редактировать документы и свойства объектов. В рабочем пространстве многие часто вы-
полняемые команды доступны из панелей, так что вы можете быстро внести изменения в
документы.

Кнопки Панель Переключатель


Панель переключения Окно инструментов рабочих Панель
приложения представлений документа документа пространств Вставка

Инспектор Представление Представление Группы Панель Панель


свойств Код Дизайн панелей Активы Файлы

Рис. 1.135. Рабочее пространство программы Adobe Dreamweaver, представление Разделение


(совместное отображение представлений Код и Дизайн)
Цифровой дизайн: основы веб-дизайна  165

Переключение между представлениями


Программа Adobe Dreamweaver позволяет выбрать режим работы  — представление. Вы
можете графически размечать страницу в представлении Дизайн (Design), работать непо-
средственно с исходным кодом в представлении Код (Code), разделить окно программы для
одновременного отображения кода и дизайна страницы в представлении Разделение (Split)
или выполнять редактирование в представлении Live, позволяющем при создании и редак-
тировании документа видеть нередактируемую визуализацию страницы, как в браузере.
Переключаться между представлениями вы можете с помощью соответствующих кнопок.
xx Представление Код (Code) позволяет просматривать и редактировать HTML-код, сцена-
рии JavaScript, код серверных языков, к примеру, PHP или язык разметки ColdFusion, а
также другой код.
xx Представление Дизайн (Design) позволяет просматривать приблизительный вид страни-
цы в браузере, редактировать и быстро разрабатывать приложения.
xx Представление Разделение (Split) предоставляет одновременное отображение кода и ди-
зайна страницы одного и того же документа в одном окне.
Существуют также два дополнительных представления, связанные с кодом, изменяющим
страницу динамически, — т. е. кодом, который будет изменяться при взаимодействии поль-
зователей со страницей:
xx Представление Live напоминает режим Дизайн (Design). Это более реалистичное пред-
ставление того, как будет выглядеть страница в браузере. Представление Live позволяет
взаимодействовать с документом так же, как в браузере. Данное представление не позво-
ляет выполнять редактирование. Тем не менее, вы можете работать с кодом в представле-
нии Код (Code), а затем обновить отображение в режиме Live для проверки внесенных
изменений.
xx Представление Интерактивный код (Live Code) доступно только при просмотре до-
кумента в режиме Live. Оно отображает фактический код страницы, считываемый бра-
узером при загрузке страницы и может динамически меняться при взаимодействии
пользователей со страницей в режиме Live. Данное представление также не позволяет
выполнять редактирование.
Для переключения между представлениями служат соответствующие кнопки на панели ин-
струментов документа (рис. 1.135).

Рабочие пространства программы Adobe Dreamweaver


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

Переключение между рабочими пространствами


1. Выберите новое рабочее пространство в переключателе рабочих пространств на панели
приложения (рис. 1.136), например Дизайнер (компактный) (Designer Compact).
Интерфейс программы изменится соответствующим образом.
166  Проект 1. Мини-приложение

Рис. 1.136. Переключатель рабочих пространств

Создание нового рабочего пространства

1. Внесите изменения в существующее рабочее пространство, например, откройте не-


сколько дополнительных панелей или закройте открытые панели.
2. В меню выберите команду Окно ⇒ Макет рабо-
чего пространства ⇒ Создать рабочее пространство
(Window ⇒ Workspace Layout ⇒ New Workspace).
Откроется диалоговое окно Создать рабочее простран-
ство (New Workspace) (Windows) или Сохранить рабо-
чее пространство (Save Workspace) (OS X) (рис. 1.137).
3. Укажите имя для нового рабочего пространства. Рис. 1.137. Диалоговое окно
Создать рабочее пространство
4. Щелкните мышью по кнопке OK.
Теперь это рабочее пространство доступно в переключателе рабочих пространств.

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

Группы панелей
Панели часто организуются в группы — сгруппированные вместе разные панели. Например,
панели Файлы (Files) и Активы (Assets) в рабочем пространстве Дизайнер (Designer) по
умолчанию сгруппированы (рис. 1.138).
Цифровой дизайн: основы веб-дизайна  167

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

Заголовок

Закрыть
панель

Кнопка Развернуть/
Свернуть в значки

Рис.1.138. Группа панелей Рис. 1.139. Свернутая панель

Работа с панелями
xx Открытие и закрытие панелей: чтобы открыть панель, выберите ее название в меню
Окно (Window). Закрыть панель можно одним из следующих способов:
xx Щелкните мышью по кнопке Закрыть (Close) в верхней части панели.
xx Выберите команду Закрыть (Close) в меню панели.
xx Сбросьте флажок напротив названия панели в меню Окно (Window).
xx Перемещение отдельных и групп панелей: чтобы переместить панель, перетащите ее
вкладку. Чтобы переместить группу закрепленных или плавающих панелей, перетащите
заголовок группы. Чтобы закрепить панель, перемещайте ее мышью, пока граница па-
нели не изменит цвет на синий. Отпустите кнопку мыши для закрепления панели. Для
открепления, перетащите панель от левой границы.
xx Сворачивание\разворачивание панелей: чтобы свернуть или развернуть панель, дваж-
ды щелкните по вкладке или области вкладки (пустому пространству рядом с вклад-
кой).
xx Сворачивание\разворачивание плавающих панелей: при сворачивании, плавающая панель
остается доступной в виде значка (рис. 1.139). Свернуть или развернуть плавающую па-
нель можно одним из следующих способов:
xx Щелкните мышью по двойной стрелке в заголовке панели.
168  Проект 1. Мини-приложение

xx Дважды щелкните мышью по области вкладки.


xx Дважды щелкните по заголовку панели или группы панелей.
xx Закрепление\открепление панелей: при перемещении панелей появляются выделенные
синим цветом области, в которых вы можете пристыковать панель. Если вы перетащите
панель в необозначенную таким образом область, панель станет плавающей.
xx Изменение размера панелей: для изменения размера панели, необходимо потянуть за ее
левую или нижнюю границу. Все панели обладают минимальным размером, меньше ко-
торого их нельзя уменьшить. Размер панелей может быть увеличен на весь экран.

Часто используемые панели

Панель Файлы (Files) отображает организацию вашего сайта и позволяет открывать файлы
для редактирования, публиковать файлы на сервере или удалять.
Панель Активы (Assets) содержит все ресурсы — элементы, используемые на сайте, такие,
как изображения, цвета или видеоролики. Панель Активы (Assets) предоставляет два спосо-
ба просмотра активов:
xx Список Сайт (Site) отображает все активы вашего сайта.
xx Список Избранное (Favorites) содержит только активы, включенные вами в этот список.

Панель Вставка
Панель Вставка (Insert) содержит элементы управления для добавления в документ объ-
ектов различных типов, например изображений, ссылок и таблиц. Элементы управления
организованы в несколько категорий (Общий (Common), Макет (Layout), Формы (Forms),
Данные (Data) и другие), которые вы можете выбрать из раскрывающегося списка панели.

Категория Общий
Категория Общий (Common) на панели Вставка (Insert) содержит элементы управления
для добавления наиболее часто используемых объектов) (рис. 1.140).
Гиперссылка (Hyperlink): вставляет текстовую гиперссылку.
Ссылка на адрес электронной почты (Email Link): вставляет ссылку на адрес электронной
почты.
Именованная привязка (Named Anchor): вставляет ссылку на определенную позицию на
странице.
Горизонтальная линейка (Horizontal Rule): вставляет горизонтальную линию для визуаль-
ного разделения секций на странице.
Таблица (Table): вставляет таблицу.
Вставить тег Div (Insert Div Tag): вставляет тег div, используемый для компоновки макета
страницы.
Цифровой дизайн: основы веб-дизайна  169

Изображения (Images): вставляет изображение. Раскрывающийся


список категорий
Мультимедиа (Media): вставляет такие мультимедий-
ные объекты, как Adobe Flash, Shockwave, апплеты и
ActiveX.
Мини-приложение (Widget): вставляет мини-приложе-
ние Adobe Dreamweaver.
Дата (Date): вставляет текущую дату с функцией ав-
томатического обновления при сохранении документа.
Включая содержимое на сервере (Server-Side Include):
используется как местозаполнитель часто используемо-
го кода, который может быть использован многократно
на многих страницах вашего сайта.
Если вы используете файл SSI, сервер вставляет в стра-
ницу все содержимое хранимого на сервере файла, за-
меняя код включения.
Комментарий (Comment): вставляет комментарий, ко-
торый не будет отображаться на вашей веб-странице.
Заголовок (Head): вставляет ключевые слова, мета-те-
ги, описания страниц и другие данные документа, кото-
рые содержатся в теге заголовка страницы.
Сценарий (Script): вставляет или удаляет сценарий, на-
пример JavaScript.
Шаблоны (Templates): создает шаблон на основе теку-
щего документа.
Выбор тегов (Tag Chooser): вставляет HTML-тег.
Рис. 1.140. Категория Общий на
панели Вставка
Категория Макет
Категория Макет (Layout) на панели Вставка (Insert) (рис. 1.141) позволяет вставлять та-
блицы, элементы таблиц, фреймы и мини-приложения Spry. Существует возможность вы-
бора между двумя режимами. Режим Стандартный (Standard) отображает таблицу в виде
сетки. Режим Развернутый (Expanded Tables) добавляет к ячейкам таблиц отступы и интер-
валы, а также увеличивает границы таблиц для упрощения редактирования.
Вставить тег Div (Insert Div Tag): вставляет тег div для создания блока контента.
Вставить тег Div «резинового» макета (Insert Fluid Grid Layout Div Tag): Вставляет тег div
с гибким позиционированием для отображения контента, положение которого на странице
меняется.
Рисовать слой AP (Draw AP Div): вставляет тег div с абсолютным позиционированием для
размещения контента в определенном месте страницы.
170  Проект 1. Мини-приложение

Панель меню Spry (Spry Menu Bar): вставляет набор


кнопок навигационного меню, отображающих подме-
ню при наведении посетителем сайта указателя мыши
на кнопку.
Панели со вкладками Spry (Spry Tabbed Panels): встав-
ляет вкладки, при щелчке по которым посетитель сай-
та может отобразить скрытый контент.
Набор вкладок Spry (Spry Accordion): вставляет набор
сворачиваемых панелей типа «Аккордеон», которые
могут хранить в компактном виде большой объем кон-
тента.
Сворачивающаяся панель Spry (Spry Collapsible Pan-
el): вставляет панель, которая позволяет скрывать и от-
крывать большой объем контента щелчком мышью по
вкладке панели.
Таблица (Table): вставляет таблицу.
Вставить строку сверху (Insert Row Above): вставля-
ет строку над текущей строкой в таблице.
Вставить строку снизу (Insert Row Below): вставляет
строку под текущей строкой.
Рис. 1.141. Категория Макет на
Вставить столбец слева (Insert Column to the Left): панели Вставка
вставляет столбец слева от текущего столбца.
Вставить столбец справа (Insert Column to the Right): вставляет столбец справа от текуще-
го столбца.

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

Рис. 1.142. Инспектор свойств


Цифровой дизайн: основы веб-дизайна  171

Работа с приложением Widget Browser


Мини-приложение — это компонент веб-страницы, содержащий код HTML, CSS и JavaScript.
Вкладки-аккордеоны, панели вкладок и календари — все это примеры мини-приложений.
Вы можете создать собственную подборку мини-приложений, доступных в Adobe
Dreamweaver, с помощью приложения Adobe Widget Browser (рис. 1.143). Widget Browser
представляет собой AIR-приложение, которое позволяет искать, настраивать и просматри-
вать мини-приложения с помощью визуального интерфейса.
Вы можете сразу найти мини-приложения на веб-сайте Adobe Exchange с помощью брау-
зера Adobe Widget, но если вы хотите, чтобы просмотреть мини-приложения, изучить их
подробнее или сохранить, вам нужно зарегистрировать учетную запись Adobe ID или ав-
торизоваться, введя логин и пароль. При запуске Widget Browser, в окне приложения по

Рис. 1.143. Приложение Adobe Widget Browser


172  Проект 1. Мини-приложение

умолчанию отображается ресурс Adobe Exchange. Здесь отображаются все мини-приложе-


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

Запуск приложения Widget Browser


1. Запустите программу Adobe Dreamweaver.
2. Выберите команду меню Файл ⇒ Создать (File ⇒ New), чтобы создать новый доку-
мент.
Откроется диалоговое окно Создать документ (New Document) (рис. 1.144).
Примечание. Вы можете также открыть существующий документ, на который требуется добавить
мини-приложение.

3. Щелкните мышью по категории Пустая страница (Blank Page), если она еще не от-
крыта, и выберите пункт HTML в группе элементов управления Тип страницы (Page Type)
и пункт <нет> в группе Макет (Layout).

Рис. 1.144. Диалоговое окно Создать документ


Цифровой дизайн: основы веб-дизайна  173

4. Нажмите кнопку Создать (Create).


5. Сохраните новый документ (Файл ⇒ Сохранить (File ⇒ Save)).
Откроется диалоговое окно Сохранить как (Save as).
6. Перейдите папке с файлами сайта, введите имя файла, и нажмите кнопку Сохранить
(Save).
7. В раскрывающемся списке Расширить Dreamweaver (Extend Dreamweaver) на панели
приложения выберите пункт Widget Browser (рис. 1.145).
Откроется окно приложения Adobe
Widget Browser (рис. 1.143).
Примечание. При первом запуске Widget
Browser может появиться текст лицензионно-
го соглашения конечного пользователя (End
User License Agreement). Просмотрите согла-
Рис. 1.145. Раскрывающийся список Расширить
шение и нажмите кнопку Accept (Принять),
Dreamweaver
чтобы закрыть его.

8. Щелкните мышью по ссылке Sign In (Вход) в правом верхнем углу окна Widget
Browser.
9. Введите свой Adobe ID и пароль и нажмите кнопку Sign In (Вход).
Если у вас нет Adobe ID, нажмите кнопку Create Account (Создать аккаунт) и следуйте
инструкциям на экране для создания (бесплатно) аккаунта Adobe.
10. В окне приложения Adobe Exchange просмотрите имеющиеся мини-приложения. Мож-
но сортировать мини-приложения по имени, дате создания и т.п.
11. В поле сортировки введите слово Spry (рис. 1.146) и нажмите клавишу Enter (Windows)
или Return (OS X). Отобразятся только шесть мини-приложений.
12. Щелкните мышью по миниатюре мини-приложения Spry Image Slideshow With Filmstrip
(рис. 1.147).

Поле сортировки

Рис. 1.146. Элементы приложения Adobe Рис. 1.147. Мини-приложение Spry Image
Widget Browser Slideshow With Filmstrip

В окне приложения Widget Browser отобразится подробная информация о мини-приложе-


нии, такая как имя разработчика, дата создания, а также краткое описание (рис. 1.148).
174  Проект 1. Мини-приложение

Рис. 1.148. Подробная информация о мини-приложении Spry Image Slideshow With Filmstrip

13. Чтобы посмотреть, как мини-приложение будет выглядеть в браузере, щелкните по


нему мышью на странице подробной информации или нажмите кнопку Preview (Просмотр)
в правом верхнем углу Widget Browser.
В окне предварительного просмотра, вы можете взаимодействовать с мини-приложением,
как если бы оно отображалось в браузере. Вы также можете изменить настройки внешнего
вида мини-приложения, или увидеть его код, щелкнув мышью по вкладке Code (Код).
14. В окне подробной информации или просмотра нажмите кнопку Add To My Widgets
(Добавить в мои мини-приложения), расположенную в нижнем правом углу окна Widget
Browser.
15. Просмотрите лицензию на мини-приложение и нажмите кнопку Accept (Принять),
чтобы закрыть ее.
Откроется диалоговое окно Widget Added (Мини-приложение добавлено), информирую-
щее вас, что выбранное мини-приложение было добавлено в папку My Widgets (Мои мини-
приложения).
16. Нажмите кнопку Go To My Widgets (Перейти к моим мини-приложениям).
17. Закройте приложение Adobe Widget Browser.
Цифровой дизайн: основы веб-дизайна  175

Добавление мини-приложения в документ Adobe Dreamweaver


1. В программе Adobe Dreamweaver, в представлении Дизайн (Design), щелкните мышью
по странице в позиции, куда вы хотите вставить мини-приложение.
2. Выберите команду меню Вставка ⇒ Мини-приложение (Insert ⇒ Widget).
Появится диалоговое окно Мини-приложение (Widget) (рис. 1.149).

Ссылка на приложение Раскрывающийся Раскрывающийся


Widget Browser список список
Набор параметров Мини-приложение

Рис. 1.149. Диалоговое окно Мини-приложение

3. Выберите мини-приложение Spry Image Slideshow With Filmstrip (1.0), если еще не
сделали этого.
Примечание. В раскрывающемся списке Мини-приложение (Widget) доступны только мини-при-
ложения, которые были сохранены в папку My Widgets (Мои мини-приложения). Вы также можете
открыть приложение Widget Browser, щелкнув мышью по ссылке в диалоговом окне.

4. Выберите пункт Blue в раскрывающемся списке Набор параметров (Preset).


5. Нажмите кнопку ОК.
Мини-приложение Spry Image Slideshow With Filmstrip будет добавлено в документ (рис. 1.150).
6. На панели инструментов документа нажмите кнопку Live (рис. 1.151).

Рис. 1.150. Слайд-шоу Рис. 1.151. Представления окна документа


в представлении Дизайн
176  Проект 1. Мини-приложение

Просмотр слайд-шоу изображений Spry в представлении


Live позволяет просмотреть и проверить, как будет выгля-
деть мини-приложение в веб-браузере (рис. 1.152).
7. Сохраните файл.
В мини-приложении Spry Image Slideshow With Filmstrip
доступны предустановленные изображения и текст. Вы
можете настроить мини-приложение, заменив текст, цве-
та и шрифты, а также добавив свои собственные изобра-
жения.

Рис. 1.152. Слайд-шоу


в представлении Live

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

Добавление изображений
Существует множество различных типов графических форматов файлов, но на веб-
страницах, как правило, используются три из них: GIF, JPEG и PNG. Форматы файлов GIF
и JPEG прекрасно поддерживаются и отображаются большинством браузеров.
При вставке изображений в документ Adobe Dreamweaver, в исходном коде HTML созда-
ется ссылка на файл изображения. Чтобы гарантировать, что эта ссылка верна, файл изо-
бражения должен находиться в папке сайта. Если файла в папке сайта нет, программа Adobe
Dreamweaver запросит, хотите ли вы скопировать файл в папку сайта.
После вставки изображений, вы можете настроить атрибуты доступности тега image, кото-
рые могут быть считаны программами экранного доступа, используемыми людьми с нару-
шениями зрения. Эти атрибуты можно отредактировать в HTML-коде.

Добавление изображения
1. Щелкните мышью по вкладке документа в окне программы Adobe Dreamweaver.
2. Выберите позицию документа, в которую хотите добавить изображение.
Цифровой дизайн: основы веб-дизайна  177

3. Выберите команду меню Вставка ⇒ Изображение (Insert ⇒ Image).


Откроется диалоговое окно Выбрать исходный файл изображения (Select Image Source)
(рис. 1.153).

Рис. 1.153. Диалоговое окно Выбрать исходный файл изображения

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


5. Выберите изображение.
Миниатюра изображения появится в правой части диалогового окна (Windows).
6. Нажмите кнопку OK (Windows) или Выбрать (Choose) (OS X).
Если изображение находится не в папке сайта, появится запрос, хотите ли вы скопировать
файл в папку сайта (рис. 1.154). Если изображение уже хранится на вашем сайте, вы можете
пропустить шаги 7 и 8.
Примечание. Данный запрос появляется в случае, если вы создали новый сайт. Для создания сайта
следует выбрать команду меню Веб-сайт ⇒ Новый сайт (Site ⇒ New Site).

7. Нажмите кнопку Да (Yes).


178  Проект 1. Мини-приложение

Рис. 1.154. Предупреждение о том, что файл находится вне корневой папки

Откроется диалоговое окно Копировать Создание новой папки


файл как (Copy File As) (рис. 1.155). По
умолчанию изображение будет скопиро-
вано в корневую папку сайта. Вы можете
сохранить изображение в корневой пап-
ке, или в подпапке с изображениями в
папке вашего сайта.
8. Перейдите к папке, в которую хотите
сохранить файл, или нажмите кнопку Соз-
дание новой папки (Create New Folder),
чтобы создать папку для изображений, и
нажмите кнопку Сохранить (Save).
Откроется диалоговое окно Атрибуты
специальных возможностей тега Image Рис. 1.155. Диалоговое окно Копировать файл как
(Image Tag Accessibility Attributes)
(рис. 1.156). Это диалоговое окно позволяет добавлять к изображению описание, чтобы про-
граммы экранного доступа могли его интерпретировать.

Рис. 1.156. Диалоговое окно Атрибуты специальных возможностей тега Image


Цифровой дизайн: основы веб-дизайна  179

9. Введите краткое пояснение. Вы также можете указать ссылку на текстовый файл с бо-
лее подробным описанием.
10. Нажмите кнопку ОК.
Изображение будет добавлено в документ.
11. Сохраните файл.

Настройка свойств изображения


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

Рис. 1.157. Инспектор свойств, режим настройки изображения

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


которые можно настроить в инспекторе свойств:
xx Ширина (W) и Высота (H) — ширина и высота изображения в пикселах. Программа
Adobe Dreamweaver автоматически обновляет эти значения и указывает исходные раз-
меры изображения при его добавлении на страницу. Если вы зададите значения Ширина
(W) и Высота (H), не соответствующие фактической ширине и высоте изображения,
оно может неправильно отображаться в браузере.
(Чтобы восстановить исходные значения, щелкните мышью по полям ввода Ширина (W)
и Высота (H) или по значку Вернуться к исходному размеру (Reset), который появляется
справа от полей ввода Ширина (W) и Высота (H) при вводе нового значения.)
Примечание. Вы можете изменить эти значения, чтобы уменьшить размер отображения этого изо-
бражения, но время загрузки графического файла от этого не уменьшится, т.к. браузер загружает
полное изображение перед тем, как его масштабировать. Чтобы уменьшить время загрузки и га-
рантировать, что все экземпляры изображения будут отображаться одного размера, для изменения
размера изображений воспользуйтесь графическим редактором.

xx Источник (Src) определяет путь к файлу изображения. Чтобы перейти к исходному


файлу, щелкните мышью по значку папки или введите путь вручную.
xx Ссылка (Link) определяет гиперссылку на изображении. Нажав и удерживая кнопку
мыши на значке Укажите файл (Point-To-File), перетащите указатель мыши к файлу,
на который будет ссылаться изображение, на панели Файлы (Files). Также вы можете
щелкнуть мышью по значку с изображением папки, чтобы перейти к документу на сайте
или ввести URL-адрес вручную.
180  Проект 1. Мини-приложение

xx Выровнять (Align) изображение и текст на одной строке.


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

Установка выравнивания изображения


1. Выберите изображение, которое поместили в документ в предыдущем разделе (рис. 1.158).

Рис. 1.158. Выбранное изображение

2. Выберите команду меню Формат ⇒ Выравнивание ⇒ По центру (Format ⇒ Align ⇒


Center) (рис. 1.159).

Рис. 1.159. Команда меню По центру

Изображение будет выровнено по центру (рис. 1.160).


3. Сохраните файл.
Цифровой дизайн: основы веб-дизайна  181

Рис. 1.160. Изображение выровнено по центру

Работа с панелью Вставка программы


Adobe Dreamweaver
Панель Вставка (Insert) в программе Adobe Dreamweaver CS6 содержит элементы управле-
ния для вставки на веб-страницу объектов различных типов, например изображений и форм.
С помощью панели Вставка (Insert) вы можете создавать или добавлять контент восьми
категорий:
xx Категория Общий (Common) содержит кнопки для вставки наиболее широко использу-
емых объектов, таких как ссылки, изображения и таблицы.
xx Категория Макет (Layout) предоставляет возможность вставлять таблицы, теги div,
фреймы и мини-приложения Spry. Вы можете просматривать таблицы в режиме Стан-
дартный (Standard) (по умолчанию) или Развернутый (Expanded Tables).
xx Категория Формы (Forms) содержит элементы управления для создания форм и встав-
ки элементов форм.
xx Категория Данные (Data) позволяет вставлять динамические элементы, например на-
боры записей, повторы Spry, счетчики записей и др.
xx Категория Spry позволяет вставлять мини-приложения, отображающие данные из дру-
гих файлов и различные элементы интерфейса (например, полосы навигации и меню),
созданные с использованием JavaScript и CSS. (В данном курсе не описываются мини-
приложения Spry, но вы можете почерпнуть более подробные сведения о мини-прило-
жениях. Для этого см. раздел «Визуальное построение страниц Spry» в справочных ма-
териалах программы Adobe Dreamweaver (выберите команду меню Справка ⇒ Справка
по Dreamweaver (Help ⇒ Dreamweaver Help)).
xx Категория jQuery Mobile позволяет вносить различные изменения в разметку макета,
добавлять элементы форм для разработки приложений для мобильных устройств по-
средством программы Adobe Dreamweaver.
182  Проект 1. Мини-приложение

xx Категория InContext Editing используется, чтобы предоставить конечному пользовате-


лю возможность внесения простых исправлений на веб-страницах без вашего участия
или использования дополнительных программ на его компьютере. Adobe InContext
Editing (ICE) — это веб-служба, предоставляющая возможности простого редактирова-
ния контента с помощью веб-браузера.
xx Категория Текст (Text) используется для работы в представлении Код (Code) и позволяет
добавлять различные теги форматирования текста и списков, например b, em, p, h1 и ul.
xx Категория Избранное (Favorites) используется для создания списка часто используемых
элементов управления панели Вставка (Insert) для быстрого доступа. Для добавления
элемента управления в эту категорию, следует щелкнуть по нему правой кнопкой мыши
(Windows) или мышью, удерживая клавишу Control (OS X).

Категории панели Вставка


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

Рис. 1.161. Раскрывающийся Рис. 1.162. Раскрывающийся список


список категорий панели Вставка Изображения на панели Вставка
Цифровой дизайн: основы веб-дизайна  183

Создание и изменение каскадных таблиц стилей


Создавать и редактировать правила стилей CSS можно двумя способами: в инспекторе
свойств и на панели Стили CSS (CSS Styles). Когда вы применяете стили CSS к тексту
c помощью инспектора свойств или команд меню, правила CSS добавляются в раздел за-
головка текущего документа. Также для создания и редактирования свойств и правил CSS
можно воспользоваться панелью Стили CSS (CSS Styles). В этом разделе вы вспомните
основные сведения о правилах CSS, создадите и примените правило класса с помощью
инспектора свойств и измените правило селектора тега, применив панель Стили CSS (CSS
Styles).

О правилах CSS

Правило CSS состоит из двух частей: селектора и определения (или в большинстве случаев,
набора определений). Селектор — это термин (например, p, h1, имя класса или идентифика-
тора), который идентифицирует форматируемый элемент.
Набор определений определяет свойства стиля. В следующем примере, h1 (тег заголовка) –
селектор, а все, что находится между фигурных скобок ({ и }) — набор определений (указы-
вающий свойства заголовка h1):

h1 {
font-family: Georgia, “Times New Roman”, Times, serif;
font-size: 18px;
text-transform: uppercase;
color: #090;
}

Отдельное определение состоит из двух частей: свойства (например, font-family) и значения


(например, Georgia). В предыдущем правиле CSS, был создан определенный стиль для те-
гов h1: текст всех тегов h1, связанных с этим стилем будет величиной 18 пикселов, набран
шрифтом Georgia, прописными буквами, и выделен цветом #090.
Стиль (формирующийся из правила, или набора правил) находится в коде, отдельно от
текста, который он, собственно, форматирует — обычно во внешней таблице стилей или в
разделе заголовка HTML-документа. Так, одно правило для тегов h1 может быть примене-
но сразу ко многим тегам (а в случае внешних таблиц стилей, правило можно применить
ко многим тегам сразу на нескольких разных страницах) (рис. 1.163). Таким образом, CSS
предоставляет возможность очень легко вносить обновления. При обновлении CSS правила
в одном месте, форматирование всех элементов, которые используют определенный стиль,
автоматически обновляется в соответствии с новым стилем.
184  Проект 1. Мини-приложение

Рис. 1.163. Обновление правил CSS в одной локации влечет за собой обновление всех элементов

Существуют три основных типа стилей CSS:


xx Стиль класса (Класс): Похож на стили, используемые в текстовых редакторах и програм-
мах предпечатной подготовки. Например, вам необходимо отформатировать весь текст
шрифтом Arial размером 10 пунктов, темно-зеленого цвета. Вы можете создать класс с
этими атрибутами, а затем применить этот стиль ко всему тексту в разделе тела страниц
на вашем сайте. Имена классов должны начинаться с точки и могут содержать любую
комбинацию букв и цифр (например, .myhead1).
xx Стиль тега (Селектор тега): Применяет глобальное форматирование для отдельных те-
гов HTML, а не отдельных областей.
xx Предположим, вы хотите изменить стиль заголовка 1, чтобы текст всегда был фиолето-
вым. Вместо того чтобы создать класс и применить его ко всем заголовкам 1 в документе,
можно создать селектор тега с этим атрибутом и применить его к тегу <h1> определен-
ного заголовка 1. По сути, вы переопределяете HTML-тег.
xx Стиль идентификатора (Идентификатор): уникальный идентификатор (ID) для сти-
ля, применяемого к заголовкам, баннерам, меню и другим элементам, встречающимся
только в одном месте в документе. Используется однократно в документе или странице.
Идентификаторы должны начинаться со знака решетки (октоторпа) (#) и может содер-
жать любую комбинацию букв и цифр (например, #myID1).
CSS правила могут располагаться следующим образом:
xx Внутренние таблицы стилей — наборы правил CSS, включенные в тело отдельного тега
(посредством его атрибута style) этого документа. Все правила этой таблицы действуют
только на содержимое этого тега.
xx Глобальные таблицы стилей — это наборы правил CSS, включенные в тег style в разделе
заголовка HTML-документа.
xx Внешние таблицы стилей — это наборы правил CSS, хранящиеся в отдельном, внешнем фай-
ле CSS (.css) (не HTML-файле). Вы связываете этот файл с одной или несколькими стра-
ницами веб-сайта с помощью ссылки или правила @import в разделе заголовка документа.
Цифровой дизайн: основы веб-дизайна  185

Создание нового правила CSS в инспекторе свойств


В инспекторе свойств вы можете получить доступ к элементу управления Целевое правило
(Targeted Rule) и создать новые правила (рис. 1.164). Целевое правило — это правило, кото-
рое вы редактируете в инспекторе свойств. Если к тексту уже применен стиль, то когда вы
щелкнете мышью по тексту на странице документа, в поле ввода появится правило, опреде-
ляющее форматирование текста. Кроме того, можно воспользоваться раскрывающимся спи-
ском Целевое правило (Targeted Rule), чтобы создать новые правила CSS и новые встроен-
ные стили или применить к выделенному тексту существующие классы.

Рис. 1.164. Инспектор свойств, вкладка CSS

Существуют разные способы редактирования CSS. Чтобы получить доступ к правилам, ко-
торые применяются только к текущему выделенному объекту, можно воспользоваться рас-
крывающимся списком Целевое правило (Targeted Rule) в инспекторе свойств. Чтобы по-
лучить доступ к правилам CSS для страницы, можно обратиться к панели Стили CSS (CSS
Styles). Панель Стили CSS (CSS Styles) мы рассмотрим чуть позже.
Далее вы используете элементы управления инспектора свойств, чтобы создать простое пра-
вило класса CSS для форматирования блока текста.

Создание нового правила CSS в инспекторе свойств


1. Запустите программу Adobe Dreamweaver.
2. Выберите команду меню Файл ⇒ Создать (File ⇒ New), чтобы создать новый доку-
мент.
Откроется диалоговое окно Создать документ (New Document) (рис. 1.165).
3. На вкладке Пустая страница (Blank Page) диалогового окна Создать документ (New
Document) выберите вариант HTML в группе Тип страницы (Page Type), чтобы создать про-
стую HTML-страницу.
4. В группе Макет (Layout) выберите вариант Нет (None).
5. Нажмите кнопку Создать (Create).
Будет создан новый документ HTML.
6. На панели инструментов документа нажмите кнопку Разделение (Split) (рис. 1.166).
186  Проект 1. Мини-приложение

Рис. 1.165. Диалоговое окно Создать документ

Возможность просматривать исходный код стилей,


генерируемый программой Adobe Dreamweaver,
полезна для понимания синтаксиса CSS и после-
дующего написания собственного кода. Кнопка Разделение

7. Введите несколько строк текста или вставьте Рис. 1.166. Представления документа
текст скопированный из другого приложения, в
представлении Дизайн (Design) в окно документа.
8. Нажмите клавишу Enter (Windows) или
Return (OS X), чтобы создать новый абзац и до-
бавить еще текст. Затем установите текстовый
курсор в пределах первого абзаца текста.
9. Откройте инспектор свойств, если он скрыт,
и щелкните мышью по вкладке CSS, чтобы пере-
ключиться на настройки форматирования CSS
(рис. 1.164).
10. Откройте раскрывающийся список Шрифт
(Font) в инспекторе свойств и выберите пункт
Georgia, Times New Roman, Times, Serif Рис. 1.167. Раскрывающийся список
(рис. 1.167). Шрифт в инспекторе свойств
Цифровой дизайн: основы веб-дизайна  187

Рис. 1.168. Диалоговое окно Создать правило CSS

Появится диалоговое окно Создать правило CSS (New CSS Rule) (рис. 1.168).
Примечание. Рекомендуется выбирать комбинацию шрифтов вместо определенного шрифта. Это га-
рантирует, что у большинства посетителей страницы текст страницы отобразится одинаково. Браузер
использует первый шрифт из комбинации, который установлен на компьютере посетителя. Если ни
один из шрифтов в комбинации не установлен, браузер отобразит текст в соответствии с настройка-
ми браузера посетителя.

11. Откройте раскрывающийся список Тип селектора (Selector Type) и выберите пункт
Класс (Применимо к любому элементу HTML) (Class (Can Apply To Any HTML Element))
(рис. 1.169).

Рис. 1.169. Раскрывающийся


список Тип селектора в
диалоговом окне Создать
правило CSS
188  Проект 1. Мини-приложение

12. Щелкните мышью в поле ввода Имя селектора (Selector Name) и введите текст .mystyle
(рис. 1.170).
Примечание. Правила CSS должны начинаться с точки и не могут содержать пробелов или специ-
альных символов (в т.ч. и кириллических).

Рис. 1.170. Раскрывающийся список Имя селектора


в диалоговом окне Создать правило CSS

13. В раскрывающемся списке Определение правила (Rule Definition) выберите пункт


Только в этом документе (This Document Only) (рис. 1.171).

Рис. 1.171. Раскрывающийся список Определение правила


в диалоговом окне Создать правило CSS

Таким образом, программа Adobe Dreamweaver создаст и сохранит таблицу стилей CSS
только в текущем документе. Новый стиль не будет доступен для использования в других
документах.
Для создания внешнего документа CSS для всего веб-сайта следовало бы выбрать вариант
Создать CSS файл (New Style Sheet File). К внешним таблицам CSS мы вернемся позднее.
14. Щелкните мышью по кнопке OK, чтобы
закрыть диалоговое окно Создать правило
CSS (New CSS Rule). К первому абзацу тек-
ста будет применен новый стиль шрифта. Имя
стиля появится в раскрывающемся списке
Целевое правило (Targeted Rule) в инспекто- Рис. 1.172. Раскрывающийся список
ре свойств (рис. 1.172). Целевое правило в инспекторе свойств
Цифровой дизайн: основы веб-дизайна  189

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

15. В инспекторе свойств измените размер шрифта на 18.


Соответственно изменится размер шрифта текста.
16. Щелкните мышью по индикатору цвета в инспекторе свойств и выберите новый цвет
текста.
При этом инспектор свойств отображает целевое правило (.mystyle) и его форматирование.
Целевое правило применяется к абзацу, в котором находится текстовый курсор (рис. 1.173).

Рис. 1.173. Отформатированный абзац текста

Вы можете использовать это правило CSS для форматирования дополнительного текста в


вашем документе.
В представлении Код (Code) вы можете увидеть, что программа Adobe Dreamweaver хранит
стили, созданные с применением CSS в разделе заголовка документа (рис. 1.174)

Рис. 1.174. Подробная информация о новом правиле CSS в представлении Код


190  Проект 1. Мини-приложение

Применение стилей CSS


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

Применение стилей CSS


1. Щелкните мышью в любой позиции абзаца, к которому не применен стиль CSS.
2. В инспекторе свойств выберите правило CSS myStyle (которое вы только что создали)
в раскрывающемся списке Целевое правило (Targeted Rule) и (рис. 1.175).

Рис. 1.175. Раскрывающийся список Целевое правило

Новый стиль будет применен к этому абзацу (рис. 1.176).

Рис. 1.176. Стили CSS применены к обоим абзацам

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

Использование панели Стили CSS


На панели Стили CSS (CSS Styles) вы можете отслеживать правила и свойства CSS, влия-
ющие на выбранный в данный момент элемент страницы (режим Текущий (Current)) или
все правила и свойства, доступные в документе (режим Все (All)). Кнопки в верхней части
Цифровой дизайн: основы веб-дизайна  191

панели позволяют переключаться между режимами. Кроме того, панель Стили CSS (CSS
Styles) можно использовать для изменения свойств CSS в обоих режимах: Все (All) и Теку-
щий (Current).

Панель Стили CSS в режиме Текущий


В режиме Текущий (Current) панель разделена на три группы элементов управления: Свод-
ка по выделению (Summary For Selection), которая отображает свойства CSS фрагмента до-
кумента, выделенного в текущий момент, Правила (Rules), отображающая местоположение
выделенных свойств (или каскада правил для выбранного тега, в зависимости от того, что
выбрано в данный момент) и Свойства (Properties), позволяющая редактировать свойства
CSS для правила, примененного к выбранной области (рис. 1.177).

Панель Стили CSS в режиме Все


В режиме Все (All) панель содержит две группы элементов управления: Все правила (All
Rules) и Свойства (Properties). В группе Все правила (All Rules) отображается список пра-
вил, определенных в текущем документе, а также правила, определенные во внешних до-
кументах таблиц стилей, которые прикреплены к документу. Элементы управления группы
Свойства (Properties) можно использовать для редактирования свойств любого правила
CSS, выбранного в группе Все правила (All Rules) (рис. 1.178).

Кнопка Присоединить
таблицу стилей

Кнопка Создать
правило CSS

Кнопка Изменить
стиль

Рис. 1.177. Панель Стили CSS, Рис. 1.178. Панель Стили CSS,
режим Текущий режим Все
192  Проект 1. Мини-приложение

Создание правил CSS с помощью панели Стили CSS


1. Запустите программу Adobe Dreamweaver.
2. Создайте новый HTML-документ.
3. Сохраните документ и присвойте ему имя.
4. Введите в документе текст. Убедитесь, что к тексту не применяется форматирование
(рис. 1.179).

Рис. 1.179. Текст без форматирования

5. Убедитесь, что панель Стили CSS (CSS Styles) открыта.


Если это не так, выберите команду меню Окно ⇒ Стили CSS (Window ⇒ CSS Styles).
6. Чтобы создать новый стиль, нажмите кнопку Создать правило CSS (New CSS Rule) (+)
в нижней части панели (рис. 1.177).
Появится диалоговое окно Создать правило CSS (New CSS Rule) (рис. 1.180).
7. В текстовом поле Тип селектора (Selector Type) выберите вариант Класс (применимо
к любому элементу HTML)
Будет создано новое правило класса.

Рис.1.180. Диалоговое окно Создать правило CSS


Цифровой дизайн: основы веб-дизайна  193

8. В текстовом поле Имя селектора (Selector Name) введите имя стиля, например,
.warning.
Примечание. Имена правил класса должны начинаться с точки и не должны содержать пробелы или
специальные символы (в т.ч. и кириллические). Если вы забудете указать точку, программа Adobe
Dreamweaver добавит ее автоматически.

9. В раскрывающемся списке Определение правила (Rule Definition) выберите вариант


(Только в этом документе) ((This Document Only)) или (Создать CSS файл) ((New Style
Sheet File)).
Параметр (Только в этом документе) ((This Document Only)) определяет стиль как элемент
внутренних стилей документа. Параметр (Создать CSS файл) ((New Style Sheet File)) опре-
деляет стиль как часть внешней таблицы стилей.
Примечание. Если вы решите создать внешнюю таблицу стилей, и выберите вариант (Создать CSS
файл) ((New Style Sheet File)), программа предложит вам указать местоположение файла новой
таблицы стилей (.css).

10. Нажмите кнопку OK.


Появится диалоговое окно Определение правила CSS (CSS Rule Definition) (рис. 1.181).
11. В категории Тип (Type) укажите следующие параметры:
xx В раскрывающемся списке Font-Family выберите вариант Arial, Helvetica, sans-serif.
xx В раскрывающемся списке Font-Size укажите значение размера шрифта 12 и укажите в
качестве единицы измерения пикселы (px).
xx В поле ввода Color укажите значение #CC0033 или выберите цвет из палитры.
12. Чтобы изменить форматирование блоков текста, выберите категорию Блок (Block) в
области Категория (Category).
Откроется категория Блок (Block) диалогового окна Определение правила CSS (CSS Rule
Definition) (рис. 1.182).
13. В поле ввода Letter-Spacing укажите, к примеру, значение 3 и выберите пикселы (px) в
качестве единиц измерения.
Этот параметр увеличивает пространство между буквами.
14. В поле ввода Text-Indent введите значение 5 и выберите пикселы (pixels) в качестве
единиц измерения.
15. Нажмите кнопку ОК.
Диалоговое окно Определение правила CSS (CSS Rule Definition) закроется.
16. Выделите текст документа.
17. Убедитесь, что инспектор свойств открыт и выбран режим HTML.
Инспектор свойств закреплен в виде панели в нижней части окна программы. Если данная
панель не отображается, выберите команду меню Окно ⇒ Свойства (Window ⇒ Properties).
194  Проект 1. Мини-приложение

Рис.1.182. Категория Блок диалогового окна Определение правила CSS

18. В раскрывающемся списке Класс (Class) выберите вариант warning (или имя вашего
стиля) (рис. 1.183).

Рис. 1.183. Форматирование текста в инспекторе свойств

19. В документе сбросьте выделение с текста. Для этого щелкните мышью вне текста.
Обратите внимание, что формат текста изменился (рис. 1.184).

Рис. 1.184. Текст, к которому применено форматирование


Цифровой дизайн: основы веб-дизайна  195

20. Убедитесь, что панель Стили CSS (CSS Styles) открыта. Если это не так, выберите ко-
манду меню Окно ⇒ Стили CSS (Window ⇒ CSS Styles).
21. Убедитесь, что на панели Стили CSS (CSS Styles) выбрана категория Все (All). Если в
директории <style> категории Все правила (All Rules) не указано ни одного стиля, щелкни-
те мышью по значку плюс (+) (Windows) или треугольнику (OS X).
Обратите внимание, что новое правило CSS появится ниже строки <style> и будет ука-
зано, что оно – часть таблицы стилей CSS. Также заметим, что если вы выберите имя
стиля в категории Все правила (All Rules), свойства этого стиля появятся в инспекторе
свойств.

Редактирование стилей
После создания, стили можно изменить, ис-
пользуя кнопку Изменить стиль (Edit Rule).

Редактирование стилей
1. Чтобы просмотреть правила стилей, щел-
кните мышью по значку плюс (+) (Windows)
или треугольнику (OS X) рядом с тегом <style>
в категории Все правила (All Rules) панели
Стили CSS (CSS Styles).
Программа Adobe Dreamweaver отобразит пра-
вила таблицы стилей (рис. 1.185).
2. Выберите правило или стиль, который хо-
тите изменить.
3. В нижней части панели Стили CSS (CSS
Styles), нажмите кнопку Изменить стиль (Edit
Rule). Изменить
стиль
Откроется диалоговое окно Определение пра-
вила CSS (CSS Rule Definition) для выбранного
стиля (рис. 1.186).
4. Измените свойства форматирования в диа-
логовом окне Определение правила CSS (CSS Рис. 1.185. Панель Стили CSS
Rule Definition). Затем нажмите кнопку OK.
Изменения вступают в силу немедленно.
Если вы редактируете внешнюю таблицу стилей, эти же изменения будут применены к лю-
бым другим документам, связанным с этой таблицей стилей.
196  Проект 1. Мини-приложение

Рис. 1.186. Диалоговое окно Определение правила CSS

Публикация файлов во Всемирной паутине


После того как вы создадите локальный сайт в программе Adobe Dreamweaver, вы може-
те указать удаленный сервер для вашего сайта. Удаленный сервер (часто именуемый веб-
сервером) — это место, где вы публикуете файлы вашего сайта, чтобы люди могли просма-
тривать их во Всемирной паутине.
Удаленный сервер представляет собой компьютер, похожий на ваш, с файлами и папками
на нем.
Вы указываете папку для сайта на удаленном сервере, так же, как указали папку для ло-
кального сайта на своем компьютере (рис. 1.187). Программа Adobe Dreamweaver обозначает
указанную удаленную папку как удаленный сайт.
При настройке удаленной папки, вы выбираете способ подключения программы Adobe
Dreamweaver для выгрузки файлов на ваш веб-сервере и загрузки с него файлов. Наибо-
лее распространенный способ подключения — по протоколу FTP, однако программа Adobe
Dreamweaver также поддерживает методы соединения локальный/сетевой, FTPS, SFTP,
WebDAV и RDS. Если вы не знаете, какой метод следует использовать, обратитесь к препо-
давателю или системному администратора учебного заведения.
Цифровой дизайн: основы веб-дизайна  197

Рис. 1.187. Основной экран категории Серверы диалогового окна


Настройка сайта

Соединение с удаленным сервером


Многие веб-сайты позволяют публиковать файлы посредством протокола FTP. В приложе-
нии Adobe Dreamweaver CS6 вы можете связаться с удаленным сервером, используя диало-
говое окно Настройка сайта (Site Setup).

Установка соединения с удаленным сервером


1. Выберите команду меню Веб-сайт ⇒ Управление веб-сайтами (Select Site ⇒ Manage
Sites).
Откроется диалоговое окно Управление сайтами (Manage Sites) (рис. 1.188).
2. Дважды щелкните мышью по названию сайта, с которым требуется установить удален-
ное соединение.
Откроется диалоговое окно Настройка сайта (Site Setup).
3. Выберите категорию Серверы (Servers) в расположенном слева списке (рис. 1.189).
В диалоговом окне Настройка сайта (Site Setup) будет отображена категория Серверы
(Servers).
4. Щелкните мышью по кнопке Добавить сервер (Add Server) (символ +).
198  Проект 1. Мини-приложение

Рис. 1.188. Диалоговое окно Управление сайтами

Добавить
сервер

Рис. 1.189. Категория Серверы в диалоговом окне Настройка сайта

5. Введите информацию для FTP-доступа, предоставленную вашим преподавателем или


системным администратором (провайдером) (рис. 1.187).
6. Щелкните по кнопке Тест (Test) для проверки соединения.
Цифровой дизайн: основы веб-дизайна  199

Будет выполнена проверка соединения.


7. Нажмите кнопку Сохранить (Save).
В списке серверов в диалоговом окне Настройка сайта (Site Setup) появится новый сер-
вер.
8. Щелкните по кнопке Сохранить (Save), чтобы закрыть диалоговое окно Настройка
сайта (Site Setup).
9. Щелкните по кнопке Готово (Done), чтобы закрыть диалоговое окно Управление сай-
тами (Manage Sites).

Выгрузка, синхронизация и загрузка файлов


После установки соединения по протоколу FTP, вы можете опубликовать файлы непосред-
ственно из панели Файлы (Files).
При передаче документа между локальной и удаленной папками с использованием панели
Файлы (Files), у вас есть возможность передать зависимые файлы документа. Зависимые
файлы — это изображения, внешние таблицы стилей и прочие файлы, ссылки на которые
указаны в документе, которые браузер подгружает при загрузке документа.
Примечание. Рекомендуется загрузить зависимые файлы при проверке нового файла, но если по-
следние версии зависимых файлов уже находятся на локальном диске, нет необходимости загружать
их снова. Это также верно для выгрузки и проверки файлов: это не нужно, если обновленные копии
уже на удаленном сайте.

Кнопка Подключиться к\ Кнопка Кнопка Кнопка Кнопка Отображать


Отключиться от Кнопка Получить Разместить Синхрони- только локальный или
Удаленный сервер Обновить файлы файлы зировать удаленный веб-сайт

Рис. 1.190. Развернутая панель Файлы


200  Проект 1. Мини-приложение

Выгрузка всего сайта в первый раз


1. На панели Файлы (Files) (Окно ⇒ Файлы (Window ⇒ Files)) выберите файлы, кото-
рые требуется загрузить.
2. Щелкните мышью по кнопке Отобразить локальные или удаленные веб-сайты (Ex-
pand/Collapse) на панели Файлы (Files) (рис. 1.190).
Панель Файлы (Files) примет расширенный вид.
3. Щелкните мышью по кнопке Подключиться к (Connects To Remote Host) на панели
Файлы (Files).
Будет выполнено соединение с веб-сервером.
4. Выберите корневую папку вашего сайта в правой части окна, предназначенной для ло-
кальных файлов.
5. Щелкните по кнопке Разместить файлы (Put Files) на панели Файлы (Files).
6. В некоторых случаях может по-
явиться диалоговое окно с запросом:
хотите ли вы разместить сайт целиком.
Нажмите кнопку OK.
Будет выполнена выгрузка файлов сай-
та, при этом откроется диалоговое окно
Фоновая обработка файлов (Back-
ground File Activity) (рис. 1.191).
Рис. 1.191. Диалоговое окно Фоновая обработка
Примечание. Чтобы выгрузить одну или не- файлов
сколько папок или файлов, а не весь сайт,
выберите эти файлы или папки и щелкните
по кнопке Разместить файлы (Put Files).

Выгрузка обновленной версии существующего файла


1. Выделите новую версию файла.
2. Щелкните по кнопке Разместить файлы (Put Files).
Будет выполнена выгрузка обновленного файла.

Синхронизация файлов на локальном и удаленном сайтах


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

Синхронизация файлов

1. (Необязательный шаг) Выберите нужные файлы или папки на панели Файлы (Files)
или перейдите к следующему шагу, чтобы синхронизировать весь сайт целиком.
2. Нажмите кнопку Синхронизировать (Synchronize) на панели Файлы (Files), чтобы
синхронизировать файлы.
Откроется диалоговое окно Синхронизировать с удаленный сервер (Synchronize Files)
(рис. 1.192).

Рис. 1.192. Диалоговое окно Синхронизировать с Удаленный сервер

3. Выберите направление, в котором вы хотите скопировать файлы:


Поместить новые файлы на удаленный сервер (Put Newer Files To Remote) выгружает все
локальные файлы, которых нет на удаленном сервере или которые были изменены со вре-
мени последней выгрузки.
Получить новые файлы с удаленного сервера (Get Newer Files From Remote) загружает все
удаленные файлы, которых нет на локальном сайте или которые были изменены со времени
последней загрузки.
Получить и поместить новые файлы (Get And Put Newer Files) размещает самые последние
версии всех файлов на локальном и удаленном сайтах.
4. Выберите, нужно ли удалять с целевого сайта файлы, не имеющие копий на исходном
сайте. (Функция недоступна, если вы выбираете в раскрывающемся списке Направление
(Direction) вариант Получить и поместить новые файлы (Get And Put Newer Files)).
Если вы выберете вариант Поместить новые файлы на удаленный сервер (Put Newer Files
To Remote) и установите флажок Удалить (Delete), то будут удалены все файлы на удален-
ном сайте, не имеющие соответствий на локальном компьютере.
Если вы выберете вариант Получить новые файлы с удаленного сервера (Get Newer Files
From Remote), будут удалены любые файлы на локальном сайте, не имеющие соответствий
на удаленном сайте.
5. Нажмите кнопку Просмотр (Preview).
Программа Adobe Dreamweaver проанализирует локальную и удаленную папки, и откроется
диалоговое окно Синхронизировать (Synchronize) (рис. 1.193).
202  Проект 1. Мини-приложение

Рис. 1.193. Диалоговое окно Синхронизировать

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


действия совершит программа Adobe Dreamweaver для выполнения этой задачи.

Если последняя версия каждого выбранного файла уже находится на локальном и уда-
ленном серверах, и ничего не нужно удалять, появится предупреждение, сообщающее
вам, что синхронизация не требуется. В противном случае появится диалоговое окно
Синхронизировать (Synchronize), позволяющее изменить действия (разместить, полу-
чить, удалить и игнорировать), которые следует совершить с файлами до выполнения
синхронизации.
6. Проверьте, какие действия будут выполняться для каждого файла.
7. Нажмите кнопку ОК, чтобы синхронизировать файлы.

Загрузка файлов для их обработки


После публикации веб-сайта у вас будет часто возникать необходимость в загрузке файлов
на локальный компьютер для их редактирования. Для этого вы можете развернуть панель
Файлы (Files), левая часть которой предназначена для файлов удаленного сервера.
1. Щелкните по кнопке Обновить (Refresh) (рис. 1.190), чтобы отобразить текущие фай-
лы на удаленном сервере.
2. Выберите файл, который необходимо загрузить.
3. Щелкните по кнопке Получить файлы (Get Files).
Если у данного файла существуют какие-либо зависимые файлы, откроется диалоговое окно
Зависимые файлы (Dependent Files) (рис. 1.194).
Цифровой дизайн: основы веб-дизайна  203

Примечание. Если вы не нажмете кнопку Да


(Yes) в течение 30 секунд, диалоговое окно
Зависимые файлы (Dependent Files) будет
автоматически закрыто и загрузка зависимых
файлов выполняться не будет.

4. Щелкните по кнопке Да (Yes).


Программа Adobe Dreamweaver выполнит
копирование файла и его зависимых фай-
лов в папку на локальном компьютере. За- Рис. 1.194. Диалоговое окно Зависимые файлы
груженные файлы появятся в правой части
развернутой панели Файлы (Files).
5. Щелкните мышью по кнопке Отключиться от Удаленный сервер (Disconnects From
Remote Host), а затем сверните панель Файлы (Files).
Проект 2. Веб-дизайн
и планирование
Продолжительность 12–18 часов

Обзор проекта
В этом проекте учащиеся, разделенные на команды, участвуют в создании клиентского веб-
сайта. У каждой команды свой клиент, в зависимости от доступных ресурсов. Преподаватель
может играть роль клиента — гипотетической организации. Клиент выбирает тему и огова-
ривает, что будет включено в контент будущего сайта. Каждая команда учащихся по-своему
интерпретирует потребности клиента и отражает их в дизайне навигационного меню, впе-
чатлениях и ощущениях, а также в потоке контента. Учащиеся создают проектную докумен-
тацию, облегчающую им взаимодействие с клиентом.
Наибольшее внимание в данном проекте уделяется работе в команде и созданию дизайна на
заказ. Основное ударение делается на коллективной разработке дизайна для создания веб-
сайта, на взаимодействии команды и клиента для получения отзывов и внесения изменений
на протяжении всего периода разработки сайта, а также на взаимодействии команды и клиента
с помощью проектной документации и оценке веб-сайтов при подготовке к созданию дизайна.
В проекте 3 команды учащихся создадут и запустят клиентский веб-сайт, завершив все фазы
процесса разработки веб-сайта.
Результат проекта: План разработки проекта и проектная документация; прототип веб-
сайта, раскадровка, каркасы и композиции дизайна.
Примечание. Некоторые разделы данного проекта приведены в соответствии с программой экза-
мена «Сетевые коммуникации с использованием Adobe Dreamweaver CS6» Adobe Certified Associate.
После этапов проекта и технического руководства приведены цели данного экзамена.

Цели проекта
По завершении проекта, учащиеся разовьют следующие навыки:
Навыки управления проектом
xx Составление плана проекта
xx Разработка документа с дизайнерским решением
xx Анализ вариантов с последующим выбором наилучшего
xx Обработка контента на основе анализа и размышлений
Цифровой дизайн: основы веб-дизайна  205

xx Управление и организация работы над выполнением множественных задач связанных с


дизайном, в сравнении с разработкой сайта
xx Понимание ролей и обязанностей
xx Обсуждение выходных данных
Навыки дизайна
xx Передача идей и информации с помощью простых каркасов
xx Предоставление нескольких дизайнерских идей
xx Обработка информации, полученной при рецензировании дизайна
xx Создание каркасов
xx Создание композиций дизайна
xx Создание раскадровок
xx Создание прототипов
xx Применение принципов дизайна
xx Применение информационной архитектуры
xx Дизайн с учетом юзабилити и доступности
xx Дизайн согласованных веб-страниц
xx Понимание и применение аспектов дизайна, таких, как теория цвета, макет, контраст и
композиция
xx Дизайн для определенной аудитории и с определенной целью
xx Планирование графики и многофункционального интерактивного контента в зависимо-
сти от потребностей и аудитории
xx Дизайн в соответствии с требованиями клиента
Исследовательские и коммуникативные навыки
xx Оценка и анализ достоверности контента
xx Редактирование контента веб-сайта
xx Оценка и анализ навигации веб-сайта
xx Понимание и практика правового использования изображений
xx Знакомство с инструментами для создания анимации и интерактивного контента
xx Критика дизайна
xx Способность излагать цель и задачи работы
xx Способность сообщать и представлять дизайнерские решения
xx Предоставление отзывов по проекту
xx Умение задавать наводящие вопросы для уточнения и разъяснения задачи
xx Способность воспринимать и интерпретировать отзывы
xx Умение понимать и решать проблемы клиентского дизайна
Технические навыки
Программа Adobe Dreamweaver
xx Понимание проблемы доступности
206  Проект 2. Веб-дизайн и планирование

Программа Adobe Fireworks


xx Знакомство с рабочим пространством программы Fireworks
xx Создание каркасов
xx Создание композиций дизайна
xx Создание прототипа
xx Экспорт прототипа в программу Dreamweaver

Программное обеспечение и материалы для выполнения проекта


xx На всех компьютерах должна быть установлена программа Adobe Fireworks CS6
xx На всех компьютерах должна быть установлена программа Adobe Dreamweaver CS6
xx Раздел: «Дизайн с учетом юзабилити»
xx Презентация: «Веб-дизайн для различных устройств»
xx Раздел по программе Adobe Dreamweaver: «Обеспечение доступности веб-сайтов»
xx Бланк: «Юзабилити и доступность»
xx Презентация: «Этапы разработки веб-проекта»
xx Презентация: «Копирайтинг для Всемирной паутины»
xx Бланк: «Интервью с клиентом»
xx Бланк: «Рецензирование дизайна»
xx Бланк: «План проекта»
xx Презентация: «Информационная архитектура»
xx Раздел: «Советы по построению информационной архитектуры»
xx Бланк: «Проектная документация»
xx Раздел: «Принципы и нормы авторского права»
xx Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6»
xx Раздел по программе Adobe Fireworks: «Создание каркасов»
xx Файл: Russia_GRing_comp_1.fw.png
xx Файл: Russia_GRing_comp_2.fw.png
xx Файл: Russia_GRing_comp_3.fw.png
xx Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
xx Презентация «Раскадровки»
xx Бланк «Производственная раскадровка»
xx Файл: prototype-export.zip
xx Раздел по программе Adobe Fireworks: «Создание прототипов»

Дополнительные ресурсы
xx Технические данные и контент
xx Ключевые термины
Цифровой дизайн: основы веб-дизайна  207

xx Стандарты для учащихся ISTE NETS*S


xx Программа Adobe Certified Associate, экзамен «Сетевые коммуникации с использовани-
ем Adobe Dreamweaver CS6»

Этапы проекта
1. Познакомьте учащихся с целями проекта.
xx Анализ целей, аудитории, юзабилити и доступности веб-сайтов
xx Составление плана веб-проекта и работа с клиентом
xx Создание структуры информационной архитектуры и каркасов
xx Создание композиций дизайна, раскадровок и прототипов проекта

Анализ веб-сайтов
(Рекомендуемое время: 50–100 минут)
2. Вспомните с учащимся обсуждение принципов дизайна и анализ дизайна веб-сайтов из
Проекта 1. Объясните, что теперь они будут рассматривать веб-сайты, чтобы определить их
цели, юзабилити и доступность. Продемонстрируйте учащимся несколько различных веб-
сайтов и помогите определить, как каждый служит определенной цели и каковы его функ-
ции. Рассмотрите следующие вопросы:
xx Какова цель сайта?
xx Каковы его функции?
xx Кто представляет собой аудиторию?
xx Кто создал веб-сайт?
xx Как аудитория просматривает веб-сайт? На настольном компьютере или ноутбуке? На
мобильных устройствах (планшетных компьютерах или смартфонах)?
3. Продемонстрируйте учащимся веб-сайты, содержащие мультимедийные объекты и об-
судите, как дизайнеры используют их для улучшения опыта взаимодействия пользователей
с сайтом. Обсудите, как устройство, на котором посетители просматривают сайт, будет вли-
ять на использование мультимедийных объектов и какие элементы вы могли бы включить в
контент и дизайн сайта. Можно обсудить следующее:
xx Навигационные системы
xx Интегрированный интерфейс пользователя
xx Анимированные экранные элементы
xx Многофункциональная интерактивная реклама
xx Социальные медиа
Примечание. Многофункциональная интерактивная реклама представляет собой сочетание графи-
ки с видео, звуком или анимацией. В качестве примера можно привести баннерную рекламу.

4. Объясните, что следовать принципам дизайна важно, но в дополнение этому, удобные


для пользователей веб-сайты также используют соответствующую навигацию и придержи-
208  Проект 2. Веб-дизайн и планирование

ваются стандартов юзабилити. Продемонстрируйте учащимся несколько веб-сайтов и обсу-


дите следующие вопросы:
xx Какие категории информации вы нашли на сайтах?
xx Где эти категории находятся?
xx Что можно сказать о количестве информации, содержащейся в отдельно взятом разделе?
На сайте в целом?
xx Какого типа навигация присутствует на страницах? Согласована ли она?
xx Какие варианты предоставляет пользователю навигация?
xx Как дизайн помогает добиться согласованности?
xx Выглядит ли сайт внешне согласованным?
xx Встречаются ли одни и те же элементы дизайна на всех страницах?
xx Какие элементы страницы указывают на специфику веб-сайта?
xx Назовите преимущества согласованности, такие как повышение юзабилити.
xx Выглядит ли сайт одинаково на различных устройствах и при разных разрешениях
экрана?
Раздел: «Дизайн с учетом юзабилити»
Презентация: «Веб-дизайн для различных устройств»
Примечание. Для обсуждения юзабилити вы можете использовать информацию со следующих веб-
сайтов: www.usability.gov и www.useit.com.

5. Обсудите проблему доступности и почему это одинаково важно и для посетителей, и


для спонсоров сайта. Рассмотрите вспомогательные технологии такие, как экранные дикто-
ры, замещающий текст и субтитры, а также доступная навигация. Расскажите о руководстве
по обеспечению доступности веб-контента (WCAG 2.0) с помощью демонстраций консорци-
ума W3C, показывающих, как был повышен уровень доступности веб-сайтов: www.w3.org/
WAI/demos/bad/.
Раздел по программе Adobe Dreamweaver: «Обеспечение доступности веб-сайтов»
Примечание. Вы можете также использовать информацию сервиса Adobe Accessibility Resource
Center и консорциума W3C, чтобы организовать обсуждение: www.adobe.com/accessibility/,
www.w3.org/WAI/eval/Overview.html, www.w3.org/TR/WCAG10/full-checklist.html, www.webaim.org/
articles/pour/ и http://www.w3.org/WAI/intro/aria.

6. Поделите учащихся на пары и предоставьте каждой паре два веб-сайта, посвященных


одной и той же теме и имеющих схожие цели, чтобы учащиеся могли сравнить степень про-
стоты использования и доступности этих сайтов. Выберите темы, представляющие интерес
для учащихся, например:
xx Спорт: www.fifa.com, www.ussoccer.com и www.wnba.com
xx Безопасное вождение: www.nhtsa.gov/Driving+Safety и www.crashprevention.org
xx Рак кожи: www.melanoma.com и www.maui.net/~southsky/introto.html
Цифровой дизайн: основы веб-дизайна  209

7. Поделите учащихся на пары и предоставьте каждой паре два веб-сайта, посвященных


одной и той же теме и имеющих схожие цели, чтобы учащиеся могли сравнить степень про-
стоты в использовании и доступности этих сайтов. Выберите темы, представляющие интерес
для учащихся, например:
xx Какие типы элементов навигации используются: меню, гиперссылки, изображения, что-
то еще?
xx При перемещении по сайту, сколько щелчков мышью в среднем приходится сделать, что-
бы найти нужную информацию?
xx При перемещении по веб-сайту вы находите ту информацию, которую ожидали?
xx Понятна ли структура сайта?
xx Сколько времени требуется для загрузки страниц? (Обычно посетители ждут три-пять
секунд и если страница не загружается, переходят на другую).
xx Отображается ли веб-сайт одинаково в разных браузерах, в разных операционных систе-
мах и на различных устройствах?
xx Легко ли читается текст? Отформатирован ли текст в одном стиле? Если так, то помога-
ет ли стиль достичь общей цели веб-сайта?
xx Каким образом текст, навигация и структура упрощают или усложняют посетителям ра-
боту с веб-сайтом?
xx Присутствуют ли на веб-сайте четкие названия, заголовки или другие визуальные эле-
менты, помогающие организовать информацию?
xx Присутствуют ли на веб-сайте мультимедийные элементы? Способствуют ли они дости-
жению цели сайта или наоборот?
xx Является ли контраст цвета и яркость между передним и задним планом приемлемым
для пользователей с ослабленным зрением?
Бланк: «Юзабилити и доступность»
8. Попросите учащихся вернуться к их двум веб-сайтам и оценить степень их доступности
так же, как они оценивали юзабилити, от простого к сложному. Наводящие вопросы могут
быть следующими:
xx Предоставлен ли замещающий текст к изображениям, чтобы экранные дикторы могли
считывать текстовые описания?
x x Все ли ссылки (включая встроенные) выделены так, чтобы они были хорошо за-
метны?
xx Если на веб-сайте присутствуют таблицы, имеются ли к ним заголовки?
xx Содержатся ли на сайте четкие заголовки и названия, способные помочь организовать
информацию для тех, кто пользуется экранным диктором?
xx Удобно ли расположена схема навигации для тех, кто пользуется экранным диктором?
xx Может ли посетитель сайта использовать клавишу Tab для доступа ко всем элементам
на странице/веб-сайте?
xx Важные элементы выделяются только с помощью цвета?
Бланк: «Юзабилити и доступность»
210  Проект 2. Веб-дизайн и планирование

Определение веб-проекта
(Рекомендуемое время: 150–250 минут)
9. Познакомьте с проектом, указав информацию об организации-клиенте, например:
xx Название организации
xx Миссия и цели организации
xx Продукт или услуга, предоставляемая организацией и объяснение того, как она работает
xx Возникновение и история организации
xx Почему организация ищет команду веб-дизайнеров
10. Напомните учащимся об этапах создания веб-проекта, рассмотренных в Проекте 1 и
заново изучите каждый этап и задачу.
Этапы разработки веб-проекта
xx Определить:
xx Цели, целевую аудиторию, контент и требования к готовому проекту.
xx План проекта.
xx Создание контента
xx Структура:
xx Информационная архитектура и проектная документация.
xx Блок-схемы для отображения общей структуры веб-сайта.
xx Каркасы для закрепления основной структуры страниц веб-сайта.
xx Дизайн:
xx Дизайн композиций для создания подробных альтернативных вариантов дизайна.
xx Рецензирование композиций с клиентом для выяснения его предпочтений относи-
тельно дизайна.
xx Редизайн после получения отзывов от клиента.
xx Создание раскадровки.
xx Создание прототипа.
xx Сборка и тестирование:
xx Создание сайта на основе раскадровки.
xx Техническая проверка и тестирование юзабилити, ведение записи ошибок и требова-
ний по изменению дизайна.
xx Пересмотр с учетом результатов тестов.
xx Техническая проверка и тестирование юзабилити переделанного веб-сайта.
xx Финальная презентация для клиента и окончательная редакция
xx Запуск:
xx План запуска
Презентация: «Этапы разработки веб-проекта»
Цифровой дизайн: основы веб-дизайна  211

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


команды так, чтобы навыки умения членов команды были взаимодополняющими, напри-
мер, навыки визуального дизайна, технические способности и умение управлять проектом.
Обсудить концепцию работы в команде.
12. Познакомьте учащихся с концепцией создания текстов для Всемирной паутины. Объяс-
ните, что, в зависимости от проекта, иногда клиент предоставляет контент, а иногда ожидает,
что дизайнер сам подберет контент и сделает его пригодным для размещения во Всемирной
паутине. В любом случае, обзор общих правил написания текстов для Всемирной паутины
поможет дать совет клиенту и/или объяснить, как создается и представляется контент.
Презентация: «Копирайтинг для Всемирной паутины»
Примечание. Для этого проекта мы рекомендуем запросить у клиента контент веб-сайта. Учащиеся
будут практиковаться писать собственный веб-контент в Проекте 4. Если не требуется выполнять
Проект 4, пусть учащиеся выполнят инструкции по созданию текста в этом проекте.

13. Готовясь к интервью с клиентом, обсудите, какого рода информацию необходимо по-
лучить от него команде дизайнеров, относительно целей и целевой аудитории. Помогите
учащимся установить критерии для определения, имеет ли контент отношение к цели сайта
и подходит ли для целевой аудитории. Попросите учащихся провести интервью с клиентом.
Бланк: «Интервью с клиентом»
Примечание. Для этого проекта командам учащихся рекомендуется создавать веб-сайт с нуля.
Однако они также могут переделать существующий веб-сайт клиента. В этом случае вместо бланка
«Интервью с клиентом» используйте бланк «Рецензирование дизайна».

Бланк: «Рецензирование дизайна»


14. После интервью, команды должны просмотреть веб-сайты, рекомендованные клиен-
том. Поощряйте команды к сбору потенциальных активов и дизайнерских идей в процессе
изучения этих сайтов.
15. Попросите команды организовать и описать их контент. Пусть подумают, какие техни-
ческие средства можно использовать для передачи контента клиента, например, веб-формы,
мини-приложения, ролловеры, всплывающие меню, анимации, мультимедийные объекты,
видеоролики или подготовка фотографий.
16. Познакомьте учащихся и обсудите с ними технологии Adobe Flash, JavaScript, CSS3 и
другие инструменты для создания многофункционального интерактивного контента и при-
емы работы с ними. Обсудите и проанализируйте с учащимися, какие виды многофункцио-
нального контента они могут действительно создать для клиентских веб-сайтов.
17. Еще раз обсудите этапы создания веб-сайта в контексте разработки клиентского веб-
сайта. Вопросы для обсуждения могут включать следующие:
xx Когда веб-сайт клиента будет полностью готов?
xx Разумные сроки для выполнения каждого этапа
xx Установка сроков
212  Проект 2. Веб-дизайн и планирование

xx Назначение исполнителей для каждой задачи из списка


xx Ответственность исполнителей, в частности, кто отвечает за выполнение задачи, неза-
висимо от того, кто фактически над ней работает.
18. Попросите учащихся составить план проекта для распределения задач по фазам про-
екта.
Бланк: «План проекта».

Структура веб-проекта
(Рекомендуемое время: 150–250 минут)
19. Познакомьте учащихся с информационной архитектурой. Некоторые основные мо-
менты:
xx Изучите потребности аудитории и пользователей.
xx Определите, каковы цели и аудитория: кем являются посетители, почему они приходят
на сайт, каковы цели сайта, и так далее.
xx Определите, Организация контента путем определения информационной структуры
сайта (одна страница, плоская структура, классификационная страница, цепочка, стро-
гая иерархия, сосуществующая иерархия).
xx Соберите контент для сайта и проведите его инвентаризацию.
xx Создайте блок-схему сайта.
xx Определите системы навигации (глобальная, локальная, полезные ссылки).
Презентация: «Информационная архитектура».
Раздел: «Советы по построению информационной архитектуры».
20. Обсудите, как блок-схема передает организацию информацию. Объясните структуру
блок-схемы. Обсудите определение главной страницы. Подчеркните, что главная страни-
ца – это страница по умолчанию, которая открывается в браузере, если посетитель явно не
указывает другую страницу. Упомяните о том, что главной иногда называют страницу меню,
поскольку она обычно содержит основные ссылки меню для первого набора страниц контен-
та. Некоторые из этих первых страниц контента могут содержать подменю с навигацией на
другие страницы контента.
21. Попросите команды составить блок-схему клиентского веб-сайта.
Примечание. Учащимся предлагается несколько способов построения блок-схемы. Ее можно на-
рисовать от руки, применить программы для визуального дизайна, например, Inspiration (Inspiration
Software), или использовать инструментарий организационных диаграмм в программе Microsoft
PowerPoint или Microsoft Word.

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


веб-сайтам. Наводящие вопросы могут быть следующими:
xx Какой шрифт вы используете для названий или заголовков страниц контента?
xx Какие цвета вы используете для названий или заголовков страниц контента?
Цифровой дизайн: основы веб-дизайна  213

xx Какой шрифт вы используете для описаний на страницах контента?


xx Какого цвета будет используемый шрифт описания?
xx Где на странице вы расположите панель навигации?
xx Какой контент будет содержать панель навигации?
xx Будет ли панель навигации расположена на каждой странице?
xx Будет ли на каждой странице расположена текстовая навигация?
xx Как панель навигации и текстовая навигация помогут посетителям узнать, на какой
странице они находятся?
xx Есть ли у клиента логотип или другие элементы дизайна, которые могли бы лечь в ос-
нову дизайна?
23. Познакомьте учащихся с концепцией проектной документации, обратив внимание на
разделы, которые учащимся необходимо будет включить, описав вкратце каждый раздел:
xx Обзор проекта: Перечислите проблемы, с которыми можно столкнуться при создании
сайта и возможные их решения. Учащиеся могут также добавить примеры других сайтов,
эффективно справляющихся с этими проблемами.
xx Цели, задачи и сообщения: Список целей, задач и сообщений веб-сайта.
xx Аудитория: Составьте краткое описание целевой аудитории для этого сайта.
xx Требования выпуска: Перечислите требования финальной версии сайта (какие браузеры
и устройства должны его поддерживать и какова минимальная скорость соединения). Не
забудьте включить любые ограничения, налагаемые на контент сайта при выпуске.
xx Контент сайта: Проведите инвентаризацию главной страницы и страницы контента,
включая стандартные структуры на страницах. Обязательно укажите, что необходимо
использовать таблицы, заголовки и отступы для поддержания согласованности структу-
ры и иерархии страниц.
xx Структура сайта: Нарисуйте блок-схему сайта, чтобы проиллюстрировать информаци-
онную архитектуру.
xx Визуальный дизайн: Включите, по крайней мере, два примера цвета и шрифтов.
Бланк: «Проектная документация».
24. Команды должны составить проектную документацию, используя свои выводы, сде-
ланные после интервью с клиентом и знания из области информационной архитектуры и
юзабилити.
Примечание. Убедитесь, что учащиеся знают, какие материалы из тех, что они планируют добавить
на сайт, защищены авторским правом. Попросите их в разделе контента в проектной документации
указать все материалы, защищенные авторским правом, которые они планируют включить, а также
стратегию приобретения разрешения на использование таких материалов.

Раздел: «Принципы и нормы авторского права».


25. Напомните учащимся о каркасе, который они создали в Проекте 1. Кратко рассмо-
трите принципы дизайна, применяемые при создании каркаса, и почему каркасы важны
при создании дизайна сайта. Обсудите, как будет меняться макет веб-страницы и дизайн в
214  Проект 2. Веб-дизайн и планирование

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


Попросите учащихся завершить создание каркаса главной страницы их веб-сайта и любых
последующих главных страниц с помощью программы Adobe Fireworks. Им необходимо рас-
смотреть следующие вопросы:
xx Выбор графики и размещение
xx Выбор текста и размещение
xx Выбор навигации и размещение (для графической и текстовой панелей навигации)
xx Выбор цветовой гаммы
xx Четкая визуальная иерархия
xx Ограничения, накладываемые на дизайн требованиями выпуска
xx Несколько вариантов дизайна для различных устройств с экранами разных размеров.
Раздел по программе Adobe Fireworks: «Обзор рабочего пространства программы Adobe
Fireworks CS6».
Раздел по программе Adobe Fireworks: «Создание каркасов».
Примечание. Если вы не изучали Проект 1, вы можете вернуться к нему, так как в нем описаны бо-
лее подробные шаги, объясняющие функции каркаса и как использовать программу Adobe Fireworks
для создания каркасов.

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

26. Попросите учащихся представить их проектную документацию (в том числе блок-


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

Разработка веб-проекта
(Рекомендуемое время: 200–300 минут)
28. Напомните учащимся о композиции дизайна, которую они создали для своего мини-
приложения в Проекте 1. Объясните, что теперь они будут создавать композицию дизайна
для клиентского веб-сайта, используя каркас. Продемонстрируйте несколько примеров ком-
позиций дизайна.
Файл: GG_Bridge-rough_comp_1.fw.png
Файл: GG_Bridge-rough_comp_2.fw.png
Файл: GG_Bridge-rough_comp_3.fw.png
Цифровой дизайн: основы веб-дизайна  215

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

29. Попросите каждую команду подготовить не менее двух композиций дизайна главной
страницы и примера страницы контента с помощью программы Adobe Fireworks. Поощряй-
те команды создавать композиции дизайна, демонстрирующие страницы с различных точек
зрения, но напомните им учитывать значение согласованности между главной страницей
и страницей контента. Если командой подготовлено несколько каркасов для различных
устройств просмотра, следует создать композицию дизайна для каждого каркаса.
Раздел по программе Adobe Fireworks: «Создание композиций дизайна»
Примечание. Учащимся рекомендуется создавать цветовые палитры с помощью ресурса Adobe
Kuler (kuler.adobe.com).

30. После того, как учащиеся завершат создание композиций дизайна, попросите каждую
команду выбрать по две своих лучших композиций дизайна главной страницы и страницы
контента для демонстрации клиенту.
31. Попросите учащихся, подготовить презентацию для клиента, содержащую некоторые
или все перечисленные ниже элементы:
xx Пояснение, как две их композиции дизайна реализуют цели клиента, его аудитории и
учитывают его требования к контенту.
xx Снимки образцов цветов, шрифтов и страниц с объяснением причин создания такого
дизайна, макета страницы и вариантов навигации.
xx Диалог, во время которого команда получает отзывы клиента.
32. Попросите клиентов предоставить отзывы каждой команде. На этом этапе каждая ко-
манда просит своих клиентов выбрать образцы цвета, шрифтов, а также предпочитаемые
визуальные макеты, указав изменения, которые, по их мнению, необходимо внести. (Если в
роли клиента выступает человек со стороны, преподаватель может быть посредником во вре-
мя диалогов, чтобы помочь команде вести записи требуемых изменений.) Команды должны
активно воспринимать отзывы клиентов и выполнять следующие действия:
xx Делать заметки.
xx Обобщить то, что они услышали от клиента на основе своих заметок.
xx Задать уточняющие вопросы, например:
xx Можете ли вы назвать примеры веб-сайтов, которые решили эту проблему?
xx Как вы решаете эту проблему?
xx Станет ли это решением проблемы?
33. Попросите команды пересмотреть композиции дизайна с учетом отзывов клиента и
представить композиции клиенту повторно. Попросите учащихся добиться от клиента одо-
брения окончательного варианта образцов цвета и шрифта, макетов страниц и системы на-
вигации. Учащиеся должны внести эти элементы в проектной документации перед тем, как
приступать к разработке. Команды могут начать добавлять окончательные варианты графи-
ки и контента по мере того, как будут одобрены части композиций.
216  Проект 2. Веб-дизайн и планирование

34. Введите понятие раскадровки следующим образом:


xx Обычно раскадровки используют при создании фильмов или мультфильмов, чтобы изо-
бразить то, что происходит в сюжете. Раскадровка включает в себя рисунки последо-
вательности действий по сценам, ракурсы камеры, фон и т.д. Как следует из названия,
предназначение раскадровки — визуальное повествование, достаточно подробное для
того, чтобы съемочная группа могла понять, что они будут снимать.
xx Графическая раскадровка демонстрирует все элементы графики, указывая размер, рас-
положение, цвет и шрифт.
xx Раскадровка веб-сайта может пройти через несколько итераций перед тем, как будет за-
пущен процесс разработки сайта.
xx Сначала создайте эскизы, чтобы передать общую картину и основную структуру сайта,
так что все члены команды могли понять масштабы проекта. Превратите эти грубые на-
броски в готовые композиции, которыми вы сможете использоваться совместно с други-
ми отделами организации или клиентом со стороны.
Презентация «Раскадровки».
35. Помогите учащимся подготовиться к созданию собственной раскадровки. Продемон-
стрируйте им образцы раскадровок веб-сайтов и опишите требуемый уровень детализации.
Можно даже использовать композицию дизайна одной из команд для создания примера рас-
кадровки страницы. Убедитесь, что учащиеся понимают, что их раскадровки — это то, как
они передают макет страницы, а также шрифты и цветовые решения, другим членам коман-
ды, поэтому у раскадровок должен быть высокий уровень детализации.
Бланк: «Производственная раскадровка».
36. Для создания раскадровок всех страниц своих веб-сайтов командам следует использо-
вать бланк «Производственная раскадровка». Раскадровка должна включать в себя следую-
щие элементы для каждой страницы сайта:
xx Название сайта
xx Заголовок страницы
xx Название документа
xx Каркас (макет)
xx Фон
xx Текст заголовков (спецификации шрифтов, размеры шрифтов, стили, границы, поля, вы-
равнивание, отступы и цвета)
xx Текст абзаца (спецификации шрифтов, размеры шрифтов, стили, границы, поля, вырав-
нивание, отступы и цвета)
xx Описание всех текстов, графики, Flash и видеороликов, в том числе порядок, в котором
эти элементы отображаются
xx Кнопки, ссылки, и их назначения
xx Графика, видео или Flash-ролики, необходимые для размещения на странице
37. Обсудите, как каркасы, композиции дизайна и раскадровки приводят к созданию про-
тотипа. Кратко объясните следующее:
Цифровой дизайн: основы веб-дизайна  217

xx Прототип — это частично функциональная веб-страница, предоставляющая реалистич-


ное изображение того, как будет выглядеть и, как будет работать сайт.
xx Учащиеся могут объединить каркасы с композициями дизайна в программе Adobe
Fireworks, чтобы сделать подробный и всеобъемлющий прототип для предварительной
демонстрации клиенту.
xx Прототипы, созданные в программе Adobe Fireworks, также можно экспортировать в
файлы HTML и CSS, которые можно открыть в программе Adobe Dreamweaver, чтобы
просмотреть сайт в веб-браузере.
38. Применив метод «я делаю, мы делаем, вы делаете» продемонстрируйте, как совместить
каркас с композицией дизайна сайта для создания прототипа. Продемонстрируйте, как экс-
портировать прототип в форматы HTML и CSS файлов.
Файл: prototype-export.zip
Раздел по программе Adobe Fireworks: «Создание прототипов»
39. Предоставьте командам время на то, чтобы разработать прототип главной страницы и
нескольких страниц контента на основе их раскадровок.
40. Команды должны представить прототип на утверждение клиенту при подготовке к тех-
нической разработке сайта. Предоставьте время для внесения необходимых изменений на
основе отзывов клиента.

Дополнительные задания
Проект можно дополнить следующими заданиями:
xx Создать карту существующего сайта: Чтобы помочь учащимся понять, что такое блок-
схема, дайте им задание составить блок-схему простого веб-сайта, найденного во Все-
мирной паутине. Например, они нарисуют страницы, связанные ссылками с главной, а
потом страницы, связанные ссылками друг с другом. Переходя по ссылкам, учащиеся
начнут понимать, как блок-схема связана с готовым сайтом и им будет проще создавать
собственные блок-схемы.
xx Контрольные точки: Чтобы помочь учащимся правильно распределить время в ходе
длительных проектов, вы можете добавить контрольные точки, задающие промежуточ-
ные сроки выполнения в рамках более крупного проекта. Для этого вам, возможно, по-
требуется провести дискуссию в аудитории, чтобы определить сроки выполнения каж-
дого раздела проектной документации. Разделы могут быть следующими:
xx Цели, задачи и сообщения сайта
xx Аудитория
xx Цели редизайна
xx Технические характеристики
xx Контент сайта
xx Структура сайта
xx Визуальный дизайн
218  Проект 2. Веб-дизайн и планирование

xx Профессиональный дизайнер: Можно попросить профессионального дизайнера расска-


зать учащимся о создании проектной документации, объяснить, как она помогает при
разработке и общении с клиентом.
xx Каскадные таблицы стилей: Чтобы предоставить учащимся больше сведений о каскад-
ных таблицах стилей, организуйте их (учащихся) группы, которым нужно будет подроб-
нее изучить данную тему и представить результаты аудитории.
Темы могут быть следующие:
xx Появление CSS
xx Действующие стандарты по CSS Консорциума W3C
xx Преимущества использования CSS

Оценка
xx По нескольким критериям, представленным далее в разделе «Критерии оценки».

Дополнительные ресурсы
xx Обзор пошаговых инструкций для учащихся, приведенных в этом проекте.
xx Видеоуроки, ориентированные на навыки, необходимые для выполнения этого проекта,
можно найти на сайте Adobe TV по адресу tv.adobe.com/show/digital-design-cs6/.
xx Дополнительные учебные ресурсы по веб-дизайну, планированию и другим темам этого
проекта можно найти по адресу edexchange.adobe.com.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Fireworks можно найти в справочных материалах программы.
xx Обзор интерфейса и дополнительную информацию по техническим аспектам Adobe
Dreamweaver можно найти в справочных материалах программы.
xx Приемы управления веб-проектами (раздел «Define»): www.adobe.com/resources/techniques/.
xx Пособие по информационной архитектуре: www.webmonkey.com/2010/02/information_
architecture_tutorial/

Юзабилити и доступность
xx Сайт Accessibility Resource Center: www.adobe.com/accessibility/
xx Сайт Консорциума W3C: www.w3.org/WAI/eval/Overview.html
xx Контрольная таблица доступности Консорциума W3C: www.w3.org/TR/WCAG10/full-
checklist.html
xx Принципы W3C для создания доступного сайта: www.webaim.org/articles/pour/
xx Основной источник по теме юзабилити и ориентированного на пользователя дизайна:
www.usability.gov
xx Сайт Якоба Нильсена, посвященный юзабилити: www.useit.com
Цифровой дизайн: основы веб-дизайна  219

xx Таблица проверки юзабилити веб-сайтов: www.ddj.com/184412660


xx ГОСТ Р 52872-2007. Интернет-ресурсы. Требования доступности для инвалидов по зре-
нию: www.ifap.ru/library/gost/528722007.pdf

Каркасы
xx Бесплатный набор шаблонов каркасов для программы Adobe Fireworks, содержащих
различные элементы пользовательского интерфейса: www.dragnet.se/webbdesign/
websitewireframes.html
xx Adobe Proto, сенсорное приложение для создания интерактивных каркасов, прототипов
веб-сайтов и мобильных приложений на планшете: www.adobe.com/products/proto.edu.
html
xx Sqetch, инструментарий программы Adobe Illustrator, содержащий ряд шаблонов и эле-
ментов: www.eleqtriq.com/2010/08/sqetch-wireframe-toolkit/

Клиенты
xx Ресурс, описывающий творческие подходы к проблеме поиска клиентов для учебных
проектов: edexchange.adobe.com/posts/b6fde4a10e
xx Опросник клиентов в формате Microsoft Word: www.adobe.com/resources/techniques/
resources/define/client_survey.rtf

Проектная документация
xx Иллюстрация процесса подготовки проектной документации: cat.xula.edu/tutorials/
planning/designdoc

Ключевые понятия
xx Аудитория
xx Блок-схема
xx Взаимодействие с клиентами
xx Информационная архитектура
xx Каркас
xx Композиция дизайна
xx Навигация
xx План проекта
xx Предназначение
xx Проектная документация
xx Производственная раскадровка
xx Рецензирование дизайна
220  Проект 2. Веб-дизайн и планирование

Стандарт ISTE NETS*S для учащихся


Этот проект соответствует технологическим стандартам ISTE NETS*S. В зависимости от
тематики и содержания, которые выбирает учащийся, вы можете изучить стандарты, при-
нятые в вашем государстве.
1. Творчество и инновации.
Учащиеся демонстрируют творческое мышление, исследовательские подходы и разрабаты-
вают инновационные продукты и процессы с использованием технологии. Учащиеся:
а. Применяют имеющиеся знания для получения новых идей, продуктов или процессов;
б. Создают оригинальные произведения как средство выражения личности или группы.
2. Коммуникации и сотрудничество.
Учащиеся используют цифровые средства и среды для общения и коллективной работы, в
том числе на расстоянии, поддержки индивидуального обучения и возможности обучения
других. Учащиеся:
а. Взаимодействуют, сотрудничают и работают со сверстниками, экспертами или другими
участниками, используя различные цифровые среды и средства.
б. Эффективно распространяют информацию и идеи для разных аудиторий с использова-
нием различных средств и форматов.
г. Участвуют в проектных группах для создания оригинальных произведений или реше-
ния проблем
3. Исследования и информационная компетентность.
Учащиеся умеют применять цифровые инструменты для сбора, оценки и использования ин-
формации. Учащиеся:
б. Находят, организовывают, анализируют, оценивают, обобщают и используют информа-
цию из различных источников и сред
в. Оценивают и отбирают источники информации и цифровые средства на основе целесо-
образности для конкретных задач.
4. Критическое мышление, решение проблем и принятие решений.
Учащиеся используют умение критически мыслить для планирования и проведения науч-
ных исследований, управления проектами, решения проблем и принятия обоснованных ре-
шений, используя соответствующие цифровые инструменты и ресурсы. Учащиеся:
б. Планируют и управляют деятельностью по разработке решения или выполнения проекта.
г. Используют различные процессы и перспективы для исследования альтернативных ре-
шений.
5. Цифровое гражданство.
Учащиеся понимают гуманитарные, культурные и социальные вопросы, связанные с инфор-
мационными технологиями и практикой легального и этичного поведения. Учащиеся:
Цифровой дизайн: основы веб-дизайна  221

а. Заявляют и практикуют безопасное, правовое и ответственное использование инфор-


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

Программа сертификации Adobe Certified Associate,


экзамен «Сетевые коммуникации с использованием
Adobe Dreamweaver CS6»
1.1. Формулирование основных задач веб-сайта, определение целевой аудитории и ее по-
требностей.
1.2. Выбор веб-контента, соответствующего назначению веб-сайта и требованиям целевой
аудитории.
1.3. Демонстрация знания стандартных требований к защите авторских прав (связанные тер-
мины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.5. Принятие решений о создании веб-сайта на основе собственного анализа и имеющихся
технических требований.
1.6. Осведомленность в принципах управления проектами.
2.1. Демонстрация знания рекомендаций, общих и относящихся к Dreamweaver, в отноше-
нии проектирования веб-сайтов, таких как поддержка согласованности, отделение содержи-
мого от проекта, использование стандартных шрифтов и визуальной иерархии.
2.2. Создание проектов веб-сайтов, полностью совместимых с различными операционными
системами, версиями и конфигурациями веб-браузеров и устройствами.
2.3. Демонстрация знаний основных принципов разработки макетов страниц.
2.4. Определение ключевых принципов создания удобного, доступного веб-сайта, содержа-
щего понятный и разборчивый текст.
2.5. Демонстрация знания блок-схем, раскадровок и каркасных методов изображения объ-
ектов для создания веб-страниц и карты сайта (индекса сайта), которые поддерживают за-
планированную иерархию веб-сайта.
2.6. Обмен информацией с другими специалистами (например, коллегами и клиентами) о
планах по проектированию.
222  Проект 2. Веб-дизайн и планирование

Критерии оценки
0 — Результат
3 — Результат соответствует 5 — Результат превосходит
не соответствует
ожиданиям ожидания
ожиданиям
Интервью с Отсутствует В ходе интервью выясня- В ходе интервью четко опреде-
клиентом или не завер- ются цели клиента, целевая ляются цели клиента, целевая
шено аудитория и предполагаемое аудитория и предполагаемое
предназначение веб-сайта. предназначение веб-сайта. В
В ходе интервью определя- ходе интервью четко определя-
ются контент и информа- ются контент (оригинальный
ция, имеющие решающее и повторно используемый) и
значение для веб-сайта, информация, имеющие реша-
устанавливаются требова- ющее значение для веб-сайта,
ния и пожелания клиента по устанавливаются требования и
дизайну и задаются допол- пожелания клиента по дизайну и
нительные важные вопросы. записываются конкретные при-
меры. Также задаются допол-
нительные важные и тщательно
продуманные вопросы, нацелен-
ные на получение или проясне-
ние конкретной информации.
План проекта Отсутствует Учащиеся установили Учащиеся установили контроль-
или не завершен контрольные точки, распре- ные точки, содержащие деталь-
делили задания, загружая в ное описание заданий, распреде-
равной степени всех членов лили задания, загружая в равной
команды, и назначили степени всех членов команды,
финальные сроки, чтобы и назначили конечные сроки,
распланировать каждый чтобы распланировать каждый
этап проекта. этап проекта.
Проектная Отсутствует Проектная документация Проектная документация со-
документация или не завер- содержит описание целей держит подробный анализ целей
шена сайта, задач и сообщений; сайта, задач и сообщений; ауди-
аудитории сайта; требова- тории сайта; требования выпу-
ния выпуска; обзор контента ска; обзор контента сайта; блок-
сайта; блок-схему сайта; об- схему сайта; образцы шрифтов
разцы шрифтов и цветов и и цветов и копии визуального
копии визуального дизайна дизайна сайта.
сайта.
Каркас сайта Отсутствует Каркасы созданы для Каркасы созданы для органи-
или не завершен организации контента на зации контента на страницах
страницах на основе прин- на основе принципов дизайна и
ципов дизайна и требований требований к проекту. Обоснова-
к проекту но каждое решение, касающееся
элементов каркаса, приведены
данные и информация, собран-
ная в ходе исследований и обще-
ния с клиентом.
Цифровой дизайн: основы веб-дизайна  223

0 — Результат
3 — Результат соответствует 5 — Результат превосходит
не соответствует
ожиданиям ожидания
ожиданиям
Композиции Отсутствует Композиции дизайна точно Композиции дизайна точно отра-
дизайна веб- или не завер- отражают аудиторию, цели, жают аудиторию, цели, выбор цве-
сайта шены выбор цвета, настроение, та, настроение, изображения, текст
изображения, текст и вы- и выбранный вариант навигации.
бранный вариант навигации. Отобранные композиции отража-
Отобранные композиции от- ют различные подходы к дизайну.
ражают различные подходы Учащиеся могут четко объяснить,
к дизайну. каким образом были применены
принципы дизайна для оказания
влияния на аудиторию.
Раскадровки Отсутствуют Производственные раска- Производственные раскадровки
веб-сайта или не завер- дровки содержат информа- содержат подробную информа-
шены цию о дизайне и структуре цию о дизайне и структуре веб-
веб-сайта и его элементов. сайта и его элементов.
Прототип Отсутствует Созданы прототипы главной Созданы прототипы главной
веб-сайта или не завершен страницы и 1-2 страниц страницы и 2–4 страниц контента
контента на основе карка- на основе каркасов, композиций
сов, композиций дизайна дизайна и раскадровок. Прототи-
и раскадровок. Прототипы пы реалистичны, частично функ-
частично функционируют в ционируют в программе Adobe
программе Adobe Fireworks Fireworks и используют одобрен-
и могут быть экспортирова- ные клиентом цвета, шрифты,
ны в формате HTML и CSS макет страницы и навигацию.
файлов для поддержки про- Прототипы экспортированы в
граммы Adobe Dreamweaver. формате HTML и CSS файлов
для поддержки программы Adobe
Dreamweaver.
Работа в Отсутствует Учащийся сотрудничает с Учащийся сотрудничает с дру-
команде или недоста- другими учащимся и предо- гими учащимся и предоставляет
точна ставляет отзывы и помощь. отзывы и помощь. Выполняет
Выполняет выделенную выделенную ему роль в команде,
ему роль в команде, вносит вносит равный вклад в работу
равный вклад в работу над над проектом. Советуется с дру-
проектом. Иногда советуется гими членами команды, вынося
с другими членами команды, важные решения по проекту,
принимая важные решения по добровольно помогает другим в
проекту, но прилагает лишь развитии определенных навыков
минимальные усилия, чтобы для завершения проекта.
помочь другим в развитии
определенных навыков.
Управление Отсутствует Учащийся выделяет время Учащийся вдумчиво и эффек-
временем или недоста- на все фазы процесса созда- тивно распределяет время на
точно ния и разработки проекта. все фазы процесса создания и
Завершает большинство эта- разработки проекта. Завершает
пов согласно графику. все этапы по графику.
224  Проект 2. Веб-дизайн и планирование

Дизайн с учетом юзабилити


Качество юзабилити во Всемирной паутине определяется как: простота использования, лег-
кость обучения и создание в целом хорошего впечатления у пользователей. Сайт с хорошим
дизайном и удобный в использовании стремится улучшить опыт взаимодействия пользова-
телей, повышая свою эффективность, становясь элегантнее и понятнее. Юзабилити — это со-
четание факторов, к которым относятся дизайн, информационная архитектура, доступность
и поддержка на различных устройствах. Сайт Usability.gov (usability.gov/basics/index.html)
предоставляет список этих важных факторов:
xx Простота в обучении. Как быстро пользователь, который никогда раньше не видел поль-
зовательского интерфейса, сможет освоить его достаточно хорошо, чтобы выполнить ос-
новные задачи?
xx Эффективность использования. Научившись пользоваться системой, как быстро опыт-
ный пользователь сможет выполнить задачи?
xx Запоминаемость. Если пользователь уже встречался с этой системой прежде, может он
или она вспомнить достаточно, чтобы эффективно использовать ее в следующий раз,
или же пользователю придется изучать все заново?
xx Частота и серьезность ошибок. Как часто пользователи делают ошибки при работе с
системой, насколько серьезны эти ошибки, и как пользователи исправляют их?
xx Субъективная удовлетворенность. Насколько пользователю понравилось использовать
систему?
Сравните два примера сайта учебного заведения, показанные на рис. 2.1. Снимки сайта «до» и
«после» демонстрируют разницу между плохим юзабилити, и последующим редизайном сай-
та, благодаря которому опыт взаимодействия пользователей от сайта значительно улучшился.
Планируя контент и навигацию вашего проекта веб-сайта, учитывайте аспекты, описанные
далее.

Рис. 2.1. Пример неудобного для пользователей сайта (слева)


и улучшенный вариант веб-сайта (справа)
Цифровой дизайн: основы веб-дизайна  225

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

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

Ресурсы
Узнайте больше о лучших способах обеспечения юзабилити во Всемирной паутине из этих
ресурсов:
xx usability.gov — основной источник информации о юзабилити и дизайне, ориентирован-
ных на пользователя.
xx www.useit.com — веб-сайт ведущего консультанта по веб-юзабилити Якоба Нильсен.
226  Проект 2. Веб-дизайн и планирование

Обеспечение доступности веб-сайтов


Создавать доступные веб-страницы сегодня важно как никогда. С принятием стандартов до-
ступности в Соединенных Штатах, Канаде, Европейском Союзе, Австралии, Японии и дру-
гих странах, дизайнеры и разработчики должны гарантировать, что люди с ограниченными
возможностями могут получить доступ к контенту веб-сайтов и веб-приложений, а также к
средствам разработки, используемым для их создания.
Доступность означает создание веб-сайтов и веб-продуктов, которыми смогут пользоваться
люди со зрительными, слуховыми, двигательными и иными нарушениями. К числу функ-
ций, повышающих доступность программных продуктов и веб-сайтов, относятся поддержка
экранных дикторов, текстовые эквиваленты изображений, горячие клавиши, изменение цве-
тов на экране на более контрастные и так далее. Программа Adobe Dreamweaver содержит
инструменты, позволяющие создавать доступный контент.
Программа Adobe Dreamweaver позволяет дизайнерам и разработчикам создавать доступ-
ные страницы, которые содержат полезный контент для экранных дикторов и соответствуют
рекомендациям по доступности. Например, при вставке элементов страницы появляются
диалоговые окна, предлагающие вам ввести атрибуты доступности такие, как замещающий
текст для изображений. Затем, когда изображение появится на странице пользователям с
нарушениями зрения, экранный диктор озвучит его описание.
Ни одно средство верстки веб-сайтов не способно автоматизировать процесс разработки.
Для дизайна доступных веб-сайтов необходимо ознакомиться с требованиями к доступно-
сти и принимать текущие решения о том, как пользователи с ограниченными возможностя-
ми смогут взаимодействовать с веб-страницами. Лучший способ гарантировать, что сайт до-
ступен — посредством преднамеренного планирования, разработки, тестирования и оценки.

Варианты настроек доступности


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

Рис. 2.2. Отображение


замещающего текста
Цифровой дизайн: основы веб-дизайна  227

При создании веб-сайтов, дизайнеры часто забывают о функциях, обеспечивающих доступ-


ность сайта для людей с ограниченными возможностями, таких как замещающий текст, но
программа Adobe Dreamweaver CS6 может быть настроена так, чтобы обеспечить доступ-
ность информации при создании страницы. Когда вы будете настраивать параметры в диа-
логовом окне Настройки (Preferences), вам будет предложено предоставить доступную ин-
формацию для веб-форм, фреймов, мультимедийных элементов, изображений и таблиц при
добавлении этих элементов на страницу.
Чтобы установить настройки доступности, выберите команду меню Правка ⇒ Настройки
(Edit ⇒ Preferences) (Windows) или Dreamweaver ⇒ Настройки (Dreamweaver ⇒ Prefer-
ences) (OS X) и выберите категорию Специальные возможности (Accessibility) в диалого-
вом окне Настройки (Preferences) (рис. 2.3).

Рис.2.3. Диалоговое окно Настройки в программе Adobe


Dreamweaver, категория Специальные возможности

Например, если вы установите флажок Изображения (Images), то в диалоговом окне Атри-


буты специальных возможностей тега Image (Image Tag Accessibility Attributes) вам пред-
ложат (рис. 2.4) предоставить замещающий текст и описание для каждого вставляемого изо-
бражения.
Создавать доступные таблицы и формы сложнее, но программа Adobe Dreamweaver CS6
упрощает этот процесс. Например, когда вы добавляете данные в таблицу в программе Ado-
228  Проект 2. Веб-дизайн и планирование

Риc. 2.4. Диалоговое окно Атрибуты специальных возможностей тега Image

be Dreamweaver CS6, вам сразу же предлагается указать в таблице сводку, подпись, и поло-
жение ячеек заголовка (рис. 2.5). Кстати, обозначая ячейки заголовка (важный шаг дизайна,
о котором часто забывают), вы значительно упрощаете пользователям с ограниченными воз-
можностями перемещение по таблицам.
В программе Adobe Dreamweaver CS6 также легко создавать доступные веб-формы. При вы-
боре параметра Объекты формы (Form Objects) в диалоговом окне Настройки (Preferences)
вам будет предложено предоставить метку для каждого объекта формы, а также клавиши
доступа и порядок переключения клавишей Tab (рис. 2.6). Установка этих меток позволяет
посетителям, пользующимся вспомогательными технологиями понять назначение каждого
объекта формы при ее заполнении.

Рис. 2.6. Диалоговое окно Атрибуты специальных


Рис. 2.5. Диалоговое окно Таблица возможностей тегов Input
Цифровой дизайн: основы веб-дизайна  229

Проверка доступности
Существует целый ряд веб-инструментов для оценки доступности, с помощью которых
можно протестировать готовый веб-сайт. Консорциум W3C предоставляет исчерпывающий
перечень этих инструментов на странице www.w3.org/ WAI/RC/tools/.

Доступные шаблоны
Программа Adobe Dreamweaver CS6 включает в себя несколько шаблонов, предназначенных
для обеспечения доступности. Эти шаблоны визуально сбалансированы и доступны для лю-
дей с ограниченными возможностями (рис. 2.7). Они предоставляют вам быстрый и простой
способ создания захватывающего, привлекательного и доступного контента.

Рис. 2.7. Образец HTML-шаблона программы Adobe Dreamweaver

Как удовлетворить требования доступности


В рамках инициативы по обеспечению доступности, Консорциум W3C составил краткий
список требований и техник «Руководство по обеспечению доступности Web-контента»
(Web Content Accessibility Guidelines, (WCAG) 2.0).
1. Текстовые альтернативы: Предоставьте текстовые альтернативы любого нетекстового
контента, чтобы его можно было заменить на другие формы, требующиеся посетителям, на-
пример, крупный шрифт или шрифт Брайля, речь, символы или более простые выражения.
230  Проект 2. Веб-дизайн и планирование

2. Видеоролики: Предоставьте альтернативы для видео элементов.


3. Адаптация: Создавайте контент, который можно будет представить по-разному (напри-
мер, используя более простой макет) без потери информации или структуры.
4. Различаемый контент: Упростите пользователям процесс чтения и прослушивания кон-
тента, включая разделение переднего плана и фона.
5. Доступ с клавиатуры: Сделайте весь функционал доступным с клавиатуры.
6. Достаточно времени: Предоставьте пользователям достаточно времени для чтения и ис-
пользования контента.
7. Эпилепсия: Не разрабатывайте контент, если известно, что он может вызвать эпилептиче-
ский припадок.
8. Удобство навигации: Предоставьте помощь людям в использовании навигации, поиске
контента и ориентировании по сайту.
9. Удобочитаемость: Сделайте текстовый контент легко читаемым и понятным.
10. Предсказуемость: Веб-страницы должны появляться и функционировать предсказуемо.
11. Помощь при вводе информации: Помогите пользователям избежать ошибок и исправить
их.
12. Совместимость: Добейтесь максимальной совместимости с существующими и будущи-
ми программами (агентами) пользователей, в том числе вспомогательными технологиями.

Юзабилити и доступность
Имя учащегося: ______________________________________ Дата: ________________
URL-адрес: ______________________________________________________________
Название сайта: ___________________________________________________________

Юзабилити
Какие типы элементов навигации использованы: кнопки, гиперссылки, изображения или
что-либо другое? Элементы одного или нескольких типов? Опишите каждый тип элементов
навигации.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  231

При навигации по сайту, сколько щелчков мыши обычно требуется, чтобы перейти к нужной
информации?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

При навигации по сайту, получаете ли вы ту информацию, которую предполагали получить?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Является ли очевидной для вас структура сайта?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Сколько времени занимает загрузка страниц?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

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


устройствах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько читабелен текст? Уникален ли стиль текста? Если это так, способствует ли стиль
текста достижению цели сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
232  Проект 2. Веб-дизайн и планирование

Какие элементы визуального контекста используются? Как эти элементы помогают или ме-
шают посетителям сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Используются ли понятные названия, заголовки или другие визуальные элементы, которые


особенно помогают организовать информацию?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Доступность
Снабжены ли изображения замещающим текстом, чтобы экранные дикторы могли прочи-
тать описание?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Все ли ссылки, включая вложенные, помечены, чтобы их можно было легко заметить?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Снабжены ли таблицы заголовками строк или столбцов?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Присутствуют ли на сайте понятные названия и заголовки, помогающие организовать ин-


формацию для посетителей, использующих экранный диктор?
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  233

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

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


вигации?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Является ли цвет единственным элементом используемым для визуального выделения?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Высока ли степень контрастности между элементами переднего плана и фоновыми, а цвета


достаточно яркие для людей с нарушениями зрения?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Интервью с клиентом
Название команды: _____________________________ Дата: ______________________
Имя ответственного: _______________________________________________________

Темы интервью
xx Задачи и целевая аудитория
xx Характеристики аудитории
xx Контент
xx Требования к дизайну
xx Требования выпуска
234  Проект 2. Веб-дизайн и планирование

Задачи и целевая аудитория


Укажите три долгосрочных цели вашего веб-сайта.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

На что должно вдохновить аудиторию посещение веб-сайта?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Укажите несколько ближайших целей веб-сайта.


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Укажите, какую ключевую информацию должны получить посетители сайта.


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Опишите ожидания вашей целевой аудитории в отношении контента.


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  235

Характеристики аудитории
Опишите характеристики целевой аудитории вашего веб-сайта
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Каков возрастной диапазон вашей целевой аудитории?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Каков уровень начитанности вашей целевой аудитории?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Есть ли среди целевой аудитории лица с какими-либо особыми потребностями или ограни-
ченными возможностями?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Как часто ваша целевая аудитория находится онлайн?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Опишите наиболее характерное использование ресурсов Всемирной паутины людьми дан-


ной целевой аудитории.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
236  Проект 2. Веб-дизайн и планирование

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

Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Контент
Каким должно быть название вашего веб-сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Какие темы должны обсуждаться на веб-сайте?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  237

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

Есть ли цвета и шрифты, которые вам не хотелось бы использовать в этом сайте?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Какие веб-сайты вам нравятся? Опишите элементы, которые вам нравятся в каждом из этих
веб-сайтов, например навигацию, цвета, макеты и другие конструктивные части дизайна.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Другие вопросы:
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Требования выпуска
Какие браузеры (а также, какие версии браузеров) должны поддерживать этот веб-сайт?
xx Internet Explorer.
xx Mozilla Firefox
xx Safari
xx Google Chrome
xx Другие
Какие платформы должны поддерживать сайт?
xx Windows
xx OS X
xx Другие
238  Проект 2. Веб-дизайн и планирование

Какими устройствами должен поддерживаться сайт?


xx Смартфоны
xx Планшетные компьютеры
xx Другие

Рецензирование дизайна
Имя учащегося: ____________________________________ Дата: __________________
Название команды: ________________________________________________________
Имя клиента: ____________________________________________________________
URL-адрес сайта клиента: ___________________________________________________

Резюме
После исследования целей и аудитории клиента проведите рецензирование дизайна веб-
сайта:
xx Один из членов команды подытоживает аудиторию, цели и задачи сайта для общего по-
нимания их группой.
xx Команда оценивает качество дизайна сайта, обращая внимание на следующие детали:
xx Согласованность;
xx Простота использования;
xx Цветовые решения;
xx Универсальная навигация;
xx Макет;
xx Ссылки;
xx Юзабилити;
xx Доступность;
xx Дизайн для мобильных устройств.
xx Команда обсуждает предложения по улучшению дизайна сайта.
xx Один из членов команды подводит итоги по качеству сайта.

Согласованность
Какие элементы повторяются на внутренних страницах для удобства идентификации сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  239

Каким образом эти повторения помогают или затрудняют реализацию основных задач сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Посещая сайт, как пользователи узнают, где они находятся, куда они могут перейти, и оста-
ются ли они том же сайте, переходя со страницы на страницу?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько страницы соответствуют веб-стандартам (например, все ли ссылки выделены си-


ним цветом и подчеркиванием)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Универсальная навигация
Где находится основное навигационное меню сайта и насколько согласована навигация на
разных страницах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Как посетители могут вернуться к главной странице с любой другой страницы сайта?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Как пользователи могут отследить свое перемещение по сайту (например, всегда ли есть воз-
можность вернуться на предыдущую страницу)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
240  Проект 2. Веб-дизайн и планирование

Макет
Достаточно ли логично выглядит размещение элементов дизайна на странице или их рас-
положение кажется случайным?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

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


ют их относительной важности?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько часто приходится использовать полосу прокрутки, чтобы найти важные эле-
менты?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько ясно изображения передают информацию, если они есть?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Каким образом изображения придают весомости контенту сайта, или они используются
только для украшения и привлечения внимания?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Каким образом цветовая схема содействует цели и настроению сайта?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Цифровой дизайн: основы веб-дизайна  241

Юзабилити
Насколько понятно подписаны ссылки?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Стоит ли страница времени, потраченного на ожидание ее загрузки?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Как легко посетители находят нужную информацию?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Как легко посетители могут вернуться к основным разделам сайта (и могут ли вообще)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Доступность
Всем ли изображениям создан замещающий текст?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Насколько легко читать и воспринимать текст и заголовки всем посетителям (цвет, размер
и т. д.)?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
242  Проект 2. Веб-дизайн и планирование

Сопровождаются ли ссылки и активные области (карты ссылок) замещающим текстом?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Дизайн для мобильных устройств


Отображается ли веб-сайт должным образом на экранах целевых мобильных устройств?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

Оптимизирован ли контент веб-сайта для размера экрана целевых мобильных устройств?


_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

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


устройствах?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________

План проекта
Название команды: ____________________________________ Дата: _______________
Имя клиента: ____________________________________________________________
Обдумайте этапы проекта и определите необходимое время и конечные сроки выполнения
каждого задания. Для каждого из этапов назначьте исполнителя, который будет нести от-
ветственность за выполнение задания.
Цифровой дизайн: основы веб-дизайна  243

Этапы проекта Необходимое время Дата выполнения Исполнитель


Определение
Цели и целевая аудитория
Подборка контента и активов
(материалов)
Информация о контенте
и стиле
Требования к выпуску
Структура
Информационная архитектура
Проектная документация
Блок-схема
Каркасы
Дизайн
Композиции дизайна
Рецензирование дизайна
Редизайн
Производственная раскадровка
Каркас прототипа
Сборка и тестирование
Разработка сайта
Технический тест и составле-
ние списка ошибок
Тестирование юзабилити
Внесение исправлений
Тестирование исправленного
сайта
Итоговая презентация
Окончательная проверка
Запуск
Поисковая оптимизация (СЕО)
План продвижения
Размещение сайта
во Всемирной паутине
= Конечный срок
Общее время:
исполнения
244  Проект 2. Веб-дизайн и планирование

Советы по построению информационной архитектуры


Информационная архитектура (ИА) — это способ организации и маркировки структуры сайта
для поддержки юзабилити. Тщательное рассмотрение контента и организации сайта – первый
шаг к обеспечению эффективного опыта взаимодействия пользователей. Цель структурирова-
ния, называемого также информационным дизайном — наладить связь пользователей с контентом
и разработать интуитивно понятную организацию информации. Кроме того, информационная
архитектура занимается планированием сайта с функциональной точки зрения для облегчения
взаимодействия клиента и команды. В конечном счете, общая цель заключается в понимании
того, что ищут пользователи и предоставлении легкого доступа к контенту и информации. Это
гарантирует, что пользователи могут получить искомую информацию. Хорошо продуманная ин-
формационная архитектура похожа на оглавление книги. Она помогает ускорить поиск, повы-
сить эффективность, удовлетворенность посетителей, и в целом, юзабилити сайта.

[Информационная архитектура] ... это создание последовательных и функциональных си-


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

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


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

Изучите потребности аудитории и пользователей


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

Определите четкие цели сайта


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

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


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

турировать контент настолько тщательно, чтобы он качественно отображался на самых раз-


ных компьютерах, планшетах и смартфонах.

Поделите контент сайта на логические группы


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

Создайте карту сайта


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

Главная страница

Деятельность Учебное
Учеба О нас заведение Сотрудники
учащихся

Библиотека Спортивные Миссия Преподаватели


секции Новости

Аудитория Клубы Руководство Календарь Администрация

Подразделения Права Персонал


и обязанности Справочник

Расписание Контакты Волонтерам

Карты

Ссылки

Рис. 2.8. Пример карты веб-сайта учебного заведения


246  Проект 2. Веб-дизайн и планирование

Разработайте дизайн систем навигации


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

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

Проектная документация (руководство)


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