Список виджетов, которые переведут Adobe Muse на новый уровень

Содержание

20 марта 2014, 15:00 В  Раздел: Виджеты В  Комментариев: 8 В 

Сегодня, я бы хотел упомянуть программу для «создания» интернет-страниц посредством дизайнерской программы из семейства Adobe. Рассмотрим главный минус этой программы.

Adobe Muse — программа, предназначенная для создания макета сайта и после чего, можно сохранить проект в виде полноценной интернет страницы.

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

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

Главный минус программы Adobe Muse

Все бы хорошо, если бы не ужасно составленный код, который получается на выходе после экспорта проекта. Мне многие говорили что после этой программы, просто нет желания копаться в этом «говнокоде», но я до последнего не верил. Пока вчера не столкнулся с редактированием проекта, сделанного в программе Adobe Muse.

Только html страница несложного по реализации проекта, не считая стилей (css) — вышло в документе 2400+ строк кода. Это же просто жесть. Там ну максимум на 500 можно было уложиться, если верстать вручную.

Программа создает очень много лишнего кода. Далее представлен фрагмент таблицы, которая была в составе упомянутого выше одностраничного сайта. Все что на скрине видите можно было легко уложиться в 2-4 строчки. Смотрите на фрагмент кода с 1338 по 1364 строку. Из этой кучи кода, всего выводится 2 значения таблицы «Китай» и число «2282».

kod-iz-adobe-muse-1.jpg

Вообще из скрина выше понятно, что человек к которому попадет потом такой сайт на редактирование, будет просто «плеваться» на него. В таком коде как говорится «черт ногу сломит».

Мораль сей басни такова — дизайнеры учитесь нормально верстать ручками или только занимайтесь тем, в чем сильны — рисуйте, а верстать отдавайте профессионалу. Пожалейте нервы тех, кто после Вас будет редактировать такой проект, ибо это просто ужасно по коду.

Думаю, в рамках моего блога мы еще ни один раз затронем вопрос о чистоте кода, о том как писать чтобы любому было приятно читать и при необходимости редактировать проект.

Программа Adobe Muse набирает популярность и количество плагинов к ней растёт. Забирайте самые интересные и нужные плагины здесь.

Набор_виджетов_для_adobe_muse_nabor_vidjetov_dlya_adobe_muse_1 (12)

Скачать

Горизонтальное меню.

Набор_виджетов_для_adobe_muse_nabor_vidjetov_dlya_adobe_muse_1 (20)

Скачать

Набор_виджетов_для_adobe_muse_nabor_vidjetov_dlya_adobe_muse_1 (21)

Скачать

Набор_виджетов_для_adobe_muse_nabor_vidjetov_dlya_adobe_muse_1 (3)

Скачать

 Скачать

Вертикальное меню.

Скачать

 Скачать

 Скачать

 Скачать

 Скачать

 Скачать

 Скачать

 Скачать

Скачать

 Скачать

 Скачать

Интересное по теме  Почта из прошлого века

 Скачать

 Скачать

 Скачать

 Скачать

Скачать

 Скачать

Полезная подборка для тех, кто начинает осваивать веб-дизайн.

Эта серия видео-уроков поможет без труда освоить популярный у графических дизайнеров редактор для создания веб-сайтов — Adobe Muse. Muse самостоятельно переводит графический макет сайта в код, экономя время на его написание.

Обзор программы Adobe Muse

Создание и редактирование графических блоков

Создание текстовых блоков

Как создать кнопку

Форма обратной связи для сайта

Всплывающая форма обратной связи

Меню с подразделами для сайта

Как добавить фавикон на сайт

Как сделать фон для сайта

Якорные ссылки

Как добавить новые шрифты

Создание мобильной версии сайта

Настройки веб страницы

Бесплатные виджеты для Adobe Muse

Админ панель (CMS) для Adobe Muse

Резиновые сайты в Adobe Muse CC

Горизонтальная прокрутка (скроллинг) страницы

Как добавить виджет (установка виджетов muse)

Как убрать полосу прокрутки (2 способа)

Динамический фон для сайта

Как закрепить меню на сайте

Эффекты прокрутки (параллакс)

Создание формы обратной связи (cForm 2.0)

Работа со ссылками и подсказками

Как изменить окно приветствия

Как вставить видео с ютуба на сайт

Резиновая верстка

Эффект при наведении на картинку курсора мыши

Резиновая верстка или параллакс эффект?

Как сделать всплывающую подсказку

Социальные виджеты. Как изменить язык?

WOW SLIDER – слайдер для сайта с анимацией

Cloudzoom – эффект зума изображений

Начальная настройка сайта в версии СС 2015.1

Как вставить таблицу из Excel в Muse

Сайт на двух языках. Переключение языка сайта

Перевод сайта из HTML в PHP

Адаптивные картинки по ширине браузера

Adobe Muse запись вебинара

Вырезаем поле E-mail в Adobe Muse

Parallax Scrolling в программе Adobe Muse

CMS в в программе Adobe Muse

Тень текста и объемные кнопки в Muse с помощью CSS

Кнопки и быстрый экспорт PSD в Adobe Muse

3D Flat Button

Шрифтовые иконки в Adobe Muse

Hover-Img

CMS для 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

Все, файлы загрузились на сервер и доступны теперь по адресу моего сайта. Я заранее создал поддомен  и загрузил туда на хостинг файлы вот этой странички для того, чтобы показать вам, как работать в дальнейшем, как изменять эти графические текстовые элементы прямо в браузере с помощью стандартной утилиты компании Adobe. Для того, чтобы это все сделать, мы должны перейти на сайт inbrowserediting.adobe.com и перед вами выскочит вот такая нехитрая страничка, где есть только одно окошко – кнопка “Начать редактирование”. Так же вы видите здесь написано: “Редактируйте сайт прямо в браузере”. Это и есть вход в админ панель – CMS для Muse.

Этот сервис компании Adobe позволяет вам редактировать сайт прямо в браузере. Здесь мы должны что сделать? Мы должны взять вот эту нашу ссылку, скопировать ее и поместить ее в это окошко. “Вставить” и нажать клавишу “Начать редактирование”. Здесь вы должны ввести данные доступа к ftp-аккаунту того хостинга, на который вы заливали ваш сайт. У меня уже здесь введены мои данные, я нажимаю кнопку “Вход” и меня перебрасывает в админку Adobe Muse CC inbrowserediting. Мы видим, что вся моя страничка подгрузилась здесь в том виде, в котором она есть и отображается на сайте. И что я здесь могу сделать?

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 можете посмотреть по этой ссылке:

CMS для Muse

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий