Использование веб-виджета для создания фотогалереи в Adobe Dreamweaver CS5

1. Использование браузера виджетов для поиска веб-виджетов
2. Установка веб-виджета
3. Настройка фотогалереи
4. Поиск веб-виджетов
5. Поиск веб-виджетов

Как вы, возможно, уже знаете, Adobe Dreamweaver предоставляет некоторые очень полезные функции через Spry JavaScript Framework , такие как строка меню Spry . Тем не менее, есть много других популярных фреймворков JavaScript, которые имеют дополнительные виджеты. Конечно, если вы хорошо знаете JavaScript, вы можете написать свой собственный JavaScript. Что если вы не знаете JavaScript?

Вот где веб-виджеты могут спасти вас! Виджеты - это объекты, которые вы можете легко добавить на свою веб-страницу для предоставления дополнительных функций, не относящихся к Dreamweaver или Spry Framework. Вы можете устанавливать виджеты с помощью Adobe Extension Manager и добавлять значки и элементы меню в Dreamweaver. После установки вы можете использовать эти объекты, как и любой другой объект, встроенный в Dreamweaver.

Использование браузера виджетов для поиска веб-виджетов

Чтобы начать поиск веб-виджетов, найдите маленький значок в виде шестеренки в Dreamweaver . (В зависимости от выбранного макета рабочей области, он может находиться в другом месте. Именно так он выглядит в представлении «Конструктор» по умолчанию.) При выборе «Браузер виджетов…» откроется браузер и вы попадете на Adobe Exchange. Веб-сайт.

У Adobe Exchange есть много расширений для продуктов Adobe . Многие из них бесплатны, но некоторые имеют свою стоимость.

Установка веб-виджета

Когда вы выбираете элемент в Adobe Exchange, вы загружаете его на свой компьютер в виде файла .mxp и запускаете его. Затем Extension Manager попросит вас согласиться с условиями (как показано ниже).

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

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

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

Однако вы наверняка захотите заменить эти образцы на свои. Для этого вы должны отредактировать код напрямую. Но не волнуйтесь; Вы можете просто подражать тому примеру, который они предоставили.

Настройка фотогалереи

Ниже вы найдете код для всей страницы, в которую была добавлена ​​фотогалерея. Обратите внимание на теги <script>, <link>, <div> и переменные «var»:

Часть кода, которая определяет местоположение фотогалереи, находится в одном div. Идентификатор и класс div должны оставаться одинаковыми, чтобы свойства JavaScript и CSS применялись правильно:

<div id = "show1" class = "слайд-шоу"> </ div>

Имена изображений и соответствующие им подписи хранятся в объекте JavaScript, называемом данными. Вы должны заменить имена образцов изображений (1.jpg, 2.jpg и т. Д.) На имена ваших изображений. Подписи следуют за словом заголовок в одинарных кавычках. Не забудьте оставить остальную пунктуацию как есть. Обратите внимание на одну важную деталь: каждая строка заканчивается запятой, кроме самой последней. Убедитесь, что каждая из ваших заканчивается запятыми, кроме последней.

var data = {
'1.jpg': {caption: 'Вулкан Асенсьон в Ометепе, Никарагуа.' },
'2.jpg': {подпись: 'Дерево Сейбу.' },
'3.jpg': {caption: 'Вид с вулкана Мадерас'. },
'4.jpg': {подпись: 'Пиво и мороженое.' }
};

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

var myShow = new Slideshow.KenBurns ('show1', data, {captions: true, контроллер: true, задержка: 4000, продолжительность: 1000, высота: 300, hu: 'images /', миниатюры: true, ширина: 400} );

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

Если вы хотите узнать больше, ознакомьтесь с нашими Введение в Dreamweaver CS5 Учебные классы , Узнайте о наших последних блогах, классах и вебинарах Adobe, подписавшись на наши Новостная рассылка , Удачи!

Поиск веб-виджетов

W

Поиск веб-виджетов

idgets - это объекты, которые вы можете легко добавить на свою веб-страницу для предоставления дополнительных функций, не относящихся к Dreamweaver или Spry Framework. Они устанавливаются через Adobe Extension Manager и добавляют значки и элементы меню в Dreamweaver. Виджеты - это объекты, которые вы можете легко добавить на свою веб-страницу, чтобы обеспечить дополнительные функции, не свойственные Dreamweaver или Spry Framework. Они устанавливаются через Adobe Extension Manager и добавляют значки и элементы меню в Dreamweaver. Конечно, если вы являетесь экспертом по JavaScript, вы можете написать свой собственный JavaScript. Но что, если вы не знаете JavaScript?

Конечно, если вы являетесь экспертом JavaScript, вы можете написать свой собственный JavaScript. Но что, если вы не знаете JavaScript?

О Webucator

Webucator проводит обучение под руководством инструктора для студентов по всей территории США и Канады. Мы обучили более 90 000 студентов из более чем 16 000 организаций таким технологиям, как Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular и многим другим. Проверьте наш полный каталог курсов ,

Похожие