Как редактировать шаблоны AdobeMuse
Приветствую всех посетителей сайта! Тема Adobe Muse вызвала живой интерес у подписчиков и я продолжаю получать письма с откликами, где они делятся своими первыми впечатлениями от работы с программой. Вижу, большинство уже успело не только установить Adobe Muse, но и сделать первые наброски сайта.
Да, потенциал программы впечатлил многих, возможность быстрого добавления интерактивных элементов позволяет сделать красивый современный сайт за довольно короткое время и без знаний программирования. К тому сам процесс добавления галерей, слайдеров, форм и т.п. происходит проще простого, достаточно перетянуть виджет с нужным элементом на рабочее поле и заполнить настройки.
Безусловно, простенький Пейдж значительно уступает Adobe Muse по функционалу, к сожалению, разработчики WebPageMaker не озабочены развитием программы и, соответственно, новых версий и обновлений после 3.21 не было. А жаль, ведь поклонников у Пейджа достаточно, несмотря на его простоту и недалекость функционала.
Но сегодня речь не о Пейдже, поэтому возвращаемся к Ad.Muse и шаблонам. В прошлом материале я поделилась с вами большой подборкой профессиональных шаблонов для Adobe Muse и сегодня самое время рассказать как редактировать эти шаблоны. Я уже говорила, что данная подборка шаблонов протестирована в Adobe Muse 7, которую можно бесплатно скачать здесь, поэтому никаких косяков в работе не предвидется - совместимость 100%.
Что нужно, чтобы приступить к редактированию шаблонов? Прежде всего, выбрать подходящий шаблон из архива, а их там 64 шт, и открыть файл шаблона с расширением .muse двойным кликом. Запустится визуальный редактор Adobe Muse (если он не был открыт до этого) и шаблон станет доступен для редактирования.
Редактировать в шаблоне можно все элементы: менять тексты, изображения, добавлять свои эффекты, задавать свою цветовую гамму и т.д. Я возьму один из шаблонов для примера и отредактирую его на свое усмотрение. Итак, приступим...
Открываю шаблон двойным кликом и жду его загрузки в программу Adobe Muse. Как только он загрузится, то все его страницы будут отображаться на вкладке План. Я выбрала шаблон с готовыми 4 страницами, все они выстроились друг за другом и ждут своей очереди на редактирование.
позволяющем создавать сайты без знаний программирования. Там же был выложен видеокурс из тридцати уроков по работе с данной программой.
Эта тема оказалась актуальной для многих начинающих вебмастеров и мне на почту пришло много писем с просьбой выложить саму программу Adobe Muse, поскольку в Интернете многим не удалось найти бесплатную рабочую версию, чтобы приступить к практике сразу после просмотра видеоуроков.
Я уже писала, что последние версии Adobe Muse плохо поддаются "лечению" и в тех версиях, что опробовала я, присутствовали явные баги: то программа криво устанавливалась, то в редакторе некоторые функции не работали, то с публикацией проблемы... Поэтому я остановилась на седьмой версии Adobe Muse, в которой меня пока все устраивает.
Пусть здесь отсутствуют некоторые новые фишки, добавленные в последние версии, но зато все работает нормально, без косяков. Считаю, что попробовать свои силы в сайтостроении можно и в данной версии, а если программа придется по душе и результат будет радовать, то тогда можно будет и лицензионную версию из последних приобрести.
Для тех, кто начинал с WebPageMaker, работать в Adobe Muse будет проще, так как большинство функций похожи, отличие лишь в методах добавления интерактивных элементов на сайт. В Музе установка всех "красивостей" для сайта более проста и сводится к перемещению готового блока на рабочее поле страницы и его настройке.
В стандартном комплекте программы присутствуют лишь базовые виджеты, но никто не мешает нам расширить функционал за счет виджетов, скачанных из Интернета. Для Пейджа, к сожалению, ничего подобного не реализовано, в этом он значительно уступает Музе. Большую подборку виджетов я обязательно выложу в одном из следующих материалов, а пока давайте разберемся с установкой программы Adobe Muse.
Итак, напоминаю, что в архиве, скачать который можно в конце статьи, вы найдете программу Adobe Muse 7.4 и "лекарство", которое позволит вашей версии работать на вас долго и бесплатно. Вам остается лишь скачать архив, распаковать и установить программу, следуя инструкции ниже.
1. В папке Adobe Muse находим установочный файл setup.exe и запускаем его двойным кликом. При этом в открывшемся окне обязательно снимаем галочку напротив "Запустить приложение после установки" и жмем "Продолжить".
Добро пожаловать в проект "Сайт с нуля" !
Прежде всего данный проект предназначен для тех, кто пытается создать сайт самостоятельно, то есть для новичков. Соответственно, вся информация изложена доступно, все этапы построения сайта сопровождаются скриншотами, что позволит начинающим вебмастерам быстро и просто освоиться в этом нелегком вопросе.
Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.
Всем желаю удачи и смелых воплощений идей на вашем сайте !
Пошаговое руководство для новичков по созданию,
раскрутке и монетизации собственного сайта.
WebPageMaker, Wordpress, Joomla - инструкции для
новичков по установке CMS и шаблонов к ним.
Проект для новичков
2010 - 2016 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.
Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.
Хочешь быть на шаг впереди и первее
остальных получать новые материалы
сайта? Тогда не забудь оставить свои
координаты: имя и электронный адрес!
Пожалуй, на сегодня хватит. Мы рассмотрели, как отредактировать хедер: сменить изображение, слоган, логотип в шаблоне Adobe Muse, а также виджеты с меняющимся текстовым контентом. В качестве домашнего задания предлагаю самостоятельно попробовать в одном из шаблонов отредактировать все текстовые элементы и сменить картинку в хедере.
В следующем материале рассмотрим как редактируются галереи изображений. Галереи и слайдеры в Музе - это виджеты, не требующие дополнительных скриптов и полностью готовые к работе. Их редактирование более специфичное, поэтому в рамках данной статьи это осветить не получится.
P.S. Начала работу новая рассылка на Смартреспондере, к сожалению, не все контакты из прежнего сервиса удачно перенеслись, поэтому, кто хочет гарантированно получать все новые материалы сайта на свой е-мэйл плюс дополнительные плюшки исключительно для подписчиков, переподпишитесь - оставьте свои координаты в форме ниже.
Для тех, кто еще не оформлял подписок на Смарте, подсказываю, что после того, как вы нажмете кнопку Подписаться, вам в открывшемся окне нужно будет нажать "Прислать письмо", после чего зайти в свою почту, найти письмо от Sayt-s-nulya и щелкнуть по первой ссылке внутри письма. После этого подписка будет активирована и вы станете получать новости сайта на свой е-мэйл. В первом же письме - приятный бонус, не пропустите:))
Всем желаю успеха и до новых встреч! С ув. Светлана (SvetLana_TSV).
Первым делом я переименую страницы, шаблон-то буржунетный, поэтому контент на английском языке. Но это ничуть мне не помешает сделать из него отличный сайт для Рунета. Итак, поехали... Щелкаю ПКМ по первой странице "Home" и в появившемся контекстном меню выбираю пункт "Переименовать страницу".
Жду, когда под миниатюрой страницы появится синяя рамочка, после чего щелкаю по названию, удаляю прежнее и вписываю свое. Теперь вместо "Home" у меня страница "Домой". Таким же образом поступаю с остальными страницами.
Теперь, когда страницы переименованы, открываю первую из них двойным кликом для редактирования. Выбранная страница появляется на рабочем поле вкладки Дизайн, причем, обратите внимание, все страницы автоматически переименовались и отображаются в горизонтальном меню шапки шаблона уже на русском языке.
Для начала меняю изображение в хедере на свое. Для этого кликаю по картинке ПКМ и выбираю пункт "Вырезать". Изображение удаляется. Теперь на его место нужно поместить другое. Иду в Файл → Поместить. Открывается окно Импорт и я выбираю на своем компьютере картинку для хедера. Жму "Открыть", после чего она появляется на рабочем поле.
Подгоняю размеры картинки под шаблон (изначально она у меня почти в два раза больше положенного размера), для этого тяну угловой маркер к центру картинки, она постепенно уменьшается. Затем перетаскиваю изображение на место прежней картинки, поставить его ровно помогают линии разметки (голубого цвета) на рабочем поле.
Изначально картинка становится сверху текстового слогана в шапке, закрывая его. Чтобы слой с текстом переместить наверх, а слой с картинкой вниз, щелкаю по картинке ПКМ и выбираю "Упорядочить → На задний план". Теперь текст слогана появился на прежнем месте и его можно редактировать.
Для этого дважды щелкаю по тексту, он обрамляется тонкой рамкой и появляется подсказка "Текстовый фрейм" (см. левый скрин). Удаляю прежний текст и вписываю свой. Чтобы изменить фон фиолетового цвета под текстом, щелкаю по левому краю фона, свободному от текстового фрейма, появляется подсказка "Фрейм изображения" (см. правый скрин) и тогда я в настройках выбираю более светлый тон для фона, ближе к сиреневому.
Сразу во время редактирования текста его можно отформатировать по своему усмотрению: изменить тип шрифта, его размер и цвет, повернуть и т.д. Для этого, как и в любом другом редакторе, я сначала выделяю текст, щелкнув в начале текста или в конце и протягиваю по всей длине. Текст подсвечивается голубым и тогда в настройках я выбираю нужные мне параметры.
Текстовые фреймы во всем шаблоне: заголовки, основной текст, названия кнопок, поля формы и т.д. редактируются аналогичным образом. Шрифты, используемые в шаблоне можно заменять любыми другими, имеющимися на вашем компьютере. Как установить шрифт на компьютер, рассмотрено здесь.
Общие тексты в хедере и футере (одинаковые для всех страниц) редактируются в Мастере шаблонов. Еще раз взгляните на первый скриншот этой статьи и в нижней его части увидите всего лишь одну миниатюру страницы без основного контента, это и есть A-Master. Открываю его двойным кликом и приступаю к редактированию общих для всех страниц элементов хедера и футера.
Меняю цвет для фона горизонтального меню, редактирую текстовые надписи в футере, названия кнопок, названия полей в контактной форме. Все это редактируется очень просто, достаточно щелкнуть по нужному элементу, после чего он выделяется рамкой и появляется подсказка, что это за элемент, после чего в настройках задаю нужные параметры.
Например, фон в горизонтальном меню представляет собой простой прямоугольник, щелкнув по которому откроются его параметры. Воспользовавшись инструментом "заливка", я меняю его цвет на сиреневый. Логотип в шаблоне состоит из двух частей - картинки на прозрачном фоне и текстовой надписи. Исходную картинку я удаляю, кликнув по ней ПКМ и выбрав "Вырезать", затем вставляю свою (Файл → Поместить).
Текстовую часть логотипа редактирую привычным методом, открыв ее двойным кликом, удалив исходный текст и вписав свой. Можно в Фотошопе сделать стандартный логотип, где картинка и текст являются одним файлом, сохранить его в формате png (на прозрачном фоне) и вставить как изображение.
Что касается контактной формы в футере, то я приспособлю ее под форму для консультаций, сменю английские названия полей и кнопки и впишу свой емэйл, на который будут приходить заявки на консультацию. Но поскольку данная форма является виджетом, то чтобы изменить емэйл, нужно открыть настройки виджета.
Для этого щелкаю по любому из полей формы либо по кнопке, форма выделяется рамкой и появляется подсказка "Форма". Справа от формы вверху появляется синяя круглая кнопка, щелкнув по которой открывается панель настроек данного виджета.
Сначала я хотела данную форму оставить для подписки на новости сайта, но оказалось, прикрутить к ней код от Смартреспондера или другого сервиса рассылок довольно проблематично. Поэтому выхода здесь два: либо найти ей другое применение, что я и сделала, либо напросто удалить, а вместо нее вставить форму подписки.
Форма подписки от любого сервиса рассылок вставляется на сайт двумя кликами, главное сначала сгенерировать саму форму на сервисе рассылок, скопировать полученный код и затем его вставить на сайт Adobe Muse, выбрав Файл → Вставить HTML-код. В Ютубе много видеоуроков по Adobe Muse, в том числе, как вставить форму подписки от Смартреспондера, Джастклика или другого сервиса рассылок.
А мы вернемся к шаблону и продолжим редактирование. Сразу под хедером есть текстовый слайдер, в котором меняется содержание через заданный интервал времени, как в флеш-баннере.
Аналогичный эффект смены текста можно наблюдать справа под хедером, я данный блок приспособлю под отзывы. В шаблоне данный блок имеет всего два слайда, которые постоянно чередуются (см. скриншот ниже).
Сначала редактирую текст первого слайда, который отображается в шаблоне, затем нажав на стрелку "Далее" под блоком, появляется второй слайд, где я тоже заменяю текст своим. Чтобы вернуться к первому слайду, следует нажать стрелку "Назад".
Посмотреть результат редактирования можно нажав на Просмотр в меню программы либо воспользоваться прямым просмотром в браузере. Для этого нужно зайти в Файл и выбрать пункт "Просмотреть страницу в браузере". Если в первом случае страница будет отображаться по-прежнему в Музе, то во втором - она откроется непосредственно в самом браузере.
Чтобы добавить еще один текстовый слайд, нужно щелкнуть по значку "плюс" внизу любого слайда и написать новый текст для него. Таким образом можно добавить сколько угодно слайдов.
Чтобы вставить текст из Блокнота, нужно скопировать его в Буфер обмена, затем в Музе щелкнуть ПКМ в окне редактирования и в контекстном меню выбрать Вставить, либо Редактировать → Вставить. Текст появится в рамке, но утратит свое прежнее форматирование, прямо как в Пейдже. Поэтому в Блокноте просто набираете текст, а форматирование производите в Adobe Muse.
Бывает при редактировании шаблонных названий на кнопках либо в разделах, что новый текст больше исходного и не помещается в одну строку, а переносится на следующую. Чтобы это поправить, следует взять инструмент Выделение (наклонная вертикальная стрелка) в панели управления, щелкнуть по текстовому фрейму, он выделится рамочкой с маркерами по краям. Остается лишь потянуть за маркер и расширить фрейм до того размера, пока текст снова не поместится в одну строку.
Как вариант можно немного уменьшить размер шрифта, но тогда нужно проследить, чтобы у остальных названий шрифт тоже был соответственно уменьшен. Можно также выбрать другой тип шрифта с более узким начертанием, главное не переусердствовать, оптимальным вариантом является использование не более трех шрифтов на странице.
Переходим к ссылкам, итак, чтобы сделать текст ссылкой, выделяем сначала нужный фрагмент, затем на панели инструментов идем в Гиперссылки, щелкаем по треугольничку выпадающего списка напротив "Добавление или фильтрация ссылок" и в открывшемся окне в самом первом поле, где иконка лупы со значком плюс вписываем вместо исходного адрес сайта, на который должен перейти посетитель, кликнув по этой ссылке, после чего жмем ENTER. Все ссылка готова!
Чтобы удалить ссылку, выделяем ее и жмем на крестик (см. скриншот), ссылка удаляется.
Не забудь заглянуть в свою почту и подтвердить подписку!