- PVSM.RU - https://www.pvsm.ru -
Fireworks позволяет преобразовывать темы jQuery Mobile, просматривать их и экспортировать соответствующий CSS код и спрайт. Статья учит созданию собственных тем jQuery в Adobe Fireworks CS6.
Как известно, jQuery Mobile Framework [1] — это JavaScript фреймворк, который позволяет быстро отстраивать веб-сайт для мобильных устройств. Это сенсорно-оптимизированный веб-фреймворк разработанный для смартфонов и планшетов. jQuery Mobile работает на подавляющем большинстве современных пк, смартфонах, планшетах и е-ридер платформах. Фреймворк jQuery Mobile прост в использовании и включает веб-средства управления, такие как кнопки, прокрутку, список элементов и многое другое.
Каждый макет и элемент интерфейса, включенный в jQuery Mobile, строится вокруг нового объектно-ориентированного CSS фреймворка. Фреймворк позволяет применять законченный единый визуальный дизайн темы для мобильных сайтов и приложений.
Для уменьшения веса изображения и повышения быстродействия jQuery Mobile использует свойства CSS3 для создания закругленных углов, градиентов, а также теней объектов и текста, а наиболее часто используемые элементы включаются в спрайт формат.
Темы содержат множество цветовых образцов, состоящих из заголовка (header bar), содержания (content bode) и строки состояния (button states), которые вы можете свободно смешивать и сочетать. Каждая открытая тема поддерживает до 26 уникальных образцов, что позволяет добавить практически неограниченное разнообразие в ваш дизайн.
Итак, тема содержит следующие пять стилей горизонтального меню (рис. 1):
Рис. 1. Выбираем из пяти различных дефолтных стилей.
По умолчанию назначается «A» образец для всех header-ов и footer-ов, потому что хэдер и футер элементы, как правило, визуально выделяющиеся элементы в мобильном приложении.
Код CSS, сформированный для меню, показан ниже:
{
border:1px solid #2a2a2a;
background:#111;
color:#fff;font-weight:bold;
text-shadow:0 -1px 1px #000;
background-image:-moz-linear-gradient(top,#3c3c3c,#111);
background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3c3c3c),color-stop(1,#111));
-msfilter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#3c3c3c', EndColorStr='#111111')"
}
Темы jQuery Mobile включают несколько дефолтных спрайтов изображений и образцов (свотчей). Вы можете использовать функционал предоставляемый Fireworks для расширенных изменений спрайтов и свотчей. Вы также можете создавать множество образцов дублируя уже существующую страницу и изменяя ее.
Начнем с создания новой темы в Fireworks CS6:
Выберите «Команды» > «Тема jQuery Mobile» > «Создать новую тему» (рис. 2):
Рис. 2. Создаем новую тему jQuery Mobile.
Имя страницы используется для имени образца (свотча). Рекомендуется использовать один символ (a-z) для имени страницы. Вы можете создавать новые страницы дублируя уже имеющиеся и изменять темы в соответствии с требованиями. Каждая страница генерирует свой CSS образец.
Шаблон по умолчанию содержит следующие спрайты (рис. 3):
Рис. 3. Спрайты по умолчанию.
Вы можете включить ваши иконки в существующий набор спрайтов. Чтобы включить дополнительные иконки, вставьте местозаполнитель значка в дефолтный jQuery шаблон. После вставки местозаполнителя, создайте рабочий значок для других разрешений и цветовых схем.
Рис. 5. Создание вариантов значков и добавление их в местозаполнители.
Используя Fireworks, вы можете изменять скин, основанный на теме, соответствующей дизайну сайта.
Каждому объекту на холсте соответствует раздел c кодом CSS в образце. Код указан названием каждого объекта (pис. 6):
Рис. 6. Fireworks документ после изменения страницы.
После того, как произведены изменения, мы посмотрим продвижение дизайна.
Выполните следующие действия, чтобы просмотреть измененный файл шаблона:
Окно > Расширения > Встренный просмотр темы jQuery Mobile или
Windows > Extensions > jQuery Mobile Theme In-App Preview (рис. 7):
Pис. 7. Опция предварительного просмотра темы в рабочем пространстве Fireworks.
Появилась панель предварительного просмотра и показывает обновленную страницу (рис. 8):
Рис. 8. Обновления в панели предварительного просмотра темы jQuery Mobile.
Для просмотра всех тем и спрайтов сразу в браузере выбираем:
Команды > Тема jQuery Mobile > Просмотр темы в браузере или
Commands > jQuery Mobile Theme > Preview Theme in Browser (рис. 9):
Pис. 9. Просмотр тем в браузере.
Кликая на вкладки в верхней панели, переключаемся между различными темами для просмотра отдельных образцов применительно к различным элементам.
После того как вы создали или обновили шаблон, вы можете использовать Fireworks для генерации CSS кода и спрайтов для сайта. Выбирайте один из следующих двух вариантов для экспорта образца CSS и спрайтов.
Вариант 1: Одновременный экспорт CSS и спрайтов.
Для одновременного экспорта всех образцов (свотчей) и спрайтов выбираем:
Commands > jQuery Mobile Theme > Export Theme to generate the swatches and sprites for all pages (рис. 10):
Вариант 2: Экспорт конкретного образца или спрайта.
Для экспорта конкретного образца, кликаем:
Export Current Swatch in the jQuery Mobile Theme In-App Preview panel.
Используйте этот вариант, когда вы хотите настроить только меню конкретного образца, чтобы обновить его (рис. 11):
Рис. 11. Когда вы выбираете вариант Export Current Swatch, экспортируется и обновляется только текущий элемент.
Для экспорта только спрайт изображений, кликаем:
Export Sprite Images в jQuery Mobile Theme In-App Preview panel.
Будут сгенерированы спрайты для разных разрешений и цветовых схем. Также cгенерируются CSS-стили, содержащие перемещенные значения для каждого спрайта. Используйте этот метод, когда хотите включить в спрайт-лист собственные иконки или изменить уже существующие.
К этому пункту вы уже создали новый файл CSS-стилей для обновления темы сайта для мобильного устройства.
В этом разделе, вы узнаете как связать CSS файл с вашим веб-сайтом.
Выполните следующие действия:
Рис. 12. Ссылка на локальные или удаленные копии jQuery файлов.
Страница, созданная по умолчанию в структуре jQuery Mobile таблиц стилей и файлов темы, которые вы сгенерировали в Fireworks, определяется следующими тегами:
< link href="jquery-mobile/jquery.mobile.theme-default.css" rel="stylesheet" type="text/css" />
< link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
Рис. 13. Под тегом «title» тег, подключающий CSS файл к jQuery HTML странице по умолчанию в Dreamviwer.
< link href="jquery-mobile/theme_f.css" rel="stylesheet" type="text/css"/>
Например, вместо использования дизайна горизонтального меню по умолчанию «A», вы можете использовать код, чтобы применить другие стили меню, Таким образом:
< div data-role="header" data-theme="f" />
После применения этих изменений, кликните кнопку Live View чтобы просмотреть как обновленная тема появляется в рабочей области Dreamweaver (pис. 14):
Рис. 15. Образцы (свотчи) jQuery Mobile.
<a href=”#” data-role="button" data-icon="favorites">Button </a>
, как показано ниже (рис. 16): Значения иконки «избранное» или «favorites», это имя с которым значок был создан в Fireworks.
Рис. 16. Добавление данных атрибута значка в код.
Обратите внимание: В соответствии с фреймворком jQuery Mobile, Fireworks не экспортирует модели для оптимизации размера переносимого содержимого.
C Fireworks легче чем когда-либо создавать и развивать веб-дизайн для множества экранов. Кроме того, сгенерированный CSS является кросс-платформенным, сайты созданные вами функционируют и отображаются в точности также как вы и ожидаете на смартфонах и планшетах. Используйте прдварительный просмотр вариантов в Dreamweaver для просмотра измнения в Live View или в браузере для того, чтобы проверить вашу работу, прежде чем опубликовать изменения, которые, кстати, вы также можете просматривать и внутри Fireworks.
Данная статья подготовлена после прочтения Creating jQuery Mobile website themes in Fireworks [2] by Michael Dominic.
Больше о расширениях Fireworks для создания таблиц стилей CSS:
Автор: Lemyakina
Источник [3]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/veb-dizajn/68364
Ссылки в тексте:
[1] jQuery Mobile Framework: http://jquerymobile.com/
[2] Creating jQuery Mobile website themes in Fireworks: http://www.adobe.com/devnet/fireworks/articles/css3-jquery.html
[3] Источник: http://habrahabr.ru/post/194030/
Нажмите здесь для печати.