Zawartość
- 01. Zacznij
- 02. Sprawdź CSS dla siatki
- 03. Zdefiniuj pozycje siatki
- 04. Użyj szablonu siatki
- 05. Zdefiniuj szablon
- 06. Połącz szablon z klasą
- 07. Zrób to responsywnie
- 08. Pracuj nad rzeczywistym układem
- 09. Połącz szablon
- 10. Dodaj kolejne obszary
- 11. Zakończ pierwszą kratkę
- 12. Dodaj białe tło
- 13. Zrób drugą siatkę
- 14. Dodaj kolumny
- 15. Udoskonal stopkę strony
- 16. Dostosuj do średniego wyglądu ekranu
- 17. Przepływ pierwszą siatkę
- 18. Przetestuj swój układ
- 19. Ulepszony projekt dla telefonów komórkowych
- 20. Sprawdź siatkę z pojedynczą kolumną
- 21. Zakończ układ
Układ strony internetowej zawsze był ograniczony, tak naprawdę nigdy nie było niczego naprawdę poświęconego ułatwianiu wyświetlania treści w sensownym formacie.
W latach 90., kiedy po raz pierwszy zapanował Internet, projektanci, którzy byli przyzwyczajeni do układania treści w siatce, odkryli, że jedynym sposobem na uzyskanie tego samego wyniku w przeglądarce jest użycie tabeli. Łączenie komórek doprowadziło do skomplikowanych układów stron internetowych, ale spowodowało to spustoszenie w dostępności i SEO. Szybko do przodu, a obecnie istnieje wiele sposobów umieszczania treści za pomocą pływaków, elastycznych pudełek i tak dalej.
CSS3 naprawdę pchnął możliwości sieci do przodu i od 2014 roku istnieje CSS Grid Layout. Obecnie przeglądarka obsługuje 75 procent, więc zbliża się czas, aby poważnie się nad tym zastanowić. Platforma Zurb Foundation 6 znalazła się na pokładzie i wykorzystuje ją do zasilania swojej sieci.
W tym samouczku skupimy się na tworzeniu funkcji w stylu magazynu, która pokaże, jak udoskonalić responsywne projektowanie witryn internetowych dla średnich i małych rozmiarów ekranu. Aby zapoznać się z innymi zasobami dotyczącymi projektowania witryn internetowych, zapoznaj się z naszymi przewodnikami po najlepszym narzędziu do tworzenia witryn i usługach hostingowych.
Pobierz pliki samouczków tutaj (i zapisz je w bezpiecznym magazynie w chmurze).
01. Zacznij
Otwórz plik „grid1.html” z folderu startowego w plikach projektu. Układ HTML do tego ma pięć znaczników DIV, nazwanych po prostu item1–5 jako klasy CSS. Będą to treści umieszczone w siatce. Opakowanie tego kontenera zdefiniuje siatkę, która będzie miała cztery kolumny.
div> div> item 1 / div> div> item 2 / div> div> item 3 / div> div> item 4 / div> div> item 5 / div> / div>
02. Sprawdź CSS dla siatki
Patrząc na sekcję nagłówka, możesz zobaczyć, że `` kontener '' został rozłożony jako siatka, z automatyczną wysokością dla wierszy, podczas gdy kolumny mają być ustawione na cztery, każdy ustawiony na 25% przeglądarki . Sprawdź to w przeglądarce, a zobaczysz, że do każdego elementu jest automatycznie przypisywana następna dostępna pozycja siatki.
.container {display: grid; grid-template-rows: auto; grid-template-columns: powtórz (4, 25%); }
03. Zdefiniuj pozycje siatki
Przyjrzyjmy się teraz plikowi „grid2.html”. Jest taki sam jak pierwszy plik, z wyjątkiem tego, że „item1” i „item2” mają określone pozycje. Pierwsza jest umieszczana w wierszu 1 i kończy się przed wierszem 2. Kolumna zaczyna się od 1 i kończy na 3, więc obejmuje dwie kolumny. Drugi zaczyna się od kolumny 3 i zajmuje następne dwie kolumny. Pozostałe elementy wypełniają następne dostępne miejsca na siatce.
.item1 {grid-row-start: 1; koniec wiersza siatki: 2; siatka-kolumna-początek: 1; grid-column-end: 3; } .item2 {start-wiersza-siatki: 1; koniec wiersza siatki: 2; siatka-kolumna-początek: 3; siatka-koniec kolumny: 5; }
04. Użyj szablonu siatki
Otwórz plik „grid3.html” i spójrz na treść kodu HTML. Zobaczysz, że istnieje układ z nagłówkiem, paskiem bocznym, sekcją z główną treścią i stopką. Możesz dodać więcej tekstu do treści, aby zobaczyć, co się stanie, gdy zostanie on umieszczony. Siatka użyje funkcji szablonu, aby przekształcić te sekcje w układ.
div> div> Header / div> div> Sidebar / div> div> Content / div> div> Footer / div> / div>
05. Zdefiniuj szablon
Spójrz na CSS kontenera. Jest ponownie określany jako siatka. Górny rząd będzie miał wysokość 200 pikseli, środkowy rozmiar będzie automatycznie, a ostatni rząd będzie miał wysokość 100 pikseli. Kolumny mają mieć 33 procent szerokości i automatycznie wypełniać resztę. Szablon stwierdza, że nagłówek wypełni obie kolumny. Następny wiersz będzie paskiem bocznym w pierwszej kolumnie, a zawartością w następnej. Stopka przechodzi w obie strony.
.container {display: grid; grid-template-rows: 200px auto 100px; grid-template-columns: 33% auto; grid-template-area: "nagłówek nagłówka" "zawartość paska bocznego" "stopka stopki"; }
06. Połącz szablon z klasą
Aby połączyć klasę z szablonem, przedstawiony tutaj kod definiuje to. Każdy obszar siatki ma nazwę i jest tworzone łącze. Treść nie jest tutaj pokazana, ale znajduje się w dokumencie „grid3.html”. Spójrz na to w przeglądarce, aby zobaczyć układ siatki. Ponieważ zdefiniowano dwie kolumny, szablon wymaga dwóch obszarów w każdym z cudzysłowów.
.header {grid-area: header; } .sidebar {grid-area: sidebar; } .footer {obszar-siatki: stopka; }
07. Zrób to responsywnie
Aby plik „grid3.html” był responsywny, wstawiane jest zapytanie o media, a górny wiersz jest utrzymywany na poziomie 200%, a pozostałe wiersze zostaną automatycznie dopasowane. Jest tylko jedna kolumna o pełnej szerokości, więc szablon zawiera jedno słowo w każdym odwróconym przecinku, które definiuje układ. Można je łatwo zmienić kolejnością bez zmiany kodu HTML.
@ media screen i (max-width: 699px) {.container {display: grid; grid-template-rows: 200px auto; grid-template-columns: 100%; grid-template-area: "nagłówek" "pasek boczny" "zawartość" "stopka"; }}
08. Pracuj nad rzeczywistym układem
Teraz otwórz plik „index.html” - cały kod HTML treści został już utworzony, podobnie jak niektóre elementy CSS elementów projektu. Dodaj tę siatkę do znaczników stylu w sekcji nagłówka. Spowoduje to utworzenie siatki z trzema kolumnami z szablonem dla każdej sekcji. Zwróć uwagę na kropkę dla pustych sekcji siatki.
.container1 {width: 80%; margines: 0 auto; wyświetlacz: siatka; grid-template-rows: auto; kolumny-szablon-siatki: 33,3% 33,3% auto; grid-template-area: "nagłówek nagłówka" ". standfirst standfirst" ".. article1" "focus pullquote pullquote" "article2 article2."; }
09. Połącz szablon
Podobnie jak w poprzednim kroku, łączy to nagłówek z szablonem. Nagłówek ma obejmować wszystkie trzy kolumny siatki, a następnie podstawa jest ustawiona na dwie kolumny i ma pustą kolumnę po lewej stronie. Jeśli sprawdzisz przeglądarkę, ta kolumna zostanie wypełniona, ponieważ pozostała zawartość automatycznie zapełni następne dostępne miejsce - jednak nie zrobi tego po skonfigurowaniu.
.header {grid-area: header; } .standfirst {grid-area: standfirst; }
10. Dodaj kolejne obszary
Teraz pierwszy artykuł, cytat z wyciagania i obraz główny są umieszczane w projekcie. Wyciągnij cytat i obraz znajdują się obok siebie w tym samym wierszu. Na tym etapie artykuł 2 nie został umieszczony, więc zajmuje pierwsze dostępne miejsce na siatce, które znajduje się obok pierwszej pozycji.
.article1 {grid-area: article1; } .pullquote {grid-area: pullquote; } .focus {grid-area: focus; wyrównywanie tekstu: do środka; }
11. Zakończ pierwszą kratkę
Dodanie kodu CSS drugiego artykułu umożliwia prawidłowe umieszczenie całej pierwszej siatki. Spojrzenie na to w przeglądarce pokaże, że układ działa z obrazem tła i tworzy taki układ, jaki można zobaczyć w czasopismach, w których projektant pracuje wokół dużego obrazu tła.
.article2 {grid-area: article2; odstęp między kolumnami: 65 pikseli; liczba kolumn: 2; }
12. Dodaj białe tło
Przed uruchomieniem drugiej siatki możesz się zastanawiać, dlaczego potrzebne są dwie siatki. Powodem jest to, że ta siatka będzie miała białe tło o pełnej szerokości, więc ten CSS zawinie drugą siatkę. Ma to na celu nadanie tej sekcji poczucia drugiej strony projektu.
.whitebg {dopełnienie: 100px 0; background-color: #ddd; }
13. Zrób drugą siatkę
Druga siatka jest prostsza niż pierwsza. Istnieją trzy kolumny z automatyczną wysokością w wierszach. Zawartość będzie wypełniać kolumnę, więc nie ma potrzeby definiowania obszarów szablonu. Jednak po dodaniu projektu tabletu należy przełączyć się na dwie kolumny, więc wymagane jest ponowne wlanie i nazwy będą ważne.
.container2 {width: 80%; margines: 0 auto; wyświetlacz: siatka; grid-template-rows: auto; kolumny-szablon-siatki: 33,3% 33,3% auto; grid-template-area: "img1 img2 article3"; }
14. Dodaj kolumny
Każda z klas CSS w drugiej siatce ma być połączona z odpowiednią kolumną, zgodnie z definicją w szablonie siatki. Kolor tekstu artykułu został zmieniony, aby wyróżnić się na jaśniejszym tle tej sekcji. Po ukończeniu tylko stopki projekt układu w stylu magazynu jest prawie gotowy.
.img1 {grid-area: img1; } .img2 {obszar-siatki: img2; } .article3 {grid-area: article3; kolor: # 333; }
15. Udoskonal stopkę strony
Ukończenie strony spowoduje umieszczenie na ekranie div o pełnej szerokości, który zostanie wypełniony czarnym kolorem, a tekst zostanie wyśrodkowany. Na tym kończy się wersja desktopowa projektu, ale przesuń ekran w dół poniżej szerokości 1200 pikseli i witryna zacznie się zepsuć.
.footer {background-color: # 000; kolor: # 999; wyrównywanie tekstu: do środka; wypełnienie: 50px 20px 100px; }
16. Dostosuj do średniego wyglądu ekranu
W tym miejscu wstawiane jest zapytanie o media, aby zadbać o projekt, gdy szerokość przeglądarki jest mniejsza niż 1200 pikseli. Kod kroków 17 i 18 zostanie umieszczony w nawiasach kwadratowych w miejscu komentarza. Będzie to przypadek zmiany struktury układu obu siatek.
@ media screen i (max-width: 1200px) {/ * kod tutaj * /}
17. Przepływ pierwszą siatkę
Pierwsza siatka ma teraz wypełniać całą szerokość przeglądarki tylko dwiema kolumnami zamiast trzema. Kolejność sekcji jest umieszczana w szablonie, przy czym artykuły zmieniają strony, ponieważ lepiej pasuje to do obrazu tła przy tym rozmiarze ekranu.
.container1 {width: 100%; grid-template-rows: auto; kolumny-szablon-siatki: 50% 50%; grid-template-area: "nagłówek nagłówka" "standfirst standfirst" "article1." "pullquote pullquote" "article2 focus"; } .article2 {liczba-kolumn: 1; }
18. Przetestuj swój układ
Druga siatka jest również zmieniana, aby przyjąć pełną szerokość przeglądarki i dodane dwie kolumny. Obrazy są umieszczane obok siebie w rzędzie nad tekstem, aby dokładnie pasował do wyświetlacza. Możesz przetestować ten układ w przeglądarce, zmieniając rozmiar przeglądarki poniżej 1200 pikseli.
.container2 {width: 100%; margines: 0 auto; grid-template-rows: auto; kolumny-szablon-siatki: 50% 50%; grid-template-area: "img1 img2" "article3 article3"; }
19. Ulepszony projekt dla telefonów komórkowych
Każda przeglądarka, która ma szerokość mniejszą niż 769 pikseli, otrzyma kod dodany w końcowych krokach. Wszystko, co musimy tutaj zrobić, to upewnić się, że każda z siatek ma układ z jedną kolumną, aby zawartość była poprawnie wyświetlana na mniejszej przestrzeni.
@media screen i (max-width: 768px) {/ * kod ostatnich kroków tutaj * /}
20. Sprawdź siatkę z pojedynczą kolumną
Teraz pierwsza siatka jest ustawiona na pojedynczą kolumnę stanowiącą 100% szerokości przeglądarki, a kolejność sekcji jest dodawana w obszarach szablonu. Sprawdź, jak działa pierwsza część strony na ekranach urządzeń mobilnych.
.container1 {width: 100%; grid-template-rows: auto; grid-template-columns: 100%; grid-template-area: "header" "standfirst" "article1" "pullquote" "focus" "article2"; }
21. Zakończ układ
Tutaj druga siatka jest również wypełniona pojedynczą kolumną i definiowany jest układ sekcji. Teraz zapisz gotowy projekt i wyświetl go na ekranach o różnych rozmiarach, aby zobaczyć pełne możliwości układu siatki CSS i jak łatwo było po prostu zmienić kolejność treści dla różnych szerokości.
.container2 {width: 100%; margines: 0 auto; grid-template-rows: auto; grid-template-columns: 100%; grid-template-area: "img1" "img2" "article3"; }
Ten artykuł został pierwotnie opublikowany w magazynie Web Designer poświęconym kreatywnym projektom internetowym. Kupnr 271lubSubskrybuj.
