Цифровой Дизайн Cs6 - 2012

Оглавление
Обзор курса и подготовка.................................................................................................................... 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: Финальное портфолио
в русском издании нумерация шагов не соблюдена, поэтому залитые ячейки указывают на упоминание
данной программы в соответствующем проекте
Отдельные проекты
В зависимости от уровня вашей квалификации (или учащихся, если вы — преподаватель),
вы можете изучить отдельные проекты из курса «Цифровой дизайн», не следуя в точности
учебному плану. Например, педагог, преподающий курс по разработке игр может обучить
только проекту «Интерактивная игра». Преподаватели могут адаптировать программу об-
учения и использовать технические руководства из предыдущих проектов для преподавания
отдельных проектов.
Будьте креативными!
Используйте курс «Цифровой дизайн» как отправную точку для развития своих собствен-
ных проектов и программ, которые будут адаптированы для обучения в вашем случае. Ис-
пользуя существующие технические руководства, преподаватели могут формировать пол-
ностью завершенные учебные проекты, основанные на конкретных темах, представляющих
интерес. Если вы создаете собственные проекты или учебные программы, пожалуйста, поде-
литесь ими с сообществом 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 Коррекция цвета

Дизайн
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
наилучшего рецензировании
дизайна

Дизайн
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 Кадрирование
дизайн каркасу и и мультимедий- вов, содержащих изображений
прототипу ных объектов не только критику

Дизайн
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 Публикация веб-
файлов

Дизайн
Программа 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 Публикация веб-
файлов

Дизайн
Проект 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
интерактив-
ный контент
для общения

Дизайн
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 Организация сло-
ев и библиотек

Дизайн
Продолжитель- 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 Навыки пре-
зентации
Настройка учебного компьютера

Далее приведена техническая информация, которая необходима для подготовки компьютер-
ного класса или аудитории для работы над учебным курсом «Цифровой дизайн».
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 Гб свободного пространства на жестком диске; дополнительное свободное простран-
ство, необходимое для установки (не устанавливается на диск, для которого использу-
ется файловая система, чувствительная к регистру, или на устройства хранения Flash).
полосное подключение к Интернету и регистрация. Активация посредством телефона
невозможна.
Adobe Photoshop CS6

Установите программу Adobe Photoshop CS6 Extended на всех компьютерах. Системные тре-
бования и процедура установки описаны в руководстве, включенном в комплект поставки
программного обеспечения. Последние сведения о системных требованиях можно найти на
сайте www.adobe.com/ru/products/photoshop/tech-specs.html.
Windows
xx 1 Гб оперативной памяти.
ния Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта с
256 Мб (рекомендуется 512 Мб) видеопамяти.
xx Система с поддержкой спецификации OpenGL 2.0.
*Некоторые функции ускорения GPU не поддерживаются операционной системой Windows XP.
OS X
xx Многоядерный процессор Intel® с 64-разрядной архитектурой.
xx 1 Гб оперативной памяти.
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта с
256 Мб (рекомендуется 512 Мб) видеопамяти.
xx Система с поддержкой спецификации OpenGL 2.0.
Adobe Illustrator CS6

Установите программу Adobe Illustrator CS6 на всех компьютерах. Системные требования и
процедура установки описаны в руководстве, включенном в комплект поставки программ-
ного обеспечения. Последние сведения о системных требованиях можно найти на сайте
www.adobe.com/ru/products/illustrator/tech-specs.html.
Windows
xx 1 Гб оперативной памяти (рекомендуется 3 Гб) — для 32-разрядной версии; 2 Гб опера-
тивной памяти (рекомендуется 8 Гб) — для 64-разрядной версии.
ния Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта.
xx Для некоторых функций программы Adobe Bridge необходимо наличие DirectX 9-со-
вместимой видеокарты с минимум 64 Мб видеопамяти.
OS X
xx Многоядерный процессор Intel® с 64-разрядной архитектурой.
xx 2 Гб свободного пространства на жестком диске; дополнительное свободное про-
странство, необходимое для установки (не устанавливается на диск, для которого
используется файловая система, чувствительная к регистру, или на устройства хра-
нения Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800), 16-разрядная видеокарта.
Adobe Dreamweaver CS6

Установите программу Adobe Dreamweaver CS6 на всех компьютерах. Системные требова-
ния и процедура установки описаны в руководстве, включенном в комплект поставки про-
граммного обеспечения. Последние сведения о системных требованиях можно найти на сай-
те www.adobe.com/ru/products/dreamweaver/tech-specs.html.
Windows
xx 512 Мб оперативной памяти.
ния Flash).
xx Среда Java™ Runtime Environment 1.6 (включена в дистрибутив).
xx Программное обеспечение QuickTime 7.6.6, необходимое для воспроизведения мульти-
медийного контента HTML5.
OS X
xx 1,8 Гб свободного пространства на жестком диске; дополнительное свободное про-
странство, необходимое для установки (не устанавливается на диск, для которого ис-
пользуется файловая система, чувствительная к регистру, или на устройства хранения
Flash).
xx Среда Java™ Runtime Environment 1.6.
медийного контента HTML5.
xx Широкополосное подключение к Интернету, необходимое для использования онлайн-
сервисов.

Adobe Flash Professional CS6

Установите программу Adobe Flash Professional CS6 на всех компьютерах. Системные тре-
бования и процедура установки описаны в руководстве, включенном в комплект поставки
программного обеспечения. Последние сведения о системных требованиях можно найти на
сайте www.adobe.com/ru/products/flash/tech-specs.html.
Windows
xx 3,5 Гб свободного пространства на жестком диске для установки; дополнительное сво-
бодное пространство, необходимое для установки (не устанавливается на устройства
хранения Flash).
xx Разрешение экрана 1024768 (рекомендуется 1280800).
xx Среда Java™ Runtime Environment 1.6 (включена в дистрибутив).
медийного контента.
xx Для использования некоторых функции приложения Adobe Bridge необходимо наличие
видеокарты с поддержкой спецификации DirectX 9 и видеопамятью объемом не менее
64 Мб.
OS X
xx Разрешение экрана 1024768 (рекомендуется 1280800).

xx Среда Java™ Runtime Environment 1.6.
медийного контента.
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 Браузер Safari версии не ниже 5.0, или Mozilla Firefox версии не ниже 4.0, или Google
Chrome, или Opera версии не ниже 11.
xx Видеокарта с видеопамятью объемом не менее 128 Мб.
Улучшение учебного процесса

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

в. Устраняют неполадки в системах и приложениях.
г. Используют имеющиеся знания для изучения новых технологий.
Программа сертификации 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. Создание проектов веб-сайтов, полностью совместимых с различными операционными
системами, версиями и конфигурациями веб-браузеров и устройствами.
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. Создание форм.
Организация контента с помощью 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. Демонстрация знания стандартных требований к защите авторских прав (связанные
термины, получение разрешения и цитирование материала, охраняемого авторским правом).
планах по проектированию и наполнению веб-сайта контентом.
Определение основных этапов создания многофункционального

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

3.1. Умение работать с элементами интерфейса Flash.
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. Знакомство с символами и библиотекой.
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
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 Ключевые термины
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 Создайте визуальную иерархию контента: используйте рамки внутри рамок, заго-
ловки и подзаголовки с отступами, чтобы продемонстрировать элементы как части
иерархии.
Анализ мини-приложения

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 при подготовке к обучению
данному проекту.
Анализ веб-сайтов

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>).
12. Кратко обсудите важность CSS в следующих случаях:

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

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

xx Определить:
xx Цели, целевую аудиторию, контент и требования к готовому проекту.
xx План проекта.
xx Создание контента
xx Структура:
xx Информационная архитектура и проектная документация.
xx Блок-схемы для отображения общей структуры веб-сайта.
xx Каркасы для закрепления основной структуры страниц веб-сайта.
xx Дизайн:
xx Дизайн композиций для создания подробных альтернативных вариантов дизайна.
xx Рецензирование композиций с клиентом для выяснения его предпочтений относи-
тельно дизайна.
xx Редизайн после получения отзывов от клиента.
xx Создание раскадровки.
xx Создание прототипа.
xx Сборка и тестирование:
xx Создание сайта на основе раскадровки.
xx Техническая проверка и тестирование юзабилити, ведение записи ошибок и требова-
ний по изменению дизайна.
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) и объясните, как пользоваться этим сервисом для создания и сохранения
пользовательских цветовых палитр с целью визуального дизайна любого проекта.
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. После того, как учащиеся завершат композиции, попросите несколько человек выста-
вить свои работы на рассмотрение группе.
Раздел: «Рецензия»
Выбор и подготовка изображений

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

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

Примечание. В зависимости от уровня знания учащимися вопросов авторского права, вы можете
обсудить некоторые или все из следующих: случаи, когда должно быть получено разрешение; разни-
ца между материалом, защищенным авторским правом, законном использовании, интеллектуальной
собственности и производных работ, и как указать, что контент защищен авторским правом.
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: «Сохранение файлов в различных форматах»
Примечание. Демонстрируя инструменты редактирования, вы можете обсудить идею обратимого ре-

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

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

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.
Раздел по программе 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. Поощряйте их выполнять необходимые проверки.
Добавление мини-приложений на веб-страницу

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

в браузере (Preview In Browser),чтобы отобразить HTML-страницу с мини-приложе-
нием. Объясните, что для просмотра мини-приложений в веб-браузере необходимо вы-
брать команду меню Файл ⇒ Предварительный просмотр в браузере (File ⇒ Preview In
Browser) и выбрать нужный веб-браузер. Если они еще не сохранили свои HTML-файл,
следует сделать это до просмотра.
xx Попросите учащихся опубликовать на веб-сервере пустую HTML-страницу со вставлен-
ным мини-приложением.
xx Используйте HTML-файл домашней страницы вашего учебного заведения, в который
учащиеся вставят свои мини-приложения согласно каркасам, а затем просмотрите стра-
ницу или опубликуйте ее на веб-сервере.
Раздел по программе Adobe Dreamweaver: «Публикация файлов во Всемирной паутине»
Примечание. Если учащиеся готовятся к сдаче к сдаче экзамена Adobe Certified Associate, «Сетевые
коммуникации с использованием Adobe Dreamweaver CS6», публикация файлов на удаленный сер-
вер — одна из целей экзамена, поэтому этот вопрос следует рассмотреть здесь. Кроме того, учащие-
ся также будут иметь возможность опубликовать свой сайт, выполняя инструкции в Проекте 3.
Презентация работы
36. Попросите нескольких или всех учащихся представить свои мини-приложения аудито-
рии и объяснить, где они планируют разместить мини-приложение на главной странице учеб-
ного заведения, причины подобного размещения, и какие настройки и почему они провели.
Дополнительные задания
Проект можно дополнить следующими заданиями:
xx Дополнительное исследование дизайна: Выполните дополнительное исследование графи-
ческого дизайна. Пусть учащиеся найдут во Всемирной паутине дополнительные при-
меры каждого принципа дизайна.
xx Изучение: Чтобы предоставить учащимся больше сведений о каскадных таблицах сти-
лей, организуйте учащихся в группы, которым нужно будет подробнее изучить данную
тему и представить результаты аудитории.
Темы могут быть следующие:
xx Появление CSS
xx Действующие стандарты по CSS Консорциума W3C
xx Преимущества использования CSS
xx Подготовка к студенческому семинару: Можно попросить небольшую группу учащихся
просмотреть разделы об использовании программы Adobe Dreamweaver или справочные
сведения во Всемирной паутине, helpx.adobe.com/ru/dreamweaver.html, и выяснить,
как настроить локальный сайт и корневую папку. Эта группа может представить ауди-
тории обоснование необходимости создания сайта и объяснить, почему это так важно.
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 можно найти в справочных материалах программы.
Dreamweaver можно найти в справочных материалах программы.
Photoshop можно найти в справочных материалах программы.
xx При необходимости дополнительную информацию по авторскому праву можно найти на
веб-сайте по адресу fairuse.stanford.edu.
Мини-приложения
xx Обзор мини-приложений и бесплатная галерея: www.widgetbox.com/info/widgets/
explanation/ и www.widgetbox.com/widgets/.
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. В зависимости от
тематики и содержания, которые выбирает учащийся, вы можете изучить стандарты, при-
нятые в вашем государстве.
1. Творчество и инновации.
Учащиеся демонстрируют творческое мышление, исследовательские подходы и разрабаты-
вают инновационные продукты и процессы с использованием технологии. Учащиеся:
а. Применяют имеющиеся знания для получения новых идей, продуктов или процессов;
б. Создают оригинальные произведения как средство выражения личности или группы.
2. Коммуникации и сотрудничество.
Учащиеся используют цифровые средства и среды для общения и коллективной работы, в
том числе на расстоянии, поддержки индивидуального обучения и возможности обучения
других. Учащиеся:
а. Взаимодействуют, сотрудничают и работают со сверстниками, экспертами или другими
участниками, используя различные цифровые среды и средства.
3. Исследования и информационная компетентность.
Учащиеся умеют применять цифровые инструменты для сбора, оценки и использования ин-
формации. Учащиеся:
б. Находят, организовывают, анализируют, оценивают, обобщают и используют информа-
цию из различных источников и сред
4. Критическое мышление, решение проблем и принятие решений.
Учащиеся используют умение критически мыслить для планирования и проведения науч-
ных исследований, управления проектами, решения проблем и принятия обоснованных ре-
шений, используя соответствующие цифровые инструменты и ресурсы. Учащиеся:
б. Планируют и управляют деятельностью по разработке решения или выполнения проекта.
5. Цифровое гражданство.
Учащиеся понимают гуманитарные, культурные и социальные вопросы, связанные с инфор-
мационными технологиями и практикой легального и этичного поведения. Учащиеся:
а. Заявляют и практикуют безопасное, правовое и ответственное использование инфор-
мации и технологий.
6. Применение технологии и технологические концепции.
Учащиеся демонстрируют четкое понимание технологических концепций и систем, и их
применения. Учащиеся:
а. Понимают и используют технологические системы;
б. Эффективно и продуктивно выбирают и используют приложения.
Программа сертификации Adobe Certified Associate, экзамен «Сетевые

коммуникации с использованием Adobe Dreamweaver CS6»
1.1. Формулирование основных задач веб-сайта, определение целевой аудитории и ее по-
требностей.
1.2. Выбор веб-контента, соответствующего назначению веб-сайта и требованиям целевой

аудитории.
1.3. Демонстрация знания стандартных требований к защите авторских прав (связанные тер-
мины, получение разрешения и цитирование материала, охраняемого авторским правом).
1.5. Принятие решений о создании веб-сайта на основе собственного анализа и имеющихся
технических требований.
2.1. Демонстрация знания рекомендаций, общих и относящихся к Dreamweaver, в отноше-
нии проектирования веб-сайтов, таких как поддержка согласованности, отделение содержи-
мого от проекта, использование стандартных шрифтов и визуальной иерархии.
2.3. Демонстрация знаний основных принципов разработки макетов страниц.
2.4. Определение ключевых принципов создания удобного, доступного веб-сайта, содержа-
щего понятный и разборчивый текст.
2.5. Демонстрация знания блок-схем, раскадровок и каркасных методов изображения объ-
ектов для создания веб-страниц и карты сайта (индекса сайта), которые поддерживают за-
планированную иерархию веб-сайта.
планах по проектированию.
3.1. Умение работать с элементами интерфейса Dreamweaver.
3.2. Использование палитры Вставка (Insert).
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. Публикация файлов веб-сайта на удаленном сервере и их обновление.
Критерии оценки
0 — Результат 3 — Результат
5 — Результат превосходит
не соответствует соответствует
ожидания
ожиданиям ожиданиям
Оценка веб- Отсутствует или Оценка сайта включает в Оценка сайта включает в себя
сайта не завершена себя визуальное представ- визуальное представление с до-
ление с документами об кументами об авторских правах.
авторских правах, анализ Оценка содержит исчерпываю-
особенностей дизайна и щий анализ особенностей дизайна
достоверности контента. и достоверности контента в том,
как они соотносятся с эффектив-
ностью веб-сайта по отношению к
его аудитории и цели.
Каркас мини- Отсутствует или Каркас воссоздает сайт Каркас воссоздает сайт учебного
приложения не завершен учебного заведения и в заведения и в нем отведена область
нем отведена область для для размещения мини-приложе-
размещения мини-при- ние. Он опирается на принципы
ложения. Он опирается дизайна и содержит информацию
на принципы дизайна и о вариантах размещения и на-
содержит информацию о вигации. Учащиеся четко обосно-
вариантах размещения и вывают принятые дизайнерские
навигации. Учащиеся чет- решения для мини-приложения.
ко обосновывают приня- В объяснениях также содержит-
тые дизайнерские решения ся обобщенная информация об
для мини-приложения. анализе мини-приложения и
веб-сайта.
Композиции Отсутствует или Композиции дизайна Композиции дизайна учащегося
дизайна не завершены учащегося точно отражают точно отражают аудиторию, цели,
аудиторию, цели, выбор выбор цвета, настроение, изобра-
цвета, настроение, изо- жения, текст и выбранный вариант
бражения, текст и выбран- навигации. Отобранные компози-
ный вариант навигации. ции отражают различные подходы
Отобранные композиции к дизайну. Композиции сочетаются
отражают различные под- с общим дизайном сайта, для кото-
ходы к дизайну. Компози- рого предназначено мини-прило-
ции сочетаются с общим жение и учащиеся могут объяснить
дизайном сайта, для каким образом были применены
которого предназначено принципы дизайна для оказания
мини-приложение. влияния на аудиторию.
Работа с изо- Отсутствует или Учащийся верно при- Учащийся верно и уместно при-
бражениями не завершена меняет цветокоррекцию, меняет цветокоррекцию, инстру-
инструменты выделения и менты выделения и ретуширова-
ретуширования при работе ния при работе с изображениями
с изображениями и фокуси- и фокусировке на теме компо-
ровке на теме композиции. зиции. Изменения изображения
Изменения изображения поддерживают изначальное
поддерживают изначальное значение изображения.
значение изображения.
0 — Результат 3 — Результат
5 — Результат превосходит
не соответствует соответствует
ожидания
ожиданиям ожиданиям
Мини-прило- Отсутствует или Учащийся разбирается в Учащийся разбирается и может
жение не завершено стилях CSS и применяет их четко рассказать о стилях CSS
для настройки мини-при- и применяет их для настройки
ложения. Учащийся создает мини-приложения. Учащийся
CSS, сочетая измененные и создает CSS, сочетая изменен-
новые стили. Учащиеся пу- ные и новые стили. Учащиеся
бликуют мини-приложения публикуют мини-приложения на
на HTML-странице. веб-сайте учебного заведения.
Анализ веб-сайтов
Имя учащегося: ____________________________________ Дата: __________________
URL-адрес: ______________________________________________________________
Название сайта: ___________________________________________________________
Категория: ______________________________________________________________
Визуальная разметка
Опишите визуальные элементы на стартовой странице. Что привлекло ваше внимание в
первую очередь?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Как графический дизайн (баланс, визуальный акцент, цвет, стиль, визуальная иерархия и
т.д.) связан с контентом?
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Если на странице расположены изображения, увеличивают ли они ценность контента, или

служат для украшения и привлечения внимания? Если изображения увеличивают ценность
контента, опишите, каким образом.
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Насколько быстро происходит заполнение страницы? Стоила ли страница времени, потра-

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

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

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

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

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

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

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

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

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

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

_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
_______________________________________________________________________
Введение в 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> акцентированный текст, отображается как курсив
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;
}
Отдельное определение состоит из двух частей: свойства (например, 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) для сти-
ля, применяемого к заголовкам, баннерам, меню и другим элементам, встречающимся
только в одном месте в документе. Используется однократно в документе или странице.

Идентификаторы должны начинаться со знака решетки (октоторпа) (#) и может содер-
жать любую комбинацию букв и цифр (например, #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
Обзор рабочего пространства программы

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 Панель инструментов содержит инструменты для создания и редактирования изображе-
ний, иллюстраций, элементов страницы, и так далее. Инструменты со схожими функци-
ями сгруппированы.
Переключатель рабочих пространств

Панель
приложения
Окно документа
Панель
инструментов
Палитры
Инспектор
свойств
Рис. 1.3. Рабочее пространство программы Adobe Fireworks CS6
xx Инспектор свойств отображает параметры и свойства выбранного элемента.

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

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

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

4. Нажмите кнопку OK, чтобы закрыть диалоговое окно.
5. Щелкните мышью по переключателю рабочих пространств. Обратите внимание, что
название нового рабочего пространства доступно в меню переключателя среди предустанов-
Рис. 1.5. Переключатель рабочих Рис. 1.6. Диалоговое окно нового рабочего
пространств пространства
ленных рабочих пространств. Даже если вы вносите изменения, можно вернуться к сохра-
ненному рабочему пространству, выбрав его в меню или с помощью переключателя рабочих
пространств (рис. 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. Диалоговое окно Новый документ
Пользовательский (Custom) задействует палитру цветов, чтобы установить пользователь-

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

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

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

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

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

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

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

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

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

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. Окно документа с полосами прокрутки
3. С помощью инструмента Рука (Hand) перетащите документ, чтобы просмотреть раз-

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

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

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

1. Открыв документ, выберите инструмент Указатель (Pointer) на панели инструментов,
а затем выделите объект в документе. Обратите внимание, что информация в инспекторе
свойств содержит тип изображения, размер и положение объекта (рис. 1.17).
2. Затем выберите инструмент Текст (Type) (и выделите область текста, если таковая име-
ется). Содержимое инспектора свойств изменится, и отобразятся элементы управления, по-
зволяющие форматировать текст (рис. 1.18).
Рис. 1.17. Инспектор свойств отображает характеристики растрового изображения
Рис. 1.18. Инспектор свойств отображает характеристики текста
Работа со слоями
Слои разделяют документ Adobe Fireworks на отдельные плоскости, как если бы элементы
иллюстрации были нарисованы на отдельных листах прозрачной пленки. Каждый объект в
документ находится на слое (рис. 1.19). Вы можете создать слой перед тем, как начнете ри-
совать или добавлять их по мере необходимости. Холст находится под всеми слоями и сам
по себе слоем не является.
Рис. 1.19. Модель слоев в программе Adobe Fireworks
Палитра Слои (Layers) отображает текущее состояние всех слоев на странице документа
(рис. 1.20). Активный слой выделен. Порядок наложения — это порядок, в котором объекты
отображаются в документе. Он определяет, как объекты одного слоя перекрываются объ-
ектами другого слоя. В программе Adobe Fireworks недавно созданные слои располагаются
сверху стопки слоев. Вы можете изменить порядок слоев и объектов в слоях, а также создать
вложенные слои и переместить объекты на них.
На палитре Слои (Layers) также отображаются маски и элементы управления непрозрачно-
стью и режимами наложения.
Развернуть/
Свернуть слой
Показать/
Скрыть слой Активны слой
Заблокировать/
разблокировать слой
Удалить выделение
Создать или дублировать Создать Новое растровое

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

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

От руки на бумаге набросайте эскиз г

Язык

Цифровой Дизайн Cs6 - 2012

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

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

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Цифровой Дизайн Cs6 - 2012

Загружено:

Авторское право:

Доступные форматы

Оглавление

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Adobe Fireworks CS6

Adobe Photoshop CS6

Adobe Illustrator CS6

Adobe Dreamweaver CS6

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

Adobe Flash Professional CS6

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

Adobe Flash Player 11

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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