Мини-урок по работе с шаблоном: создание flash-сайта для студии дизайна интерьера
15 августа 2012 | Опубликовано в Flash | 15 Комментариев »
По своей сути 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 для флеш-сайтов
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
549
- Насколько важно сегодня использовать Web Safe цвета?
538
- 20 наборов кистей для Фотошопа, которые вам пригодятся
530
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191
15 августа 2012 в 11:24
1. Картинки до безобразия маленькие
2. Сайты на Flash мертвые для SEO, даже если команда разработчиков MotoCMS утверждает, что все отлично и шикарно — это не правда. Индексироваться будет, но множество техник не применимо (если только не делать html версию сайта).
Ответить
августа 15, 2012 at 1:08 пп
Все шаблоны MotoCMS имеют html версию, что и гарантирует полную индексацию. Можете ознакомится со статьей «Поисковая оптимизация сайтов с MotoCMS».
Ответить
августа 15, 2012 at 4:17 пп
Я прочитал указанную статью. В принципе все от вас зависящее вы сделали. Дали прописывать все стандартные методы как по учебнику — молодцы, НО вы не учитываете много дополнительных факторов, например тема озвученная в комментарии по поводу поведенческого фактора, мне кажется это не пользователь ее переоценивает, а вы недооцениваете.
HTML версия сайта хорошо, но что делать с огромным мобильным рынком?
Я понимаю что вы всячески будите защищать flash, это ваш хлеб, но в глубине души вы понимаете, что для сайтов это мертвая технология. Я не спорю, что игры, приложения некоторые имеет смысл еще делать на нем, но сайты — бред. Если гнаться за красивостями (от которых бывает подташнивает), то уже давно, многое можно делать с помощью javascript и других технологий которые поддерживают современные браузеры (даже IE8).
Ответить
августа 17, 2012 at 2:17 дп
на счет мобильного рынка, в статье написано, что есть возможность создать мобильную html-версию сайта, которая будет открываться на всех новых мобильных устройствах.
Ответить
августа 19, 2012 at 11:21 дп
Меня как будто не слышите) или мы не понимаем друг друга. Создание html версии сайта, скорее всего какое-то шаблонное, чтобы сделать его красиво, нужен дополнительно дизайнер и верстальщик, ведь если основной сайт офигенный, а html версия шаблонная, это как-то странно выглядит. А если подключается дизайнер и верстальщик, то зачем изначально вообще было делать на flash?
Ответить
15 августа 2012 в 13:05
Солидарен с Дмитрием
от себя хочу добавить, что у flash нет будущего,
тем более, что уже сама компания Adobe отказалась от Flash в пользу HTML 5
Ответить
15 августа 2012 в 13:06
Спасибо за урок. Ясно дает понять, что можно делать в этой системе. Возможности очень большие. Только смущает одно — это flash!
Ответить
августа 22, 2012 at 12:58 пп
не нравится идите боком.. эта статья для тех кому нравится флеш..
и вообще флеш не для СЕО.. так какого тогда лезите сюда СЕОШНИКИ???...
флеш придумана для дизайнеров и точка.
Ответить
августа 22, 2012 at 1:08 пп
От флеша отказываются все) даже дизайнеры, даже сеошники, даже программисты, даже клиенты) и боком пойдете вы и ваш флеш, грубить мне не нужно!
Ответить
августа 23, 2012 at 4:55 пп
Комментарий скрыт из-за рейтинга
Ответить
августа 23, 2012 at 4:58 пп
Сейчас почти все тоже самое можно реализовать при помощи html и css. И в этом случае все довольны, ну кроме вас, наверное: и сеошники и дизайнеры)
Ответить
августа 23, 2012 at 6:42 пп
реализуйте рекламный баннер анимированный на технологии html и css
с различными сценами или дайте пример этого. =)
Ответить
августа 23, 2012 at 6:48 пп
Я с вами полностью согласен. Flash — это инструмент для создания баннеров)
24 августа 2012 в 0:11
ну вот нашли консенсус
и пока в этой области флеш заменить нечем. так что не умрет флеш еще лет 10 точно. ie ведь не умер =)
Ответить
19 мая 2014 в 19:44
Очень интересная информация, но к сожалению у меня не получилось создать шаблон. В который раз убеждаюсь, что это не моё и заказываю шаблоны на ресурсе Проб2б prob2b.biz.
Ответить