Kiedy definiuje się ogólny układ graficzny witryny, WebSite X5 oferuje wybór wzorca domyślnego albo zbudowanie nowego. Niezależnie od dokonanego wyboru zawsze można w oknie Struktura wzorca dokonać rozmaitych zmian w wyglądzie wzorca domyślnego, albo zbudować od początku zupełnie nowy wzorzec. Definiowanie układu graficznego wzorca witryny dotyczy nie tylko widoku przeznaczonego na duży ekran, określić można także, jak wzorzec ma wyglądać w poszczególnych widokach witryny responsywnej.
|
W nagłówku i stopce wzorca można umieścić tekst, obrazy, animację, galerię, pole Szukaj oraz linki. Oto opcje dostępne dla tych elementów w oknie Zawartość wzorca otwieranym przyciskiem Dalej.
|
Aby ułatwić pracę, w oknie Struktura wzorca wyświetlany jest Podgląd będący graficzną reprezentacją wzorca. Element strony, którym chcesz się w danej chwili zająć, wybra się z listy albo kliknąć odpowiedni obszar na podglądzie. Wszystkie modyfikacje są tam natychmiast widoczne.
Ponadto, gdy buduje się witrynę responsywną, w oknie widoczny jest pasek responsywności, na którym powielone są informacje z okna Rozdzielczości i projekt responsywny.
Na pasku responsywności podane są wszystkie zdefiniowane punkty kontrolne oraz wyznaczone przez nie zakresy rozdzielczości. Kliknięcie zakresu powoduje zaznaczenie go i przejście do definicji wzorca dla odpowiadającego mu widoku.
Po wybraniu widoku można wybrać obszar strony, który chce się zmodyfikować, albo z listy, albo klikając odpowiedni obszar bezpośrednio na podglądzie struktury.
Zaleca się zachowanie podczas pracy następującej kolejności działań: najpierw definiowanie wzorca dla widoku na dużym ekranie, następnie wprowadzanie zmian w poszczególnych widokach, aż do widoku na ekranie telefonu.
Zanim przystąpi się do tworzenia własnego wzorca, trzeba wybrać Rodzaj struktury , czy poza nagłówkiem i stopką witryna ma mieć pasek boczny. Oto wybór opcji:
|
Nagłówek i stopka
|
|
Nagłówek, stopka i lewy pasek boczny
|
|
Nagłówek, stopka i prawy pasek boczny
|
|
Gdy wybierzesz już strukturę wzorca, zdecyduj, która Sekcja strony teraz cię interesuje. Strony są podzielone na następujące sekcje:
|
Tło strony: Jest to zewnętrzny obszar otaczający stronę witryny. Jest ono widoczne wtedy, gdy okno przeglądarki jest większe niż rozmiar strony.
|
|
Tło nagłówka: Jest częścią sekcji Tło strony znajdującą się za sekcją Nagłówek.
|
|
Nagłówek: Znajduje się na górze strony. Na ogół składa się z elementów graficznych i jest najlepszym miejscem na tytuł i podtytuł witryny, logo firmy, pole Szukaj oraz menu nawigacyjne z łączami do elementów mapy witryny albo wyboru języka jej wyświetlania.
|
|
Zawartość strony: Ten obszar zawiera właściwą treść strony, menu nawigacyjne i ewentualnie podmenu.
|
|
Stopka: Znajduje się na dole strony i podobnie, jak nagłówek najczęściej zawiera jakiś obraz. Jest to wizualne zakończenie strony. Ponadto w stopce zwyczajowo znajdują się różne uwagi, ostrzeżenia, informacje o prawach autorskich, adres e-mail, numer NIP itp.
|
|
Tło stopki: Jest częścią sekcji Tło strony znajdującą się za sekcją Stopka.
|
|
Pasek boczny: Ta opcja jest dostępna tylko wtedy, gdy zostanie wybrana struktura wzorca z paskiem bocznym. Jest to kolumna po prawej lub lewej stronie zawartości strony i służy do tworzenia pionowego menu nawigacyjnego.
|
|
Jeżeli ustawi się Tło nagłówka lub Tło stopki jako Przezroczyste, to będą one traktowane jak Tło strony i zachowają jej wygląd. Jeżeli nie zostaną ustawione jako przezroczyste, to Nagłówek lub Stopka będą widoczne jako pasy rozciągające się na całą szerokość okna przeglądarki.
|
|
Można ustawić następujące Właściwości graficzne poszczególnych sekcji strony:
| ▪ | Kolor: Kolor, jaki ma zostać użyty jako tło. |
| ▪ | Plik obrazu: Ścieżka dostępu do pliku obrazu (.JPG, .GIF, .PNG.), który ma być wykorzystany jako tło. Obraz można wybrać z biblioteki online kliknięciem przycisku  albo z folderu offline za pomocą przycisku  Wybór pliku. |
| ▪ | Powtórzenie: Określa, czy obraz tła ma być powtarzany. Obraz może być powielany w poziomie, w pionie, w obu kierunkach albo zajmować całe dostępne miejsce. Jeśli chodzi o Tło strony, rozmiar obrazu może zostać dopasowany tak, by pokrywał cały obszar tła. W tym wypadku nie ma gwarancji zachowania proporcji oryginału. |
| ▪ | Wyrównanie: Określa sposób wyrównania obrazu w danej sekcji strony. |
Dla sekcji Tło strony dostępna jest także opcja:
| ▪ | Nieruchome tło: Zaznaczenie tej opcji spowoduje, że tło strony pozostanie nieruchome nawet podczas przewijania strony. |
|
Dla niektórych sekcji strony można określić niestandardowy Rozmiar.
W zależności od zaznaczonego obszaru strony poniższe opcje są dostępne lub nie:
| ▪ | Szerokość: Nie ma możliwości ręcznego ustawienia opcji Zawartość strony. Jej wartość jest pobierana automatycznie z opcji Rozdzielczość witryny, którą określa się w oknie Rozdzielczości i projekt responsywny podczas tworzenia witryny przeznaczonej na duży ekran lub widoku na duży ekran, jeśli witryna jest responsywna. |
| ▪ | Wysokość: Określona w pikselach wysokość wybranej sekcji strony. |
| ▪ | Wysokość min: Tylko dla obszaru Zawartość strony. Określa w pikselach minimalną wysokość zawartości strony, niezależnie od wysokości wstawionej treści. |
| ▪ | Rozszerz do szerokości okna przeglądarki: Ta opcja jest dostępna tylko dla sekcji Nagłówek oraz Stopka. Daje gwarancję, że podane proporcje będą zachowane w całej szerokości okna przeglądarki, nie tylko do szerokości zawartości strony. |
|
Dostępność tych wszystkich opcji sprawia, że nie istnieją ograniczenia położenia i rozmiaru menu poziomego wewnątrz nagłówka, co daje ogromne możliwości.
|
|
Dla niektórych sekcji można określić Położenie zawartości.
Dla sekcji Tło strony i Zawartość strony dostępne są ustawienia:
| ▪ | Marginesy: Określa w pikselach wielkość marginesu (pustej przestrzeni między krawędzią sekcji a jak zawartością). |
Poniższa opcja jest dostępna dla sekcji Tło strony:
| ▪ | Wyrównanie: jak strona jest wyrównana w oknie przeglądarki. |
Poniższa opcja jest dostępna dla sekcji Pasek boczny:
| ▪ | Podczas przewijania stron zachowaj obiekty w polu widzenia: Gdy zaznaczone jest to pole wyboru (w oknie Zawartość wzorca), pasek boczny pozostaje zawsze widoczny, niezależnie od przewijania strony. |
|
Porady praktyczne:
