Как сделать страницу регистрации в adobe muse
Из этого видеоурока вы узнаете об одном из способов использования админ-панели на сайтах, созданных в Adobe Muse. Обычно админ панель необходима на некоторых сайтах, которые требуют постоянного внесения изменений, добавления текста, картинок и других элементов. Вот мы и рассмотрим как выкрутилась компания Adobe, для того чтобы хоть как-нибудь оправдать в этом плане свой продукт для создания сайтов – программу Adobe Muse. Итак, смотрим этот видеоурок про админ-панель – CMS для Muse.
Вступление.
Одним из актуальных вопросов в последнее время является вопрос передачи сайта заказчику и последующего внесения им изменений на страницах сайта, сделанных в Adobe Muse. В этом видеоуроке речь пойдет об одном самом простом и стандартном способе (сервисе), который предлагает сама компания Adobe – простая CMS для Muse.
Пример и добавление картинок.
Открываем программу Adobe Muse, я уже здесь сделал специальный пробник для того, чтобы показать вам, как это все делается, и сейчас покажу вам, как он выглядит. Вот так выглядит этот пробничек, то есть это буквально одна страничка, на которой размещены картинки. Картинки размещены с помощью меню File -> Поместить. Именно с помощью этой функции, иначе их нельзя будет потом поменять. Вот картинка background как раз размещена с помощью создания обычного графического блока (прямоугольника) и с помощью заливки картинкой. Эту картинку поменять в дальнейшем будет невозможно. Точно так же создан графический блок в футере и ему сделана заливка. Обратите на это внимание, я потом дальше покажу вам, что их нельзя поменять.
Публикация на хостинге.
Итак, допустим, мы создали сайт, купили хостинг и должны разместить его на хостинге. Заходим в меню File -> Передача на ftp-сервер или нажимаем клавиши Ctrl+Alt+F. У вас выскочит скорее всего такое окошко с самого начала. Здесь вам нужно будет ввести адрес ftp-сервера. Его можете найти в админке вашего хостинга. Так же нужно ввести здесь имя пользователя от ftp-аккаунта и пароль от ftp-аккаунта. Можете поставить галочку “Сохранить учетные данные”, чтобы каждый раз их не вводить и нажимаете “Далее”. Идем подключение к ftp-серверу и дальше программа предлагает нам указать url-адрес сайта, по которому будет доступна данная страница, и папку на сервере, где будут размещаться файлы. Здесь выбираете “Все файлы”. Первый раз это будет у вас стоять по умолчанию, потом в дальнейшем, если вы что-то меняете, вы можете выбирать только измененные файлы. Я выбираю “Все файлы”, нажимаю “Окей” и идет передача файлов на ftp-сервер. Это происходит довольно-таки быстро, если у вас скоростной интернет. Файлы у вас быстро загрузятся, тем более, если их не так много, всего лишь одна страничка.
CMS для Muse. Возможности стандартной CMS
При наведении мышки на графические или текстовые блоки у нас появляется вот такое выделение и под блоком кнопка “Редактировать”. Как я уже говорил в самом начале, редактировать задний фон мы не можем, так как мы его создавали с помощью инструмента “Прямоугольник” и осуществляли заливку картинкой. То же самое у нас в футере: мы создавали прямоугольник и заливали его каким-то цветом, редактировать его мы не можем. Мы можем редактировать тексты и все элементы, которые мы создавали другим способом. Вот эти вот картинки я создавал с помощью функции “Поместить” в программе Adobe Muse.
CMS для Muse. Внесение изменений на сайт
Итак, давайте попробуем что-нибудь изменить. Допустим, нам хочется поменять вот это название “Урок 1” на какое-нибудь другое. Давайте нажмем “Редактировать”, перед нами выскакивает вот такое окошко, где мы можем изменить текст. Запишем, например, “Занятие1”, нажимаем “Обновить” и видим, что наш текст поменялся на “Занятие1”. То же самое можем сделать с этим текстом, нажав на “Редактировать” и поменять здесь все, что мы хотим.
Ссылки
Еще одна функция здесь есть – это добавление ссылки. Мы можем выделить любое слово и поместить на него ссылку. Нажимаем вот на этот значок, нажимаем “Вставить ссылку” и ссылку мы можем вставить на страницы, на внешний url. Здесь можно ставить внешнюю ссылку и подсказку. Можем так же указать номер телефона, либо выбрать какой-либо файл, который разместится так же на нашей странице и люди смогут его скачать по этой ссылке. Либо мы можем вставить адрес электронной почты, и, нажав на эту ссылку, люди смогут написать нам письмо. Вставляю здесь ссылку, делаю небольшой комментарий, ставлю галочку “Открыть в новом окне”, если мне надо, и нажимаю “Вставить ссылку”. Мы видим, что ссылка вставилась и доступна так же подсказка при наведении мышки. Нажимаем “Обновить”. Мы можем так же выделить весь текст и удалить ссылку. Выделяем весь текст, “Удалить ссылку”, и у нас все ссылки удаляются. Нажимаем “Обновить” и все ссылки у нас здесь пропали, ничего больше нету. То есть вот так мы можем легко редактировать текст.
Картинки
Так же мы можем изменить любую картинку, например, нажав “Редактировать” под картинкой. У нас сразу выскакивают все картинки, которые есть на данном сайте. Либо мы можем выбрать картинку с компьютера, нажав клавишу “С компьютера”. Выбрав меню “С компьютера” мы можем выбрать здесь любой файл с нашего компьютера, допустим, вот такой, нажимаем “Обновить”, идет передача этого файла на сервер в папку с картинками и по окончании передачи эта картинка у нас разместилась как раз там, где мы и хотели ее поменять. Нажимаем еще раз “Редактировать”. Мне, например, не нравится эта картинка, и я могу выбрать ту же самую, которая вот здесь стояла – с компьютера. Нажимаю “Обновить”, происходит обновление, и картинка встала на место. Точно таким же образом можно поменять любой текст, даже можно щелкнуть, если это у вас кнопка. Можно по кнопке щелкнуть и перейти на другую страницу. В общем, так легко и просто можно редактировать сайт прямо в браузере.
CMS для Muse. Сохранение и обновление проекта
Для того, чтобы все изменения изменились и по нашему адресу на страницу все наши изменения сохранились, мы нажимаем кнопку “Опубликовать”. После того, как мы это сделали, мы можем перейти назад по адресу нашей страницы и, например, обновить. Я нажимаю F5 и видим, что наш заголовок поменялся на “Занятие1”. Вот таким вот образом можно редактировать созданные в Adobe Muse сайты прямо в браузере с помощью Adobe Muse CC inbrowserediting. Такая вот простенькая админка, позволяющая нам поменять тексты и картинки, не пользуясь самой программой Adobe Muse. Это удобно при передаче файлов заказчику, то есть заказчику мы передаем данные от его ftp-аккаунта и ссылку из браузера, на котором размещена его страница, и он сможет легко поменять на нем картинки и тексты.
Альтернативные CMS
Существуют, конечно, и более сложные методы использования админ панели – CMS для Muse. Это прикручивается, например, админка вордпресса или используются дополнительные модули, которые нужно очень умело встраивать. Есть специальные сервисы, я вам сейчас не буду их показывать, поскольку я еще пока их не исследовал. В будущем, думаю Adobe Muse сделает более полноценную админку, где можно будет двигать эти блоки, менять местами и сделает свой сервис более гибким.
На этом я заканчиваю данный урок. В нем мы узнали, как передать сайт заказчику и сделать так, чтобы он сам мог поменять в нем какие-либо тексты или картинки. Надеюсь, этот урок был для вас полезен. Пишите комментарии внизу к этому видео, ставьте лайки, подписывайтесь на канал. Жду вас в следующих видеоуроках. До встречи, пока.
Альтернативный способ создания CMS для Muse можете посмотреть по этой ссылке:
Начните работу в Adobe Muse. Узнайте, как работать с файлами .muse, настраивать параметры страниц, добавлять значки сайта и многое другое.
После входа в приложение запускается рабочая среда Adobe Muse. Отобразится экран приветствия Adobe Muse. Выполните одно из следующих действий:
- Нажмите «Создать новый», чтобы создать сайт.
- Нажмите «Открыть» и перейдите к существующему файлу .muse на вашем компьютере.
При выборе пункта для создания нового сайта появится диалоговое окно «Новый сайт». Выберите параметр «Гибкое значение ширины», чтобы включить адаптивный макет, или параметр «Постоянная ширина», чтобы включить альтернативный макет. Окно содержит поля, позволяющие настроить максимальную ширину страницы, столбцы и значение средника.
Настройки можно изменить в любое время в меню «Файл» > «Свойства сайта».
По окончании нажмите кнопку «ОК», чтобы закрыть диалоговое окно.
В верхней части отображаются ссылки на различные разделы интерфейса: «План», «Дизайн» и «Опубликовать».
Более подробную информацию об использовании интерфейса приложения и проектировании веб-сайтов с помощью Adobe Muse см. в руководствах «Начало работы с Adobe Muse» и «Создание первого веб-сайта с помощью Adobe Muse».
При разработке веб-сайтов в других приложениях, таких как Dreamweaver, вы создаете на компьютере папку, содержащую вложенные папки с файлами всего содержимого сайта. Управление всем набором элементов и обеспечение правильной работы всех ссылок сайта может представлять сложности.
Также можно создать файл .muse и опубликовать временный сайт. А затем предоставить коллегам общий доступ к файлу .muse. Они могут открыть его, выбрав меню «Файл» > «Сохранить как», и вносить изменения в свою копию, в то время как вы будете продолжать работать со своей копией. При этом изменения коллег будут сохраняться в новом опубликованном ими временном сайте. Однако при таком рабочем процессе две версии сайта не будут синхронизированы — ваша версия файла .muse не будет обновляться изменениями, внесенными коллегами, и наоборот.
При каждом внесении значительных изменений в существующий веб-сайт рекомендуется всегда сохранять копию файла .muse с помощью меню «Файл» > «Сохранить как». При создании нового файла .muse немного измените его имя и храните все копии файла .muse в одной папке на компьютере. Таким образом, если клиенту больше понравится первоначальная версия сайта, вы всегда сможете открыть соответствующий файл .muse с предыдущим дизайном и опубликовать его, чтобы вернуть сайт к прежнему виду.
Также рекомендуется чаще сохранять файл .muse во время работы. В случае сбоя приложения Adobe Muse при его следующем запуске обычно открывается восстановленная версия файла .muse с последними изменениями. В этом случае сразу сохраните восстановленную версию файла .muse, а затем приступайте к редактированию. Обязательно сохраняйте файлы .muse в безопасном месте и создайте их резервные копии, поскольку каждый файл содержит целый веб-сайт. Если вы потеряете файл .muse и у вас не будет резервной копии, вы не сможете восстановить файл .muse, загрузив файлы сайта, размещенные на сервере.
Большинство веб-дизайнеров предпочитают сохранять файлы .muse с описательными именами, например my_site_v1.muse и my_site_v2.muse. Также в имя файла .muse можно добавить дату его создания, чтобы было легче найти более старую версию, например my_site_2012-4-13.muse и my_site_2012-4-30.muse. Называть файлы можно любым удобным для вас способом.
Выполните следующие действия, чтобы создать новый сайт и определить свойства сайта.
Настройки веб страницы в Adobe Muse
В этом видеоуроке рассмотрены нюансы и тонкости по настройки веб страницы в программе Adobe Muse. Особенности настройки и ключевые моменты.
Настройки веб страницы. Начало.
Вы уже наверняка создавали страницы и сайты в Adobe Muse, но при публикации возможно не учитывали некоторые очень важные нюансы для того чтобы страницы сайта грамотно отображались в различных браузерах и имели вес в поисковых системах.
Давайте откроем программу, создадим File -> Новый сайт. Здесь неважно какие настройки веб страницы, потому что мы сейчас будем просто рассматривать настройки параметров страниц и при создании нового сайта у нас первая страница является домашняя. Давайте ее сразу откроем, посмотрим ее свойства.
Для домашней страницы у нас есть следующие свойства. У нас есть макет, где мы настраиваем все удобства для дальнейшей работы, где мы можем добавить значок сайта это favicon, о котором я рассказывал в одном из предыдущих моих видеоуроков, и также здесь еще есть две закладки. Метаданные и параметры. Вот о них мы и поговорим.
Настройки веб страницы. Метаданные.
Вкладка Метаданные. Давайте посмотрим, что у нас здесь есть. Здесь у нас есть описание, ключевые слова и html для head. Здесь мы можем вставить в поле заголовка элемент html кода, который будет включен в раздел head страницы. Здесь конечно же нужно соблюдать и этот текст, который здесь будет расположен, должен иметь допустимый разметку кода html.
Настройки веб страницы. Описание.
Описание. Описание страницы будет отображаться в поисковой системе рядом с запросом. Здесь вам нужно кратко описать суть вашего сайта или страницы, возможность даже вставить пару ключевых слов. Что собой представляют ключевые слова. Ключевые слова — это запросы, по которым пользователи будут находить вашу страницу или сайт в поисковых системах. Здесь также нужно указать слова, которые будут более точно отображать суть вашей страницы.
Дальше. Вкладка Параметры. Во вкладке параметры мы видим, что можем мы задавать имя страницы, заголовок страницы, имя файла, карту сайта включать/отключать. Дальше есть у нас параметры меню, язык и символы web-шрифтов.
Настройки веб страницы. Заголовок страницы.
Для домашней страницы у нас имя может быть здесь совершенно любое, на любом языке. Заголовок страница мы также можем поменять и сделать его отличным от имени страницы. Можем оставить таким же, поставив галочку “как имя страницы’’. Имя файла для домашней страницы мы поменять не можем. По умолчанию для всех сайтов имя файлов index.html для домашней страницы. Это самая главная страница сайта. Она самая первая и имя ее поменять нельзя. Тоже касается карты сайта, то здесь мы можем включать страницу в карту сайта, либо не включать. Я рекомендую оставлять эту галочку. Тогда поисковые роботы будут индексировать эту страницу.
Параметры -> Меню. Мы можем исключить страницу из Меню, тогда при создании автоматического меню, как это я показывал в предыдущих уроках, страница не будет включаться в данное меню. Также мы можем поставить или убрать галочку «Распространиться». Для домашней страницы мы этого сделать не можем, поскольку домашняя страница обязательна для всех сайтов и экспортировать мы ее просто обязаны. Здесь мы можем указать язык сайта, выбрать любой (ну обычно для русскоязычных сайтов это русский, для англоязычных – английский). Символы web-шрифтов в принципе так все и оставляйте. Нажимаем «Ok».
Давайте перейдем снова в план сайта и попробуем давайте еще пару страниц. Зайдем на нашу дополнительную страницу, которую мы создали и посмотрим ее свойства. Здесь мы также должны задать имя страницы во вкладке Параметры. Здесь мы может изменить заголовок страницы, поставить его отличным от имени страницы и здесь вы видите, что мы можем изменять имя файла. Особенно я хотел бы обратить на это внимание.
Настройки веб страницы. Имя файла и имя страницы.
Когда мы создаем новую страницу в плане сайта (давайте я сейчас закрою пока) автоматически русскоязычная программа Adobe Muse дает нам название “Без имени-3”. Так вот. Вернемся сейчас к свойствам страницы “Без имени-3” и что я хотел бы здесь отметить – вот это имя вам нужно поменять обязательно. Поменять его таким образом, чтобы оно отображалось на английском языке. Если у вас какие-то ключевые запросы по которым вы хотите, чтобы отображалось эта страница в поисковых системах я рекомендую вам во вкладке параметры создать имя страницы английскими буквами русские слова, то есть как бы транслитерацией написать имя страницы, но обязательно это должны быть английские символы. Здесь вот это никак нельзя на русском языке оставлять. Дальше. Все остальное здесь оставляем по умолчанию, здесь особо ничего менять не надо.
Вы можете также исключить страницу из меню, если у вас эта страница какая-то дополнительная, которую вы не хотели бы публиковать у себя на сайте, то вы можете убрать галочку «Распространить». Язык и символы web шрифтов оставляйте по умолчанию. Здесь кстати вы можете писать на совершенно любом языке, можете писать на русском. Но имя файла, еще раз повторяю, обязательно должно быть на английском языке. Например, если вы хотите назвать свою страницу “Без имени-3” то так и пишите. Например, вот так – «Bez_imeni_3». Можете писать слитно, можете раздельно. Я рекомендую каждое слово отделять либо вот таким нижним подчеркиванием «_», либо можете поставить тире.
Вот так кратко мы рассмотрели основные параметры настройки веб страницы в программе Adobe Muse.
На этом все. Смотрите мои следующие и предыдущие видеоуроки. Также в верхнем правом углу вы можете нажать на кнопку «Информация» (i), зайти на мою страничку и подписаться на мою рассылку и скачать 3 бесплатных шаблона и 49 виджетов. А на этом все дорогие друзья, до следующих видео. Пока.
Создание новых страниц производится в режиме План .
По умолчанию в Muse создается только одна страница (Домашняя страница), все остальные страницы Вы должны создать сами.
Миниатюра домашней страницы (как и все страницы в Muse) при наведении курсора имеет вид, показанный на рисунке слева.
Под миниатюрой стоит название страницы (Home - Домашняя страница), еще ниже - название шаблона, по которому создана страница (A-Master) - см. Работа с шаблонами .
При щелчке по значку "+" справа или слева от Домашней страницы (Home) создается пустая страница верхнего уровня (в англоязычной справке такую страницу называют "страницей родного брата").
При щелчке по значку "+" ниже домашней страницы создается страница 2-го уровня (дочерняя страница).
В свою очередь можно создать страницы 3-го, 4-го и т.д. уровней, но обычно двухуровневой структуры сайта вполне достаточно.
Вся совокупность созданных в режиме План страниц составляет карту сайта (план сайта).
Созданная карта сайта служит основой для автоматического создания панели наавигации по сайту (меню) - см. Панели навигации (меню) .
Названия страниц будут стоять на кнопках меню, если меню создается редактором автоматически (с использование виджета "Меню").
Это же название будет фигурировать после публикации сайта в окне браузера при просмотре страницы посетителями.
Прикрепление страниц к шаблонам
Все страницы в Muse, как правило, создаются по шаблонам.
Создание и оформление шаблонов - операция, предшествующая созданию новых страниц, т.е. сначала создается шаблон, и только после этого он применяется к страницам.
- В режиме План щелкните по шаблону в разделе шаблонов и перетаскивайте его на страницу. При совмещении миниатюры шаблона и миниатюры страницы (при появлении синей рамочки) отпустите кнопку мыши.
- Щелкните по миниатюре страницы правой кнопкой мыши, в контекстном меню выберите "Шаблоны" - выберите нужный шаблон.
Если Вы хотите все страницы сайта оформлять индивидуально, то в этом случае достаточно оставить шаблон, создаваемый по умолчанию (Шаблон-А), пустым.
Естественно, что и все вновь создаваемые страницы окажутся пустыми.
Можно создать часть страниц сайта по шаблонам, а часть - без применения шаблонов.
Чтобы создать страницу без шаблона, перключитесь в режим План , создайте новую страницу, в контекстном меню миниатюры созданной страницы нужно выбрать Шаблоны - Без шаблона .
При любом варианте создания страниц без шаблона изначальный код страницы будет одинаковым.
Публикация сайта - процедура, после которой ваш сайт будет доступен для просмотра самой широкой публикой.
Adobe Muse предлагает два способа публикации сайта:
А. Публикация на хостинге Adobe, для чего привлекается Adobe Business Catalyst
Б. Публикация в местную папку.
Публикация в местную папку
В меню Файл (File) выберите " Экспортировать как HTML " (Export As HTML).
В появившемся окне "Экспортировать как HTML" укажите имя домена и папку для сохранения файлов сайта.
В комплект файлов входят HTML-страницы, файлы CSS, JavaScript, изображения, мультипликация и пр.
В дальнейшем Вы можете внести изменения (при необходимости) в созданные страницы, используя любой html-редактор.
Все файлы, сохраненые на Вашем компьютере (например - изображения), в дальнейшем можно использовать при подготовке других документов.
Сайт, сохраненный в местной папке, может быть переправлен на сервер с использованием любой программы передачи файлов (FTP).
Не нужно путать сохранение сайта и его публикацию.
После экспорта сайта в местную папку его уже нельзя вернуть обратно в Muse.
Если Вы откроете сохраненный сайт в редакторе (в формате .muse) и сделаете в нем изменения, то придется заново публиковать сайт.
Публикация, используя хостинг Adobe
Для публикации сайта на хостинге Adobe в меню Файл выберите Опубликовать сайт .
Появится окно публикации. После того, как Вы введете название своего сайта и нажмете ОК, сразу начнется процесс публикации сайта, в котором будет задействован Adobe Business Catalyst .
Adobe Business Catalyst расширяет Ваши возможности при создании сайтов.
Вы может создать временный сайт бесплатно, а затем перейти на платный вариант.
Вы можете создавать неограниченное количество сайтов на хостинге Adobe непосредственно из Muse и быстро публиковать их без перемещения файлов.
Преимущества публикации на хостинге Adobe (по материалам Adobe):
Значительно сокращается время, необходимое для развертывания веб-сайта, публикация сайта прямо из Muse. Нет необходимости в FTP.
Надежность, высокая производительность. Adobe имеет центры обработки данных в США, Европе и Азии для обеспечения безотказной работы.
Примечание:
В связи с тем, что с 2020 г. компания Adobe прекратила поддержку Adobe Muse, изменились условия публикации сайтов.
Сайты, размещенные на хостинге Business Catalyst, необходимо будет опубликовать на другом хостинге до 26 марта 2021 г. — с этой даты хостинг на Business Catalyst прекращается.
По состоянию на 31 июля 2020 года сайты, опубликованные с использованием Adobe Muse, больше не будет редактироваться с помощью Adobe In-Browser.
Веб-сайты, разработанные при помощи Adobe Muse, продолжат свою работу в Интернете в случае, если размещены на стороннем хостинге.
Исключение страниц из экспорта
Когда Вы издаете свой сайт или экспортируете как HTML, редактор экспортирует все страницы, фигурирующие в Вашей карте сайта, даже те, что Вы исключили из навигации (см. Исключение страниц из меню).
Но Вы можете исключить некоторые страницы из публикации (например, если их редактирование еще не закончено).
Исключить страницу из публикации можно в режимах План (Plan) или Дизайн (Design).
Если Вы не публикуете страницу - ни один из активов (например - изображения), уникальных для этой страницы, не публикуются также. Активы, которые используются и другими страницами, публикуются.
Чтобы исключить страницу из публикации, щелкните по миниатюре страницы в режиме План , в контекстном меню уберите галочку напротив " Экспортировать страницу ".
Примечание: Нужно быть осторожным, исключая страницу из публикации. Например, на страницу могут быть ссылки с других страниц сайта или страница включена в меню, но не опубликована. В этом случае ссылки не будут работать.
Читайте также: