Szkoła Sukcesu!

Dediscit animus sero, quod didicit diu.

Gratulacje! Umiesz już bardzo wiele i jesteś gotowy do utworzenia głównej części strony. Jesteśmy już coraz bliżej sukcesu, jakim – już niedługo – będzie umiejętność napisania kodu własnej witryny Internetowej. Przejdź teraz do kolejnego slajdu, gdzie będziemy układać najistotniejsze elementy („pudełka”).

Przejdź do zadania nr 1 - kluczowego dla utworzenia trzech kolumn w części głównej naszej strony. Na początku postaraj się zmienić przykładowe teksty. Kolejnym Twoim zadaniem będzie zmiana selektora. W ćwiczeniu widzimy, że po selektorze „*” (jeżeli nie pamiętasz, co on oznacza, wróć do wcześniejszych części kursu) użyta została deklaracja box-sizing: border-box. W dalszej części kursu zostanie wyjaśnione, jakie są konsekwencje jej wprowadzenia. Postaraj się jednak pozyskać odpowiednie informacje we własnym zakresie. Będzie to doskonałe ćwiczenie na – bardzo Ci potrzebną w dalszej pracy – umiejętność samodzielnego pozyskiwania wiedzy i rozwiązywania problemów. Twoim zadaniem będzie teraz przypisanie tej deklaracji wyłącznie do klasy Column. W dalszej kolejności naciśnij przycisk „Run”, przeanalizuj efekty swojej pracy i zapisz jej wyniki. Istotnym jest, żebyś zwrócił uwagę, która część kodu jest odpowiedzialna za ułożenie kolumn obok siebie. Dzieje się tak oczywiście dzięki znanej Ci już właściwości „float”, do której dodana została do niej wartość „left”. Szerokość kolumn określono na 33,33%, co oznacza, że zajęły one niemal całą szerokość przeglądarki. W kolejnym kroku skopiuj kod i wklej do strony, którą tworzysz w ramach niniejszego kursu.
Uwaga: odpowiednie części wklej do sekcji „Head”, pozostałe do sekcji „Body”. Po wykonaniu tego zadania przejdź do kolejnego slajdu.

Jak widać na grafice powyżej, style kolumn umieszczone zostały bezpośrednio w elementach sekcji „Body” z czym, w niniejszym kursie, spotykasz się po raz pierwszy. Taki sposób zapisu nie był do tej pory używany, ponieważ jest już niezgodny z nowoczesnymi standardami. Chociaż powinieneś/winnaś mieć świadomość, że istnieje możliwość dodania deklaracji w ten sposób, to jednak postaraj się dodawać style wyłącznie w sekcji „Head” .
Zwróć również uwagę, że cała struktura głównej części naszej strony jest zamknięta w pudełku klasy „row”, co – jak się niedługo przekonasz - ma dość duże znaczenie.

Odnosząc się do stylów naszej nowoutworzonej, trójkolumnowej struktury, w pierwszej kolejności zajmijmy się selektorem i deklaracjami klasy „row”, czyli: .row:after {content: ""; display: table; clear: both;}. Ich nadrzędnym zadaniem jest „powiedzieć” przeglądarce, że właściwości „float” - dzięki której trzy kolumny ustawiły się obok siebie - należy przestać już brać pod uwagę. Zastanówmy się teraz, co to dokładnie oznacza. Nasza trójkolumnowa struktura mogła zostać utworzona, ponieważ wszystkie jej elementy otrzymały właściwość, dzięki której stały się „opływalne” - co wskazuje, że kolejne „pudełka” mogą ustawiać się obok nich (od wybranej strony - w naszym przypadku od lewej). Zastanówmy się więc również, jak zachowałby się kolejny element, utworzony poniżej naszej struktury, gdyby nie było powyższych deklaracji. Odpowiedź wydaje się oczywista. Skoro wszystkie elementy są „opływalne” (jeżeli z lewego boku trzeciej kolumny zostałaby jakakolwiek ilość miejsca), wtedy element ten również ustawiłby się z jej lewej strony. Tej sytuacji można jednak uniknąć, tworząc w „Body” odpowiednią klasę (nazywając ja dowolnie np. „row”) i odnosząc się do niej w stylach, wpisując wyżej zacytowany kod (przypomnij sobie, w jaki sposób cechy właściwości „float” zostały wytłumaczone na przykładzie grafiki „logo”. Postaraj się również samodzielnie odpowiedzieć na pytanie, dlaczego nie było potrzeby używania omówionej w tym przykładzie deklaracji).

Wszystkie pozostałe style powinny być dla Ciebie zrozumiałe. Na powyższej grafice znajdziesz również rozwiązanie prostego zadania, w którym miałeś/łaś odpowiednio zmodyfikować selektor deklaracji box-sizing: border-box. Teraz przyszedł z kolei czas, żeby wyjaśnić, jakie są konsekwencje jej wprowadzenia.

Żeby dowiedzieć się, jakie są -zapowiedziane na poprzedniej grafice- konsekwencje wprowadzenia deklaracji box-sizing: border-box w pierwszej kolejności uruchom tworzoną przez nas stronę, następnie zbadaj elementu „column”. Sposób, w jaki należy to zrobić powinien być Ci już doskonale znany (jeżeli jednak nie pamiętasz, jak to osiągnąć, wróć do poprzedniej części kursu). Po wykonaniu tego zadania przeanalizuj strukturę naszego „pudełka”. Kluczowym elementem będzie tu oczywiście „border”, który wyznacza jego granice. Przejdź teraz do sekcji „własności modelu pudełkowego”. Jak widać, jako pierwsza wymieniona tutaj została omawiana przez nas deklaracja box-sizing: border-box;. Jej wprowadzenie oznacza, że zarówno wysokość jak i szerokość „pudełka” będą określane właśnie przez „border” (jeżeli wyznaczylibyśmy wysokość i szerokość na np. 30px, to właśnie tyle będzie miał element „border”). Nasuwa się oczywiście pytanie, jakie są domyślne „własności” naszego „modelu pudełkowego”. Odpowiedź znajdziesz na kolejnym slajdzie.

Zbadaj dowolny element górnego menu. We „własnościach modelu pudełkowego” widzimy, że właściwość „box sizing” ma wartość „content box”. Conetem, czyli treścią (może nią być tekst, obrazek itp.) na przedstawionej powyżej grafice jest niebieski obszar wewnątrz „pudełka”. Oznacza to, że jego wysokość i szerokość będą wyznaczane przez „content”. Żeby w pełni zrozumieć opisywane zagadnienia wykonaj zadanie nr 2. Uruchom podany kod, przeczytaj teksty zawarte w przykładach (znajdują się tam dodatkowe wyjaśnienia). W dalszej kolejności utwórz kolejne dwie klasy o tej samej wysokości i szerokości; w pierwszej umieść deklarację box-sizing: content-box, zaś w drugiej box-sizing: border-box. Zapisz wyniki swojej pracy. Po zakończeniu ćwiczenia uruchom ponownie tworzoną na zajęciach stronę.

Gratulacje! Dotarłeś już bardzo daleko! Zdobyłeś naprawdę dużą wiedzę! Wspólnie tworzona strona zaczyna wyglądać coraz lepiej! Musimy jednak jeszcze nad nią popracować. Przejdź teraz do sekcji „Body” w celu naniesienia kolejnych modyfikacji przybliżających nas do wspólnego celu, jakim jest utworzenie pełnoprawnej strony internetowej.

W pierwszej kolejności usuń style zawarte w sekcji „Body”, a także przykładowe teksty oraz nagłówki. Następnie – jako że pracujemy nad częścią główną strony - zamknij całość struktury znacznikiem „main” (ang. główny). Po wykonaniu tego zadania przejdź do sekcji „Head”.

Na powyższej grafice możesz zaobserwować proponowane zmiany w strukturze trzech kolumn. Środkowa powinna zajmować 50% szerokości struktury HTML, pozostałe po 25%. Tekst został wyśrodkowany. Padding – czyli odległość pomiędzy contentem a granicą elementu określono na 10px. Minimalna wysokość kolumn wynosi 600px – czyli może się powiększyć, jeżeli ich elementy będą zajmować większą przestrzeń. Dzięki deklaracji – border-left/ border-right: 5px solid black kolumny 1 oraz 3 otrzymały widoczne marginesy. Powyższy kod oznacza, że otrzymują one grubość 5x, są jednolite i przypisano im kolor czarny. Przejdźmy teraz do sekcji „Body” i zajmijmy się contentem lewej kolumny.

W pierwszej kolejności utworzymy zestaw linków, analogiczny do zbudowanych w sekcji menu (postaraj się nie zapisywać ich mechanicznie w całości, tylko użyj znane Ci już skróty programu „Emmet”). Dla przypomnienia – między znacznikami „nav” tworzymy listę nieuporządkowaną, w której umieszczamy odniesienia do linków. Przypomnij sobie ćwiczenie nr 3 na podstronie „Nawigacja”. Pamiętasz zapewne, że w celu utworzenia pełnoprawnego linku - w widocznej na powyższej grafice strukturze a href="#">Link1/a - zamiast symbolu „#” możesz umieścić adres dowolnej strony w Internecie (lub adres utworzonej przez Ciebie podstrony). Przejdź teraz do wyszukiwarki w celu sprawdzenia wyników swojej pracy.

Jak widać na powyższej grafice lista uporządkowana straciła swoje pierwotne właściwości i od stylów przeznaczonych dla „menu” przejęła cechy deklaracji „inline-block”. To właśnie stało się przyczyną ustawienia się linków obok siebie (w linii) a nie pionowo, jak tego tym razem oczekiwalibyśmy. Kwestia ta zostanie skorygowana w sekcji „Head”.

Postaramy się teraz nadać naszym linkom odpowiednie style. Jak widzisz powyżej, tym razem kod jest już dość długi. Nie ma jednak powodu do zmartwień. Występuje tutaj tylko jedna deklaracja, której jeszcze nie znasz. Dla przypomnienia zacznijmy jednak od początku.
W selektorze .column1 nav ul li (odnoszącym się oczywiście do listy) widzimy następujące deklaracje:
- margin: 30px 15px; - marginesy górny i dolny zostały określone na 30px, zaś lewy i prawy na 15px.
- border-top: 4px solid royalblue; - w górnej części naszego menu pojawiła się “granica” wielkości 4.px, jednolita (co oznacza, że wyświetli się w formie paska) o kolorze royablue.
- list-style: none; - niniejsza deklaracja likwiduje punktory.
W selektorze .column1 nav a (odnoszącym się do linków) umieszczone zostały następujące deklaracje:
- text-decoration: none; - likwiduje charakterystyczne dla linków podkreślenia.
- display: block; - dzięki przywróceniu domyślnego układu blokowego, linki ustawią się pionowo.
- box-sizing: border-box; - punktem odniesienia jest „border”, nie zaś „content” (wartość domyślna).
- font-size: 1.8rem; - wielkość czcionki wynosi 1,8rem.
- font-family: 'Oswald', sans-serif; - rodzajem czcionki jest Oswald
- color: #555; - kolorem czcionki jest ciemny odcień szarego
- padding: 10px 30px; - padding górny i dolny wynoszą 10px zaś lewy i prawy 30px.
- background-color: #fff; - kolorem tła jest bardzo jasny odcień szarego.
- border: 1px solid #ddd; - marginesy posiadają grubość 5x, są jednolite i przypisano im kolor czarny.
- font-size: 2.2rem; - wielkość czcionki wynosi 2,2rem.
- letter-spacing: 1px; - odległość pomiędzy literami wynosi 1px.
- text-align: left; - tekst został przesunięty w lewo.
- font-weight: bold; - czcionka została pogrubiona.
- transition: all 0.5s; - dzięki tej deklaracji, po umieszczeniu kursora na linku zmiana wyglądu tła odbywać się będzie z opóźnieniem 0,5 sek. (oczywiście, żeby niniejsza deklaracja miała sens musi występować wraz z pseudoklasą „hover”).
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - niniejszej deklaracji jeszcze nie używaliśmy w naszej pracy. Jest ona odpowiedzialna za „cienie” dające wrażenie trójwymiarowości.
W pseudoklasie nav a:hover odpowiedzialnej za zmianę koloru tła i czcionki naszych przycisków (po ustawieniu na nich kursora) umieszczone zostały następujące deklaracje:
- background-color: royalblue; - kolor tła - (znany Ci już doskonale) “royalblue”.
- color: #eee; - kolorem czcionki- jasnoszary
- box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - cień dający wrażenie trójwymiarowości.
- padding-left: 40px; - padding lewy (odległość pomiędzy border a content) wynosi 40px.

Przejdź teraz do wyszukiwarki i zobacz efekty swojej pracy.

Lewa kolumna jest już gotowa. Zajmijmy się więc środkową. W tym celu przejdź do sekcji „Body”.

W środkowej kolumnie utwórz klasę „film”, a pod nią, w znacznikach „p” umieść znany Ci łaciński traktat. Uwaga: zadanie wykonaj za pomocą odpowiednich skrótów (w razie problemów wróć do zakładki „Podstawy HTML”). Teraz uruchom portal YouTube i znajdź film, który chciałbyś umieścić na naszej stronie. Jak się zapewne domyślasz, zostanie on wklejony do klasy „film”.

Po wybraniu odpowiedniego filmu, kliknij przycisk „udostępnij”.

Po pojawieniu się menu, kliknij przycisk „Umieść”.

Twoim ostatnim krokiem będzie naciśnięcie przycisku „kopiuj”. Po wykonaniu tej czynności, możesz wrócić do naszej strony.

Wygenerowany przez portal YouTube film wklej do klasy „film” i po uruchomieniu przeglądarki zobacz efekty swojej pracy.

Jak widać na powyższej grafice, efekt nie jest jeszcze zadowalający, dlatego powinniśmy jeszcze dopracować wygląd elementów środkowej kolumny w CSS.

Jak widzisz na powyższej grafice – zaproponowane modyfikacje w wyglądzie elementów 3. kolumny są niewielkie lecz – jak się przekonasz – niezbędne w ujednoliceniu projektu strony. Nie ma potrzeby omawiania zastosowanych deklaracji, gdyż są one analogiczne do analizowanych na wcześniejszych slajdach. Przejdź teraz do wyszukiwarki i zobacz efekty swojej pracy.

Główna część strony jest już prawie skończona. Twoim kolejnym zadaniem będzie usunięcie marginesów wyznaczających granice kolumn. Po wykonaniu tej czynności zapełnimy ostatnią wolną przestrzeń części głównej.

W pierwszej kolejności znajdź w sieci odpowiadającą Ci wybraną grafikę i umieść w folderze „Kurs_Html”. Następnie utwórz klasę „obraz”, umieść w nim ilustrację i wygeneruj krótki tekst. Poniżej (oczywiście już poza klasą „obraz”) utwórz nawigację analogiczną do umieszczonej w kolumnie 1. – zmniejsz jednak ilość kolumn. Po wykonaniu powyższych zadań przejdź do sekcji „Head”.

Przeanalizuj kod zawarty na powyższej grafice. Wszystkie deklaracje powinny być Ci już znane (jeżeli którakolwiek byłaby niezrozumiała, cofnij się do wcześniejszych części kursu). Po ich wprowadzaniu sprawdź efekty swojej pracy.

Praca jest już niemal zakończona. Żeby Twoje dzieło było kompletne, przejdź teraz do podstrony „Stopka”.