W tej lekcji przygotujemy responsywny szablon strony internetowej. Co więcej w dzisiejszym cyfrowym świecie, gdzie dostęp do internetu odbywa się na wielu urządzeniach – od komputerów stacjonarnych, przez laptopy, tablety, aż po smartfony – posiadanie responsywnej strony internetowej jest kluczowe. Responsywność oznacza, że strona internetowa automatycznie dostosowuje się do różnych rozmiarów ekranu, zapewniając użytkownikom najlepszą możliwe obsługę i dostęp do informacji bez względu na urządzenie, z którego korzystają.
W tym kursie skupimy się na kodowaniu CSS, które jest podstawowym językiem używanym do stylizacji stron internetowych.
Czym jest responsywne projektowanie stron internetowych?
Responsywne projektowanie stron internetowych to podejście, które polega na tworzeniu stron w taki sposób, aby ich układ, obrazy i inne elementy dynamicznie dostosowywały się do rozmiaru ekranu i orientacji urządzenia, na którym są wyświetlane. Oto kilka podstawowych zasad:
- Elastyczna siatka (grid) – układ strony powinien być zaprojektowany za pomocą elastycznej siatki, która dostosowuje się do różnych rozmiarów ekranu.
- Elastyczne obrazy – obrazy powinny być skalowane i proporcjonalne do szerokości kontenera, w którym się znajdują.
- Media queries – reguły CSS, które pozwalają na stosowanie różnych stylów w zależności od szerokości, wysokości, orientacji urządzenia oraz innych cech.
Dlaczego responsywność jest ważna?
- Zwiększona dostępność – responsywne strony są bardziej dostępne dla szerszej grupy użytkowników, w tym osób korzystających z różnych urządzeń i technologii wspomagających.
- Lepsze doświadczenie użytkownika – strony, które wyglądają dobrze na wszystkich urządzeniach, zapewniają lepsze doświadczenie użytkownika.
- SEO – Google i inne wyszukiwarki preferują strony responsywne, co może poprawić ich pozycję w wynikach wyszukiwania.
Przykład gotowego responsywnego szablonu strony internetowej
Poniżej znajdziesz przykładowy kod HTML i CSS dla prostego, responsywnego szablonu strony internetowej. Ten szablon wykorzystuje Flexbox i Media Queries, aby dostosować układ strony do różnych rozmiarów ekranu.
HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsywny Szablon</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Moja Strona</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">O nas</a></li>
<li><a href="#">Usługi</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Witamy!</h2>
<p>To jest responsywny szablon strony internetowej.</p>
</section>
<aside>
<h2>Aktualności</h2>
<p>Najświeższe wiadomości z naszej firmy.</p>
</aside>
</main>
<footer>
<p>© 2024 Moja Strona. Wszelkie prawa zastrzeżone.</p>
</footer>
</body>
</html>
CSS (styles.css)
/* Reset stylów domyślnych */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
header {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
header nav ul {
list-style: none;
display: flex;
justify-content: center;
}
header nav ul li {
margin: 0 1rem;
}
header nav ul li a {
color: #fff;
text-decoration: none;
}
main {
display: flex;
flex-direction: column;
padding: 1rem;
}
main section, main aside {
padding: 1rem;
margin: 0.5rem 0;
background: #f4f4f4;
}
/* Styl dla urządzeń o szerokości powyżej 768px */
@media (min-width: 768px) {
main {
flex-direction: row;
}
main section, main aside {
flex: 1;
margin: 0.5rem;
}
}
footer {
text-align: center;
padding: 1rem;
background: #333;
color: #fff;
}
Wyjaśnienie kodu powyższego szablonu
- Reset stylów domyślnych – stawia marginesy, paddingi i box-sizing dla wszystkich elementów na stronie.
- Stylizacja nagłówka – ustawia tło, kolor tekstu i wyrównanie dla elementu
header
. - Stylizacja nawigacji – tworzy poziome menu nawigacyjne z listą elementów.
- Układ główny – ustawia flexbox dla głównej zawartości strony i tworzy kolumnowy układ dla małych ekranów oraz rządowy dla większych ekranów (powyżej 768px).
- Stylizacja stopki – ustawia tło, kolor tekstu i wyrównanie dla elementu
footer
.
Ten prosty szablon pokazuje podstawowe techniki responsywnego projektowania stron internetowych za pomocą CSS. Możesz go rozbudować i dostosować do swoich potrzeb, dodając więcej elementów i stylów. W kolejnej lekcji zajmiemy się rozbudową strony internetowej o nowe elementy.
Responsywny szablon strony internetowej – podsumowanie
Responsywne projektowanie stron internetowych to kluczowa umiejętność dla każdego twórcy stron internetowych. Dzięki użyciu CSS, Flexboxa, Grida i Media Queries możemy tworzyć strony, które wyglądają i działają świetnie na każdym urządzeniu. Mam nadzieję, że ten kurs pomoże Ci zrozumieć podstawy responsywnego projektowania i zainspiruje Cię do tworzenia własnych, responsywnych stron internetowych.
Mając już opracowane formatowanie strony efekt naszych prac możemy podejrzeć w oknie przeglądarki. Na kolejnych lekcjach dowiesz się m.in. jak wybrać domenę i serwer oraz opublikować stronę w Internecie.