Фрагментация створеного макета

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

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

Что делать?	Как делать?
Возьмите инструмент Slice (Фрагмент) в палитре инструментов
Выделить необходимые области, так же как это делали при выделении.
Переместить документ в Image Ready
Спрятать Направляющие	View, Show, снять метку с Guides

Применение ролловеров

Что делать?	Как делать?
Выберите инструмент Slice Select Tool
Выделите фрагмент с первой кнопкой	ЛКМ на фрагменте
Переместите за заголовок палитру Rollovers и измените ее размеры.
Найдите в палитре Rollovers выделенный фрагмент и создайте для него новое состояние Over State (При наведении мыши)
В палитре слоев найдите слой с этой кнопкой
Добавьте эффект изменения цвета кнопки Color Overlay	Выберите цвет
Посмотрите, как работает ролловер	На панели инструментов щелкнуть пиктограмму Internet Explorer
Закройте окно Internet Explorer и доделайте ролловеры на все кнопки

Практична робота №14

Тема: Оптимізація і збереження Web-сторінки

Мета:Навчитися оптимізувати і зберігати Web-сторінку

Завдання: Оптимізувати і зберегти Web-сторінку.

В программе Image Ready в окне документа перейти на вкладку 2-Up. Слева – оригинал изображения, справа – после оптимизации
Взять инструмент Slice Select Tool
Выделить первый фрагмент в окне справа.
Обратиться к окну Optimize (правый верхний угол окна приложения)
Подобрать формат, количество цветов, качество изображения таким образом, чтобы при небольших потерях качества изображения получить наименьший размер файла	Например, при установках: был получен результат:
Выделите следующий фрагмент в правом части окна 2-Up и выполните его оптимизацию так же, как и для первого фрагмента. При оптимизации фрагментов, которые являются ролловерами обязательно выбирать формат GIF. Для фотографий лучше подходит формат JPG, с качеством 30-40%. Выполнить оптимизацию всех фрагментов.
Сохраните Web-страницу	File, Save Optimized As, введите имя страницы, укажите папку
Проверьте правильность сохранения страницы	Должна быть создана Web-страница и папка images, содержащая все фрагменты (картинки) из которых состоит сама страница

Практична робота №15

Тема: Створення анімаційних зображень за допомогою програми Macromedia Flash

Мета: Навчитися створювати анімаційні зображення і розміщувати їх на Web-сторінках.

Теоретичні відомості

Програмний пакет Macromedia Flash (надалі просто Flash) - потужний інструмент, що полегшує створення анімованих WEB-сторінок. Модель графіки в Flash являє собою комбінацію растрової й векторної графіки, з'єднуючи в собі позитивні сторони обох графічних представлень.

Основний елемент, за допомогою якого створюється анімація - часова лінійка (Time Line). На відміну від мультиплікації, при якій доводиться малювати всі кадри, що відбивають процес зміни або рухи, Flash дозволяє малювати тільки ключові кадри (Keyframe), а зображення в кадрах, що перебувають між ключовими, виконується програмно, що, природно, полегшує роботу.

Анімація в Flash представлена двома видами: анімація типу Shape й анімація типу Motion. Принципова відмінність між цими типами анімації полягає в тому, що перший тип працює із графікою як з набором графічних примітивів (ліній, дуг, окружностей, прямокутників, заливань і т.д.), а другий тип працює тільки зі згрупованими об'єктами, "символами".

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

Завдання 1. Создание простой анимации.

1. При помощи инструмента Oval Toll c панели Tools нарисуйте в новом кадре небольшой круг или овал.

2. При помощи инструмента Arrow Tool выделите его и измените цвет и способ заливки по своему усмотрению.

3. Щелкните на шкале фильма правой кнопкой мыши под кадром номер 30 и выберите в контекстном меню пункт Insert Keyframe.

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

Таким образом вы создали два ключевых кадра будущего фильма.

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

5. Выделите мышью первый ключевой кадр на шкале счетчика кадров.

6. Из контекстного меню первого кадра выбрать пункт Creare Motion Tween. Вы увидите, что на шкале счетчика кадров появилась заполненная полоса.

7. Просмотрите полученный фильм нажатим кнопки Enter.

Завдання 2. Движение по траектории.

1. Скопировать в буфер приведенную здесь картинку:

2. Вставить ее в новый фильм.

3. Добавить к фильму новый слой, выбрав из контектного меню слоя 1 пункт Add Motion Guid

4. Нарисовать инструментом Pencil Tool траекторию движения персонажа.

5. Совместить центр объекта с началом траектории.

6. Выделить поочередно оба слоя мышью на линейке кадров под отметкой 30.

7. Создать ключевые кадры: из контекстного меню Insert Keyframe.

8. Выделить объект в первом слое инструментом Arrow Tool и мышью перетаскивать его вдоль траектории, так, чтобы выделенный центр объекта попадал на траекторию.

9. Создать анимацию, выбрав из контекстного меню первого кадра пункт Creare Motion Tween.

10. Просмотреть полученную анимацию нажатим кнопки Enter.

Завдання 3. Работа с текстом.

15. Открыть программу Macromedia Flash (Пуск/Программы/Macromedia/Flash)

16. Выбрать в меню Text/Font/Courier Cyr

17. Выбрать в меню Text/Size/14

18. «Взять» с панели инструментов инструмент Text Tool и нарисовать в правом верхнем углу область, в которой написать текст «Наш колледж-лучший».

19. Выбрать в меню пункт Modify/Break Apart

20. Выбрать в меню пункт Modify /Group

21. Щелкнуть мышью под отметкой 30 на шкале кадров

22. Выбрать в контекстном меню Insert KeyFrame

23. Перетащить полученную надпись в левый верхний угол рабочей области.

24. Выбрать в меню Insert/Create Motion Tween

25. Чтобы надпись двигалась плавно, можно создать дополнительные ключевые кадры перед кадром 30 на линейке и выбрать из контекстного меню таких кадров пункт Create Motion Tween

26. Просмотреть полученную анимацию нажатим кнопки Enter.

Завдання 4. Создание слоев.

1. В новом фильме нарисовать луну при помощи инструмента Owal Tool, выбрав заливку градиентом.

2. Сгруппировать объект (Modify /Group).

3. Создать ключевой кадр под отметкой 40.

4. Переместить “луну” в другое положение.

5. Переместиться в первый ключевой кадр и создать анимацию Creat Motion Tween из контекстного меню.

6. Создать новый слой ( Insert Layer).

7. Скопировать в кадр приведенную здесь картинку:

10. При помощи панели инструментов Align настроить ее так, чтобы она занимала все пространство кадра. (Window/Panels/ Allign/ To Stage/ Match Size-максимум по вертикали и горизонтали).

11. Переместить мышью в окне слоев новый слой под первый (создаем фон).

12. Создать еще один слой.

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

14. Поместить третий слой на передний план.

15. Просмотреть полученную анимацию.

16. Сохранить полученный фильм в своей папке.

17. Просмотреть полученную анимацию в полноэкранном режиме (Control/ Test Scene). При этом в той же папке создастся файл с расширением .SWF, который может служить в дальнейшем для публикации в Internet.

Завдання 5. Внедрение флэш-объекта в документ HTML.

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

<HTML>

<HEAD>

<TITLE>sample </TITLE>

</HEAD>

<BODY bgcolor="#FFFFFF">

<OBJECT WIDTH="780" HEIGHT="154" align="right">

<EMBED src="Луна.swf" quality=high bgcolor=#FFFFFF WIDTH="780" HEIGHT="154"NAME="sample" TYPE="application/x-shockwave-flash"> </EMBED>

</OBJECT>

</BODY>

</HTML>

2. Сохраните созданный текстовый файл под именем Проба.htm в своей папке.

3. Откройте этот файл для просмотра с использованием программы Internet Explorer.