Редактирование веб-сайта
Откройте недавно созданный веб-сайт в 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 - Нажмите на значок меню компонента "Изображение"
, а затем нажмите Настройка. Завершите настройку на вкладке Общие.
Свойство Значение Выбрать Logo.png из папки Minimal-Images Выравнивание Слева Ширина Отмените выбор Задать ширину Первые 1.2vw Внизу 30px Слева 6vw Справа 0
Описание иллюстрации 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Завершите настройку на вкладке Общие.
Свойство Значение Выравнивание Справа Первые 1.2vw Внизу 0 Слева 0 Справа 6vw - Теперь заголовок готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на заголовок группы компонентов, а затем нажмите на значок ее меню и нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "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 - Задайте настройки макета раздела на вкладке Общие. Нажмите Пользовательские настройки, чтобы указать приведенные ниже настройки.
Свойство Значение Ширина первого столбца (%) 43 Ширина второго столбца (%) 57 Точка останова при ответе (пикс.) 1,023 Поведение при ответе Скрыть первый столбец Завершите настройку на вкладке Фон.
Свойство Значение Изображение Banner1.jpg из папки Minimal-Images Позиция Посередине по центру Масштаб Растянуть - На левой боковой панели нажмите , чтобы отобразить список предварительно заданных компонентов.
- Из списка предварительно заданных компонентов перетащите компонент "Заголовок" во второй столбец макета "Два столбца".
Описание иллюстрации GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png
Описание иллюстрации GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png - Нажмите компонент "Заголовок" и введите "WELCOME TO THE REVOLUTION". В текстовом редакторе выделите текст и задайте цвет шрифта Белый. Завершите задание настроек компонента "Заголовок" на вкладке Общие.
Свойство Значение Первые 6vw Внизу 1.8vw Слева 6vw Справа 6vw - Из списка предварительно заданных компонентов на левой боковой панели перетащите компонент "Абзац" под компонент "Заголовок" во втором столбце макета "Два столбца". Завершите настройку на вкладке Общие.
Свойство Значение Первые 1.8vw Внизу 6vw Слева 6vw Справа 6vw - Нажмите в компоненте "Абзац", чтобы ввести следующий текст:
"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".
- Завершите задание настроек компонента "Заголовок" на вкладке Общие.
Свойство Значение Первые 3vw Внизу 1.8vw Слева 6vw Справа 6vw
Описание иллюстрации 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".
- Завершите задание настроек компонента "Абзац" на вкладке Общие.
Свойство Значение Первые 20px Внизу 50px Слева 6vw Справа 6vw
Описание иллюстрации 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 - Перетащите компонент "Изображение" в группу компонентов и задайте ее настройки на вкладке Общие.
Свойство Значение Выбрать Powered_by_OCE.png из папки Minimal-Images Выравнивание Слева Ширина Отмените выбор Задать ширину Первые 0.9vw Внизу 0.9vw Слева 6vw Справа 0 - Из левой боковой панели перетащите компонент "Социальная панель" в группу компонентов справа от компонента "Изображение".
Описание иллюстрации GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.pngЗадайте настройки компонента "Социальная панель" на вкладке Общие.
Свойство Значение Первые 1.8vw Внизу 1.8vw Слева 0.3vw Справа 6vw На вкладке Общие нажмите Значки, а затем нажмите имя значка, чтобы завершить настройку.
Свойство Значение URL - https://www.facebook.com/Oracle/ (для Facebook)
- https://www.linkedin.com/company/oracle/ (для LinkedIn)
- https://twitter.com/Oracle (для Twitter)
- https://www.youtube.com/oracle/ (для YouTube)
Назначение Открыть в новом окне - Теперь нижний колонтитул готов. Давайте сохраним эту группу компонентов как пользовательскую группу компонентов, чтобы использовать ее позже на других страницах веб-сайта. Нажмите на значок меню группы компонентов , а затем нажмите Сохранить. В диалоговом окне "Сохранение группы компонентов" в поле Имя введите "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 перетащите компонент "Кнопка" во второй столбец макета раздела "Два столбца" (под недавно добавленным компонентом "Абзац"). Завершите задание настроек компонента "Кнопка" на вкладке Общие.
Свойство Значение Подпись 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-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 (Контакты) возвращает на домашнюю страницу. Проверьте меню, чтобы убедиться, что навигация между страницами сайта работает правильно.
Ваш сайт готов к публикации.