CSS_Projektowanie_profesjonalnych_stron_WWW_cssppw.pdf

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!

Spis treści

Rozdział 1. Najlepsze praktyki w XHTML i CSS 17

Upychanie warstwy strukturalnej i prezentacyjnej razem 18

Pokochać swój kod

XHTML — nowa era

Oddzielenie struktury od stylu

CSS — dodawanie warstwy stylów

Lepiej zapoznaj się z selektorami

Inne selektory

Łączenie deklaracji

Selektory grupujące

Tajniki dziedziczenia

Wykorzystanie wszystkiego w praktyce

Kaskadowość

Pochodzenie stylów

Sortowanie według precyzji

Sortowanie według kolejności

Praktyka

Praca w solidnej przeglądarce

Usprawiedliwienie potrzeby stosowania hacków

Problem hacków

Hackowanie dla zabawy i pożytku

Podsumowanie

Rozdział 2. Blogger.com: efekt rollover i design touches 65

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

Podsumowanie

Rozdział 3. Witryna internetowa mistrzostw PGA 97

Efekt cienia

Tworzenie iluzji

Dodanie realizmu

103

Spis treści

Tworzenie w CSS menu rozwijanych 107

Pozycjonowanie menu rozwijanych 108

Dostrajanie: stylizacja menu rozwijanych 109

Wstawianie filmów Flasha w zgodzie ze standardami 113

Metoda Flash Satay 113

Wpisywanie znaczników object i embed przy użyciu JavaScriptu 113

SWFObject

114

Podsumowanie

114

Rozdział 4. Witryna University of Florida

115

Powrót do przeszłości

115

Przemyślenia na temat kolejnych wersji

116

Aktualna witryna

118

Definiowanie witryny

119

Budowa zespołu

119

Badania użytkowników

120

Badanie samych siebie

120

Definiowanie specyfikacji technicznych

121

Tworzenie głównej struktury nawigacyjnej

122

Kod XHTML

122

Kod CSS

125

Grafika

126

Małymi krokami naprzód

126

Nawigacja uzupełniająca

130

Kod XHTML

130

Kod CSS

132

Jeszcze raz o Flashu

137

Jeszcze raz o metodzie Satay

138

Detekcja po stronie klienta przy użyciu metody Flash Satay

140

Szukanie błędów

142

Zmiany

142

Gdzie to się podziało?

142

Podsumowanie

142

Rozdział 5. Stuff and Nonsense Ltd.:

strategie przełączania arkuszy stylów

143

Kładzenie fundamentów

144

Przełączanie CSS

150

Szczegóły techniczne

152

Trwałe arkusze stylów

152

Preferowane arkusze stylów

152

Spis treści

Alternatywne arkusze stylów

153

Inne rozwiązanie, którego prawie nie możesz zastosować

155

Rzeczywistość, czyli jak to może działać dzisiaj?

156

Wykorzystanie JavaScriptu

157

Zastosowanie PHP

165

CSS poza przeglądarką

168

Typy mediów

169

Problem z wyborem

173

Stuff and Nonsense: budowa lepszego przełącznika

173

Spotkanie z projektantem Andym Clarke’em

176

Podsumowanie

180

Rozdział 6. Przygody CindyLi.com: modyfikacja blogu 181

Blogi

181

CSS: Cindy Li zaczyna publikować

183

Elementy projektu

183

Tworzenie układu

183

Układ projektu

184

Tworzenie witryny

186

Projektowanie paska nawigacyjnego

186

Grafiki efektu rollover

188

Pisanie kodu XHTML i CSS dla nawigacji

189

Integracja grafik rollover

192

Chmurka ze słowami

194

Kod chmurki

195

Ponowne wykorzystanie efektu

197

Wstawianie plakietki Flickr

197

Formatowanie pól wyboru

203

Podsumowanie

210

Rozdział 7. AIGA Cincinnati: szablony HTML

wiadomości e-mail

211

Problemy z formatem HTML wiadomości e-mail

211

Tworzenie szablonu

212

Drukowanie projektu

213

Tworzenie układu tabelkowego

213

Korygowanie projektu

222

Analiza wpływu reguł CSS na szablon

224

Stosowanie stylów liniowych

227

Usługa Premailer

228

Podsumowanie

229

Spis treści

Rozdział 8. Witryna internetowa książki:

używanie przezroczystych obrazów PNG

231

Obsługa formatu PNG przez przeglądarki

232

Sztuczka z użyciem filtru obrazów

233

Obejście problemu obsługi przezroczystości przez Internet

Explorer 6 za pomocą skryptu HTC

233

Kolory a format PNG

235

Używanie opcji przezroczystości alfa

235

Lepsze cienie

235

Używanie odcieni kolorów

237

Podsumowanie

241

Rozdział 9. Tworzenie układów CSS

243

O siatkach i układach

243

Robienie tego, co w druku jest niemożliwe

247

Pozycjonowanie przy użyciu CSS — podstawy

249

Pozycjonowanie bezwzględne

250

Pozycjonowanie absolutnie względne

253

Układ trzykolumnowy — kładzenie fundamentów

255

Pisanie kodu XHTML — od makiety do gotowego projektu

256

Warstwa stylów

259

Zwalczanie błędów przeglądarek

267

Określanie granic: własność max-width

274

Podsumowanie

276

Dodatek A Elementy HTML 4.01

277

Dodatek B Zasady konwersji HTML na XHTML 283

Dodatek C Własności CSS 2.1

289

Dodatek D Rozwiązywanie problemów z CSS

303

Skorowidz

309

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: