Editar o Site
Abra o site recém-criado no Criador de Sites selecionando o site e escolhendo Abrir da barra de menus ou do menu do botão direito do rato. No Criador de Sites, defina o comutador 
para o modo Editar. Introduza o nome da atualização e clique em OK.
No modo de edição, verá que o site tem três slots, que consistem em áreas disponíveis na página (dependendo da disposição da página). Coloque o cursor sobre cada + na página para ver os slots Cabeçalho, Corpo e Rodapé.
Descrição da ilustração GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png
O slot Cabeçalho é geralmente utilizado para apresentar o logótipo da empresa, o menu de navegação, etc. O slot Corpo é utilizado para o conteúdo principal da página e o slot Rodapé para informações de direitos de autor, ligações de redes sociais e outras informações adicionais.
Primeiro, vamos criar a página principal. Este será o aspeto da página principal depois de concluída:
Descrição da ilustração GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png
- Na barra lateral esquerda, clique em
e, em seguida, em Incorporado para mostrar a lista de componentes de utilização imediata disponíveis com o Oracle Content Management. - Na barra lateral à esquerda, procure um componente pronto a utilizar chamado Grupo de Componentes. Arraste e largue-o para o slot Cabeçalho.
Descrição da ilustração GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png - Clique no ícone de menu do grupo de componentes
e, em seguida, clique em Definições. Nas definições, clique na lista pendente Cor (disponível na parte inferior da lista de definições) e, em seguida, clique em Mais. Introduza #333333 e clique em OK.
Descrição da ilustração GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png - Arraste e largue um componente Image para o grupo de componentes.
Descrição da ilustração GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png - Clique no ícone de menu do componente Image
e, em seguida, clique em Definições. Conclua as definições no separador Geral.
Propriedade Valor Selecionar Logo.png da pasta Minimal-Images Alinhamento À Esquerda Largura Anule a seleção de Definir Largura Margem Superior 1,2 vw Margem Inferior 30 px À Esquerda 6 vw À Direita 0
Descrição da ilustração GUID-8030FFAF-3DC0-4217-8733-01C3A53CEF8E-default.png
Descrição da ilustração GUID-F9B34895-7DCD-40AA-B4CF-3404820C20DD-default.png - Agora associe esta imagem do logótipo à página principal. Conclua as definições do componente Image no separador Ligação.
Propriedade Valor Selecionar Tipo de Ligação Página do Site Página HOME Destino Abrir na Mesma Janela - Na barra lateral esquerda, clique em
e em Customizar para mostrar a lista de componentes customizados. - Agora, vamos acrescentar o menu de navegação à página principal utilizando o componente customizado Minimal-NavMenu. Arraste e largue um componente Minimal-NavMenu para o grupo de componentes à direita do componente Image. Clique no título do componente Minimal-NavMenu para se certificar que o respetivo pai é o grupo de componentes que acrescentou antes. Esta é uma forma útil de ver onde cada componente reside dentro da estrutura da página web.
Descrição da ilustração GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.pngConclua as respetivas definições no separador Geral.
Propriedade Valor Alinhamento À Direita Margem Superior 1,2 vw Margem Inferior 0 À Esquerda 0 À Direita 6 vw - Agora, o cabeçalho foi finalizado. Grave agora este grupo de componentes como um grupo de componentes customizado para que possa utilizá-lo mais tarde noutras páginas de site. Clique no título do grupo de componentes, clique no respetivo ícone de menu e, em seguida, clique em Gravar. Na caixa de diálogo Gravar Grupo de Componentes, no campo Nome, introduza "Minimal-Header" e, em seguida, clique em Gravar.
Descrição da ilustração GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.pngA seguinte imagem mostra a estrutura pai do componente Image no slot Cabeçalho.Sugestão:
Se clicar no grupo de componentes e visualizar o título do componente Image ou Minimal-NavMenu em vez do título do grupo de componentes, clique novamente no título do componente Image ou Minimal-NavMenu e verá o título do grupo de componentes. Agora, pode clicar no título do grupo de componentes e efetuar o passo indicado acima.
Descrição da ilustração GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png - Clique em Gravar no canto superior direito do Criador de Sites para gravar as suas alterações. O slot Cabeçalho deverá agora ter o aspeto da seguinte imagem:
Descrição da ilustração GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png
- Na barra lateral à esquerda, clique em e, em seguida, clique em Incorporado.
- A partir da barra lateral à esquerda, arraste e largue um Grupo de Componentes para o slot Corpo. Criaremos um cabeçalho de apresentação através deste grupo de componentes e os componentes (que iremos acrescentar aos mesmos).
- Na barra lateral à esquerda, clique em
. - Arraste e largue uma disposição de secção Duas Colunas para o grupo de componentes.
Descrição da ilustração GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png - Conclua as definições da disposição da secção no separador Geral. Clique em Customizar Definições para especificar as seguintes definições.
Propriedade Valor Largura da Primeira Coluna (%) 43 Largura da Segunda Coluna (%) 57 Ponto de Quebra Responsivo (píxeis) 1,023 Comportamento Responsivo Ocultar a primeira coluna Conclua as definições no separador Fundo.
Propriedade Valor Imagem Banner1.jpg da pasta Minimal-Images Posição Meio do Centro Redimensionar Alongar - Na barra lateral esquerda, clique no para ver a lista de componentes incorporados.
- A partir da lista de componentes incorporados, arraste a largue um componente Title para a segunda coluna da disposição de Duas Colunas.
Descrição da ilustração GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png
Descrição da ilustração GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png - Clique no componente Title e introduza "WELCOME TO THE REVOLUTION". Selecione o texto e defina a cor do tipo de letra para Branco no editor de texto. Conclua as definições do componente Title no separador Geral.
Propriedade Valor Margem Superior 6 vw Margem Inferior 1,8 vw À Esquerda 6 vw À Direita 6 vw - A partir da lista de componentes incorporados na barra lateral à esquerda, arraste a largue um componente Paragraph abaixo do componente Title, dentro da segunda coluna da disposição de Duas Colunas. Conclua as respetivas definições no separador Geral.
Propriedade Valor Margem Superior 1,8 vw Margem Inferior 6 vw À Esquerda 6 vw À Direita 6 vw - Clique no componente Paragraph e introduza o seguinte texto:
"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."
Selecione o texto e defina o respetivo tamanho para 24 no editor de texto. Além disso, defina a cor do tipo de letra para Branco no editor de texto.
Descrição da ilustração GUID-399EE9A6-F882-40F9-8028-BB930A5FDC49-default.png - Agora, o cabeçalho de apresentação foi finalizado. Grave agora este grupo de componentes como um grupo de componentes customizado para que possa utilizá-lo mais tarde noutras páginas de site. Clique no ícone de menu do grupo de componentes e, em seguida, clique em Gravar. Na caixa de diálogo Gravar Grupo de Componentes, no campo Nome, introduza "Minimal-Banner" e, em seguida, clique em Gravar. Verá que o nome (Minimal-Banner) é agora apresentado ao grupo de componentes.
Descrição da ilustração GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png - A partir da barra lateral à esquerda, arraste e largue outro Grupo de Componentes para o slot Corpo, abaixo do grupo de componentes Minimal-Banner que já acrescentou.
Descrição da ilustração GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png - Arraste e largue um componente Title para o grupo de componentes.
- Clique no componente Title e introduza "Welcome to OCE Minimal".
- Conclua as definições do componente Title no separador Geral.
Propriedade Valor Margem Superior 3 vw Margem Inferior 1,8 vw À Esquerda 6 vw À Direita 6 vw
Descrição da ilustração GUID-515D7B63-7AB4-4FF6-94AD-0C30A331A7BC-default.png - A partir da barra lateral à esquerda, arraste e largue um Componente Paragraph abaixo do componente Title, para o grupo de componentes. Clique no componente Paragraph e introduza o seguinte texto:
"O Oracle Content Management é um hub de conteúdos baseado na cloud que impulsiona a gestão de conteúdos omnicanal e acelera a oferta de experiências. Oferece capacidades de colaboração e gestão de fluxos de trabalho robustas para simplificar a criação e disponibilização de conteúdos."
"O Oracle Content Management oferece ferramentas simples e de fácil utilização para criar websites. Pode criar rapidamente um website tirando partido das robustas funcionalidades que o Oracle Content Management fornece."
- Conclua as definições do componente Paragraph no separador Geral.
Propriedade Valor Margem Superior 20 px Margem Inferior 50 px À Esquerda 6 vw À Direita 6 vw
Descrição da ilustração GUID-D8B86A72-DC68-4FD3-B664-2603244316FD-default.png - E assim concluímos o slot do corpo. Grave agora o grupo de componentes como um grupo de componentes customizado para que possa utilizá-lo mais tarde noutras páginas de site. Clique no ícone de menu do grupo de componentes e, em seguida, clique em Gravar. Na caixa de diálogo Gravar Grupo de Componentes, no campo Nome, introduza "Minimal-Body" e, em seguida, clique em Gravar.
- Clique em Gravar no canto superior direito do Criador de Sites para gravar as suas alterações. O slot Corpo deverá agora ter o aspeto da seguinte imagem:
Descrição da ilustração GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png
- A partir da barra lateral à esquerda, arraste e largue um Grupo de Componentes para o slot Rodapé. Nas definições do grupo de componentes, defina o campo Cor para #333333.
Descrição da ilustração GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png - Arraste e largue um componente Image para o grupo de componentes e conclua as respetivas definições no separador Geral.
Propriedade Valor Selecionar Powered_by_OCE.png da pasta Minimal-Images Alinhamento À Esquerda Largura Anule a seleção de Definir Largura Margem Superior 0,9 vw Margem Inferior 0,9 vw À Esquerda 6 vw À Direita 0 - A partir da barra lateral à esquerda, arraste e largue um componente Social Bar para o grupo de componentes à direita do componente Image.
Descrição da ilustração GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.pngConclua as definições para o componente Social Bar no separador Geral.
Propriedade Valor Margem Superior 1,8 vw Margem Inferior 1,8 vw À Esquerda 0,3 vw À Direita 6 vw No separador Geral, clique em Icons e, em seguida, clique no nome de um ícone para concluir as definições.
Propriedade Valor URL - https://www.facebook.com/Oracle/ (para Facebook)
- https://www.linkedin.com/company/oracle/ (para LinkedIn)
- https://twitter.com/Oracle (para Twitter)
- https://www.youtube.com/oracle/ (para YouTube)
Destino Abrir em Nova Janela - Agora, o rodapé foi finalizado. Grave agora este grupo de componentes como um grupo de componentes customizado para que possa utilizá-lo mais tarde noutras páginas de site. Clique no ícone de menu do grupo de componentes e, em seguida, clique em Gravar. Na caixa de diálogo Gravar Grupo de Componentes, no campo Nome, introduza "Minimal-Footer" e, em seguida, clique em Gravar. O grupo de componentes deverá ter o seguinte aspeto:
Descrição da ilustração GUID-11801720-9060-4A9D-9D7E-52A4C7295FB7-default.png - Clique em Gravar no canto superior direito do Criador de Sites para gravar as suas alterações.
Pré-visualize a primeira página do seu site clicando em 
no canto superior direito do Criador de Sites. O site ainda não foi publicado e não pode ser visualizado por outras pessoas agora.
Concluiu a criação da página HOME Passemos à criação da página CONTACT US. Este será o aspeto da página de contacto depois de concluída:
Descrição da ilustração GUID-DF490F84-D4EC-4124-B597-E30C5EB5609F-default.png
- Na barra lateral à esquerda, clique em
e, em seguida, clique em Acrescentar Página. - Introduza "CONTACT US" no campo Nome da Página e clique em Fechar. Acrescentou uma nova página ao seu site.
- Na barra lateral à esquerda, clique no e, em seguida, clique em Customizar.
- Arraste e largue um componente Minimal-Header (que criou e gravou anteriormente) no slot Cabeçalho.
Descrição da ilustração GUID-EEE0AFB4-A9A5-4362-9100-80BB1494E464-default.png
Descrição da ilustração GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.pngTenha em consideração que o componente Minimal-NavMenu recolheu automaticamente a nova página CONTACT US que acabou de criar.
Descrição da ilustração GUID-A9F9AD69-F6E2-4715-8885-26FDF5DFDF1D-default.png - A partir da barra lateral à esquerda, arraste e largue um componente Minimal-Banner para o slot Corpo.
Descrição da ilustração GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png - Modifique o cabeçalho de apresentação de forma a parecer diferente da faixa da página HOME e a adequar-se à página CONTACT US. Dentro do grupo de componentes, modifique as definições da disposição de secção Duas Colunas:
No separador Fundo, no campo Imagem, clique em Selecionar Imagem e selecione Banner2.jpg a partir da pasta Minimal-Images que criou antes em Documentos.
Descrição da ilustração GUID-B89812E5-369F-4E2C-8EFD-40DA5B9DB487-default.png - Na disposição de secção Duas Colunas, modifique o texto nos componentes Title e Paragraph.
- Introduza "Pretende saber mais?" no componente Title.
- Introduza "Encontre mais materiais de aprendizagem na página CMS sem Interface do Utilizador." no componente Paragraph.
- Na barra lateral à esquerda, clique em e, em seguida, clique em Incorporado.
- A imagem da página CONTACT US tem um botão intitulado OCE FOR DEVELOPERS como parte do cabeçalho de apresentação, como tal, vamos acrescentar este botão à faixa. No grupo de componentes Minimal-Banner, arraste e largue um componente Button na segunda coluna da disposição de secção Duas Colunas (abaixo do componente Paragraph recém-acrescentado). Conclua as definições do componente Button no separador Geral.
Propriedade Valor Etiqueta OCE PARA PROGRAMADORES Margem Superior 0,3 vw Margem Inferior 3 vw À Esquerda 6 vw À Direita 0,3 vw No separador Estilo, selecione Customizar e conclua as definições.
Propriedade Valor Cor de Segundo Plano #c0d600 Tipo de Letra - Introduza 24 como o tamanho.
- Introduza a cor #58595b.
Contorno Nenhum Cor de Sobreposição - Defina FUNDO para #e1fa00.
- Defina TIPO DE LETRApara #58595b.
- Defina CONTORNOpara #2222dd.
Espaços 0 Conclua as definições no separador Ligação.
Propriedade Valor Selecionar Tipo de Ligação Página na Web URL http://www.oracle.com/pls/topic/lookup?ctx=cloud&id=content-cloud-headless Destino Abrir em Nova Janela
Descrição da ilustração GUID-2D527893-A2D4-4F11-8375-792FA3ABE725-default.png
Descrição da ilustração GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png - Na barra lateral à esquerda, clique em e, em seguida, clique em Customizar.
- Arraste e largue um componente Minimal-Body abaixo do componente Minimal-Banner para o slot Corpo.
- Com o componente Minimal-Body, modifique o texto nos componentes Title e Paragraph.
- Introduza "Ligue-se connosco:" no componente Title.
- Introduza detalhes como um endereço de correio eletrónico e outras ligações relacionados com suporte no componente Paragraph:
"Visite o Fórum Oracle Cloud Customer Connect para publicar as suas questões."
"As amostras do Oracle Content Management estão disponíveis em: https://www.oracle.com/middleware/technologies/content-experience-downloads.html"
- A partir da barra lateral à esquerda, arraste e largue outro componente Minimal-Body para o slot Corpo, abaixo do componente Minimal-Body que já acrescentou.
- Nas definições do grupo de componentes, no separador Fundo, defina o campo Cor para #696969.
- Com o componente Minimal-Body, modifique os componentes Title e Paragraph.
- Introduza "Locations" no componente Title. Selecione o texto e defina a cor do tipo de letra para Branco no editor de texto.
- Introduza o seguinte texto no componente Paragraph.
"Regional Office1:
Building Number 1,
City1, Province1, Country1
Regional Office2:
Building Number 2,
City2, Province2, Country2"
- Agora, acrescente o rodapé na página CONTACT US. Arraste e largue um componente Minimal-Footer para o slot Rodapé.
- Clique em Gravar no canto superior direito do Criador de Sites para gravar as suas alterações.
Pré-visualize o site, clicando no no canto superior direito do Criador de Sites para se certificar de que está tudo como pretende. Certifique-se de que a imagem do logótipo na página CONTACT US o redireciona de volta à página principal ao clicar na imagem. Teste o menu para garantir que a navegação entre as páginas do site funciona corretamente.
O seu site está pronto para ser publicado.