Rediger Web-området
Åpne det nylig opprettede Web-området i områdebyggeren ved å merke det og velge Åpne på menylinjen eller høyreklikkmenyen. Sett modusen 
til Rediger i områdebyggeren. Angi et navn for oppdateringen, og klikk på OK.
I redigeringsmodus kan du se at Web-området har tre spor, som er tilgjengelige områder på siden (avhengig av sideoppsettet). Hvis du beveger musen over hvert plusstegn (+) på siden, kan du se sporene for topptekst, tekst og bunntekst.
Beskrivelse av illustrasjonen GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png
Vi bruker generelt topptekstsporet til å vise selskapets logo, navigeringsmenyen og så videre. Vi bruker tekstsporet til hovedinnholdet på siden og bunntekstsporet til opplysninger om opphavsrett, koblinger til sosiale medier og eventuelle andre opplysninger.
Vi begynner med å bygge hjemmesiden. Slik kommer hjemmesiden til å se ut når den er ferdig:
Beskrivelse av illustrasjonen GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png
- Klikk på
på sidestolpen til venstre, og klikk deretter på Seedet for å vise listen over tilgjengelige standardkomponenter i Oracle Content Management. - Finn standardkomponenten Komponentgruppe i sidelinjen til venstre. Dra og slipp den i topptekstsporet.
Beskrivelse av illustrasjonen GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png - Klikk på menyikonet for komponentgruppen
, og klikk deretter på Innstillinger. I innstillingene klikker du på rullegardinlisten Farge (tilgjengelig nederst i innstillingslisten) og deretter på Mer. Angi #333333, og klikk på OK.
Beskrivelse av illustrasjonen GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png - Dra og slipp en bildekomponent i komponentgruppen.
Beskrivelse av illustrasjonen GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png - Klikk på menyikonet for bildekomponenten
, og klikk deretter på Innstillinger. Fyll ut innstillingene i fanen Generelt.
Egenskap Verdi Velg Logo.png fra mappen Minimal-Images Justering Venstre Bredde Opphev valget av Angi bredde Øverst 1.2vw Nederst 30px Venstre 6vw Høyre 0
Beskrivelse av illustrasjonen GUID-8030FFAF-3DC0-4217-8733-01C3A53CEF8E-default.png
Beskrivelse av illustrasjonen GUID-F9B34895-7DCD-40AA-B4CF-3404820C20DD-default.png - Vi kan nå koble dette logobildet til hjemmesiden. Fyll ut innstillingene for bildekomponenten i fanen Kobling.
Egenskap Verdi Velg koblingstype Områdeside Side HOME Mål Åpne i samme vindu - Klikk på
i sidelinjen til venstre, og klikk på Egendefinert for å vise listen over egendefinerte komponenter. - Vi kan nå legge til en navigeringsmeny på hjemmesiden ved hjelp av den egendefinerte komponenten Minimal-NavMenu. Dra og slipp en Minimal-NavMenu-komponent i komponentgruppen til høyre for bildekomponenten. Klikk på tittelen for komponenten Minimal-NavMenu for å kontrollere at komponentgruppen du har lagt til tidligere, er overordnet. Denne metoden er nyttig for å finne ut hvor en hvilken som helst komponent er plassert i Web-sidestrukturen.
Beskrivelse av illustrasjonen GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.pngFyll ut innstillingene i fanen Generelt.
Egenskap Verdi Justering Høyre Øverst 1.2vw Nederst 0 Venstre 0 Høyre 6vw - Nå er toppteksten klar. Lagre denne komponentgruppen som en egendefinert komponentgruppe, slik at vi kan bruke den senere på de andre sidene i Web-området. Klikk på tittelen for komponentgruppen, klikk på menyikonet , og klikk deretter på Lagre. Skriv inn Minimal-Header i feltet Navn i dialogboksen Lagre komponentgruppe, og klikk deretter på Lagre.
Beskrivelse av illustrasjonen GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.pngDen følgende illustrasjonen viser den overordnede strukturen for bildekomponenten i topptekstsporet:Tips:
Hvis du klikker på komponentgruppen og ser tittelen for bilde- eller Minimal-NavMenu-komponenten i stedet for komponentgruppetittelen, kan du klikke på tittelen for bilde- eller Minimal-NavMenu-komponenten på nytt. Deretter vises tittelen for komponentgruppen. Du kan nå klikke på tittelen for komponentgruppen og utføre trinnene ovenfor.
Beskrivelse av illustrasjonen GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png - Klikk på Lagre øverst til høyre i områdebyggeren for å lagre endringene. Topptekstsporet skal nå se ut som vist i den følgende illustrasjonen:
Beskrivelse av illustrasjonen GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png
- Klikk på i sidelinjen til venstre, og klikk deretter på Seedet.
- Dra en komponentgruppe fra sidelinjen til venstre, og slipp den i tekstsporet. Vi skal opprette et banner ved hjelp av denne komponentgruppen og komponentene som vi skal legge til i den.
- Klikk på
i sidelinjen til venstre. - Dra og slipp et deloppsett for to kolonner i komponentgruppen.
Beskrivelse av illustrasjonen GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png - Fyll ut innstillingene for deloppsettet i fanen Generelt. Klikk på Egendefinerte innstillinger for å angi følgende innstillinger.
Egenskap Verdi Bredde på første kolonne (%) 43 Bredde på andre kolonne (%) 57 Responsivt bruddpunkt (piksler) 1 023 Responsiv virkemåte Skjul den første kolonnen Fyll ut innstillingene i fanen Bakgrunn:
Egenskap Verdi Bilde Banner1.jpg fra mappen Minimal-Images Posisjon Midtstilt i sentrum Skala Strekk - Klikk på i sidelinjen til venstre for å vise listen over seedede komponenter.
- Dra en tittelkomponent fra listen over seedede komponenter, og slipp den i den andre kolonnen i oppsettet for to kolonner.
Beskrivelse av illustrasjonen GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png
Beskrivelse av illustrasjonen GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png - Klikk på tittelkomponenten, og skriv inn "VELKOMMEN TIL REVOLUSJONEN". Merk teksten, og angi skriftfargen som Hvit i tekstredigeringsprogrammet. Fyll ut innstillingene for tittelkomponenten i fanen Generelt.
Egenskap Verdi Øverst 6vw Nederst 1.8vw Venstre 6vw Høyre 6vw - Dra en avsnittskomponent under tittelkomponenten fra listen over seedede komponenter i sidelinjen til venstre, og slipp den i den andre kolonnen i oppsettet for to kolonner. Fyll ut innstillingene i fanen Generelt.
Egenskap Verdi Øverst 1.8vw Nederst 6vw Venstre 6vw Høyre 6vw - Klikk i avsnittskomponenten, og skriv inn følgende tekst:
"Dette er et avsnitt. Klikk her hvis du vil legge til din egen tekst og redigere avsnittet. Avsnitt passer utmerket til å fortelle historier og la brukerne få vite mer om deg og organisasjonen din."
Merk teksten, og sett størrelsen til 24 i tekstredigeringsprogrammet. Angi også skriftfargen som Hvit i tekstredigeringsprogrammet.
Beskrivelse av illustrasjonen GUID-399EE9A6-F882-40F9-8028-BB930A5FDC49-default.png - Nå er banneret klart. Lagre denne komponentgruppen som en egendefinert komponentgruppe, slik at vi kan bruke den senere på de andre sidene i Web-området. Klikk på menyikonet for komponentgruppen , og klikk deretter på Lagre. Skriv inn Minimal-Banner i feltet Navn i dialogboksen Lagre komponentgruppe, og klikk deretter på Lagre. Du kan se at navnet (Minimal-Banner) nå vises for komponentgruppen.
Beskrivelse av illustrasjonen GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png - Dra en annen komponentgruppe fra sidelinjen til venstre, og slipp den i tekstsporet, under komponentgruppen Minimal-Banner som du allerede har lagt til.
Beskrivelse av illustrasjonen GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png - Dra og slipp en tittelkomponent i komponentgruppen.
- Klikk på tittelkomponenten, og skriv inn "Velkommen til OCE Minimal".
- Fyll ut innstillingene for tittelkomponenten i fanen Generelt.
Egenskap Verdi Øverst 3vw Nederst 1.8vw Venstre 6vw Høyre 6vw
Beskrivelse av illustrasjonen GUID-515D7B63-7AB4-4FF6-94AD-0C30A331A7BC-default.png - Dra en avsnittsgruppe under tittelkomponenten fra sidelinjen til venstre, og slipp den i komponentgruppen. Klikk i avsnittskomponenten, og skriv inn følgende tekst:
Oracle Content Management er et skybasert innholdsnav som brukes til å administrere innhold i flere kanaler og sette fart på brukeropplevelsen. Det tilbyr kraftige funksjoner for samarbeid og arbeidsflytbehandling for å effektivisere opprettelse og levering av innhold."
Oracle Content Management tilbyr enkle og brukervennlige verktøy for opprettelse av nettsteder. Du kan raskt opprette et nettsted ved hjelp av de omfattende funksjonene i Oracle Content Management.
- Fyll ut innstillingene for avsnittskomponenten i fanen Generelt.
Egenskap Verdi Øverst 20px Nederst 50px Venstre 6vw Høyre 6vw
Beskrivelse av illustrasjonen GUID-D8B86A72-DC68-4FD3-B664-2603244316FD-default.png - Vi er nå ferdig med tekstsporet. Lagre komponentgruppen som en egendefinert komponentgruppe, slik at vi kan bruke den senere på de andre sidene i Web-området. Klikk på menyikonet for komponentgruppen , og klikk deretter på Lagre. Skriv inn Minimal-Body i feltet Navn i dialogboksen Lagre komponentgruppe, og klikk deretter på Lagre.
- Klikk på Lagre øverst til høyre i områdebyggeren for å lagre endringene. Tekstsporet skal nå se ut som vist i den følgende illustrasjonen:
Beskrivelse av illustrasjonen GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png
- Dra en komponentgruppe fra sidelinjen til venstre, og slipp den i bunntekstsporet. Angi feltet Farge som #333333 i innstillingene for komponentgruppen.
Beskrivelse av illustrasjonen GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png - Dra en bildekomponent, slipp den i komponentgruppen, og fyll ut innstillingene i fanen Generelt.
Egenskap Verdi Velg Powered_by_OCE.png fra mappen Minimal-Images Justering Venstre Bredde Opphev valget av Angi bredde Øverst 0.9vw Nederst 0.9vw Venstre 6vw Høyre 0 - Dra en komponent for sosialt-felt fra sidelinjen til venstre, og slipp den i komponentgruppen til høyre for bildekomponenten.
Beskrivelse av illustrasjonen GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.pngFyll ut innstillingene for komponenten for sosialt-felt i fanen Generelt.
Egenskap Verdi Øverst 1.8vw Nederst 1.8vw Venstre 0.3vw Høyre 6vw Klikk på Ikoner i fanen Generelt, og klikk deretter på et ikonnavn for å fylle ut innstillingene.
Egenskap Verdi URL-adresse - https://www.facebook.com/Oracle/ (for Facebook)
- https://www.linkedin.com/company/oracle/ (for LinkedIn)
- https://twitter.com/Oracle (for Twitter)
- https://www.youtube.com/oracle/ (for YouTube)
Mål Åpne i nytt vindu - Nå er bunnteksten klar. Lagre denne komponentgruppen som en egendefinert komponentgruppe, slik at vi kan bruke den senere på de andre sidene i Web-området. Klikk på menyikonet for komponentgruppen , og klikk deretter på Lagre. Skriv inn Minimal-Footer i feltet Navn i dialogboksen Lagre komponentgruppe, og klikk deretter på Lagre. Slik skal komponentgruppen nå se ut:
Beskrivelse av illustrasjonen GUID-11801720-9060-4A9D-9D7E-52A4C7295FB7-default.png - Klikk på Lagre øverst til høyre i områdebyggeren for å lagre endringene.
Du kan forhåndsvise den første siden i Web-området ved å klikke på 
øverst til høyre i områdebyggeren. Web-området er hittil ikke publisert og er ikke synlig for andre nå.
Du er nå ferdig med å opprette siden HOME. Vi kan nå bygge siden CONTACT US. Slik kommer kontaktsiden til å se ut når den er ferdig:
Beskrivelse av illustrasjonen GUID-DF490F84-D4EC-4124-B597-E30C5EB5609F-default.png
- Klikk på
i sidelinjen til venstre, og klikk deretter på Legg til side. - Skriv inn "Ta kontakt" i feltet Sidenavn, og klikk på Lukk. Du har nå lagt til en ny side på Web-området.
- Klikk på i sidelinjen til venstre, og klikk deretter på Egendefinert.
- Dra og slipp en Minimal-Header-komponent (som du har opprettet og lagret tidligere) i topptekstsporet.
Beskrivelse av illustrasjonen GUID-EEE0AFB4-A9A5-4362-9100-80BB1494E464-default.png
Beskrivelse av illustrasjonen GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.pngLegg merke til at Minimal-NavMenu-komponenten automatisk har hentet den nye siden CONTACT US som du nettopp har opprettet.
Beskrivelse av illustrasjonen GUID-A9F9AD69-F6E2-4715-8885-26FDF5DFDF1D-default.png - Dra en Minimal-Banner-komponent fra sidelinjen til venstre, og slipp den i tekstsporet.
Beskrivelse av illustrasjonen GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png - Vi kan nå endre banneret, slik at det blir forskjellig fra banneret på siden HOME og velegnet for siden CONTACT US. Endre innstillingene for deloppsettet for to kolonner i komponentgruppen:
Klikk på Velg bilde i feltet Bilde i fanen Bakgrunn, og velg deretter Banner2.jpg fra mappen Minimal-Images som du har opprettet i Dokumenter.
Beskrivelse av illustrasjonen GUID-B89812E5-369F-4E2C-8EFD-40DA5B9DB487-default.png - Endre teksten i tittel- og avsnittskomponentene i deloppsettet for to kolonner.
- Skriv inn "Vil du vite mer?" i tittelkomponenten.
- Skriv inn "Du finner mer opplæringsmateriale på siden for hodeløst innholdsstyringssystem (CMS)." i avsnittskomponenten.
- Klikk på i sidelinjen til venstre, og klikk deretter på Seedet.
- Illustrasjonen for siden CONTACT US har en knapp kalt OCE for utviklere som en del av banneret, og vi kan dermed legge til denne knappen i banneret. I komponentgruppen Minimal-Banner drar du en knappekomponent til den andre kolonnen av utvalgsoppsettet To kolonner (under den nylig tilføyde komponenten Avsnitt), og slipper den der. Fyll ut innstillingene for knappekomponenten i fanen Generelt.
Egenskap Verdi Etikett OCE for utviklere Øverst 0.3vw Nederst 3vw Venstre 6vw Høyre 0.3vw I fanen Stil velger du Tilpass og fullfører innstillingene.
Egenskap Verdi Bakgrunnsfarge #c0d600 Skrift - Angi 24 som størrelse.
- Angi fargen #58595b.
Kantlinje Ingen Farge for musepeking - Angi BAKGRUNN som #e1fa00.
- Angi SKRIFT som #58595b.
- Angi KANTLINJE som #2222dd.
Hjørner 0 Fyll ut innstillingene i fanen Kobling.
Egenskap Verdi Velg koblingstype Web-side URL-adresse http://www.oracle.com/pls/topic/lookup?ctx=cloud&id=content-cloud-headless Mål Åpne i nytt vindu
Beskrivelse av illustrasjonen GUID-2D527893-A2D4-4F11-8375-792FA3ABE725-default.png
Beskrivelse av illustrasjonen GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png - Klikk på i sidelinjen til venstre, og klikk deretter på Egendefinert.
- Dra en Minimal-Body-komponent under Minimal-Banner-komponenten, og slipp den i tekstsporet.
- Endre teksten i tittel- og avsnittskomponentene i Minimal-Body-komponenten.
- Skriv inn "Ta kontakt med oss" i tittelkomponenten.
- Skriv inn detaljer, for eksempel en e-postadresse og andre supportrelaterte koblinger i avsnittskomponenten:
"Du kan gå til Forum for Oracle Cloud Connect og legge inn spørsmål."
Oracle Content Management-eksempler er tilgjengelige på: https://www.oracle.com/middleware/technologies/content-experience-downloads.html"
- Dra en annen Minimal-Body-komponent fra sidelinjen til venstre, og slipp den i tekstsporet, under Minimal-Body-komponenten du har lagt til tidligere.
- Angi feltet Farge som #696969 i fanen Bakgrunn i innstillingene for komponentgruppen.
- Endre tittel- og avsnittskomponentene i Minimal-Body-komponenten.
- Skriv inn "Steder" i tittelkomponenten. Merk teksten, og angi skriftfargen som Hvit i tekstredigeringsprogrammet.
- Skriv inn følgende tekst i avsnittskomponenten.
"Regionskontor1:
Bygningsnummer 1,
Poststed1, Provins1, Land1
Regionskontor2:
Bygningsnummer 2,
Poststed2, Provins2, Land2"
- Vi kan nå legge til bunnteksten på siden CONTACT US. Dra og slipp en Minimal-Footer-komponent i bunntekstsporet.
- Klikk på Lagre øverst til høyre i områdebyggeren for å lagre endringene.
Forhåndsvis Web-området ved å klikke på øverst til høyre i områdebyggeren for å forsikre deg om at alt ser bra ut. Kontroller at logobildet på siden CONTACT US fører deg tilbake til hjemmesiden når du klikker på det. Test menyen for å forsikre deg om at navigeringen mellom sidene på Web-området fungerer som den skal.
Web-området ditt er nå klart for publisering.