После этого урока вы научитесь создавать шапки сайта с помощью программного средства Adobe Muse. Позже мы подробно разберемся с методами продвижения, редактирования и монетизации сайта.

Для начала откроем шаблон и начнем с ним работать.

Запуск шаблона Adobe Muse

 

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

Для выполнения полной копии сайта нам понадобятся определенные инструменты. Вооружимся программным средством под названием Сolormania. Она находится в свободном доступе в интернете. Программный интерфейс выглядит следующим образом:

 

Программка помогает определить точный цвет того или иного элемента, размещенного на сайте. Для этого достаточно кликнуть по выбранному цветовому элементу и воспользоваться специальным инструментом в виде пипетки. Далее наводим её на нужный графический объект и получаем буквенной значение цветового кода, который можно применить к собственному сайту.

 

Не менее важным является инструмент под названием Просмотр кода элемента. Для получения программного кода по избранному элементу необходимо кликнуть по нему правой клавишей мышки. Через браузер Гугл Хром посмотреть код можно будет проще простого. Однако для других браузеров такая функция может называться немного по-другому, но фраза очень похожа:

 

Для чего именно нам нужна такая функция? Для выполнения задания нам придется сделать копию шапки сайта и точно воспроизвести все сопутствующие параметры: цвет, шрифт текста и его характеристики. Именно эта информация и скрывается под кнопкой под названием Просмотр кода элемента.

Перейдем к созданию шапки сайта через программное средство Adobe Muse.

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

Создание прямоугольника через Adobe Muse

 

Применяем функцию пипетки и сделаем копию программного кода цветной шапки в браузере. Теперь мы можем снова зайти в программную среду Adobe Muse, перейти на вкладку под названием Заливка и вставим скопированный код. Останется только подтвердить внесенные изменения.

Применение заливки к прямоугольнику через Adobe Muse

 

Теперь остается только обесцветить обводку вокруг прямоугольного элемента. Для этого выберем параметр цвета и присвоим ему нулевое значение цвета.

Работаем с обводкой прямоугольника в Adobe Muse

 

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

Создание логотипа через Adobe Muse

 

Пользователь может менять текст, шрифт и его размеры по своему усмотрению. Выделив соответствующий текстовый фрагмент, можно будет поменять все или один из указанных параметров. Иногда в программной среде Adobe Muse не хватает требуемого шрифта. Его можно добавить из другого источника.

Работа со шрифтами в Adobe Muse

 

Запустим рабочее окно со шрифтами. Можно выбрать один из представленного списка и подтвердить его применение или же воспользоваться поиском, чтобы отыскать более подходящий вариант.

Как добавить шрифт в Adobe Muse

 

Далее дополним шапку сайта контактными номерами компании, по которым клиенты смогут получить ту или иную информацию. С этой целью рисуем еще одно текстовое поле и дополняем его соответствующими числовыми данными.

Добавление телефонов на шапку сайта в Adobe Muse

 

Порядок работы в данном случае полностью совпадает с созданием логотипа. Результат должен выглядеть приблизительно так:

Описание для шапки сайта в Adobe Muse

 

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

Пробуйте, и у вас обязательно получится!