Tworzenie strony "Responsywnej" w WYSIWYG Web Builder

Wraz ze wzrostem popularności urządzeń mobilnych i przeglądania internetu w smartfonach i tabletach niezbędnym wymogiem staje się tworzenie stron internetowych, które są idealnie dopasowane do potrzeb użytkowników. Wcześniej trzeba było tworzyć różne wersje strony internetowej i korzystania ze skryptów w celu przekierowania użytkownika do mobilnej wersji strony. WYSIWYG Web Builder 10+ wprowadzono "Responsive Web Design", która pozwala na tworzenie pojedynczej strony HTML zawierającej różne warianty układu, każda zoptymalizowana dla określonych szerokościach ekranu urządzenia. Twoja strona będzie dynamicznie dostosowywać się do wielkość ekranu urządzenia użytkownika odwiedzającego stronę i wyświetlać układ najbardziej odpowiedni do jego urządzenia  z użyciem zapytań o media w CSS3. Te różne warianty nazwiemy "punktami przerwania".

Punkt przerwania jest oddzielony 'view' strony w WYSIWYG Web Builder. Strona może mieć wiele punktów przerwań, każdy zoptymalizowany pod kątem konkretnej szerokości ekranu. Na przykład układ może być przystosowany do standardowego pulpitu układu, dla tabletu (1024 px) i układ dla telefonów komórkowych (320 px).
Tworzenie Responsywnej strony internetowej w Web Builder WYSIWYG
Krok 1
Jako punkt wyjścia użyjemy standardowego szablonu z zasobów programu.
Kliknij: File-> 'Nowy z szablonu'  i z grupy Default wybierz 'WWB Template 10'.
W kilku krokach postaramy się utworzyć mobilną wersję dla tej strony z "punktem przerwania" na 320 pikseli, będzie to szerokość dla telefonów komórkowych.
Poszczególne warianty (punkty przerwania) ogólnie zawierają tę samą zawartość (tekst, obrazy itp), można zmieniać położenie i rozmiar obiektów dla każdego przerwania. Można również dodać unikalne treści dla poszczególnych szerokości ekranu, np. można ukryć obiekty dla mniejszych wyświetlaczy, a wyświetlać je w pozostałych "punktach przerwania"..
Aby przełączać się między "punktami przerwania" kliknij rozwijane menu "punktów przerwań" i wybierz żądaną "rozdzielczość" . Aby powrócić do układu domyślnego, wybierz "Default".
Ważne informacje o Responsive Web Design

Obiekty mogą mieć różną wielkość, położenie i stan widoczności w różnych "punktach przerwania". Dla niektórych obiektów jest również możliwość zmiany koloru, czcionki i niektórych innych właściwości w poszczególnych rozdzielczościach. Wszystkie obiekty możliwe do zastosowania w trybie responsywnym (zgodne) mają to opisane w pliku pomocy.

Choć obiekty mogą mieć różne rozmiary w "punktach przerwania" istnieje kilka wyjątków. Na przykład, kształty i inne narzędzia rysunku będą miały ten sam rozmiar w wszystkich punkty przerwania. Wynika to z tego że tylko jeden obraz zostanie opublikowany (wygenerowany) i jeśli zmienisz rozmiar tego obrazu w jednym przerwaniu wtedy będzie zniekształcony w innym. Ale można korzystać z wielu kształtów, po jednym dla każdego przerwania i ukryć te, które nie są używane w innych.
Należy jednak pamiętać, że w przypadku wybrania opcji "Opublikuj jako CSS3" we właściwościach kształtu, taki kształt będzie reagował zgodnie z oczekiwaniami bo tak naprawdę nie istnieje a jest tworzony na bieżąco przez CSS3 według tego co jest opisane dla kazdego  "punku przerwania" w skrypcie!. W przypadku skomplikowanych kształtów może być że nie uda się tego kształtu wygenerować w css przez daną przeglądarkę (będzie tylko prostokąt zamiast kształtu).
Jeśli chcesz/musisz użyć tekstu w opcji zgodności w wielu przerwaniachi  (opcja zgodnosci jest inna niż "Default) musisz rozważyć użycie  oddzielnego obiektu tekstowego dla każdego przerwania, dzięki czemu może być on zoptymalizowany dla tej konkretnej szerokości.

Niektóre obiekty mogą być składnikiem tylko jednej warstwy (np.formularz, Karuzela, Tabele, Akordeon, Dialog). Więc jeśli przeniesiesz obiekt do innej warstwy w innym przerwaniu przestanie on być automatycznie częścią tej samej warstwie w innych przerwaniach!

Domyślne ustawienia są takie że jeśli dodasz nowy obiekt do "punktu przerwania" to będzie początkowo ukryty we wszystkich innych "punktach przerwania". Można użyć Menedżera obiektów, aby włączyć jego widoczność w innych punktach.
To czy nowo dodany obiekt do punku przerwania będzie widoczny w innych punktach możesz ustawić w Narzędzia-> Opcje-> General-> "Ukryj nowe obiekty na inne punkty przerwania" .
W przypadku usunięcia obiektu z "punktu przerwania" zostanie on usunięty również ze wszystkich innych przerwań. Jeśli chcesz tylko ukryć obiekt to możesz użyć Menedżera obiektów odznaczając opcję "Widoczny" obok danego obiektu w konkretnym "punkcie przerwania".

Można testować punkty przerwania w przeglądarkach na urządzeniach stacjonarnych zmieniając rozmiar okna przeglądarki w celu ich uaktywniania.
Niektóre przeglądarki mają również dedykowane narzędzia do testowania responsywnych stron internetowych,. na przykład, Firefox (włączenie/wyłączenie kombinacją na klawiaturze CTRL+CTRL+M). Zapoznaj się z dokumentacją przeglądarki aby uzyskać więcej informacji na ten temat.

W przeglądarkach, które nie obsługują zapytania "media queries CSS3", zostanie wyświetlony domyślny układ (Default).

Krok 2
Najpierw upewnij się, że format wyjściowy całego tekstu jest ustawiony na "Default" domyślnie. W przeciwnym wypadku obiekty tekstowe nie będą mogły mieć różnych rozmiarów w różnych "punktach przerwania"!

Krok 3
Dodajemy "punkt przerwania" (breakpoint) wybierając Menadżera punktów przerwań i dodajemy punkt przerwania o maksymalnej szerokości 320.
Kliknij przycisk OK, aby potwierdzić  ustawienia i ponownie OK, aby zamknąć Zarządzanie Breakpoints.
Krok 4
Jeśli przeanalizujesz dokładniej budowę szablonu to zauważysz, że duży kształt został użyty do umieszczenia w nim  4 nagłówków. Ważne jest, aby pamiętać, że kształty mają taką samą wielkość w "punktach przerwania" (nie zawsze o czym pisano powyżej). Więc jeśli rozmiar kształtu (Shapes) w jednym przerwaniu ma jakieś wymiary  to będzie miał takie same w pozostałych! Dlatego w tym układzie posłużymy się kopią tego kształtu, dzięki czemu możemy mu ustawić inne rozmiary ,a nawet całkiem inne właściwosci w tym przypadku bez wpływu na układ na innych 'przerwaniach".
.
Wykonaj kopię "Shape5". Następnie za pomocą Menedżera obiektów ukryj "Shape5 ', bo już nie trzeba go w tym przerwaniu (320px).
Teraz możemy zmienić jego rozmiar,
Teraz na kształt nałożymy obiekty tekstowe, dostosowując układ dla telefonów komórkowych.
Przejdź do przerwania wybierając '320px' w menu '' punktów przerwań.
Zobaczysz teraz stronę dla rozdzielczości 320 jako dokładną kopię układu domyślnego (Default). Zauważ też, że tytuł na zakładce w obszarze roboczym zmienił się w celu wskazując na jakim "punkcie przerwania" jesteśmy.
Następnym krokiem będzie doprowadzenie do tego aby wszystkie obiekty zmieściły się w obszarze o szerokości 320 pikseli.
Krok 5
Analizując układ obiektów (w 320px) możesz również zauważyć, że w menu CSS jest trochę za szerokie i nie mieści się w docelowej szerokości ekranu, więc użyjemy kopii tego  menu ale w innej konfiguracji dla tego przerwania.
Wykonaj kopię "CssMenu1". Następnie za pomocą Menedżera obiektów ukryj "CssMenu1 ', bo nie będzie potrzebne  w tym przerwaniu.
Zmień tryb Układu nowego menu na "pionowo" i ustaw rozmiar przycisku na 'Stretch'
Krok 6
Na koniec zmieniamy rozmiary innych obiektów. Obiekty tekstowe,zwykłe obrazki i warstwy można zmieniać bez wpływu na inne punkty przerwania, więc nie musimy uciekać się do użycia ich kopii. Ostateczny układ może wyglądać następująco:
Użyj podglądu, aby zobaczyć wynik w przeglądarce. Zmieniaj rozmiar okna przeglądarki, aż osiągniesz punkt przerwania  320 pikseli.
Porady:
• Ustawiając format wyjściowy wszystkich prostokątnych kształtów na "Opublikuj jako CSS3"(Własciwości>Publish),sprawi, że kształty stana sie responsywne i nie trzeba będzie używać ich przekształconych kopii.
• Ustaw format wyjściowy wszystkich obiektów tekstowych na 'default' (w przeciwnym razie będą mieć stały rozmiar).
• Można użyć kombinacji klawiszy Shift + Ctrl + R, aby pokazać wszystkie nie-responsywne obiekty.
• Jeśli chcesz powielić obiekt, aby nadac kopii inne właściwości w innym przerwaniu to można go szybko skopiować i wkleić oraz ukryć oryginalny obiekt używając samego menu kontekstowego obiektu.
• Zalecamy zapoznanie się z takż Responsive Web Design  FAQ!
Tutaj można zobaczyć demo:
http://www.wysiwygwebbuilder.com/support/rwd/
Pobierz projekt demo:
http://www.wysiwygwebbuilder.com/support/rwd/rwd.zip
Podobne ćwiczenia:
Wprowadzenie do Responsive Web Design - Podstawy
Tworzenie strony na bazie z elastycznej warstwy pływające
Komórka Web Design w WYSIWYG Web Builder
Responsive Web Design FAQ (polecamy zajrzeć!)
Also make sure you read the Responsive Web Design FAQ!
na podstawie : http://www.wysiwygwebbuilder.com/responsivewebdesign.html

Można na przykład przyjąć założenia co do rozdzielczości ekranu:
• 320 px - Orientacja ekranu Pionowa  telefon/smartfon
• 480 px - Orientacja ekranu Pozioma  telefon/smartfon

• 768 px - Orientacja ekranu Pionowa tablet
• 1024 px - Orientacja ekranu Pionowa tablet / netbook

• 1280 px i większe urządzenia stacjonarne typu Desktop.

Oczywiście można zdefiniować własne szerokości lub ustanowić jeszcze więcej  "punktów przerwań" jeśli zechcesz (max 25), chociaż zwykle potrzebnych będzie nie więcej niż 3.
Aby dodać lub edytować "Punkty przerwania " użyj "Zarządzaj punktami przerwania", opcja dostępna z różnych miejsc w programie np. Menu->Strona (rys.1a), lub z paska "breakpoint" u dołu ekranu (rys.1b), lub w prawym górnym rogu okna programu (rys1c)
rys.1a
rys.1b
rys.1c









Wyjście
---Home------Download------Zakup------Poradniki Online------Szablony------Wsparcie------Forum------Rozszerzenia------Manual------Rózne---
Copyright © 2017