- Barwa i kolor
- Cyfrowa ciemnia
- Ćwiczenia fotograficzne
- Czerń i biel
- Filmowanie aparatem
- Fotograf - ZUS i podatki
- Fotograf i prawo
- Fotograficzne ABC
- Fotografia aktu
- Fotografia od A do Z
- Fotografia krajobrazu
- Fotografia produktów
- Fotografia uliczna - street phofo
- Fotograficzne inspiracje
- Fotografowanie architektury
- Fotografowanie ruchu
- Fotografowanie zwierząt
- Kadrowanie
- Kompozycja
- Leksykon fotografów
- Najczęściej popełniane błędy
- Ostrość i nieostrość
- Perspektywa
- Portret
- Przygotowanie prezentacji zdjęć
- Studio fotograficzne dla początkujących
- Światło i ekspozycja
- Zarabiaj na fotografii
Dołącz do nas
Partnerzy
Wspaniałe Portfolio z WebWave, cz. 3 - responsywna strona internetowa bez kodowania
10 października 2017, 16:30Witaj 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
- Wspaniałe Portfolio z WebWave, cz. 1 - sposoby przedstawienia zdjęć i animacje
- Wspaniałe Portfolio z WebWave, cz. 2 - funkcje przeznaczone specjalnie dla fotografów
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.
Sprawdź inne artykuły z kategorii: Poradniki: Wspaniałe Portfolio z WebWave
- Wspaniałe portfolio z WebWave, cz. 5 - jak zarabiać na stronach internetowych
- Wspaniałe Portfolio z WebWave, cz. 4 - pozycjonowanie strony internetowej
- Wspaniałe Portfolio z WebWave, cz. 2 - funkcje przeznaczone specjalnie dla fotografów
- Wspaniałe Portfolio z WebWave, cz. 1 - sposoby przedstawienia zdjęć i animacje
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
- Strona 1
- Strona 2
Najczęściej czytane dzisiaj
Najczęściej czytane w tygodniu
- Fotografie z Teleskopu Hubble’a pokazują, jak trudno interpretować zdjęcia kosmosu
- Obiektyw Viltrox AF 27 mm f/1.2 Pro będzie teraz dostępny dla Sony i Nikon APS-C
- Użytkownicy TikToka mogą rozszerzać swoje zdjęcia z pomocą sztucznej inteligencji
- Sztuczna inteligencja może zdiagnozować autyzm na podstawie zdjęć oczu
- Pierwsza fotografia nowego gatunku
- Panasonic dodało wyjście wideo RAW do modelu G9 II
- Dzień na Marsie kamerami łazika curiosity
- Czy Canon 6D Mark II został wycofany w Japonii?
- Lexar zaprezentował pierwsze karty CFe 4.0 do aparatów Sony
Najczęściej czytane w roku
- Kosmiczny Teleskop Jamesa Webba i nigdy wcześniej nie widziane oblicze Jowisza
- Kamera ze sztuczną inteligencją przekształca zwykłe zdjęcia w fantazyjne obrazy
- FujiFilm naprawia błędnie działający firmware obiektywu FujiFilm XF 16-55 mm f/2.8
- Modele czy manekiny? Profesjonalna fotografia produktowa odzieży dla e-commerce
- Przypadkowe odkrycie - schowek z 2000 aparatami i obiektywami
- Nowe zdjęcia pokazują, jak ogromny jest największy wulkan w Układzie Słonecznym
- Odszedł edytor zdjęć AP, który podjął decyzję o publikacji zdjęcia z ataku napalmem w Wietnamie
- Telefony do nagrywania dobrych filmów i robienia świetnych zdjęć
- Mocna reklama ostrzega rodziców przed udostępnianiem zdjęć swoich dzieci w internecie
- Niesamowite zdjęcie Księżyca na tle największego teleskopu na świecie