Html для head adobe muse что это
Define header and footer regions of your website to add menus, logos, copyright notices, and more in Adobe Muse.
Adobe Muse is no longer adding new features and will discontinue support on March 26, 2020. For detailed information and assistance, see Adobe Muse end-of-service FAQ.
Adobe Muse allows you to create Headers and Footers for a web page in a simple manner. It is a good practice to achieve a consistent appearance for your website keeping the appearance of your header and footer elements the same. You can achieve this by defining Header and Footer elements in your Master in Adobe Muse. Updating the Master Page effectuates changes across all your pages on your web site.
When you build a website with HTML and CSS, the individual pages are often varying heights, based on the unique content that is displayed on each page. Muse includes features that allow for pages of a site to display different lengths, based on the unique content on each page. You can set up regions so that the header always remains in place at the top and the footer content always displays directly below the page content, regardless of each page's height.
Adding header and footer for a page
Before you begin to define Header and Footer regions of your page, make sure that the header and footer guides are displayed. If they are not, choose View > Show Header and Footer.
Alternatively, you can use the View menu in the Control panel to enable the Header and Footer guides.
If you prefer, you can also right-click on the left side of the workspace, just outside the browser window area. Enable the option to Show Header and Footer in the context menu that appears.
Work with Guides and Rulers
The ruler must be enabled to reposition the header and footer guides. The ruler enables you to set the guides to an exact pixel position. By default, the regular guides (that display the number of columns you set when you created the new site) are also shown.
Five blue horizontal guides span the width of the page. Starting from the top, these five guides are used to define the top of the page, the lowest edge of the header, the top edge of the footer, the bottom of the web page and the bottom of the browser window. As you drag the guides to define these areas, a tooltip describes each guide and its current location. You may find it helpful to increase the magnification of the page, so that you can zoom in to position the guides more precisely.
The three middle guides define the content that will be displayed in the header and footer areas. The remaining center region is the area where you’ll add the unique page content; this center area expands to fit the height of the elements placed on each page.
You can also select the rectangles and elements on the page. It is helpful to use the bounding boxes of selected elements to help you align the guides while setting the header and footer areas.
The bottom of the browser window dictates the lowest part of the display area when a visitor views the site in a browser; depending on the design, you can set a background color or background image for the browser itself and set the guide for the bottom of the page above the bottom of the browser guide to allow that background color or image to show below the page's content.
Definie Header and Footer elements
To define Header and Footer elements, do the following:
- Drag both the Bottom of the Page guide and the Bottom of the Browser guide to the same location at the bottom of the page, immediately below the footer rectangle, as shown in the image below.
- Select the rectangle in the footer that contains the tiling background image. Drag the Footer guide until it is aligned with the top of the footer rectangle.
- Leave the Top of Page guide at the very top (at the Y: 0 px location). Drag the Header guide down to a desired level.
The header content will be displayed in the area between the top of the page and the Header guide.
At any time during the design process, you can return to the A-Master page if you need to readjust the guides to fit the header and footer content.
Click the Plan link, or click the tab labeled katiesCafe to return to the Plan view.
Notice that all of the page thumbnails in the site now display the design elements that you added to the linked A-Master page.
At any time as you are designing a site, changes you make to the master page automatically update the linked pages. Master pages make it easy to update or maintain a site, because you can update one master page to change the site's appearance.
Place an image to populate the header content
Since the site logo will appear on every page of the site, it's a perfect candidate to place in the header on the master page.
Choose File > Place . Or if you prefer, use the keyboard shortcut Control+D (Windows) or Command+D (Mac) to place an image.
In the Import dialog box that appears, navigate to select the file in the Kevins_Koffee_Kart folder named Logo.jpg. Click Select .
Use the Selection tool to drag the logo up near the top of the header region that you defined previously.
Next, you'll place another image that will serve as the background graphic of the Menu Bar widget that you'll add in the next section.
Choose File > Place or use the keyboard shortcut for your operating system: Control+D (Windows) or Command+D (Mac).
Navigate to the Kevins_Koffee_Kart folder and select the file named top-nav.jpg.
Click once in the top portion of the page, in the area you previously defined as the header. Be sure to position the image above the header marker, so that it appears in the same place, above the main page content, on every page.
Use the Selection tool to drag the brown ribbon graphic that you just placed, so that the red bicycle tires in the logo are just touching the top of the brown ribbon. This placement gives the illusion that the bike is riding on the brown ribbon.
Choose File > Place again. Browse to select the file named thedrip.jpg. Click once near the bottom right side of the brown ribbon graphic to place the image at its original size.
Use the Selection tool to reposition the drip image, so that it lines up with the brown ribbon and coffee appears to drip from the right side.
You can check the live site example to see the correct positioning of the logo and the top navigation.
In the next section, you'll learn how to add widgets following a brief overview of how to work with widget containers.
Using Sticky Footers
Using the Sticky Footer option allows you to affix a Footer element on a web page. Sticky Footer especially designed for visitors with larger desktop monitors. Enabling the Sticky Footer option causes the footer to remain in the desired location, even if the browser window is significantly larger than the web page design.
The Sticky Footer option is provided on the New Site dialog ( File > New Site ) when create a site in Muse. You can also access Sticky Footer on the Page Properties ( Page > Page Properties ) and Site Properties dialogs ( File > Site Properties )
The Sticky Footer option is enabled by default. Generally speaking, it is best to use the Sticky Footers feature when you design sites. However, if you notice that the length of pages is displaying much longer than desired (because a site has less page content and the pages are fairly short), you can always disable it by deselecting the checkbox in the Page Properties dialog box.
However, if you want to disable it for the entire website, you can do so by deselecting the option on Site Properties dialog.
Создание новых страниц производится в режиме План .
По умолчанию в Muse создается только одна страница (Домашняя страница), все остальные страницы Вы должны создать сами.
Миниатюра домашней страницы (как и все страницы в Muse) при наведении курсора имеет вид, показанный на рисунке слева.
Под миниатюрой стоит название страницы (Home - Домашняя страница), еще ниже - название шаблона, по которому создана страница (A-Master) - см. Работа с шаблонами .
При щелчке по значку "+" справа или слева от Домашней страницы (Home) создается пустая страница верхнего уровня (в англоязычной справке такую страницу называют "страницей родного брата").
При щелчке по значку "+" ниже домашней страницы создается страница 2-го уровня (дочерняя страница).
В свою очередь можно создать страницы 3-го, 4-го и т.д. уровней, но обычно двухуровневой структуры сайта вполне достаточно.
Вся совокупность созданных в режиме План страниц составляет карту сайта (план сайта).
Созданная карта сайта служит основой для автоматического создания панели наавигации по сайту (меню) - см. Панели навигации (меню) .
Названия страниц будут стоять на кнопках меню, если меню создается редактором автоматически (с использование виджета "Меню").
Это же название будет фигурировать после публикации сайта в окне браузера при просмотре страницы посетителями.
Прикрепление страниц к шаблонам
Все страницы в Muse, как правило, создаются по шаблонам.
Создание и оформление шаблонов - операция, предшествующая созданию новых страниц, т.е. сначала создается шаблон, и только после этого он применяется к страницам.
- В режиме План щелкните по шаблону в разделе шаблонов и перетаскивайте его на страницу. При совмещении миниатюры шаблона и миниатюры страницы (при появлении синей рамочки) отпустите кнопку мыши.
- Щелкните по миниатюре страницы правой кнопкой мыши, в контекстном меню выберите "Шаблоны" - выберите нужный шаблон.
Если Вы хотите все страницы сайта оформлять индивидуально, то в этом случае достаточно оставить шаблон, создаваемый по умолчанию (Шаблон-А), пустым.
Естественно, что и все вновь создаваемые страницы окажутся пустыми.
Можно создать часть страниц сайта по шаблонам, а часть - без применения шаблонов.
Чтобы создать страницу без шаблона, перключитесь в режим План , создайте новую страницу, в контекстном меню миниатюры созданной страницы нужно выбрать Шаблоны - Без шаблона .
При любом варианте создания страниц без шаблона изначальный код страницы будет одинаковым.
Важно понять отношения между свойствами сайта, свойствами создаваемых шаблонов и свойствами страниц, создаваемых по шаблонам.
Когда Вы создаете свой сайт, то первое, что Вы делаете - определяете свойства сайта (см. Свойства сайта ).
Шаблоны наследуют свои свойства от параметров настройки в Свойствах сайта, но каждый шаблон может иметь свои индивидуальные свойства - см. Редактирование свойств шаблона
Верхняя строка окна уазывает, свойства какой страницы определяются.
Окно свойств страницы имеет три вкладки: макет, Метаданные, Параметры.
Раздел "Макет"
Ширина страницы (Page Width) - ширина страницы
Мин. высота (Minimum Height) - минимальная высота страницы при просмотре в браузере. Минимальная высота будет выдерживаться, если даже на странице практически ничего нет.
Минимальная высота не ограничивает высоту страницы, т.к. высота страницы определяется содержанием страницы. Например, при вставке большого текста или других объектов страница автоматически увеличивает свою высоту.
Столбцы (Columns) - определяется количество столбцов, их ширины и расстояния между столбцами ( средник - Gutter). Чаще всего разметка столбцов требуется при размещении текста в несколько колонок (см. Расположение текста в колонках ).
При выборе размера средника (расстояния между колонками) Muse автоматически высчитывает ширину столбцов, исходя из общей ширины страницы.
Справочные границы стобцов создаются в виде тонких голубых линий. При редактировании страницы эти линии можно игнорировать.
Раздел " Поля " (Margins) - Устанавливаются размеры полей сверху, снизу, слева, справа. Переключитесь со значка на значок , чтобы сделать поля различного размера по сторонам страницы.
Раздел " Отступ " (Padding) - определяет расстояния от области страницы сверху, снизу, слева.
См. также Расположение страницы в окне Adobe Muse
Выровнять по горизонтали (Center Horizontally) - выравнивание страницы по центру в браузере. По умолчанию страница в Muse располагается по центру окна браузера.
Иногда требуется расположить страницу по левому краю, для этого уберите галочку напротив "Выровнять по горизонтали".
Полосы прокрутки в браузере - вертикальная, горизонтальная
Изображение значка сайта (Favicon) - выбор значка сайта производится при установке свойств сайта , и этого вполне достаточно.
Примечание: такие свойства страницы, как минимальная высота, поля, отступы можно установить также, используя Направляющие .
Метаданные (metadata) определяются как дополнение к свойствам страницы в окне "Свойства страницы" (Page Properties).
Вы можете добавить свои метаданные к каждой странице сайта.
Метаданные облегчают индексацию страниц Вашего сайта поисковыми системами.
В Muse Вы можете добавить три типа метаданных:
Описание (description) - краткое описание содержания страницы. В некоторых случаях поисковые серверы показывают части этого описания в результатах поиска. Описание ограничивается 150 символами.
Ключевые слова (Keywords) - слова и фразы, которые имеют отношение непосредственно с содержанием Вашего сайта.
HTML для - возможность добавить код к разделу html-страницы при публикации.
Имя страницы (Page Name) - название, которое Вы дали странице в режиме План . Обычно это краткое название страницы, состоящее из одного слова, например "Контакты". Это название появляется в браузере при просмотре страницы, а также будет стоять на кнопках меню (при Автоматическом создание меню). При изменении имени страницы в Свойствах страницы оно меняется и под миниатюрой страницы в режиме План.
Примечание: Название страницы располагается в области
кода страницы. Название страницы можно изменить в любое время.Заголовок страницы (title) - заголовок страницы отображает наверху окна браузера и может появиться в результатах поиска для поисковых серверов. Заголовк страницы может быть развернутым, например - "Контакты - наши адреса и телефоны".
По умолчанию, Muse использует в качестве заголовка название страницы, если стоит галочка перед "Как имя страницы". Если убрать галочку, то в области заголовка страницы можно ввести свой заголовок.
Имя файла - название страницы как файла HTML, который создается редактором Muse при публикации сайта. Можно ввести любое название латинским шрифтом, например "contact" (но можно ввести название и русскими буквами, в итоге адрес страницы получится очень длинным).
Это название файла будет фигурировать в окне браузера как составная часть адреса страницы - см. на рисунке ниже.
Примечание: Из общего правила есть исключение - Вы не можете произвольно определять название первой (главной) страницы сайта, Muse автоматически назовет ее index .html.
Примечание: карту сайта формата .xml не нужно путать с картой сайта, которая создается в Muse (режим План ) как временный подсобный элемент для разработки структуры сайта.
Все страницы, которые включены в меню со ссылками, Muse автоматически включает в карту сайта формата .xml.
Чтобы исключить страницу из карты сайта, откройте Свойства страницы - Параметры - уберите галочку напротив "Включать страницу в Sitemap.xml".
Параметры меню - определяет, как страница будет фигурировать в меню (см. Меню - Исключение страниц из меню)
Примечание: Набор свойств страниц в различных версиях Muse практически остается одинаковым - см. Свойства страницы в Muse Beta
Узнайте, как оптимизировать веб-сайты для поисковых систем (SEO), повысить рейтинг посещаемости страницы и помочь пользователям быстрее находить ваши сайты.
Оптимизация сайта для поисковых систем (SEO) позволяет повысить видимость сайта в Интернете благодаря повышению его оценки в списке результатов поиска поисковой системы. Сайты с более высокой оценкой отображаются вверху списка, что помогает посетителям находить нужный сайт в Интернете. Хорошие методы оптимизации сайта для поисковых систем позволяют повысить оценку сайта и таким образом увеличить трафик сайта.
Для того чтобы вывести список сайтов в Интернете, поисковые системы обходят Интернет по ссылкам, связывающим веб-страницы с ресурсами сайта. Процесс оценки поисковыми системами содержимого страниц и ресурсов называется индексированием. Важность индексирования заключается в том, что этот процесс непрерывного сбора данных информирует поисковые системы о доступном содержимом в Интернете. Если сайт больше недоступен, поисковая система удаляет его из результатов поиска. Поисковые системы используют результаты индексирования для определения содержимого сайта и его оценки.
Благодаря индексированию поисковые системы могут вывести в результатах поиска ссылки на веб-сайты, которые точно соответствуют определенному запросу, на основе ключевого слова или фразы. Например, если в поле поисковой системы ввести слово «Adobe» и нажать кнопку «Поиск», в результатах поиска отобразится список веб-страниц. Эти результаты поиска будут содержать ссылки на веб-сайты, на которых поисковая система обнаружила содержимое, связанное с программным обеспечением и продуктами Adobe.
Поисковые системы используют множество параметров, чтобы определить, какие сайты расположить вверху списка. Высокая оценка является наиболее оптимальной, поскольку люди, выполняющие поиск по данному ключевому слову или фразе, вероятнее всего, посетят ваш веб-сайт. Приведенные ниже рекомендации помогут вам упростить процесс индексирования сайта поисковыми системами, чтобы посетители, выполняющие поиск в Интернете, могли найти созданные вами сайты.
Веб-страницы могут содержать встроенные метаданные, такие как имя автора, ключевые слова, описания и язык. Ключевые слова и описание помогают определить назначение сайта и описывают его содержимое. Эти метатеги встраиваются в исходный код HTML; они не видны на странице, которая отображается в окне браузера.
Ранее поисковые системы во время процесса построения индекса оценивали как ключевые слова, так и описание. Веб-разработчики иногда добавляли сотни ключевых слов в надежде улучшить видимость сайта в результатах поиска. Некоторые современные алгоритмы поиска, такие как поисковая система Google, больше не учитывают значения ключевых слов при определении оценки, тем не менее, на их обновление следует уделить время. Ключевые слова могут повысить оценку сайта в других поисковых системах и в решении Google Search Appliance, используемом более крупными веб-сайтами. Описания-метаданные часто отображаются как описание страницы в списке результатов поиска или как описание по умолчанию в Facebook, Google+ и других социальных сетях. Интересное описание может привлечь трафик на сайт.
Поисковые системы часто выполняют полнотекстовое индексирование, при котором они анализируют все текстовое содержимое страницы. Текст, находящийся в тегах заголовка (h1, h2, h3 и т. д.), считается наиболее важным, поскольку заголовки обычно резюмируют информацию на странице. С помощью стилей абзаца можно определить контейнеры тега абзаца для создания страницы, на которой заголовок h1 будет использоваться для заголовка верхнего уровня, заголовок h2 — для подзаголовка, а заголовок h3 — для вложенного подзаголовка. Форматирование текста указывает поисковым системам важность заголовка текста каждого уровня. Определение стилей для использования тегов абзаца и их применение к тексту заголовков позволяет создать правильно построенный код HTML, по которому программы-обходчики поисковых систем могут легко перемещаться.
Во время индексирования содержимого страницы также анализируются изображения и другие связанные ресурсы. Если ресурсы содержат заголовки или альтернативный текст, эта информация тоже анализируется. Оцениваются и всплывающие подсказки, добавленные в гиперссылки. Поисковая система использует все найденное во время индексирования сайтов текстовое содержимое для принятия обоснованного вывода о содержимом каждой страницы. Помимо этого, добавление заголовков и альтернативного текста в изображения и всплывающих подсказок в гиперссылки повышает доступность создаваемых страниц для всех пользователей, включая посетителей, использующих для навигации по Интернету вспомогательные средства.
Регулярно проверяйте свои сайты на наличие нерабочих ссылок, исправляйте или удаляйте такие ссылки. Если поисковая система обнаруживает нерабочую ссылку, она может решить, что сайт долго не обновлялся. Также необходимо внимательно относиться к проблеме отсутствующих файлов изображений и связанных ресурсов. Старые, не обновляемые сайты могут получить в результатах поиска более низкую оценку.
В начале работы над созданием сайта в приложении Adobe Muse отображается запрос на настройку свойств сайта. Это атрибуты, которые применяются ко всем страницам сайта, например значения макета и оформление гиперссылок. Тем не менее, каждая страница также имеет индивидуальные свойства, которые можно настроить для добавления специальных атрибутов. Например, можно настроить «Параметры меню», чтобы определить, будет ли страница отображаться в меню, и обновить метаданные, которые добавляются в исходный код, но не отображаются в браузере.
Выполните следующие действия, чтобы обновить свойства определенной страницы:
В диалоговом окне Свойства страницы откройте вкладку Метаданные , в полях которой можно ввести информацию о метаданных.
Нажмите поле Описание для ввода терминов, наиболее соответствующих содержимому сайта. Например, при разработке страницы о собаках, спасенных от усыпления или жестокого обращения, можно ввести короткое описание страницы «Спаси собаку и найди лучшего друга. Мы крупнейшая организация по спасению лабрадоров-ретриверов в Северной Калифорнии, занимающаяся поиском хозяев для преданных собак».
Нажмите поле Ключевые слова для ввода терминов, наиболее соответствующих содержимому сайта. Например, при разработке страницы о собаках можно ввести ключевые слова, соответствующие содержимому страницы, такие как «спасенные собаки в Калифорнии», «лабрадоры-ретриверы», «черные лабрадоры», «коричневые лабрадоры», «медицинская помощь собакам», «уход за собаками», «приюты для собак».
При обновлении поля Имя страницы следует помнить, что имя страницы является подписью, которая отображается в виджетах «Меню» на всем сайте.
Поле Заголовок страницы по умолчанию содержит имя страницы. Заголовок страницы отображается в окне браузера, на вкладках браузера и в списке закладок (в зависимости от используемого сайта). Чтобы изменить его, снимите флажок рядом с параметром Как имя страницы и введите новый заголовок страницы.
Завершив обновление метаданных, нажмите «ОК», чтобы закрыть диалоговое окно Свойства страницы .
После помещения на страницу изображений в диалоговом окне Свойства изображения можно настроить заголовок и альтернативный текст (также называемый alt-текстом), которые будут применены к изображению.
Ниже приведено краткое описание каждого свойства.
Заголовок : в большинстве браузеров заголовок отображается в дополнение к изображению, обычно в виде всплывающей подсказки, которая появляется при наведении курсора на изображение.
Альтернативный текст : если файл изображения не может быть отображен, этот текст отображается вместо изображения. Альтернативный текст также используется для описания изображений для посетителей с ослабленным зрением, использующих для доступа к содержимому страниц вспомогательные технологии.
Заголовки и альтернативный текст лучше всего настраивать для каждого ресурса сайта, чтобы предоставить посетителям наилучшие способы навигации по сайту. Всплывающие подсказки позволяют добавить дополнительную информацию о графике, а альтернативный текст повышает доступность страниц для программ чтения с экрана, которые преобразуют графическое содержимое в речевое.
Для добавления заголовков и альтернативного текста выполните следующие действия.
Встроенный HTML-элемент — это исходный код, созданный на стороннем веб-сайте, например Google, YouTube, Flickr или Picasa. Вы можете создать на этих веб-сайтах учетную запись, выполнить вход, скопировать код для вставки с этого сайта и добавить его на свой сайт.
Вставленный на страницу встроенный HTML-элемент представляет собой размещенное на странице сайта окно, в котором отображается содержимое стороннего веб-сайта.
Встроенные HTML-элементы предлагают простой и быстрый способ добавления на сайт сложной информации (например, карт, прогнозов погоды, котировок фондового рынка) и мультимедийных данных (например, цифрового видео, слайд-шоу и аудиофайлов). Дополнительным преимуществом этой стратегии является возможность использовать сторонний веб-сайт в качестве службы хостинга и интерфейса передачи данных. Например, создав на YouTube учетную запись, можно создать собственный канал YouTube и загружать на свой сайт видеосодержимое. На YouTube есть веб-страница, упрощающая процесс передачи данных и хранящая видеофайлы. При необходимости обновить сайт просто добавьте видеоролики на свой канал YouTube, скопируйте код для вставки и вставьте его на страницу сайта Muse.
В том разделе мы будем копировать исходный код с сайта Tumblr. Это бесплатный интернет-сервис, требующий регистрации и позволяющий публиковать блоги с открытым доступом. Блоги просты в использовании и предоставляют удобный способ обновления веб-сайтов для пользователей без технических склонностей. Большинство сайтов для ведения блогов имеют веб-интерфейс, позволяющий пользователям входить в учетную запись с любого браузера и публиковать новые записи, не требуя знания языка HTML или дополнительного программного обеспечения.
Примечание. Посетителям вашего веб-сайта необязательно иметь учетную запись Tumblr для просмотра блога, встроенного на странице. Учетная запись требуется только пользователю, который занимается разработкой сайта, для создания собственного блога и генерирования кода для встраивания на веб-сайт.
- Для примера, приведенного в этом руководстве, создавать учетную запись Tumblr не требуется. Просто скопируйте код ниже, который был сгенерирован веб-сайтом Tumblr после создания на нем бесплатного блога.
Примечание. В большинстве случаев приложение Muse распознает код HTML и автоматически встраивает его при вставке на страницу. Однако если вместо содержимого со стороннего веб-сайта на странице отображается код, выберите «Объект» > «Вставить HTML».
После того как код HTML будет встроен, вокруг публикаций блога, введенных для учетной записи Tumblr Katie's Cafe, будет отображаться синяя ограничительная рамка с манипуляторами.
- С помощью инструмента «Выделение» перетащите манипуляторы так, чтобы окно с содержимым блога занимало приблизительно 80% от ширины страницы. Расположите содержимое блога по центру страницы так, чтобы фоновое изображение просвечивало справа и слева. В синем прямоугольнике измерения отображается расстояние до других объектов. Когда выбранный объект выровнен по центру по вертикали, на короткое время отображается красная направляющая выравнивания.
Это все, что необходимо сделать для встраивания HTML-элемента на страницы сайта Muse. Если позднее потребуется отредактировать код HTML, нажмите встроенный HTML-элемент правой кнопкой мыши и выберите в контекстном меню пункт «Редактировать HTML». При этом откроется окно «Редактирование HTML», предоставляющее доступ к ранее вставленному коду.
Теперь можно просмотреть изменения, которые мы сделали на странице «events».
- Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы просмотреть страницу «events» в новом окне браузера.
Обратите внимание, что при пролистывании списка публикаций блога заголовок отображается вверху остального содержимого страницы. Это связано с тем, что для страницы «events» используется страница-шаблон «Передний план» и заголовок этой страницы-шаблона отображается на переднем плане.
На данный момент целевой контейнер имеет заливку серого цвета. Тем не менее, в целевой контейнер можно поместить любое содержимое, включая различные файлы изображений, прямоугольники с заливкой, текст или встроенный HTML-элемент, скопированный с другого веб-сайта.
В следующем примере мы рассмотрим процесс вставки встроенного HTML-элемента, созданного на сайте YouTube.
В данном случае код для встраивания видеоролика для Katie's Cafe уже скопирован на сайт, поэтому вам не нужно посещать YouTube. Скопируйте следующий код для встраивания в буфер обмена:
В этом коде вокруг ссылки на видеофайл, опубликованный на YouTube, используются теги iFrame. Тег iFrame — это контейнер HTML, позволяющий отображать содержимое в «окне» после его добавления на веб-страницу.
Скопировав код выше, вернитесь в приложение Muse.
Следующим этапом, пока не снято выделение внутреннего целевого контейнера, является вставка скопированного ранее кода HTML в целевой контейнер.
Примечание. При вставке кода в целевой контейнер могут возникать некоторые затруднения, так же как при вставке главного изображения в контейнер триггера, поскольку задача заключается в том, чтобы вставить код ВНУТРЬ целевого контейнера виджета. Существует вероятность (в зависимости от выбранного элемента), что код видеоролика будет вставлен за пределы виджета и окажется встроенным в саму страницу. Поэтому следует соблюдать осторожность. Если при проверке лайтбокса (кнопка «Предварительный просмотр») видео начинает воспроизводиться, даже если не было нажато главное изображение, значит код видео не был вставлен в контейнер, что приводит к его моментальному воспроизведению. Видео должно отображаться только после нажатия на главное изображение.
Чтобы вставить код видео в целевой контейнер, выполните следующие действия (пока в индикаторе выбора отображается слово «Контейнер»).
Примечание. В большинстве случаев приложение Muse автоматически определяет процесс вставки кода HTML и воспринимает текст как HTML, а не обычный текст. Таким образом, вместо выбора команды «Объект» > «Вставить HTML», чтобы открыть окно HTML, можно нажать правой кнопкой мыши (или Control + нажатие), пока выделен внутренний целевой контейнер, и выбрать в контекстном меню команду «Вставить». (Также можно выбрать команду «Редактировать» > «Вставить» или использовать комбинацию клавиш для вставки исходного кода в целевой контейнер). Приложение Muse предлагает несколько способов вставки кода видеоролика в целевой контейнер.
После вставки кода в целевой контейнер отобразится первый кадр видеоролика (чашка кофе). Отображение первого кадра указывает на то, что код HTML вставлен успешно. Видео не будет воспроизводиться, пока вы редактируете страницу в режиме «Дизайн». Оно воспроизводится только после нажатия кнопки «Предварительный просмотр» на панели элементов управления или при предварительном просмотре страницы в браузере.
- В нижней части контейнера выберите текстовый фрейм и нажмите клавишу Delete (Mac) или Backspace (Windows), чтобы удалить его. Текстовый фрейм можно заполнить подписью для целевого содержимого, однако в этом проекте мы не будем этого делать.
- Выберите прямоугольник «Закрыть» (с крестиком) в правом верхнем углу контейнера. Нажмите внутри прямоугольника «Закрыть», чтобы выбрать его подпись, и удалите ее. Используя меню «Заливка» установите для цвета заливки значение «Нет». В меню «Заливка» нажмите значок папки рядом с разделом «Изображение» и найдите файл с именем «icon-close.jpg». С помощью инструмента «Выделение» измените размер прямоугольника «Закрыть» так, чтобы в нем помещалось все изображение значка закрытия.
- С помощью инструмента «Выделение» переместите целевой контейнер и контейнеры триггеров в желаемое место страницы.
- Не снимая выделения с композиции, нажмите кнопку с синей стрелкой, чтобы открыть панель параметров. Для этого примера задайте указанные ниже настройки.
- Положение: лайтбокс
- Переход: затухание
- Автоматическое воспроизведение: отключено
- Перемешать: отключено
- Изначально скрыть все: отключено
- Разрешить перелистывание: включено
- Триггеры сверху: отключено
- Кнопка «Закрыть»: включено
- Показать элементы лайтбокса при редактировании: включено
- Показать все в режиме «Дизайн»: включено
Нажмите вне области окна параметров, чтобы закрыть его. На этом этапе, мы завершили настройку виджета и можем проверить его.
В одной из предыдущих частей этого руководства мы рассматривали процесс встраивания HTML-элемента на примере добавления блога Tumblr на страницу «events». Вы также узнали, как вставить встроенный HTML-элемент в виджет «Композиция с лайтбоксом» для воспроизведения видеоролика YouTube в лайтбоксе при нажатии кнопки пользователем. В этом разделе мы рассмотрим еще один пример использования встроенного HTML-элемента, предоставленного сайтом Google Карты. Выполните следующие действия.
- Если страница «visit» не открыта в режиме «Дизайн», нажмите «План» и дважды нажмите миниатюру страницы «visit» для редактирования.
После создания карты в интерфейсе сайта Google Карты можно ввести заголовок и описание карты. Затем нажмите кнопку «Ссылка», чтобы получить доступ к коду. Выделите код HTML в поле «HTML-код для добавления на веб-сайт», вернитесь в приложение Muse и встройте полученный код на страницу.
Для примера, приведенного в этом руководстве, создавать карту самостоятельно не требуется. Если вы хотите попробовать сделать это самостоятельно, введите любой адрес, создайте карту и скопируйте ее код. Однако если вы хотите просто посмотреть, как это работает, воспользуйтесь предварительно созданным кодом HTML.
- Вставьте код в верхнюю часть страницы «visit». С помощью инструмента «Выделение» расположите встроенный HTML-элемент по центру по вертикали страницы ближе к ее верхней части так, чтобы четвертая часть карты накладывалась на область заголовка. Оставьте свободное пространство между картой и изображением цветка под ней, чтобы можно было добавить описание.
- С помощью инструмента «Текст» расположите текстовый фрейм под встроенной картой. Скопируйте следующий текст и вставьте его в текстовый фрейм:
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.
После добавления описания карты оформление страницы «visit» завершено.
- Выберите «Файл» > «Предварительный просмотр страницы в браузере», чтобы проверить отображение страницы «visit» в браузере.
Обратите внимание, что встроенная с помощью кода HTML карта Google интерактивна. Вы можете нажимать стрелки для перемещения карте в окне или кнопки «+» и «-» для увеличения и уменьшения масштаба.
Проектирование всех страниц сайта завершено. В последних разделах этого руководства вы узнаете, как добавить последние штрихи и опубликовать пробную версию сайта.
На страницы сайта можно встроить код HTML для добавления сложных функций, которые будут динамически отображаться со сторонних веб-серверов. Эти части кода можно скопировать у неограниченного количества поставщиков веб-услуг, таких как Google, Yahoo!, YouTube и многих других и вставить на страницы Muse. В этом разделе приведено два примера встроенных HTML-элементов и рассматриваются способы быстрого добавления содержимого социальных сетей и интерактивных карт Google на веб-сайт Muse.
Для начала необходимо завершить добавление содержимого на главную страницу . Если вы следовали нашим инструкциям, то главная страница , вероятно, уже открыта в режиме Дизайн . Если нет, дважды нажмите миниатюру главной страницы в режиме План , чтобы открыть ее для редактирования в режиме Дизайн . Мы добавим встроенный HTML-элемент в верхнюю часть слайд-шоу, ранее добавленного на главную страницу .
Чтобы вам не нужно было входить на Twitter и создавать собственную учетную запись, ниже представлен код вставки, скопированный в Twitter для учетной записи Kevin's Koffee Kart.
Читайте также: