Pierwsza strona w HTML i CSS, część 3: makiety i opis

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 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *