CSS_Gotowe_rozwiazania_cssgot.pdf

IDZ DO

PRZYK£ADOW Y ROZDZIA£

CSS. Gotowe

SPIS TREœCI

rozwi¹zania

KATALOG KSI¥¯EK

Autor: Richard York

T³umaczenie: £ukasz Piwko

ISBN: 83-246-0574-6

Tytu³ orygina³ u: CSS Instant Results

Format: B5, stron: 392

KATALOG ONLINE

ZAMÓW DRUKOWANY KATALOG

TWÓJ KOSZYK

DODAJ DO KOSZYKA

Wykorzystaj w swoich projektach mo¿liwoœci arkuszy stylów

Stwórz efektowny i czytelny mechanizm nawigacji

U¿yj stylów w internetowym kliencie poczty

Popraw wygl¹d formularzy na stronach WWW

Kaskadowe arkusze stylów zmieni³y oblicze sieci WWW. Dziêki nim definiowanie

wygl¹du strony WWW sta³o siê znacznie prostsze. Przed ich pojawieniem siê wygl¹d

ka¿dego elementu strony by³ okreœlany w kodzie HTML. Zmiana uk³adu graficznego,

kolorystyki lub kroju czcionki wymaga³a modyfikacji ka¿dego ze znaczników.

Dziœ, za pomoc¹ arkusza stylów, mo¿emy przedefiniowaæ wygl¹d ca³ej witryny,

zmieniaj¹c tylko jeden plik zawieraj¹cy style. Jednak technologia CSS umo¿liwia nie

tylko okreœlanie kroju i wielkoœci czcionki — pozwala tak¿e na uzyskanie ciekawych

efektów wizualnych i nadanie stronie niepowtarzalnego wygl¹du.

Ksi¹¿ka „CSS. Gotowe rozwi¹zania” to przegl¹d dziesiêciu projektów witryn WWW

opartych na kaskadowych arkuszach stylów. Czytaj¹c j¹, poznasz ró¿ne zastosowania

technologii CSS — od definiowania wygl¹du elementów strony po tworzenie interfejsów

u¿ytkownika dla aplikacji internetowych. Znajdziesz tu przyk³ady atrakcyjnego

i funkcjonalnego mechanizmu nawigacji, dynamicznych list rozwijanych i przegl¹darki

plików. Ka¿dy z projektów zosta³ przedstawiony w takiej postaci, ¿e implementacja

go we w³asnych pracach nie sprawi Ci ¿adnego problemu.

Nawigacja oparta na zak³adkach

Wielokolumnowy uk³ad strony WWW

Dynamiczne listy rozwijane

Internetowy pokaz slajdów

Zmiana wygl¹du formularzy

Interfejs u¿ytkownika dla przegl¹darki plików

Kalendarz z terminarzem

Nadaj swoim stronom niepowtarzalny wygl¹d

CENNIK I INFORMACJE

ZAMÓW INFORMACJE

ONOWOœCIACH

ZAMÓW CENNIK

CZYTELNIA

FRAGMENTY KSI¥¯EK ONLINE

Wydawnictwo Helion

ul. Koœciuszki 1c

44-100 Gliwice

tel. 032 230 98 63

e-mail: helion@helion.pl

O autorze ..................................................................................................................................................... 7

Podziękowania ............................................................................................................................................ 9

Wstęp ...........................................................................................................................................................11

Rozdział 1. Zakładki .................................................................................................................................... 17

Projekt ........................................................................................................................18

Kod i jego objaśnienie .................................................................................................. 19

Testowanie i ograniczenia ............................................................................................. 29

Co daje nam biblioteka IE7? .................................................................................... 30

Używanie i modyfikacja projektu .................................................................................... 31

Zakładki z obrazkami w tle ....................................................................................... 32

Obrazki w tle zawierające tekst ................................................................................ 36

Zakładki elastyczne ................................................................................................. 39

Rozdział 2. Układ wielokolumnowy .......................................................................................................... 47

Projekt ........................................................................................................................48

Kod i jego objaśnienie .................................................................................................. 50

Testowanie i ograniczenia ............................................................................................. 56

Używanie i modyfikacja projektu .................................................................................... 57

Układ dwukolumnowy .............................................................................................. 58

Elastyczne kolumny nawigacyjne .............................................................................. 61

Metoda elementów pływających ............................................................................... 66

Stare dobre sztuczki dostosowujące dla Internet Explorera ......................................... 72

Rozdział 3. Dynamiczne listy rozwijane .................................................................................................. 79

Projekt ........................................................................................................................80

Kod i jego objaśnienie .................................................................................................. 80

Testowanie i ograniczenia ............................................................................................. 87

Inne ograniczenia .................................................................................................... 93

CSS. Gotowe rozwiązania

Używanie i modyfikacja projektu .................................................................................... 94

Implementacja dynamicznej listy rozwijanej opartej na JavaScript ................................ 95

Własne tła i ramki ................................................................................................. 101

Listy rozwijane w dół ............................................................................................. 110

Rozdział 4. Więcej o dynamicznych listach rozwijanych

i niezwykle wszechstronnej pseudoklasie :target ............................................................ 115

Projekt ...................................................................................................................... 116

Kod i jego objaśnienie ................................................................................................ 117

Testowanie i ograniczenia ........................................................................................... 125

Rozdział 5. Pokaz slajdów .......................................................................................................................127

Projekt ...................................................................................................................... 128

Kod i jego objaśnienie ................................................................................................ 128

Testowanie i ograniczenia ........................................................................................... 137

Rozdział 6. Ramki i zaokrąglone rogi .....................................................................................................149

Projekt ...................................................................................................................... 150

Kod i jego objaśnienie ................................................................................................ 151

Testowanie i ograniczenia ........................................................................................... 157

Używanie i modyfikacja projektu .................................................................................. 159

Rozdział 7. Stosowanie CSS w internetowym kliencie poczty .............................................................169

Projekt ...................................................................................................................... 170

Kod i jego objaśnienie ................................................................................................ 173

Testowanie i ograniczenia ........................................................................................... 186

Używanie i modyfikacja projektu .................................................................................. 191

Dodawanie okna podglądu wiadomości ................................................................... 192

Układ trzykolumnowy à la Microsoft Outlook 2003 ................................................... 197

Rozdział 8. Formularze ........................................................................................................................... 209

Projekt ...................................................................................................................... 210

Kod i jego objaśnienie ................................................................................................ 211

Testowanie i ograniczenia ........................................................................................... 245

Rozdział 9. Interfejs użytkownika internetowej przeglądarki plików ............................................... 253

Projekt ...................................................................................................................... 255

Kod i jego objaśnienie ................................................................................................ 256

Tworzymy szkielet ................................................................................................. 274

Właściwości menu ................................................................................................ 279

Drzewo katalogów ................................................................................................. 284

Widoki ................................................................................................................. 288

Okna pop-up ......................................................................................................... 302

Testowanie i ograniczenia ........................................................................................... 308

Używanie i modyfikacja projektu .................................................................................. 317

Widok Szczegóły systemu Windows ........................................................................ 317

Okno dialogowe Zapisz jako ................................................................................... 323

Okno dialogowe wyboru katalogu ............................................................................ 337

Spis treści

Rozdział 10. Kalendarz ............................................................................................................................ 345

Projekt ...................................................................................................................... 346

Kod i jego objaśnienie ................................................................................................ 346

Testowanie i ograniczenia ........................................................................................... 361

Używanie i modyfikowanie projektu .............................................................................. 368

Skorowidz ................................................................................................................................................381

Zakładki stały się wszechobecne na stronach internetowych — można je znaleźć prawie

wszędzie (jednym z najlepszych przykładów może być strona Apple.com). Kiedyś strony

internetowe tworzono głównie w oparciu o mapy odnośników lub proste obrazki i tabele,

które, umieszczone wewnątrz znacznika <a> , służyły jako zakładki. W niniejszym rozdziale

prezentuję kilka sposobów implementacji zakładek na stronie przy użyciu CSS. Takie po-

dejście pozwala na utworzenie czytelniejszego i bardziej dostępnego kodu.

Mimo nielicznych problemów każda bardziej znacząca przeglądarka potrafi obsłużyć pro-

sty, przyjazny dla użytkownika i stabilny system zakładek. Jak to zawsze bywa z CSS, nie

każde podejście będzie działało bez zarzutów w każdej z nich. Aby temu zapobiec, opisuję

obejścia i sztuczki niezbędne do tego, aby nasz projekt wyglądał bez zarzutów w jak naj-

większej liczbie przeglądarek. W dalszej części rozdziału pokażę, jak przy użyciu biblioteki

open source JavaScript IE7 spowodować, aby przeglądarka Internet Explorer w wersjach 5.5

oraz 6 była kompatybilna z bardziej zaawansowanymi technikami, a także jak JavaScript

pozwala na pokonanie przeszkód niekompatybilności pomiędzy przeglądarkami nie tylko

przy użyciu biblioteki IE7, lecz także przy użyciu innych narzędzi, takich jak np. stworzony

specjalnie dla Internet Explorera atrybut CSS expression() , który odgrywa niebagatelną ro-

lę w wielu przedstawionych w niniejszej książce projektach.

Przed rozpoczęciem pracy nad projektem trzeba go dokładnie rozplanować. Należy zadać

sobie pytanie: „Jakie właściwości powinien mieć mój system zakładek?”. Poniżej znajduje

się lista najważniejszych celów projektu:

Kod użyty do utworzenia zakładek musi być prosty i zrozumiały.

Tekst użyty w zakładkach nie może znajdować się na obrazkach.

Zakładki muszą zmieniać kolor, gdy użytkownik najeżdża na nie kursorem.

Zakładka odpowiadająca aktualnie wczytanej stronie musi być wyróżniona.

Następny podrozdział opisuje komponenty CSS, XHTML oraz JavaScript potrzebne do osią-

gnięcia zamierzonych celów.

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: