css.-gotowe-rozwiazania full version, Zlotemysli.pl - TYLKO FULL WERSJE!, ebooki
[ Pobierz całość w formacie PDF ]
4
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
5
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.
18
CSS. Gotowe rozwiązania
Projekt prezentowany w niniejszym rozdziale nie jest zbyt atrakcyjny wizualnie. Moim ce-
lem było raczej pokazanie, jak w prosty sposób stworzyć system zakładek przy użyciu CSS
bez obrazków i tabel. W dalszej części prezentuję, jakie należy wnieść poprawki, aby za-
kładki płynnie się rozciągały oraz w jaki sposób ustawić właściwości ramek oraz tła (cho-
ciaż wersja podstawowa projektu jest bardzo prosta). Poniżej znajduje się lista celów z po-
przedniego podrozdziału wzbogacona o opis właściwości CSS i kodu XHTML potrzebnych
do ich osiągnięcia:
Kod użyty do stworzenia zakładek musi być prosty i zrozumiały.
Pierwszy
cel jest raczej prosty do osiągnięcia — mówi on, żeby dane umieszczać wewnątrz
właściwych znaczników. Oznacza to, że struktura naszego systemu zakładek będzie
oparta na nienumerowanej liście HTML. Ze względu na fakt, że to, co chcemy
zaprezentować, to nic innego jak lista odnośników (niekoniecznie w określonej
kolejności), elementy
<ul>
i
<li>
wydają się być najlepszym rozwiązaniem. Dzięki
CSS możliwa jest zmiana listy nienumerowanej na zakładki. Dokonuje się tego
poprzez usunięcie domyślnego formatowania elementów listy (atrybuty
margin
,
padding
oraz
list-style
). Następnie elementom
<li>
nadaje się własne właściwości
ramek, marginesów oraz, aby elementy występowały jeden obok drugiego, używa
się albo atrybutu CSS
float
, bądź stosuje się pozycjonowanie absolutne (deklaracja
position: absolute
). W niniejszym projekcie korzystamy z atrybutu
float
, ponieważ
jego zastosowanie jest trochę mniej kłopotliwe niż pozycjonowanie absolutne.
Tekst użyty na zakładkach nie może znajdować się na obrazkach.
Drugi cel
projektu związany jest z dostępnością i przyjaznością dla robotów wyszukujących.
Jeżeli tekst zakładek znajdowałby się na obrazkach, to osoby niewidome korzystające
np. z przeglądarki JAWS nie byłyby w stanie go odczytać. Dodatkowo także
roboty wyszukujące nie odczytałyby takiego tekstu, który może przecież zawierać
wartościowe z punktu widzenia pozycjonowania słowa kluczowe. W dalszej
części rozdziału pokazuję sposób stosowania obrazów tła przy zachowaniu tekstu
i utrzymaniu widzialności dla robotów oraz dostępności.
Zakładki muszą zmieniać kolor, gdy użytkownik najeżdża na nie kursorem.
Cel ten jest bardzo prosty do osiągnięcia. Chcemy po prostu, aby użytkownik miał
wizualne potwierdzenie, że dana zakładka jest elementem nawigacji. Jednym ze
sposobów osiągnięcia tego efektu jest zmiana koloru tła za pomocą pseudoklasy
CSS
:hover
.
Zakładka odpowiadająca aktualnie wczytanej stronie musi być wyróżniona.
Czwarty cel jest bardzo często spotykanym efektem na stronach internetowych.
Mówiąc krótko, chcemy, aby było wiadomo, że aktualnie załadowana strona
odpowiada stronie, do której prowadzi dana zakładka. Do osiągnięcia tego celu
potrzeba trochę więcej pracy — niezbędnych jest pięć stron XHTML. Elementowi
<body>
każdej z nich przypisujemy unikalny identyfikator
ID
. Następnie nadajemy
unikalny identyfikator każdemu elementowi
<li>
stanowiącemu odrębną zakładkę.
Dzięki tej metodzie będzie można nadać inny styl zakładce odpowiadającej aktualnie
załadowanej stronie.
[ Pobierz całość w formacie PDF ]