25. Budowa podstron

> Dodaj do ulubionych

Jeste┼Ťmy ju┼╝ bardzo blisko uko┼äczenia naszej witryny. Mamy g┼é├│wne menu rozwijane w CSS, stopk─Ö oraz stron─Ö g┼é├│wn─ů. Mamy tak┼╝e ju┼╝ tre┼Ť─ç podstron, ale brakuje nam szablonu, w kt├│rym mogliby┼Ťmy te podstrony zaprezentowa─ç. Utworzymy go w tym rozdziale, a przy okazji nauczymy si─Ö niezwykle przydatnej techniki CSS o nazwie Flexbox.

Jak zwykle nasi projektanci przygotowali dla nas graficzn─ů reprezentacj─Ö tego, co mamy stworzy─ç, wi─Öc nam pozostaje tylko zastosowa─ç si─Ö do ich wytycznych i wskaz├│wek, aby prze┼éo┼╝y─ç to na kod HTML i CSS.

Sp├│jrzmy na projekt szablonu podstrony naszej witryny:

Podstrona wersja finalna

Jak wida─ç, w nag┼é├│wku ani stopce nie ma ┼╝adnych zmian. Natomiast zmieni┼éa si─Ö cz─Ö┼Ť─ç ┼Ťrodkowa, czyli ta, w kt├│rej do tej pory by┼é tylko element main.

W odr├│┼╝nieniu od strony g┼é├│wnej, struktura podstrony jest podzielona na dwie cz─Ö┼Ťci ÔÇö cz─Ö┼Ť─ç w┼éa┼Ťciw─ů po lewej i pasek boczny po prawej stronie.

Jak ju┼╝ wiemy, w┼éa┼Ťciw─ů tre┼Ť─ç g┼é├│wn─ů strony umieszczamy w elemencie main, natomiast do reprezentowania paska bocznego doskonale nadaje si─Ö element aside.

Struktura cz─Ö┼Ťci ┼Ťrodkowej

Postanowili┼Ťmy podzieli─ç cz─Ö┼Ť─ç ┼Ťrodkow─ů naszych podstron na dwie cz─Ö┼Ťci: jedna b─Ödzie reprezentowana przez element main zawieraj─ůcy tre┼Ť─ç artyku┼éu, a druga b─Ödzie reprezentowana przez element aside zawieraj─ůcy komponenty paska bocznego.

Dodatkowo ca┼éo┼Ť─ç umie┼Ťcimy w kontenerze div o identyfikatorze site-content, aby ÔÇ×spi─ů─çÔÇŁ te dwie sekcje razem i u┼éatwi─ç sobie prac─Ö z nimi. Poni┼╝ej znajduje si─Ö odpowiedni kod HTML.

<div id="site-content">
  <main>
  </main>

  <aside id="sidebar">
  </aside>
</div> <!-- End #site_content -->

Elementowi main nie nadali┼Ťmy ┼╝adnego identyfikatora, poniewa┼╝ na stronie powinien znajdowa─ç si─Ö tylko jeden taki element (nie licz─ůc pewnych rzadkich specyficznych sytuacji).

Natomiast elementowi aside nadali┼Ťmy identyfikator sidebar, poniewa┼╝ ten element mo┼╝e wyst─Öpowa─ç w r├│┼╝nych miejscach na stronie, natomiast pasek boczny jest tylko jeden (przynajmniej w naszej witrynie ÔÇô gdyby by┼éo ich wi─Öcej, nadaliby┼Ťmy im odpowiednie identyfikatory typu sidebar-left i sidebar-right).

Zwr├│─ç te┼╝ uwag─Ö na komentarz za zamykaj─ůcym znacznikiem </div>. Kod ┼║r├│d┼éowy stron potrafi by─ç bardzo d┼éugi i bywa ┼╝e zawiera wiele element├│w div. Dodatek komentarzy oznaczaj─ůcych, gdzie si─Ö ko┼äcz─ů wa┼╝ne elementy strukturalne, czasami u┼éatwia prac─Ö.

Mamy gotow─ů podstawow─ů struktur─Ö kontenera ┼Ťrodkowej cz─Ö┼Ťci naszej strony. Gdyby┼Ťmy jednak teraz dodali tre┼Ť─ç do tych element├│w, to nie zobaczyliby┼Ťmy takich eleganckich kolumn ustawionych obok siebie, jak w docelowym projekcie. Zamiast tego ustawi┼éyby si─Ö one jeden nad drugim.

To oczywi┼Ťcie ┼╝adne zaskoczenie, poniewa┼╝ zdefiniowali┼Ťmy kilka element├│w blokowych, a te bez ┼╝adnych dodatkowych ustawie┼ä uk┼éadaj─ů si─Ö w┼éa┼Ťnie w spos├│b opisany powy┼╝ej.

Najprostszym sposobem na kolumnowe rozmieszczenie takich element├│w strukturalnych strony jest u┼╝ycie technologii CSS o nazwie Flexbox.

Podstawy Flexboksa

W CSS 2.1 zdefiniowano nast─Öpuj─ůce cztery tryby rozmieszczenia element├│w, z kt├│rych trzy ju┼╝ znasz:

  • uk┼éad blokowy,
  • uk┼éad ┼Ťr├│dliniowy,
  • uk┼éad tabelaryczny (jeszcze go nie poznali┼Ťmy, ale wkr├│tce poznamy),
  • uk┼éad pozycjonowany.

W CSS3 wprowadzono kolejny tryb rozmieszczenia element├│w, o nazwie Flexbox (ang. Flexible box). Jest to technologia, kt├│ra rozwi─ůzuje dok┼éadnie ten problem, z kt├│rym teraz si─Ö mierzymy ÔÇô u┼éatwia u┼éo┼╝enie element├│w na stronie w taki spos├│b, w jaki chcemy.

Wyobra┼║ sobie sytuacj─Ö, w jakiej obecnie si─Ö znale┼║li┼Ťmy. Mamy dwa elementy blokowe ÔÇö main i sidebar, kt├│re chcemy ustawi─ç obok siebie, jak kolumny. Bez technologii Flexbox nie by┼éoby to takie ┼éatwe.

Kiedy┼Ť jednemu z element├│w przypisaliby┼Ťmy w┼éasno┼Ť─ç float o odpowiedniej warto┼Ťci, aby ÔÇ×p┼éywa┼éÔÇŁ on po lewej lub prawej stronie drugiego. To rozwi─ůzanie jednak nie daje nam wygodnej kontroli nad uk┼éadem element├│w, ich wzajemnymi relacjami oraz wymiarami.

Natomiast dzi─Öki w┼éasno┼Ťciom dodanym do CSS w module Flexbox uzyskanie potrzebnego nam efektu b─Ödzie wr─Öcz banalne.

Aby w┼é─ůczy─ç tryb Flexbox, nale┼╝y wybranemu elementowi pe┼éni─ůcemu rol─Ö kontenera (u nas jest to element div o identyfikatorze site-content) zdefiniowa─ç w┼éasno┼Ť─ç display o warto┼Ťci flex lub inline-flex. Od tej pory jest on tzw. kontenerem elastycznym (ang. flex container).

Kontener elastyczny obs┼éuguje kilka specjalnych w┼éasno┼Ťci umo┼╝liwiaj─ůcych rozmieszczenie na r├│┼╝ne sposoby element├│w b─Öd─ůcych jego dzie─çmi.

Wszystkie elementy dzieci kontenera elastycznego automatycznie staj─ů si─Ö jednostkami elastycznymi (ang. flex item), czyli zaczynaj─ů obs┼éugiwa─ç specjalny zestaw w┼éasno┼Ťci z modu┼éu Flexbox przeznaczonych dla jednostek elastycznych. W naszym przypadku jednostkami elastycznymi s─ů elementy main i aside o identyfikatorze sidebar.

Wracaj─ůc do naszego projektu podstrony z pocz─ůtku rozdzia┼éu, widzimy w nim, ┼╝e element main zajmuje mniej wi─Öcej 70% szeroko┼Ťci kontenera, a element aside ÔÇô pozosta┼ée 30%. Zdefiniujemy wi─Öc im takie ustawienia i sprawdzimy, co si─Ö stanie (dodamy te┼╝ kolory t┼éa i wysoko┼Ť─ç, aby elementy by┼éy widoczne):

main {
  background-color: antiquewhite;
  width: 70%;
  height: 200px;
}
#sidebar {
  background-color: lightpink;
  width: 30%;
  height: 200px;
}

Efekt zastosowania tych regu┼é CSS jest nast─Öpuj─ůcy:

Szeroko┼Ť─ç element├│w flexbox

Zgodnie z oczekiwaniami elementy u┼éo┼╝y┼éy si─Ö jeden pod drugim oraz pierwszy zajmuje 70%, a drugi 30% szeroko┼Ťci kontenera.

Aby ustawi─ç je tak, jak chcemy, w┼é─ůczymy tryb Flexbox w ich kontenerze. W tym celu dodajemy do arkusza styl├│w poni┼╝sz─ů regu┼é─Ö CSS, kt├│ra uczyni element #site-content kontenerem elastycznym:

#site-content {
  display: flex;
}

Teraz nasza strona wygl─ůda tak, jak na poni┼╝szym zrzucie ekranu:

Efekt w┼é─ůczenia Flexbox

Nasze elementy zosta┼éy automatycznie ustawione jeden obok drugiego. Jest to zas┼éuga domy┼Ťlnego ustawienia w┼éasno┼Ťci kontener├│w elastycznych o nazwie flex-direction.

W┼éasno┼Ť─ç flex-direction

W┼éasno┼Ť─ç flex-direction okre┼Ťla kierunek rozmieszczenia element├│w elastycznych. Przyjmuje ona cztery warto┼Ťci:

  • row ÔÇô warto┼Ť─ç domy┼Ťlna, kt├│ra ustawia elementy w rz─Ödzie.
  • row-reverse ÔÇô ustawia elementy w rz─Ödzie w odwr├│conej kolejno┼Ťci.
  • column ÔÇô ustawia elementy w pionie.
  • column-reverse ÔÇô ustawia elementy w pionie w odwr├│conej kolejno┼Ťci.

W poniższym oknie możesz wypróbować efekt zastosowania każdego z tych ustawień w praktyce.

See the Pen Test flex-direction by Łukasz Piwko (@shebangpl) on CodePen.

Jak wida─ç, technologia Flexbox znacznie u┼éatwia rozmieszczenie element├│w w kontenerze na r├│┼╝ne sposoby. Na naszej nieskomplikowanej stronie wystarczy┼éo u┼╝y─ç tylko jednej w┼éasno┼Ťci z jej arsena┼éu, aby uzyska─ç po┼╝─ůdany efekt.

Modu┼é Flexbox zawiera wiele innych w┼éasno┼Ťci, ale nie on jest tematem tego rozdzia┼éu, wi─Öc poni┼╝ej przedstawiam tylko zwi─Öz┼éy opis paru innych, kt├│re mog─ů si─Ö przyda─ç w codziennej pracy.

W┼éasno┼Ť─ç flex-wrap

W┼éasno┼Ť─ç kontenera elastycznego flex-wrap okre┼Ťla spos├│b zawijania elastycznych element├│w w kontenerze. Przyjmuje trzy warto┼Ťci:

  • wrap ÔÇô elementy normalnie przechodz─ů do kolejnych wierszy, gdy brakuje miejsca w poziomie.
  • wrap-reverse ÔÇô elementy przechodz─ů do kolejnych wierszy, ale w odwrotnej kolejno┼Ťci.
  • nowrap ÔÇô elementy nie s─ů przenoszone do kolejnych wierszy.

Zmie┼ä rozmiar poni┼╝szego elementu, aby zobaczy─ç dzia┼éanie tych warto┼Ťci w akcji.

wrap

1
2
3
4
5
6
7
8
9
10

wrap-reverse

1
2
3
4
5
6
7
8
9
10

nowrap

1
2
3
4
5
6
7
8
9
10

W┼éasno┼Ť─ç justify-content

W┼éasno┼Ť─ç kontenera elastycznego justify-content okre┼Ťla rozmieszczenie element├│w w poziomie. Przyjmuje nast─Öpuj─ůce warto┼Ťci:

  • center ÔÇô elementy s─ů wyr├│wnane do ┼Ťrodka
  • flex-end ÔÇô elementy s─ů wyr├│wnane do prawej
  • flex-start ÔÇô elementy s─ů wyr├│wnane do lewej
  • space-around ÔÇô elementy s─ů rozmieszczone tak, ┼╝e ka┼╝dy z nich otacza taka sama ilo┼Ť─ç przestrzeni
  • space-between ÔÇô elementy s─ů rozmieszczone r├│wnomiernie od lewej do prawej
  • space-evenly ÔÇô elementy s─ů rozmieszczone w taki spos├│b, ┼╝e odst─Öp mi─Ödzy wszystkimi parami jest taki sam

W┼éasno┼Ť─ç align-items

Ta w┼éasno┼Ť─ç, podobnie jak justify-content, tak┼╝e s┼éu┼╝y do wyr├│wnywania element├│w, ale w pionie, a nie w poziomie. Przyjmuje ona kilka warto┼Ťci. Na przyk┼éad warto┼Ť─ç center powoduje wy┼Ťrodkowanie jednostek elastycznych w pionie, flex-start ÔÇô wyr├│wnanie do g├│rnej kraw─Ödzi kontenera, a flex-end ÔÇô do jego dolnej kraw─Ödzi.

To tylko ma┼éa pr├│bka mo┼╝liwo┼Ťci technologii Flexbox, wi─Öc warto pozna─ç j─ů bli┼╝ej we w┼éasnym zakresie. W tej chwili jednak interesuje nas stylizacja szablonu podstrony naszej witryny. Najpierw doko┼äczymy formatowanie sekcji tre┼Ťci w┼éa┼Ťciwej.

Struktura sekcji tre┼Ťci w┼éa┼Ťciwej

W sekcji tre┼Ťci w┼éa┼Ťciwej (w elemencie main) mamy niewiele do zrobienia. Jest tam tylko nag┼é├│wek reprezentuj─ůcy imi─Ö i nazwisko osoby, kt├│rej dotyczy artyku┼é, a pod nim mamy ju┼╝ tekst opisuj─ůcy dan─ů osob─Ö.

Oznacza to, ┼╝e musimy tylko doda─ç element article, kt├│ry b─Ödzie reprezentowa┼é nasz wpis, a w nim ÔÇô element h2 reprezentuj─ůcy nag┼é├│wek tego wpisu.

<main>
  <article>
    <h2>Ciekawa osoba</h2>
  </article>
</main>

Stylizacja elementu main

Teraz wystarczy odpowiednio sformatowa─ç zawarto┼Ť─ç nag┼é├│wka i b─Ödzie mo┼╝na przej┼Ť─ç do paska bocznego. Sp├│jrz na poni┼╝sz─ů regu┼é─Ö CSS, kt├│ra zosta┼éa napisana wed┼éug wytycznych naszych projektant├│w i zgodnie z ich projektem graficznym:

main > article h2:first-of-type {
  margin-top: 0;
  margin-bottom: 30px;
  text-align: center;
}

Selektor dziecka main > article daje nam pewno┼Ť─ç, ┼╝e odniesiemy si─Ö tylko do elementu article znajduj─ůcego si─Ö bezpo┼Ťrednio w elemencie main (a nie w jakim┼Ť jego potomku).

Ponadto wyzerowali┼Ťmy g├│rny margines, ustawili┼Ťmy dolny margines na 30 pikseli oraz wy┼Ťrodkowali┼Ťmy tre┼Ť─ç nag┼é├│wka. I to wszystko w tej sprawie. Pod nag┼é├│wkiem wkleimy ju┼╝ tre┼Ť─ç artyku┼éu.

Teraz przejdziemy do paska bocznego, kt├│ry jest odrobin─Ö bardziej skomplikowany.

Struktura paska bocznego

Pasek boczny w naszym projekcie zawiera trzy sekcje: Zobacz r├│wnie┼╝, Reklama i O autorze. Do oznaczania tego typu niepowi─ůzanych ze sob─ů w ┼╝aden szczeg├│lny spos├│b komponent├│w doskonale nadaje si─Ö element HTML5 section. Poni┼╝ej znajduje si─Ö docelowa struktura HTML naszego paska bocznego:

<aside id="sidebar">
  <section>
    <h2>Zobacz r├│wnie┼╝</h2>
    <ul>
      <li><a href="#">Pozycja 1</a></li>
      <li><a href="#">Pozycja 2</a></li>
      <li><a href="#">Pozycja 3</a></li>
      <li><a href="#">Pozycja 4</a></li>
      <li><a href="#">Pozycja 5</a></li>
      <li><a href="#">Pozycja 6</a></li>
    </ul>
  </section>
  <section>
    <h2>Reklama</h2>
  </section>
  <section>
    <h2>O autorze</h2>
    <p>To jest kr├│tka notatka o autorze. Autor tej strony jest ze wszech miar niezwyk┼éym i m─ůdrym cz┼éowiekiem, kt├│ry przys┼éu┼╝y┼é si─Ö ju┼╝ ludzko┼Ťci na wiele sposob├│w.</p>
  </section>
</aside>

Jak wida─ç ka┼╝dy z komponent├│w paska bocznego jest zbudowany wed┼éug okre┼Ťlonego schematu: element section + nag┼é├│wek h2 + tre┼Ť─ç dodatkowa.

Stylizacja paska bocznego

Najpierw zdefiniujemy ustawienia CSS dla samego kontenera, a nast─Öpnie dodamy regu┼éy dotycz─ůce komponent├│w. Sp├│jrz na poni┼╝szy kod:

#sidebar {
  width: 30%;
  text-align: left;
  border-left: 1px solid #ddd;
  margin-left: 40px;
}

Za pomoc─ů tej regu┼éy ustawili┼Ťmy szeroko┼Ť─ç paska bocznego na 30% szeroko┼Ťci kontenera, wyr├│wnali┼Ťmy tekst do lewej, zdefiniowali┼Ťmy lew─ů kraw─Öd┼║ obramowania o grubo┼Ťci jednego piksela i szarym kolorze oraz odsun─Öli┼Ťmy pasek boczny na odleg┼éo┼Ť─ç 40 pikseli od elementu main.

Teraz nasz pasek boczny wygl─ůda tak:

Pasek boczny pierwszy

Kontener jest ju┼╝ odpowiednio ustawiony wzgl─Ödem s─ůsiedniego elementu, ale w jego wn─Ötrzu panuje jeszcze spory ba┼éagan. Teraz zdefiniujemy w┼éa┼Ťciwo┼Ťci poszczeg├│lnych komponent├│w.

Stylizacja komponent├│w paska bocznego

Prac─Ö nad komponentami paska bocznego zaczniemy od uporz─ůdkowania odst─Öp├│w. Najpierw zwi─Ökszymy odst─Öp mi─Ödzy poszczeg├│lnymi elementami section i odsuniemy ich zawarto┼Ť─ç od lewej kraw─Ödzi, aby doda─ç troch─Ö przestrzeni:

#sidebar section {
  margin-top: 45px;
  padding-left: 25px
}

Ta regu┼éa dotyczy jednak wszystkich element├│w section w pasku bocznym, a wi─Öc tak┼╝e pierwszego, kt├│ry jednak powinien mie─ç zerowy g├│rny margines. Aby pozby─ç si─Ö tego problemu, u┼╝yjemy pseudoklasy :first-of-type, kt├│ra odnosi si─Ö do pierwszego elementu potomnego okre┼Ťlonego typu:

#sidebar section:first-of-type {margin-top: 0;}

Teraz wszystkie elementy section w elemencie #sidebar, z wyj─ůtkiem pierwszego, b─Öd─ů mia┼éy g├│rny margines o szeroko┼Ťci 45 pikseli. Natomiast pierwszy z nich nie b─Ödzie mia┼é tego marginesu w og├│le. Teraz nasz pasek boczny wygl─ůda tak:

Pasek boczny drugi

Następnie zajmiemy się nagłówkami h2 w elementach section:

#sidebar h2 {
  margin-top: 0;
  margin-bottom: 14px;
  font-size: 1.2em;
}

Zlikwidowali┼Ťmy margines g├│rny, ustawili┼Ťmy margines dolny na 14 pikseli, aby odsun─ů─ç troch─Ö tre┼Ť─ç od nag┼é├│wka oraz zmienili┼Ťmy rozmiar pisma na 1,2 rozmiaru pisma elementu nadrz─Ödnego. Efekt zastosowania tych zmian jest nast─Öpuj─ůcy:

Pasek boczny trzeci

Pozosta┼éo nam jeszcze tylko zaj─ů─ç si─Ö listami i kolorem ┼é─ůczy. Sp├│jrz na poni┼╝sze regu┼éy CSS:

#sidebar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 95%
}
#sidebar li {
  margin-bottom: 7px;
}
#sidebar a {
  color: #786d6d
}

Pierwsza z tych regu┼é likwiduje punktory, marginesy i dope┼énienie listy oraz zmniejsza jej rozmiar pisma. Druga ustawia odst─Öp mi─Ödzy elementami listy na 7 pikseli. Trzecia zmienia kolor odno┼Ťnik├│w w pasku bocznym na nieco ja┼Ťniejszy ni┼╝ w nawigacji g┼é├│wnej.

Efekt wprowadzenia tych regu┼é do arkusza styl├│w jest nast─Öpuj─ůcy:

Pasek boczny czwarty

Wszystko wygl─ůda dobrze, tylko brakuje nam jeszcze grafik, kt├│re powinny ju┼╝ znajdowa─ç si─Ö na Twoim dysku i czeka─ç na swoj─ů kolej. U┼╝yjemy ich teraz.

Pierwszy jest komponent reklamowy, w kt├│rym umie┼Ťcimy obraz o nazwie newsboy.png:

<section>
  <h2>Reklama</h2>
  <img src="img/newsboy.png" alt="Ch┼éopiec z gazet─ů" width="150" height="240" class="centered-img">
</section>

Je┼Ťli przyjrzysz si─Ö naszemu projektowi, to zauwa┼╝ysz, ┼╝e grafika reklamy jest wy┼Ťrodkowana. W naszym kodzie odpowiada za to klasa centered-img, kt├│rej definicja CSS znajduje si─Ö poni┼╝ej:

.centered-img {
  display: block;
  margin: 30px auto;
}

Za pomoc─ů tej regu┼éy zamienili┼Ťmy element img w element blokowy, a nast─Öpnie nadali┼Ťmy mu 30-pikselowy margines g├│rny i dolny oraz automatyczny margines lewy i prawy. Dzi─Öki temu ka┼╝dy element przypisany do klasy centered-img b─Ödzie ustawia┼é si─Ö na ┼Ťrodku kontenera.

Projektanci stron internetowych lubi─ů definiowa─ç takie og├│lne klasy, aby nast─Öpnie m├│c ich u┼╝ywa─ç do formatowania wielu r├│┼╝nych element├│w na stronie. Mo┼╝na nawet rozwa┼╝y─ç usuni─Öcie cz┼éonu -img z nazwy naszej klasy, je┼Ťli planujemy stosowanie jej tak┼╝e do element├│w innego typu.

Drugi komponent zawieraj─ůcy grafik─Ö to sekcja O autorze. W tym przypadku zdj─Öcie autora jest otoczone tekstem z lewej strony. Ponownie zdefiniujemy odpowiednie ustawienia w postaci klasy na wypadek gdyby┼Ťmy jeszcze w innych miejscach chcieli u┼╝y─ç podobnego formatu:

.float-right {
  float: right;
  margin: 10px 0 10px 10px;
}

Wszystkie marginesy, opr├│cz prawego, maj─ů szeroko┼Ť─ç 10 pikseli. Prawy zosta┼é usuni─Öty, poniewa┼╝ chcemy, aby nasz element ÔÇ×sp┼éywa┼éÔÇŁ do samej kraw─Ödzi swojego kontenera.

Uko┼äczyli┼Ťmy prac─Ö nad naszym szablonem podstrony, wi─Öc mo┼╝emy przej┼Ť─ç do wstawiania tre┼Ťci artyku┼é├│w.

Dodawanie tre┼Ťci artyku┼é├│w

Od kiedy mamy gotowy szablon podstrony, wstawienie do niego tre┼Ťci jest ju┼╝ tylko kwesti─ů skopiowania odpowiedniego fragmentu stronu i wklejenia go w odpowiednim miejscu na innej stronie.

Na pierwszym miejscu naszego menu g┼é├│wnego znajduje si─Ö pozycja Paul Erd┼Ĺs, wi─Öc od tej strony zaczniemy przenosiny.

Najpro┼Ťciej b─Ödzie utworzy─ç now─ů stron─Ö o nazwie erdos.html i skopiowa─ç do niej zawarto┼Ť─ç szablonu, po czym wklei─ç do szablonu tre┼Ť─ç artyku┼éu o Paulu Erd┼Ĺsie.

W zwi─ůzku z tym wykonaj nast─Öpuj─ůce czynno┼Ťci:

  1. Zmie┼ä nazw─Ö starej strony o Erd┼Ĺsie na erdos-old.html.
  2. Utw├│rz nowy pusty plik HTML o nazwie erdos.html.
  3. Skopiuj do nowego pliku erdos.html zawarto┼Ť─ç szablonu podstrony.
  4. W elemencie h2 w elemencie article nowego pliku erdos.html wpisz Paul Erd┼Ĺs.
  5. Otw├│rz w edytorze plik erdos-old.html i skopiuj z niego zawarto┼Ť─ç elementu body.
  6. Wklej zawarto┼Ť─ç elementu body z pliku erdos-old.html pod elementem h2 w elemencie article nowego pliku erdos.html.

Teraz otw├│rz swoj─ů now─ů stron─Ö, aby sprawdzi─ç, jak wygl─ůda. A powinna ona wygl─ůda─ç mniej wi─Öcej tak:

Gotowa podstrona o Erdosie

Je┼Ťli Twoja strona te┼╝ tak wygl─ůda, to nale┼╝─ů Ci si─Ö gratulacje za wykonanie ┼Ťwietnej roboty!

Aby nasza strona nie by┼éa tak bardzo anonimowa, powinni┼Ťmy jeszcze doda─ç do niej nazwisko autora z danymi kontaktowymi. Tego typu informacje umieszczamy w elemencie address.

Dane autora witryny

Dane kontaktowe autora mo┼╝na umie┼Ťci─ç w elemencie address. Je┼Ťli znajduje si─Ö on w elemencie article, to odnosi si─Ö do tre┼Ťci tego elementu. Je┼Ťli natomiast znajduje si─Ö w elemencie body (nie jest obj─Öty elementem article), to odnosi si─Ö do autora ca┼éej strony. Poni┼╝ej znajduje si─Ö przyk┼éad u┼╝ycia tego elementu:

<address>
  Autorem tej witryny jest <a href="/autorzy/profesor-kodecki/>Profesor Kodecki"</a>.
</address>

Wstawienie tego kodu na stron─Ö pozostawimy ju┼╝ jako ─çwiczenie do samodzielnego wykonania.

Prawie uko┼äczyli┼Ťmy prac─Ö nad nasz─ů witryn─ů. Pozosta┼éy nam jeszcze strony, do kt├│rych odno┼Ťniki znajduj─ů si─Ö w stopce. Jedna z nich nazywa si─Ö Kontakt.

Na stronie kontaktowej umie┼Ťcimy formularz, za pomoc─ů kt├│rego u┼╝ytkownicy naszej witryny b─Öd─ů mogli wys┼éa─ç nam wiadomo┼Ť─ç. No, mo┼╝e nie do ko┼äcaÔÇŽ Formularze HTML to komponenty dwucz─Ö┼Ťciowe ÔÇô sk┼éadaj─ů si─Ö z interfejsu u┼╝ytkownika, kt├│ry tworzy si─Ö za pomoc─ů HTML i CSS, oraz ze skrypt├│w serwerowych, kt├│re przetwarzaj─ů wprowadzone dane.

To jest kurs HTML i CSS, wi─Öc nauczysz si─Ö tworzy─ç cz─Ö┼Ť─ç interfejsow─ů. Natomiast do opracowania drugiej cz─Ö┼Ťci potrzebna jest znajomo┼Ť─ç jednego z j─Özyk├│w programowania dzia┼éaj─ůcych na serwerze, np. PHP albo Python.

W nast─Öpnym rozdziale nauczysz si─Ö tworzy─ç formularze HTML.

Podsumowanie

  • Tre┼Ť─ç g┼é├│wn─ů strony mo┼╝na umie┼Ťci─ç w elemencie HTML5 main.
  • Tre┼Ť─ç w┼éa┼Ťciw─ů wpisu na stronie mo┼╝na umie┼Ťci─ç w elemencie HTML5 article.
  • Do rozmieszczania element├│w na stronie doskonale nadaje si─Ö technologia Flexbox.
  • Aby zamieni─ç dowolny element w kontener elastyczny nale┼╝y u┼╝y─ç deklaracji CSS display: flex lub display: inline-flex.
  • Elementy b─Öd─ůce bezpo┼Ťrednimi potomkami kontenera elastycznego nazywaj─ů si─Ö jednostkami elastycznymi.
  • W┼éasno┼Ť─ç flex-direction okre┼Ťla kierunek u┼éo┼╝enia jednostek elastycznych w kontenerze elastycznym
  • W┼éasno┼Ť─ç flex-wrap okre┼Ťla spos├│b zawijania jednostek elastycznych w kontenerze elastycznym.
  • W┼éasno┼Ť─ç justify-content okre┼Ťla spos├│b wyr├│wnania poziomego jednostek elastycznych w kontenerze elastycznym.
  • W┼éasno┼Ť─ç align-items okre┼Ťla spos├│b wyr├│wnania pionowego jednostek elastycznych w kontenerze elastycznym.
  • Pasek boczny strony mo┼╝na umie┼Ťci─ç w elemencie HTML5 aside.
  • Sekcje paska bocznego mo┼╝na oznaczy─ç elementem HTML5 section.
  • Element HTML5 address oznacza dane kontaktowe autora wpisu lub ca┼éego dokumentu.

─ćwiczenia

  1. Na wszystkich stronach naszej witryny brakuje wa┼╝nego elementu ÔÇô metaopisu. Je┼Ťli nie pami─Ötasz, co to jest, wr├│─ç do rozdzia┼éu o podstawowej strukturze dokumentu i przeczytaj w nim opis elementu meta description. Po od┼Ťwie┼╝eniu wiadomo┼Ťci dodaj ten element do wszystkich podstron i do strony g┼é├│wnej.
  2. Zmie┼ä kolejno┼Ť─ç komponent├│w paska bocznego, aby przekona─ç si─Ö, ┼╝e rzeczywi┼Ťcie mo┼╝na to swobodnie robi─ç.
  3. Zdj─Öcie Erd┼Ĺsa wydaje si─Ö za du┼╝e. Popraw je tak, aby lepiej wygl─ůda┼éo.
  4. Utwórz pozostałe dwie podstrony witryny.
  5. Uporz─ůdkuj arkusz styl├│w. Usu┼ä niepotrzebne regu┼éy i podziel regu┼éy na sekcje, kt├│re mo┼╝esz oznaczy─ç za pomoc─ů komentarzy.
  6. W rozdziale o stylizacji strony g┼é├│wnej zosta┼éy opisane wymagania dotycz─ůce odno┼Ťnik├│w w tre┼Ťci artyku┼é├│w. Oto one:
    1. Odwiedzone odno┼Ťniki w tre┼Ťci artyku┼é├│w powinny by─ç ÔÇ×przygaszoneÔÇŁ
    2. Po najechaniu kursorem na odno┼Ťnik w tre┼Ťci artyku┼éu powinno pojawia─ç si─Ö podkre┼Ťlenie oraz kolor powinien zmienia─ç si─Ö na granatowy (tak jak w ca┼éej witrynie)
    Napisz odpowiednie reguły CSS.
  7. W pasku bocznym w sekcji Zobacz r├│wnie┼╝ na ka┼╝dej podstronie dodaj linki do pozosta┼éych dw├│ch podstron. Mo┼╝esz doda─ç te┼╝ kilka imitacji odno┼Ťnik├│w, aby by┼éo tam wi─Öcej tre┼Ťci i aby pasek wygl─ůda┼é atrakcyjniej.
  8. Zmie┼ä notatk─Ö o autorze na w┼éasn─ů i dodaj w┼éasne zdj─Öcie.
  9. Dodaj w┼éasn─ů reklam─Ö do paska bocznego.
  10. W szablonie podstrony element title zawiera tylko tekst ÔÇ×Ciekawi ludzieÔÇŁ, przez co ka┼╝da strona na karcie okna przegl─ůdarki wygl─ůda tak samo. Popraw to.
  11. Mo┼╝e pami─Ötasz z rozdzia┼éu o stylizacji strony g┼é├│wnej poni┼╝sz─ů regu┼é─Ö CSS:

    a:hover {
      color: navy !important;
    }

    Usu┼ä z niej deklaracj─Ö !important i sprawd┼║, co si─Ö stanie z odno┼Ťnikami w pasku bocznym. Wiesz, dlaczego tak si─Ö sta┼éo? Umiesz to naprawi─ç bez u┼╝ycia deklaracji !important?