Практика создания динамических Web-узлов

         

Практика создания динамических Web-узлов

Создание динамических Webузлов
Даешь динамику!
Определение содержания
Создание базы данных

Создание шаблонов для содержания
Создание шаблона в Dreamweaver MX
Диалоговое окно для сохранения шаблона

Создание редактируемых полей в шаблоне
Таблица преобразована в редактируемое поле и названа Table
Замечание

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


Работа со Snippets
Панель Snippets в Dreamweaver
От статики к динамике создаем Webузел JCT
Корпоративный вид
Замечание

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

Замечание
Создание эффекта ролловера
В отжатом состоянии каждая кнопка будет красной
Использование направляющих позволяет

Панель Optimize позволяет настроить
JCT становится динамическим
Одним из интересных визуальных

Дизайн пришлось переделать изза трудностей программирования
На этом рисунке Джордан изобразил
Так нам пришлось указать какие
Рассуждения Криса о создании динамического Webузла JCT

Резюме

Анимация в Web

Анимация в Web

Покадровое описание
Формат и вид
Документ описывающей содержание
Анимация в Fireworks MX
Инструменты анимации
Нужно всего 15 кадров для описания развития сюжета
В Fireworks MX есть немало инструментов
Работа с кадрами
Совет
Перемещая объект в кадрах вы создаете иллюзию движения

Использование слоев
Кадры можно выбрать в панели Layers
Движение объекта
Подготовка объекта к движению
Создание анимации
Элементы для анимации подготовлены
Совет
Так выглядит законченная анимация
Управление анимацией
Элементы воспроизведения

Элементы управления воспроизведением
Управление задержкой
Используя средство Onion Skinning
Слоистость
В диалоговом окне Onion Skinning
Замечание
Циклическое воспроизведение
В диалоговом окне Looping можно
Совет
Экспорт анимированного GIFфайла

Оптимизация анимации
Диалоговое окно Optimize
Совет
Экспорт анимированного GIFфайла
Диалоговое окно Export Preview
Замечание
Техника анимации в Fireworks MX
Соединение
В этом окне можно задать число кадров для анимации
Воспроизведение ролика Fireworks MX во Rash MX

В этом диалоговом окне можно экспортировать
Затемнение и проявление
Символы анимации в Fireworks MX
Результат воспроизведения вашего ролика
Диалоговое окно Animate
Управление символами анимации с помощью окна свойств
С помощью инспектора свойств можно
Особый эффект в Fireworks MX
Совет
Интересный эффект можно создать нестандартными средствами

Анимация во FreeHand
Анимированный текст
В этом окне можно задать поведение анимации во FreeHand
Меню Xrtas
Анимация объектов
Совет
Объекты расположены по кругу и готовы к созданию анимации
Диалоговое окно Movie Settings
Взаимодействие Flash MX и Freehand
Анимация с помощью Dreamweaver MX

Окно Timelines
Шкала времени в Dreamweaver MX
Создание анимации в Dreamweaver MX
Движение по свободному пути
Добавив ключевой кадр вы сможете
Путь по свободной кривой записан
Резюме

Создание Webстраниц с помощью Flash

Создание Webстраниц с помощью Flash
Совет
Замечание
Покадровое описание
Установка сцены для Flash MX
В окне свойств показаны размеры
Установка цвета фона
Сцена установлена Размеры сцены

Создание и сборка объектов во Flash MX
Подготовка рисунков Fireworks для Flash MX
Числовое преобразование в Fireworks
Выполнить обрезку в Fireworks совсем не сложно
Замечание
Подготовка 32битового файла PNG для экспорта во Flash
Подготовка прозрачного GIF рисунка для Flash MX
Формат рисунка выбирается в окне
Импорт во Flash
Если у объекта нет градиентов

Кнопка Quick Export — новое средство
Подготовка рисунков FreeHand для экспорта во Flash MX
Подготовка логотипа для Flash MX
Совет
Замечание
Символы легко экспортируются из FreeHand во Flash
С помощью этого окна вы можете
Подготовка Flashанимации
Подготовка сцены
Слои в анимации настроены и готовы к использованию

Размещение подвижных и неподвижных объектов
Анимирование объекта
Ботинок готов свалиться на слово
Совет
Слово Shoes должно выскочить со
Совет
Действия управляющие анимацией
Панель Actions
Панель Actions во Flash MX
Создание загрузчика во Rash MX

Метка добавлена в 3й кадр слоя Label
Текст программы введен
Во 2й кадр вставлено действие GoTo
Подготовка к экспорту проверка и оптимизация ролика
Окно Bandwidth Profiler
В окне Bandwidth Profiler вы видите
Это диалоговое окна позволяет оптимизировать рисунок
Оптимизация векторных рисунков
Совет
В диалоговом окне Optimize Curves

Оптимизация звука во Flash MX
В этом окне можно управлять сжатием
Воспроизведение звука
Замечание
Публикация ролика
Установки публикации для подготовки ролика к экспорту
Здесь вы можете выбрать установки
На вкладке Flash вы можете указать
Диалоговое окно Publish Settings
Экспорт файлов Flash в Dreamweaver MX

Результаты публикации помещаются
Резюме
Слайсы созданы в Fireworks и собраны

Создание анимации для Webузла JCT

Создание анимации для Webузла JCT
Привлекающий экран
Создание танцующего человечка
Когда вы выделяете рисунок в Fireworks

Предупреждение о том что разрешения
Все белые области вокруг рисунка выделены
Замечание
Создание танцора во Flash MX
Замечание
Последовательность кадров Fireworks
Разгруппировав объект вы можете
Танцор преобразован в векторную фигуру залитую черным цветом
Замечание
Совет

Совет
Функция Onion Skin во Flash MX
Анимация танца
Совет
Настройка клипа Dancer
Замечание
Экземпляр клипа Dancing Dude Controller
Введенный вами текст будет применен
Звук импортирован Его свойства
Создание эффекта стробоскопа

Замечание
Шкала времени с образцами товаров
Управление задержкой времени
Эффектное завершение
Создание маски
Изменение свойства звука Flash
Ключевые кадры добавлены в конец ролика
Все элементы на месте текст отформатирован
Градиенты в слоях настроены так что они двигаются синхронно
Диалоговое окно Layer Properties

Создание загрузчика
Диалоговое окна для редактирования
Создание клипа и загрузчика
Создание анимированного GIFрисунка для страниц товаров
В этом окне можно ввести значение
August 4
By J C Verde
Woodville VA
Font — Times New Roman;
Size —12;

Kerning — 0;
Alignment — Left
Анимирование по кадрам и слоям
Открыв обе панели вы получаете
Состояние панели Layers
Создание анимированных рисунков во Flash MX
Захват кадров из видео
Выделенный фрагмент и его длительность
Для экспортирования видео в виде
Пакетная обработка файлов в Fireworks MX

После щелчка на кнопке Add All
При пакетной обработке файлов
Совет
Создание кнопки во Flash MX
Предупреждение об импорте последовательности
Видеокнопка создана В ее состоянии
Резюме

Создание элементов навигации

Создание элементов навигации
Создание кнопок в Fireworks MX
Создание символа кнопки и редактирование ее экземпляра
Панель стилей Fireworks MX
Создать новый стиль совсем не
Редактор кнопок
Изменение свойства экземпляра
Совет
Ссылка добавляется в окне редактора
Совет

Замечание
Кнопки во Flash MX
Создание кнопки во Flash MX
Разные состояния кнопки созданы на ее шкале времени
Совет
Создание функций кнопки
Использование действий для перемещения по ролику
Адрес введен в событие getURL
Совет
Совет

Совет
Создание кнопки Aqua Interface
Создание механизма перемещения
Кнопки на Webузле Apple
Фигуры и текст созданы во FreeHand
Замечание
Совет
Так должны выглядеть слои
Так выглядит шкала времени мигающей кнопки
Совет

Щелчок на кнопке в броузере открывает
Работа с кнопками в Dreamweaver MX
Flashкнопки в Dreamweaver MX
Замечание
Диалоговое окно Insert Flash Button
Предупреждение
Совет
Использование кнопки созданной во Flash MX
Созданы разные состояния топки
Кнопка экспортирована в Dreamweaver MX

Взаимодействие FreeHand MX Flash MX и Dreamweaver MX
Замечание
Совет
Совет
Так должна выглядеть ваша кнопка
Замечание
Использование правил Dreamweaver MX
Панель Behaviors
Правила и броузеры
Создание раскрывающихся меню в Fireworks MX

Замечание
Введите слова в область Text чтобы создать меню и подменю
Замечание
Вкладка Appearance редактора меню
Использование компонентов для создания меню во Flash MX
Разные свойства компонента могут
Создание свойств меню Указав значение
Карты изображений в Fireworks MX
Окончательная версия Flashпрезентации
Кадры созданы путем дублирования

Резюме

Этапы

Этапы
Создание панели навигации для JCT
JPG или GIF
Художественные соображения
Реализация решения использовать GIFформат

Две версии панели навигации Для
В масштабе 100% разница почти незаметна
Увеличив масштаб отображения мы видим разницу в рисунках
Почему мы не сделали человечка во Freehand
Достоинства и недостатки элементов
Отличия меню Fireworks и Flash
Динамические страницы во Flash MX
Новый стиль работы
Распределение обязанностей
Управление содержанием

Резюме

Создание динамических страниц в Dreamweaver MX

Создание динамических страниц в Dreamweaver MX
Создание панели навигации
Сборка панели навигации из заранее
Во избежание недоразумений ответственный
В папке navbarjmages содержатся
Совет

Диалоговое окно New Document приложения
После щелчка на кнопке Full Path
Создание панели навигации
Диалоговое окно Insert Table приложения
Реакция панели навигации на действия
Порядок работ при использовании Studio MX
Совет
Создание шаблона ColdFusion MX
В списке шаблонов диалогового
Совет

Панель навигации созданная в Fireworks
Вставка редактируемых областей в шаблон ColdFusion MX
С помощью команды меню Insert=Template
Название редактируемой области
Добавление в шаблон ColdFusion MX каскадной таблицы стилей
Каскадная таблица стилей td добавлена
Параметры стиля шрифта для каскадной
Создание динамических страниц на основе шаблонов ColdFusion
К документу Dreamweaver MX применен
Совет

Для динамической загрузки рисунков
Создание страницы с описанием продукции в ColdFusion MX
Страница с информацией о продукте
Создание страницы Flashзаставки
Резюме

Связь с ColdFusion MX

Связь с ColdFusion MX
ColdFusion и пользователи компьютеров Macintosh
Подготовка к размещению динамического содержания
Расширение свойств базы данных Access
В таблицу Product было добавлено
Теперь на странице отображается описание продукта
Замечание
Добавление в базу данных рисунков и текста
В заполненной таблице ProductType

Связь Dreamweaver MX и ColdFusion MX
В базу данных введены дополнительные
Замечание
Создание текстового документа
Доступ к информации* базе данных
Расширенный запрос к базе данных
Перемещение программ с одной страницы на другую
Щелкнув на кнопке Test можно протестировать
Связывание содержимого базы данных со страницей ColdFusion
Изображение молнии на пиктограмме

Для параметров всегда следует указывать их значение
Совет
Текстовое поле Flash помещено
Создание динамических текстовых полей Flash
Для параметров всегда следует указывать их значение
Совет
Текстовое поле Flash помещено
Преобразование страницы со списком
Предупреждение
Диалоговое окно Cfinclude

Замечание
Создание страниц для остальных
Страница готова к публикации
Предварительный просмотр страницы списка товаров
Резюме

Оптимизация рисунков и пакет Studio MX

Оптимизация рисунков и пакет Studio MX
Оптимизация рисунков во FreeHand

Изменение пространства цветов во FreeHand
Логотип составлен из цветов Pantone
Цвет RGB/HEX yellow
Оптимизация векторов во FreeHand
Чтобы увидеть опорные точки рисунка
Диалоговое окно Simplify используется
Замечание
Совет
Связь между приложениями Freehand и Fireworks
На попет Objects диалогового окна

После запуска Fireworks из FreeHand
Использование различных форматов
Совет
Оптимизация рисунков в Fireworks MX
Использование панели Optimize для растровой графики
При уменьшении палитры цветов
Гамма приемлемая для всех платформ в приложении Fireworks MX
Оптимизация рисунков в формат GIF
Оптимизация рисунков JPG
Никогда не сжимайте уже сжатые

Крис о форматах jpg и gif
Оптимизация панели навигации Webузла JCT
Утвержденный рисунок готов к оптимизации
Создание слайсов
Для получения этой разбивки Крис
Слайсы созданные с помощью инструмента Slice
Оптимизация слайсов
Панель Optimize позволяет оптимизировать
Панель Optimize можно использовать
Панель Optimize можно также использовать

Оптимизация рисунков не разбитых на слайсы
Экспорт из представлений 2Up и 4Up
Резюме
Представление 4Up позволяет экспериментировать

Оптимизация узла и программ

Оптимизация узла и программ
Решения CSS в Dreamweaver MX
С помощью команды Duplicate панели

Если вы обновите таблицу стилей
Преимущества взаимосвязи Fireworks MX и Dreamweaver MX
При изменении таблицы стилей CSS
Текст был добавлен к рисунку отформатирован
Работа с JavaScript и HTML
Диалоговое окно Clean Up HTML/XHTML
Замечание
Замечание
Исправление кнопок Flash
Работа с автоматически сгенерированными

Использование внешних редакторов программ с Dreamweaver MX
Использование HomeSite Plus
Использование BBEdit
Использование внешних редакторов
Резюме

Избавляемся от ошибок и выпускаем Webузел в свет

Избавляемся от ошибок и выпускаем Webузел в свет
Понятие процесса тестирования

Работа с устаревшими броузерами
Замечание
Преобразование страниц в Dreamweaver MX
Замечание
Совместимость страниц с версией 3 0
Преобразование страницы
При конвертировании документа
Замечание
Шлюз к броузерам
Диалоговое окно Check Browser

Тестирование страницы с помощью различных броузеров
Совет
Страница динамической
Проверка закончена и на панели
Возможность открыть отчет в броузере и вывести его на печать
Тестирование броузером всего узла
Поиск "висячих" ссылок
Совет
Работа с "висячими" ссылками
Выбрав в меню Site одноименной

Проверка размера узла и времени загрузки
Dreamweaver MX и вопросы доступности
В диалоговом окне Preferences
Замечание
Настройка узла для людей с физическими
Альфатестирование
Кому поручить тестирование
Что искать
Бетатестирование
Кому поручить тестирование

Исправление ошибок
Что искать
Выпускаем Webузел в свет
FTPутилиты Dreamweaver MX
Определение возможностей поставщика услуг хостинга
Резюме