Okno Ustawienia responsywności

Krok 4 - Strony > Tabela układu strony i Pasek poleceń >

Okno Ustawienia responsywności

Previous pageReturn to chapter overviewNext page

Polecenia w tym oknie służą do określenia zachowania każdego obiektu umieszczonego na stronie w zależności od rozdzielczości ekranu. Okno to otwiera się kliknięciem przycisku Responsywna znajdującego się na pasku narzędzi tabeli układu strony w oknie Tworzenie strony.

By móc korzystać z opcji w oknie Ustawienia responsywności, należy najpierw poinformować program, że budowana witryna ma być responsywna. Służące do tego pole wyboru znajduje się w oknie Rozdzielczości i projekt responsywny.

W oknie Ustawienia responsywności widoczne są:

Pasek responsywności, na którym widać wszystkie punkty kontrolne oraz odpowiadające im widoki, jakie zostały zdefiniowane w oknie Rozdzielczości i projekt responsywny. Kliknięcie na pasku któregoś obszaru powoduje przejście do odpowiedniego widoku.
Krótka lista operacji, jakie można wykonać na stronie w zależności od wybranego obszaru widocznego,
Siatka, w której widać konfigurację strony oraz polecenia niezbędne do określenia zachowania obiektów.

Gdy na pasku responsywności wybierze się widok Duży ekran, wtedy w siatce pojawi się konfiguracja obiektów zdefiniowana w oknie Tworzenie strony. W tym miejscu należy określić zmiany w układzie strony, które zostaną na niej wprowadzone, gdy będzie ona wyświetlana na ekranach o mniejszej rozdzielczości odpowiadającej następnemu z kolei widokowi. Należy zatem:

1. Określić kolejność wyświetlania obiektów.
2. Zdecydować, czy wszystkie obiekty powinny być widoczne, a jeśli nie wszystkie, to które należy ukryć.
3. Ustalić podziały wierszy.

Po zakończeniu pracy w siatce, należy zaznaczyć na pasku responsywności następny widok. Konfiguracja obiektów zostanie utworzona na podstawie ustawień poczynionych w widoku Duży ekran i teraz można wprowadzać zmiany układu definiujące wygląd strony wyświetlanej w rozdzielczości leżącej w następnym, niższym przedziale. W ten sposób należy opracować wszystkie kolejne zdefiniowane widoki, aż do ostatniego widoku na ekranie Smartfonu.

Nie ma potrzeby ustawiania kolejności wyświetlania obiektów w pośrednich widokach, ponieważ kolejność jest dziedziczona z ustawień widoku Duży ekran.

W widoku Smartfon nie trzeba już robić niczego, ponieważ wszystkie obiekty, które nie zostały ukryte, będą ustawione w kolumnie jeden pod drugim.

Polecenia służące do przedefiniowania układu strony oraz zachowania obiektów w chwili osiągnięcia nowego punktu kontrolnego znajdują się na pasku narzędzi powyżej siatki:

Kolejność

Tutaj określa się kolejność, w jakiej obiekty pojawiają się na ekranie.

Program automatycznie sugeruje kolejność wyświetlania obiektów w siatce. Numer porządkowy każdego obiektu widoczny jest w prawym dolnym rogu obiektu. Chcąc zmienić domyślną kolejność, należy kliknąć opcję porządkowania kolejności wyświetlania i klikać obiekty w siatce w kolejności, w jakiej mają być poukładane. Kiedy kliknie się któryś obiekt ustalając w ten sposób jego kolejność, program zaznaczy czerwoną obwódką wszystkie obiekty, które mogą być następne w kolejności.

Klikniecie po raz drugi wybranego już obiektu anuluje jesgo ustawienia i proces porządkowania wraca do pozycji poprzedzającej go.

W zależności od położenia obiektów na stronie (liczby zajmowanych komórek i ich położenia względem innych obiektów), mogą się tworzyć bloki obiektów ułożonych w określonej kolejności. W kolejnych widokach blok obiektów jest traktowany jak pojedynczy obiekt. Bloki te są oznaczane w siatce, zatem wiadomo, gdzie się znajdują. Mają też wpływ na wyznaczanie kolejności wyświetlania w dlaszych widokach.  

Kliknij trójkąt widoczny przy przycisku Kolejność, a rozwinie się podmenu z elementami:

Uporządkuj wszystkie obiekty od nowa: Ta opcja jest domyślnie zaznaczona że pierwszy kliknięty obiekt będzie pierwszym w kolejności wyświetlania na stronie. Następnie należy kliknąć po kolei wszystkie kolejne obiekty, które maja być widoczne.
Kontynuuj porządkowanie od wybranego obiektu: Trzeba zaznaczyć w siatce obiekt, od którego ma się rozpocząć niestandardowa kolejność wyświetlania. To oznacza, że akceptujesz domyślną kolejność wyświetlania od początku do tego miejsca i chcesz ustalić inną kolejność wyświetlania następnych obiektów. Następnie należy klikać po kolei obiekty w takiej kolejności, w jakiej mają się pojawiać. Można przy tym korzystać z dawanych przez program wskazówek dotyczących możliwych wyborów.

Ustalanie kolejności wyświetlania kończy się z chwilą zaznaczenia ostatniego obiektu na stronie. Istnieje możliwość wcześniejszego przerwania procesu wyznaczania kolejności za pomocą następujących poleceń:

Dokończ porządkowanie: To polecenie przerywa procedurę wyznaczania kolejności obiektów i zatwierdza wprowadzone zmiany.
Anuluj kolejność obiektów: To polecenie przerywa procedurę wyznaczania kolejności obiektów i anuluje wprowadzone zmiany, przywracając poprzednią kolejność wyświetlania.

Więcej informacji można znaleźć pod hasłem: Jak działa mechanizm wyznaczania kolejności wyświetlania?

Pokaż/Ukryj obiekty

Te polecenia powodują, że zaznaczony w siatce element jest widoczny lub niewidoczny.

Kliknięcie obiektu sprawi, że będzie niewidoczny na stronie. Jego wygląd w siatce zmienia się, choć numer porządkowy określony wcześniej pozostaje.

Ustalenie, że w danym widoku ekranu obiekt ma być niewidoczny na stronie powoduje, że w niższych rozdzielczościach także się nie pojawi. Wszystkie obiekty widoczne zostaną uporządkowane na nowy, tak jakby obiekty niewidoczne nie istniały.

Obiekt niewidoczny w danym widoku (dla określonego punktu kontrolnego) nie pojawi się w siatce dla widoku o niższej rozdzielczości.

Po wybraniu obiektów niewidocznych dla danego punktu kontrolnego należy ponownie kliknąć przycisk Pokaż/Ukryj obiekty w celu zatwierdzenia wprowadzonych zmian.  

Podział wiersza

Za pomocą tego polecenia można wymusić przeniesienie obiektu lub bloku obiektów do nowego wiersza, gdy witryna będzie wyświetlana w rozdzielczości niższej, niż ta dla danego punktu kontrolnego.

W miejscach, gdzie możliwe jest wstawienie podziału wiersza, program wyświetla w siatce szare linie przerywane. Wystarczy kliknąć którąś z nich, żeby zatwierdzić podział. Wtedy linia przybiera czerwony kolor. Kliknięcie jej po raz drugi anuluje podział.

Kiedy skończysz, kliknij ponownie przycisk Podział wiersza, żeby wyjść z trybu ustalania podziału i zatwierdzić zmiany.

Więcej informacji można znaleźć pod hasłem: Jak wstawiać podziały i do czego są potrzebne?

 

 


Porady praktyczne:

-

Jak zbudować stronę w siatce układu strony?

-

Jak utworzyć witrynę responsywną?