Witam w kolejnej części kursu w którym budujemy prostą stronę internetową. Poniżej zamieściłam linki do do poprzednich części kursu warto do nich zajrzeć przed przejściem do dalszej części.
- Budujemy prostą stronę internetową cz. 1
- Budujemy prostą stronę internetową cz. 2
- Struktura strony w HTML5
W tej części zajmiemy się podziałem strony na odpowiednie sekcje oraz budową jednej z nich czyli nagłówka. Zastanawiacie się dlaczego podzieliłam stronę na sekcje? Odpowiedz jest prosta – w momencie kiedy strona jest w taki sposób zbudowana w bardzo łatwy sposób mogę zmieniać ich kolejność.
Dodatkowo taka struktura umożliwia personalizowanie każdej sekcji z osobna.?
Dzielenie na sekcje
Poniżej znajduje się kod w którym podzieliłam stronę na sekcje. Chwilowo są one praktycznie puste – zawierają one jedynie krótki opis.
<body>
<header class="top">
nagłówek
</header>
<section id="word">
zawartość sekcji word
</section>
<section id="us">
zawartość sekcji us
</section>
<section id="technology">
zawartość sekcji technology
</section>
<section id="">
zawartość sekcji design
</section>
<footer>
Stopka
</footer>
</body>Każda z tych sekcji symbolizuje fragment budowanej strony. Powyżej zamieściłam link do opisu struktury strony w HTML5 może on okazać się pomocny. W każdej z tych sekcji będziemy umieszczać kolejne elementy.
Dodanie nowego fontu do strony
Font (czcionka – wiem to niewłaściwe określenie będące wynikiem złego tłumaczenia) z którego skorzystam na stronie to Source Sans Pro jest on dostępny na stronie Google Fonts.
Instalacja będzie też bardzo prosta:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700&subset=latin-ext');
body{
font-family: 'Source Sans Pro', sans-serif;
font-size:18px;
}Powyższy kod dodaje oczywiście w pliku style.css na samej górze. Nieco więcej o Google Fonts dowiecie się z innego WPISU na jego temat.
Budowa nagłówka
W nagłówku czyli w sekcji <header> może znajdować się wiele różnych elementów, ja ograniczyłam się w projekcie tylko obrazka i menu. Grafikę postanowiłam wstawić w tło dlatego nie zobaczycie jej na razie w poniższym kodzie:
<header class="top">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu"
aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="topmenu" style="">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#word">word</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#us">us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#technology">technology</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#design">design</a>
</li>
</ul>
</div>
</div>
</nav>
</header>Jak wspomniałam przy budowie tej strony korzystam z Bootstrap 4 dlatego większość klas w kodzie będzie miała swoje domyśle ustawiania. Sam Bootstrap nam jednak strony nie zbuduje pierwszym niestandardowym elementem będzie więc <header class=”top”>.
Napisałam dla tego elementu style:
.top{
background: url(http://aurainweb.pl/wp-content/uploads/2018/10/baner.jpg);
background-position: center;
background-size: cover;
height: 30%;
min-height: 400px;
position:relative;
width:100%;
}Jak widać w tle ustawiłam grafikę baner.jpg (plik jest do pobrania w pierwszej części kursu). Specjalnie nie będę poświęcać ułożeniu grafiki, ale możecie o tym poczytać we wpisie o obrazkach w tle. Obrazek w tle nie nada nam niestety odpowiednich wymiarów dla tej sekcji. Dlatego ustawiłam domyślną szerokość na 100% czyli na całą szerokość okna! Wysokość sekcji z kolei ma wynieść 30% przy czym nie może być mniejsza niż 400px;
Samo menu specjalnie nie różni są od innych jedyną różnica jest pojawienie się:
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#topmenu" aria-controls="topmenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
Element ten będzie bardzo istotny w momencie gdy nasza strona zostanie zwężona np. do rozmiaru tabletu. Normalne menu się wtedy schowa a przycisk zamieni się w tzw. „hamburgerowe menu”.
W tym momencie nasze menu będzie znajdowało się praktycznie na samej górze strony, w celu przesunięcia go niżej do dolnej części sekcji dodałam:
.top nav{
position:absolute;
bottom:0;
width:100%;
}A tak to będzie mniej więcej wyglądało po dodaniu CSS:
To co musieliście już zauważyć to szary kolor paska pod menu. Jest on efektem klasy .bg-dark teraz by tło było białe zmienimy ją na .bg-white. Spowoduje to niestety, że nasze odnośniki będą zlewać się z tłem. Zamieniłam również .navbar-dark na .navbar-white (taka klasa jak narzazie nie istnieje).
Następnie wprowadziłam kilka zmian
.top nav{
position:absolute;
bottom:0;
width:100%;
border-bottom: 1px solid #ccc;
padding: 0;
}
.top nav.navbar-white li{
padding: 0 15px;
}
.top nav.navbar-white li:first-of-type{
padding: 0 0px;
}
.top nav.navbar-white li a{
color: #333;
border-bottom: 2px solid transparent;
padding: 15px;
}
.top nav.navbar-white li a:hover{
border-bottom: 2px solid red;
}To oczywiście nie koniec.