Откройте недавно созданный веб-сайт в Site Builder, выбрав его и нажав Открыть в строке меню или в контекстном меню. В Site Builder переведите указатель
в положение Редактировать. Введите имя обновления и нажмите ОК.
В режиме редактирования вы увидите, что на сайте есть три ячейки, которые являются областями, доступными на странице (в зависимости от макета страницы). Наведите указатель на каждый знак "+" на странице, чтобы увидеть такие ячейки, как "Заголовок", "Тело" и "Нижний колонтитул".
Описание иллюстрации GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png
Ячейка "Заголовок" обычно используется для отображения логотипа компании, меню навигации и т. д. Ячейка "Тело" предназначена для основного контента страницы, а ячейка "Нижний колонтитул" содержит информацию об авторских правах, ссылки на социальные сети и любую дополнительную информацию.
Во-первых, давайте создадим домашнюю страницу. Вот как домашняя страница будет выглядеть после завершения:
Описание иллюстрации GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png
Давайте заполним ячейку "Заголовок" готовыми компонентами:
- На левой боковой панели нажмите
, а затем Заданные предварительно, чтобы отобразить список готовых компонентов, доступных в Oracle Content Management.
- На левой боковой панели найдите готовый компонент "Группа компонентов". Перетащите его в ячейку "Заголовок".

Описание иллюстрации GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png
- Нажмите на значок меню группы компонентов
, а затем нажмите Настройки. В настройках нажмите на раскрывающийся список Цвет (доступен в нижней части списка настроек), а затем нажмите Дополнительно. Введите #333333 и нажмите OK.

Описание иллюстрации GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png
- Перетащите компонент "Изображение" в группу компонентов.

Описание иллюстрации GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png
- Нажмите на значок меню компонента "Изображение"
, а затем нажмите Настройка. Завершите настройку на вкладке Общие.

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

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

Описание иллюстрации GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.png
Завершите настройку на вкладке Общие.
- Теперь заголовок готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на заголовок группы компонентов, а затем нажмите на значок ее меню
и нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Header", а затем нажмите кнопку Сохранить.

Описание иллюстрации GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.png
Подсказка.:
Если нажать имя группы компонентов, отображается заголовок компонента "Изображение" или Minimal-NavMenu, а не заголовок группы компонентов. Снова нажмите заголовок компонента "Изображение" или Minimal-NavMenu и вы увидите заголовок группы компонентов. Теперь можно нажать заголовок группы компонентов и выполнить указанный выше шаг.
На изображении ниже показана родительская структура компонента "Изображение" в ячейке "Заголовок".

Описание иллюстрации GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png
- Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения. Теперь ячейка "Заголовок" должна выглядеть следующим образом:

Описание иллюстрации GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png
Давайте перейдем к ячейке "Тело":
- На левой боковой панели нажмите
, затем выберите Заданные предварительно.
- Из левой боковой панели перетащите группу компонентов в ячейку "Тело". С помощью этой группы компонентов и компонентов (которые мы добавим в нее) создадим баннер.
- На левой боковой панели нажмите
.
- Перетащите макет раздела "Два столбца" в группу компонентов.

Описание иллюстрации GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png
- Задайте настройки макета раздела на вкладке Общие. Нажмите Пользовательские настройки, чтобы указать приведенные ниже настройки.
Завершите настройку на вкладке Фон.
- На левой боковой панели нажмите
, чтобы отобразить список предварительно заданных компонентов.
- Из списка предварительно заданных компонентов перетащите компонент "Заголовок" во второй столбец макета "Два столбца".

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

Описание иллюстрации GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png
- Нажмите компонент "Заголовок" и введите "WELCOME TO THE REVOLUTION". В текстовом редакторе выделите текст и задайте цвет шрифта Белый. Завершите задание настроек компонента "Заголовок" на вкладке Общие.
- Из списка предварительно заданных компонентов на левой боковой панели перетащите компонент "Абзац" под компонент "Заголовок" во втором столбце макета "Два столбца". Завершите настройку на вкладке Общие.
- Нажмите в компоненте "Абзац", чтобы ввести следующий текст:
"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
- Теперь баннер готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на значок меню группы компонентов
, а затем нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "Minimal-Banner", а затем нажмите кнопку Сохранить. Вы заметите, что данное имя (Minimal-Banner) теперь отображается для группы компонентов.

Описание иллюстрации GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png
- Из левой боковой панели перетащите еще одну группу компонентов в ячейку "Тело" под уже добавленной группой компонентов Minimal-Banner.

Описание иллюстрации GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png
- Перетащите компонент "Заголовок" в данную группу компонентов.
- Нажмите компонент "Заголовок" и введите "Welcome to OCE Minimal".
- Завершите задание настроек компонента "Заголовок" на вкладке Общие.

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

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

Описание иллюстрации GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png
Давайте завершим создание ячейки "Нижний колонтитул":
- Из левой боковой панели перетащите группу компонентов в ячейку "Нижний колонтитул". В настройках группы компонентов в поле Цвет введите значение #333333.

Описание иллюстрации GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png
- Перетащите компонент "Изображение" в группу компонентов и задайте ее настройки на вкладке Общие.
- Из левой боковой панели перетащите компонент "Социальная панель" в группу компонентов справа от компонента "Изображение".

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

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

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

Описание иллюстрации GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.png
Обратите внимание, что компонент Minimal-NavMenu автоматически выбрал только что созданную, новую страницу CONTACT US (Контакты).

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

Описание иллюстрации GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png
- Давайте изменим баннер, чтобы он отличался от баннера домашней страницы и соответствовал странице CONTACT US (Контакты). В группе компонентов измените настройки макета раздела "Два столбца".
На вкладке Фон в поле Изображение нажмите Выбрать изображение, а затем выберите Banner2.jpg в папке Minimal-Images, созданной ранее в разделе Документы.

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

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

Описание иллюстрации GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png
- На левой боковой панели нажмите
, затем выберите Пользовательские.
- Перетащите компонент Minimal-Body ниже компонента Minimal-Banner в ячейку "Тело".
- В компоненте Minimal-Body измените текст в компонентах "Заголовок" и "Абзац".
- В компоненте "Заголовок" введите "Контакты:".
- В компоненте "Абзац" введите подробные сведения, такие как адрес электронной почты и другие ссылки, связанные со службой поддержки:
"Посетите Oracle Cloud Connect Forum, чтобы разместить свои запросы."
"Примеры Oracle Content Management доступны по адресу: https://www.oracle.com/middleware/technologies/content-experience-downloads.html"
- Из левой боковой панели перетащите еще один компонент Minimal-Body в ячейку "Тело", расположенную ниже компонента Minimal-Body, добавленного ранее.
- В настройках группы компонентов на вкладке Фон в поле Цвет введите значение #696969.
- В компоненте Minimal-Body измените компоненты "Заголовок" и "Абзац".
- В компоненте "Заголовок" введите "Местонахождения". В текстовом редакторе выделите текст и задайте цвет шрифта Белый.
- В компоненте "Абзац" введите указанный ниже текст.
"Regional Office1:
Building Number 1,
City1, Province1, Country1
Regional Office2:
Building Number 2,
City2, Province2, Country2"
В текстовом редакторе выделите текст и задайте цвет шрифта Белый.
- Теперь давайте добавим нижний колонтитул на страницу CONTACT US (Контакты). Перетащите компонент Minimal-Footer в ячейку "Нижний колонтитул".
- Нажмите Сохранить в правом верхнем углу окна Site Builder, чтобы сохранить свои изменения.
Выполните предварительный просмотр веб-сайта, нажав
в правом верхнем углу окна Site Builder, чтобы убедиться, что все выглядит хорошо. Убедитесь в том, что переход по изображению логотипа на странице CONTACT US (Контакты) возвращает на домашнюю страницу. Проверьте меню, чтобы убедиться, что навигация между страницами сайта работает правильно.
Ваш сайт готов к публикации.
Следующий шаг: публикация веб-сайта