По своей сути flash-технология сложна, но работая с шаблоном можно невообразимо упростить ее. Технология flash еще никогда не была настолько доступна и проста, как сегодня. На платформе шаблона вы можете без особых навыков программирования создать красивый и динамичный flash-сайт. Если вы хотя бы раз имели дело со стандартным текстовым редактором Word, вам все удастся. Сегодня мы не на словах, а на деле покажем вам, как все просто.

Сначала выберете шаблон из магазина, который будет максимально соответствовать целям и задачам вашего веб-проекта. Вы можете не покупать шаблон сразу, а воспользоваться бесплатной 30-дневной демо-версией, чтобы оценить его функциональную составляющую.

Шаг 1

Для урока мы выбрали шаблон из категории «Интерьеры» № 37425. Горизонтальная фотогалерея на главной странице отличает этот шаблон от других. Его можно охарактеризовать, как «ничего лишнего». К концу урока этот шаблон будет изменен до неузнаваемости.

Шаг 2

После покупки или регистрации бесплатной демо-версии, вы попадаете в панель управления MotoCMS. Это простой визуальный редактор, основанный на технологии WYSIWYG («что видишь, то и получишь»), то есть все изменения доступны и видны после их внесения.

Шаг 3

Изменим язык интерфейса на русский. Для этого найдите вверху вкладку Настройки — Настройки панели управления — Дополнительные настройки — Язык интерфейса: Русский.

Шаг 4

Изменим белый фон сайта на что-то более интересное. В уроке использована темная текстура.  Откройте слева вкладку Виджет — Background Widget.

Шаг 5

Справа в настройках выберете картинку или цвет, который будет использован в качестве фона сайта. Чтобы загрузить изображение, его сначала нужно скачать в Медиатеку. Медиатеку можно интегрировать с самыми популярными сервисами, такими как Flickr, Facebook, YouTube и Picasa.

Шаг 6

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

Шаг 7

При двoйном клике мыши можно изменить любой визуальный объект сайта, в том числе все названия и заголовки. Также вы можете изменить шрифт, цвет, размер текста.

Шаг 8

Если стандартные шрифты вам не подходят, тогда вы можете загрузить свой шрифт. Для этого сначала загрузите шрифт на свой компьютер, нажмите в панели управления. Добавить шрифт — Создать шрифт и выберете загруженный файл. Система поможет вам преобразовать шрифт в необходимый sfw-формат. Мы добавили шрифт Rex .

Шаг 9

Все визуальные объекты также можно при двойном клике мыши перетащить или перевернуть.

Шаг 10

Далее кликаем два раза по виджету меню (справа вверху) и переименовываем пункты меню.

Шаг 11

Сохраняем изменения и смотрим результат.

Шаг 12

Открываем вкладку «Раздел» вверху. Там видны все разделы сайта и вы можете перейти на любую из страниц. Здесь необходимо определить действие, которое будет происходить при нажатии на один из пунктов меню, к примеру, при нажатии на вкладку «Галерея» перенаправление на страницу с галереей.

Шаг 13

Перейдем к странице с галереей. Кликните дважды по горизонтальной ленте изображений, вам откроется ее содержимое. Выделите его и удалите стандартные картинки, загрузите свои фотографии в Медиатеку и добавьте их в галерею.

Шаг 14

Сохраняем изменения и любуемся на результат:

Шаг 15

Переходим к странице «О нас». Кликаем дважды по текстовому полю (Rich Content Widget), открывается поле его редактирования. Тут вы можете вставить текст, изменить его, добавить видео или изображение. Текст может быть любой длины, в блоке есть ползунок.

Шаг 16

Не забудьте все сохранить. Вот как это будет выглядеть на сайте:

Шаг 17

Аналогичным образом редактируем страницу новостей:

Шаг 18

На странице услуг вы можете добавить кнопку под текстом, которая будет перенаправлять человека на подстраницу страницу сайта с дополнительной информацией. Изменить кнопку можно также в поле редактирования Rich Content Block.

Шаг 19

Сохраните изменения и нажмите на Предпросмотр.

Шаг 20

Переходим к странице контактов.

Шаг 21

Виджет Google Maps также просто настраивается, достаточно дважды кликнуть по карте.

Шаг 22

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

Шаг 23

Отредактированная форма контактов:

Шаг 24

В панели управления также есть также мобильная html-версия сайта. Чтобы отредактировать ее, нужно открыть Редактор мобильной версии. Html-вариант сайта будет открываться автоматически при входе на сайт с любого мобильно устройства. Вам необходимо поставить галочку напротив: Перенаправлять мобильные устройства на альтернативную версию сайта.

Шаг 25

Посмотрите на результаты нашей работы над шаблоном. На изображении «до» и «после» отчетливо видна разница.

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

Автор: Иван Алексеев

Также Вас могут заинтересовать:  

• 12 принципов Flash-анимации на практике
• After Effects Flash туториалы
• Использование флип-эффекта в веб-дизайне
• Создаем 3D-Flash демку
• Топ 5 CMS для флеш-сайтов

 



Комментарии