Практика создания динамических 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 MXColdFusion и пользователи компьютеров 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
Определение возможностей поставщика услуг хостинга
Резюме
