Примечание.

Новые функции больше не добавляются в Adobe Muse. Поддержка этого приложения будет прекращена 26 марта 2020 г. Для получения подробной информации и поддержки посетите страницу прекращения обслуживания Adobe Muse.

Использование встроенного HTML-элемента для отображения блога на сайте Muse

Встроенный HTML-элемент — это исходный код, созданный на стороннем веб-сайте, например Google, YouTube, Flickr или Picasa. Вы можете создать на этих веб-сайтах учетную запись, выполнить вход, скопировать код для вставки с этого сайта и добавить его на свой сайт.

Вставленный на страницу встроенный HTML-элемент представляет собой размещенное на странице сайта окно, в котором отображается содержимое стороннего веб-сайта.

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

В том разделе мы будем копировать исходный код с сайта Tumblr. Это бесплатный интернет-сервис, требующий регистрации и позволяющий публиковать блоги с открытым доступом. Блоги просты в использовании и предоставляют удобный способ обновления веб-сайтов для пользователей без технических склонностей. Большинство сайтов для ведения блогов имеют веб-интерфейс, позволяющий пользователям входить в учетную запись с любого браузера и публиковать новые записи, не требуя знания языка HTML или дополнительного программного обеспечения.

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

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

<iframe src="http://katiescafe.tumblr.com/" width="910" height="1400" marginwidth="0" marginheight="0" frameborder="no" scrolling="yes" style="border:0px;"></iframe>

  1. В режиме «План» дважды нажмите миниатюру страницы событий, чтобы открыть ее для редактирования в режиме «Дизайн».
  2. Нажмите в центре пустой страницы и вставьте код HTML одним из следующих способов.
  • Выберите «Редактировать» > «Вставить» или используйте комбинацию клавиш (Command+V для Mac или Ctrl+V для Windows), чтобы вставить код непосредственно на страницу.
  • Выберите «Объект» > «Вставить HTML». Нажмите в поле открывшегося окна «Редактирование HTML» и вставьте содержимое. Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Редактирование HTML».

Примечание. В большинстве случаев приложение Muse распознает код HTML и автоматически встраивает его при вставке на страницу. Однако если вместо содержимого со стороннего веб-сайта на странице отображается код, выберите «Объект» > «Вставить HTML».

После того как код HTML будет встроен, вокруг публикаций блога, введенных для учетной записи Tumblr Katie's Cafe, будет отображаться синяя ограничительная рамка с манипуляторами.

  1. С помощью инструмента «Выделение» перетащите манипуляторы так, чтобы окно с содержимым блога занимало приблизительно 80% от ширины страницы. Расположите содержимое блога по центру страницы так, чтобы фоновое изображение просвечивало справа и слева. В синем прямоугольнике измерения отображается расстояние до других объектов. Когда выбранный объект выровнен по центру по вертикали, на короткое время отображается красная направляющая выравнивания.
Изменение размера и положения на странице
Изменение размера и размещение блога Tumblr на странице «events».

Это все, что необходимо сделать для встраивания HTML-элемента на страницы сайта Muse. Если позднее потребуется отредактировать код HTML, нажмите встроенный HTML-элемент правой кнопкой мыши и выберите в контекстном меню пункт «Редактировать HTML». При этом откроется окно «Редактирование HTML», предоставляющее доступ к ранее вставленному коду.

Теперь можно просмотреть изменения, которые мы сделали на странице «events».

  1. Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу «events» в новом окне браузера.

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

Страница «events» готова. В следующем разделе вы узнаете, как вставлять встроенный HTML-элемент в виджет для управления отображением стороннего содержимого в зависимости от действий пользователя.

Встраивание видео на веб-сайт Muse

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

В следующем примере мы рассмотрим процесс вставки встроенного HTML-элемента, созданного на сайте YouTube.

Допустим, вы посетили страницу на сайте YouTube.com и просмотрели видеоролик, который вы загрузили с помощью своей учетной записи. Если нажать кнопку «Поделиться», а затем выбрать «HTML-код», то будет предоставлен код для встраивания видео, который можно скопировать на свой сайт.

Встраивание видео
Выбрав необходимый размер видео, скопируйте созданный YouTube код для встраивания.

В данном случае код для встраивания видеоролика для Katie's Cafe уже скопирован на сайт, поэтому вам не нужно посещать YouTube. Скопируйте следующий код для встраивания в буфер обмена:

<iframe title="YouTube video player" width="640" height="390" src="http://www.youtube.com/embed/krqjM5GmqzQ" frameborder="0" allowfullscreen></iframe>

В этом коде вокруг ссылки на видеофайл, опубликованный на YouTube, используются теги iFrame. Тег iFrame — это контейнер HTML, позволяющий отображать содержимое в «окне» после его добавления на веб-страницу.

Скопировав код выше, вернитесь в приложение Muse.

  1. Используя инструмент «Выделение», нажмите серую границу страницы. В индикаторе выбора в левом верхнем углу должно отобразиться слово «Страница». Это означает, что страница выбрана целиком.
  2. Нажмите более крупный целевой контейнер с заливкой серого цвета. В индикаторе выбора в левом верхнем углу отобразится слово «Композиция». Нажмите целевой контейнер еще раз; при этом в индикаторе выбора отобразится слово «Контейнер». Нажмите его еще раз (отобразится слово «Целевой объект») и еще раз, пока в индикаторе выбора не отобразится слово «Фрейм изображения». Нажмите клавишу Backspace (Windows) или Delete (Mac), чтобы удалить фрейм изображения из целевого контейнера.

Следующим этапом, пока не снято выделение внутреннего целевого контейнера, является вставка скопированного ранее кода HTML в целевой контейнер.

Примечание. При вставке кода в целевой контейнер могут возникать некоторые затруднения, так же как при вставке главного изображения в контейнер триггера, поскольку задача заключается в том, чтобы вставить код ВНУТРЬ целевого контейнера виджета. Существует вероятность (в зависимости от выбранного элемента), что код видеоролика будет вставлен за пределы виджета и окажется встроенным в саму страницу. Поэтому следует соблюдать осторожность... Если при проверке лайтбокса (кнопка «Предварительный просмотр») видео начинает воспроизводиться, даже если не было нажато главное изображение, значит код видео не был вставлен в контейнер, что приводит к его моментальному воспроизведению. Видео должно отображаться только после нажатия на главное изображение.

Чтобы вставить код видео в целевой контейнер, выполните следующие действия (пока в индикаторе выбора отображается слово «Контейнер»).

  1. Выберите «Объект» > «Вставить HTML». В открывшемся окне выберите текст заполнителя по умолчанию и нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить его. Выберите «Редактировать» > «Вставить», чтобы вставить скопированный ранее код YouTube в поле «Код HTML». Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «Код HTML».

Примечание. В большинстве случаев приложение Muse автоматически определяет процесс вставки кода HTML и воспринимает текст как HTML, а не обычный текст. Таким образом, вместо выбора команды «Объект» > «Вставить HTML», чтобы открыть окно HTML, можно нажать правой кнопкой мыши (или Control + нажатие), пока выделен внутренний целевой контейнер, и выбрать в контекстном меню команду «Вставить». (Также можно выбрать команду «Редактировать» > «Вставить» или использовать комбинацию клавиш для вставки исходного кода в целевой контейнер). Приложение Muse предлагает несколько способов вставки кода видеоролика в целевой контейнер.

