Narzędzia do tworzenia stron internetowych w kreatorze stron www WebWave CMS

Pozostałe artykuły

 

Zanim zabierzemy się do pracy warto było by wspomnieć czym jest ów „responsywność” – otóż, jest to możliwość dostosowywania się strony do różnych szerokości, w zależności od tego na jakim ekranie jest wyświetlany obraz. Z założenia wtedy bez znaczenia jest czy otwieramy stronę na tablecie czy telefonie, za każdym razem nasza strona będzie dostosowana do danej rozdzielczości a nasz projekt na każdej z nich może wyglądać unikalnie, czego nie osiągniemy na stronach typu „mobilnego”, które już się wypiera na rzecz responsywnych. W jednym z artykułów pisaliśmy jakie różnice są między stroną responsywną a mobilną. Po takim wstępie możemy przystąpić do działania.

 

By stworzyć swoją pierwszą responsywną stronę, należy wpierw przygotować projekt dla   desktop’u – czyli pierwszego, domyślnie wybranego widoku w kreatorze. Gdy ów projekt zostanie wykonany możemy przejść do tworzenia responsywnej strony.

 

Tworzenie responsywnej strony w głównej mierze opiera się o dostosowanie wcześniej już wykonanego jednego z widoków do pozostałych, dopasowując treść oraz wielkość elementów do breakpointów – czemu do nich? Ponieważ wszystko co wystaje poza ich granicami może zostać niewidoczne/ucięte w niektórych rozdzielczościach, wszystko jest zaś uzależnione od wyświetlacza/urządzenia na jakim nasza strona jest przeglądana.

 

Przejdźmy teraz przez wszystkie niezbędne kroki:

 

  1. Aktywacja trybów RWD
  2. Wybór widok pracy
  3. Dostosowanie
  4. Publikacja widoków
  5. Reset ustawień
  6. Wyłącz RWD

 

  1. Aktywacja trybów RWD - w prawym górnym rogu, klikamy na ikonę przedstawiającą urządzenia mobilne, uruchamiamy możliwość przejścia do dowolnego trybu za pomocą przycisku „włącz”

 

 

  1. Wybór widoku pracy - w naszym przypadku będzie to tablet, klikamy więc na obraz go przedstawiający i przechodzimy do edycji.

 

 

  1. Dostosowanie - jak widzimy, nasza strona wymaga teraz byśmy dostosowali każdy element z osobna. Jej obecny wygląd to przycięta strona z wersji desktopowej, którą mieliśmy okazje wcześniej stworzyć.

 

 

Odpowiednie ułożenie elementów powinno zając nam chwilę, wszystko zaś jest uzależnione od strony oraz wielkości modyfikacji, które chcemy wprowadzić.

 

 

Może się okazać że tekst bądź menu, które stworzyliśmy wymaga modyfikacji, wtedy musimy znaleźć rozwiązanie by trochę inaczej rozmieścić pewne elementy bądź stworzyć je od nowa. Powinniśmy więc dowiedzieć się czegoś więcej o tym jak ukrywać elementy.

 

Czynności te można stosować dla każdego z widoków który edytujemy, metodyka działania jest więc niezmienna dla każdego z nich.

 

  1. Publikacja widoków – po odpowiednim dostosowaniu pod nasze oczekiwania powinniśmy przejść do publikacji, w tym celu należy znów kliknąć w ikony przedstawiające różne urządzenia mobilne, po ich rozwinięciu wybieramy ikonę przedstawiającą „trybiki”. W „Ustawienia RWD”  wybieramy wykonane przez nas widoki i zaznaczając „ptaszkiem” decydujemy o ich widoczności. Po wszystkim należy wcisnąć zielony przycisk „zapisz ustawienia” i wyjść wciskając krzyżyk w prawym górnym rogu.

 

 

  1. Reset ustawień – istnieje także reset ustawień dla każdego z widoków. Pozwala on na rozpoczęcie kreowania dowolnego widoku, bez konieczności cofania bądź rozpoczynania nowego projektu.  Opcje tą można dobrowolnie uruchomić w ustawieniach rwd.

 

 

 

 

  1. Wyłącz RWD – jeśli uznamy iż RWD jest nam to zbędne, bądź na obecną chwilę zupełnie niepotrzebne, to możemy tą opcje z powodzeniem wyłączyć. Dokonamy tego w wcześniej już wymienianych ustawieniach rwd.

 

 

 

 

Pierwsza responsywna strona www

Więcej o:

RWD dla stron www

© Copyright 2017 by WebWave   |   Created by Adrian Bizewski

WebWave CMS - logo