HTML5 i CSS3 Zaawansowane wzorce projektowe

Oszałamiające możliwości HTML5 pozwoliły projektantom na tworzenie zaawansowanych stron oraz aplikacji internetowych. Jednak wszędzie tam, gdzie realizowane są rozbudowane projekty, zaczynają się problemy ze złożonością struktury tworzonego rozwiązania. W typowych językach programowania zostało to już zauważone dawno temu, a antidotum na te bolączki stały się wzorce projektowe. Teraz przyszedł czas na HTML — najwyższa pora poznać najlepsze rozwiązania typowych problemów!

Książka "HTML5 i CSS3. Zaawansowane wzorce projektowe" zawiera opis ponad 350 wzorców projektowych w językach HTML5 i CSS3, przeznaczonych do budowy nowoczesnych stron internetowych. Każdy wzorzec można stosować w połączeniu z innymi, co daje nieskończoną liczbę możliwości udoskonalania produktów. Dzięki przedstawionym tu technikom nie trzeba stosować żadnych sztuczek i można uniknąć testowania w nieskończoność aplikacji w różnych przeglądarkach internetowych. Autorzy szczegółowo opisują wszystkie przydatne własności CSS3 oraz pokazują, jak połączyć je z kodem HTML5, aby uzyskać praktyczne rezultaty. Z książką tą nauczysz się tworzyć płynne układy stron, inicjały, uwagi na marginesie, cytaty i alerty. Ponadto poznasz wiele nowych technik, takich jak zaokrąglanie rogów i sprawdzanie danych wprowadzanych do formularzy.

Dzięki tej książce:

• poznasz najlepsze techniki tworzenia przejrzystego kodu HTML i CSS
• rozwiążesz typowe problemy z tworzeniem układów strony
• bezbłędnie sformatujesz tekst
• stworzysz kod tani w utrzymaniu!

Przejrzysty, czytelny kod to oszczędność czasu i pieniędzy.

Spis treści:

Wstęp (19)

• Adresaci (19)
• Innowacje (20)
• Konwencje (23)
• Korzystanie z tej książki (25)
• Jak podzielona jest książka (25)
• Kod źródłowy (27)
• Używanie kodu źródłowego (27)
• Kontakt z autorami (27)

Rozdział 1. Wzorce projektowe, czyli koniec problemów z CSS (29)

• Wzorce projektowe - przepisy strukturalne (30)
• Używanie wzorców projektowych (30)
• Używanie arkuszy stylów (35)
• Składnia CSS (36)
• Kaskadowość (40)
• Upraszczanie kaskady (42)
• Przydatne adresy (43)
• Często używane własności CSS (44)
• Własności i wartości CSS: ogólne (45)
• Własności i wartości CSS: treść (45)
• Własności i wartości CSS: układ (46)
• Własności i wartości CSS: specjalne (47)
• Selektory (47)
• Zapytania o media (48)
• Elastyczne jednostki miary (49)
• Stałe jednostki miary (50)
• Przeliczniki jednostek dla 96 dpi (50)
• Typowe rozmiary pisma przy 96 dpi (50)
• Przejścia, animacje i przekształcenia dwuwymiarowe (51)
• Rozwiązywanie problemów z CSS (52)
• Znormalizowany arkusz stylów (53)

Rozdział 2. Wzorce projektowe HTML (57)

• Streszczenie (57)
• Struktura HTML (58)
• Struktura HTML (60)
• XHTML (64)
• DOCTYPE (66)
• DOCTYPE (67)
• Elementy Nagłówka (69)
• Arkusz Warunkowy (71)
• Strukturalne Elementy Blokowe (73)
• Terminalne Elementy Blokowe (75)
• Wszechstronne Elementy Blokowe (77)
• Elementy Śródliniowe (79)
• Atrybuty Klasy i Identyfikatora (81)
• Białe Znaki w HTML (83)

Rozdział 3. Selektory i dziedziczenie w CSS (87)

• Streszczenie (87)
• Selektory Typu, Klasy i Identyfikatora (88)
• Selektory Pozycji i Grupowanie Selektorów (90)
• Selektory Atrybutów (92)
• Selektory Pseudoelementów (95)
• Selektory Pseudoklas (97)
• Selektor Podklasy (99)
• Dziedziczenie (101)
• Dziedziczenie Wizualne (103)

Rozdział 4. Modele polowe (105)

• Streszczenie (105)
• Rodzaje Pól (106)
• Model Polowy (108)
• Pole Śródliniowe (110)
• Pole Śródliniowo-Blokowe (112)
• Pole Blokowe (114)
• Pole Tabeli (116)
• Pole Pozycjonowane Bezwzględnie (118)
• Pole Pływające (120)

Rozdział 5. Określanie wymiarów pól (123)

• Streszczenie (123)
• Szerokość (124)
• Wysokość (126)
• Konkretny Rozmiar (128)
• Kurczliwy (130)
• Rozciągnięty (132)

Rozdział 6. Własności modelu polowego (135)

• Streszczenie (135)
• Margines (136)
• Obramowanie (138)
• Dopełnienie (141)
• Tło (143)
• Przepełnienie (145)
• Widoczność (147)
• Łamanie Stron (149)

Rozdział 7. Modele pozycjonowania (151)

• Streszczenie (151)
• Modele Pozycjonowania (152)
• Pozycjonowany (154)
• Najbliższy Pozycjonowany Przodek (156)
• Kontekst Stosowy (158)
• Wewnętrzny (160)
• Statyczny (162)
• Pozycjonowanie Bezwzględne (164)
• Pozycjonowanie Stałe (166)
• Pozycjonowanie Względne (168)
• Elementy Pływające (170)
• Względny Element Pływający (172)

Rozdział 8. Pozycjonowanie: wcinanie, przesuwanie i wyrównywanie elementów (175)

• Streszczenie (175)
• Wcięcia (176)
• Przesuwanie Elementów Statycznych (178)
• Przesuwanie i Wcinanie Statycznych Tabel (180)
• Przesuwanie Elementów Pływających (182)
• Przesuwanie Elementów Bezwzględnych i Stałych (184)
• Przesuwanie Elementów Względnych (186)
• Wyrównywanie Statycznych Elementów Śródliniowych (188)
• Wyrównywanie i Przesuwanie Statycznych Bloków (190)
• Wyrównywanie i Przesuwanie Statycznych Tabel (192)
• Wyrównywanie i Przesuwanie Elementów Bezwzględnych (194)
• Środkowanie Elementów Bezwzględnych (196)
• Wyrównanie Zewnętrzne (198)

Rozdział 9. Pozycjonowanie - techniki zaawansowane (201)

• Streszczenie (201)
• Wyrównanie do Lewej (202)
• Przesuwanie Elementów Wyrównanych do Lewej (204)
• Wyrównanie do Prawej (206)
• Przesuwanie Elementów Wyrównanych do Prawej (208)
• Wyrównanie do Środka (210)
• Przesuwanie Elementów Wyrównanych do Środka (212)
• Wyrównanie do Góry (214)
• Przesuwanie Elementów Wyrównanych do Góry (216)
• Wyrównanie do Dołu (218)
• Przesuwanie Elementów Wyrównanych do Dołu (220)
• Wyśrodkowanie Pionowe (222)
• Przesuwanie Elementów Wyśrodkowanych Pionowo (224)

Rozdział 10. Formatowanie tekstu (227)

• Streszczenie (227)
• Font (228)
• Wyróżnienie (230)
• Ozdoby Tekstu (232)
• Cień Tekstu (234)
• Zastępowanie Tekstu Grafiką (236)
• Zastępowanie Tekstu Kanwą i Obiektami VML (238)
• Osadzanie Fontów (240)
• Niewidoczny Tekst (241)
• Tylko dla Czytników Ekranu (242)

Rozdział 11. Stosowanie odstępów (245)

• Odstępy (246)
• Blokowy (248)
• Bez Zawijania (250)
• Zatrzymanie Białych Znaków (251)
• Kod (253)
• Dopełnienie Treści (255)
• Dystans Śródliniowy (257)
• Ozdoby Śródliniowe (259)
• Złamanie Wiersza (261)
• Śródliniowa Linia Pozioma (263)

Rozdział 12. Wyrównywanie treści (265)

• Wcięcie Tekstu (266)
• Wysunięcie Tekstu (267)
• Wyrównanie Treści w Poziomie (269)
• Pionowe Wyrównanie Treści (271)
• Przesuwanie Treści w Pionie (273)
• Indeks Górny i Dolny (275)
• Zagnieżdżanie Kontekstów Wyrównywania (277)
• Zaawansowany Przykład Wyrównywania (279)

Rozdział 13. Bloki (281)

• Streszczenie (281)
• Znaczenie Strukturalne (282)
• Struktura Wizualna (284)
• Sekcja (286)
• Listy (288)
• Punktory Graficzne (290)
• Śródliniowy (292)
• Scalanie Marginesów (294)
• Wsuwany (296)
• Pozioma Kreska (298)
• Odstęp między Blokami (300)
• Redukcja Odstępu między Blokami (301)
• Lewy Margines (303)
• Prawy Margines (305)

Rozdział 14. Obrazy (309)

• Streszczenie (309)
• Grafika (310)
• Mapa Obrazkowa (312)
• Gradient (314)
• Półprzezroczysty (316)
• Tekst Zastępowany (318)
• Treść nad Obrazem (319)
• Treść nad Obrazem Tła (321)
• Sprite'y CSS (323)
• Sprite'y CSS, kontynuacja (325)
• Obraz z Prostym Cieniem (327)
• Cień Obrazu (329)
• Cień Obrazu, kontynuacja (331)
• Cień Obrazu, kontynuacja (332)
• Zaokrąglone Rogi (334)
• Zaokrąglone Rogi, kontynuacja (336)
• Przykładowy Obraz (338)

Rozdział 15. Tabele (341)

• Streszczenie (341)
• Tabela (342)
• Grupowanie Wierszy i Kolumn (344)
• Selektory Tabel (346)
• Oddzielanie Krawędzi (348)
• Scalanie Krawędzi (350)
• Formatowanie Scalanych Krawędzi (351)
• Ukrywanie i Usuwanie Komórek (353)
• Ukrywanie i Usuwanie Wierszy i Komórek (355)
• Pionowe Wyrównanie Danych (357)
• Tabela w Paski (359)
• Tabelowy, Wierszowy i Komórkowy (361)
• Układ Tabeli (363)

Rozdział 16. Układy kolumn tabel (365)

• Modele układu tabel (365)
• Korzystanie z układów kolumn (366)
• Streszczenie (366)
• Szerokość Kolumny (368)
• Kurczliwe Kolumny (370)
• Kolumny o Stałej Szerokości (372)
• Kolumny Proporcjonalne do Treści (374)
• Kolumny Proporcjonalne do Innych Kolumn (376)
• Kolumny o Rozmiarach Procentowych (378)
• Kolumny o Odwróconych Proporcjach (380)
• Jednakowe Kolumny o Rozmiarze Treści (382)
• Kolumny o Takich Samych Rozmiarach (384)
• Niewyrośnięte Kolumny (386)
• Sprężyste Kolumny (388)
• Mieszane Układy Kolumn (390)

Rozdział 17. Układy stron (393)

• Streszczenie (393)
• Układy Płynne - Informacje Ogólne (394)
• Szerokość Zewnętrzna Pola (396)
• Projektowanie do wewnątrz, a projektowanie na zewnątrz (398)
• Pływająca Sekcja (400)
• Odstępy między Elementami Pływającymi (402)
• Układ Płynny (404)
• Naprzeciwległe Elementy Pływające (406)
• Formatowanie Zdarzeń (408)
• Sekcje Rozwijane (410)
• Menu z Zakładkami (413)
• Zakładki (417)
• Menu Rozwijane (421)
• Przycisk (425)
• Łącza Układowe (429)
• Układ Wielokolumnowy (431)
• Szablon (432)
• Przykładowy Układ (434)

Rozdział 18. Inicjały (439)

• Streszczenie (439)
• Wyrównany Inicjał (440)
• Inicjał (442)
• Wysunięty Inicjał (444)
• Inicjał z Grafiką i Dopełnieniem (446)
• Pływający Inicjał (448)
• Pływający Inicjał z Grafiką (450)
• Inicjał na Marginesie (452)
• Graficzny Inicjał na Marginesie (453)

Rozdział 19. Myśli przewodnie i cytaty (457)

• Streszczenie (457)
• Myśl Przewodnia Spływająca w Lewo (458)
• Myśl Przewodnia Spływająca w Prawo (460)
• Wyśrodkowana Myśl Przewodnia (462)
• Myśl Przewodnia na Lewym Marginesie (464)
• Myśl Przewodnia na Prawym Marginesie (466)
• Cytat Blokowy (468)
• Śródliniowy Cytat Blokowy (470)
• Cytat Śródliniowy (472)

Rozdział 20. Alerty (475)

• Streszczenie (475)
• Alert w JavaScript (476)
• Alert w Chmurce (478)
• Wyskakujący Alert (479)
• Wyskakujący Alert (481)
• Alert (483)
• Alert Śródliniowy (485)
• Wysunięty Alert (487)
• Alert Graficzny (489)
• Wsuwany Alert (491)
• Pływający Alert (493)
• Alert na Lewym Marginesie (495)
• Alert na Prawym Marginesie (497)
• Sprawdzanie Poprawności Formularzy (499)