Projektowanie stron
internetowych
Przewodnik dla
początkujących webmasterów po HTML5, CSS3 i grafice
Przybornik
narzędziowy webmastera zmienia się bardzo szybko. Technologie,
które parę lat temu były ciekawym eksperymentem, dziś są
powszechnie stosowane. Responsywność stron internetowych stała się
oczywistością. Modele Flexbox i Grid zrewolucjonizowały tworzenie
układów stron internetowych. Zmieniły się używane formaty
grafik, wzrosła też znacząco liczba narzędzi, które
należałoby poznać. Naturalnie, wciąż można wskazać aspekty
projektowania, które pozostały niezmienne - przejrzystość,
funkcjonalność, estetykę, a także przestrzeganie standardów.
To kolejne, rozbudowane i
uaktualnione wydanie świetnego podręcznika projektowania i
programowania stron internetowych, zawierające wiedzę niezbędną do
rozpoczęcia samodzielnej pracy.
Opisano
tu zasady tworzenia witryn WWW oraz przedstawiono język HTML i techniki
CSS. Sporo miejsca poświęcono multimediom: grafice, plikom dźwiękowym i
wideo. Znalazł się tutaj także znakomity wstęp do języka JavaScript,
łącznie z jego bibliotekami, nakładkami i skryptami DOM. Warto też
zwrócić uwagę na opis przydatnych narzędzi, takich jak
procesory CSS, wykrywanie funkcjonalności, powłoka, menedżer zadań i
system kontroli Git ? nieodzownych każdemu, kto pisze nowoczesne
witryny internetowe. Treść książki została uzupełniona licznymi
przykładami, ćwiczeniami i bogatym materiałem dodatkowym.
Najważniejsze zagadnienia:
- tworzenie stron za pomocą
HTML i CSS, w tym modele CSS Flexbox i siatki
- korzystanie z JavaScriptu
- grafika: tworzenie,
optymalizacja i możliwości formatu SVG
- tworzenie stron
przeznaczonych zarówno na monitory, jak i na urządzenia
mobilne
- projektowanie responsywne
- nowoczesne narzędzia
projektanta stron WWW
Słowo
wstępne (xi)
Przedmowa (xiii)
CZĘŚĆ I.
PODSTAWY
Rozdział 1.
Rozpoczęcie
projektowania witryn internetowych
(3)
Od czego zacząć? (4)
Role podczas tworzenia witryn internetowych (4)
Co muszę kupić? (14)
Czego się nauczyłeś? (20)
Sprawdź się! (20)
Rozdział 2.
Jak działa internet? (21)
Internet a Web (21)
Dostarczanie informacji (22)
Kilka słów o przeglądarkach (23)
Adres strony internetowej (URL) (24)
Anatomia strony internetowej (27)
Składanie wszystkiego w całość (32)
Sprawdź się! (34)
Rozdział 3.
Kilka ważnych spraw, o których musisz wiedzieć
(35)
Od przybytku głowa boli (36)
Trzymanie się standardów (37)
Stopniowe ulepszanie (38)
Technika Responsive Web Design (40)
Web dla wszystkich, czyli dostępność (41)
Need for Speed - liczy się szybkość (44)
Sprawdź się! (46)
CZĘŚĆ II.
ZNACZNIKI HTML I STRUKTURA
DOKUMENTU
Rozdział 4.
Tworzenie
prostej strony (przegląd języka HTML)
(49)
Strona internetowa krok po kroku (49)
Przed rozpoczęciem należy uruchomić edytor tekstu (50)
Krok 1. Zaczynamy od zawartości (53)
Krok 2. Nadajemy dokumentowi strukturę (55)
Krok 3. Oznaczamy elementy tekstowe (59)
Krok 4. Wstawiamy obrazek (62)
Krok 5. Zmieniamy wygląd za pomocą arkusza stylów (66)
Kiedy dobre strony nie działają dobrze (67)
Walidacja dokumentów (68)
Sprawdź się! (70)
Przegląd elementów HTML tworzących strukturę dokumentu (70)
Rozdział 5.
Znaczniki
tekstowe (71)
Akapity (71)
Nagłówki (72)
Rozdzielanie treści (pozioma linia) (74)
Listy (74)
Inne elementy stosowane do treści (78)
Struktura zawartości strony (82)
Przegląd elementów liniowych (88)
Ogólne elementy div oraz span (98)
Poprawienie dostępności za pomocą technologii Aria (102)
Znaki ucieczki (105)
Zestawienie wszystkiego razem (108)
Sprawdź się! (111)
Przegląd elementów tekstowych (112)
Rozdział 6.
Hiperłącza (113)
Atrybut href (114)
Tworzenie odsyłaczy do stron internetowych (115)
Tworzenie odsyłaczy do stron z własnej witryny (116)
Otwieranie stron docelowych w nowym oknie przeglądarki (126)
Odsyłacze "pocztowe" (127)
Odsyłacze "telefoniczne" (128)
Sprawdź się! (128)
Przegląd elementów - odsyłacze (130)
Rozdział 7.
Grafika
(131)
Kilka słów o formatach obrazków (132)
Element img (134)
Dodawanie obrazków SVG (139)
Kod znaczników responsywnych obrazków (146)
Uff! To już koniec (159)
Sprawdź się! (159)
Przegląd elementów - obrazki (162)
Rozdział 8.
Tabele
(163)
Jak używać tabel (163)
Podstawowa struktura tabeli (165)
Nagłówki tabel (167)
Tworzenie zakresów komórek (168)
Dostępność tabel (169)
Grupy wierszy i kolumn (171)
Podsumowanie zagadnień związanych z tabelami (173)
Sprawdź się! (175)
Przegląd elementów HTML - tabele (176)
Rozdział 9.
Formularze
(177)
Jak działają formularze (177)
Element form (179)
Zmienne oraz zawartość (182)
Wielkie podsumowanie kontrolek (183)
Dostępność formularzy (203)
Projekt i układ formularza (206)
Sprawdź się! (208)
Formularze - przegląd elementów (209)
Rozdział 10.
Osadzone treści
multimedialne (215)
Okno w oknie (element iframe) (215)
Osadzanie różnych treści na stronie (218)
Elementy video i audio (219)
Element canvas (228)
Sprawdź się! (233)
Osadzone treści multimedialne - przegląd elementów (234)
CZĘŚĆ III.
CSS I PREZENTACJA DOKUMENTU
Rozdział 11.
Kaskadowe arkusze stylów (239)
Zalety CSS-a (239)
Jak działają arkusze stylów (240)
Najważniejsze koncepcje (246)
Jednostki miar w CSS-ie (253)
Narzędzia programistyczne wbudowane w przeglądarkę WWW (256)
Dalsza nauka CSS-a (258)
Sprawdź się! (259)
Rozdział 12.
Formatowanie tekstu (i
jeszcze więcej selektorów) (261)
Podstawowe właściwości czcionek (262)
Typografia zaawansowana wykorzystująca CSS3 (277)
Zmiana koloru tekstu (280)
Więcej typów selektorów (281)
Zmiana stylu wiersza tekstu (287)
Podkreślenia oraz inne "dekoracje" (290)
Zmiana wielkości liter (291)
Odstępy (292)
Cienie pod tekstem (293)
Zmiany wypunktowania i numeracji list (296)
Sprawdź się! (299)
Przegląd CSS-a - właściwości dotyczące czcionki oraz tekstu (301)
Rozdział 13.
Kolory i tła
(303)
Określanie wartości koloru (303)
Kolor pierwszego planu (311)
Kolor tła (312)
Wycinanie tła (314)
Zabawy z przezroczystością (315)
Wprowadzenie do selektorów pseudoklas (316)
Selektory pseudoelementów (320)
Selektory atrybutów (323)
Obrazki tła (324)
Skrótowa właściwość background (338)
Prawie tęcza (gradienty) (340)
I wreszcie - zewnętrzne arkusze stylów (348)
Zakończenie rozdziału (351)
Sprawdź się! (352)
Przegląd CSS-a - właściwości dotyczące koloru oraz tła (354)
Rozdział 14.
Model pojemnika
(355)
Pojemnik elementu (355)
Określanie wymiarów zawartości elementu (356)
Dopełnienie (361)
Obramowanie (366)
Marginesy (376)
Przypisywanie ról wyświetlania (380)
Dodawanie cienia do elementów (382)
Sprawdź się! (384)
Przegląd CSS-a - podstawowe właściwości modelu pojemnika (384)
Rozdział 15.
Pływanie oraz
pozycjonowanie (387)
Normalny układ dokumentu (387)
Pływanie (388)
Efektowne opływanie tekstu z użyciem kształtów CSS (399)
Podstawy pozycjonowania (405)
Pozycjonowanie względne (407)
Pozycjonowanie bezwzględne (408)
Pozycjonowanie sztywne (416)
Sprawdź się! (417)
Przegląd CSS-a - właściwości dotyczące pływania i pozycjonowania (418)
Rozdział 16.
Układ CSS z użyciem modeli
Flexbox i siatki (419)
Elastyczne pojemniki w modelu CSS Flexbox (419)
Układ oparty na siatce CSS (447)
Sprawdź się! (479)
Przegląd CSS-a - właściwości układu (482)
Rozdział 17.
Responsywny układ strony (485)
Dlaczego RWD? (485)
Przepis na układ responsywny (486)
Wybieranie punktów granicznych (495)
Tworzenie projektu responsywnego (499)
Kilka słów o testowaniu (512)
Więcej zasobów RWD (514)
Sprawdź się! (516)
Rozdział 18.
Przekształcenia,
transformacje i animacje (517)
Przejścia CSS (517)
Transformacje CSS (527)
Animacja klatkowa (536)
Zakończenie (542)
Sprawdź się! (542)
Przegląd właściwości CSS-a - przejścia, transformacje i animacje (545)
Rozdział 19.
Więcej technik CSS
(547)
Nadawanie stylów formularzom (547)
Nadawanie stylów tabelom (550)
Czysta strona (zerowanie stylów CSS i normalize.css) (554)
Techniki zastępowania tekstu obrazkiem (556)
Technika CSS Sprites (557)
Wykrywanie obsługiwanych funkcji CSS (559)
Podsumowanie arkuszy stylów (564)
Sprawdź się! (564)
Przegląd CSS-a - właściwości dotyczące tabel oraz list (566)
Rozdział 20.
Nowoczesne narzędzia do tworzenia witryn internetowych
(567)
Krótkie wprowadzenie do powłoki (567)
Potężne narzędzia CSS-a (procesory) (572)
Narzędzia do kompilacji (Grunt i Gulp) (578)
System kontroli wersji za pomocą Git i GitHub (581)
Podsumowanie (588)
Sprawdź się! (589)
CZĘŚĆ IV.
JAVASCRIPT
Rozdział 21.
Wprowadzenie do JavaScriptu
(593)
Czym jest JavaScript? (593)
Dodawanie skryptów na stronę (597)
Anatomia skryptu (598)
Obiekt przeglądarki (613)
Zdarzenia (613)
Podsumowanie (616)
Więcej informacji o JavaScripcie (617)
Sprawdź się! (619)
Rozdział 22.
Korzystanie z JavaScriptu i modelu obiektowego DOM (621)
Poznaj model DOM (621)
Wypełniacze (630)
Javascriptowe biblioteki (632)
Wielkie zakończenie (637)
Sprawdź się! (637)
CZĘŚĆ V.
TWORZENIE GRAFIKI STRON
INTERNETOWYCH
Rozdział 23.
Podstawy grafiki stron
internetowych (641)
Źródła obrazków (641)
Poznaj formaty grafiki (644)
Rozmiar oraz rozdzielczość grafiki (657)
Strategia związana z obrazkami (660)
Ikona favicon (665)
Podsumowanie informacji dotyczących grafiki stron internetowych (668)
Sprawdź się! (669)
Rozdział 24.
Tworzenie
obrazków na strony internetowe
(671)
Zapisywanie obrazka w formacie internetowym (671)
Praca z przezroczystością (676)
Wskazówki dotyczące tworzenia obrazków
responsywnych (680)
Optymalizacja obrazków (691)
Sprawdź się! (701)
Rozdział 25.
SVG (703)
Rysowanie za pomocą języka XML (705)
Funkcjonalność SVG jako XML (713)
Narzędzia SVG (718)
Wskazówki dotyczące tworzenia plików SVG (720)
Responsywne obrazki SVG (724)
Dalsza lektura (731)
Sprawdź się! (732)
Gotowe! (733)
CZĘŚĆ VI.
DODATKI
Dodatek A. Odpowiedzi do ćwiczeń (737)
Dodatek B. Atrybuty globalne HTML5 (753)
Dodatek C. Selektory CSS Level 3 i Level 4 (755)
Dodatek D. Od HTML+ do HTML5 (759)
784
strony, 19.0x23.0cm, oprawa miękka