Jak wstawiać podziały i do czego są potrzebne?

Porady praktyczne > Krok 2 - Wzorzec graficzny > Jak utworzyć witrynę "Mobile-Friendly"? > Jak utworzyć witrynę responsywną? >

Jak wstawiać podziały i do czego są potrzebne?

Previous pageReturn to chapter overviewNext page

Polecenia w oknie Ustawienia responsywności służą do takiego konfigurowania stron witryny, by adaptowały się do wyświetlania na różnych urządzeniach, oraz do definiowania zachowania stron w chwili aktywizacji punktów kontrolnych.

Kiedy kolejność wyświetlania obiektów na stronie jest już ustalona i wiadomo, które obiekty będą ukrywane w jakim widoku, w tym oknie w edycji Pro można wstawić linie podziału dla poszczególnych punktów kontrolnych.

Linia podziału przenosi obiekt lub blok obiektów do nowego wiersza wtedy, gdy strona wyświetlana jest w rozdzielczości niższej niż bieżąca.

Kliknięcie przycisku Podział wiersza rozpoczyna proces wstawiania linii podziału. W tabeli układu strony widoczne są szare linie przerywane wszędzie tam, gdzie można wstawić podział. Kliknięcie którejś z nich powoduje wstawienie linii podziału. Szarą linię przerywaną zastępuje czerwona. Drugie kliknięcie linii podziału (teraz czerwonej) powoduje usunięcie podziału. Kliknięcie przycisku Podział wiersza po raz drugi zatwierdza wprowadzone zmiany i kończy procedurę ustalania podziałów.

Rysunek 1. Wstawianie linii podziału w tabeli układu strony

Rysunek 1. Wstawianie linii podziału w tabeli układu strony

Poniższy przykład powinien pomóc zrozumieć mechanizm wstawiania podziału wiersza. Linie podziału zostały wstawione w widoku Duży ekran przed obiektem 3 oraz po obiekcie 7.

Rysunek 2. Układ strony w punkcie kontrolnym Duży ekran

Rysunek 2. Układ strony w punkcie kontrolnym Duży ekran

Jak widać, kształt symbolu podziału współgra z kolejnością wyświetlania. Przyjrzyjmy się symbolowi podziału przed obiektem numer 7. Obiekt ten zostanie umieszczony powyżej bloku utworzonego z obiektów 8, 9 i 10, ponieważ zgodnie z kolejnością tutaj obiekty będą wyświetlone od prawej do lewej.

Po uwzględnieniu kolejności wyświetlania, wstawionych właśnie linii podziału wierszy oraz faktu ukrycia obiektu numer 2 układ strony w widoku następującym po punkcie kontrolnym Duży ekran będzie taki, jak na rysunku.

Rysunek 3. Układ strony dla widoku następującego po punkcie kontrolnym Duży ekran

Rysunek 3. Układ strony dla widoku następującego po punkcie kontrolnym Duży ekran

Jak widać, obiekt numer 2 został ukryty i nie jest już widoczny, ale pozostałe obiekty zachowały swoje numery porządkowe. Linia podziału wiersza przesunęła obiekty 3 i 4 do następnego wiersza. Cały pierwszy wiersz wypełnia obiekt numer 1. Gdyby nie wstawiony podział, obiekty 1, 3 i 4 zostałyby wyświetlone obok siebie w pierwszym wierszu i zajmowały po jednej trzeciej części jego szerokości.

Drugi podział wiersza separuje blok obiektów 8, 9 i 10, umieszczając go w następnym wierszu poniżej obiektu numer 7.

Warto zauważyć, że obiekt zajmujący kilka kolumn zachowuje swoje proporcje w następnym widoku po punkcie kontrolnym. Na przykład na rysunku 1, obiekt numer 5 zajmuje 3 z 4 dostępnych kolumn, co stanowi 75% dostępnej szerokości wiersza w widoku Duży ekran. W widoku następującym po punkcie kontrolnym (rysunek 3) proporcja ta jest zachowana, mimo że obiekty w winnych wierszach mają inny układ.

 


Porady praktyczne:

-

Jak utworzyć witrynę responsywną?

-

Jak działa mechanizm wyznaczania kolejności wyświetlania?