#16. Layout strony

Szkic prostego układu

Poniżej dodaję prosty przykład layoutu. Składa się on z następujących składowych:
  • górnej belki – zawiera ona zazwyczaj logo lub tytuł witryny,
  • nawigacji – menu strony z podziałem na podstrony,
  • głównego kontenera – znajduję się w nim cała treść witryny,
  • stopki – zawsze określam to na tak zwaną granice strony, tak jak znak informujący o kończącej się miejscowości😉
Jest to jeden z wielu układów stron. Dość popularny i prosty w budowaniu. Często spotykany na blogach, stron firmowych czy wizytówek. A oto przykład:
 

zen-hamilton-fqdkl

zen-hamilton-fqdkl by danielminschinski

Nawigacja – na lewo patrz!

Powyżej stworzyliśmy klocki w HTML-u. Czas je trochę poukładać. Można umieścić menu z lewej strony. Metody na to są różne. Jednak najprostszą w tym przypadku będzie wykorzystanie float: left; dla elementu po lewej stronie wraz z ustawieniem stałej szerokości tego elementu.

Natomiast obszar treści po prawej stronie będzie wypełniał na szerokość przestrzeń, jednak należy mu wtedy nadać też lewy margines o szerokości lewego elementu, aby wpasował się w pozostałą przestrzeń.

Dodatkowa informacja – oba te elementy HTML powinny być zagnieżdżone w dodatkowym div-ie, aby pływający element nie najeżdżał na nagłówek lub stopkę. 

Spójrz na poniższy przykład

mystifying-heyrovsky-bqbum

mystifying-heyrovsky-bqbum by danielminschinski

Wyśrodkowanie i zwężanie kolumny

Niewygodnie czyta się teksty na całą szerokość strony. Aby rozwiązać problem, wyśrodkujemy i zwęzimy zawartość strony. Przygotowujemy stronę dla użytkowników, więc nie chcemy ich męczyć👍
Poniżej dodaję zadanie dla Ciebie – Powodzenia❕😉
 

Ćwiczenie

  1. Uruchom codesandbox.
  2. Stwórz nowy projekt oraz szkielet strony.
  3. W ciele dokumentu dodaj diva z klasą “header” z zawartością tekstową “Header“.
  4. Pod nim dodaj kolejnego diva z klasą “container”. W nim dodaj diva z klasą “nav” z zawartością tekstową “Navigator”.
  5. Następnie pod nawigacją w kontenerze dodaj kolejnego diva z klasą “content”. W nim umieść nagłówek h1 z zawartością “Content”. Pod nim w divie “content” dodaj kolejnego diva z klasą “text”. Dodaj przykładowy akapit. Pozamykaj wszystkie powyższe divy.
  6. Równorzędnie pod divem “container” dodaj kolejnego diva z klasą “footer” z zawartością tekstową “footer”. Zamknij diva.
  7. W stylach utwórz regułę do znacznika div z następującymi właściwościami: border: 3px solid, text-align: center, padding: 3px, box-sizing: border-box.
  8. Do klasy “header” należy ustawić kolor obramowania: border-color: #2ccc2c
  9. Klasę “container” należy wzbogacić o właściwości: padding: 5px, width: 600px oraz margin: 0 auto;
  10. Stwórz kolejną regułę, tym razem do klasy nawigacji, a do niej dodaj właściwości: border-color: #9a2c9a, height: 400px, width: 120px oraz float:left
  11. Do contentu stwórz regułę z następującymi właściwościami: border-color: #ee8888, min-height: 600px, margin-left: 120px.
  12. Klasę “text” wzbogać we właściwości: border: none, padding: 0 20px oraz text-align: justify.
  13. Na koniec został oczywiście footer. Nadaj mu kolor obramowania na: #dd98af;
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

weathered-bird-ccs13

weathered-bird-ccs13 by danielminschinski

Do stałych czytelników – zauważyliście zmiany na moim blogu❓😉 Troszkę szatę zmieniłem… Posłuchałem kilka osób i zmieniłem na bardziej “nowoczesną”😃 Mile widziane opinie w komentarzach😉🔽🔽

Layout strony wyznacza nam elementy strony. Przyjęły się pewne schematy. Ale myślę, że z biegiem czasu zmieniać się będzie trend…

W kolejnym poście rozszerzymy o kolejne możliwości układania schematu strony💪

Do kolejnego posta✌

🔽🔽

Newsletter, Facebook

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA