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żna również edytować podczas przeglądania jej w przeglądarce. Należy zalogować się, a następnie znaleźć 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.
- Kliknij opcję Nagłówek na panelu dostosowania.
- 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. Więcej informacji można znaleźć w temacie Niestandardowe nagłówki i stopki.
Notatka:
Aby dodać logotyp, wykonaj czynności podane w następnej sekcji.
- 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.
- Wybierz opcję Kompozycja: Prostokąt lub Szerokie.
- 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.
- Zmodyfikuj pole arkusza CSS w panelu bocznym i kliknij opcję Zastosuj zmiany, aby zobaczyć efekty działania wprowadzonego kodu.
- Kliknij przycisk Zapisz.
Dodawanie logotypu do nagłówka
Rozmiar i pozycjonowanie logotypu witryny zależą od wybranego stylu nagłówka.
- Kliknij opcję Nagłówek na panelu dostosowania.
- Kliknij, aby rozwinąć menu Znakowanie.
- Kliknij przełącznik Logotyp, aby go włączyć.
- 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. - Jeśli używasz nagłówka Dobrze widoczny, możesz wybrać ustawienie wyrównania obrazu.
- 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ść “”. - Kliknij przycisk Zapisz.
Tworzenie motywu
Utwórz motyw witryny, wybierając kolory nagłówka, tekstu i przycisków w witrynie.
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ę.
- Aby podać kolor dowolnej z poniższych opcji, wpisz 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 Dodaj pierwszą kartę za pomocą karty Wiersz.
- 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.
- Po skonfigurowaniu kolorów kliknij opcję Zastosuj zmiany.
- 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
Wartości domyślne Edytora witryn nie zawierają stopki. Aby uzyskać trwałą stopkę na wszystkich stronach witryny, należy utworzyć stopkę niestandardową.
- W sekcji Stopka wybierz opcję Niestandardowa.
Na stronie jest wyświetlana stopka domyślna, a w panelu bocznym jest wyświetlane pole arkusza CSS.
- Kliknij przycisk ustawień na dole po prawej stronie stopki, aby edytować kod HTML.
- Kliknij ponownie przycisk ustawień, aby wyświetlić zmiany.
- Zmodyfikuj pole arkusza CSS w panelu bocznym i kliknij opcję Zastosuj zmiany, aby zobaczyć efekty w kodzie HTML.
Wskazówka:
W kodzie HTML stopki nie jest obsługiwany wbudowany kod JavaScript. Znaczniki skryptu zostaną zignorowane.
Następne 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 temacie Konfigurowanie niestandardowego adresu URL.