Książki100 najważniejszych zdjęć świataPytania i odpowiedziCytaty dla fotografaNajczęściej wyszukiwane

Dołącz do nas

Google+

Daj się ocenić i oceniaj



  • Autor:
    Komentarzy: 5


  • Autor:
    Komentarzy: 4


  • Autor:
    Komentarzy: 8


  • Autor:
    Komentarzy: 13


  • Autor:
    Komentarzy: 9


  • Autor:
    Komentarzy: 15


  • Autor:
    Komentarzy: 5


  • Autor:
    Komentarzy: 44


  • Autor:
    Komentarzy: 5


  • Autor:
    Komentarzy: 8


  • Autor:
    Komentarzy: 9


  • Autor:
    Komentarzy: 3


  • Autor:
    Komentarzy: 16


  • Autor:
    Komentarzy: 16


  • Autor:
    Komentarzy: 20


Wspaniałe Portfolio z WebWave, cz. 3 - responsywna strona internetowa bez kodowania

Wspaniałe Portfolio z WebWave, cz. 3 - responsywna strona internetowa bez kodowania

Witaj w trzeciej części poradnika, dzięki któremu stworzysz samodzielnie profesjonalne portfolio fotografa nie pisząc choćby jednej linijki kodu. WebWave to aplikacja do tworzenia stron internetowych inspirowana Photoshopem, która zakoduje stronę za Ciebie. Wystarczy kliknąć w przycisk ‘publikuj’, a Twoja strona po chwili pojawi się w Internecie. W poprzednich częściach skupiliśmy się na sposobach przedstawienia zdjęć na Twojej stronie www, a także na funkcjach przeznaczonych specjalnie dla fotografów. Dzisiaj zajmiemy się stworzeniem strony responsywnej, czyli dostosowanej do przeglądania na wszystkich urządzeniach. Zapraszamy!


Strona 1


Co to jest responsywna strona internetowa?

Strona responsywna określana jest także mianem RWD (ang. Responsive Web Design). RWD oznacza projektowanie jednej strony w taki sposób, by poprawnie wyświetlała się na dowolnych rozdzielczościach, niezależnie czy jest to tablet, telefon czy jeszcze inne urządzenie. Dawniej panował trend tworzenia tzw. stron mobilnych, czyli oddzielnych wersji strony www przygotowanych tylko na komórki. RWD jest rozwiązaniem znacznie lepszym, ponieważ responsywna strona internetowa wyświetla się poprawnie na każdym urządzeniu, dokładnie pod tym samym adresem.

STWÓRZ SWOJE PORTFILIO TERAZ

Aktywacja trybów RWD

Aby zacząć tworzyć swoją pierwszą responsywną stronę internetową w WebWave należy zacząć od przygotowania witryny dostosowanej do monitora komputera (desktop). Po przeczytaniu poprzednich dwóch części poradnika, do których znajdziesz linki na początku tego tekstu, nie powinieneś mieć z tym żadnego problemu. Po stworzeniu strony desktopowej należy uruchomić edycję widoków RWD, co robimy po najechaniu myszką na ikony ekranów w górnym pasku ustawień WebWave i wybraniu opcji ‘Włącz’. Po kliknięciu w ten przycisk pojawi się krótka instrukcja wraz z opisem i wyjaśnieniami istoty rzeczy. Po zapoznaniu się z nią możesz przełączać się między poszczególnymi czterema widokami strony: ekranu komputera (desktop), tableta, telefonu poziomo i telefonu pionowo. Dostosowanie wyglądu strony dla wszystkich widoków sprawi, że będzie się ona wyświetlać tak jak chcesz na każdym urządzeniu z dostępem do Internetu.

Edycja wyglądu strony w trybach RWD

Tworzenie responsywnej strony internetowej w WebWave opiera się w głównej mierze o dostosowanie wcześniej już wykonanego widoku desktop do pozostałych o mniejszej szerokości. Dlaczego? Ponieważ wszystko co pozostaje poza szerokością strony na kolejnych widokach edycji może zostać na niektórych urządzeniach ucięte lub niezauważone.

Przełącz się teraz na widok tabletu, klikając w jego ikonkę na górnym pasku ustawień. Jak widzisz Twoja strona wymaga teraz abyś dostosował każdy z elementów do nowej szerokości strony. Jej obecny wygląd to po prostu ‘przycięta’ strona z wersji desktopowej, którą miałeś okazję wcześniej stworzyć. Dostosowywanie nowego widoku jest znacznie łatwiejsze i szybsze niż wygląda na pierwszy rzut oka. W większości przypadków wystarczy jedynie zmniejszyć elementy tekstowe i przesunąć obrazki w odpowiednie miejsce.

Jeżeli dostosowałeś już wszystkie elementy dla tabletu, przejdź teraz do kolejnego widoku edycji i dostosuj stronę na dokładnie takiej samej zasadzie. Po przebrnięciu przez wszystkie widoki RWD Twoja responsywna strona internetowa będzie gotowa. Wejdź w ustawienia RWD klikając w ikonkę kół zębatych na panelu przełączania widoków na górnym pasku i zaznacz wszystkie widoki jako opublikowane. Zapisz zmiany, opublikuj stronę i gotowe!

Ważne: każdy element na Twojej stronie możesz dostosowywać oddzielnie na każdym z widoków edycji. Oznacza to, że możesz zmieniać ich rozmiary i położenie nie martwiąc się o to, że coś ‘przestawi się’ w innych widokach. Wyjątkiem od tej reguły jest treść, dlatego jeśli edytujesz tekst na dowolnym widoku edycji to zostanie on zmieniony na pozostałych. Dzięki temu np. nie musisz cztery razy zmieniać numeru telefonu na podstronie z kontaktem. Pamiętanie o tej zasadzie jest bardzo ważne, gdyż w przypadku złego komponowania się tekstu na jednym z widoków nie dodawaj nigdy dodatkowych enterów czy spacji. W innym razie możesz być pewny, że pojawią się one na pozostałych widokach i zepsują cały układ Twojej strony. Z zasady wystarczy zmienić rozmiar elementu tekstowego czy czcionki i wszystko zaczyna wyglądać poprawnie.

Widoczność elementów na różnych widokach edycji

Często pytacie czy korzystanie ze wszystkich dostępnych elementów na każdym z widoku edycji jest niezbędne? Odpowiedź brzmi: nie. Widoczność tych elementów może być różna w trybach RWD, a wszystko zależy od Twoich potrzeb i od projektu strony internetowej. Zasada działania zarządzaniem widocznością elementów jest banalnie prosta i tak naprawdę sprowadza się tylko do kliknięcia odpowiedniej ikony.

Kliknij w wybrany element i spójrz na listę warstw. Na lewo od nazwy wybranego elementu znajduje się ikona monitora. Najedź na nią myszką, a po chwili pojawią się ikony wszystkich czterech trybów RWD, na których widnieje zielona miniatura oka. Wystarczy kliknąć w wybrany element aby wyłączyć jego widoczność na danym trybie RWD (zniknie zielone oko). Dzięki temu rozwiązaniu możesz w pełni kontrolować to co ma się znajdować na poszczególnych widokach Twojej strony internetowej. Znajomość tego rozwiązania jest potrzebna żeby wykonać kolejny niezbędny element na Twojej responsywnej stronie internetowej.

Hamburger menu

Na urządzeniach mobilnych, z powodu ograniczonej przestrzeni wyświetlania, w większości przypadków nie mieści się tradycyjne menu. Dlatego aby zaimplementować odpowiednią nawigację dla Twojej strony internetowej musisz użyć menu typu hamburger lub mówiąc inaczej ‘menu rozwijanego’. Stworzenie hamburger menu w WebWave, aplikacji do tworzenia stron www inspirowanej Photoshopem, jest bardzo łatwe. Na początek wyłącz widoczność standardowego menu na widokach RWD telefonów komórkowych. Teraz musisz dodać nowe menu wyłączając jego widoczność na widokach niemobilnych i odpowiednio je dostosować. Klikając prawym przyciskiem myszy w menu wybierz opcję ‘Edytuj zawartość’. Następnie dodaj pusty element menu w prawym dolnym rogu okienka, które się pojawiło. Nowy element przenieś na samą górę, a pozostałe, znajdujące się pod nim, lekko przesuń w prawo (spójrz na screen). Dzięki temu każdy element, który znajduje się pod spodem i lekko na prawo, będzie wysuwał się z elementu znajdującego się powyżej.

Teraz pozostaje tylko nadać stworzonemu elementowi tło obrazkowe, które będzie ikoną menu typu hamburger. Dostosuj kolory wysuwanego menu (dokładnie w ten sam sposób jak przy standardowym menu) i Twoje rozwijane menu jest już gotowe.

Autor: Artykuł promocyjny



1 2



Oceny artykułu: 0% 0% ocen: 0

Czytaj także



Komentarze Użytkowników

Niezalogowanych Użytkowników prosimy o zalogowanie się przed dodaniem komentarza.



Nie ma jeszcze żadnych komentarzy

Komentarze są prywatnymi opiniami użytkowników portalu i w żaden sposób nie odzwierciedlają poglądów prezentowanych przez właścicieli i administratorów SwiatObrazu.pl. Redakcja nie ponosi odpowiedzialności za treść komentarzy.




Spis treści

Najnowsze fotografie

Jestem z miasta Lublin nocą -8- (.) (..) IMGP5267 IMGP7625