Как создать простую персональную целевую страницу с помощью Adobe Muse

Есть два основных этапа, вовлеченных в процесс дизайна сайта. Первый — это дизайн внешнего вида страниц, а второй — перевод дизайна в реальный продукт — веб-страницы. Первый этап требует навыков проектирования, а второй этап требует опыта кодирования. Проблема в том, что найти человека с обоими навыками сложно.

Для тех, кто лучше разбирается в дизайне (и не интересуется программированием), есть Muse от Adobe. Компания утверждает, что это мультиплатформенное приложение AIR может помочь любому разрабатывать и публиковать HTML-сайты без необходимости писать какой-либо код.

Начните планировать свою личную целевую страницу

Один вопрос, прежде чем мы начнем. Зачем кому-то использовать инструмент для создания веб-сайтов, такой как Muse, если вместо этого вы можете использовать WordPress и его темы? Ответ — «настройка». Хотя существует буквально тысячи тем WordPress, настроить тему, чтобы она действительно соответствовала нашим потребностям, довольно сложно. Другая причина в том, что использование продвинутой системы баз данных WordPress для простого и линейного сайта было бы излишним.

Вы можете скачать Muse с сайта. Оно доступно бесплатно до выпуска v.1.0 в начале 2012 года. Приложение работает под Windows и Mac, но для этого требуется, чтобы в вашей системе был установлен AIR.

Чтобы лучше понять, как работает Muse, давайте попробуем использовать его для создания простой персональной целевой страницы

что-то вроде Flavors.me

или о.ме. Начните с выбора «Создать новый сайт» в окне запуска или в меню «Файл».

персональная целевая страница

  • Затем вам будет предложено настроить свой сайт, выбрав ширину страницы, количество столбцов, поля и т. Д.

создать целевую страницу

  • Первый шаг в создании веб-сайта — это решить, сколько страниц у него будет и какова связь между страницами. Вы можете легко добавлять, удалять и изменять порядок страниц в окне «План».

создать целевую страницу

  • Нажмите кнопку «+ (плюс)», чтобы добавить, и кнопку «X», чтобы закрыть. Нажмите на название страницы, чтобы переименовать, затем перетащите и измените порядок.

создать целевую страницу

  • Внизу страницы вы можете увидеть страницу A-Master. Это шаблон, который будет использоваться на вашем сайте. Поэтому, если есть элементы, которые вы хотите сохранить на всех своих страницах, было бы намного проще, если бы вы определяли элементы в A-Master, а не повторяли их снова и снова.

создать целевую страницу

Начать строительство

  • Если дважды щелкнуть одну из страниц, она откроется в новой вкладке. Вы можете начать создавать и проектировать страницы, используя инструменты на верхней панели инструментов.

создать целевую страницу бесплатно

  • Другие инструменты, которые помогут вам в процессе проектирования, — это «Панели» справа. Вы можете показать или скрыть эти панели через меню Окно.

создать целевую страницу бесплатно

  • Чтобы создать нашу персональную целевую страницу, давайте изменим фон, вставив изображение. Вы можете настроить изображение, изменив масштаб и положение.

создать целевую страницу бесплатно

  • Далее, давайте добавим меню навигации, выбрав его на панели виджетов, затем перетащив его на веб-страницу.

03b вставить меню

  • Вы можете настроить меню навигации, используя «Опции». Нажмите на маленькую синюю стрелку, чтобы вызвать окно параметров.

Варианты виджетов 03d

  • Вы также можете изменить внешний вид текста (тип, цвет, размер), используя вкладку «Текст» на правой панели.

03e изменить текст

  • Затем вы можете добавить тексты и прямоугольники, используя инструменты на панели инструментов. Перетащите эти элементы в нужное положение и настройте их с помощью правых панелей. Чтобы добавить внешние ссылки (или другие элементы HTML), используйте меню «Вставить HTML» в разделе «Объект».

06a вставить HTML

  • Запишите HTML-код ссылок во всплывающем окне и нажмите «ОК», чтобы добавить его на сайт.

06b HTML-код

  • Подобно другим элементам, вставленный HTML-код очень настраиваемый. К сожалению, мы все еще не можем изменить цвет ссылки. Надеюсь, эта функция появится в следующей версии приложения.

06c вставил ссылку

  • После того, как все установлено, вы можете увидеть результат, нажав на ссылку «Предварительный просмотр».

07a превью

Последний шаг

  • После того, как все настроено, вы готовы разместить свой сайт в Интернете. Для этого воспользуйтесь меню «Экспортировать как HTML» в разделе «Файл».

08a экспорт HTML

  • Выберите место для сохранения проекта и нажмите «Экспорт».

08b Экспорт в HTML

  • Если вы хотите прикрепить свою личную целевую страницу к URL, который у вас уже есть, используйте любой приличный FTP-клиент

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

персональная целевая страница

Этот короткий эксперимент показал нам, что создать персональную целевую страницу с помощью Muse так же просто, как добавить и настроить элементы. Но Muse также может создавать более сложные сайты с несколькими страницами. Есть много примеров сайтов, показывающих, что Muse может делать на своихВитрина ». Чтобы узнать больше о Muse, вы можете посетить их страницу «Learn».

Что вы думаете о Muse? Будете ли вы попробовать этот инструмент, чтобы помочь вам создать свой сайт? Поделитесь своими мыслями в комментариях ниже.

Ссылка на основную публикацию
Adblock
detector