После вставки кода в целевой контейнер отобразится первый кадр видеоролика (чашка кофе). Отображение первого кадра указывает на то, что код HTML вставлен успешно. Видео не будет воспроизводиться, пока вы редактируете страницу в режиме «Дизайн». Оно воспроизводится только после нажатия кнопки «Предварительный просмотр» на панели элементов управления или при предварительном просмотре страницы в браузере.

  1. При необходимости измените размер целевого контейнера с помощью инструмента «Выделение» в соответствии с размером видеосодержимого встроенного HTML-элемента. Ширина должна составлять приблизительно 670 пикселей, а высота — 415 пикселей. Когда видеоролик выбран, в индикаторе выбора отображается слово «HTML-элемент».
  2. Не снимая выделения с целевого контейнера, нажмите клавишу Escape один раз, чтобы выбрать внешний контейнер. Или, нажмите за пределами виджета, чтобы отменить выбор виджета «Лайтбокс», а затем нажмите его два раза: один раз, чтобы выбрать композицию, и второй раз, чтобы выбрать более крупный контейнер. С помощью инструмента «Выделение» перетащите манипуляторы контейнера так, чтобы целевой контейнер находился в его центре. Задайте ширину контейнера 710 пикселей и высоту 460 пикселей.
  3. Используя меню «Заливка», выберите для заливки контейнера коричневый цвет (#63301B) и установите для параметра непрозрачности заливки значение 100.
Меню «Заливка»
Настройка цвета и непрозрачности заливки контейнера в меню «Заливка».

  1. В нижней части контейнера выберите текстовый фрейм и нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить его. Текстовый фрейм можно заполнить подписью для целевого содержимого, однако в этом проекте мы не будем этого делать.
  2. Выберите прямоугольник «Закрыть» (с крестиком) в правом верхнем углу контейнера. Нажмите внутри прямоугольника «Закрыть», чтобы выбрать его подпись, и удалите ее. Используя меню «Заливка» установите для цвета заливки значение «Нет». В меню «Заливка» нажмите значок папки рядом с разделом «Изображение» и найдите файл с именем «icon-close.png». С помощью инструмента «Выделение» измените размер прямоугольника «Закрыть» так, чтобы в нем помещалось все изображение значка закрытия.
  3. С помощью инструмента «Выделение» переместите целевой контейнер и контейнеры триггеров в желаемое место страницы.
  4. Не снимая выделения с композиции, нажмите кнопку с синей стрелкой, чтобы открыть панель параметров. Для этого примера задайте указанные ниже настройки.
    • Положение: лайтбокс
    • Переход: затухание
    • Автоматическое воспроизведение: отключено
    • Перемешать: отключено
    • Изначально скрыть все: отключено
    • Разрешить перелистывание: включено
    • Триггеры сверху: отключено
    • Кнопка «Закрыть»: включено
    • Показать элементы лайтбокса при редактировании: включено
    • Показать все в режиме «Дизайн»: включено
Параметры композиции
Измените настройки в меню «Параметры» для управления работой виджета.

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

В одной из предыдущих частей этого руководства мы рассматривали процесс встраивания HTML-элемента на примере добавления блога Tumblr на страницу «events». Вы также узнали, как вставить встроенный HTML-элемент в виджет «Композиция с лайтбоксом» для воспроизведения видеоролика YouTube в лайтбоксе при нажатии кнопки пользователем. В этом разделе мы рассмотрим еще один пример использования встроенного HTML-элемента, предоставленного сайтом Google Карты. Выполните следующие действия.

  1. Если страница «visit» не открыта в режиме «Дизайн», нажмите «План» и дважды нажмите миниатюру страницы «visit» для редактирования.

Представленный исходный код скопирован с сайта maps.google.com. Можно создать пользовательскую карту с одним адресом (или, как в данном случае, с несколькими адресами). Этот сервис предоставляется бесплатно. Нужно просто указать адрес (или адреса) и нажать кнопку «Создать карту».

Кнопка «Создать карту»
Кнопка «Create Map» (Создать карту) для создания карты на основе введенных адресов.

После создания карты в интерфейсе сайта Google Карты можно ввести заголовок и описание карты. Затем нажмите кнопку «Ссылка», чтобы получить доступ к коду. Выделите код HTML в поле «HTML-код для добавления на веб-сайт», вернитесь в приложение Muse и встройте полученный код на страницу.

Добавление кода HTML на страницу
Создание кода HTML для карты с помощью интерфейса сайта Google Карты.

Для примера, приведенного в этом руководстве, создавать карту самостоятельно не требуется. Если вы хотите попробовать сделать это самостоятельно, введите любой адрес, создайте карту и скопируйте ее код. Однако если вы хотите просто посмотреть, как это работает, воспользуйтесь предварительно созданным кодом HTML.

  1. Скопируйте исходный код ниже.

<iframe width="887" height="298" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?ie=UTF8&amp;hl=en&amp;msa=0&amp;msid=218302982680021663941.00049fcd9cf93276f540e&amp;ll=37.7737,-122.43782&amp;spn=0.067844,0.098877&amp;z=12&amp;output=embed"> </iframe>

  1. Вставьте код в верхнюю часть страницы «visit». С помощью инструмента «Выделение» расположите встроенный HTML-элемент по центру по вертикали страницы ближе к ее верхней части так, чтобы четвертая часть карты накладывалась на область заголовка. Оставьте свободное пространство между картой и изображением цветка под ней, чтобы можно было добавить описание.
  2. С помощью инструмента «Текст» расположите текстовый фрейм под встроенной картой. Скопируйте следующий текст и вставьте его в текстовый фрейм:

While each of our bakeries embodies the unique attributes of its neighborhood, they are all bound together by Katie's impeccable attention to detail, commitment to service, and, above all, enjoyment of good food.

  1. На панели «Текст» установите следующие настройки для оформления текста:
    • Шрифт: Droid Serif (или другой шрифт семейства serif)
    • Размер шрифта: 14
    • Цвет шрифта: #222222
    • Выравнивание шрифта: слева
    • Интерлиньяж: 120%

После добавления описания карты оформление страницы «visit» завершено.

  1. Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы проверить отображение страницы «visit» в браузере.
Веб-страница с картой
Законченная страница «visit» с полностью функциональной картой Google.

Обратите внимание, что встроенная с помощью кода HTML карта Google интерактивна. Вы можете нажимать стрелки для перемещения карте в окне или кнопки «+» и «-» для увеличения и уменьшения масштаба.

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

 Встраивание HTML-элемента на страницы Adobe Muse

На страницы сайта можно встроить код HTML для добавления сложных функций, которые будут динамически отображаться со сторонних веб-серверов. Эти части кода можно скопировать у неограниченного количества поставщиков веб-услуг, таких как Google, Yahoo!, YouTube и многих других и вставить на страницы Muse. В этом разделе приведено два примера встроенных HTML-элементов и рассматриваются способы быстрого добавления содержимого социальных сетей и интерактивных карт Google на веб-сайт Muse.

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

Добавление канала Twitter в виде встроенного HTML-элемента для отображения новых публикаций

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

В этом примере для Kevin's Koffee Kart была создана вымышленная учетная запись. Для этого необходимо войти на сайт Twitter как новый пользователь и заполнить регистрационную форму. После этого на сайте можно опубликовать сообщения и скопировать код вставки, который позволяет отображать эти сообщения на любом сайте в Интернете. Этот же процесс используется для размещения сообщений в блоге, видеосодержимого, каналов RSS, фондовой информации, прогноза погоды, счета игр и других динамических данных. При создании сайта для клиента узнайте, используют ли они эти сервисы для предоставления информации своим заказчикам. В большинстве случаев вы можете использовать данные их учетной записи для входа и получения кода вставки для необходимых данных.

Чтобы вам не нужно было входить на Twitter и создавать собственную учетную запись, ниже представлен код вставки, скопированный в Twitter для учетной записи Kevin's Koffee Kart.

<script type="text/javascript" src="http://www.gtaero.net/twitter/twitter.php?user=kevinkoffee"></script>

<div id="twitFeed">Optional Placeholder Text</div>

<script type="text/javascript">twitter2id("twitFeed");</script>

 

  1. Скопируйте код выше.

  2. Вернитесь в приложение Muse. В большинстве случаев можно просто щелкнуть в необходимом месте на странице правой кнопкой мыши и выбрать в контекстном меню команду Вставить. Или можно использовать комбинацию клавиш для вставки (Command-V для Mac или Control-V для Windows), и приложение Muse распознает вставляемый текст как исходный код, а не обычное текстовое содержимое.

    Примечание.

    В редких случаях, когда код не распознается как язык HTML, можно выбрать команду Объект > Вставить HTML, чтобы открыть окно Код HTML. Затем просто вставьте скопированный исходный код в окно и нажмите кнопку ОК, чтобы закрыть окно и встроить код.

  3. После встраивания исходного кода (при этом на странице сайта создается окно для отображения связанного содержимого со стороннего веб-сайта) он может отображаться на странице не так, как это необходимо. Встроенное содержимое HTML сайта Twitter отображается используемым по умолчанию способом.

    Встраивание исходного кода
    Данные канала Twitter отображаются необходимым образом, однако текст не имеет оформления и форматирования.

  4. Увеличьте размер текстовой области канала Twitter, перетащив манипуляторы встроенного HTML-элемента, чтобы она занимала почти всю ширину страницы и треть ее высоты.

    Увеличение поля кода для встраивания
    Увеличьте ширину и высоту окна данных канала Twitter.

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

    Затем необходимо обновить код в окне Код HTML, добавив несколько стилей CSS, которые определят способ отображения динамического текста. Это действие не повлияет на отображение опубликованных сообщений на сайте Twitter.com, а изменит форматирование текста на вашем сайте.

  5. Скопируйте код стиля CSS ниже.

    <style type="text/css">

    #twitFeed { font-family: Helvetica Neue,Helvetica,sans-serif; font-size: 54px; line-height: 1; color: white; text-align: left }

    a:link, a:hover { font-size: 14; color: white; text-decoration: none }

    </группы стилей>

    Примечание.

    Ознакомьтесь с кодом выше и обратите внимание, что стили заключены между открывающим тегом, который указывает, что представляет собой код (), и закрывающим тегом, который указывает браузерам, что правила стиля CSS завершены (). При оформлении собственного встроенного кода HTML используйте эти теги в виде скобок вокруг стилей, которые необходимо изменить. В этом случае веб-сайт Twitter размещает опубликованные сообщения и использует селектор CSS ID с именем «#twitFeed» для управления способом отображения текста на сайте. Таким образом, в коде выше используется это имя стиля (полученное с сайта Twitter), а затем добавляются некоторые правила, определяющие отображение текста на вашем сайте, заменяя стили, примененные сайтом Twitter.com. Дополнительную информацию о правилах CSS для форматирования текстового содержимого см. на веб-сайте W3C Schools.

  6. Нажмите правой кнопкой мыши встроенное окно Код HTML и выберите в контекстном меню команду «HTML». Откроется окно Код HTML с ранее вставленным исходным кодом. Это окно можно открыть в любое время при редактировании сайта и обновить исходное содержимое HTML. Нажмите над ранее встроенным кодом HTML, в самой верхней части окна. Вставьте код нового стиля, скопированный на шаге 5.

    Код HTML для встраивания
    Вставьте код стиля в окно «Код HTML» над ранее вставленным исходным кодом Twitter.

  7. Нажмите кнопку «ОК», чтобы закрыть диалоговое окно «HTML». После внесения этого изменения в оформление текста Twitter публикация, связанная с сайтом Twitter, теперь будет иметь текст белого цвета и более крупный размер и будет отображаться в верхней части слайд-шоу на главной странице.

    Отображение текста Twitter на веб-странице
    Готовый канал Twitter после изменения размера объекта HTML и форматирования стилей текста.

Создание главной страницы почти завершено. Осталось добавить только один элемент.

  1. Выберите меню Файл > Поместить. В диалоговом окне Импорт в папке «Kevins_Koffee_Kart» выберите файл «DailyDrip.png». Нажмите кнопку Выбрать.

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

  3. Нажмите Предварительный просмотр, чтобы просмотреть слайд-шоу и проверить, как оно отображается под разделом «Daily Drip» и коричневым изображением подтека.

    Готовый проект главной страницы
    Готовый проект главной страницы.

Завершив просмотр главной страницы, нажмите ссылку «План», чтобы вернуться в режим План.

Далее добавьте на страницу KART MAP различные встроенные HTML-элементы.

  1. Дважды нажмите миниатюру KART MAP, чтобы открыть ее для редактирования в режиме Дизайн.

  2. С помощью инструмента Текст перетащите текстовый фрейм на страницу KART MAP, поместив его вверху страницы, прямо под верхним колонтитулом.

  3. Введите следующий текст «Looking for the Koffee Kart? Check here for real-time location updates throughout the day».

  4. Выделив текст, откройте панель Стили абзаца. Нажмите стиль с именем Georgia Body Medium, чтобы применить стиль абзаца к тексту верхнего колонтитула на странице KART MAP.

Вставка на веб-страницу Muse карты Google с помощью встроенного HTML-элемента

Видеопособие

Видеопособие
lynda.com - James Fritz

В этом разделе мы добавим на страницу KART MAP встроенный HTML-элемент для загрузки карты, созданной сервисом Google Карты. Это еще один небольшой пример того, как можно использовать встроенный HTML-элемент на вашем сайте. На сайт можно встраивать содержимое с большинства сторонних сайтов, таких как YouTube, Flickr или Picasa, а также добавлять формы, блоги и другие сложные элементы сайта, которыми можно управлять, публикуя содержимое на соответствующих сайтах с помощью своей учетной записи.

  1. Откройте новое окно браузера и перейдите на страницу Карты Google.

  2. Введите адрес или термин для поиска, например Adobe SF, чтобы найти реальное местоположение, которое можно использовать для создания карты.

  3. Нажмите кнопку Ссылка в правой верхней части окна, а затем выберите параметр Настройка и предварительный просмотр встроенной карты.

  4. В окне Настройка установите для ширины карты значение 850, а для длины — 470. Переместите карту в окне так, чтобы адрес был виден полностью.

  5. Скопируйте полученный HTML-код в окне Google. Или, вместо генерирования собственного кода карты Google, просто скопируйте исходный код ниже:

    <!-- Google Public Location Badge -->

    <iframe src="http://www.google.com/latitude/apps/badge/api?user=3988005937557250144&type=iframe&maptype=roadmap" width="872

    " height="600" frameborder="0"></iframe>

    <!-- To disable location sharing, you *must* visit https://www.google.com/latitude/apps/badge and disable the Google Public Location badge. Removing this code snippet is not enough! -->

    Исходный код HTML для копирования в окне сервиса Google Карты
    Исходный код HTML для копирования в окне сервиса Google Карты.

  6. Вернитесь в приложение Muse. Нажмите страницу правой кнопкой мыши и выберите Вставить для вставки кода. Также можно выбрать команду Объект > Вставить HTML, чтобы открыть окно Код HTML, или использовать для вставки кода стандартную комбинацию клавиш Command-V (для Mac) или Control-V (для Windows).

  7. С помощью инструмента Выделение поместите карту в левой части страницы.

  8. Нажмите Предварительный просмотр, чтобы проверить отображение карты Google для посетителей сайта. Нажимая кнопки навигации по карте, убедитесь, что они полностью интерактивны, и карту можно увеличивать или перемещать в пределах встроенного окна.

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

Функцию «Встроенный HTML-элемент» можно использовать не только для вставки на страницу кода со сторонних веб-сайтов, но и для встраивания целых веб-страниц с помощью плавающих фреймов. Например, можно ввести такой фрагмент кода:

<iframe title="A Title for this Content" src="http://yoururlhere.com" width="900" height="500" style="border: 0;"></iframe>

В приведенном выше коде замените текст после слов title="" и url="" названием необходимой внешней веб-страницы и URL-адресом. Для ширины и высоты окна плавающего фрейма можно также задать необходимые значения в соответствии с проектом сайта.

Помимо этого, чтобы в плавающем окне не отображалась полоса прокрутки, добавьте следующий атрибут в открывающий тег плавающего фрейма:

scrolling="no"

Используя команду Объект > Вставить HTML, можно открыть новое окно Код HTML и встроить плавающий фрейм в любое место сайта, а затем указать любой URL-адрес (адрес сайта, например www.google.com), чтобы отобразить во фрейме опубликованный в Интернете сайт.

Плавающий фрейм также можно использовать для встраивания анимации, например анимации HTML5, созданной в Adobe Edge. Найдите имя файла HTML, созданного в Adobe Edge, и используйте его в атрибуте URL-адреса плавающего фрейма:

<iframe src="Project-Header-r1v1.html" width="100%" height="100%" scrolling="no">

</iframe>

Затем загрузите файл HTML Adobe Edge (вместе с зависимыми файлами) на тот же сервер хостинга, на котором расположены файлы сайта Muse. При экспорте сайта на сервер FTP можно скопировать файл HTML в папку, созданную приложением Muse во время экспорта. В случае публикации сайта на серверах хостинга Adobe Business Catalyst® с помощью функции «Опубликовать» приложения Muse для передачи файлов можно использовать программное обеспечение Adobe Dreamweaver® или любой FTP-клиент. Подробнее о передаче файлов с помощью FTP на серверы хостинга Business Catalyst см. в разделе Публикация веб-сайтов.

Форматирование элементов формы обратной связи

С помощью стандартных правил CSS можно задать форматирование элементов формы обратной связи, созданной в интерфейсе Business Catalyst Admin Console. Вы можете настроить отображение формы и ее элементов в соответствии с дизайном веб-страницы.

После вставки исходного кода формы с консоли администрирования на страницу сайта Muse форма имеет стили по умолчанию.

Размещение произвольного кода HTML
После вставки кода HTML форма отображается на странице.

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

Нажмите форму правой кнопкой мыши (или левой кнопкой, удерживая клавишу Control) и выберите в списке пункт «HTML».

Пункт «HTML» в контекстном меню
Пункт «HTML» в списке параметров контекстного меню.

Откроется окно «Код HTML». В нем отображается код, вставленный на страницу из консоли администрирования. Установите курсор вверху перед первой строкой кода и нажмите клавишу Enter (Windows) или Return (Mac) несколько раз, чтобы переместить код формы ниже и создать свободное пространство для добавления стилей.

Добавление пустых строк выше существующего кода путем нажатия клавиши Enter или Return
Добавление пустых строк выше существующего кода путем нажатия клавиши Enter или Return.

В эту область выше кода формы можно вставить или ввести правила CSS, определяющие оформление элементов формы.

Чтобы увидеть, как это работает, скопируйте следующий код:

<style type="text/css">

input.cat_textbox, textarea { background-color: #fff; border: 1px solid #cacaca; padding: 3px; margin: 2px 0 8px 0; width: 300px; font: 12px Georgia, Times, serif; }

input.cat_textbox { height: 16px; }

input.cat_button { background-color: #eee; font: 12px Helvetica, Arial, sans-serif; border: 1px solid #cacaca; padding: 14px 0; width: 150px; font-weight: bold; text-transform: uppercase; }

.form label, .webform label { font: 14px Georgia, Times, serif; }

table.webform td { padding: 0; }

</группы стилей>

Вставьте этот код в верхнюю часть окна HTML выше формы.

Вставка стилей CSS в верхнюю часть окна HTML
Вставка стилей CSS в верхнюю часть окна HTML.

Нажмите кнопку «ОК», чтобы закрыть диалоговое окно HTML. Обратите внимание, что оформление формы изменилось в соответствии с новым форматированием. Нажмите «Предварительный просмотр» или выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы посмотреть, как она будет отображаться на опубликованном сайте.

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

Изучите код, вставленный в верхнюю часть окна. Обратите внимание на два тега стиля вверху и внизу правил CSS, которые окружают их. Они имеют важное значение; без открывающих и закрывающих тегов стиля правила CSS не будут работать. Ниже эти два тега стиля приведены по отдельности:

<style type="text/css">

</группы стилей>

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

При необходимости изменить оформление элементов формы нужно вызвать «класс» (т. е. имя различных элементов формы), указать свойство для обновления и настроить его атрибуты.

Рассмотрим строку кода ниже:

input.textarea {

background-color: #fff;

}

Слово «input.textarea» — это имя, назначенное одному из типов текстовых полей (т. е. его «класс»). Следующая строка вызывает свойство, которое необходимо изменить. В данном случае «background-color» означает цвет фона текстового поля. А после двоеточия атрибут «#fff» является сокращенным способом написания в коде CSS атрибута «#ffffff» (шестнадцатеричное значение белого цвета).

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

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

input.textarea {

background-color: red;

}

Для написания правил CSS используется собственный язык. Как и при изучении любого нового языка, для овладения им нужна некоторая практика. Чтобы получить дополнительную информацию о синтаксисе (грамматике, используемой для написания этих правил), прочитайте руководства и справочные пособия CSS, бесплатно предоставленные в Интернете W3Schools.

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

Примечание.

Не забывайте заключать список правил CSS в открывающие и закрывающие теги стиля, иначе браузер (и режим «Дизайн») не сможет отобразить эти правила:

<style type="text/css">

</группы стилей>

Удаление элементов по умолчанию в верхней части контактной формы

По умолчанию при вставке формы на страницу она начинается со следующих двух элементов.

Чтобы удалить один или оба элемента, откройте окно HTML и изучите вставленный исходный код (сразу под тегами стиля CSS, которые вы могли добавить).

Чтобы удалить строку «*Required», найдите и удалите следующую строку кода:

<span class="req">*</span> Required

Чтобы удалить подпись «Title» и меню, найдите и удалите следующие строки кода:

<td><label for="Title">Title</label><br /><select name="Title" id="Title" class="cat_dropdown_smaller"><option value="301457">DR</option><option value="301456">MISS</option><option value="301453" selected="selected">MR</option><option value="301454">MRS</option><option value="301455">MS</option></select></td>

Примечание.

При редактировании кода HTML соблюдайте осторожность, чтобы не удалить случайно какой-либо тег, не входящий в приведенные выше строки. Удаление даже одного лишнего символа, например >, приведет к неработоспособности формы. Если это произошло, вернитесь в консоль Admin Console, скопируйте код и снова вставьте его на страницу, заменив отредактированный код.

Список классов и свойств для добавления правил CSS и форматирования контактных форм

При назначении цветов использование интернет-инструментов, таких как kuler, или программ для редактирования изображений (Photoshop или Fireworks) предоставляет большее разнообразие цветов для создания шестнадцатеричного значения цвета. Шестнадцатеричные значения цветов всегда начинаются с символа #, за которым идет 3 или 6 буквенно-числовых символов (0–9 и A–F).

Возможно, будет проще выбрать цвета в существующем проекте сайта с помощью инструмента «Пипетка» в приложении Muse. Шестнадцатеричные значения цветов можно скопировать в поле палитры цветов и вставить их в код. Однако следующие 16 веб-цветов можно указать по имени. Их удобно использовать для проверки работы правила:

Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Red, Silver, Teal, White и Yellow

При указании цветов по имени добавлять символ # перед цветом не нужно.

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

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

Эта работа лицензируется в соответствии с лицензией Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported  На посты, размещаемые в Twitter™ и Facebook, условия Creative Commons не распространяются.

Правовые уведомления   |   Политика конфиденциальности в сети Интернет