CSS_Projektowanie_profesjonalnych_stron_WWW_cssppw.pdf

(1864 KB) Pobierz
CSS. Projektowanie
profesjonalnych stron WWW
Autor: Ch. Schmitt, T. Dominey, C. Li,
E. Marcotte, D. Orchard, M. Trammell
T³umaczenie: £ukasz Piwko
ISBN: 978-83-246-2067-8
Tytu³ orygina³u:
Professional CSS:
Cascading Style Sheets for Web Design
Format: 168x237, stron: 320
Twórz profesjonalne strony WWW, korzystaj¹ce z CSS!
•
Dlaczego nale¿y oddzielaæ warstwê prezentacji od struktury?
•
Jak stworzyæ ró¿ne uk³ady strony z wykorzystaniem CSS?
•
Jak wykorzystaæ format graficzny PNG?
W 1996 roku projektanci stron WWW mogli odetchn¹æ z ulg¹. To w³aœnie wtedy
pojawi³a siê pierwsza oficjalna dokumentacja CSS, a z ni¹ nadzieja na lepsze, ³atwiejsze
i bardziej uniwersalne zarz¹dzanie wygl¹dem stron. Trzeba pamiêtaæ, ¿e wczeœniej
ka¿dy z producentów przegl¹darek wprowadza³ swoje w³asne znaczniki, pozwalaj¹ce
kontrolowaæ kolory czy typografiê. Oczywiœcie producenci robili to bez porozumienia
z innymi — ³atwo wiêc sobie wyobraziæ, jaki stanowi³o to k³opot dla projektantów stron
WWW. Na szczêœcie nadszed³ wspomniany rok 1996, a w latach nastêpnych pojawi³y
siê nowsze przegl¹darki, coraz lepiej wspieraj¹ce kaskadowe arkusze stylów.
Dziêki tej ksi¹¿ce poznasz najlepsze praktyki zwi¹zane z CSS oraz XHTML.
Na przyk³adzie prawdziwych witryn dowiesz siê, jak zapewniæ ró¿ne funkcjonalnoœci
za pomoc¹ kaskadowych arkuszy stylów. Analityczny opis strony Blogger.com pozwoli
zaprezentowaæ ró¿ne efekty, choæby takie, jak „rollover” dla tekstu, ³¹czy oraz tabel.
Z analiz dotycz¹cych innych witryn dowiesz siê, jak zapewniæ efekt cienia, rozwijane
menu czy te¿ dynamiczne prze³¹czanie arkuszy CSS. Ponadto poznasz sposoby
wykorzystania przezroczystych grafik w formacie PNG, zasady tworzenia uk³adów CSS
oraz metody pozycjonowania elementów na stronie. Znajdziesz tu tak¿e wiele innych
zagadnieñ, które pozwol¹ Ci zbudowaæ w³asn¹ — profesjonaln¹ i atrakcyjn¹
— witrynê WWW.
•
Deklarowanie typów dokumentu
•
Oddzielenie warstwy prezentacji od struktury
•
Typy selektorów
•
Wykorzystanie efektu „rollover”
•
Tworzenie cieni oraz rozwijanego menu
•
Zapewnienie poprawnoœci semantycznej
•
Techniki prze³¹czania CSS
•
Wykorzystanie formatu PNG w ró¿nych przegl¹darkach
•
Przygotowywanie uk³adów przy u¿yciu CSS
•
Sposoby rozwi¹zywania problemów z kaskadowymi arkuszami stylów
•
Rozwi¹zywanie problemów z przegl¹darkami
Stwórz w³asn¹, profesjonaln¹ stronê WWW!
S p is tr e ś c i
Rozdział 1.  Najlepsze praktyki w XHTML i CSS 
Upychanie warstwy strukturalnej i prezentacyjnej razem 
Pokochać swój kod 
XHTML — nowa era
Oddzielenie struktury od stylu
17
18
23
24
27
CSS — dodawanie warstwy stylów 
Lepiej zapoznaj się z selektorami
Inne selektory
Łączenie deklaracji
Selektory grupujące
Tajniki dziedziczenia
Wykorzystanie wszystkiego w praktyce
34
34
39
42
42
44
46
Kaskadowość 
Pochodzenie stylów
Sortowanie według precyzji
Sortowanie według kolejności
52
52
55
56
Praktyka 
Praca w solidnej przeglądarce
Usprawiedliwienie potrzeby stosowania hacków
Problem hacków
Hackowanie dla zabawy i pożytku
57
57
57
61
62
Podsumowanie 
64
Rozdział 2. Blogger.com: efekt rollover i design touches 
Wywiad z projektantem 
Efekt rollover w CSS 
Zmienianie koloru tekstu i tła odnośników — łatwe
Zmiana koloru tekstu i tła odnośników — skomplikowane
Zmienianie koloru tła wierszy tabeli
Zmienianie koloru tekstu
Zmienianie pozycji tła odnośników
65
66
69
70
71
79
83
86
Podsumowanie 
96
Rozdział 3. Witryna internetowa mistrzostw PGA 
Efekt cienia 
Tworzenie iluzji
Dodanie realizmu
97
98
99
103
Spis treści
Tworzenie w CSS menu rozwijanych  
Pozycjonowanie menu rozwijanych
Dostrajanie: stylizacja menu rozwijanych
107
108
109
Wstawianie filmów Flasha w zgodzie ze standardami 
Metoda Flash Satay
Wpisywanie znaczników object i embed przy użyciu JavaScriptu
SWFObject
113
113
113
114
Podsumowanie 
114
Rozdział 4. Witryna University of Florida 
Powrót do przeszłości 
Przemyślenia na temat kolejnych wersji
Aktualna witryna
115
115
116
118
Definiowanie witryny 
Budowa zespołu
Badania użytkowników
Badanie samych siebie
Definiowanie specyfikacji technicznych
119
119
120
120
121
Tworzenie głównej struktury nawigacyjnej 
Kod XHTML
Kod CSS
Grafika
Małymi krokami naprzód
122
122
125
126
126
Nawigacja uzupełniająca 
Kod XHTML
Kod CSS
130
130
132
Jeszcze raz o Flashu 
Jeszcze raz o metodzie Satay
Detekcja po stronie klienta przy użyciu metody Flash Satay
137
138
140
Szukanie błędów 
Zmiany
Gdzie to się podziało?
142
142
142
Podsumowanie 
142
Rozdział 5. Stuff and Nonsense Ltd.:  
strategie przełączania arkuszy stylów 
Kładzenie fundamentów 
Przełączanie CSS 
Szczegóły techniczne 
Trwałe arkusze stylów
Preferowane arkusze stylów
143
144
150
152
152
152
6
Spis treści
Alternatywne arkusze stylów
Inne rozwiązanie, którego prawie nie możesz zastosować
153
155
Rzeczywistość, czyli jak to może działać dzisiaj? 
Wykorzystanie JavaScriptu
Zastosowanie PHP
156
157
165
CSS poza przeglądarką 
Typy mediów
Problem z wyborem
168
169
173
Stuff and Nonsense: budowa lepszego przełącznika 
Spotkanie z projektantem Andym Clarke’em 
Podsumowanie 
173
176
180
Rozdział 6. Przygody CindyLi.com: modyfikacja blogu 
Blogi 
CSS: Cindy Li zaczyna publikować 
Elementy projektu 
Tworzenie układu
Układ projektu
181
181
183
183
183
184
Tworzenie witryny 
Projektowanie paska nawigacyjnego
Grafiki efektu rollover
Pisanie kodu XHTML i CSS dla nawigacji
Integracja grafik rollover
186
186
188
189
192
Chmurka ze słowami 
Kod chmurki
Ponowne wykorzystanie efektu
Wstawianie plakietki Flickr
194
195
197
197
Formatowanie pól wyboru 
Podsumowanie 
203
210
Rozdział 7. AIGA Cincinnati: szablony HTML  
wiadomości e-mail 
Problemy z formatem HTML wiadomości e-mail 
Tworzenie szablonu 
Drukowanie projektu
Tworzenie układu tabelkowego
Korygowanie projektu
Analiza wpływu reguł CSS na szablon
211
211
212
213
213
222
224
Stosowanie stylów liniowych 
Usługa Premailer 
Podsumowanie 
227
228
229
7
Spis treści
Rozdział 8. Witryna internetowa książki:  
używanie przezroczystych obrazów PNG  
Obsługa formatu PNG przez przeglądarki 
Sztuczka z użyciem filtru obrazów
Obejście problemu obsługi przezroczystości przez Internet
Explorer 6 za pomocą skryptu HTC
Kolory a format PNG
231
232
233
233
235
Używanie opcji przezroczystości alfa 
Lepsze cienie
Używanie odcieni kolorów
235
235
237
Podsumowanie 
241
Rozdział 9. Tworzenie układów CSS 
O siatkach i układach 
Robienie tego, co w druku jest niemożliwe 
Pozycjonowanie przy użyciu CSS — podstawy 
Pozycjonowanie bezwzględne
Pozycjonowanie absolutnie względne
243
243
247
249
250
253
Układ trzykolumnowy — kładzenie fundamentów 
Pisanie kodu XHTML — od makiety do gotowego projektu
Warstwa stylów
Zwalczanie błędów przeglądarek
255
256
259
267
Określanie granic: własność max-width 
Podsumowanie 
274
276
Dodatek A Elementy HTML 4.01 
Dodatek B Zasady konwersji HTML na XHTML 
Dodatek C Własności CSS 2.1 
Dodatek D Rozwiązywanie problemów z CSS 
 Skorowidz 
277
283
289
303
309
8

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika:

Zgłoś jeśli naruszono regulamin