Урок по работе с flash-шаблоном: создание сайта для студии веб-дизайна

Технология flash по своей сути очень сложна, но MotoCMS сможет существенно упростить ее. Никогда ранее эта технология не была так близка и понятна обычному пользователю, как сегодня. На основе шаблона можно создать веб-проект любого уровня сложности, даже если вы не владеете специальными знаниями и навыками. Сегодняшний урок доказывает это на практике. Шаг за шагом мы разберемся, как подстроить шаблон под ваши цели и задачи с помощью встроенной Панели управления MotoCMS. Вы увидите, что готовый сайт будет изменен до неузнаваемости.

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

Шаг 1

Я выбрала шаблон из категории «Кафе и рестораны» под номером 40629. Я специально выбрала готовый сайт из наименее подходящей категории, чтобы показать, что шаблон можно подстроить под совершенно любой веб-проект.

Шаг 2

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

Шаг 3

Чтобы не было недоразумений, лучше сразу же изменить язык интерфейса на русский. Чтобы сделать это, откройте вкладку вверху «настройки» - «настройки панели управления» - «дополнительные настройки» - «язык интерфейса: русский».

Шаг 4

Изменим светлый фон на темный, чтобы изображения выглядели ярче и контрастнее. Я использовала стандартную текстуру apple. Откройте слева вкладку «Виджет», далее «Background Widget».

Шаг 5

Кликните два раза по пустому полю фона сайта и перейдите в область редактирования бэкграунда. Чтобы изменить фон на какую-либо картинку, нужно для начала загрузить ее в Медиатеку. Сверху есть кнопка «Добавить медиа», с ее помощью можно добавить текстуру на сайт.

Шаг 6

Лучше растянуть картинку на всю ширину сайта, выбрав в настройках справа вкладку «Fit». Теперь нажмите кнопку «Сохранить» и «Предпросмотр».

Шаг 7

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

Шаг 8

Если стандартных шрифтов для работы вам не достаточно, вы можете добавить новый шрифт при помощи вкладки «Add font» в списке шрифтов или открыть его в настройках панели. Вы перейдете в менеджер шрифтов, там можно загрузить уже готовый шрифт с компьютера или преоразовать его в sfw-формат. Именно этот формат использует Панель управления. В уроке использован шрифт Rex.

Шаг 9

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

Шаг 10

Дальше кликните по ленте меню, чтобы отредактировать ее: удалить или добавить новые пункты меню, переименовать их.

Шаг 11

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

Шаг 12

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

Шаг 13

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

Шаг 14

Смотрим, как загруженные изображения будут смотреться на сайте. Нажмите кнопку «Предпросмотр» и любуйтесь результатом.

Шаг 15

Перейдем к странице услуг. Тут есть стандартный текстовый блок, который можно легко отредактировать.

Шаг 16

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

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

Шаг 17

Переходим к странице «Команда». Там тоже есть текстовый блок, аналогичным образом редактируем и его.

Шаг 18

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

Шаг 19

Переходим к странице контактов. Тут тоже все достаточно просто. Вам необходимо отредактировать карту - указать на ней месторасположение вашего офиса, а также изменить контакт-форму.

Шаг 20

Начнем с карты Google Maps. Просто масштабируете карту с помощью колесика мыши и ищете ваш адрес.

Шаг 21

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

Шаг 22

Сохраните изменения и нажмите на кнопку «Предпросмотр». Вот как выглядит страницы контактов у меня.

Шаг 23

Вы также можете создать мобильную версию сайта в формате html, которая будет доступна на всех мобильных устройствах нового поколения. Необходимо поставить «галочку» в настройках, чтобы мобильные устройства были перенаправлены на альтернативную (мобильную) версию сайта.

Теперь сравним два варианта «до» и «после» редактирования. Разница впечатляет. Мы сделали из шаблона для сайта ресторана отличный персональный сайт для веб-студии.

Технология flash не так страшна, как кажется. Попробуйте и вы изменить шаблон. Не обязательно иметь навыки программирования, кастомизация шаблона - это увлекательная игра с дизайном. Делитесь своими мыслями в комментариях.