HTML5 i CSS3Tekst

0
Recenzje
Przeczytaj fragment
Oznacz jako przeczytane
Jak czytać książkę po zakupie
Czcionka:Mniejsze АаWiększe Aa


Projekt okładki i stron tytułowych Grzegorz Laskowski

Ilustracja na okładce Kovacs Tamas/Shutterstock

Wydawca Łukasz Łopuszański

Redaktor prowadzący Irena Puchalska

Redaktor Lucyna Wyciszkiewicz-Pardej

Koordynator produkcji Anna Bączkowska

Przygotowanie publikacji elektronicznej Ewa Modlińska

Skład wersji elektronicznej na zlecenie Wydawnictwa Naukowego PWN Michał Nakoneczny / 88em.eu

Książka, którą nabyłeś, jest dziełem twórcy i wydawcy. Prosimy, abyś przestrzegał praw, jakie im przysługują. Jej zawartość możesz udostępnić nieodpłatnie osobom bliskim lub osobiście znanym. Ale nie publikuj jej w internecie. Jeśli cytujesz jej fragmenty, nie zmieniaj ich treści i koniecznie zaznacz, czyje to dzieło. A kopiując jej część, rób to jedynie na użytek osobisty.

Szanujmy cudzą własność i prawo

Więcej na www.legalnakultura.pl

Polska Izba Książki

Copyright © by Wydawnictwo Naukowe PWN SA

eBook został przygotowany na podstawie wydania papierowego z 2015 r. (wyd. I)

Warszawa 2015

ISBN 978-83-01-18394-3

Wydawnictwo Naukowe PWN SA

02-460 Warszawa, ul. Gottlieba Daimlera 2

tel. 22 69 54 321, faks 22 69 54 288

infolinia 801 33 33 88

e-mail: pwn@pwn.com.pl

www.pwn.pl

Spis treści

Wstęp

1. Strony responsywne

2. Podstawy tworzenia stron internetowych

2.1. HTML5 i struktura dokumentu

2.2. Kaskadowe arkusze stylów CSS

3. Narzędzia

3.1. Edytory

3.1.1. Sublime Text

3.1.2. Adobe Brackets

3.2. Testowanie

3.2.1. Wprowadzenie

3.2.2. W przeglądarce

3.2.3. Adobe Inspect CC

4. Projektowanie

Makieta

4.2. Projekt graficzny

5. Kodowanie elastycznej strony

5.1. Wprowadzenie

5.2. Struktura dokumentu HTML

5.3. Reset stylów CSS

5.4. Znacznik meta viewport

5.5. Organizacja pracy

5.6. Nagłówek strony

5.6.1. Wprowadzenie

5.6.2. Google Fonts

5.6.3. Określenie wysokości elementu-rodzica

5.6.4. Zapytania medialne

5.6.5. Dynamiczna zmiana klas za pomocą Biblioteki jQuery

5.7. Slogan

5.8. Sekcja Oferta

5.8.1. Układ trójkolumnowy

5.8.2. Responsywne obrazy

5.8.3. Własność box-sizing

5.9. Obszar O nas & Blog

5.9.1. Układ dwukolumnowy

5.9.2. Ukrywanie elementów

5.10. Obszar Nasze realizacje

5.11. Stopka

5.11.1. Wprowadzenie

5.11.2. CSS sprite

5.11.3. Dodanie nowego punktu granicznego

5.12. Podstrony

6. Spis znaczników HTML użytych w książce

7. Kod źródłowy

1  Okładka

2  Strona tytułowa

3  Strona redakcyjna

4  Spis treści

5  Wstęp

6  1. Strony responsywne

7  2. Podstawy tworzenia stron internetowych 2.1. HTML5 i struktura dokumentu 2.2. Kaskadowe arkusze stylów CSS

8  3. Narzędzia 3.1. Edytory 3.1.1. Sublime Text 3.1.2. Adobe Brackets 3.2. Testowanie 3.2.1. Wprowadzenie 3.2.2. W przeglądarce 3.2.3. Adobe Inspect CC

9  4. Projektowanie Makieta 4.2. Projekt graficzny

10  5. Kodowanie elastycznej strony 5.1. Wprowadzenie 5.2. Struktura dokumentu HTML 5.3. Reset stylów CSS 5.4. Znacznik meta viewport 5.5. Organizacja pracy 5.6. Nagłówek strony 5.6.1. Wprowadzenie 5.6.2. Google Fonts 5.6.3. Określenie wysokości elementu-rodzica 5.6.4. Zapytania medialne 5.6.5. Dynamiczna zmiana klas za pomocą Biblioteki jQuery 5.7. Slogan 5.8. Sekcja Oferta 5.8.1. Układ trójkolumnowy 5.8.2. Responsywne obrazy 5.8.3. Własność box-sizing 5.9. Obszar O nas & Blog 5.9.1. Układ dwukolumnowy 5.9.2. Ukrywanie elementów 5.10. Obszar Nasze realizacje 5.11. Stopka 5.11.1. Wprowadzenie 5.11.2. CSS sprite 5.11.3. Dodanie nowego punktu granicznego 5.12. Podstrony

 

11  6. Spis znaczników HTML użytych w książce

12  7. Kod źródłowy

Wstęp

Szczególnie obecnie sukces zależy od tego, czy istniejemy w internecie. Jeśli nie mamy strony internetowej lub jest ona wykonana w sposób, który nie spełnia aktualnych standardów, szanse, że nawiążemy z kimś współpracę, są raczej minimalne. Oczywiście są branże, które zadają kłam temu stwierdzeniu, jednak to rzadkość.

Projektując strony internetowe, należy pamiętać, że coraz więcej internautów korzysta z urządzeń mobilnych. Tworzenie stron o sztywnych rozmiarach, które bardzo trudno przegląda się za pomocą smartfonów oraz tabletów, niejednokrotnie może użytkowników bardziej do nas zrazić, niż zachęcić do zapoznania się z tym, co mamy do zaoferowania.

Termin Responsive Web Design działa czasami nieco odstraszająco. Jednak nie należy się go bać. W gruncie rzeczy korzystamy tu głównie z języka HTML5 oraz stylów CSS3, które są podstawowymi narzędziami webmasterskimi.

W książce zostały przedstawione wszystkie etapy tworzenia witryny internetowej, począwszy od makiet oraz layoutów, a skończywszy na zakodowaniu serwisu dla różnych rozdzielczości.

1 Strony responsywne

Projektowanie stron internetowych to bardzo szeroki temat, do którego podejście w przeciągu ostatnich kilku lat zmieniło się diametralnie. Początkowo strony można było kojarzyć ze statycznym tekstem i zdjęciami, z czasem zaczęto jednak urozmaicać je różnymi elementami animowanymi. Obecnie na stronach www można umieścić również muzykę czy pliki wideo. Okazuje się jednak, że to za mało. Z chwilą, kiedy na rynku pojawiły się smartfony i tablety, tradycyjne strony internetowe przestały się sprawdzać w stu procentach.

Strona internetowa po wczytaniu do przeglądarki w urządzeniach mobilnych zdecydowanie traci na jakości. Często, aby coś przeczytać, musimy dany fragment strony powiększyć, co z kolei sprawia, że inny fragment nie jest widoczny. Przeglądanie takiej strony bywa irytujące i bardzo niewygodne. Aby rozwiązać ten problem, zaczęto tworzyć strony mobilne. Jednak ich wykonanie najczęściej łączy się z powieleniem całej witryny i zaprojektowaniem jej tylko z myślą o urządzeniach mobilnych. To natomiast wiąże się z dwukrotną aktualizacją strony www – pierwsza aktualizacja dotyczy oczywiście wersji witryny przeznaczonej dla komputerów, druga natomiast wersji zaprojektowanej dla urządzeń mobilnych. Jeżeli aktualizacja jest wykonywana stosunkowo rzadko, można próbować projektować tego typu strony.

O wiele lepszym rozwiązaniem jest Responsive Web Design, w skrócie zwane RWD. To technika projektowania stron, dzięki której uzyskujemy optymalne wyświetlanie treści witryny zarówno na monitorze komputera, laptopa, jak i na wyświetlaczach urządzeń mobilnych. Strona responsywna w porównaniu do tradycyjnej o wiele lepiej dopasowuje się do tych urządzeń, ponieważ już na etapie projektowania zakładamy różne rozdzielczości, w jakich w przyszłości będzie wyświetlana.

Zaletą stron responsywnych jest fakt, że tworząc strony dla różnych urządzeń, nie musimy powielać ich treści. Również aktualizacja treści wymaga od nas zmian tylko w jednym miejscu – nie wykonujemy aktualizacji osobno dla komputerów oraz smartfonów i tabletów. Podczas wczytywania strony do okna przeglądarki automatycznie sprawdzana jest rozdzielczość ekranu urządzenia, z którego korzystamy, po czym ładowane są style, które przeznaczyliśmy dla tej właśnie rozdzielczości. Dzięki takiemu rozwiązaniu mamy pewność, że tekst będzie czytelny, a grafiki nie będą większe niż szerokość ekranu.

Równie istotną sprawą jest nawigacja. Zastosowanie wielopoziomowej nawigacji w urządzeniach o stosunkowo niewielkich rozmiarach jest dość kłopotliwe dla użytkownika. Strony responsywne korzystają z bardzo prostej nawigacji, do której dostęp mamy z każdego miejsca witryny. Zazwyczaj, jeśli używamy smartfonu lub tabletu, widoczny jest niewielki przycisk menu. Wystarczy jedno stuknięcie w przycisk, aby menu zostało wyświetlone i abyśmy mogli wybrać w nim inną podstronę.

2 Podstawy tworzenia stron internetowych

2.1. HTML5 i struktura dokumentu

Podstawą działania wszystkich stron internetowych jest język HTML (Hypertext Markup Language) – hipertekstowy język znaczników. Dokument napisany w tym języku zawiera znaczniki (tagi) umieszczone w nawiasach ostrych, np.: <html>, <p>, <img>. Zazwyczaj występują one w parach – pierwszy znacznik jest znacznikiem początkowym (lub znacznikiem otwarcia), drugi natomiast – końcowym (znacznikiem zamknięcia). Przeglądarka internetowa odczytuje znaczniki i interpretuje je tak, aby użytkownik zamiast kodu widział właściwie sformatowaną stronę internetową.

Strony internetowe są tworzone według określonych standardów. Odpowiada za nie W3C (World Wide Web Consortium). Standardy ustanawiane przez W3C nie mają co prawda mocy prawnej, jednak użycie aktualnych standardów jest zalecane ze względu na prawidłowe wyświetlanie stron www w przeglądarkach internetowych. Do najpopularniejszych standardów należy HTML5, będący najnowszą wersją języka HTML i stanowiący rozwinięcie języków HTML4 i XHTML1.

Projektując stronę internetową, zdecydowanie należy trzymać się szablonu, który daje nam pewność, że strona będzie prawidłowo wyświetlana w przeglądarce internetowej (rys. 1).


Rysunek 1. Przykładowa struktura dokumentu HTML

Mając taką poglądową strukturę dokumentu, sprawdźmy, jak należy opisać poszczególne części za pomocą kodu HTML. Istotny element dokumentów publikowanych w internecie stanowią deklaracje ich typów zalecane przez W3C. Zadaniem deklaracji jest wskazanie przeglądarce internetowej, w jakim języku dokument został napisany. Dzięki temu przeglądarka może odpowiednio zinterpretować kod oraz wyświetlić prawidłowo dokument. W języku HTML5 deklaracja ogranicza się do zaledwie jednej linii kodu umieszczanej na początku dokumentu: <!DOCTYPE html>. Następnie musimy wyznaczyć ramy dokumentu, czyli wprowadzić znacznik <html>, wewnątrz którego zawarte będą wszystkie pozostałe znaczniki.

Większość znaczników ma tzw. atrybuty, dzięki czemu precyzujemy sposób ich działania. I tak przy znaczniku <html> dość ważne jest określenie języka, w jakim ma być prezentowana zawartość witryny. Atrybut wpisujemy wewnątrz nawiasów <>, ostatecznie zatem znacznik powinien przyjąć postać <html lang=”pl”>.

Kolejny krok to umieszczenie w dokumencie opisu zawartości strony oraz jej tytułu. Wszystkie te informacje należy wpisać wewnątrz znacznika <head>, czyli w nagłówku dokumentu. Pierwszy znacznik, który wprowadzamy do nagłówka, to <meta>, czyli informacje profilowe strony. Możemy zastosować tu m.in. następujące atrybuty:

 http-equiv=”conent-type” – służy do określenia sposobu kodowania dokumentu i to właśnie dzięki niemu w przeglądarce będą prawidłowo wyświetlane polskie znaki,

 name=”description” – pozwala na wprowadzenie opisu strony,

 name=”keywords” – umożliwia wpisanie słów kluczowych.

Następnie wstawiamy znacznik <title>, dzięki któremu treść, jaką wpiszemy w jego obrębie, będzie widoczna w górnej części okna przeglądarki – jest to szczególnie użyteczne, jeśli mamy otwartych kilka stron w różnych kartach i chcemy przełączać się między nimi.

W nagłówku powinniśmy umieścić także ścieżkę do pliku CSS, w którym opiszemy wygląd strony. Tym jednak zajmiemy się nieco później.

Następnie, już poza nagłówkiem, powinniśmy wyznaczyć tzw. ciało dokumentu, czyli miejsce, w którym będzie umieszczona właściwa część strony. Służy do tego znacznik <body> (rys. 2). Będziemy w nim opisywali wszystkie elementy pokazane na rysunku 1.


Rysunek 2. Określenie ram dokumentu HTML

Kiedy ramy dokumentu są już określone, można przystąpić do definiowania kolejnych elementów. Zacznijmy od znacznika <header>. Przede wszystkim należy pamiętać, że <head> oraz <header> to, mimo nieco mylącej nazwy, dwa różne elementy. Co możemy umieścić w znaczniku <header>? Zazwyczaj takie elementy, jak: logo, motto, hasło reklamowe, formularz wyszukiwania. Warto pamiętać, że bardzo często, będąc w dowolnym miejscu witryny, chcemy szybko wrócić do strony głównej. Dlatego też, jeśli w elemencie <header> wstawiamy logo, powinno ono stanowić odnośnik do tej właśnie strony (rys. 3).


Rysunek 3. Przykład elementu <header>

W przedstawionym na rysunku 3 kodzie zastosowane zostały znaczniki: <a>, <img> oraz <h1>. Pierwszy z nich to kotwica. Wraz z atrybutem href tworzy hiperłącze (odnośnik, link) do wskazanego dokumentu HTML.

Znacznik <img> służy do umieszczenia w dokumencie obrazu. Najistotniejsze atrybuty to rozmiary oraz alt, czyli tekst alternatywny – w razie, gdyby obraz nie został wczytany, pojawi się przypisana do tego atrybutu treść.

Ostatni użyty znacznik to <h1>, czyli nagłówek poziomu pierwszego. Takich poziomów w języku HTML jest sześć, przy czym <h1> oznacza czcionkę w największym dopuszczalnym dla nagłówków rozmiarze, natomiast <h6> odpowiada za najmniejszą czcionkę nagłówka (rys. 4).


Rysunek 4. Przykład elementu <header> w przeglądarce Google Chrome

Kolejny element to <nav>. Jak można się domyśleć, w tej części strony umieszczamy odnośniki do innych stron lub do wyznaczonych fragmentów bieżącej strony. Załóżmy, że nasza witryna składa się z czterech stron: głównej (czyli domyślnie index.html), o nas, oferty oraz kontaktu. Do znacznika <nav> zatem powinniśmy wstawić cztery odnośniki. Najczęściej tworzymy z nich listę wypunktowaną, którą później opisujemy za pomocą stylów CSS. Za listę wypunktowaną odpowiada znacznik <ul>, natomiast każdy punkt listy określany jest za pomocą znacznika <li> (rys. 5).



Rysunek 5. Przykład elementu <nav>

 

Znacznik <aside> odpowiada za dodanie do strony treści, które niekoniecznie muszą być powiązane ściśle z tematyką naszej witryny. Mogą to być reklamy, przypisy lub linki nawigacyjne (rys. 6).

Element <section> to sekcja dokumentu obejmująca określoną część tematyczną. Zazwyczaj element ten zawiera nagłówek. Dzięki podziałowi treści na sekcje strona jest przejrzystsza, a co za tym idzie, o wiele łatwiejsza w odbiorze. Czytając treść, w której są wyodrębnione pewne fragmenty, bez problemu odnajdujemy na stronie miejsce, w którym skończyliśmy czytać (rys. 7).

W sekcjach użyto kolejnego znacznika <p>. Służy on do tworzenia nowego akapitu. Akapit często mylnie jest postrzegany jako wcięcie w tekście. Przy projektowaniu stron akapit należy rozumieć jako fragment tekstu, zazwyczaj obejmujący kilka wierszy.

Zauważmy, że na razie strona nie do końca oddaje układ, jaki został przedstawiony na rysunku 1. Aby poszczególne elementy zostały ułożone w określonych miejscach, np. <aside> oraz <section> były ustawione w jednym wierszu, musimy sformatować je za pomocą stylów CSS. Aktualny wygląd zatem nie jest skutkiem błędnego projektowania, lecz kwestią tego, że na razie budujemy dopiero strukturę HTML.



Rysunek 6. Przykład elementu <aside>

Element <article> oznacza samodzielny fragment treści dokumentu, np. wpis na blogu lub komentarz. Zmienimy nieco strukturę przykładowego dokumentu. Z tekstów, które umieściliśmy w elementach <section>, utworzymy autonomiczne artykuły. Oczywiście w praktyce będą zazwyczaj dłuższe. Nagłówki zostawimy w takiej formie, w jakiej są, natomiast pozostałą część zamienimy na artykuły (rys. 8).

Struktura HTML prostego dokumentu jest już niemal gotowa. Brakuje tylko elementu <footer>, czyli stopki. W stopce umieszczamy najczęściej informacje na temat autora, praw autorskich, czasami linki. W naszym przykładzie stopka zostanie umieszczona na samym dole witryny (rys. 9). Jednak można ją stosować także dla opisanych wcześniej elementów, czyli: <article>, <aside>, <nav> czy <section>.



Rysunek 7. Zastosowanie elementu <section>


Rysunek 8. Zastosowanie elementu <article>



Rysunek 9. Przykład zastosowania elementu <footer>

2.2. Kaskadowe arkusze stylów CSS

Kiedy struktura pliku HTML jest gotowa, możemy przystąpić do jego „ostylowania”, czyli sformatowania treści strony za pomocą kaskadowych arkuszy stylów. Założeniem kaskadowych arkuszy stylów (Cascading Style Sheets, CSS) jest oddzielenie struktury strony od jej formatowania. Dzięki ich zastosowaniu możemy również formatować wszystkie strony witryny w sposób globalny.

Kaskadowe arkusze stylów mogą występować w trzech formach:

 Style inline (style lokalne) – style wstawiane w tej samej linii, w której umieszczony jest element, którego dotyczy formatowanie.

 Zewnętrzny arkusz stylów – plik zapisany w formacie CSS. Sposób formatowania elementów witryny zdefiniowany w takim pliku może być używany na wielu stronach jednocześnie. Jeśli zatem nasza witryna obejmuje klika lub więcej stron, w pliku CSS określamy np.: wygląd akapitu, sposób wypunktowania listy, rozmiar czcionki, dołączamy plik do wszystkich stron, po czym zostają one jednolicie sformatowane.

 Wewnętrzny arkusz stylów – umieszczany w nagłówku formatowanego dokumentu. Z wewnętrznego arkusza stylów korzystamy, jeżeli w dokumencie będą się powtarzały dowolne elementy, np. chcemy, aby kilka akapitów wyglądało tak samo, zdjęcia miały ten sam rozmiar i kolor obramowania itp.

Kaskadowość stylów wynika z ważności poszczególnych stylów. Jeżeli w dokumencie został zastosowany styl inline oraz styl w nagłówku dokumentu, ważniejszy jest styl inline i to on jest brany pod uwagę. Styl z nagłówka jest pomijany. Tak samo dzieje się, jeśli formatujemy element za pomocą stylu wpisanego w nagłówek oraz zewnętrznego arkusza stylów – ważniejszy jest styl wewnętrzny, który zostaje zastosowany.

Każdy arkusz stylów jest złożony z reguł opisujących styl poszczególnych elementów dokumentu. Reguła zawiera selektor oraz deklarację. Selektor wskazuje, którego elementu lub częściej których elementów dotyczy deklaracja. Selektorem może być dowolny znacznik, np. <p>, <body>, <img>. Deklaracja natomiast składa się z dwóch części: właściwości (property), zwanej również cechą lub własnością, oraz wartości (value).

Wróćmy do naszego przykładu. Pokażemy w nim, jak używać wszystkich trzech typów stylów. Zacznijmy od stylów inline. Załóżmy, że chcemy, aby element <header> miał ściśle określony kolor tła. Musimy zatem wrócić do pliku i odszukać w nim ten element. Następnie wewnątrz nawiasów <> wprowadzamy zapis style=”background-color:nazwa koloru lub kod koloru”. Jak należy rozumieć taki zapis w odniesieniu do reguł? Otóż selektorem jest w tym wypadku <header>, cechą kolor tła, czyli background-color, natomiast wartością kod koloru – w przykładzie to #DDE6DE (rys. 10).



Rysunek 10. Formatowanie tła wybranego elementu za pomocą stylu inline

Zatrzymajmy się przy kolorach, które stanowią istotną część formatowania stron. Jeżeli kolor, który chcemy zastosować, należy do podstawowej palety barw, możemy wpisać odpowiednio jego nazwę: red, green, blue, yellow, pink, navy itp. Pozostałe kolory podajemy zazwyczaj w postaci kodu szesnastkowego, np. #ff1493 oznaczający głęboki róż, czy #40E0D0 oznaczający turkusowy.

Wykaz kodów możemy znaleźć w internecie. Zapis umożliwiający określenie barwy docelowej to trzy bajty opisywane przez trzy pary cyfr zgodne z modelem RGB (czerwony, zielony, niebieski). Każdy z bajtów przyjmuje wartość z przedziału 00 (0) do FF (255). 00 to najmniejsza intensywność barwy, FF – największa. Jeśli wpiszemy np. #000000, otrzymamy kolor czarny, #FFFFFF da kolor biały, #FF0000 to kolor czerwony, a dzięki #700070 uzyskamy kolor fioletowy itd.

Oczywiście kolory to nie wszystko. Jeśli dodatkowo chcielibyśmy, aby np. wszystkie obiekty elementu <header> były wyśrodkowane, możemy style rozszerzyć, dodając do selektora cechę align (rys. 11).


Rysunek 11. Formatowanie akapitu za pomocą stylu inline

W analogiczny sposób będziemy formatować pozostałe elementy. Jeśli natomiast chcielibyśmy wstawić style do elementu <head>, musimy wprowadzić tam znacznik <style>. Atrybutem, o którym należy pamiętać, jest w tym przypadku type określający typ stylów. Najczęściej używamy typu text/css. Kiedy dokument jest uzupełniony o podany znacznik, możemy zacząć formatować poszczególne elementy.

Formatując dokumenty, powinniśmy określić grupę czcionek, które mają być używane w przeglądarkach internetowych. To zagwarantuje, że strona będzie prezentowana prawidłowo. Załóżmy, że wszystkie teksty, które pojawiają się na stronie, będą miały ten sam krój, przy czym w pierwszej kolejności będzie stosowana Helvetica, w razie jej braku Arial, a gdyby również jej nie było, to dowolna czcionka systemowa z rodziny fontów bezszeryfowych (rys. 12).


Rysunek 12. Zastosowanie wewnętrznego stylu CSS

Czym różnią się czcionki szeryfowe od bezszeryfowych? Krój szeryfowy oznacza taki rodzaj pisma, w którym występują motywy dekoracyjne (ornamenty). Krój bezszeryfowy jest ich pozbawiony (rys. 13). Czcionki szeryfowe są wyraźniejsze w druku, natomiast na ekranach monitorów lepiej wyglądają czcionki bezszeryfowe. Spowodowane jest to rozdzielczością ekranu, która jest o wiele mniejsza niż rozdzielczość druku, przez co elementy ozdobne tracą na jakości, a tekst staje się nieczytelny.

Warto odsunąć treść strony od jej brzegów. Możemy rozszerzyć style elementu <body>, wprowadzając wartość wszystkich marginesów (rys. 14).


Rysunek 13. Przykłady czcionek szeryfowych i bezszeryfowych

Ostatni sposób zastosowania stylów CSS to skorzystanie z pliku zewnętrznego. Tworzymy nowy plik, lecz tym razem w formacie CSS. Można go nazwać np. style.css. Plik zapisujemy oczywiście w tym samym folderze, w którym znajduje się plik HTML. Jeśli korzystamy z edytorów treści stron www, po utworzeniu nowego pliku powinna pojawić się deklaracja kodowania znaków (rys. 15). Jeśli zapis taki nie istnieje, należy go wprowadzić.




Rysunek 14. Formatowanie marginesów za pomocą wewnętrznych stylów CSS


Rysunek 15. Deklaracja sposobu kodowania znaków

Aby w zewnętrznym pliku CSS sformatować elementy, które występują na większości podstron, np. <header>, <body> lub <p>, wystarczy wprowadzić ich nazwy, a następnie w nawiasach {} określić ich style. Jeśli przyjrzymy się elementowi <header>, okaże się, że logo oraz tekst, które są w nim umieszczone, wydają się „przyklejone” do jego krawędzi. Chcąc odsunąć je nieco, musimy powiększyć margines wewnętrzny, przy czym w tym konkretnym przypadku zajmiemy się tylko marginesem lewym, prawym oraz górnym, margines dolny pominiemy. Cechą, której użyjemy, jest padding (rys. 16).

Padding, tak samo jak margin, mają tę właściwość, że nie musimy za każdym razem wpisywać, o który margines nam chodzi. Jeżeli zamiast padding-left:10px, padding-top:10px; itd. zastosujemy zapis padding:10px 20px 10px 0, będzie to również prawidłowa forma. Wystarczy tylko zapamiętać, że pierwsza wartość dotyczy marginesu górnego, następna prawego, kolejna dolnego i wreszcie ostatnia – lewego.


Rysunek 16. Określenie marginesów wewnętrznych elementu <header> w zewnętrznym pliku CSS

Zmieniliśmy szerokości marginesów, tymczasem nic się nie zmieniło. Zgadza się. Musimy teraz plik CSS dołączyć do dokumentu HTML. W elemencie <head> wprowadzamy ścieżkę prowadzącą do pliku style.css. Zapisujemy oba pliki – po odświeżeniu w przeglądarce zobaczymy wyraźną różnicę w elemencie <header> (rys. 17).

Jeśli w pliku zewnętrznym chcemy odwołać się do konkretnego obiektu na konkretnej podstronie, powinniśmy skorzystać z nieco innej metody. W takim przypadku nadajemy obiektowi identyfikator, który jednoznacznie będzie wskazywał właśnie na niego.

W dokumencie HTML zastosowaliśmy nagłówki <h1>, <h2> oraz <h3>. Bez względu na to, ile stron będzie zawierała witryna, za każdym razem napisy sformatowane tymi nagłówkami będą wyglądały identycznie. Chcemy, aby motto strony wyróżniało się kolorystycznie. W znaczniku <h1> wprowadzimy zatem identyfikator oraz jego nazwę, np. id=”slogan” (rys. 18). Wprowadzając identyfikator, zazwyczaj korzystamy z języka angielskiego, który jest najbardziej uniwersalny, jeśli chodzi o projektowanie stron. Oczywiście nie będzie błędem, jeśli zastosujemy polski wyraz, jednak wówczas należy pamiętać, aby nie używać znaków typowych dla języka polskiego, np. ą, ć, ż itp.



Rysunek 17. Dołączenie zewnętrznego pliku CSS do dokumentu HTML

Musimy teraz odwołać się do tego identyfikatora w arkuszu stylów. Odwołanie tworzymy za pomocą znaku # (rys. 19).


Rysunek 18. Przypisanie identyfikatora do wybranego obiektu

Jeżeli utworzymy pozostałe strony witryny i będziemy chcieli, aby hasło znajdujące się na nich również miało ten kolor, którego użyliśmy na stronie głównej, w każdym z dokumentów HTML musimy nadać temu elementowi taki sam identyfikator.

Inna możliwość to nadanie elementom tzw. klas i odwoływanie się do tych klas. Zajmiemy się naszym menu – aktualnie ma ono formę pionowej listy. Taka lista może pojawiać się również w treści strony. Gdybyśmy więc w zewnętrznym pliku CSS sformatowali elementy <ul> oraz <li>, każda lista, którą umieścilibyśmy później w witrynie, miałaby styl określony w pliku CSS. Aby uniknąć takiej ewentualności, nadamy liście klasę o nazwie menu. W tym celu w kodzie HTML w elemencie <ul> wprowadzamy zapis class=”menu” (rys. 20).



Rysunek 19. Odwołanie w zewnętrznym pliku CSS do identyfikatora


Rysunek 20. Nadawanie klasy wybranemu elementowi

Do klasy, w przeciwieństwie do identyfikatora, odwołujemy się nie za pomocą symbolu #, lecz kropki. Umieszczamy zatem w arkuszu stylów zapis .menu. W tym szczególnym przypadku musimy odwołać się nie tylko do samej klasy, lecz również do elementów <ul> oraz <li>. W pliku CSS wpisujemy zatem ul.menu, ul.menu li. Następnie powinniśmy wyczyścić z listy znaki wypunktowania. Użyjemy do tego celu stylu listy (rys. 21).



Rysunek 21. Usuwanie stylu listy

Zamieniamy listę na blok – w tym celu musimy zmienić sposób wyświetlania, czyli określić właściwość display. Aby ustawić elementy blokowe obok siebie i mieć możliwość ustalenia szerokości pojedynczego elementu oraz odstępów między nimi, powinniśmy zastosować oblewanie elementów. Zastosujemy cechę float, która może mieć wartość left (element jest ustawiany po lewej stronie względem pozostałych elementów), right (element jest wyrównywany do prawej strony) oraz none (element nie sąsiaduje z innymi elementami). W przypadku menu wybieramy wartość left. Pamiętajmy, że dotyczy to nie całej listy, lecz tylko jej pojedynczych pozycji, czyli <li> (rys. 22).



Rysunek 22. Zamiana listy na blok

Na rysunku 22 widać, że cecha float sprawiła, iż element <aside> również został ustawiony obok pozycji menu. Aby przenieść go niżej, musimy wyczyścić tę cechę dla elementu <aside> (rys. 23).



Rysunek 23. Czyszczenie oblewania elementów

Wracamy do menu – z bloku należy usunąć domyślne style zapisane w przeglądarkach. Należą do nich marginesy (margin) oraz marginesy wewnętrzne (padding). Ich wartość musi wynosić zero (rys. 24).



Rysunek 24. Usuwanie domyślnych marginesów

Aby menu odróżniało się graficznie od reszty strony, pod linkami umieścimy tło. Powyżej selektora ul.menu li wstawiamy selektor ul.menu. Ustawiamy szerokość (width) 100%, określamy wysokość (height), po czym wybieramy np. kolor tła (rys. 25).



Rysunek 25. Określenie rozmiaru menu oraz koloru jego tła

Jeśli chcemy, by hiperłącza stanowiące menu były ustawione w połowie wysokości tła, musimy tę wysokość podać raz jeszcze, tym razem właśnie dla hiperłaczy. Określimy także lewy oraz prawy margines wewnętrzny, aby odsunąć pozycje menu od krawędzi (rys. 26).



Rysunek 26. Ustawienie elementów menu

Pozycje menu mają już właściwe ustawienie. Kolejnym krokiem powinno być oczywiście nadanie odpowiedniej kolorystyki poszczególnym punktom menu. Ten element zostanie poruszony w dalszej części książki podczas realizacji strony responsywnej.

Spróbujemy ustawić teraz utworzone wcześniej elementy <aside>, <section> oraz <article> tak, aby pierwszy z tych elementów znajdował się z lewej strony, a pozostałe z prawej. Określmy na początku szerokość strony. W pliku CSS, zaraz po deklaracji kodowania, wprowadzamy selektor body, po czym ustawiamy szerokość np. 960 pikseli, górnemu marginesowi przypisujemy wartość zero, pozostałe marginesy mają zostać określone automatycznie – dzięki temu zawartość strony będzie wyrównana do środka (rys. 27).



Rysunek 27. Określenie szerokości strony i wyrównanie jej

Przesuniemy teraz element <aside>. Nieco wcześniej czyściliśmy oblewanie elementu – oczywiście zostawiamy to. Określamy szerokość bocznego paska i ustawiamy nowe oblewanie, aby móc ustawić sekcje i artykuły z prawej strony (rys. 28).

Бесплатный фрагмент закончился. Хотите читать дальше?