Responsive Web Design Nowoczesne strony WWW na przykladach.pdf

(4969 KB) Pobierz
Tytuł oryginału: Responsive Web Design by Example
Tłumaczenie: Łukasz Piwko
ISBN: 978-83-246-9190-6
Copyright © 2013 Packt Publishing.
First published in the English language under the title „Responsive Web Design by Example”.
Polish edition copyright © 2014 by Helion S.A.
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 Wydawnictwo HELION 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 Wydawnictwo HELION nie
ponoszą również żadnej odpowiedzialności za ewentualne szkody wynikłe z wykorzystania informacji
zawartych w książce.
Wydawnictwo HELION
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)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/reweno
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 recenzentach
Przedmowa
Zawarto ksi ki
Co trzeba umie ?
Dla kogo jest ta ksi ka?
Zastosowane konwencje
Czas na dzia anie
Quiz
Zrób to sam
Przyk ady kodu
Errata
Piractwo
9
11
13
13
14
14
14
14
15
15
16
16
16
Rozdzia 1. Koncepcja RWD
Podstawowy projekt elastyczny
Metaznacznik viewport i zapytania medialne CSS3
Ograniczenia technik elastycznych
Skalowalne obrazy w elemencie picture
Dowiedz si wi cej o HTML5 i CSS3
Wprowadzenie do systemów RWD
Po co u ywa systemów?
Kto u ywa tych systemów?
Wady
Narz dzia potrzebne do budowy elastycznych stron internetowych
Przegl darki internetowe
Edytory kodu
Elastyczne skryptozak adki
17
18
18
20
20
23
24
24
26
30
30
30
31
31
Kup książkę
Poleć książkę
Spis tre ci
Krótkie wprowadzenie do preprocesorów CSS
Kompilatory kodu preprocesorów CSS
LESS
Sass, czyli Syntactically Awesome Stylesheets
Wi cej o preprocesorach CSS
Materia y do nauki LESS
Materia y do nauki Sassa
Co utworzymy w tej ksi ce?
Podsumowanie
32
33
33
39
41
42
42
42
43
Rozdzia 2. Tworzenie elastycznego portfolio przy u yciu systemu Skeleton
Podstawy systemu Skeleton
Czas na dzia anie — tworzenie katalogu roboczego i pobieranie systemu Skeleton
Co zawiera Skeleton?
Pocz tkowy dokument HTML
Skalowalna siatka
Zwijanie kontenera
Zapytania medialne
Style typograficzne
Style przycisków
Style formularzy
Ikony Apple’a
Szablon PSD
Jak ma wygl da budowana strona?
Nawigacja
Efekt hover
Tworzenie dokumentu w systemie Skeleton
Czas na dzia anie — dodawanie nowego pliku CSS
Dodawanie w asnych fontów
Czas na dzia anie — osadzanie fontów z serwisu Google Fonts
Przygotowywanie obrazów
Ikony mediów spo eczno ciowych
Czas na dzia anie — sprite’y
Ikony kontaktowe
Elementy HTML5
Atrybuty danych HTML5
Czas na dzia anie — konstruowanie dokumentu HTML
Podsumowanie
45
46
46
46
47
48
49
50
51
51
52
53
54
54
56
56
56
57
58
58
59
60
61
62
63
63
64
69
Rozdzia 3. Ulepszanie strony portfolio przy u yciu CSS3
Model polowy CSS
W asno CSS3 box-sizing
Czas na dzia anie — definiowanie w asno ci box-sizing
Jednostki miary CSS
Piksele
Jednostka em
Procenty
71
72
73
74
74
74
76
78
4
Kup książkę
Poleć książkę
Spis tre ci
Ustawianie rodziny fontów
Czas na dzia anie — ustawianie rodziny fontów nag ówków
Formatowanie nag ówka
Czas na dzia anie — definiowanie stylów nag ówka
Selektory CSS
Selektor dziecka
Selektor przylegaj cego elementu siostrzanego
Ogólny selektor elementu siostrzanego
Pseudoklasy CSS3
Pseudoklasa CSS3 :checked
Pseudoklasa CSS3 :nth-child
Style miniatur i podpisów
Czas na dzia anie — definiowanie stylów miniatur i podpisów
Przekszta cenia dwuwymiarowe CSS
Funkcja translate()
Przej cia CSS3
Warto ci przej CSS3
Czas na dzia anie — zmiana obrazu po najechaniu kursorem
Filtruj ca nawigacja po stronie
Czas na dzia anie — tworzenie filtra portfolio
Stopka
Czas na dzia anie — formatowanie stopki
Definiowanie stylów dla mniejszych ekranów
Czas na dzia anie — rozmiar obszaru widoku poni ej 960 pikseli
Czas na dzia anie — rozmiar obszaru widoku od 767 do 480 pikseli
Czas na dzia anie — rozmiar obszaru widoku poni ej 480 pikseli
Testowanie strony w ró nych rozmiarach obszaru widoku
Podsumowanie
78
79
80
80
81
81
82
83
84
84
84
85
86
90
91
93
93
94
97
98
99
100
105
106
107
109
111
113
Rozdzia 4. Tworzenie strony produktu przy u yciu systemu Bootstrap
Wprowadzenie do systemu Bootstrap
Czas na dzia anie — przygotowywanie systemu Bootstrap
Przygotowywanie grafik
Aplikacje LESS
Czas na dzia anie — instalowanie aplikacji CrunchApp
Tworzenie plików LESS
Czas na dzia anie — tworzenie nowego pliku LESS w CrunchAppie
Kompilowanie kodu LESS na standardowy CSS
Czas na dzia anie — dodawanie plików LESS do CrunchAppa
i kompilowanie ich na CSS
Dodawanie w asnych rodzin fontów przy u yciu regu y @font-face
Gdzie w internecie szuka darmowych fontów?
Sk adnia regu y @font-face
Formaty fontów dla ró nych przegl darek internetowych
Czas na dzia anie — definiowanie nowego fontu przy u yciu regu y @font-face
115
116
116
117
119
119
121
122
123
124
125
125
125
126
127
5
Kup książkę
Poleć książkę

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin