Html для head adobe muse что это
Обновлено: 07.07.2024
Настройки веб страницы в Adobe Muse
В этом видеоуроке рассмотрены нюансы и тонкости по настройки веб страницы в программе Adobe Muse. Особенности настройки и ключевые моменты.
Настройки веб страницы. Начало.
Вы уже наверняка создавали страницы и сайты в Adobe Muse, но при публикации возможно не учитывали некоторые очень важные нюансы для того чтобы страницы сайта грамотно отображались в различных браузерах и имели вес в поисковых системах.
Давайте откроем программу, создадим File -> Новый сайт. Здесь неважно какие настройки веб страницы, потому что мы сейчас будем просто рассматривать настройки параметров страниц и при создании нового сайта у нас первая страница является домашняя. Давайте ее сразу откроем, посмотрим ее свойства.
Для домашней страницы у нас есть следующие свойства. У нас есть макет, где мы настраиваем все удобства для дальнейшей работы, где мы можем добавить значок сайта это favicon, о котором я рассказывал в одном из предыдущих моих видеоуроков, и также здесь еще есть две закладки. Метаданные и параметры. Вот о них мы и поговорим.
Настройки веб страницы. Метаданные.
Вкладка Метаданные. Давайте посмотрим, что у нас здесь есть. Здесь у нас есть описание, ключевые слова и html для head. Здесь мы можем вставить в поле заголовка элемент html кода, который будет включен в раздел head страницы. Здесь конечно же нужно соблюдать и этот текст, который здесь будет расположен, должен иметь допустимый разметку кода html.
Настройки веб страницы. Описание.
Описание. Описание страницы будет отображаться в поисковой системе рядом с запросом. Здесь вам нужно кратко описать суть вашего сайта или страницы, возможность даже вставить пару ключевых слов. Что собой представляют ключевые слова. Ключевые слова — это запросы, по которым пользователи будут находить вашу страницу или сайт в поисковых системах. Здесь также нужно указать слова, которые будут более точно отображать суть вашей страницы.
Дальше. Вкладка Параметры. Во вкладке параметры мы видим, что можем мы задавать имя страницы, заголовок страницы, имя файла, карту сайта включать/отключать. Дальше есть у нас параметры меню, язык и символы web-шрифтов.
Настройки веб страницы. Заголовок страницы.
Для домашней страницы у нас имя может быть здесь совершенно любое, на любом языке. Заголовок страница мы также можем поменять и сделать его отличным от имени страницы. Можем оставить таким же, поставив галочку “как имя страницы’’. Имя файла для домашней страницы мы поменять не можем. По умолчанию для всех сайтов имя файлов index.html для домашней страницы. Это самая главная страница сайта. Она самая первая и имя ее поменять нельзя. Тоже касается карты сайта, то здесь мы можем включать страницу в карту сайта, либо не включать. Я рекомендую оставлять эту галочку. Тогда поисковые роботы будут индексировать эту страницу.
Давайте перейдем снова в план сайта и попробуем давайте еще пару страниц. Зайдем на нашу дополнительную страницу, которую мы создали и посмотрим ее свойства. Здесь мы также должны задать имя страницы во вкладке Параметры. Здесь мы может изменить заголовок страницы, поставить его отличным от имени страницы и здесь вы видите, что мы можем изменять имя файла. Особенно я хотел бы обратить на это внимание.
Настройки веб страницы. Имя файла и имя страницы.
Когда мы создаем новую страницу в плане сайта (давайте я сейчас закрою пока) автоматически русскоязычная программа Adobe Muse дает нам название “Без имени-3”. Так вот. Вернемся сейчас к свойствам страницы “Без имени-3” и что я хотел бы здесь отметить – вот это имя вам нужно поменять обязательно. Поменять его таким образом, чтобы оно отображалось на английском языке. Если у вас какие-то ключевые запросы по которым вы хотите, чтобы отображалось эта страница в поисковых системах я рекомендую вам во вкладке параметры создать имя страницы английскими буквами русские слова, то есть как бы транслитерацией написать имя страницы, но обязательно это должны быть английские символы. Здесь вот это никак нельзя на русском языке оставлять. Дальше. Все остальное здесь оставляем по умолчанию, здесь особо ничего менять не надо.
На этом все. Смотрите мои следующие и предыдущие видеоуроки. Также в верхнем правом углу вы можете нажать на кнопку «Информация» (i), зайти на мою страничку и подписаться на мою рассылку и скачать 3 бесплатных шаблона и 49 виджетов. А на этом все дорогие друзья, до следующих видео. Пока.
Важно понять отношения между свойствами сайта, свойствами создаваемых шаблонов и свойствами страниц, создаваемых по шаблонам.
Когда Вы создаете свой сайт, то первое, что Вы делаете - определяете свойства сайта (см. Свойства сайта ).
Шаблоны наследуют свои свойства от параметров настройки в Свойствах сайта, но каждый шаблон может иметь свои индивидуальные свойства - см. Редактирование свойств шаблона
Верхняя строка окна уазывает, свойства какой страницы определяются.
Окно свойств страницы имеет три вкладки: макет, Метаданные, Параметры.
Раздел "Макет"
Ширина страницы (Page Width) - ширина страницы
Мин. высота (Minimum Height) - минимальная высота страницы при просмотре в браузере. Минимальная высота будет выдерживаться, если даже на странице практически ничего нет.
Минимальная высота не ограничивает высоту страницы, т.к. высота страницы определяется содержанием страницы. Например, при вставке большого текста или других объектов страница автоматически увеличивает свою высоту.
Столбцы (Columns) - определяется количество столбцов, их ширины и расстояния между столбцами ( средник - Gutter). Чаще всего разметка столбцов требуется при размещении текста в несколько колонок (см. Расположение текста в колонках ).
При выборе размера средника (расстояния между колонками) Muse автоматически высчитывает ширину столбцов, исходя из общей ширины страницы.
Справочные границы стобцов создаются в виде тонких голубых линий. При редактировании страницы эти линии можно игнорировать.
Раздел " Поля " (Margins) - Устанавливаются размеры полей сверху, снизу, слева, справа. Переключитесь со значка на значок , чтобы сделать поля различного размера по сторонам страницы.
Раздел " Отступ " (Padding) - определяет расстояния от области страницы сверху, снизу, слева.
См. также Расположение страницы в окне Adobe Muse
Выровнять по горизонтали (Center Horizontally) - выравнивание страницы по центру в браузере. По умолчанию страница в Muse располагается по центру окна браузера.
Иногда требуется расположить страницу по левому краю, для этого уберите галочку напротив "Выровнять по горизонтали".
Полосы прокрутки в браузере - вертикальная, горизонтальная
Изображение значка сайта (Favicon) - выбор значка сайта производится при установке свойств сайта , и этого вполне достаточно.
Примечание: такие свойства страницы, как минимальная высота, поля, отступы можно установить также, используя Направляющие .Метаданные (metadata) определяются как дополнение к свойствам страницы в окне "Свойства страницы" (Page Properties).
Вы можете добавить свои метаданные к каждой странице сайта.
Метаданные облегчают индексацию страниц Вашего сайта поисковыми системами.
В Muse Вы можете добавить три типа метаданных:
Описание (description) - краткое описание содержания страницы. В некоторых случаях поисковые серверы показывают части этого описания в результатах поиска. Описание ограничивается 150 символами.
Ключевые слова (Keywords) - слова и фразы, которые имеют отношение непосредственно с содержанием Вашего сайта.
HTML для <head> - возможность добавить код к разделу <head> html-страницы при публикации.
Имя страницы (Page Name) - название, которое Вы дали странице в режиме План . Обычно это краткое название страницы, состоящее из одного слова, например "Контакты". Это название появляется в браузере при просмотре страницы, а также будет стоять на кнопках меню (при Автоматическом создание меню). При изменении имени страницы в Свойствах страницы оно меняется и под миниатюрой страницы в режиме План.Примечание: Название страницы располагается в области <head> кода страницы. Название страницы можно изменить в любое время.
Заголовок страницы (title) - заголовок страницы отображает наверху окна браузера и может появиться в результатах поиска для поисковых серверов. Заголовк страницы может быть развернутым, например - "Контакты - наши адреса и телефоны".
По умолчанию, Muse использует в качестве заголовка название страницы, если стоит галочка перед "Как имя страницы". Если убрать галочку, то в области заголовка страницы можно ввести свой заголовок.
Имя файла - название страницы как файла HTML, который создается редактором Muse при публикации сайта. Можно ввести любое название латинским шрифтом, например "contact" (но можно ввести название и русскими буквами, в итоге адрес страницы получится очень длинным).
Это название файла будет фигурировать в окне браузера как составная часть адреса страницы - см. на рисунке ниже.
Карта сайта - создание карты сайта в формате .xml для поисковых систем.
Примечание: карту сайта формата .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-текстом), которые будут применены к изображению.
Ниже приведено краткое описание каждого свойства.
Заголовок : в большинстве браузеров заголовок отображается в дополнение к изображению, обычно в виде всплывающей подсказки, которая появляется при наведении курсора на изображение.
Альтернативный текст : если файл изображения не может быть отображен, этот текст отображается вместо изображения. Альтернативный текст также используется для описания изображений для посетителей с ослабленным зрением, использующих для доступа к содержимому страниц вспомогательные технологии.
Заголовки и альтернативный текст лучше всего настраивать для каждого ресурса сайта, чтобы предоставить посетителям наилучшие способы навигации по сайту. Всплывающие подсказки позволяют добавить дополнительную информацию о графике, а альтернативный текст повышает доступность страниц для программ чтения с экрана, которые преобразуют графическое содержимое в речевое.
Для добавления заголовков и альтернативного текста выполните следующие действия.
Начните работу в Adobe Muse. Узнайте, как работать с файлами .muse, настраивать параметры страниц, добавлять значки сайта и многое другое.
После входа в приложение запускается рабочая среда Adobe Muse. Отобразится экран приветствия Adobe Muse. Выполните одно из следующих действий:
- Нажмите «Создать новый», чтобы создать сайт.
- Нажмите «Открыть» и перейдите к существующему файлу .muse на вашем компьютере.
При выборе пункта для создания нового сайта появится диалоговое окно «Новый сайт». Выберите параметр «Гибкое значение ширины», чтобы включить адаптивный макет, или параметр «Постоянная ширина», чтобы включить альтернативный макет. Окно содержит поля, позволяющие настроить максимальную ширину страницы, столбцы и значение средника.
Настройки можно изменить в любое время в меню «Файл» > «Свойства сайта».
По окончании нажмите кнопку «ОК», чтобы закрыть диалоговое окно.
В верхней части отображаются ссылки на различные разделы интерфейса: «План», «Дизайн» и «Опубликовать».
Более подробную информацию об использовании интерфейса приложения и проектировании веб-сайтов с помощью Adobe Muse см. в руководствах «Начало работы с Adobe Muse» и «Создание первого веб-сайта с помощью Adobe Muse».
При разработке веб-сайтов в других приложениях, таких как Dreamweaver, вы создаете на компьютере папку, содержащую вложенные папки с файлами всего содержимого сайта. Управление всем набором элементов и обеспечение правильной работы всех ссылок сайта может представлять сложности.
Также можно создать файл .muse и опубликовать временный сайт. А затем предоставить коллегам общий доступ к файлу .muse. Они могут открыть его, выбрав меню «Файл» > «Сохранить как», и вносить изменения в свою копию, в то время как вы будете продолжать работать со своей копией. При этом изменения коллег будут сохраняться в новом опубликованном ими временном сайте. Однако при таком рабочем процессе две версии сайта не будут синхронизированы — ваша версия файла .muse не будет обновляться изменениями, внесенными коллегами, и наоборот.
При каждом внесении значительных изменений в существующий веб-сайт рекомендуется всегда сохранять копию файла .muse с помощью меню «Файл» > «Сохранить как». При создании нового файла .muse немного измените его имя и храните все копии файла .muse в одной папке на компьютере. Таким образом, если клиенту больше понравится первоначальная версия сайта, вы всегда сможете открыть соответствующий файл .muse с предыдущим дизайном и опубликовать его, чтобы вернуть сайт к прежнему виду.
Также рекомендуется чаще сохранять файл .muse во время работы. В случае сбоя приложения Adobe Muse при его следующем запуске обычно открывается восстановленная версия файла .muse с последними изменениями. В этом случае сразу сохраните восстановленную версию файла .muse, а затем приступайте к редактированию. Обязательно сохраняйте файлы .muse в безопасном месте и создайте их резервные копии, поскольку каждый файл содержит целый веб-сайт. Если вы потеряете файл .muse и у вас не будет резервной копии, вы не сможете восстановить файл .muse, загрузив файлы сайта, размещенные на сервере.
Большинство веб-дизайнеров предпочитают сохранять файлы .muse с описательными именами, например my_site_v1.muse и my_site_v2.muse. Также в имя файла .muse можно добавить дату его создания, чтобы было легче найти более старую версию, например my_site_2012-4-13.muse и my_site_2012-4-30.muse. Называть файлы можно любым удобным для вас способом.
Выполните следующие действия, чтобы создать новый сайт и определить свойства сайта.
Встроенный 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% от ширины страницы. Расположите содержимое блога по центру страницы так, чтобы фоновое изображение просвечивало справа и слева. В синем прямоугольнике измерения отображается расстояние до других объектов. Когда выбранный объект выровнен по центру по вертикали, на короткое время отображается красная направляющая выравнивания.
.jpg.img.jpg)
Это все, что необходимо сделать для встраивания 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.
Читайте также: