Edytowanie serwisu internetowego
Nowo utworzony serwis internetowy należy otworzyć w konstruktorze serwisów. W tym celu należy wybrać serwis, a następnie wybrać — z paska menu lub z menu podręcznego (kliknięcie prawym przyciskiem myszy) — opcję Otwórz. Następnie w konstruktorze serwisów ustawić przełącznik (
) w pozycji Edytuj. Na koniec wprowadzić nazwę aktualizacji, po czym nacisnąć przycisk OK.
W trybie edycji można zauważyć, że serwis internetowy zawiera trzy gniazda będące obszarami dostępnymi na stronie (w zależności od układu strony). Umieszczając wskaźnik myszy na poszczególnych znakach "+" na stronie, można wyświetlić gniazda, takie jak "Nagłówek", "Treść" i "Stopka".
Opis rysunku "GUID-00E6B9AF-7A95-42C0-9EDC-D84C9373F16E-default.png"
Gniazdo "Nagłówek" jest zazwyczaj używane do wyświetlania m.in. loga firmy i menu nawigacyjnego. Gniazdo "Treść" jest używane dla głównej zawartości strony, a gniazdo "Stopka" — dla informacji o prawach autorskich, łączy do mediów społecznościowych i innych dodatkowych informacji.
Najpierw utwórzmy stronę startową. Na poniższym rysunku pokazano, jak będzie wyglądała ukończona strona startowa:
Opis rysunku "GUID-82FEC35A-DC1B-4E53-8821-9008CCC60C56-default.png"
- Aby wyświetlić listę gotowych składników, dostępnych w Oracle Content Management, kliknąć na ikonie
na lewym pasku bocznym, po czym wybrać opcję Standardowe. - Na lewym pasku bocznym wyszukać gotowy składnik o nazwie "grupa składników". Przeciągnąć go do gniazda "Nagłówek".
Opis rysunku "GUID-67CAE599-0B88-416C-AEF3-EAD8FC7E420C-default.png" - Kliknąć na ikonie menu
grupy składników, po czym wybrać opcję Ustawienia. W ustawieniach wybrać z rozwijanej listy opcję Kolor (dostępnej na dole listy ustawień), po czym nacisnąć przycisk Więcej. Wprowadzić wartość #333333, po czym nacisnąć przycisk OK.
Opis rysunku "GUID-6740BAC7-E7E5-40EE-ACBB-F055FD69B3C1-default.png" - Przeciągnąć składnik "obraz" do grupy składników.
Opis rysunku "GUID-3DEB520E-A067-4E49-88B3-59F0425AB035-default.png" - Kliknąć na ikonie menu
składnika "obraz", po czym wybrać opcję Ustawienia. Dokonać ustawień na karcie Ogólne.
Właściwość Wartość Wybór Logo.png z folderu "Minimal-Images" Wyrównanie Z lewej Szerokość Anulować wybór opcji Ustaw szerokość Na górze 1.2vw Na dole 30px Z lewej 6vw Z prawej 0
Opis rysunku "GUID-8030FFAF-3DC0-4217-8733-01C3A53CEF8E-default.png"
Opis rysunku "GUID-F9B34895-7DCD-40AA-B4CF-3404820C20DD-default.png" - Powiązać obraz logo ze stroną startową. Dokonać ustawień składnika "obraz" na karcie Łącze.
Właściwość Wartość Wybór typu łącza Strona serwisu Strona HOME Miejsce docelowe Otwórz w tym samym oknie - Aby wyświetlić listę składników niestandardowych, kliknąć na ikonie
na lewym pasku bocznym, po czym nacisnąć przycisk Niestandardowe. - Teraz trzeba dodać menu nawigacyjne do strony startowej przy użyciu niestandardowego składnika "Minimal-NavMenu". Przeciągnąć składnik "Minimal-NavMenu" do grupy składników i umieścić go po prawej stronie składnika "obraz". Kliknąć na tytule składnika "Minimal-NavMenu", aby upewnić się, że jego elementem nadrzędnym jest wcześniej dodana grupa składników. W ten sposób można określać, gdzie dowolny składnik znajduje się w strukturze strony internetowej.
Opis rysunku "GUID-3C07D4E7-5154-4ED8-9A9E-F06A44A14D63-default.png"Dokonać ustawień składnika "Minimal-NavMenu" na karcie Ogólne.
Właściwość Wartość Wyrównanie Z prawej Na górze 1.2vw Na dole 0 Z lewej 0 Z prawej 6vw - Nagłówek jest już gotowy. Teraz trzeba zapisać tę grupę składników jako niestandardową grupę składników, dzięki czemu będzie można jej używać później w innych stronach internetowych. Kliknąć na tytule grupy składników, następnie kliknąć na jej ikonie menu , po czym nacisnąć przycisk Zapisz. W polu Nazwa okna dialogowego "Zapisywanie grupy składników" wpisać "Minimal-Header", po czym nacisnąć przycisk Zapisz.
Opis rysunku "GUID-1068ED91-959E-4053-8188-4D85DE630E1B-default.png"Na poniższym rysunku jest pokazywana struktura nadrzędna składnika "obraz" w gnieździe "Nagłówek".Podpowiedź:
Jeśli wskutek kliknięcia na grupie składników zostanie wyświetlony tytuł składnika "obraz" lub "Minimal-NavMenu", a nie tytuł grupy składników, należy ponownie kliknąć na tytule składnika "obraz" lub "Minimal-NavMenu". Powinien zostać wyświetlony tytuł grupy składników. Teraz można kliknąć na tytule grupy składników, a następnie wykonać powyższe etapy.
Opis rysunku "GUID-C6CF24C6-F51E-4139-B5F9-5CC1955C7519-default.png" - Aby zapisać zmiany, w prawym górnym rogu konstruktora serwisów nacisnąć przycisk Zapisz. Gniazdo "Nagłówek" powinno mieć teraz następującą postać:
Opis rysunku "GUID-717EF556-34E8-47BC-B9AA-4152D2A0FD77-default.png"
- Kliknąć na ikonie na lewym pasku bocznym, po czym nacisnąć przycisk Standardowe.
- Z lewego paska bocznego przeciągnąć składnik "grupa składników" do gniazda "Treść". Przy użyciu tej grupy składników oraz składników (które zostaną dodane do tej grupy) będzie tworzony baner.
- Kliknąć na ikonie
na lewym pasku bocznym. - Przeciągnąć układ sekcji dwukolumnowy do grupy składników.
Opis rysunku "GUID-60AED236-5F6A-46BF-A414-1438641F4ECA-default.png" - Dokonać ustawień układu sekcji na karcie Ogólne. Nacisnąć przycisk Ustawienia niestandardowe, po czym określić poniższe ustawienia.
Właściwość Wartość Szerokość pierwszej kolumny (%) 43 Szerokość drugiej kolumny (%) 57 Responsywny punkt zatrzymania (piksele) 1 023 Funkcjonowanie responsywne Ukryj pierwszą kolumnę Dokonać ustawień na karcie Tło.
Właściwość Wartość Obraz Banner1.jpg z folderu "Minimal-Images" Pozycja Wyśrodkuj, wyśrodkuj Skala Rozciągnij - Aby wyświetlić listę składników standardowych, kliknąć na ikonie na lewym pasku bocznym.
- Z listy składników standardowych przeciągnąć składnik "tytuł" do drugiej kolumny układu dwukolumnowego.
Opis rysunku "GUID-CF55C579-3FF3-460B-B608-5A485C7EF02D-default.png"
Opis rysunku "GUID-A6E0ECFE-1FCE-4F8C-96E4-9788E395CA34-default.png" - Kliknąć na składniku "tytuł", po czym wpisać tekst "WELCOME TO THE REVOLUTION". Wybrać tekst, po czym w edytorze tekstów zmienić kolor tekstu na biały. Dokonać ustawień składnika "tytuł" na karcie Ogólne.
Właściwość Wartość Na górze 6vw Na dole 1.8vw Z lewej 6vw Z prawej 6vw - Z listy składników standardowych (z lewego paska bacznego) przeciągnąć składnik "akapit" poniżej składnika "tytuł", w obrębie drugiej kolumny układu dwukolumnowego. Dokonać ustawień składnika "akapit" na karcie Ogólne.
Właściwość Wartość Na górze 1.8vw Na dole 6vw Z lewej 6vw Z prawej 6vw - Kliknąć na składniku "akapit", po czym wpisać następujący tekst:
"Akapit. Proszę tu kliknąć, aby dodać własny tekst i dokonać edycji. To doskonałe miejsce na opowiedzenie historii oraz umożliwienie użytkownikom poznania firmy."
Wybrać tekst, po czym w edytorze tekstów ustawić rozmiar tekstu na 24. W edytorze tekstów ustawić także kolor tekstu na biały.
Opis rysunku "GUID-399EE9A6-F882-40F9-8028-BB930A5FDC49-default.png" - Baner jest już gotowy. Teraz trzeba zapisać tę grupę składników jako niestandardową grupę składników, dzięki czemu będzie można jej używać później w innych stronach internetowych. Kliknąć na ikonie menu grupy składników, po czym nacisnąć przycisk Zapisz. W polu Nazwa okna dialogowego "Zapisywanie grupy składników" wpisać "Minimal-Banner", po czym nacisnąć przycisk Zapisz. Od teraz nazwa (Minimal-Banner) będzie wyświetlana dla grupy składników.
Opis rysunku "GUID-E27E6BA0-E663-415F-A93D-C6C0C44D78A7-default.png" - Z lewego paska bocznego przeciągnąć kolejny składnik "grupa składników" do gniazda "Treść", umieszczając go poniżej już dodanej grupy składników "Minimal-Banner".
Opis rysunku "GUID-E7AAB67A-2CC8-49C8-B655-F60B6E64C46A-default.png" - Przeciągnąć składnik "tytuł" do grupy składników.
- Kliknąć na składniku "tytuł", po czym wpisać tekst "Welcome to OCE Minimal".
- Dokonać ustawień składnika "tytuł" na karcie Ogólne.
Właściwość Wartość Na górze 3vw Na dole 1.8vw Z lewej 6vw Z prawej 6vw
Opis rysunku "GUID-515D7B63-7AB4-4FF6-94AD-0C30A331A7BC-default.png" - Z lewego paska bocznego przeciągnąć składnik "akapit" do grupy składników, umieszczając go poniżej składnika "tytuł". Kliknąć na składniku "akapit", po czym wpisać następujący tekst:
"Oracle Content Management to oparte na chmurze środowisko do wielokanałowego zarządzania treściami i zawartością, przyspieszające procesy obsługi. Zapewnia wydajne funkcje pracy zespołowej i zarządzania procesami Workflow, usprawniające i przyspieszające tworzenie oraz dostarczanie zawartości."
"Oracle Content Management oferuje łatwe w użyciu narzędzia do tworzenia serwisów internetowych. Można szybko utworzyć serwis internetowy, korzystając z zaawansowanych funkcji, udostępnianych przez Oracle Content Management."
- Dokonać ustawień składnika "akapit" na karcie Ogólne.
Właściwość Wartość Na górze 20px Na dole 50px Z lewej 6vw Z prawej 6vw
Opis rysunku "GUID-D8B86A72-DC68-4FD3-B664-2603244316FD-default.png" - Gniazdo "Treść" jest już ukończone. Teraz trzeba zapisać grupę składników jako niestandardową grupę składników, dzięki czemu będzie można jej używać później w innych stronach internetowych. Kliknąć na ikonie menu grupy składników, po czym nacisnąć przycisk Zapisz. W polu Nazwa okna dialogowego "Zapisywanie grupy składników" wpisać "Minimal-Body", po czym nacisnąć przycisk Zapisz.
- Aby zapisać zmiany, w prawym górnym rogu konstruktora serwisów nacisnąć przycisk Zapisz. Gniazdo "Treść" powinno mieć teraz następującą postać:
Opis rysunku "GUID-1A515BF0-6607-44F7-978B-1B9472E72901-default.png"
- Z lewego paska bocznego przeciągnąć składnik "grupa składników" do gniazda "Stopka". W ustawieniach grupy składników ustawić pole Kolor na wartość #333333.
Opis rysunku "GUID-8852AFA2-9F6E-4F36-9071-E8CB4256116C-default.png" - Przeciągnąć składnik "obraz" do grupy składników, po czym dokonać ustawień tego składnika n karcie Ogólne.
Właściwość Wartość Wybór Powered_by_OCE.png z folderu "Minimal-Images" Wyrównanie Z lewej Szerokość Anulować wybór opcji Ustaw szerokość Na górze 0.9vw Na dole 0.9vw Z lewej 6vw Z prawej 0 - Z lewego paska bocznego przeciągnąć składnik "pasek społecznościowy" do grupy składników i umieścić go po prawej stronie składnika "obraz".
Opis rysunku "GUID-46FE020A-AF6D-4BE3-BFBB-EECBFC576CC3-default.png"Na karcie Ogólne dokonać ustawień dla składnika "pasek społecznościowy".
Właściwość Wartość Na górze 1.8vw Na dole 1.8vw Z lewej 0.3vw Z prawej 6vw Aby dokonać ustawień, nacisnąć na kracie Ogólne przycisk Ikony, po czym kliknąć na nazwie ikony.
Właściwość Wartość URL - https://www.facebook.com/Oracle/ (dla serwisu Facebook)
- https://www.linkedin.com/company/oracle/ (dla serwisu LinkedIn)
- https://twitter.com/Oracle (dla serwisu Twitter)
- https://www.youtube.com/oracle/ (dla serwisu YouTube)
Miejsce docelowe Otwórz w nowym oknie - Stopka jest już gotowa. Teraz trzeba zapisać tę grupę składników jako niestandardową grupę składników, dzięki czemu będzie można jej używać później w innych stronach internetowych. Kliknąć na ikonie menu grupy składników, po czym nacisnąć przycisk Zapisz. W polu Nazwa okna dialogowego "Zapisywanie grupy składników" wpisać "Minimal-Footer", po czym nacisnąć przycisk Zapisz. Grupa składników powinna mieć następującą postać:
Opis rysunku "GUID-11801720-9060-4A9D-9D7E-52A4C7295FB7-default.png" - Aby zapisać zmiany, w prawym górnym rogu konstruktora serwisów nacisnąć przycisk Zapisz.
Klikając na ikonie 
, dostępnej w prawym górnym rogu konstruktora serwisów, można wyświetlić podgląd pierwszej strony serwisu internetowego. Serwis internetowy nadal nie jest opublikowany i nie może zostać wyświetlony przez inne osoby.
Ukończyliśmy tworzenie strony "HOME". Utwórzmy stronę "CONTACT US". Na poniższym rysunku pokazano, jak będzie wyglądała ukończona strona kontaktowa:
Opis rysunku "GUID-DF490F84-D4EC-4124-B597-E30C5EB5609F-default.png"
- Kliknąć na ikonie
na lewym pasku bocznym, po czym nacisnąć przycisk Dodaj stronę. - W polu Nazwa strony wpisać "CONTACT US", po czym nacisnąć przycisk Zamknij. Została dodana nowa strona do serwisu internetowego.
- Kliknąć na ikonie na lewym pasku bocznym, po czym nacisnąć przycisk Niestandardowe.
- Przeciągnąć składnik "Minimal-Header" (który został wcześniej utworzony i zapisany) do gniazda "Nagłówek".
Opis rysunku "GUID-EEE0AFB4-A9A5-4362-9100-80BB1494E464-default.png"
Opis rysunku "GUID-0D2B488D-7A09-4920-81CE-44F8F508F8E8-default.png"Należy zwrócić uwagę, że składnik "Minimal-NavMenu" automatycznie wybrał nową stronę "CONTACT US", która właśnie została utworzona.
Opis rysunku "GUID-A9F9AD69-F6E2-4715-8885-26FDF5DFDF1D-default.png" - Z lewego paska bocznego przeciągnąć składnik "Minimal-Banner" do gniazda "Treść".
Opis rysunku "GUID-CD535225-E948-40F2-AA4A-C092022981BD-default.png" - Teraz trzeba zmodyfikować baner, tak aby jego wygląd różnił się od banera strony "HOME" i pasował do strony "CONTACT US". W obrębie grupy składników zmodyfikować ustawienia układu sekcji dwukolumnowego:
W polu Obraz karty Tło nacisnąć przycisk Wybierz obraz, po czym wybrać — z wcześniej utworzonego folderu Minimal-Images w folderze Dokumenty — obraz Banner2.jpg.
Opis rysunku "GUID-B89812E5-369F-4E2C-8EFD-40DA5B9DB487-default.png" - W obrębie układu sekcji dwukolumnowego zmodyfikować w składnikach "tytuł" i "akapit" teksty.
- W składniku "tytuł" wpisać tekst "Want to learn more?".
- W składniku "tytuł" wpisać tekst "Find more learning material on the Headless CMS page".
- Kliknąć na ikonie na lewym pasku bocznym, po czym nacisnąć przycisk Standardowe.
- Obraz strony "CONTACT US" zawiera przycisk o nazwie OCE FOR DEVELOPERS jako część banera. Trzeba dodać ten przycisk do banera. W obrębie grupy składników "Minimal-Banner" przeciągnąć składnik "przycisk" do drugiej kolumny układu sekcji dwukolumnowego (poniżej ostatnio dodanego składnika "akapit"). Dokonać ustawień składnika "przycisk" na karcie Ogólne.
Właściwość Wartość Etykieta OCE FOR DEVELOPERS Na górze 0.3vw Na dole 3vw Z lewej 6vw Z prawej 0.3vw Na karcie Styl wybrać opcję Dostosuj, a następnie uzupełnić ustawienia.
Właściwość Wartość Kolor tła #c0d600 Czcionka - Wprowadzić 24 jako rozmiar.
- Wprowadzić kolor #58595b.
Obramowanie Brak Kolor po wskazaniu - Dla pola TŁO ustawić wartość #e1fa00.
- Dla pola CZCIONKA ustawić wartość #58595b.
- Dla pola OBRAMOWANIE ustawić wartość #2222dd.
Narożniki 0 Dokonać ustawień na karcie Łącze.
Właściwość Wartość Wybór typu łącza Strona internetowa URL http://www.oracle.com/pls/topic/lookup?ctx=cloud&id=content-cloud-headless Miejsce docelowe Otwórz w nowym oknie
Opis rysunku "GUID-2D527893-A2D4-4F11-8375-792FA3ABE725-default.png"
Opis rysunku "GUID-CFA88AD0-4A14-4FB0-A4C0-6710D4B53F7B-default.png" - Kliknąć na ikonie na lewym pasku bocznym, po czym nacisnąć przycisk Niestandardowe.
- Przeciągnąć składnik "Minimal-Body" poniżej składnika "Minimal-Banner" do gniazda "Nagłówek".
- W obrębie składnika "Minimal-Body" zmodyfikować w składnikach "tytuł" i "akapit" teksty.
- W składniku "tytuł" wpisać tekst "Connect with us:".
- Wprowadzić do składnika "akapit" szczegóły, takie jak adres e-mail i inne łącza związane z Asystą Techniczną:
"Visit the Forum Oracle Cloud Connect to post your queries."
"Przykłady związane z usługą Oracle Content Management są dostępne na stronie: https://www.oracle.com/middleware/technologies/content-experience-downloads.html"
- Z lewego paska bocznego przeciągnąć kolejny składnik "Minimal-Body" do gniazda "Treść", umieszczając go poniżej już wcześniej dodanego składnika "Minimal-Body".
- W ustawieniach grupy składników ustawić pole Kolor karty Tło na wartość #696969.
- W obrębie składnika "Minimal-Body" zmodyfikować składniki "tytuł" i "akapit".
- W składniku "tytuł" wpisać tekst "Locations". Wybrać tekst, po czym w edytorze tekstów zmienić kolor tekstu na biały.
- W składniku "akapit" wpisać poniższy tekst.
"Regionalne biuro1:
Budynek nr 1,
Miasto1, województwo1, kraj1
Regionalne biuro2:
Budynek nr 2,
Miasto2, województwo2, kraj2"
- Teraz trzeba dodać stopkę do strony "CONTACT US". Przeciągnąć składnik "Minimal-Footer" do gniazda "Stopka".
- Aby zapisać zmiany, w prawym górnym rogu konstruktora serwisów nacisnąć przycisk Zapisz.
Klikając na ikonie , dostępnej w prawym górnym rogu konstruktora serwisów, można wyświetlić podgląd pierwszej strony serwisu internetowego i upewnić się, czy strona wygląda dobrze. Należy się upewnić, że po kliknięciu na obrazie loga na stronie "CONTACT US" użytkownik jest przenoszony z powrotem do strony startowej. Następnie należy przetestować menu i upewnić się, że nawigacja między strona serwisu internetowego działa poprawnie.
Serwis internetowy jest gotowy do opublikowania.