Создание многостраничного сайта в Adobe Muse по готовому макету из Photoshop #24

Скачайте 3 бесплатных шаблона лендинга в Adobe Muse: http://goo.gl/OjngFP
Смотрите бесплатный курс по веб-дизайну: http://goo.gl/w8FYc5

Каждому дизайнеру фрилансеру нужно уметь создавать многостраничные сайты в Muse, часто такие сайты заказывают, например, компании в качестве визитки, или небольшие интернет-магазины (если товаров не очень много). В этом уроке по Muse покажу как создать такой сайт используя готовый макет, который предварительно был нарисован в Photosop. Научу правильно вставлять изображения, покажу разные способы создания кнопок. Создадим форма для Muse, якоря для плавной прокрутки по сайту, вставим видео с помощью виджета для Muse, фотогаллерею и возможность коментирования из Вконтакте. В итоге вы сделаете многостраничный сайт, прикрутите к нему Яндекс Метрику, чтобы знать показатели.

Домашнее задание:
Создать сайт компании и и выложить на хостинг. В сайте должны присутствовать страницы:
1. Главная (слайдер с фотографиями, текстовое описание компании с заголовком, кнопка оставить заявку со всплывающим окном и формой обратной связи).
2. Услуги (описание услуг с фотографиями). Внизу вставить виджет комментариев из вконтакте.
3. О компании (текстовое описание компании с фотографиями)
4. Контактная информация (все контактные данные и форма обратной связи).
На всех страницах должен присутствовать логотип компании (если нет логотипа, можно взять готовый из стоков поставить чужой логотип), контактный телефон и горизонтальное меню.

Домашнее задание для продвинутых:
1. В услугах – создать отдельные страницы для каждого вида услуг.
2. На главной: 3 отзыва от клиентов с фотографиями и должностями, видеоролик из ютуб или vimeo.
3. Зарегистрировать и вставить яндекс-метрику на сайт

Таймкоды:
0:10 Зачем нужны многостраничные сайты
1:15 12 колонок при создании сайта
3:20 Перенос изображения в шапку из Photoshop
9:30 Настройка меню
15:60 Заголовок
18:50 Перенос макета сайта из фотошопа в мьюз
20:40 Кнопки
36:50 Формы
46:10 Привязка формы к кнопке
56:00 Закрепление блока
58:32 Якорь
1:01:00 Вставка видео
1:05:50 Фотогалерея
1:09:40 Комментарии из Вконтакте
1:15:00 Яндекс Метрика
1:21:01 Задание

Больше полезных видео по веб-дизайну в группе вконтакте: https://vk.com/4wwweb
Я вконтакте: http://vk.com/danilfimushkin
Личный блог: http://goo.gl/ndRggw
Бесплатный курс по Adobe Muse: http://goo.gl/llX8kz
Бесплатная подписка на видеоуроки по дизайну: http://goo.gl/iQxZ8t

ПРИСОЕДИНЯЙТЕСЬ
Поделиться

Данил Фимушкин

На моем канале собраны бесплатные уроки веб-диайзайна, уроки фотошопа, уроки о дизайне сайтов и многое другое. Мои студенты начинают и с нуля: учатся веб-дизайну и даже открывают свои веб-студии. Итак, этот канал можно назвать бесплатной школой веб-дизайна Данила Фимушкина :) Приход на бесплатный мастер-класс по веб-дизайну



Обсуждение закрыто.