Responsive_Web_Design_Nowoczesne_strony_WWW_na_przykladach_reswed.pdf

(2339 KB) Pobierz
Tytuł oryginału: Responsive Web Design by Example
Tłumaczenie: Jakub Hubisz
ISBN: 978-83-283-4876-9
Copyright © Packt Publishing 2017. First published in the English language
under the title ‘Responsive Web Design by Example (9781787287068)’
Polish edition copyright © 2019 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)
Drogi Czytelniku!
Jeżeli chcesz ocenić tę książkę, zajrzyj pod adres
http://helion.pl/user/opinie/reswed
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 korektorze merytorycznym
Wstęp
Rozdział 1. Czym jest projektowanie responsywnych witryn
Filozofia responsywnego projektu
Zasady responsywnego projektu
Responsywny a adaptacyjny
Punkty przełamania
Jednostki relatywne
Wartości maksymalne i minimalne
Obiekty zagnieżdżone
Najpierw komputery osobiste czy urządzenia mobilne?
Bitmapy kontra wektory
Responsywne siatki i kolumny
Podsumowanie
9
10
11
15
16
17
17
17
18
19
19
20
20
21
22
Rozdział 2. Czym jest Bootstrap i dlaczego z niego korzystamy
Krótka historia Bootstrapa
Po co korzystać z Bootstrapa
Dlaczego Bootstrap?
System siatki Bootstrapa
Podstawy
Przykłady wykorzystania
Końcowe informacje o siatce
Komponenty Bootstrapa
Podsumowanie
23
23
24
25
25
26
27
36
36
37
Kup książkę
Poleć książkę
Spis treści
Rozdział 3. Szablon wielokrotnego użytku
Czym jest szablon wielokrotnego użytku
Wymagania odnośnie do
środowiska
programistycznego
Tworzenie naszego szablonu wielokrotnego użytku
Prosty przykład z wykorzystaniem Bootstrapa
Wyłączanie
Rozszerzanie nagłówka
Rozszerzanie stopki
Rozszerzanie głównej zawartości strony
Odnajdywanie błędów
Błędy PHP
Style CSS nie działają
Podsumowanie
39
39
43
43
44
45
47
49
50
51
51
51
52
Rozdział 4. Tworzenie sekcji z wprowadzeniem
Czym jest jednostronicowa witryna
Przykłady witryn jednostronicowych
Implementacja naszej sekcji wprowadzającej
Czym jest jumbotron?
Kotwiczenie sekcji w pasku nawigacji
Animowanie kotwiczenia z paska nawigacji
Ustawienie nagłówka na górze strony
Zmiana aktualnie wybranego przycisku
Częste pułapki
Różnica w wysokości paska nawigacji na urządzeniach mobilnych
Kotwiczenie przycisków paska nawigacyjnego
Podsumowanie
53
53
54
57
57
67
69
74
76
77
77
78
78
Rozdział 5. Tworzenie generycznej sekcji wielokrotnego użytku
Różne sekcje na witrynach jednostronicowych
Przykłady sekcji witryn jednostronicowych
Implementacja naszej generycznej sekcji wielokrotnego użytku
Co będzie zawierała sekcja o zespole
Stworzenie kontenera dla sekcji
Kotwiczenie sekcji w pasku nawigacji
Dodanie zdjęć zespołu
Tekst z informacjami o członku zespołu
Linki do mediów społecznościowych
Podsumowanie
79
80
80
84
84
85
87
88
95
97
99
Rozdział 6. Tworzenie sekcji z formularzem kontaktowym
Przykłady sekcji kontaktowych na witrynach jednostronicowych
Richman
Bueno
This also
Design museum
Choice screening
101
101
102
103
104
105
106
4
Kup książkę
Poleć książkę
Spis treści
Implementacja sekcji kontaktowej
Co będzie zawierała sekcja kontaktowa?
Tworzenie kontenera dla sekcji kontaktowej
Zakotwiczenie sekcji kontaktowej na pasku nawigacji
Dodanie formularza kontaktowego
Podsumowanie
107
107
107
110
110
116
Rozdział 7. Tworzenie strony głównej bloga
Przykłady blogów
TechCrunch
Gawker
Microsoft News
Johnny Cupcakes
TESCO Living
Przygotowanie projektu podstawowego
Usuwanie wszystkich niepotrzebnych plików
Refaktoryzacja pliku index.css
Refaktoryzacja pliku index.php
Refaktoryzacja pliku HEADER.php
Refaktoryzacja pliku index.js
Jak będzie wyglądała strona główna bloga?
Implementacja strony głównej bloga
Implementacja karuzeli
Wskaźniki karuzeli
Implementacja wpisów na blogu
Dodawanie kart
Podsumowanie
117
117
118
119
120
121
122
123
123
123
123
124
125
125
125
126
132
135
136
140
Rozdział 8. Tworzenie strony z wpisem na blogu
Przykłady wpisów na blogach
TechCrunch
Gawker
Microsoft News
Johnny Cupcakes
TESCO Living
Co znajdzie się na naszej stronie wpisu?
Z czego składa się wpis?
Z czego składa się panel na popularne i rekomendowane wpisy?
Implementacja strony wpisu na blogu
Implementacja głównej zawartości wpisu
Implementacja panelu bocznego
Dalsza rozbudowa bloga
Podsumowanie
141
141
142
143
144
145
146
147
147
147
148
149
159
164
165
Rozdział 9. Dodanie panelu bocznego dla sieci społecznościowej
Przykłady paneli bocznych w sieciach społecznościowych
Facebook
Google+
167
167
168
169
5
Kup książkę
Poleć książkę
Zgłoś jeśli naruszono regulamin