Znakowanie witryny w nagłówku i za pomocą opcji motywów

Dzięki oznakowaniu witryny przy użyciu logotypu i kolorów danej instytucji zasoby te sprawiają wrażenie zaufanych i wiarygodnych. Pomaga to również dopasować witrynę do pozostałych zasobów internetowych instytucji. W tym temacie opisano sposoby, w jakie administratorzy i członkowie zespołu podstawowego wykonują następujące czynności:

• Wybór nagłówka i tytułu witryny.
• Dodanie logotypu do nagłówka witryny.
• Zmiana kolorów nagłówka witryny, przycisków, tekstu i tła.

Na początek zaloguj się do oprogramowania Portal for ArcGIS, a następnie kliknij opcję Witryny na stronie Przegląd, aby wyświetlić listę witryn.

Wskazówka:

Witrynę możesz również edytować podczas przeglądania jej w przeglądarce. Pamiętaj, aby zalogować się, a następnie odszukać przycisk edycji po lewej stronie witryny.

Wybieranie stylu nagłówka

W nagłówku witryny można umieścić elementy marki, korzystając z logotypu, utworzyć nawigację do pozostałych zasobów za pomocą łączy menu oraz utworzyć połączenie z kontami mediów społecznościowych.

1. Otwórz witrynę w trybie edycji.
2. Otwórz panel boczny, klikając przełącznik . W razie potrzeby kliknij strzałkę wstecz znajdującą się obok opcji Dostosuj u góry panelu, aby wrócić do menu głównego, dopóki nie zobaczysz opcji Nagłówek.
3. W obszarze Nagłówek kliknij menu Wygląd, aby wybrać styl nagłówka. Do wyboru są dostępne trzy następujące opcje:
   • • Standardowy — ten domyślny dla każdej nowej witryny projekt zawiera cienki, kompaktowy pasek, na którym znajduje się miejsce na logotyp (60 pikseli), łącza mediów społecznościowych i łącza menu.
     • Dobrze widoczny — ten projekt udostępnia więcej miejsca na większe logotypy (120 pikseli) i dodatkowe łącza menu.
     • Niestandardowy CSS/HTML — użyj edytora kodu z obsługą składni, aby skonfigurować nagłówek z użyciem kodu niestandardowego.

     Notatka:

     Aby dodać logotyp, wykonaj czynności podane w następnej sekcji.

4. Kliknij menu Znakowanie. Wszystkie pola w menu są opcjonalne.
   • Nazwa — wprowadź nazwę, która zostanie wyświetlona w nagłówku witryny. Nazwa podana w tym polu jest widoczna tylko w nagłówku i nie ma odzwierciedlenia w adresie URL witryny ani na liście witryn.
   • Nazwa skrócona — wprowadź skróconą wersję informacji dodanych w nagłówku. Ta nazwa będzie wyświetlana tylko wówczas, gdy nazwa oryginalna nagłówka wyświetlana na mniejszych ekranach (na przykład na telefonie komórkowym) będzie zbyt długa.

     Wskazówka:

     Coraz więcej osób korzysta z internetu na urządzeniach przenośnych. Aby zapewnić właściwy wygląd witryny na dowolnym urządzeniu, zalecane jest dodanie nazwy skróconej.

5. Wybierz opcję Kompozycja: Prostokąt lub Szerokie.
6. Aby oznakować nagłówek witryny marką przy użyciu niestandardowego kodu HTML lub CSS, wybierz opcję Użyj niestandardowych plików HTML/CSS.

   Notatka:

   W kodzie HTML nagłówka nie jest obsługiwany wbudowany kod JavaScript. Znaczniki skryptu zostaną zignorowane.

7. Zmodyfikuj pole arkusza CSS w panelu bocznym i kliknij opcję Zastosuj zmiany, aby zobaczyć efekty działania wprowadzonego kodu.
8. Kliknij przycisk Zapisz.

Dodawanie logotypu do nagłówka

Rozmiar i pozycjonowanie logotypu witryny zależą od wybranego stylu nagłówka.

1. Kliknij, aby rozwinąć menu Znakowanie w obszarze Nagłówek na panelu bocznym.
2. Kliknij przełącznik Logotyp, aby go włączyć.
3. Dodaj obraz, wybierając opcję Adres URL obrazu lub przesyłając obraz z pliku.

   Wskazówka:

   Jeśli obraz jest przesyłany z pliku, najlepiej aby został on zapisany jako plik PNG. Obraz można przyciąć i powiększyć w sekcji Ustawienia obrazu danej karty na panelu Dostosuj.

4. Jeśli używasz nagłówka Dobrze widoczny, możesz wybrać ustawienie Wyrównanie obrazu.
5. Podaj wartość Tekst alternatywny logotypu, aby spełnić standardy ułatwień dostępu.

   Wskazówka:

   Jeśli na logotypie znajduje się tekst, tekst alternatywny może być nazwą firmy. Jeśli logotyp jest znakiem graficznym, możesz uznać go za element dekoracyjny i w tekście alternatywnym wpisać wartość “”.

6. Kliknij przycisk Zapisz.

Dodawanie ikon mediów społecznościowych

Do nagłówka można dodać ikony mediów społecznościowych.

1. Kliknij, aby rozwinąć menu Znakowanie w obszarze Nagłówek na panelu bocznym.
2. Kliknij menu Ikony społecznościowe.
3. Kliknij przełącznik, aby dodać ikonę serwisu społecznościowego Facebook, Twitter, Instagram lub YouTube.
4. Podaj adres URL swojego konta na danej platformie.
5. Kliknij przycisk Zapisz.

Tworzenie motywu

Opracuj motyw witryny, wybierając kolory nagłówka, tekstu i przycisków w witrynie. Kolory wybrane w menu Motyw witryny zostaną zastosowane do całej witryny. Wybrane opcje można zastąpić, konfigurując kolory dla konkretnych wierszy. Więcej informacji na ten temat można znaleźć w sekcji Kolory i czcionki.

Wskazówka:

Gdy wybierasz kolor, przejrzyj wytyczne na temat znakowania dla instytucji. Wiele wytycznych na temat znakowania podaje dokładne kody kolorów dla zasobów, takich jak witryny internetowe i logotypy. Jeśli nie masz wytycznych na temat znakowania, skonsultuj motyw witryny z zespołem lub partnerami biznesowymi, aby zapewnić, że będzie on odpowiednio reprezentować instytucję.

1. Otwórz witrynę w trybie edycji.
2. Otwórz panel boczny, klikając przełącznik . W razie potrzeby kliknij strzałkę wstecz znajdującą się obok opcji Dostosuj u góry panelu, aby wrócić do menu głównego, dopóki nie zobaczysz opcji Motyw.
3. Aby podać kolor dowolnej z poniższych opcji, wpisz szesnastkowy kod koloru lub wybierz kolor w oknie wyboru koloru obok pola kodu koloru.
   • Opcja Kolor tła nawigacji globalnej określa kolor paska nawigacji globalnej witryny.
   • Opcja Kolor tekstu nawigacji globalnej określa kolor tekstu na pasku nawigacji globalnej.

     Notatka:

     Więcej informacji na temat nawigacji globalnej zawiera sekcja Czym jest nawigacja globalna?

   • Pole Kolor tła nagłówka określa kolor nagłówka witryny.
   • Pole Kolor tekstu w nagłówku określa kolor tekstu w nagłówku.
   • Pole Kolor tła treści określa kolor wierszy witryny. Kolor wiersza i kolor tekstu można również skonfigurować dla poszczególnych wierszy, wykonując czynności przedstawione w sekcji Kolory i czcionki.
   • Pole Kolor tekstu treści określa kolor tekstu w całej witrynie.
   • Pole Kolor łącza w treści określa kolor wszystkich łączy w witrynie.
   • Pole Kolor tła przycisków określa kolor przycisków dostępnych w witrynie.
   • Pole Kolor tekstu przycisków określa kolor tekstu wszystkich przycisków dostępnych w witrynie.
4. Po skonfigurowaniu kolorów kliknij opcję Zastosuj zmiany.
5. Do tekstu w nagłówku i treści witryny można również zastosować czcionkę.
   • Aby wybrać czcionkę dla treści witryny, kliknij przycisk ustawień Czcionka podstawowa.
   • Aby zmienić czcionkę w nagłówku witryny, kliknij przycisk ustawień Czcionka nagłówka.

Notatka:

Aby zacząć jeszcze raz lub przywrócić kolory domyślne, należy wybrać opcję Przywróć wartości domyślne w dolnej części menu Motyw.

Tworzenie stopki

Przy użyciu niestandardowego kodu HTML można dodać do witryny stopkę, która będzie widoczna na wszystkich stronach podłączonych do witryny.

1. Rozwiń menu Stopka na panelu bocznym.
2. Kliknij przełącznik obok opcji Dostosuj.
3. Zmodyfikuj pola arkusza CSS i kodu HTML w panelu bocznym i kliknij opcję Zastosuj zmiany, aby zobaczyć efekty w kodzie HTML.

   Notatka:

   W kodzie HTML stopki nie jest obsługiwany wbudowany kod JavaScript. Znaczniki skryptu zostaną zignorowane.

Kolejne etapy

Aby wyraźniej podkreślić znakowanie witryny, możesz wykonać następujące czynności:

• Dodać łącza menu i włączyć nawigację globalną. Więcej informacji zawiera temat Konfigurowanie łączy menu i nawigacji globalnej.
• Każda witryna zawiera adres URL (adres internetowy). Jeśli instytucja ma domenę niestandardową, możesz skonfigurować ten adres URL, aby wyraźnie oznaczyć marką daną witrynę. Więcej informacji znajduje się w sekcji Konfigurowanie niestandardowego adresu URL.