W tej epoce bogatej technologicznie strona internetowa jest kluczowym składnikiem przedstawienia Twojej firmy, produktów lub usług. Układ daje użytkownikom jasne wskazówki do nawigacji w witrynach i umieszcza najważniejsze elementy witryny na górze. Układ witryny zwykle zależy od wymagań użytkownika. Istnieje jednak kilka wytycznych, o których programiści pamiętają, aby uzyskać dobry układ na stronie internetowej.

W tym artykule opracowaliśmy różne możliwości zaplanowania układu strony internetowej.

Jak zaplanować układ strony internetowej

Jak opisano wcześniej, układ witryny zależy od wymagań użytkownika. Tutaj wymieniamy różne kluczowe elementy, które pomagają w tworzeniu niestandardowego układu witryny.

nagłówek

Ta sekcja jest wyświetlana na szczycie strony internetowej, a istnieje wiele sposobów ćwiczenia tego miejsca. Niewielu moderatorów przechowuje nazwę witryny lub logo w tym nagłówku, ale można również dodać suwak.

Poniższy kod odnosi się do tworzenia przykładowego nagłówka

Html

Witamy w Linuxhint

A jest tworzone z class = ”nagłówek” i

element jest zawarty w tym Div.

CSS

Powyższy kod CSS odnosi się do klasa nagłówka i dodaje do tej klasy właściwość koloru tła, wyściółki i tekstu tekstowego.

Wyjście

Dane wyjściowe pokazuje, że nagłówek został umieszczony na górze strony i zawiera niestandardowe właściwości, które zostały do ​​niej przydzielone.

Linki nawigacyjne

Po nagłówku zaleca się posiadanie paska nawigacyjnego, który kieruje odwiedzającymi na różne strony Twojej witryny. Przykładowy pasek nawigacyjny jest tworzony przy użyciu następującego kodu.

Html

Dom
Samouczki
Kategorie

W powyższym kodzie div jest tworzony, który zawiera różne tagi kotwiczne odnoszące się do różnych linków.

CSS

Powyższy kod CSS zawiera styl dla div class = ”NAV”. ".NAV ” odnosi się do głównego paska nawigacyjnego i ".NAV a " Klasa zawiera właściwości stylizacyjne dla linków paska nawigacyjnego.

Wyjście

Wyjście zawiera nagłówek i pasek nawigacyjny z trzema linkami.

Główna zawartość

Główna treść zwykle zaczyna się zaraz po pasku nawigacji. A konstrukcja głównej treści różni się w zależności od użytkownika. Różni użytkownicy preferują obszar treści jednopolowych, podczas gdy można również użyć układu wielu kolumn.

Poniższy kod odnosi się do tworzenia głównej zawartości strony strony internetowej.

Html

Html

CSS

W powyższym kodzie a div class = ”main” powstaje, który zawiera dwa dziecko Klasa Div = „Prim”.

CSS

.Prim
float: lewy;
Szerokość: 49%;
Text-Align: Center;

.Main: po
treść: "";
Wyświetl: Tabela;
oba czyste;

Kod CSS dostosowuje Float Property na lewo, szerokość jest ustawiona na 49%, a wyrównanie tekstu jest ustawione na Centrum. Ponadto, wyraźna własność jest wykonywana na ".Main: After ” zniknąć pływający efekt.

Notatka: W przypadku pojedynczej kolumny musisz odpowiednio dostosować szerokość, a jej wartość jest ustawiona „Containt fit”. Dla 3 kolumn szerokość można dostosować do 33% dla każdej kolumny i tak dalej.

Wyjście

Wyjście pokazuje, że główna zawartość ma dwie nazwy kolumny „HTML” i „CSS”. Te kolumny mogą być zasilane przez treść zgodnie z Twoim wymaganiem.

Stopka

Stopa jest kolejnym głównym elementem układu, w którym można umieścić informacje kontaktowe, linki do konta w mediach społecznościowych lub wszelkiego rodzaju informacje można umieścić na stopce. Aby utworzyć stopkę, wykorzystaliśmy następujący kod.

Html

Informacje o stopie

Powyższy kod tworzy div class = ”stopka” To byłoby uznane za stopkę strony.

CSS

.stopka
kolor tła: pomarańczowy;
Wyściółka: 20px;
Text-Align: Center;

Część tła, wyściółka i właściwości tekstowe są stosowane na class = ”stopka”.

Wyjście

Powyższy obraz pokazuje, że stopka została pomyślnie dodana. Ponadto można dodać style i szczegółowe informacje, aby uzyskać lepszą estetykę strony.

Wniosek

Układ strony obejmuje kilka głównych składników, takich jak nagłówek, sekcja nawigacyjna, główny korpus i stopka. Komponenty te służą jako kluczowy gracz w planowaniu układu witryny i interfejsu lub aranżacji tych komponentów, zależy od wymagań użytkownika. Ten post zawierał szczegółowy przewodnik na temat zaplanowania układu strony internetowej. Aby lepiej zrozumieć, wykazaliśmy użycie wszystkich wyżej wymienionych komponentów.