Редактирование веб-сайта

Откройте недавно созданный веб-сайт в Site Builder, выбрав его и нажав Открыть в строке меню или в контекстном меню. В Site Builder переведите указатель Значок "Редактировать" в положение Редактировать. Введите имя обновления и нажмите ОК.

В режиме редактирования вы увидите, что на сайте есть три ячейки, которые являются областями, доступными на странице (в зависимости от макета страницы). Наведите указатель на каждый знак "+" на странице, чтобы увидеть такие ячейки, как "Заголовок", "Тело" и "Нижний колонтитул".


Описание GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png ниже
Описание иллюстрации GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png

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

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


Описание GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png ниже
Описание иллюстрации GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png
Давайте заполним ячейку "Заголовок" готовыми компонентами:
  1. На левой боковой панели нажмите Значок "Компоненты", а затем Заданные предварительно, чтобы отобразить список готовых компонентов, доступных в Oracle Content Management.
  2. На левой боковой панели найдите готовый компонент "Группа компонентов". Перетащите его в ячейку "Заголовок".


    Описание GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png ниже
    Описание иллюстрации GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png

  3. Нажмите на значок меню группы компонентов Значок меню группы компонентов, а затем нажмите Настройки. В настройках нажмите на раскрывающийся список Цвет (доступен в нижней части списка настроек), а затем нажмите Дополнительно. Введите #333333 и нажмите OK.


    Описание GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png ниже
    Описание иллюстрации GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png

  4. Перетащите компонент "Изображение" в группу компонентов.


    Описание GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png ниже
    Описание иллюстрации GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png

  5. Нажмите на значок меню компонента "Изображение" Меню компонента, а затем нажмите Настройка. Завершите настройку на вкладке Общие.
    Свойство Значение
    Выбрать Logo.png из папки Minimal-Images
    Выравнивание Слева
    Ширина Отмените выбор Задать ширину
    Первые 1.2vw
    Внизу 30px
    Слева 6vw
    Справа 0

    Описание GUID-8030FFAF-3DC0-4217-8733-01C3A53CEF8E-default.png ниже
    Описание иллюстрации GUID-8030FFAF-3DC0-4217-8733-01C3A53CEF8E-default.png

    Описание GUID-F9B34895-7DCD-40AA-B4CF-3404820C20DD-default.png ниже
    Описание иллюстрации GUID-F9B34895-7DCD-40AA-B4CF-3404820C20DD-default.png
  6. Давайте свяжем это изображение логотипа с домашней страницей. Задайте настройки компонента "Изображение" на вкладке Ссылка.
    Свойство Значение
    Выберите тип ссылки Страница сайта
    Страница Домашняя страница
    Назначение Открыть в том же окне
  7. На левой боковой панели нажмите Значок "Назад" и Пользовательский, чтобы отобразить список пользовательских компонентов.
  8. Теперь давайте добавим меню навигации на домашнюю страницу, используя пользовательский компонент Minimal-NavMenu. Перетащите компонент Minimal-NavMenu в группу компонентов справа от компонента "Изображение". Нажмите на заголовок компонента Minimal-NavMenu, чтобы убедиться, что его родительский компонент — это группа компонентов, которую вы добавили ранее. Это полезный способ узнать местоположение любого компонента в структуре веб-страницы.


    Описание GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.png ниже
    Описание иллюстрации GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.png

    Завершите настройку на вкладке Общие.

    Свойство Значение
    Выравнивание Справа
    Первые 1.2vw
    Внизу 0
    Слева 0
    Справа 6vw
  9. Теперь заголовок готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на заголовок группы компонентов, а затем нажмите на значок ее меню Значок меню группы компонентов и нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Header", а затем нажмите кнопку Сохранить.


    Описание GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.png ниже
    Описание иллюстрации GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.png

    Подсказка.:

    Если нажать имя группы компонентов, отображается заголовок компонента "Изображение" или Minimal-NavMenu, а не заголовок группы компонентов. Снова нажмите заголовок компонента "Изображение" или Minimal-NavMenu и вы увидите заголовок группы компонентов. Теперь можно нажать заголовок группы компонентов и выполнить указанный выше шаг.
    На изображении ниже показана родительская структура компонента "Изображение" в ячейке "Заголовок".


    Описание GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png ниже
    Описание иллюстрации GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png

  10. Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения. Теперь ячейка "Заголовок" должна выглядеть следующим образом:


    Описание GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png ниже
    Описание иллюстрации GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png

Давайте перейдем к ячейке "Тело":
  1. На левой боковой панели нажмите Значок "Назад", затем выберите Заданные предварительно.
  2. Из левой боковой панели перетащите группу компонентов в ячейку "Тело". С помощью этой группы компонентов и компонентов (которые мы добавим в нее) создадим баннер.
  3. На левой боковой панели нажмите Значок "Макеты разделов".
  4. Перетащите макет раздела "Два столбца" в группу компонентов.


    Описание GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png ниже
    Описание иллюстрации GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png

  5. Задайте настройки макета раздела на вкладке Общие. Нажмите Пользовательские настройки, чтобы указать приведенные ниже настройки.
    Свойство Значение
    Ширина первого столбца (%) 43
    Ширина второго столбца (%) 57
    Точка останова при ответе (пикс.) 1,023
    Поведение при ответе Скрыть первый столбец

    Завершите настройку на вкладке Фон.

    Свойство Значение
    Изображение Banner1.jpg из папки Minimal-Images
    Позиция Посередине по центру
    Масштаб Растянуть
  6. На левой боковой панели нажмите Значок "Компоненты", чтобы отобразить список предварительно заданных компонентов.
  7. Из списка предварительно заданных компонентов перетащите компонент "Заголовок" во второй столбец макета "Два столбца".


    Описание GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png ниже
    Описание иллюстрации GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png


    Описание GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png ниже
    Описание иллюстрации GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png
  8. Нажмите компонент "Заголовок" и введите "WELCOME TO THE REVOLUTION". В текстовом редакторе выделите текст и задайте цвет шрифта Белый. Завершите задание настроек компонента "Заголовок" на вкладке Общие.
    Свойство Значение
    Первые 6vw
    Внизу 1.8vw
    Слева 6vw
    Справа 6vw
  9. Из списка предварительно заданных компонентов на левой боковой панели перетащите компонент "Абзац" под компонент "Заголовок" во втором столбце макета "Два столбца". Завершите настройку на вкладке Общие.
    Свойство Значение
    Первые 1.8vw
    Внизу 6vw
    Слева 6vw
    Справа 6vw
  10. Нажмите в компоненте "Абзац", чтобы ввести следующий текст:

    "I'm a paragraph. Click here to add your own text and edit me. I'm a great place for you to tell a story and let your users know a little more about you or your organization." (Я — абзац. Нажмите здесь, чтобы добавить свой текст и отредактировать меня. Я отлично подхожу для того, чтобы вы могли рассказать историю и сообщить своим пользователям немного больше о себе или своей организации.)

    В текстовом редакторе выделите текст и задайте размер 24. Также в текстовом редакторе задайте цвет шрифта Белый.


    Описание GUID-399EE9A6-F882-40F9-8028-BB930A5FDC49-default.png ниже
    Описание иллюстрации GUID-399EE9A6-F882-40F9-8028-BB930A5FDC49-default.png

  11. Теперь баннер готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на значок меню группы компонентов Значок меню группы компонентов, а затем нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Banner", а затем нажмите кнопку Сохранить. Вы заметите, что данное имя (Minimal-Banner) теперь отображается для группы компонентов.


    Описание GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png ниже
    Описание иллюстрации GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png

  12. Из левой боковой панели перетащите еще одну группу компонентов в ячейку "Тело" под уже добавленной группой компонентов Minimal-Banner.


    Описание GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png ниже
    Описание иллюстрации GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png

  13. Перетащите компонент "Заголовок" в данную группу компонентов.
  14. Нажмите компонент "Заголовок" и введите "Welcome to OCE Minimal".
  15. Завершите задание настроек компонента "Заголовок" на вкладке Общие.
    Свойство Значение
    Первые 3vw
    Внизу 1.8vw
    Слева 6vw
    Справа 6vw

    Описание GUID-515D7B63-7AB4-4FF6-94AD-0C30A331A7BC-default.png ниже
    Описание иллюстрации GUID-515D7B63-7AB4-4FF6-94AD-0C30A331A7BC-default.png
  16. Из левой боковой панели перетащите компонент "Абзац" в группу компонентов под компонент "Заголовок". Нажмите в компоненте "Абзац", чтобы ввести следующий текст:

    "Oracle Content Management — централизованная платформа контента в облаке для управления многоканальным контентом и ускорения доставки компонентов взаимодействия. It offers powerful collaboration and workflow management capabilities to streamline the creation and delivery of content." (Oracle Content and Experience — централизованная платформа контента в облаке для управления многоканальным контентом и ускорения его доставки. Она предоставляет мощные возможности управления потоками операций и совместной работой, позволяющие упростить создание и доставку контента.)

    "Oracle Content Management предлагает простые и удобные в использовании инструменты для создания веб-сайтов. Вы можете быстро создать веб-сайт, используя преимущества мощных функций, предоставляемых Oracle Content Management".

  17. Завершите задание настроек компонента "Абзац" на вкладке Общие.
    Свойство Значение
    Первые 20px
    Внизу 50px
    Слева 6vw
    Справа 6vw

    Описание GUID-D8B86A72-DC68-4FD3-B664-2603244316FD-default.png ниже
    Описание иллюстрации GUID-D8B86A72-DC68-4FD3-B664-2603244316FD-default.png
  18. Создание ячейки "Тело" завершено. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на значок меню группы компонентов Значок меню группы компонентов, а затем нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Body", а затем нажмите кнопку Сохранить.
  19. Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения. Теперь ячейка "Тело" должна выглядеть следующим образом:


    Описание GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png ниже
    Описание иллюстрации GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png

Давайте завершим создание ячейки "Нижний колонтитул":
  1. Из левой боковой панели перетащите группу компонентов в ячейку "Нижний колонтитул". В настройках группы компонентов в поле Цвет введите значение #333333.


    Описание GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png ниже
    Описание иллюстрации GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png

  2. Перетащите компонент "Изображение" в группу компонентов и задайте ее настройки на вкладке Общие.
    Свойство Значение
    Выбрать Powered_by_OCE.png из папки Minimal-Images
    Выравнивание Слева
    Ширина Отмените выбор Задать ширину
    Первые 0.9vw
    Внизу 0.9vw
    Слева 6vw
    Справа 0
  3. Из левой боковой панели перетащите компонент "Социальная панель" в группу компонентов справа от компонента "Изображение".


    Описание GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.png ниже
    Описание иллюстрации GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.png

    Задайте настройки компонента "Социальная панель" на вкладке Общие.

    Свойство Значение
    Первые 1.8vw
    Внизу 1.8vw
    Слева 0.3vw
    Справа 6vw

    На вкладке Общие нажмите Значки, а затем нажмите имя значка, чтобы завершить настройку.

    Свойство Значение
    URL
    Назначение Открыть в новом окне
  4. Теперь нижний колонтитул готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на значок меню группы компонентов Значок меню группы компонентов, а затем нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Footer", а затем нажмите кнопку Сохранить. Данная группа компонентов должна выглядеть следующим образом:


    Описание GUID-11801720-9060-4A9D-9D7E-52A4C7295FB7-default.png ниже
    Описание иллюстрации GUID-11801720-9060-4A9D-9D7E-52A4C7295FB7-default.png

  5. Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения.

Выполните предварительный просмотр первой страницы своего веб-сайта, нажав Значок 'Предварительный просмотр' в правом верхнем углу окна Site Builder. Сайт до сих пор не опубликован и его не могут просматривать другие пользователи.

Создание домашней страницы завершено. Давайте создадим страницу CONTACT US (Контакты). Вот как страница контактов будет выглядеть после завершения:


Описание GUID-DF490F84-D4EC-4124-B597-E30C5EB5609F-default.png ниже
Описание иллюстрации GUID-DF490F84-D4EC-4124-B597-E30C5EB5609F-default.png
Давайте добавим компоненты в различные ячейки:
  1. На левой боковой панели нажмите Значок "Страницы", а затем нажмите Добавить страницу.
  2. В поле Имя страницы введите "CONTACT US" (Контакты) и нажмите Закрыть. К вашему веб-сайту добавлена новая страница.
  3. На левой боковой панели нажмите Значок "Компоненты", затем выберите Пользовательские.
  4. Перетащите компонент Minimal-Header (созданный и сохранный ранее) в ячейку "Заголовок".


    Описание GUID-EEE0AFB4-A9A5-4362-9100-80BB1494E464-default.png ниже
    Описание иллюстрации GUID-EEE0AFB4-A9A5-4362-9100-80BB1494E464-default.png


    Описание GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.png ниже
    Описание иллюстрации GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.png

    Обратите внимание, что компонент Minimal-NavMenu автоматически выбрал только что созданную, новую страницу CONTACT US (Контакты).


    Описание GUID-A9F9AD69-F6E2-4715-8885-26FDF5DFDF1D-default.png ниже
    Описание иллюстрации GUID-A9F9AD69-F6E2-4715-8885-26FDF5DFDF1D-default.png
  5. Из левой боковой панели перетащите компонент Minimal-Banner в ячейку "Тело".


    Описание GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png ниже
    Описание иллюстрации GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png

  6. Давайте изменим баннер, чтобы он отличался от баннера домашней страницы и соответствовал странице CONTACT US (Контакты). В группе компонентов измените настройки макета раздела "Два столбца".

    На вкладке Фон в поле Изображение нажмите Выбрать изображение, а затем выберите Banner2.jpg в папке Minimal-Images, созданной ранее в разделе Документы.


    Описание GUID-B89812E5-369F-4E2C-8EFD-40DA5B9DB487-default.png ниже
    Описание иллюстрации GUID-B89812E5-369F-4E2C-8EFD-40DA5B9DB487-default.png
  7. В макете раздела "Два столбца" измените текст в компонентах "Заголовок" и "Абзац".
    • В компоненте "Заголовок" введите "Хотите узнать больше?".
    • В компоненте "Абзац" введите "Find more learning material on the Headless CMS page." (Найдите дополнительные учебные материалы на странице автономной CMS.).
  8. На левой боковой панели нажмите Значок "Назад", затем выберите Заданные предварительно.
  9. На изображении страницы CONTACT US (Контакты) с состав баннера входит кнопка OCE FOR DEVELOPERS (OCE для разработчиков), поэтому давайте добавим эту кнопку на баннер. В группе компонентов Minimal-Banner перетащите компонент "Кнопка" во второй столбец макета раздела "Два столбца" (под недавно добавленным компонентом "Абзац"). Завершите задание настроек компонента "Кнопка" на вкладке Общие.
    Свойство Значение
    Подпись OCE FOR DEVELOPERS
    Первые 0.3vw
    Внизу 3vw
    Слева 6vw
    Справа 0.3vw

    На вкладке Стиль выберите Настройка и завершите настройку.

    Свойство Значение
    Цвет фона #c0d600
    Шрифт
    • Введите 24 в качестве размера.
    • Введите цвет #58595b.
    Рамка Нет
    Цвет при наведении курсора
    • Задайте Фон = #e1fa00.
    • Задайте Шрифт = #58595b.
    • Задайте Граница = #2222dd.
    Углы 0

    Завершите настройку на вкладке Ссылка.

    Свойство Значение
    Выберите тип ссылки Веб-страница
    URL http://www.oracle.com/pls/topic/lookup?ctx=cloud&id=content-cloud-headless
    Назначение Открыть в новом окне

    Описание GUID-2D527893-A2D4-4F11-8375-792FA3ABE725-default.png ниже
    Описание иллюстрации GUID-2D527893-A2D4-4F11-8375-792FA3ABE725-default.png

    Описание GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png ниже
    Описание иллюстрации GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png
  10. На левой боковой панели нажмите Значок "Назад", затем выберите Пользовательские.
  11. Перетащите компонент Minimal-Body ниже компонента Minimal-Banner в ячейку "Тело".
  12. В компоненте Minimal-Body измените текст в компонентах "Заголовок" и "Абзац".
    1. В компоненте "Заголовок" введите "Контакты:".
    2. В компоненте "Абзац" введите подробные сведения, такие как адрес электронной почты и другие ссылки, связанные со службой поддержки:

      "Посетите Oracle Cloud Connect Forum, чтобы разместить свои запросы."

      "Примеры Oracle Content Management доступны по адресу: https://www.oracle.com/middleware/technologies/content-experience-downloads.html"

  13. Из левой боковой панели перетащите еще один компонент Minimal-Body в ячейку "Тело", расположенную ниже компонента Minimal-Body, добавленного ранее.
  14. В настройках группы компонентов на вкладке Фон в поле Цвет введите значение #696969.
  15. В компоненте Minimal-Body измените компоненты "Заголовок" и "Абзац".
    1. В компоненте "Заголовок" введите "Местонахождения". В текстовом редакторе выделите текст и задайте цвет шрифта Белый.
    2. В компоненте "Абзац" введите указанный ниже текст.

      "Regional Office1:

      Building Number 1,

      City1, Province1, Country1

      Regional Office2:

      Building Number 2,

      City2, Province2, Country2"

    В текстовом редакторе выделите текст и задайте цвет шрифта Белый.
  16. Теперь давайте добавим нижний колонтитул на страницу CONTACT US (Контакты). Перетащите компонент Minimal-Footer в ячейку "Нижний колонтитул".
  17. Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения.

Выполните предварительный просмотр веб-сайта, нажав Значок 'Предварительный просмотр' в правом верхнем углу окна Site Builder, чтобы убедиться, что все выглядит хорошо. Убедитесь в том, что переход по изображению логотипа на странице CONTACT US (Контакты) возвращает на домашнюю страницу. Проверьте меню, чтобы убедиться, что навигация между страницами сайта работает правильно.

Ваш сайт готов к публикации.

Следующий шаг: публикация веб-сайта