Realizowanie widoków strony internetowej z reguły odbywa się na podstawie zaprojektowanych makiet. Do projektowania wyglądu strony dedykowane są specjalistyczne narzędzia, jednak na potrzeby wykonania najprostszej treningowej strony www wystarczy ogólna wizualizacja, którą prezentuję poniżej.
Makiety
Makiety strony zostały przygotowane z uwzględnieniem trzech popularnych rodzajów urządzeń, umownie zwanych telefonami, tabletami oraz komputerami. Piszę „umownie”, ponieważ nie raz zdarza się, że rozdzielczość ekranu tabletu jest tak wysoka, że korzysta on z widoku dedykowanego desktopom itp.
Pełne makiety można znaleźć w repozytorium projektu: https://github.com/devolajf/first-html-css-site/tree/master/makiety
Zdjęcia wykorzystane na stronie (pochodzą z serwisu pexels.com) również są zawarte w repozytorium projektu: https://github.com/devolajf/first-html-css-site/tree/master/assets.
Telefony:
Tablety:
Komputery:
Jak widać powyżej, układ różni się obecnością bocznego paska dla najwyższych rozdzielczości (dla niższych ta sekcja znajduje się na dole strony) oraz zmianami w stylowaniu nagłówka.
Treści
Treści wybrane przeze mnie są zupełnie przykładowe i nie mają wpływu na realizację. Akapity wypełnione zostały poprzez wygenerowany tekst Lorem Ipsum, natomiast reszta treści to moje skojarzenia związane z menu barów mlecznych. Zatem nie ma znaczenia jakie treści znajdą się na Twojej stronie 🙂