przewiń do treści

HTML, XHTML i CSS. Praktyczne projekty. Wydanie II

Włodzimierz Gajda

Rysunki


Rysunek 1.1. Statystyki popularności przeglądarek dostępne w witrynie...
Rysunek 1.2. Edytor NotH
Rysunek 2.1. Pierwsza strona otworzona w przeglądarce Firefox
Rysunek 3.1. Ręczny wybór kodowania znaków na stronie WWW
Rysunek 3.2. Okno wyświetlane po wykonaniu operacji Widok/Źródło w...
Rysunek 4.1. Wyniki walidacji ćwiczenia 4.1 wtyczką HTML Validator...
Rysunek 4.2. Wszystkie ikony wtyczki HTML Validator
Rysunek 4.3. Wyłączanie pamięci podręcznej przeglądarki przy...
Rysunek 4.4. Wtyczka Web Developer Toolbar zawiera ikony informujące o...
Rysunek 4.5. Komunikat o błędzie składniowym wyświetlany przez...
Rysunek 4.6. Ikona informująca o tym, że w kodzie XHTML wystąpiły...
Rysunek 4.7. Okno zawierające listę błędów, jakie wystąpiły w...
Rysunek 5.1. Włączanie wykonania skryptu JavaScript w przeglądarce...
Rysunek 5.2. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 5.3. Informacje o stronie interpretowanej przez Firefoksa w...
Rysunek 5.4. Akapit sformatowany stylami z listingu 5.5 interpretowanymi...
Rysunek 5.5. Akapit sformatowany stylami z listingu 5.5 interpretowanymi...
Rysunek 6.1. Białe znaki wewnątrz akapitu są interpretowane jako...
Rysunek 6.2. Wpływ szerokości okna przeglądarki na łamanie tekstu
Rysunek 6.3. Wpływ wielkości czcionki na łamanie tekstu
Rysunek 6.4. Dzielenie wyrazów w przeglądarce Firefox
Rysunek 7.1. Wygląd witryny, której kod jest widoczny na listingach...
Rysunek 9.1. Wartości RGB wybranego koloru w programie Paint
Rysunek 11.1. Projekt 11.6 . Charles Dickens: A Christmas Carol
Rysunek 12.1. Szeryfy litery H w kroju Times New Roman
Rysunek 12.2. Brak szeryfów w kroju Arial
Rysunek 12.3. Litery duże i oraz małe l w krojach Arial i Verdana
Rysunek 12.4. Różnica pomiędzy czcionkami nieproporcjonalnymi i...
Rysunek 12.5. Czcionka Webdings
Rysunek 12.6. Czcionka Seville
Rysunek 12.7. Czcionka Petrucci
Rysunek 12.8. Czcionka Chess Kingdom
Rysunek 13.1. Okno dialogowe właściwości czcionki pozwala sprawdzić,...
Rysunek 13.2. Wygląd strony z ćwiczenia 13.1 na komputerze, na którym...
Rysunek 13.3. Wygląd strony z ćwiczenia 13.1 na komputerze, na którym...
Rysunek 15.1. Wygląd witryny z projektu 15.3 przy wyłączonych stylach...
Rysunek 16.1. Sprawdzanie domyślnego trybu wyświetlania elementu h1
Rysunek 16.2. Ćwiczenie umożliwiające zbadanie domyślnych wymiarów i...
Rysunek 16.3. Badanie położenia i rozmiaru elementów zagnieżdżonych
Rysunek 17.1. Cztery obszary prostokąta zajmowanego przez element
Rysunek 17.2. Strona , która tworzą listingi 17.1 oraz 17.2
Rysunek 17.3. Wpływ właściwości width oraz height na element liniowy...
Rysunek 17.4. Panel Układ wtyczki Firebug ilustruje wymiary marginesów,...
Rysunek 17.5. Łączenie marginesów pionowych
Rysunek 18.1. Element div z listingu 18.1
Rysunek 18.2. Wygląd dokumentu z listingu 18.2
Rysunek 18.3. Wygląd strony z listingu 18.2 po zmianie właściwości...
Rysunek 18.4. Rezultat usunięcia z listingu 18.2 właściwości width
Rysunek 18.5. Strona dwukolumnowa z listingów 18.3 oraz 18.4
Rysunek 18.6. Efekt uzyskiwany, gdy szerokość kolumn przekracza...
Rysunek 18.7. Wygląd strony z listingu 18.5
Rysunek 19.1. Strona z listingu 19.1
Rysunek 19.2. Pozycjonowanie względne
Rysunek 19.3. Wpływ właściwości top oraz left na położenie elementu...
Rysunek 19.4. Pozycjonowanie bezwzględne
Rysunek 19.5. Pozycjonowanie trwałe
Rysunek 19.6. Pozycjonowanie względnie bezwzględne
Rysunek 19.7. Kontekst pozycjonowania względnie bezwzględnego
Rysunek 19.8. Wygląd kodu z listingu 19.6
Rysunek 19.9. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 19.10. Pozycjonowanie kontekstowe i właściwości right: 0 oraz...
Rysunek 19.11. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 19.12. Pozycjonowanie kontekstowe i właściwości left: 0 oraz...
Rysunek 19.13. Pozycjonowanie kontekstowe i właściwości right: 100px...
Rysunek 19.14. Wyłączanie poszczególnych właściwości CSS przy...
Rysunek 19.15. Warstwa B przysłania warstwę A
Rysunek 19.16. Warstwy leżą jedna na drugiej, tworząc stos
Rysunek 19.17. Właściwość z-index: 2 podnosi warstwę z tekstem A na...
Rysunek 19.18. Elementy pozycjonowane kontekstowo mogą wystawać poza...
Rysunek 19.19. Strona z listingu 19.9 po przycięciu zawartości elementu...
Rysunek 20.1. Rozdzielczości monitorów stosowane przez polskich...
Rysunek 20.2. Układ nr 1
Rysunek 20.3. Układ nr 2
Rysunek 20.4. Układ nr 3
Rysunek 20.5. Układ nr 4
Rysunek 20.6. Układ nr 5
Rysunek 20.7. Układ nr 6
Rysunek 20.8. Układ nr 7
Rysunek 20.9. Układ nr 8
Rysunek 22.1. Dwukolumnowy układ hybrydowy
Rysunek 22.2. Dwukolumnowy układ hybrydowy po zmianie szerokości okna...
Rysunek 22.3. Trójkolumnowy układ hybrydowy
Rysunek 22.4. Trójkolumnowy układ hybrydowy z rysunku 22.3 po zmianie...
Rysunek 25.1. Symbol wypunktowania punkt1.png
Rysunek 25.2. Symbol wypunktowania z pliku punkt2.png
Rysunek 25.3. Wartości inside (z lewej) oraz outside (z prawej)...
Rysunek 26.1. Wycięty liść
Rysunek 26.2. Warstwy obrazu html.gif
Rysunek 26.3. Obraz umieszczony wewnątrz dużej ilości tekstu
Rysunek 26.4. Tekst opływa obraz dzięki użyciu właściwości float (w...
Rysunek 26.5. Wiele akapitów opływa obraz
Rysunek 26.6. Element pływający, który generuje wysokość,...
Rysunek 27.1. Tabela z zestawieniem najdłuższych rzek świata
Rysunek 27.2. Element body jest obecny w drzewie DOM nawet wtedy, gdy...
Rysunek 28.1. Kształt hiperłączy z listingu 28.9.
Rysunek 29.1. Przycisk Umieść
Rysunek 30.1. Struktura folderów projektu 30.4
Rysunek 30.2. Kopiowanie adresu URL bieżącej strony WWW
Rysunek 30.3. Obraz na białym tle
Rysunek 30.4. Obraz po dodaniu obramowania
Rysunek 30.5. Obraz po umieszczeniu na stronie o szarym tle
Rysunek 31.1. Wpływ wpisu background-position: 350px 140px na...
Rysunek 32.1. Strona z ćwiczenia 31.5 przy włączonych stylach CSS
Rysunek 32.2. Strona z ćwiczenia 31.5 przy wyłączonych stylach CSS
Rysunek 32.3. Strona stosująca technikę FIR po wyłączeniu...
Rysunek 32.4. Strona z ćwiczenia 32.4 przy włączonych stylach CSS i...
Rysunek 32.5. Strona z ćwiczenia 32.5 po usunięciu z folderu obrazów
Rysunek 32.6. Opcja Wyłącz obrazki wtyczki Web Developer Toolbar
Rysunek 33.1. Wysokość obramowania kolumny środkowej zależy od...
Rysunek 33.2. Tło wykorzystane w efekcie udawanych kolumn
Rysunek 33.3. Witryna o trzech kolumnach. Obramowanie kolumny środkowej...
Rysunek 33.4. Udawane kolumny jako tło elementu body rozciągają się...
Rysunek 33.5. Strona z rysunku 33.3 po zmniejszeniu szerokości okna jest...
Rysunek 33.6. Strona z rysunku 33.4 po zmniejszeniu szerokości okna...
Rysunek 34.1. Obraz calosc.jpg o wymiarach 800×600 pikseli
Rysunek 34.2. Obraz fragment.jpg o wymiarach 340×190 pikseli
Rysunek 34.3. Położenie obrazu fragment.jpg wewnątrz obrazu calosc.jpg
Rysunek 34.4. Obraz ul-bkg.png o wymiarach 800×600
Rysunek 34.5. Obraz o1.png o wymiarach 200×72
Rysunek 34.6. Obraz o2.png o wymiarach 205×82
Rysunek 34.7. Obraz o3.png o wymiarach 233×90
Rysunek 34.8. Obraz o4.png o wymiarach 344×95
Rysunek 34.9. Punkty zaczepienia obrazów o1.png, o2.png, o3.png oraz...
Rysunek 34.10. Ocena dwie gwiazdki widoczna po wskazaniu kursorem drugiej...
Rysunek 34.11. Plik gwiazdki-off.png
Rysunek 34.12. Plik gwiazdki-on.png
Rysunek 35.1. Sześć plików, które chcemy umieścić na stronie WWW
Rysunek 35.2. Jeden plik zawierający sześć plików z rysunku 35.1...
Rysunek 35.3. Fragment obrazu piora.jpg, który ma zostać wykorzystany...
Rysunek 35.4. Obraz oba.png składa się z dwóch fragmentów
Rysunek 35.5. Obraz calosc-kafelki.jpg
Rysunek 35.6. Obraz kafelki.png z ćwiczenia 35.4
Rysunek 35.7. Punkty zaczepienia kafelków
Rysunek 35.8. Wielowarstwowy obraz XCF wykorzystany w ćwiczeniu 35.5
Rysunek 35.9. Obraz sprite.png wykorzystany w ćwiczeniu 35.5
Rysunek 35.10. Prostokąty wyznaczające zasięg opcji menu
Rysunek 35.11. Plik sprite.png otrzymany po sklejeniu czterech oddzielnych...
Rysunek 36.1. Plik sprite.png zawierający trzy obrazy, które...
Rysunek 36.2. Plik sprite.png z ikonami
Rysunek 41.1. Standardowy wiersz wprowadzania danych oraz pole typu...
Rysunek 41.2. Pola wyboru
Rysunek 41.3. Wykluczające się wzajemnie pola wyboru
Rysunek 41.4. Przycisk z ikoną
Rysunek 41.5. Listy wyboru
Rysunek 41.6. Lista z opcjami pogrupowanymi elementami optgroup
Rysunek 41.7. Pola wyboru pogrupowane elementami fieldset. Obie grupy...
Rysunek 42.1. Ikona kanału RSS wyświetlana przez przeglądarkę Firefox...
Rysunek 42.2. Wygląd kanału RSS witryny helion.pl
Rysunek 42.3. Ikony ułatwiające dotarcie do kanału RSS
Rysunek 42.4. Pasek narzędzi Następny/Poprzedni widoczny na stronie...
Rysunek 42.5. Struktura folderów i pliki tworzące rozwiązanie...
Rysunek 42.6. Przyciski następny/poprzedni wiążące strony witryny z...
Rysunek 42.7. Ikony witryn w przeglądarce Firefox
Rysunek 42.8. Ikona narysowana w programie GIMP
Rysunek 42.9. Ikona ikona.ico umieszczona na białym tle
Rysunek 42.10. Foldery i pliki rozwiązania ćwiczenia 42.5
Rysunek 45.1. Szczegóły zapytania HTTP wyświetlane w Firefoksie opcją...
Rysunek 45.2. Zapytania i odpowiedzi HTTP wyświetlane przez wtyczkę...
Rysunek 45.3. Reakcja Internet Explorera na typ application/xhtml+xml
Rysunek 46.1. Elastyczny element div o zaokrąglonych narożnikach
Rysunek 46.2. Elastyczny div po zmianie szerokości
Rysunek 46.3. Elastyczny div po zmianie wielkości czcionki
Rysunek 46.4. Sztywny, ale semantyczny element div o zaokrąglonych...
Rysunek 46.5. Sztywny div po zmianie szerokości ustalonej w CSS bez...
Rysunek 46.6. Sztywny div po zmianie wielkości czcionki
Rysunek 46.7. Akapit zawierający element strong
Rysunek 46.8. Akapit zawierający element b
Rysunek 46.9. Akapit zawierający element em
Rysunek 46.10. Akapit zawierający element i
Rysunek 46.11. Akapit zawierający element span
Rysunek 46.12. Akapit pozbawiony wewnętrznego elementu

Reklama

Szkolenia z Symfony 2.0