przewiń do treści

HTML5 i CSS3. Praktyczne projekty

Włodzimierz Gajda

Rysunki


Rysunek 1.1. Statystyki popularności przeglądarek dostępne w witrynie...
Rysunek 2.1. Pierwsza strona otworzona w przeglądarce Firefox
Rysunek 2.2. Analiza strony z ćwiczenia 2.1 przy użyciu wtyczki...
Rysunek 3.1. Analiza kodu z listingu 3.1 wtyczką Firebug
Rysunek 3.2. Przykład analizy drzewa DOM dla dokumentu z listingu 3.3
Rysunek 4.1. Ręczny wybór kodowania znaków na stronie WWW
Rysunek 5.1. Wynik walidacji strony z listingu 5.1
Rysunek 5.2. Wynik walidacji strony z listingu 5.2
Rysunek 5.3. Komunikat o błędzie składniowym wyświetlany przez...
Rysunek 6.1. Włączanie wykonania skryptu JavaScript w przeglądarce...
Rysunek 6.2. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 6.3. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 6.4. Informacje o trybie interpretacji strony jest wyświetlana...
Rysunek 6.5. Informacja o trybie interpretacji strony wyświetlana przez...
Rysunek 6.6. Akapit sformatowany stylami z listingu 6.5 interpretowanymi...
Rysunek 6.7. Akapit sformatowany stylami z listingu 6.5 interpretowanymi...
Rysunek 7.1. Białe znaki wewnątrz akapitu są interpretowane jako...
Rysunek 7.2. Wpływ szerokości okna przeglądarki na łamanie tekstu
Rysunek 7.3. Wpływ wielkości czcionki na łamanie tekstu
Rysunek 7.4. Dzielenie wyrazów w przeglądarce Firefox
Rysunek 9.1. Wygląd witryny, której kod jest widoczny na listingach...
Rysunek 11.1. Wartości RGB wybranego koloru w programie Paint
Rysunek 13.1. Projekt 13.2. Charles Dickens: A Christmas Carol
Rysunek 14.1. Działanie znacznika <wbr /> oraz encji &shy;
Rysunek 14.2. Atrybuty title są wyświetlane w postaci chmurek...
Rysunek 15.1. Symbol wypunktowania punkt1.png
Rysunek 15.2. Symbol wypunktowania z pliku punkt2.png
Rysunek 15.3. Wartości inside (z lewej) oraz outside (z prawej)...
Rysunek 16.1. Wycięty liść
Rysunek 16.2. Warstwy obrazu html.gif
Rysunek 16.3. Obraz umieszczony wewnątrz dużej ilości tekstu
Rysunek 16.4. Tekst opływa obraz dzięki użyciu właściwości float (w...
Rysunek 16.5. Wiele akapitów opływa obraz
Rysunek 16.6. Element pływający, który generuje wysokość,...
Rysunek 17.1. Tabela z zestawieniem najdłuższych rzek świata
Rysunek 17.2. Tabela z rysunku 17.1 po usunięciu stylu atrybutu CSS...
Rysunek 17.3. Element body jest obecny w drzewie DOM nawet wtedy, gdy nie...
Rysunek 17.4. Stronicowanie podglądu wydruku tabeli zawierającej...
Rysunek 18.1. Operacja Zaznacz wszystkie odnośniki jako nieodwiedzone
Rysunek 18.2. Kształt hiperłączy z listingu 18.10
Rysunek 19.1. Automatyczne generowanie spisu treści wtyczką HTML5...
Rysunek 19.2. Spis treści dokumentu z listingu 19.2
Rysunek 19.3. Spis treści dokumentu zawierającego wszystkie elementy...
Rysunek 20.1. Kontrolka audio przeglądarki Firefox
Rysunek 20.2. Element video zawiera menu kontekstowe pozwalające na...
Rysunek 20.3. Przycisk Umieść
Rysunek 20.4. Publikowanie filmów z Dailymotion na własnej stronie WWW
Rysunek 21.1. C.a.R — aplet pozwalający na tworzenie dynamicznych...
Rysunek 21.2. Działanie poszczególnych wartości atrybutu target
Rysunek 21.3. Wyłączanie obsługi JavaScript przy użyciu wtyczki Web...
Rysunek 22.1. Struktura folderów projektu 22.4
Rysunek 22.2. Kopiowanie adresu URL bieżącej strony WWW
Rysunek 23.1. Szeryfy litery H w kroju Times New Roman
Rysunek 23.2. Brak szeryfów w kroju Arial
Rysunek 23.3. Litery duże „i” oraz małe „l” w krojach Arial i...
Rysunek 23.4. Różnica pomiędzy czcionkami nieproporcjonalnymi i...
Rysunek 23.5. Czcionka Webdings
Rysunek 23.6. Czcionka Seville
Rysunek 23.7. Czcionka Petrucci
Rysunek 23.8. Czcionka Chess Kingdom
Rysunek 24.1. Okno dialogowe właściwości czcionki pozwala sprawdzić,...
Rysunek 24.2. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym...
Rysunek 24.3. Wygląd strony z ćwiczenia 24.1 na komputerze, na którym...
Rysunek 24.4. Pobieranie pakietu ZIP zawierającego pliki z czcionkami,...
Rysunek 24.5. Strona wykorzystująca czcionki z serwisu Typekit
Rysunek 26.1. Układ trójkolumnowy w projekcie 13.2
Rysunek 26.2. Strona z ćwiczenia 26.2 w przeglądarce Firefox
Rysunek 26.3. Strona z ćwiczenia 26.2 w przeglądarce Internet Explorer
Rysunek 26.4. Kolumna o szerokości 200px może zajmować od 0 do 399...
Rysunek 26.5. Dwie kolumny o właściwości column-width: 200px —...
Rysunek 26.6. Kontynuacja tekstu w przypadku użycia nagłówków...
Rysunek 27.1. Wygląd witryny z projektu 27.2 przy wyłączonych stylach...
Rysunek 28.1. Sprawdzanie domyślnego trybu wyświetlania elementu h1
Rysunek 28.2. Ćwiczenie umożliwiające zbadanie domyślnych wymiarów i...
Rysunek 28.3. Badanie położenia i rozmiaru elementów zagnieżdżonych
Rysunek 29.1. Cztery obszary prostokąta zajmowanego przez element
Rysunek 29.2. Strona, która tworzą listingi 29.1 oraz 29.2
Rysunek 29.3. Wpływ właściwości width oraz height na element liniowy...
Rysunek 29.4. Panel Układ wtyczki Firebug ilustruje wymiary marginesów,...
Rysunek 29.5. Łączenie marginesów pionowych
Rysunek 30.1. Element div z listingu 30.1
Rysunek 30.2. Wygląd dokumentu z listingu 30.2
Rysunek 30.3. Wygląd strony z listingu 30.2 po zmianie właściwości...
Rysunek 30.4. Rezultat usunięcia z listingu 30.2 właściwości width
Rysunek 30.5. Strona dwukolumnowa z listingów 30.3 oraz 30.4
Rysunek 30.6. Efekt uzyskiwany, gdy szerokość kolumn przekracza...
Rysunek 30.7. Wygląd strony z listingu 30.5
Rysunek 31.1. Strona z listingu 31.1
Rysunek 31.2. Pozycjonowanie względne
Rysunek 31.3. Wpływ właściwości top oraz left na położenie elementu...
Rysunek 31.4. Pozycjonowanie bezwzględne
Rysunek 31.5. Pozycjonowanie trwałe
Rysunek 31.6. Pozycjonowanie względnie bezwzględne
Rysunek 31.7. Kontekst pozycjonowania względnie bezwzględnego
Rysunek 31.8. Wygląd kodu z listingu 31.6
Rysunek 31.9. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 31.10. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 31.11. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 31.12. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 31.13. Pozycjonowanie kontekstowe i właściwości right: 100px...
Rysunek 31.14. Wyłączanie poszczególnych właściwości CSS przy...
Rysunek 31.15. Warstwa B przysłania warstwę A
Rysunek 31.16. Warstwy leżą jedna na drugiej, tworząc stos
Rysunek 31.17. Właściwość z-index: 2 podnosi warstwę z tekstem A na...
Rysunek 31.18. Elementy pozycjonowane kontekstowo mogą wystawać poza...
Rysunek 31.19. Strona z listingu 31.9 po przycięciu zawartości elementu...
Rysunek 32.1. Rozdzielczości monitorów stosowane przez polskich...
Rysunek 32.2. Układ nr 1
Rysunek 32.3. Układ nr 2
Rysunek 32.4. Układ nr 3
Rysunek 32.5. Układ nr 4
Rysunek 32.6. Układ nr 5
Rysunek 32.7. Układ nr 6
Rysunek 32.8. Układ nr 7
Rysunek 32.9. Układ nr 8
Rysunek 34.1. Dwukolumnowy układ hybrydowy
Rysunek 34.2. Dwukolumnowy układ hybrydowy po zmianie szerokości okna...
Rysunek 34.3. Trójkolumnowy układ hybrydowy
Rysunek 34.4. Trójkolumnowy układ hybrydowy z rysunku 34.3 po zmianie...
Rysunek 35.1. Obraz na białym tle
Rysunek 35.2. Obraz po dodaniu obramowania
Rysunek 35.3. Obraz po umieszczeniu na stronie o szarym tle
Rysunek 36.1. Wpływ wpisu background-position: 350px 140px na...
Rysunek 36.2. Obraz tlo.jpg wykorzystany w ćwiczeniu 36.1 ma wymiary...
Rysunek 36.3. Wygląd strony z ćwiczenia 36.1
Rysunek 36.4. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.2
Rysunek 36.5. Wygląd strony z ćwiczenia 36.2
Rysunek 36.6. Obraz tlo-liscie.jpg wykorzystany w ćwiczeniu 36.3 ma...
Rysunek 36.7. Wygląd strony z ćwiczenia 36.3
Rysunek 36.8. Obraz lilia.jpg wykorzystany w ćwiczeniu 36.4
Rysunek 36.9. Wygląd strony z ćwiczenia 36.4
Rysunek 36.10. Obraz po-deszczu.jpg wykorzystany w ćwiczeniu 36.5
Rysunek 36.11. Wygląd strony z ćwiczenia 36.5
Rysunek 36.12. Obraz tlo-pas.jpg wykorzystany w ćwiczeniu 36.6
Rysunek 36.13. Wygląd strony z ćwiczenia 36.6
Rysunek 36.14. Strona z ćwiczenia 36.7
Rysunek 36.15. Strona z ćwiczenia 36.8
Rysunek 36.16. Strona z ćwiczenia 36.9
Rysunek 37.1. Strona z ćwiczenia 36.5 przy włączonych stylach CSS
Rysunek 37.2. Strona z ćwiczenia 36.5 przy wyłączonych stylach CSS
Rysunek 37.3. Strona stosująca technikę FIR po wyłączeniu...
Rysunek 37.4. Strona z ćwiczenia 37.5 przy włączonych stylach CSS i...
Rysunek 37.5. Strona z ćwiczenia 37.5 po usunięciu z folderu obrazów
Rysunek 37.6. Opcja Wyłącz obrazki wtyczki Web Developer Toolbar
Rysunek 38.1. Wysokość obramowania kolumny środkowej zależy od...
Rysunek 38.2. Tło wykorzystane w efekcie udawanych kolumn
Rysunek 38.3. Witryna o trzech kolumnach. Obramowanie kolumny środkowej...
Rysunek 38.4. Udawane kolumny jako tło elementu body rozciągają się...
Rysunek 38.5. Strona z rysunku 38.3 po zmniejszeniu szerokości okna jest...
Rysunek 38.6. Strona z rysunku 38.4 po zmniejszeniu szerokości okna...
Rysunek 39.1. Obraz calosc.jpg o wymiarach 800×600 pikseli
Rysunek 39.2. Obraz fragment.jpg o wymiarach 390×190 pikseli
Rysunek 39.3. Położenie obrazu fragment.jpg wewnątrz obrazu calosc.jpg
Rysunek 39.4. Obraz ul-bkg.png o wymiarach 800×600
Rysunek 39.5. Obraz o1.png o wymiarach 200×72
Rysunek 39.6. Obraz o2.png o wymiarach 205×82
Rysunek 39.7. Obraz o3.png o wymiarach 233×90
Rysunek 39.8. Obraz o4.png o wymiarach 394×95
Rysunek 39.9. Punkty zaczepienia obrazów o1.png, o2.png, o3.png oraz...
Rysunek 39.10. Ocena dwie gwiazdki widoczna po wskazaniu kursorem drugiej...
Rysunek 39.11. Plik gwiazdki-off.png
Rysunek 39.12. Plik gwiazdki-on.png
Rysunek 40.1. Sześć plików, które chcemy umieścić na stronie WWW
Rysunek 40.2. Jeden plik zawierający sześć plików z rysunku 40.1...
Rysunek 40.3. Przykład wykorzystania kafelkowania w witrynie Amazon.com
Rysunek 40.4. Przykład wykorzystania kafelkowania w witrynie...
Rysunek 40.5. Przykład wykorzystania kafelkowania w aplikacjach Google
Rysunek 40.6. Przykład wykorzystania kafelkowania w witrynie YouTube.com
Rysunek 40.7. To, czy dana witryna stosuje kafelkowanie, najłatwiej...
Rysunek 40.8. Fragment obrazu piora.jpg, który ma zostać wykorzystany...
Rysunek 40.9. Obraz przyciski.png z ćwiczenia 40.2
Rysunek 40.10. Obraz oba.png składa się z dwóch fragmentów
Rysunek 40.11. Obraz calosc-kafelki.jpg z ćwiczenia 40.4
Rysunek 40.12. Obraz kafelki.png z ćwiczenia 40.5
Rysunek 40.13. Punkty zaczepienia kafelków
Rysunek 40.14. Wielowarstwowy obraz XCF wykorzystany w ćwiczeniu 40.6
Rysunek 40.15. Obraz sprite.png wykorzystany w ćwiczeniu 40.6
Rysunek 40.16. Prostokąty wyznaczające zasięg opcji menu
Rysunek 40.17. Plik sprite.png otrzymany po sklejeniu czterech oddzielnych...
Rysunek 40.18. Powiększanie widoku strony powoduje pęknięcia w...
Rysunek 40.19. Sposób powstawania pęknięć kafelków z rysunku 40.18
Rysunek 40.20. Technika wykonania obrazu z kafelkami, który będzie...
Rysunek 40.21. Projekt, który wykorzystamy w ćwiczeniu 40.8
Rysunek 40.22. Obszar projektu z rysunku 40.21, który będzie widoczny na...
Rysunek 40.23. Technika krojenia obrazu 40.22 na kafelki
Rysunek 40.24. Plik sprite.png z ćwiczenia 40.8
Rysunek 40.25. Kafelkowanie wykorzystujące przezroczystość
Rysunek 41.1. Plik sprite.png zawierający trzy obrazy, które...
Rysunek 41.2. Plik sprite.png z ikonami
Rysunek 44.1. Menu kontekstowe z opcjami Lorem oraz Ipsum
Rysunek 45.1. Ikona kanału RSS wyświetlana przez przeglądarkę Firefox...
Rysunek 45.2. Wygląd kanału RSS witryny helion.pl
Rysunek 45.3. Ikony ułatwiające dotarcie do kanału RSS
Rysunek 45.4. Pasek narzędzi Poprzedni/Następny widoczny na stronie...
Rysunek 45.5. Struktura folderów i pliki tworzące rozwiązanie...
Rysunek 45.6. Przyciski poprzedni/następny wiążące strony witryny z...
Rysunek 45.7. Ikony witryn w przeglądarce Firefox
Rysunek 45.8. Ikona narysowana w programie GIMP
Rysunek 45.9. Ikona ikona.ico umieszczona na białym tle
Rysunek 45.10. Foldery i pliki rozwiązania ćwiczenia 45.6
Rysunek 48.1. Standardowy wiersz wprowadzania danych oraz pole typu...
Rysunek 48.2. Pola wyboru
Rysunek 48.3. Wykluczające się wzajemnie pola wyboru
Rysunek 48.4. Przycisk z ikoną
Rysunek 48.5. Listy wyboru
Rysunek 48.6. Lista z opcjami pogrupowanymi elementami optgroup
Rysunek 48.7. Pola wyboru pogrupowane elementami fieldset. Obie grupy...
Rysunek 49.1. Serwis Can I use… — http://caniuse.com
Rysunek 49.2. Serwis Find me by IP — http://fmbip.com
Rysunek 49.3. Strona z ćwiczenia 49.1 otworzona w Internet Explorerze 8

Reklama

Szkolenia z Symfony 2.1