Cyfroteka.pl

klikaj i czytaj online

Cyfro
Czytomierz
01281 012082 11047005 na godz. na dobę w sumie
Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice - książka
Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice - książka
Autor: Liczba stron: 488
Wydawca: Helion Język publikacji: polski
ISBN: 978-83-246-1375-5 Data wydania:
Lektor:
Kategoria: ebooki >> komputery i informatyka >> webmasterstwo >> tworzenie stron www
Porównaj ceny (książka, ebook, audiobook).

Od czego mam zacząć? Czy ja się do tego nadaję? Nie mam na to czasu... Wielu z nas właśnie z takim nastawianiem zabiera się do pisania swojej pierwszej strony internetowej. Takie i podobne wątpliwości rozwiewa właśnie ta książka, przeznaczona dla osób niemających żadnej wiedzy na temat tworzenia stron internetowych, a które chciałyby taką stronę wykreować. Czytając ją i pracując nad wieloma przykładami, nauczysz się, jak opracować swoją pierwszą stronę internetową i stopniowo odkryjesz w sobie pasję webmastera!

Jennifer Niederst Robbina, bazując na swoim kilkunastoletnim doświadczeniu w dziedzinie tworzenia stron internetowych, udowadnia, że pisać strony może każdy, należy mu tylko wskazać drogę. Książka 'Projektowanie stron internetowych' jest trzecią edycją przewodnika dla początkujących, lecz napisana została całkowicie od początku, z uwzględnieniem najnowszych technologii i trendów w tej dziedzinie. Dodatkowym atutem książki jest przejrzystość i łatwo przyswajalny język oraz liczne przykłady i ćwiczenia, które pozwalają lepiej zrozumieć i przyswoić materiał.

Poznaj techniki tworzenia, napisz i umieść własną stronę internetową w sieci!

Znajdź podobne książki Ostatnio czytane w tej kategorii

Darmowy fragment publikacji:

Projektowanie stron internetowych. Przewodnik dla pocz„tkuj„cych webmaster(cid:243)w po (X)HTML, CSS i grafice Autor: Jennifer Niederst Robbins T‡umaczenie: Anna Trojan ISBN: 978-83-246-1375-5 Tytu‡ orygina‡u: Learning Web Design: A Beginner Format: 180x235, stron: 488 (cid:149) Jak zacz„(cid:230) pisa(cid:230) strony internetowe? (cid:149) Jak wybra(cid:230) odpowiednie narzŒdzia do tworzenia witryn? (cid:149) Jak budowa(cid:230) arkusze styl(cid:243)w i optymalizowa(cid:230) (cid:159)r(cid:243)d‡o strony HTML? Od czego mam zacz„(cid:230)? Czy ja siŒ do tego nadajŒ? Nie mam na to czasu(cid:133) Wielu z nas w‡a(cid:156)nie z takim nastawianiem zabiera siŒ do pisania swojej pierwszej strony internetowej. Takie i podobne w„tpliwo(cid:156)ci rozwiewa w‡a(cid:156)nie ta ksi„¿ka, przeznaczona dla os(cid:243)b niemaj„cych ¿adnej wiedzy na temat tworzenia stron internetowych, a kt(cid:243)re chcia‡yby tak„ stronŒ wykreowa(cid:230). Czytaj„c j„ i pracuj„c nad wieloma przyk‡adami, nauczysz siŒ, jak opracowa(cid:230) swoj„ pierwsz„ stronŒ internetow„ i stopniowo odkryjesz w sobie pasjŒ webmastera! Jennifer Niederst Robbina, bazuj„c na swoim kilkunastoletnim do(cid:156)wiadczeniu w dziedzinie tworzenia stron internetowych, udowadnia, ¿e pisa(cid:230) strony mo¿e ka¿dy, nale¿y mu tylko wskaza(cid:230) drogŒ. Ksi„¿ka (cid:132)Projektowanie stron internetowych(cid:148) jest trzeci„ edycj„ przewodnika dla pocz„tkuj„cych, lecz napisana zosta‡a ca‡kowicie od pocz„tku, z uwzglŒdnieniem najnowszych technologii i trend(cid:243)w w tej dziedzinie. Dodatkowym atutem ksi„¿ki jest przejrzysto(cid:156)(cid:230) i ‡atwo przyswajalny jŒzyk oraz liczne przyk‡ady i (cid:230)wiczenia, kt(cid:243)re pozwalaj„ lepiej zrozumie(cid:230) i przyswoi(cid:230) materia‡. (cid:149) Struktura i znaczniki HTML (cid:149) Elementy struktury (X)HTML (cid:149) Tabele, obrazki, odno(cid:156)niki, animacje i inne elementy stron (cid:149) Formatowanie tekstu (cid:149) Formularze i pola edycji (cid:149) P‡ywanie oraz pozycjonowanie element(cid:243)w stron (cid:149) Arkusze styl(cid:243)w CSS (cid:149) Uk‡ad strony oparty na arkuszach styl(cid:243)w CSS (cid:149) Techniki CSS (cid:149) Grafika stron internetowych i jej optymalizacja (cid:149) Umieszczanie stron w Internecie Poznaj techniki tworzenia, napisz i umie(cid:156)(cid:230) w‡asn„ stronŒ internetow„ w sieci! Wydawnictwo Helion ul. Ko(cid:156)ciuszki 1c 44-100 Gliwice tel. 032 230 98 63 e-mail: helion@helion.pl Spis treści Przedmowa . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11 Część I Podstawy Rozdział 1 Od czego zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15 Czy jestem spóźniony? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Od czego powinienem zacząć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16 Czego powinienem się nauczyć? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 17 Czy muszę nauczyć się Javy? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20 Co muszę kupić? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 Czego się nauczyłem? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Rozdział 2 Jak działa Internet? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Internet a World Wide Web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31 Serwowanie informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Słowo o przeglądarkach . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 Adresy stron internetowych (URL) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Anatomia strony internetowej . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 35 Składanie wszystkiego w całość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40 3 Rozdział 3 Natura projektowania stron internetowych . . . . . . . . . . . . . . . . . . . 1 Wersje przeglądarek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 Alternatywne środowiska przeglądania stron internetowych . . . . . . . . . . . . . . . . . . 44 Preferencje użytkownika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Różne platformy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50 Prędkość połączenia z Internetem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Rozmiar okna przeglądarki oraz rozdzielczość monitora . . . . . . . . . . . . . . . . . . . . . . . 52 Kolory monitora . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Należy znać publiczność docelową . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59 Pamiętanie o najważniejszym . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60 Część II Znaczniki HTML i struktura dokumentu Rozdział  Tworzenie prostej strony (przegląd HTML) . . . . . . . . . . . . . . . . . . . . . . 63 Strona internetowa krok po kroku . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Przed rozpoczęciem należy uruchomić edytor tekstu . . . . . . . . . . . . . . . . . . . . . . . . . 64 Krok 1 . Zaczynamy od treści strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 Krok 2 . Nadanie dokumentowi struktury . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69 Krok 3 . Zidentyfikowanie elementów tekstowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Krok 4 . Dodanie obrazka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Krok 5 . Zmiana wyglądu za pomocą arkusza stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . 78 Kiedy dobre strony nie działają dobrze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81 Przegląd (X)HTML — elementy struktury dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . 82 Rozdział 5 Oznaczanie tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 Bloki jako budulec strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84 Listy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88 Dodawanie złamania wiersza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92 Tekstowe elementy wewnętrzne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Elementy uniwersalne (div oraz span) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 98 Niektóre znaki specjalne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 101 Zestawienie wszystkiego razem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 103 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105 Przegląd (X)HTML — elementy tekstowe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 106  Spis treści Rozdział 6 Dodawanie odnośników . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .107 Atrybut href . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108 Tworzenie odnośników do stron znajdujących się w Internecie . . . . . . . . . . . . . . 109 Tworzenie odnośników w ramach własnej strony internetowej . . . . . . . . . . . . . . . 110 Otwieranie stron docelowych w nowym oknie przeglądarki . . . . . . . . . . . . . . . . . 120 Odnośniki z adresami poczty e-mail . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 123 Przegląd (X)HTML — element kotwicy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125 Rozdział 7 Dodawanie obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .127 Słowo o formatach obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127 Element img . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 128 Podawanie lokalizacji za pomocą atrybutu src . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130 Mapy obrazów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 139 Rozdział 8 Podstawowe znaczniki tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .11 W jaki sposób wykorzystywane są tabele . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141 Minimalna struktura tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 Nagłówki tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Rozciąganie komórek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 146 Dopełnienie komórek oraz odstępy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 148 Podpisy oraz podsumowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150 Dostępność tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151 Podsumowanie zagadnień związanych z tabelami . . . . . . . . . . . . . . . . . . . . . . . . . . . 152 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Przegląd (X)HTML — elementy tabeli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154 Rozdział 9 Formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155 Jak działają formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155 Element form . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 Zmienne oraz zawartość . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 159 Dostępność formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 160 Wielkie podsumowanie kontrolek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 162 Projektowanie i wygląd formularza . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174 Przegląd (X)HTML — formularze . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175 Spis treści 5 Rozdział 10 Rozumienie standardów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177 Wszystko, co zawsze chciałeś wiedzieć o HTML, ale bałeś się o to zapytać . . . . . . . 177 Na scenę wkracza XHTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181 Z punktu widzenia przeglądarki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Deklarowanie typu dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186 Jaką definicję typu dokumentu zastosować? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 188 Sprawdzanie poprawności dokumentów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 189 Kodowanie znaków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 192 Wszystko razem . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 195 Część III CSS i prezentacja dokumentu Rozdział 11 Zorientowanie na kaskadowe arkusze stylów . . . . . . . . . . . 199 Zalety CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 199 Jak działają arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200 Najważniejsze koncepcje . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206 Dalsza nauka CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214 Rozdział 12 Formatowanie tekstu (i jeszcze więcej selektorów) . . . . . . . . . . . 215 Właściwości dotyczące czcionek . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216 Zmiana koloru tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 229 Więcej typów selektorów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230 Zmiana stylu wiersza tekstu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234 Podkreślenia oraz inne „dekoracje” . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237 Zmiana wielkości liter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 238 Odstępy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 239 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 242 Przegląd CSS — właściwości dotyczące czcionki oraz tekstu . . . . . . . . . . . . . . . . . 244 6 Spis treści Rozdział 13 Kolory i tła (i jeszcze więcej selektorów oraz zewnętrzne arkusze stylów) . . . . . 25 Określanie wartości koloru . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 245 Kolor pierwszego planu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250 Kolor tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251 Wprowadzenie do selektorów pseudoklas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 252 Selektory pseudoelementów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 254 Obrazki tła . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258 Skrótowa właściwość background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 I wreszcie — zewnętrzne arkusze stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266 Arkusze stylów przeznaczone dla druku (oraz innych mediów) . . . . . . . . . . . . . . . 269 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271 Przegląd CSS — właściwości dotyczące koloru oraz tła . . . . . . . . . . . . . . . . . . . . . . 272 Rozdział 1 Model pojemnika (dopełnienie, obramowanie, marginesy) . . . . . 273 Pojemnik elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 273 Określanie wymiarów zawartości elementu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 274 Dopełnienie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 278 Obramowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281 Marginesy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287 Przypisywanie ról wyświetlania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 293 Przegląd modelu pojemnika . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294 Przegląd CSS — podstawowe właściwości modelu pojemnika . . . . . . . . . . . . . . . 296 Rozdział 15 Pływanie oraz pozycjonowanie . . . . . . . . . . . . . . . . . . . . . . . . . 297 Normalny układ dokumentu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297 Pływanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298 Podstawy pozycjonowania . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 307 Pozycjonowanie względne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308 Pozycjonowanie bezwzględne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 309 Pozycjonowanie sztywne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 319 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 321 Przegląd CSS — podstawowe właściwości dotyczące układu dokumentu . . . . . . 322 Spis treści 7 Rozdział 16 Układ strony oparty na CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Strategie związane z układem strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323 Sztywny układ strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 326 Elastyczny układ strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 328 Szablony stron internetowych . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330 Wyśrodkowanie strony o sztywnej szerokości . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346 Przegląd układów strony opartych na CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348 Rozdział 17 Techniki CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Właściwości stylów dotyczące tabel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349 Zmiana znaków wypunktowania oraz numerowania list . . . . . . . . . . . . . . . . . . . . . 352 Wykorzystywanie list do nawigacji po stronie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 356 Techniki zastępowania obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 359 Uzyskanie efektu rollover za pomocą CSS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361 Podsumowanie arkuszy stylów . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366 Przegląd CSS — właściwości dotyczące tabel oraz list . . . . . . . . . . . . . . . . . . . . . . . . 368 Część IV Tworzenie grafiki stron internetowych Rozdział 18 Podstawy grafiki stron internetowych . . . . . . . . . . . . . . . . . . . 371 Źródła obrazków . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 371 Zapoznanie się z formatami grafiki . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 374 Rozmiar oraz rozdzielczość obrazka . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 385 Praca z przezroczystością . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389 Podsumowanie informacji dotyczących grafiki stron internetowych . . . . . . . . . . 397 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 397 8 Spis treści Rozdział 19 Optymalizacja grafiki stron internetowych . . . . . . . . . . . . . . 399 Po co optymalizować grafikę? . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 399 Uniwersalne strategie optymalizacyjne . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 400 Optymalizacja plików GIF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 402 Optymalizacja plików JPEG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 406 Optymalizacja plików PNG . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 412 Optymalizacja pod kątem rozmiaru docelowego . . . . . . . . . . . . . . . . . . . . . . . . . . . . 413 Przegląd optymalizacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 414 Część V Od początku do końca Rozdział 20 Proces tworzenia strony internetowej . . . . . . . . . . . . . . . . . . . 17 1 . Konceptualizacja oraz zbieranie informacji . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 417 2 . Tworzenie i organizowanie treści strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 419 3 . Zaprojektowanie wyglądu i sposobu działania strony . . . . . . . . . . . . . . . . . . . . . . 420 4 . Stworzenie działającego prototypu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 421 5 . Testowanie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 422 6 . Uruchomienie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 7 . Utrzymywanie strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Przegląd procesu tworzenia strony . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 425 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426 Rozdział 21 Umieszczanie stron w Internecie . . . . . . . . . . . . . . . . . . . . . . . . 27 www .mojastrona .com . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 427 Znalezienie serwera WWW . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 429 Proces publikowania strony w Internecie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 432 Transfer plików za pomocą FTP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 435 Sprawdź się! . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 438 Spis treści 9 Dodatek A Odpowiedzi do ćwiczeń . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39 Dodatek B Selektory CSS2 .1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65 Skorowidz . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 67 10 Spis treści ROZDZIAŁ 11 Zorientowanie na kaskadowe arkusze stylów O arkuszach stylów wspomnieliśmy już kilka razy, a teraz w końcu się nimi zajmiemy, by nadać tworzonym stronom tak potrzebny styl. Kaskadowe arkusze stylów (Casca- ding Style Sheets, CSS) to standard W3C dotyczący defi niowania prezentacji doku- mentów napisanych w językach HTML, XHTML, a nawet XML. Prezentacja odnosi się do sposobu wyświetlania dokumentu lub dostarczania go do użytkownika — obo- jętnie czy na ekranie monitora komputera, wyświetlaczu telefonu komórkowego, czy też za pomocą odczytania na głos przez odpowiedni program. Kiedy CSS zajmuje się prezentacją, (X)HTML może powrócić do swojej pierwotnej roli — defi niowania struktury dokumentu oraz znaczenia. CSS jest osobnym językiem z własną składnią. Niniejszy rozdział omawia termi- nologię CSS wraz z najważniejszymi koncepcjami, które pomogą nam zrozumieć ko- lejne rozdziały, gdzie nauczymy się, w jaki sposób zmienia się style tekstu oraz czcio- nek, dodaje kolory i tła, a nawet tworzy podstawowy układ grafi czny strony w oparciu o CSS. Czy każdy po lekturze części III książki będzie ekspertem od arkuszy stylów? Najprawdopodobniej nie. Na pewno jednak każdy będzie miał solidne podstawy oraz sporo praktyki. Uwaga W podrozdziale „Dalsza nauka CSS” na końcu rozdziału znajduje się lista książek i stron, które pomogą Czytelnikom kontynuować edukację w zakresie kaskadowych arkuszy stylów. Zalety CSS Oczywiście nikt już raczej nie potrzebuje, żeby go przekonywać, że arkusze stylów to dobra droga, ale mimo wszystko warto krótko podsumować zalety korzystania z CSS. • Lepsza kontrola nad czcionkami oraz układem strony. Prezentacyjny (X)HTML nie jest w stanie zaoferować tego rodzaju kontroli nad czcionkami, tłem czy ukła- dem strony, jaka możliwa jest za pomocą CSS. • Mniej pracy. Wygląd całej witryny internetowej można zmienić za jednym razem, edytując jeden arkusz stylów. Dokonywanie drobnych poprawek, a nawet przepro- jektowanie całej strony za pomocą arkuszy stylów jest o wiele łatwiejsze, niż kiedy instrukcje prezentacyjne pomieszane są z kodem. W TYM ROZDZIALE Zalety oraz możliwości kaskadowych arkuszy stylów (CSS) W jaki sposób znaczniki (X)HTML tworzą strukturę dokumentu Pisanie reguł stylów CSS Dołączanie stylów do dokumentów (X)HTML Najważniejsze koncepcje z CSS: dziedziczenie, kaskada, specyfi czność, kolejność reguł oraz model pojemnika 199 Jak działają arkusze stylów Spotkanie ze standardami Pierwsza oficjalna wersja CSS (CSS Level 1 Recommendation, w skrócie CSS1) opublikowana została w 1996 roku i zawierała właściwości służące do dodawania instrukcji dotyczących czcionek, koloru oraz odstępu do elementów strony. Niestety, brak obsługi w przeglądarkach sprawił, że przyjmowanie tego standardu rozciągnęło się na kilka lat. Specyfikacja CSS Level 2 (CSS2) opub- likowana została w 1998 roku. Dodała przede wszystkim właściwości służące do pozycjonowania, które pozwoliły na wykorzystanie CSS w tworzeniu układu strony. Wprowadziła również style dla innych typów mediów (jak druk, urządzenia trzymane w dłoni czy urządzenia służące do odsłuchiwania treści), a także bardziej zaawansowane metody wybierania elementów do stylizacji. Specyfikacja CSS Level 2, Revision 1 (CSS2.1) wprowadza pewne drobne poprawki do CSS2 i w momencie pisania niniejszej książki ma status Candidate Recommendation. Na szczęście większość aktualnych przeglądarek obsługuje większą część specyfikacji CSS1, CSS2 oraz CSS2.1. Tak naprawdę niektóre przeglądarki obsługują już nawet opcje ze spe- cyfikacji CSS Level 3 (CSS3), która nadal jest rozwijana. Ta wersja dodaje obsługę tekstu pionowego, poprawia obsługę tabel oraz języków międzyna- rodowych, zapewnia lepszą integrację z innymi technologiami XML i inne drobnostki, takie jak wstawianie wielu obrazków tła do jednego elementu oraz możliwość ustalenia dłuższej listy nazw kolorów. Aktualny rozwój standardu CSS przez W3C można śledzić na stronie www.w3.org/Style/CSS. • Potencjalnie mniejsze dokumenty i krótszy czas pobierania. Stosowana niegdyś praktyka wykorzystywania zbędnych elementów font oraz zagnieżdżonych tabel powodowała rozdęcie dokumentów do niepotrzebnie dużych rozmiarów. Ale to nie wszystko: można także zastosować jeden arkusz stylów do wszystkich stron dla jednej witryny, oszczędzając kolejnych kilka bajtów. • Bardziej dostępne strony. Kiedy za kwestie związane z prezentacją odpowiedzialny jest CSS, można oznaczyć zawartość dokumentu w sposób znaczący, semantyczny, czyniąc go bardziej dostępnym dla przeglądarek niewizualnych lub urządzeń mobilnych. • Stabilna obsługa w przeglądarkach. Prawie każda przeglądarka będąca aktualnie w użyciu obsługuje wszystkie właściwości CSS Level 1 i większość CSS Level 2 (w ramce „Spotkanie ze standardami” wyjaśniono, czym są owe „poziomy”). Kiedy o tym pomyśleć, wykorzystywanie arkuszy stylów nie ma tak naprawdę żad- nych wad. Istnieje kilka pozostałości po czasach niespójnej obsługi CSS w przeglądar- kach, ale albo można ich uniknąć, albo spróbować je obejść, jeśli wie się już, gdzie się ich spodziewać. Na pewno nie może to być powód do zrezygnowania z CSS. Siła CSS Nie mówimy tutaj o drobnych sztuczkach w zakresie wyglądu stron, takich jak zmiana koloru nagłówków czy dodawanie wcięcia do tekstu. Kiedy używa się CSS w pełni jego możliwości, jest to potężne narzędzie do projektowania o wielu możliwościach. Ja przeko- nałam się do CSS po tym, jak zobaczyłam różnorodność oraz bogactwo projektów z CSS Zen Garden (www.csszengarden.com). Na rysunku 11.1 widać tylko kilka moich ulubio- nych. Wszystkie projekty wykorzystują dokładnie ten sam dokument źródłowy XHTML. Co więcej, żaden nie zawiera ani jednego elementu img (wszystkie obrazki wykorzystane zostały jako tło). Warto zauważyć, jak bardzo różnią się od siebie te projekty i jak są przy tym wyszukane; wszystko to zostało osiągnięte za pomocą arkuszy stylów. Oczywiście tworzenie układów strony opartych na CSS i widocznych na rysun- ku 11.1 wymaga sporo praktyki. Zaawansowane umiejętności w projektowaniu grafiki także będą przydatne (niestety, ich opisu nie znajdzie się w niniejszej książce). Pokazuję te przykłady, ponieważ chcę, by każdy był świadom potencjału projektów stron opar- tych na CSS, szczególnie że przykłady z książki przeznaczonej dla osób początkujących siłą rzeczy muszą być proste. Należy się uczyć, jednak nie można zapominać o celu. Jak działają arkusze stylów To proste jak liczenie od 1 do 3! 1. Należy rozpocząć od dokumentu, który został oznaczony za pomocą HTML bądź XHTML. 2. Teraz trzeba napisać reguły stylów określające, jak powinny wyglądać poszczegól- ne elementy. 3. Należy dołączyć reguły stylów do dokumentu. Kiedy przeglądarka wyświetli doku- ment, będzie stosowała się do reguł wyświetlania elementów z arkusza stylów (o ile użytkownik nie zastosował własnych stylów, do czego dojdziemy za chwilę). Oczywiście tak naprawdę to nie wszystko. Rozważmy każdy z tych kroków nieco bardziej szczegółowo. 200 Część III: CSS i prezentacja dokumentu Jak działają arkusze stylów Rysunek 11.1. Wszystkie strony z CSS Zen Garden wykorzystują ten sam dokument źródłowy XHTML, jednak projekt zmieniany jest za pomocą samego CSS (obrazki wykorzystane za zgodą CSS Zen Garden oraz poszczególnych autorów). Rozdział 11. Zorientowanie na kaskadowe arkusze stylów 201 Jak działają arkusze stylów ćwiczenie 11.1. Twój pierwszy arkusz stylów W tym ćwiczeniu dodamy kilka prostych stylów do krótkiego artykułu. Dokument XHTML zatytułowany twenties.html wraz z powiązanym z nim obrazkiem twenty_20s.jpg dostępne są w materiałach do książki na stronie http://helion.pl/ksiazki/prstin.htm. Należy najpierw otworzyć stronę w przeglądarce, by zobaczyć, jak wygląda ona domyślnie (po- winna wyglądać mniej więcej tak, jak na rysunku 11.2). Można również otworzyć dokument w edytorze tekstu i przygotować się do śledzenia pracy nad nim w kolejnym podrozdziale. Rysunek 11.2. Tak wygląda artykuł bez żadnych instrukcji dotyczących stylów. Choć nie zrobi- my z niego cudu, zobaczymy, jak style działają w praktyce. 1. Oznaczanie dokumentu Dzięki lekturze poprzednich rozdziałów wiemy już sporo o ozna- czaniu zawartości dokumentu. Wiemy na przykład, jak ważne jest wybieranie elementów (X)HTML, które w adekwatny sposób opisują znaczenie tej zawartości. Pisałam również, że znaczniki tworzą strukturę dokumentu, czasami nazywaną warstwą struktu- ralną, na bazie której stosuje się warstwę prezentacji. W tym rozdziale oraz w kolejnych zobaczymy, że zrozumie- nie struktury dokumentu oraz relacji między elementami jest kluczowym elementem pracy twórcy arkuszy stylów. By poczuć, jak łatwo można zmienić wygląd strony doku- mentu za pomocą arkuszy stylów, warto spróbować pobawić się ćwiczeniem 11.1. Dobra wiadomość jest taka, że przygotowałam już niewielki dokument XHML, z którym będziemy pracować. 2. Pisanie reguł Arkusz stylów składa się z jednej lub większej liczby instrukcji stylów (nazywanych regułami) opisujących, w jaki sposób ele- ment lub grupa elementów powinny być wyświetlane. Pierw- szym krokiem w nauce CSS jest zapoznanie się z częściami re- guły. Jak widać, są one dość intuicyjne. Każda reguła wybiera element i deklaruje, w jaki sposób powinien on działać. Poniższy przykład zawiera dwie reguły. Pierwsza z nich spra- wia, że wszystkie elementy h1 w dokumencie będą zielone, na- tomiast druga wskazuje, że akapity powinny być napisane małą czcionką bezszeryfową. h1 { color: green; } p { font-size: small; font-family: sans-serif; } Uwaga Czcionki bezszeryfowe nie mają niewielkich kresek (szeryfów) na zakończeniach kresek głównych i wyglądają bardziej elegancko oraz nowocześnie. Więcej informacji na temat czcionek znajduje się w rozdziale 12., „Formatowanie tekstu”. W terminologii CSS dwie główne części reguły to selektor (ang. selector) identy- fikujący element lub elementy, na które reguła ma wpływ, oraz deklaracja zawierająca instrukcje dotyczące wyświetlania. Deklaracja z kolei składa się z właściwości (takiej jak color) oraz jej wartości (jak green) rozdzielonych dwukropkiem i spacją. Deklaracje umieszcza się wewnątrz nawiasów klamrowych, jak widać na rysunku 11.3. 202 Część III: CSS i prezentacja dokumentu Jak działają arkusze stylów Rysunek 11.3. Części reguły arkusza stylów. Selektory W poprzednim przykładzie arkusza stylów elementy h1 oraz p zostały wykorzystane jako selektory. Najbardziej podstawowy typ selektora nazywany jest selektorem typu elementu (ang. element type selector). Właściwości zdefiniowane powyżej będą miały zastosowanie do każdego elementu h1 oraz p w dokumencie. W kolejnych rozdziałach przedstawione zostaną bardziej zaawansowane selektory, które mogą być wykorzysty- wane do wybierania elementów, w tym ich grup, oraz elementów pojawiających się w określonym kontekście. Opanowanie selektorów — to znaczy wybieranie najlepszego typu selektora i wy- korzystywanie go w sposób strategiczny — jest ważnym celem w staniu się Mistrzem Jedi CSS. Deklaracje Deklaracja składa się z pary właściwość-wartość. W pojedynczej regule może znajdo- wać się większa liczba deklaracji — na przykład reguła dla elementu p zaprezentowana wcześniej zawiera właściwości font-size oraz font-family. Każda deklaracja musi się kończyć średnikiem w celu oddzielenia jej od kolejnej deklaracji (zobacz uwagę). Na- wiasy klamrowe oraz deklaracje, które one zawierają, często określa się mianem bloku deklaracji (ang. declaration block), jak na rysunku 11.3. Ponieważ CSS ignoruje białe znaki oraz znaki powrotu karetki wewnątrz blo- ku deklaracji, autorzy stron internetowych zazwyczaj piszą każdą deklarację z bloku w osobnym wierszu, jak w poniższym przykładzie. Dzięki temu łatwiej jest odnaleźć właściwości stosujące się do selektora; łatwiej jest też stwierdzić, gdzie reguła stylu się kończy. p { font-size: small; font-family: sans-serif; } Warto zauważyć, że nic się właściwie nie zmieniło — nadal mamy jeden zestaw nawiasów klamrowych, średniki po każdej deklaracji i tak dalej. Jedyną różnicą jest wstawienie nowych wierszy oraz znaków spacji w celu wyrównania zapisu. Sercem arkuszy stylów jest zbiór właściwości (ang. properties) standardowych, któ- re mogą być stosowane do wybranych elementów. Pełna specyfikacja CSS definiuje dziesiątki właściwości dla wszystkiego, od wcięcia tekstu aż po sposób odczytywania nagłówków tabel. W niniejszej książce omówiono właściwości najczęściej wykorzysty- wane oraz najlepiej obsługiwane (zobacz uwagę). Uwaga Z technicznego punktu wi­ dzenia średnik nie jest wy­ magany po ostatniej dekla­ racji w bloku, jednak lepiej jest wyrobić w sobie nawyk kończenia każdej deklaracji tym znakiem. Dzięki temu łatwiej będzie później do­ dawać kolejne deklaracje do danej reguły. Uwaga Kompletna lista właściwo­ ści z aktualnego standardu CSS2.1 znajduje się w reko­ mendacji W3C dostępnej pod adresem www.w3.org/TR/ åCSS21/propidx.html. Można także zajrzeć do którejś z książek poświęco­ nych CSS, na przykład CSS. Kaskadowe arkusze stylów. Przewodnik encyklopedy­ czny. Wydanie III autorstwa Erica Meyera lub Web De­ sign in a Nutshell autorstwa Jennifer Robbins (to ja). Obie książki opublikowane zostały przez wydawnictwo O’Reilly, a w Polsce — Helion. Rozdział 11. Zorientowanie na kaskadowe arkusze stylów 203 Jak działają arkusze stylów Podawanie wartości miar Kiedy podaje się wartości miar, jednostka musi się znajdować bezpo- średnio po liczbie, jak poniżej: { margin: 2em; } Dodanie spacji przed jednostką sprawia, że właściwość nie będzie działała. NIEPOPRAWNIE: { margin: 2 em; } Dopuszczalne jest pominięcie jednostki w miarach równych zero: { margin: 0; } Wartości (ang. values) uzależnione są od właściwości. Niektó- re właściwości przyjmują wartości długości, inne wartości koloru, a jeszcze inne mają zdefiniowaną pewną liczbę słów kluczowych. Kiedy wykorzystuje się właściwość, należy wiedzieć, jakie wartości ona przyjmuje. W wielu prostych przypadkach wystarczy rozsą- dek (oraz czasami znajomość języka angielskiego). Zanim przejdziemy dalej, warto nabrać trochę wprawy przy kontynuacji ćwiczenia 11.1. ćwiczenie 11.1. Twój pierwszy arkusz stylów (kontynuacja) Należy otworzyć plik twenties.html w edytorze tekstu. W nagłówku dokumentu można zauważyć, że wstawiłam tam element style, w którym będziemy wpisywać reguły stylów. Element style wykorzystywany jest do osadzania reguł stylów w elemencie head dokumentu (X)HTML. Na początek dodamy niewielki arkusz stylów, który omawialiśmy w niniejszym podrozdziale. Należy wpisać poniższe reguły do dokumentu, tak jak poniżej: style type=”text/css” h1 { color: green; } p { font-size: small; font-family: sans-serif; } /style Teraz trzeba zapisać plik i zobaczyć go w przeglądarce. Powinno dać się zauważyć pewne zmiany (jeśli nasza przeglądarka wykorzystuje już czcionki bezszeryfowe, widoczna będzie tylko zmiana wielkości tekstu). Jeśli nie widać żadnych zmian, należy wrócić do dokumentu i sprawdzić, czy w kodzie znajdują się zawsze pary nawiasów klamrowych (otwierające oraz zamykające) oraz końcowe średniki. Łatwo jest przypad- kowo pominąć te znaki, sprawiając jednocześnie, że arkusze stylów przestaną działać. Teraz zmienimy arkusz stylów oraz dodamy do niego kolejne reguły, żeby zobaczyć, jak łatwe jest ich pisanie, a także zobaczyć efekty naszej pracy. Poniżej znajduje się kilka pomysłów, które można wykorzystać (należy pamiętać o każdorazowym zapisywaniu dokumentu, by zmiany były widoczne, kiedy zostanie on ponownie załadowany w przeglądarce). • Nadajmy elementowi h1 kolor szary (gray) i zobaczmy, jak wygląda w prze- glądarce. Teraz zmieńmy kolor na niebieski (blue). Na koniec niech zostanie on czerwony (red). Pełna lista dostępnych nazw kolorów zostanie przedstawiona w rozdziale 13., „Kolory i tła”. • Dodajmy nową regułę stylu, która sprawi, że również elementy h2 będą czerwone. • Dodajmy lewy margines o szerokości stu pikseli do elementów akapitów (p) za pomocą następującej deklaracji: margin-left: 100px; Należy pamiętać, że tę nową deklarację można dodać do istniejącej reguły dotyczą- cej elementu p. 204 Część III: CSS i prezentacja dokumentu • Teraz należy również dodać taki sam margines do nagłówków h2. • Dodajmy czerwone obramowanie o szerokości jednego piksela na dole elementu h1 za pomocą następującej deklaracji: border-bottom: 1px solid red; • Należy przesunąć obrazek do prawego marginesu i pozwolić tekstowi na „opływa- nie” go za pomocą właściwości float. Skrótowa właściwość margin pokazana w poniższej regule dodaje odstęp o wartości zero pikseli na górze i dole obrazka, a o wartości dwunastu pikseli po jego prawej i lewej stronie (wartości są kopiowane zgodnie z metodą wyjaśnioną w rozdziale 14., „Model pojemnika”). img { float: right; margin: 0 12px; } Kiedy wszystko jest gotowe, dokument powinien wyglądać mniej więcej jak ten pokazany na rysunku 11.4. Rysunek 11.4. Wygląd przykładowego artykułu po dodaniu niewielkiego arkusza stylów. Jak wspomniałam wcześniej, nie jest piękny, ale po prostu inny. Jak działają arkusze stylów Komentarze w arkuszach stylów Czasami przydaje się możliwość pozostawienia w arkuszu stylów komentarzy. Specyfikacja CSS ma własną składnię komentarzy, zapre- zentowaną poniżej: /* miejsce na komentarz */ Treść znajdująca się pomiędzy znakami /* oraz */ zostanie zignorowana podczas analizy arkusza stylów, co oznacza, że komentarz można zostawić w dowolnym miejscu arkusza — nawet wewnątrz reguły: body { font-size: small; /* tymczasowo */ } 3. Dołączanie stylów do dokumentu W poprzednich ćwiczeniach osadziliśmy arkusz stylów bezpośrednio w dokumencie XHTML za pomocą elementu style. Jest to tylko jeden z dostępnych sposobów prze- kazania informacji o stylach do dokumentu (X)HTML. Z czasem omówimy każdy z nich z osobna, ale na razie dobrze będzie przyjrzeć się przeglądowi dostępnych metod oraz terminologii. Zewnętrzne arkusze stylów Zewnętrzny arkusz stylów jest odrębnym dokumentem tekstowym, który zawiera pewną liczbę reguł stylów. Musi mieć rozszerzenie .css. Odnośnik do tego dokumentu .css podawany jest następnie w dokumentach (X)HTML lub też jest do nich w jakiś sposób importowany (zostanie to omówione w rozdziale 13.). W ten sposób wszystkie pliki witryny internetowej mogą korzystać z jednego arkusza stylów. To rozwiązanie daje największe możliwości i jest też preferowaną metodą dołączania arkuszy stylów do treści dokumentów. Osadzone arkusze stylów To typ arkuszy stylów, z jakim pracowaliśmy w ostatnim ćwiczeniu. Umieszczane są w dokumencie za pomocą elementu style, a ich reguły odnoszą się tylko do danego do- kumentu. Element style musi zostać umieszczony w części head dokumentu i musi też zawierać atrybut type identyfikujący zawartość elementu style jako text/css (aktualnie jest to jedyna dopuszczalna wartość). Poniższy przykład zawiera również komentarz (in- formacje na temat komentarzy znajdują się w ramce „Komentarze w arkuszach stylów”). head title Miejsce na wymagany tytuł dokumentu /title style type=”text/css” /* miejsce na reguły stylów */ /style /head Element style może także zawierać atrybut media wykorzystywany w odniesieniu do określonych rodzajów mediów, takich jak ekran komputera, druk czy urządzenia mobilne trzymane w dłoni. Kwestie te również omówione są w rozdziale 13. Style wewnętrzne Właściwości oraz wartości można również zastosować do pojedynczego elementu za pomocą atrybutu style umieszczonego w tym elemencie, jak poniżej: h1 style=”color: red” Wprowadzenie /h1 By dodać kilka właściwości, wystarczy rozdzielić je średnikami, jak w poniższym przykładzie: h1 style=”color: red; margin-top: 2em” Wprowadzenie /h1 Style wewnętrzne (ang. inline styles) mają zastosowanie tylko do elementu, w któ- rym się pojawiły. Powinno się unikać ich stosowania, o ile nadpisanie stylów pocho- dzących z osadzonego lub zewnętrznego arkusza stylów nie jest absolutnie koniecz- ne. Style wewnętrzne są dość problematyczne, ponieważ umieszczają one informacje o prezentacji wewnątrz kodu nadającego dokumentowi strukturę. Sprawiają także, że wprowadzanie zmian jest o wiele trudniejsze, ponieważ w kodzie źródłowym trzeba w takim przypadku odnaleźć każde wystąpienie atrybutu style. Brzmi to nieco jak wady związane z używaniem przestarzałego i niezalecanego elementu font, prawda? Rozdział 11. Zorientowanie na kaskadowe arkusze stylów 205 Najważniejsze koncepcje ćwiczenie 11.2. Zastosowanie stylu wewnętrznego Należy otworzyć artykuł twenties. html w stanie, w jakim zostawiono go ostatnio po ćwiczeniu 11.1. Każdy, kto wykonał całe ćwiczenie, powinien mieć w kodzie regułę dodającą kolor do elementów h2. Teraz należy napisać kod stylu we- wnętrznego, który sprawia, że drugi element h2 stanie się purpurowy. Robi się to, dodając atrybut style bezpośrednio do znacznika otwierają- cego elementu h2, jak poniżej: h2 style=”color: purple” Połączenie kropek /h2 Teraz ten nagłówek staje się pur- purowy, zmieniając kolor, jaki miał poprzednio. Pozostałe nagłówki h2 pozostają bez zmian. W ćwiczeniu 11.2 jest okazja do napisania kodu stylu wewnętrznego i sprawdzenia, w jaki sposób on działa. Nie będziemy już więcej pracować ze stylami wewnętrznymi, więc to jedyna taka szansa. Najważniejsze koncepcje Istnieje kilka podstawowych koncepcji, które należy zrozumieć, by w pełni pojąć sposób działania kaskadowych arkuszy stylów. Wprowadzę je teraz, by nie musieć zatrzymy- wać się później przy okazji przeglądu właściwości stylów. Każda z tych idei z pewnością pojawi się i zostanie zilustrowana przykładami w kolejnych rozdziałach. Dziedziczenie Czy oczy dziecka mają ten sam kolor co oczy rodziców? Czy dziecko dziedziczy ich kolor włosów? Unikalny uśmiech? Dokładnie tak jak rodzice przekazują pewne cechy dzieciom, elementy (X)HTML przekazują pewne właściwości stylów innym elemen- tom, które zawierają. Można sobie przypomnieć, że kiedy w ćwiczeniu 11.1 elementy p otrzymały styl czcionki określający ich wielkość oraz typ, element em z drugiego akapitu również stał się mały i bezszeryfowy, mimo że nie napisaliśmy dla niego osob- nej reguły (rysunek 11.5). Dzieje się tak, ponieważ element ten odziedziczył style po akapicie, w którym się znajduje. Rysunek 11.5. Element em dziedziczy style zastosowane do akapitu. Struktura dokumentu Tutaj do gry wkracza zrozumienie struktury dokumentu. Jak wspomniałam wcześ- niej, dokumenty (X)HTML mają pewną strukturę czy, inaczej, hierarchię. Przykła- dowo artykuł, nad którym pracujemy, zawiera element html, w którym znajdują się elementy head oraz body. Element body zawiera z kolei elementy nagłówków oraz akapitów. W kilku z akapitów znajdują się za to elementy wewnętrzne, takie jak obrazki (img) czy tekst zaakcentowany (em). Strukturę dokumentu można sobie wy- obrazić jako odwrócone drzewo rozgałęziające się od korzenia (elementu głównego), jak widać na rysunku 11.6. 206 Część III: CSS i prezentacja dokumentu Najważniejsze koncepcje Rysunek 11.6. Struktura drzewa dokumentu dla przykładowej strony twenties.html. Rodzice i dzieci Drzewo dokumentu staje się także drzewem rodzinnym (genealogicznym), jeśli cho- dzi o określanie związków pomiędzy elementami. Wszystkie elementy znajdujące się wewnątrz danego elementu określane są mianem jego potomków (ang. descendant). Przykładowo elementy h1, h2, p, em oraz img w dokumencie oraz na rysunku 11.6 są potomkami elementu body. Element zawarty bezpośrednio wewnątrz innego elementu (bez poziomów pośred- nich w hierarchii) określany jest mianem dziecka (ang. child) tego elementu. I odwrot- nie: element go zawierający jest rodzicem (ang. parent). W tym przypadku element em jest dzieckiem elementu p, natomiast element p jest rodzicem em. Wszystkie elementy znajdujące się w hierarchii wyżej od określonego elementu są jego przodkami. Dwa elementy mające tego samego rodzica są rodzeństwem. Nie mówimy jednak o „ciotkach” czy „kuzynach”, więc na tym analogie się kończą. Ten wy- kład może wydawać się dość akademicki, ale przyda się, kiedy będzie mowa o pisaniu selektorów CSS. Przekazywanie Kiedy pisze się regułę stylu dotyczącą czcionki, wykorzystując p jako selektor, reguła ta odnosi się do wszystkich akapitów dokumentu, a także wszystkich tekstowych elemen- tów wewnętrznych, jakie one zawierają. Dowód prawdziwości tego stwierdzenia moż- na było zaobserwować jeszcze na rysunku 11.5 na podstawie elementu em dziedziczą- cego właściwości stylów zastosowane do elementu p. Na rysunku 11.7 zaprezentowano, co się dzieje, na diagramie przedstawiającym strukturę dokumentu. Warto zauważyć, że nie uwzględniono elementu img, ponieważ właściwości związane z czcionkami nie mają zastosowania do obrazków. wskazówka dotycząca css Kiedy poznajemy nową właściwość stylu CSS, dobrze jest zapamiętać, czy jest ona dziedziczona. Kwestia dziedziczenia wymieniona jest w przypadku każdej właściwości omówionej w książce. W większości przypadków dziedziczenie zachowuje się zgodnie z oczekiwaniami. Rozdział 11. Zorientowanie na kaskadowe arkusze stylów 207 Najważniejsze koncepcje Rysunek 11.7. Niektóre właściwości mające zastosowanie do elementu p są dziedziczone przez dzieci tego elementu. Warto zwrócić uwagę na to, że napisałam, iż dziedziczone są niektóre właściwości. Należy pamiętać, że pewne właściwości arkuszy stylów są dziedziczone, podczas gdy inne nie. Generalnie właściwości związane ze stylizacją tekstu — jak rozmiar czcionki, jej kolor czy styl — przekazywane są do elementów potomnych. Właściwości takie, jak marginesy, obramowanie, tło i podobne, wpływające na zamknięty obszar znajdujący się wokół elementu, zazwyczaj nie są przekazywane. Jeśli się nad tym zastanowić, ma to sens. Jeżeli na przykład wokół akapitu umieści się obramowanie, nie chce się przecież zobaczyć tego obramowania wokół każdego elementu wewnętrznego (takiego, jak em, strong czy a), który on zawiera. Dziedziczenie można wykorzystać, kiedy pisze się arkusze stylów. Jeśli na przykład chce się, by wszystkie elementy tekstowe były napisane czcionką Verdana, można zapisać osobne reguły stylów dla każdego elementu w dokumencie i ustawić właściwość font- face na Verdana. Zdecydowanie lepszym sposobem będzie jednak napisanie jednej regu- ły stylu, która przypisze właściwość font-face do elementu body i pozwoli, by wszystkie elementy tekstowe w nim się znajdujące odziedziczyły ten styl (rysunek 11.8). Rysunek 11.8. Wszystkie elementy dokumentu dziedzi- czą pewne właściwości stylu zastosowane do elementu body. 208 Część III: CSS i prezentacja dokumentu Najważniejsze koncepcje Arkusze stylów użytkownika Użytkownicy mogą pisać swoje włas- ne arkusze stylów i stosować je do stron oglądanych w ich przeglądarce. Rekomendacja CSS określa je mianem arkuszy stylów czytelnika (ang. reader style sheets), choć w praktyce częściej stosuje się nazwę arkusze stylów użytkownika. Zazwyczaj reguły stylów znajdujące się w arkuszu stylów autora strony (zewnętrznym, osadzonym lub wewnętrznym) wygrywają z arku- szem stylów użytkownika. Jeśli jednak użytkownik oznaczy styl jako ważny, będzie on triumfował nad wszystkimi innymi stylami dostarczonymi przez autora strony, a także wbudowanymi arkuszami stylów przeglądarki (więcej informacji na ten temat znajduje się w ramce „Przypisywanie ważności”). Jeśli zatem na przykład użytkownik z upośledzeniem wzroku nadpisze regułę nakazującą wyświetlanie każdego tekstu bardzo dużą czarną czcionką na białym tle, będzie miał gwarancję,
Pobierz darmowy fragment (pdf)

Gdzie kupić całą publikację:

Projektowanie stron internetowych. Przewodnik dla początkujących webmasterów po (X)HTML, CSS i grafice
Autor:

Opinie na temat publikacji:


Inne popularne pozycje z tej kategorii:


Czytaj również:


Prowadzisz stronę lub blog? Wstaw link do fragmentu tej książki i współpracuj z Cyfroteką: