Responsive Web Design Projektowanie elastycznych witryn w HTML5 i CSS3 Wydanie III.pdf

(2559 KB) Pobierz
Tytuł oryginału: Responsive Web Design with HTML5 and CSS - Third Edition Develop future-proof
responsive websites using the latest HTML5 and CSS techniques
Tłumaczenie: Maksymilian Gutowski, z wykorzystaniem fragmentów poprzednich wydań w przekładzie
Macieja Reszotnika i Łukasza Piwki.
ISBN: 978-83-283-7419-5
Copyright © Packt Publishing 2020. First published in the English language under the title ‘Responsive Web
Design with HTML5 and CSS3 - Third Edition – (9781839211560)’.
Polish edition copyright © 2021 by Helion SA
All rights reserved.
All rights reserved. No part of this book may be reproduced or transmitted in any form or by any means,
electronic or mechanical, including photocopying, recording or by any information storage retrieval system,
without permission from the Publisher.
Wszelkie prawa zastrzeżone. Nieautoryzowane rozpowszechnianie całości lub fragmentu niniejszej
publikacji w jakiejkolwiek postaci jest zabronione. Wykonywanie kopii metodą kserograficzną,
fotograficzną, a także kopiowanie książki na nośniku filmowym, magnetycznym lub innym powoduje
naruszenie praw autorskich niniejszej publikacji.
Wszystkie znaki występujące w tekście są zastrzeżonymi znakami firmowymi bądź towarowymi ich
właścicieli.
Autor oraz Helion SA dołożyli wszelkich starań, by zawarte w tej książce informacje były kompletne
i rzetelne. Nie biorą jednak żadnej odpowiedzialności ani za ich wykorzystanie, ani za związane z tym
ewentualne naruszenie praw patentowych lub autorskich. Autor oraz Helion SA nie ponoszą również
żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji zawartych w książce.
Helion SA
ul. Kościuszki 1c, 44-100 Gliwice
tel. 32 231 22 19, 32 230 98 63
e-mail:
helion@helion.pl
WWW:
http://helion.pl
(księgarnia internetowa, katalog książek)
Pliki z przykładami omawianymi w książce można znaleźć pod adresem:
https://ftp.helion.pl/przyklady/reswe3.zip
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/reswe3
Możesz tam wpisać swoje uwagi, spostrzeżenia, recenzję.
Printed in Poland.
•
Kup książkę
•
Poleć książkę
•
Oceń książkę
•
Księgarnia internetowa
•
Lubię to! » Nasza społeczność
Spis treści
O autorze
O korektorach merytorycznych
Przedmowa
Rozdział 1. Podstawowe wiadomości o projektowaniu responsywnych stron
internetowych
Panorama przeglądarek i urządzeń
Projekt responsywny — definicja
Projektowanie responsywnych stron internetowych w pigułce
Obsługa przeglądarek
Edytory tekstu
Narzędzia do wytwarzania oprogramowania
Pierwszy przykład projektu responsywnego
Podstawowy plik HTML
Okiełznać obrazy
Zapytania medialne wkraczają do akcji
Wady opisanego przykładu
Podsumowanie
11
13
15
19
20
21
21
22
23
23
24
24
27
31
36
36
Rozdział 2. Znaczniki HTML
Prawidłowe rozpoczynanie strony HTML5
Znacznik doctype
Element HTML i atrybut lang
Kodowanie znaków
Pobłażliwy charakter znaczników HTML5
Rozsądne podejście do pisania kodu
Oddajmy cześć wszechmocnemu elementowi <a>
37
39
39
39
40
40
41
42
Kup książkę
Poleć książkę
Spis treści
Nowe elementy semantyczne HTML5
Element <main>
Element <section>
Element <nav>
Element <article>
Element <aside>
Element <header>
Element <footer>
Algorytm tworzenia zarysu dokumentu HTML5
Uwaga na temat elementów h1 – h6
Element div
Element p
Element blockquote
Elementy <figure> i <figcaption>
Elementy <details> i <summary>
Element <address>
Elementy semantyczne na poziomie tekstu
Element <span>
Element <b>
Element <strong>
Element <em>
Element <i>
Elementy języka HTML, które uległy dezaktualizacji
Praktyczne wykorzystanie elementów strukturalnych HTML5
Standardy dostępności stron WCAG i WAI-ARIA
WCAG
Standard WAI-ARIA
Osadzanie elementów multimedialnych w HTML5
Dodawanie do stron internetowych filmów i dźwięków
Responsywne odtwarzacze filmów i ramki wewnętrzne
Podsumowanie
Ćwiczenie
42
43
44
44
44
45
45
45
46
47
47
48
48
48
49
50
51
51
51
51
52
52
53
53
54
54
55
56
57
59
60
60
Rozdział 3. Zapytania medialne: obsługa zróżnicowanych obszarów roboczych
Znacznik meta viewport
Dlaczego zapytania medialne są potrzebne do budowy układów responsywnych
Podstawowa logika warunkowa w CSS
Składnia zapytań medialnych
Zapytania medialne w znaczniku <link>
Importowanie zapytań medialnych za pomocą dyrektywy @import
Zapytania medialne w arkuszach stylów
Odwracanie logiki zapytań medialnych
Łączenie
zapytań medialnych
Zestawienia zapytań medialnych
Standardowe zapytania medialne
Co można sprawdzać za pomocą zapytań medialnych
Modyfikowanie projektu strony za pomocą zapytań medialnych
63
66
68
68
69
70
70
70
71
71
71
72
72
73
4
Kup książkę
Poleć książkę
Spis treści
Zaawansowane zagadnienia dotyczące zapytań medialnych
Metody organizacji zapytań medialnych
Zasadność dzielenia zapytań medialnych na wiele plików
Śródliniowe
zagnieżdżanie zapytań medialnych
Łączyć
zapytania medialne w bloki czy rozpraszać je w różnych miejscach pliku
Zapytania medialne — poziom 4.
Funkcje interakcyjne
Funkcja doboru preferowanego schematu kolorów
Podsumowanie
76
77
77
78
78
80
80
82
83
Rozdział 4. Układy płynne, flexbox i obrazy responsywne
Konwertowanie układu stałego na elastyczny
Do czego służy model flexbox
Flexbox — wprowadzenie
Wyboista droga do flexboksa
Nie wpisuj przedrostków ręcznie
Podstawy flexboksa
Różne rodzaje układu flexboksa w różnych zapytaniach medialnych
Własność inline-flex
Wyrównywanie treści we flexboksie
Lepka stopka
Zmienianie kolejności elementów
Zawijanie z flexboksem
Podsumowanie wiadomości o flexboksie
Obrazy responsywne
Wewnętrzny problem obrazów responsywnych
Proste przełączanie rozdzielczości za pomocą atrybutu srcset
Zaawansowane techniki przełączania obrazów za pomocą atrybutu srcset
Prezentowanie obrazów za pomocą elementu picture
Podsumowanie
85
86
90
92
92
92
94
98
98
99
107
108
113
116
116
117
118
118
120
121
Rozdział 5. Układy oparte na siatce CSS
CSS Grid i problemy, które rozwiązuje
Podstawowa składnia siatki
Pojęcia i terminy dotyczące siatki
Tworzenie siatki
Jawne i niejawne definicje rozmieszczenia
Rozmieszczanie i definiowanie rozmiaru elementów siatki
Własność gap
Wartość repeat
Jednostki fr
Rozmieszczanie elementów w siatce
Wartość span
Wartość dense
Nazwane linie siatki
Własność grid-template-areas
Zastosowanie nabytych umiejętności
Wartości auto-fit i auto-fill
Funkcja minmax()
5
123
124
124
125
125
130
133
135
136
136
136
137
137
138
141
142
143
145
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin