Określenie układu strony internetowej polega na wizualnym podzieleniu jej na wiersze oraz kolumny (pojęcie wiersze oznacza tu poziome bloki, a nie wiersze takie jak np. w programie MS Word), w których następnie umieszczać można portlety z treściami.


Układ witryny można zdefiniować zarówno dla strony już eksploatowanej (zawierającą treść), jak i dla nowej (pustej) strony

W celu określenia układu wizualnego strony, należy:

1.Zalogować się w systemie eKontakt na interesującej nas witrynie (do której posiadamy uprawnienia edycyjne)

2. Korzystając z dockbara (górny szary pasek narzędziowy), przejść do opcji: Zarządzaj → Układ strony

3. Pojawi się okno Zarządzaj stroną w sekcji Układ podzielone na dwie części funkcyjne – tak jak na rysunku:

4. W pierwszej części z nagłówkiem Opcje pierwszego/drugiego/trzeciego wiersza użytkownik może wskazać podział danego wiersza na kolumny, korzystając z infografik o niebieskim kolorze. Jak widać na ilustracji, każdy wiersz może być podzielony na osiem możliwości. W przypadku chęci dodania kolejnego wiersza, użytkownik powinien kliknąć na opcję umieszczoną pod infografikami: Dodaj kolejny wiersz. Na danej stronie może być zdefiniowanych maksymalnie do 3 wierszy, a każdy z nich może być podzielony niezależnie od siebie na różną liczbę kolumn (od 1 do 4 kolumn).

5. Drugą możliwością sterowania układem strony jest wybranie jednego z gotowych szablonów podziału strony, bez konieczności ręcznego dzielenia strony na żądaną ilość wierszy. Możliwość taka pozostaje do dyspozycji w drugiej części okna – nagłówek Inne układy strony.

6. Kliknięcie na jedną z dostępnych infografik symbolizujących określony układ strony spowoduje zastosowanie zdefiniowanego szablonu. Do dyspozycji użytkownika pozostaje 10 zdefiniowanych układów. Na większości stron używany jest układ dwukolumnowy, w którym lewa kolumna jest węższa (zajęcie 30% dostępnej szerokości strony), zaś prawa kolumna jest szersza (zajęcie 70% dostępnej szerokości strony), czyli układ o nazwie 2 Kolumny (30/70).

7. Po wybraniu żądanego układu strony należy zapisać modyfikację, klikając na przycisk Zapisz.

8. Wobec każdej podstrony danej witryny zastosować można odmienny układ graficzny.

9. W celu zastosowania różnych układów graficznych dla podstron można kolejno przechodzić do nich (wywołując ich adres URL) i wywoływać w każdej z nich opcję Zarządzaj → Układ strony,
szybszą jednak metodą będzie skorzystanie z dostępnego drzewa podstron witryny:

10. Klikając w strony podrzędne względem pozycji Strony publiczne, użytkownik uzyska możliwość edycji wybranej podstrony. Następnie proszę przejść do ramki z niebieskim tłem i wybrać opcję Układ, tak jak na poniższej ilustracji:

11. W sekcji Układ użytkownik będzie mógł wybrać układ strony, tak jak w pkt. 3.

12. Postępując analogicznie wobec wszystkich podstron zarządzanej witryny, można określić docelowy układ graficzny każdej z nich.


Dodatkowe możliwości

1/2: Umieszczenie dedykowanego portletu

Oprócz powyższych schematów podziału podstrony na wiersze i kolumny, zastosować można zagęszczony podział siatki wierszy i kolumn za pomocą portletu Zagnieżdżone portlety, stanowiącego swoisty kontener dla dalszych portletów. Element ten jest szczególnie przydatny przy kilku treściach o niewielkich (w sensie graficznym) rozmiarach, na przykład:

Poniżej podano przykładowe dostępne zagnieżdżenia w ramach wspomnianego portletu:

Ilustracja o zwiększonych rozmiarach dostępna jest do pobrania pod linkiem: wersja o większych rozmiarach. Z uwagi na bardzo dużą ilość kombinacji układu graficznego zaniechano z pokazania pełnej ich liczby, albowiem dalsze możliwe kombinacje sprowadzają się do prostych zasad:

Wyjątek w oznaczeniach układów stanowi osiem odrębnych schematów o wyraźnie szerszych czarnych obramowaniach (układy te widoczne są na powyższym rysunku w lewym górnym rogu).

Uwaga: aktualnie portlet służący do zagnieżdżeń standardowo nie jest udostępniony administratorom witryn i wymaga dodatkowego uprawnienia. Wniosek o umieszczenie tego elementu można złożyć drogą elektroniczną do Helpdesku CUI PG, podając jednoznacznie: podstronę określonej witryny, której dotyczy wniosek oraz symbol (kod) żądanego układu graficznego, zgodnie z powyższymi informacjami dotyczącymi kodów.

Portletu służącego do zagnieżdżeń należy używać w szczególnych przypadkach. Zwyczajowo nie jest on potrzebny do budowy standardowych witryn internetowych.

2/2: Modyfikacja stylów CSS istniejących portletów, zmiana stylów CSS całej witryny

W szczególnej sytuacji może się zdarzyć, że dostępne schematy podziału strony na wiersze i kolumny są niewystarczające dla specyfiki danej witryny (np. portlety nie mieszczą się w szerokości strony i należałoby je zwęzić). W przypadku, gdy użytkownika interesuje nietypowe ułożenie portletów na podstronie, można posłużyć się następującym sposobem postępowania:

  1. Dla danej podstrony ustalić w sekcji Inne układy strony schemat jednej całościowej kolumny (1 Kolumna).
  2. Następnie wobec umieszczonych w takim schemacie portletów kolejno zastosować indywidualne ustawienia stylu CSS – klikając w ikonę narzędzia (stylizowanego na klucz płaski) w szarym prostokącie symbolizującym portlet i przechodząc do opcji Wygląd i zachowanie. W zakładce Zaawansowane style wybrać opcję Dodaj regułę CSS tylko dla tego portletu i w polu Wprowadź swój niestandardowy CSS dopisać definicję stylu zgodną ze standardem CSS. Na przykład dla poszczególnych portletów można obliczyć ich indywidualną szerokość wyrażoną w procentach i zdefiniować dla każdego z nich regułę:
    float: left;
    width: (ustalona wartość procentowa dla portletu);
  3. Kliknąć przycisk Zapisz, zamknąć okienko i odświeżyć stronę w przeglądarce.

Oprócz indywidualnej modyfikacji ustawień CSS dla każdego umieszczonego portletu, istnieje także funkcjonalność modyfikacji ustawień CSS dla całej witryny. Aby dodać modyfikacje CSS na witrynie, należy przejść do menu (górny pasek narzędziowy) i wybrać: Zarządzaj → Układ strony. W oknie Zarządzaj stroną kliknąć w drzewie struktury podstron na pozycję Strony publiczne. Będąc w części Wygląd i zachowanie, przejść na dół okna, gdzie umieszczone jest pole tekstowe CSS z opisem Wprowadź niestandardowy CSS który zostanie załadowany po załadowaniu motywu. Umieścić modyfikacje stylów CSS zgodnie z potrzebą.

Modyfikacji stylów CSS należy używać tylko w szczególnych przypadkach. Zwyczajowo takie modyfikacje nie są potrzebne do budowy standardowych witryn internetowych.



Powiązane artykuły

Powiązane artykuły pojawiają się tu w oparciu o wybrane etykiety. Kliknij, aby edytować makro i dodać lub zmienić etykiety.