Как сделать страницу регистрации в adobe muse
Обновлено: 04.07.2024
Настройки веб страницы в Adobe Muse
В этом видеоуроке рассмотрены нюансы и тонкости по настройки веб страницы в программе Adobe Muse. Особенности настройки и ключевые моменты.
Настройки веб страницы. Начало.
Вы уже наверняка создавали страницы и сайты в Adobe Muse, но при публикации возможно не учитывали некоторые очень важные нюансы для того чтобы страницы сайта грамотно отображались в различных браузерах и имели вес в поисковых системах.
Давайте откроем программу, создадим File -> Новый сайт. Здесь неважно какие настройки веб страницы, потому что мы сейчас будем просто рассматривать настройки параметров страниц и при создании нового сайта у нас первая страница является домашняя. Давайте ее сразу откроем, посмотрим ее свойства.
Для домашней страницы у нас есть следующие свойства. У нас есть макет, где мы настраиваем все удобства для дальнейшей работы, где мы можем добавить значок сайта это favicon, о котором я рассказывал в одном из предыдущих моих видеоуроков, и также здесь еще есть две закладки. Метаданные и параметры. Вот о них мы и поговорим.
Настройки веб страницы. Метаданные.
Вкладка Метаданные. Давайте посмотрим, что у нас здесь есть. Здесь у нас есть описание, ключевые слова и html для head. Здесь мы можем вставить в поле заголовка элемент html кода, который будет включен в раздел head страницы. Здесь конечно же нужно соблюдать и этот текст, который здесь будет расположен, должен иметь допустимый разметку кода html.
Настройки веб страницы. Описание.
Описание. Описание страницы будет отображаться в поисковой системе рядом с запросом. Здесь вам нужно кратко описать суть вашего сайта или страницы, возможность даже вставить пару ключевых слов. Что собой представляют ключевые слова. Ключевые слова — это запросы, по которым пользователи будут находить вашу страницу или сайт в поисковых системах. Здесь также нужно указать слова, которые будут более точно отображать суть вашей страницы.
Дальше. Вкладка Параметры. Во вкладке параметры мы видим, что можем мы задавать имя страницы, заголовок страницы, имя файла, карту сайта включать/отключать. Дальше есть у нас параметры меню, язык и символы web-шрифтов.
Настройки веб страницы. Заголовок страницы.
Для домашней страницы у нас имя может быть здесь совершенно любое, на любом языке. Заголовок страница мы также можем поменять и сделать его отличным от имени страницы. Можем оставить таким же, поставив галочку “как имя страницы’’. Имя файла для домашней страницы мы поменять не можем. По умолчанию для всех сайтов имя файлов index.html для домашней страницы. Это самая главная страница сайта. Она самая первая и имя ее поменять нельзя. Тоже касается карты сайта, то здесь мы можем включать страницу в карту сайта, либо не включать. Я рекомендую оставлять эту галочку. Тогда поисковые роботы будут индексировать эту страницу.
Давайте перейдем снова в план сайта и попробуем давайте еще пару страниц. Зайдем на нашу дополнительную страницу, которую мы создали и посмотрим ее свойства. Здесь мы также должны задать имя страницы во вкладке Параметры. Здесь мы может изменить заголовок страницы, поставить его отличным от имени страницы и здесь вы видите, что мы можем изменять имя файла. Особенно я хотел бы обратить на это внимание.
Настройки веб страницы. Имя файла и имя страницы.
Когда мы создаем новую страницу в плане сайта (давайте я сейчас закрою пока) автоматически русскоязычная программа Adobe Muse дает нам название “Без имени-3”. Так вот. Вернемся сейчас к свойствам страницы “Без имени-3” и что я хотел бы здесь отметить – вот это имя вам нужно поменять обязательно. Поменять его таким образом, чтобы оно отображалось на английском языке. Если у вас какие-то ключевые запросы по которым вы хотите, чтобы отображалось эта страница в поисковых системах я рекомендую вам во вкладке параметры создать имя страницы английскими буквами русские слова, то есть как бы транслитерацией написать имя страницы, но обязательно это должны быть английские символы. Здесь вот это никак нельзя на русском языке оставлять. Дальше. Все остальное здесь оставляем по умолчанию, здесь особо ничего менять не надо.
На этом все. Смотрите мои следующие и предыдущие видеоуроки. Также в верхнем правом углу вы можете нажать на кнопку «Информация» (i), зайти на мою страничку и подписаться на мою рассылку и скачать 3 бесплатных шаблона и 49 виджетов. А на этом все дорогие друзья, до следующих видео. Пока.
Создание новых страниц производится в режиме План .
По умолчанию в Muse создается только одна страница (Домашняя страница), все остальные страницы Вы должны создать сами.
Миниатюра домашней страницы (как и все страницы в Muse) при наведении курсора имеет вид, показанный на рисунке слева.
Под миниатюрой стоит название страницы (Home - Домашняя страница), еще ниже - название шаблона, по которому создана страница (A-Master) - см. Работа с шаблонами .
При щелчке по значку "+" справа или слева от Домашней страницы (Home) создается пустая страница верхнего уровня (в англоязычной справке такую страницу называют "страницей родного брата").
При щелчке по значку "+" ниже домашней страницы создается страница 2-го уровня (дочерняя страница).
В свою очередь можно создать страницы 3-го, 4-го и т.д. уровней, но обычно двухуровневой структуры сайта вполне достаточно.
Вся совокупность созданных в режиме План страниц составляет карту сайта (план сайта).
Созданная карта сайта служит основой для автоматического создания панели наавигации по сайту (меню) - см. Панели навигации (меню) .
Названия страниц будут стоять на кнопках меню, если меню создается редактором автоматически (с использование виджета "Меню").
Это же название будет фигурировать после публикации сайта в окне браузера при просмотре страницы посетителями.
Прикрепление страниц к шаблонам
Все страницы в Muse, как правило, создаются по шаблонам.
Создание и оформление шаблонов - операция, предшествующая созданию новых страниц, т.е. сначала создается шаблон, и только после этого он применяется к страницам.
- В режиме План щелкните по шаблону в разделе шаблонов и перетаскивайте его на страницу. При совмещении миниатюры шаблона и миниатюры страницы (при появлении синей рамочки) отпустите кнопку мыши.
- Щелкните по миниатюре страницы правой кнопкой мыши, в контекстном меню выберите "Шаблоны" - выберите нужный шаблон.
Если Вы хотите все страницы сайта оформлять индивидуально, то в этом случае достаточно оставить шаблон, создаваемый по умолчанию (Шаблон-А), пустым.
Естественно, что и все вновь создаваемые страницы окажутся пустыми.
Можно создать часть страниц сайта по шаблонам, а часть - без применения шаблонов.
Чтобы создать страницу без шаблона, перключитесь в режим План , создайте новую страницу, в контекстном меню миниатюры созданной страницы нужно выбрать Шаблоны - Без шаблона .
При любом варианте создания страниц без шаблона изначальный код страницы будет одинаковым.
Всем, привет! Сегодня покажу, как сделать простую страницу html с заголовком, видео, встроенным из Ютуб, и кнопкой со ссылкой в программе Adobe Muse.
Для чего такая страница может пригодиться?
1. Для партнерских обзоров. Когда в видео вы рассказываете о продукте, делаете призыв к действию, а под проигрывателем добавляете кнопку со ссылкой. На такой странице нет никаких отвлекающих факторов. Она служит утепляющей прокладкой, вместо того чтобы вести людей сразу на продающую страницу. Пример страницы с партнерским обзором ниже:
2. Для страницы-благодарности после активации подписки на рассылку. Опять же, такая страничка может выглядеть весьма просто и понятно. Заголовок в стиле «спасибо за подписку, обещанные материалы уже отправлены на вашу почту, а сейчас посмотрите это небольшое видео». В видео вы можете представиться своим новым подписчикам, рассказать о себе, а также сделать дополнительное недорогое платное предложение, усиливающее вашу бесплатность. Чтобы человек мог воспользоваться этим предложением, под видео вы добавляете кнопку со ссылкой. Пример странички ниже:
3. На такой страничке можно давать контент из вашего бесплатного курса за подписку. Например, у меня есть курс «Три модели заработка на партнерках», он состоит из трех отдельных видео и дополнительных материалов, которые находятся на вот таких простых html-страницах. Пример:
С примерами использования страниц разобрались, теперь поговорим о реализации. Я покажу, как делаю такие одностраничники в программе Adobe Muse. У меня портативная версия 2015 года, поэтому если вы используете другие версии, могут быть расхождения в элементах интерфейса. Но принцип создания страницы, добавления на нее различных элементов и экспорт в html-формате остается прежним.
Подробный урок вы можете посмотреть в видеоформате:
Создание странички в Мьюз
Откроется окошко с настройками сайта – здесь я оставляю гибкое значение ширины (то есть, страница будет адаптироваться под экраны мобильных устройств). Максимальную ширину страницы оставляю 960. Минимальную высоту ставлю 750. Потом ее можно будет отрегулировать ползунками. Все остальное не трогаю.
Создается страница и ее шаблон. Чтобы начать редактировать сайт, двойным кликом мыши открываем верхнюю страничку «Домашняя». Шаблон А (нижняя страница) также пригодится, когда понадобится отрегулировать нижнюю часть сайта (футер).
Начинаю я с того, что добавляю фон. Это может быть заливка цветом. Либо в качестве фона может выступать любое изображение, загруженное из интернета.
Если вы, к примеру, хотите, чтобы контентная часть была отдельно, а фон отдельно, то можно нарисовать прямоугольник и залить его другим цветом. А в этом прямоугольнике уже расположить свой контент – заголовок, видео и кнопку.
Для создания прямоугольника нажмите по соответствующей иконке на панели инструментов слева. При помощи курсора растяните прямоугольник на страничке, как вам нужно.
Чтобы зафиксировать нижнюю часть и сделать отступы прямоугольника одинаковыми сверху и снизу, нам нужно отрегулировать положение футера в шаблоне. Для этого, переключаемся на соседнюю вкладку «Веб-сайт», двойным кликом мыши открываем его шаблон А.
Внизу странички будет 2 линии, ухватившись мышкой за ползунок нижней линии, подтаскиваем ее к верхней, как бы подтягивая футер. Должно получиться вот так (три ползунка разных линий вместе):
Далее снова переключаемся на страничку «Домашняя» и подтягиваем прямоугольник так, чтобы отступы от фона сверху и снизу были одинаковые (ориентируемся на цифры линейки).
При этом удобно пользоваться предварительным просмотром страницы в браузере. Так, мы сразу видим, как выглядит наша страничка в браузере.
Прямоугольник можно залить любым цветом и скруглить ему углы, пользуясь инструментами на панели сверху.
Теперь добавим заголовок, используя инструмент «Текст». Добавляется текст следующим образом – при помощи мыши блок растягивается по фону, внутри появляется курсор для печатания. Когда текст напечатали, можно переключиться на иконку курсора, чтобы подрегулировать размер и положение текстового фрейма на странице.
Чтобы изменить шрифт, размер, цвет текста, указать выравнивание – используйте вкладку «Текст» справа.
Если там ее нет, тогда зайдите во вкладку «Окно» вверху и в выпадающем списке поставьте галочку рядом с «Текст».
Чтобы удалить любой блок со страницы, выделите его курсором и нажмите на кнопку «Delete».
Как добавить видео с Ютуба?
На панели инструментов справа нажмите на вкладку «Библиотека мини-приложений». Откройте список «Социальная сеть», спуститесь вниз и выберите Ютуб.
Просто кликните по надписи и перетащите фрейм на свою страницу.
У вас появится вот такой проигрыватель. Вы можете перемещать его по странице, как угодно и, растягивая края мышью, устанавливать нужный размер. Чтобы добавить свое видео, нажмите на иконку в виде треугольника.
В открывшемся окне с настройками вам нужно указать идентификатор своего видео. Идентификатор – это те символы, которые идут после v=, как на скриншоте:
Здесь же вы можете задать и другие настройки проигрывателя – цветовую схему (темную или светлую), начало проигрывания ролика, автовоспроизведение, отключить похожие в конце и т.д. Полезных настроек тут много.
Как добавить кнопку?
Выберите изображение у себя на компьютере. Растягивая кнопку мышкой, расположите ее под плеером. Мышкой вы можете перетаскивать кнопку по странице, а двигая ползунки по краям – менять ее размер.
Таким же образом добавляются и другие картинки на сайт в Мьюз – обложки, иконки и т.д.
Чтобы сделать кнопку кликабельной, выделите ее курсором, нажмите по надписи «Добавить или фильтровать» рядом с надписью «Гиперссылки». В открывшуюся строку вставьте ссылку и нажмите «Enter».
Теперь нажмите непосредственно на надпись «Гиперссылки». Здесь я обычно ставлю галочку «Открывать ссылку в новой вкладке».
Экспорт сайта в html-формате к себе на компьютер
Итак, после того как вы закончили работу над страничкой, результаты предпросмотра в браузере вас устраивают, можно экспортировать ее к себе на компьютер.
В появившемся окне переключитесь на вкладку «Параметры». Здесь вместо названия «Домашняя» укажите свое название. Нажмите «Enter», чтобы сохранить. В соседней вкладке «Метаданные» можно задать описание и ключевые слова для страницы.
В появившемся окне можно сразу указать адрес, по которому будет открываться данная страничка в интернете. Состоит он из домена вашего сайта и названия папки, в которой вы загрузите на хостинг свой одностраничник.
Во второй строчке, нажав на иконку папки укажите место, куда будет экспортирован сайт. У меня это рабочий стол – папка «test-obzor». Нажмите на «ок», чтобы начался экспорт.
Подготовка и загрузка сайта на хостинг
Итак, после экспорта у вас в папке должны быть вот такие файлы:
Файлы «muse_manifest» и «sitemap», в принципе, можно удалить. Оставшиеся 4 важны для корректной работы одностраничкика.
Теперь дело за малым – нужно загрузить папку с одностраничником на хостинг, в корневую директорию вашего сайта.
Укажите для этой папки название, которое будет фигурировать в ссылке на данную страницу. Название рекомендую писать латиницей, без пробелов. В моем случае «test-obzor».
Запаковываю папку в архив rar. Не все хостинги его поддерживают, например, на Офферхосте работает архив zip.
Далее выделяю архив на хостинге мышью, захожу во вкладку «Архиватор» и жму «Разархивировать».
Одностраничник с обзором, сделанный в программе Adobe Muse готов и доступен в интернете.
Вот и все хитрости. Друзья, как по мне, довольно просто и удобно делать сайты без знания кода.
Конечно, это был урок от дилетанта, т.к. мои познания Адоб Мьюз довольно поверхностные. Если же вы хотите использовать возможности этой программы по максимуму, создавать красивые сайты для себя (или возможно на заказ), то рекомендую изучить курс Владимира Гынгазова «Adobe Muse Быстрый Старт 2.0».
Также, если вы еще не видели мой курс «Три модели заработка на партнерках» , то рекомендую его – он бесплатный, в нем я на конкретных примерах показала рабочие и актуальные на сегодняшний день способы продвижения партнерок, в том числе через обзоры.
Читайте также: