Po prostu HTML 4. Wydanie III

Po prostu HTML 4. Wydanie III

• 1.
  IDZ DO PRZYK£ADOWY ROZDZIA£ SPIS TRE CI Po prostu HTML 4. Wydanie III KATALOG KSI¥¯EK Autor: Elizabeth Castro KATALOG ONLINE T³umaczenie: Piotr Rajca ISBN: 83-7361-039-1 ZAMÓW DRUKOWANY KATALOG Tytu³ orygina³u: HTML for the World Wide Web with XHTML and CSS VQG Format: B5, stron: 490 TWÓJ KOSZYK DODAJ DO KOSZYKA W ród ksi¹¿ek po wiêconych jêzykowi HTML, „Po prostu HTML 4. Wydanie III” zajmuje szczególn¹ pozycjê. To prawdziwy bestseller i najpopularniejsza w Polsce ksi¹¿ka o HTML-u, która doczeka³a siê ju¿ trzech edycji. Najnowsze wydanie przynosi CENNIK I INFORMACJE naj wie¿sze informacje na temat jêzyka XHTML, nowego standardu tworzenia stron internetowych. Nowo ci¹ s¹ liczne porady niezbêdne webmasterom opracowuj¹cym ZAMÓW INFORMACJE strony internetowe dedykowane urz¹dzeniom przeno nym (palmtopom, telefonom O NOWO CIACH komórkowym…). Szczególn¹ zalet¹ ksi¹¿ki jest przejrzysty uk³ad i prosty jêzyk, którym zosta³a napisana. ZAMÓW CENNIK Zamiast d³ugich obja nieñ znajdziesz w niej krótkie, trafne i zwiêz³e informacje. Towarzysz¹ce im liczne ilustracje sprawiaj¹, ¿e przyswajanie przedstawionej w niej wiedzy jest szybkie i ³atwe. CZYTELNIA Dziêki ksi¹¿ce: FRAGMENTY KSI¥¯EK ONLINE • Stworzysz w³asne strony wykorzystuj¹c HTML i XHTML • Nauczysz siê stosowaæ CSS (kaskadowe arkusze stylów) • Dowiesz siê, jak tworzyæ „elastyczne uk³ady” stron, dostosowuj¹ce siê do wielo ci ekranu u¿ytkownika • Uczynisz strony atrakcyjniejszymi umieszczaj¹c klipy wideo, pliki d wiêkowe w formacie MP3 oraz inne multimedia bezpo rednio na stronach WWW • Korzystaj¹c z WML-a stworzysz strony przeznaczone dla urz¹dzeñ przeno nych • Skorzystasz z bogatego do wiadczenia autorki ksi¹¿ki Z poprzednich wydañ tej ksi¹¿ki tysi¹ce ludzi nauczy³o siê tworzyæ strony WWW. Byæ mo¿e odwiedza³e ich witryny w Internecie. Teraz i Ty masz szansê poznania tajników WWW i zaprosiæ wszystkich ma samodzielnie stworzon¹ stronê. Wydawnictwo Helion ul. Chopina 6 44-100 Gliwice tel. (32)230-98-63 e-mail: helion@helion.pl
• 2.
  Spis treści Spis treści Wstęp 13 Internet, WWW oraz HTML.......................................................................................14 Otwarty, jednak nie identyczny ...................................................................................15 Wojny przeglądarek ...................................................................................................16 Dą enie do wprowadzania standardów.........................................................................17 Rzeczywistość ...........................................................................................................20 Czego nale y u ywać? ...............................................................................................21 Kilka słów o niniejszej ksią ce....................................................................................23 Witryna WWW Autorki .............................................................................................24 Rozdział 1. Elementy tworzące strony WWW 25 Znaczniki: elementy, atrybuty oraz wartości.................................................................26 Tekstowa zawartość stron WWW................................................................................30 Łącza, obrazki oraz inna zawartość nie będąca tekstem .................................................31 Nazwy plików ...........................................................................................................32 Adresy URL..............................................................................................................33 Spis treści HTML a XHTML......................................................................................................36 Wersje, rodzaje oraz DOCTYPE.................................................................................38 Domyślny sposób wyświetlania (X)HTML ..................................................................40 Dodawanie stylów do stron WWW..............................................................................41 Kaskada: kiedy style kolidują ze sobą ..........................................................................42 Wartości właściwości .................................................................................................44 Rozdział 2. Praca z dokumentami (X)HTML 47 Projektowanie witryny ...............................................................................................48 Tworzenie nowej strony WWW ..................................................................................49 Zapisywanie stron WWW...........................................................................................50 Kilka słów o programie Microsoft Word i stronach WWW............................................52 Określanie strony domyślnej („domowej”) ...................................................................53 Edycja stron WWW...................................................................................................54 Organizowanie plików................................................................................................55 Wyświetlanie stron w przeglądarce..............................................................................56 Czerpanie inspiracji od innych ....................................................................................57 Rozdział 3. Podstawowa struktura dokumentów (X)HTML 59 Rozpoczynanie strony ................................................................................................60 Tworzenie podstawowej struktury kodu.......................................................................62 Określanie sposobu kodowania ...................................................................................63 Nadawanie tytułu .......................................................................................................64 Tworzenie nagłówków sekcji ......................................................................................65 Rozpoczynanie nowego akapitu ..................................................................................66 5
• 3.
  Spis treści Nazywanie elementów................................................................................................67 Podział strony na działy..............................................................................................68 Tworzenie obszarów wewnątrzwierszowych ................................................................69 Tworzenie nowych wierszy ........................................................................................70 Dodawanie komentarzy ..............................................................................................71 Nadawanie nazw elementom stron...............................................................................72 Rozdział 4. Podstawy formatowania tekstu 73 Tworzenie tekstu pogrubionego oraz kursywy ..............................................................74 Zmiana wielkości tekstu .............................................................................................75 Stosowanie czcionki o stałej szerokości znaków ...........................................................76 Stosowanie tekstu preformatowanego ..........................................................................77 Cytaty.......................................................................................................................78 Tworzenie indeksów dolnych i górnych .......................................................................80 Oznaczanie zmodyfikowanego tekstu ..........................................................................81 Wyjaśnianie skrótów..................................................................................................82 Rozdział 5. Tworzenie obrazów na potrzeby stron WWW 83 O obrazach tworzonych na potrzeby stron WWW.........................................................84 Zdobywanie obrazów .................................................................................................89 Polecenie Zapisz dla Weba .........................................................................................90 Zmniejszanie wymiarów obrazu ..................................................................................92 Tworzenie przezroczystości ........................................................................................93 Spis treści Zapisywanie obrazu z przezroczystymi obszarami ........................................................94 Symulacja przezroczystości ........................................................................................95 Wykorzystanie (przewa nie) bezpiecznych kolorów......................................................96 Redukcja ilości kolorów .............................................................................................98 Progresywne wyświetlanie obrazu ...............................................................................99 Rozmywanie obrazków JPEG dla ułatwienia kompresji...............................................100 Tworzenie animowanych obrazów GIF......................................................................101 Rozdział 6. Wykorzystanie obrazów 103 Wstawianie ilustracji na stronę..................................................................................104 Tekst zastępczy .......................................................................................................105 Określanie wymiarów obrazu w celu jego szybszego wyświetlenia...............................106 Skalowanie ilustracji ................................................................................................108 Łączenie ikon z obrazami .........................................................................................109 Otaczanie obrazów tekstem ......................................................................................110 Zakończenie otaczania tekstem .................................................................................112 Zwiększanie odstępu wokół obrazów.........................................................................113 Wyrównywanie obrazków ........................................................................................114 Poziome linie...........................................................................................................115 Rozdział 7. Łącza 117 Tworzenie łączy do innych stron ...............................................................................118 Odnośniki ...............................................................................................................120 Łącza wykorzystujące odnośniki ...............................................................................121 Tworzenie łącza do wybranego okna .........................................................................122 6
• 4.
  Spis treści Określenie domyślnego okna ....................................................................................123 Tworzenie innych rodzajów łączy .............................................................................124 Definiowanie klawiszy skrótów dla łączy...................................................................126 Określenie kolejności łączy dla klawisza TAB............................................................127 Przyciski nawigacyjne ..............................................................................................128 Podział obrazka na obszary przypisane do ró nych łączy.............................................129 Tworzenie map odnośników obsługiwanych po stronie klienta.....................................130 Korzystanie z mapy interpretowanej na serwerze........................................................132 Rozdział 8. Tworzenie stylów 133 Tworzenie reguły stylu .............................................................................................134 Tworzenie selektorów ..............................................................................................135 Wybór elementów na podstawie nazwy .....................................................................136 Wybieranie elementu na podstawie klasy lub identyfikatora ........................................137 Wybieranie elementów na podstawie kontekstu ..........................................................138 Wybieranie łączy na podstawie ich stanu ...................................................................141 Wybieranie fragmentów elementu .............................................................................142 Wybieranie elementów na podstawie atrybutów .........................................................144 Definiowanie grup elementów...................................................................................145 Łączenie selektorów.................................................................................................146 Rozdział 9. Stosowanie stylów 147 Tworzenie zewnętrznego arkusza stylów....................................................................148 Spis treści Dołączanie zewnętrznego arkusza stylów...................................................................149 Udostępnianie alternatywnych arkuszy stylów ............................................................150 Tworzenie wewnętrznego arkusza stylów...................................................................151 Importowanie zewnętrznych arkuszy stylów...............................................................152 Lokalne stosowanie stylów .......................................................................................153 Znaczenie poło enia.................................................................................................154 Dodawanie komentarzy do arkuszy stylów.................................................................155 Rozdział 10. Formatowanie przy wykorzystaniu stylów 157 Wybór czcionki .......................................................................................................158 Osadzanie czcionek w dokumencie............................................................................159 Tworzenie czcionki pochyłej (kursywy).....................................................................160 Pogrubianie czcionki ................................................................................................161 Określanie wielkości czcionki ...................................................................................162 Określanie wysokości linii ........................................................................................164 Jednoczesne określanie wszystkich parametrów czcionki.............................................165 Definiowanie koloru tekstu .......................................................................................166 Zmiana koloru tła tekstu ...........................................................................................167 Kontrola odstępów pomiędzy wyrazami i literami.......................................................168 Dodawanie wcięć akapitowych .................................................................................169 Parametry odstępów.................................................................................................170 Wyrównywanie tekstu..............................................................................................171 Zmiana wielkości liter ..............................................................................................172 Wykorzystanie kapitalików.......................................................................................173 Dekorowanie tekstu .................................................................................................174 7
• 5.
  Spis treści Rozdział 11. Określanie układu strony za pomocą stylów 175 Określanie struktury strony.......................................................................................176 Model prostokątów ..................................................................................................177 Wyświetlanie i ukrywanie elementów ........................................................................178 Bezwzględne rozmieszczanie elementów ...................................................................179 Określanie stałego poło enia elementu w oknie przeglądarki .......................................180 Przesuwanie elementów względem ich naturalnego poło enia......................................181 Modyfikowanie tła ...................................................................................................182 Zmiana koloru .........................................................................................................184 Modyfikacja wskaźnika myszy..................................................................................185 Tworzenie obramowań.............................................................................................186 Dodawanie wypełnienia wokół elementu ...................................................................188 Określanie marginesów wokół elementu ....................................................................189 Określanie wysokości i szerokości elementu...............................................................190 Pozycjonowanie elementów w trzecim wymiarze .......................................................192 Określanie sposobu wyświetlania zawartości elementu................................................193 Otaczanie elementów tekstem ...................................................................................194 Kontrola sposobu otaczania elementów......................................................................195 Wyrównywanie elementów w pionie .........................................................................196 Rozdział 12. Arkusze stylów przeznaczone do drukowania stron 197 Stosowanie arkuszy stylów przeznaczonych Spis treści dla konkretnych rodzajów mediów ............................................................................198 Czym ró nią się style przeznaczone do drukowania ....................................................199 Kontrola dzielenia dokumentów na strony..................................................................200 Inne właściwości CSS, charakterystyczne dla sporządzania wydruków ......................................................................................201 Rozdział 13. Listy 203 Tworzenie list wypunktowanych i uporządkowanych ..................................................204 Określanie kształtu znaczników (punktów).................................................................206 Określanie początkowej wartości numeracji punktów..................................................207 Stosowanie niestandardowych znaczników.................................................................208 Określanie miejsca wyświetlania znaczników .............................................................209 Określanie wszystkich właściwości listy w jednym miejscu .........................................210 Tworzenie list definicji.............................................................................................211 Określanie wyglądu list zagnie d onych ....................................................................212 Rozdział 14. Tabele 215 Projektowanie układu strony.....................................................................................216 Tworzenie prostej tabeli ...........................................................................................217 Dodawanie krawędzi tabeli .......................................................................................218 Określanie szerokości tabel.......................................................................................220 Wyrównywanie tabeli do środka strony .....................................................................222 Otaczanie tabeli tekstem ...........................................................................................223 Łączenie tabel..........................................................................................................224 Wyrównywanie zawartości komórek .........................................................................226 Zmiana koloru tła.....................................................................................................228 8
• 6.
  Spis treści Kontrola odstępów pomiędzy i wewnątrz komórek .....................................................230 Łączenie komórek le ących w sąsiednich kolumnach..................................................232 Łączenie komórek w sąsiednich wierszach .................................................................233 Podział tabeli na grupy kolumn .................................................................................234 Podział tabeli na poziome sekcje ...............................................................................236 Wybór linii do wyświetlania .....................................................................................237 Kontrola łamania wierszy w komórce ........................................................................239 Przyspieszenie wyświetlania tabeli ............................................................................240 Rozdział 15. Ramki 241 Tworzenie prostego układu ramek .............................................................................242 Ramki w kolumnach ................................................................................................244 Tworzenie ramek w wierszach i kolumnach................................................................245 Kombinowany układ ramek ......................................................................................246 Ramki wpisane ........................................................................................................248 Określanie wielkości marginesów ramki ....................................................................249 Wyświetlanie lub chowanie pasków przewijania.........................................................250 Wybieranie koloru krawędzi .....................................................................................251 Modyfikacja grubości krawędzi.................................................................................252 Uniemo liwienie u ytkownikowi zmiany rozmiarów ramki .........................................254 Wyświetlanie łączy w konkretnych ramkach ..............................................................255 Określanie miejsca docelowego dla łącza ...................................................................256 Zmiana domyślnego miejsca docelowego...................................................................257 Spis treści Zagnie d anie układów ramek ..................................................................................258 Tworzenie zamiennika ramek....................................................................................259 Osadzanie zawartości przy u yciu obiektów ...............................................................260 Zapewnianie większej dostępności ramek ..................................................................262 Rozdział 16. Formularze 263 Skrypty CGI............................................................................................................264 Zdobywanie skryptów ..............................................................................................266 Wykorzystanie skryptów dołączonych do tej ksią ki ...................................................267 Przygotowanie skryptu do u ycia ..............................................................................268 Tworzenie formularza ..............................................................................................269 Przesyłanie danych pocztą elektroniczną....................................................................270 Wykorzystanie serwisów obsługujących formularze....................................................271 Tworzenie pól tekstowych ........................................................................................272 Tworzenie pól hasła .................................................................................................273 Tworzenie przycisków opcji .....................................................................................274 Tworzenie pól wyboru .............................................................................................275 Menu......................................................................................................................276 Obszary tekstowe ....................................................................................................278 Umo liwienie u ytkownikom przesyłania plików .......................................................279 Kilka uwag o polach ukrytych...................................................................................280 Dodawanie pól ukrytych do formularzy .....................................................................281 Tworzenie przycisku wysyłającego............................................................................282 Czyszczenie zawartości formularza ...........................................................................284 Aktywne obrazki......................................................................................................286 Organizacja elementów formularzy ...........................................................................287 9
• 7.
  Spis treści Formalne nadanie etykiety elementowi formularza......................................................288 Określenie kolejności klawisza TAB w formularzach..................................................289 Definiowanie klawiszy skrótów.................................................................................290 Dezaktywacja elementów formularza.........................................................................291 Uniemo liwienie modyfikacji elementów...................................................................292 Rozdział 17. Multimedia 293 Aplikacje pomocnicze i moduły dodatkowe (plug-ins).................................................294 Zdobywanie odtwarzaczy dla u ytkowników..............................................................296 Pobierania plików multimedialnych...........................................................................297 Osadzanie w stronach filmów QuickTime ..................................................................298 Skalowanie filmów QuickTime .................................................................................300 Odtwarzanie filmów QuickTime w pętli ....................................................................301 Umieszczanie dźwięków QuickTime na stronach WWW ............................................302 Ukrywanie dźwięków QuickTime .............................................................................303 Odtwarzanie plików za pomocą programu Windows Media Player...............................304 Dołączanie apletów ..................................................................................................306 Osadzanie innych plików multimedialnych.................................................................307 Dołączanie plików multimedialnych ..........................................................................308 Tworzenie automatycznego pokazu slajdów ...............................................................309 Tworzenie szyldów ..................................................................................................310 Dźwięk odtwarzany w tle .........................................................................................311 Spis treści Rozdział 18. Skrypty 313 Wstawianie „automatycznego” skryptu ......................................................................314 Wywołanie zewnętrznego skryptu automatycznego.....................................................315 Wyzwalanie skryptu.................................................................................................316 Tworzenie przycisku, który wykonuje skrypt .............................................................318 Dodawanie informacji zastępczych............................................................................319 Ukrywanie skryptu przed starszymi przeglądarkami....................................................320 Ukrywanie skryptów przed analizatorami składni XML ..............................................321 Definiowanie domyślnego języka skryptowego ..........................................................322 Rozdział 19. Podstawy JavaScriptu 323 Dodawanie aktualnej daty i godziny ..........................................................................324 Zmiana etykiety stanu łącza ......................................................................................325 Zmiana zawartości kilku ramek przy u yciu jednego łącza...........................................326 Wyświetlanie stron w odpowiednich ramkach ............................................................327 Podmienianie obrazków po wskazaniu ich myszką .....................................................328 Ładowanie obrazków do pamięci podręcznej..............................................................330 Określanie wielkości nowego okna przeglądarki .........................................................331 Rozdział 20. Symbole oraz inne znaki nie należące do alfabetu angielskiego 333 Kilka słów o sposobach kodowania ...........................................................................334 Zapisywanie stron przy u yciu odpowiedniego sposobu kodowania..............................336 Edytowanie stron przy wykorzystaniu poprawnego sposobu kodowania........................337 10
• 8.
  Spis treści Deklarowanie sposobu kodowania strony...................................................................338 Dodawanie znaków nie nale ących do danego sposobu kodowania...............................340 Określanie języka strony ..........................................................................................342 Rozdział 21. Stare sposoby formatowania 343 Określanie domyślnej postaci tekstu ..........................................................................344 Formatowanie fragmentów tekstu..............................................................................346 Inny sposób określania domyślnych kolorów..............................................................348 Zmienianie koloru łączy ...........................................................................................349 Przekreślenia i podkreślenia tekstu ............................................................................350 Tekst migający ........................................................................................................351 Rozdział 22. Określanie układu strony — stary sposób 353 Kolor tła..................................................................................................................354 Stosowanie obrazów tła ............................................................................................355 Wyśrodkowanie elementów na stronie .......................................................................356 Określenie marginesów ............................................................................................357 Zapobieganie dzieleniu wierszy.................................................................................358 Warunkowe łamanie wierszy ....................................................................................359 Określanie odstępu pomiędzy akapitami ....................................................................360 Tworzenie wcięć......................................................................................................361 Tworzenie wcięć za pomocą list ................................................................................362 Wstawianie pustych prostokątów ..............................................................................363 Spis treści Wykorzystanie prostokątów pikselowych...................................................................364 Wykorzystanie kolumn.............................................................................................365 Rozmieszczanie elementów na warstwach..................................................................366 Rozdział 23. WML: strony WWW dla urządzeń przenośnych 369 Przygotowywanie serwera ........................................................................................370 Początek tworzenia strony WML ..............................................................................371 Tworzenie karty ......................................................................................................372 Tworzenie podstawowej zawartości...........................................................................373 Dołączanie obrazów.................................................................................................374 Tworzenie tabel .......................................................................................................375 Tworzenie odnośników ............................................................................................376 Programowanie przycisków ......................................................................................378 Tworzenie zadań warunkowych ................................................................................380 Planowanie zadań ....................................................................................................381 Nawiązywanie połączenia.........................................................................................382 Tworzenie i stosowanie zmiennych............................................................................383 Tworzenie pól tekstowych ........................................................................................384 Tworzenie list..........................................................................................................386 Przetwarzanie informacji podawanych przez u ytkowników ........................................388 Tworzenie elementów na wielu stronach ....................................................................390 Ograniczanie dostępu do talii ....................................................................................391 Testowanie stron WML............................................................................................392 11
• 9.
  Spis treści Rozdział 24. Testowanie stron WWW 393 Sprawdzanie poprawności kodu ................................................................................394 Sprawdzanie prostych błędów: HTML.......................................................................395 Sprawdzanie prostych błędów: XHTML ....................................................................396 Sprawdzanie prostych błędów: CSS...........................................................................397 Testowanie stron .....................................................................................................398 Gdy przeglądarka wyświetla kod...............................................................................400 Obrazki nie są wyświetlane.......................................................................................401 Wspaniałe w jednej przeglądarce, a brzydkie w innych................................................402 Gdy strona nie jest wyświetlana w Netscape 4............................................................403 Wcią nie działa?.....................................................................................................404 Rozdział 25. Publikowanie stron w sieci WWW 405 Jak znaleźć serwer dla swoich stron...........................................................................406 Gdzie w Polsce opublikować strony WWW?..............................................................407 Onet.pl — Republika WWW ....................................................................................411 Rejestracja nazwy domeny .......................................................................................419 Przesyłanie plików na serwer ....................................................................................420 Rozdział 26. Zdobywanie użytkowników 423 O słowach kluczowych.............................................................................................424 Jawne podawanie słów kluczowych ...........................................................................425 Spis treści Opis strony..............................................................................................................426 Zarządzanie innymi informacjami o stronie ................................................................427 Jak uniknąć odwiedzin .............................................................................................428 Zapobieganie archiwizacji strony ..............................................................................429 Tworzenie strony z adresami.....................................................................................430 Dodawanie witryny do wyszukiwarki ........................................................................432 Jak zapewnić wysoką pozycję strony w wynikach wyszukiwania .................................433 Pisanie stron łatwych do indeksowania ......................................................................434 Inne sposoby reklamowania witryny ..........................................................................435 Dodatek A Elementy i atrybuty (X)HTML 437 Dodatek B Właściwości i wartości CSS 447 Dodatek C Zdarzenia wbudowane 455 Dodatek D Symbole i znaki (X)HTML 457 Dodatek E Wartości szesnastkowe 467 Dodatek F Narzędzia (X)HTML 469 Skorowidz 473 12
• 10.
  11 Określanie układu strony za pomocą stylów Określanie układu strony za pomocą stylów Rozdział 11. Określanie układu strony za pomocą stylów Wykorzystanie CSS do określania układu strony ma kilka zalet w porównaniu z innymi metodami, takimi jak na przykład tabele (które opisałam w rozdziale 14.). Przede wszystkim CSS doskonale nadają się do tworzenia elastycznych układów, które poszerzają się lub zwę ają w zale ności od wielkości okna przeglądarki. Poza tym oddzielenie zawartości strony od instrukcji określających jej wygląd daje mo liwość bardzo łatwego wykorzystania tego samego układu w całej witrynie. Dzięki temu, modyfikując jedynie plik CSS, mo na tak e bardzo łatwo i szybko zmienić wygląd całej witryny. Co więcej, połączenie Określanie układu strony za pomocą stylów CSS z (X)HTML pozwala zmniejszyć rozmiar plików, co z kolei oznacza krótszy czas oczekiwania na wyświetlenie witryny. W końcu, poniewa CSS i (X)HTML są aktualnie u ywanymi standardami, mo na mieć gwarancję, e strony utworzone zgodnie z ich zało eniami będą poprawnie wyświetlane w przyszłych wersjach przeglądarek (poza tym stosowanie tych standardów stanie się koniecznością dla profesjonalnych projektantów stron). Podstawową wadą kaskadowych arkuszy stylów, w szczególności w odniesieniu do określania układu stron, jest fakt, i starsze przeglądarki ich nie obsługują lub obsługują je w sposób niewłaściwy. W szczególności przeglądarka Netscape 4.x cechuje się wyjątkowo złą obsługą mo liwości CSS związanych z określaniem układu strony. Nawet w najnowszych wersjach przeglądarek nie wszystkie mo liwości CSS są obsługiwane poprawnie. Często te twórcy ró nych przeglądarek mają odmienne opinie odnośnie tego, które rozwiązanie nale y uznać za poprawne. Istnieją jednak sposoby na umo liwienie oglądania stron o układach tworzonych za pomocą stylów osobom korzystającym ze starszych przeglądarek oraz na ominięcie ró nic w działaniu nowych wersji przeglądarek; informacje na ten temat zamieściłam w rozdziale 9., „Stosowanie stylów”. Przykłady u yte w tym rozdziale — prześlicznie zaprojektowane przez Erica Costello (http://www.glish.com/) — wyglądają doskonale w nowoczesnych przeglądarkach, ale tak e w ich starszych wersjach nie tracą wiele na swej atrakcyjności (rysunek 11.1). Rysunek 11.1. Układ tej strony został określony przy wykorzystaniu CSS. Został on szczegółowo i dokładnie wyjaśniony w dalszej części niniejszego rozdziału 175
• 11.
  Rozdział 11. Określanie struktury strony Najwa niejszym aspektem CSS jest rozdzielenie zawartości strony i reguł formatujących oraz określających styl. W ten sposób pozbywamy się ścisłych dyrektyw definiujących wygląd strony i uzyskujemy elastyczność, gwarantującą poprawną prezentację strony w ró nych przeglądarkach, systemach operacyjnych oraz urządzeniach wyjściowych (nawet na wydrukach). Prawdopodobnie najwa niejszą cechą stron, których układ ma być określany za pomocą arkuszy stylów, jest ich wewnętrzna struktura. Przemyślaną, logiczną strukturę będzie znacznie łatwiej dostosować do więcej ni jednego rodzaju urządzeń wyjściowych. Rysunek 11.2. Oto dokument, którego będę u ywać Aby określić strukturę strony: w tym rozdziale. Zwróć uwagę, e składa się on z trzech podstawowych działów — navigation (części nawigacyjnej), 1. Utwórz logiczne sekcje dokumentu w formie bg oraz content (treść). Pełny kod strony mo na znaleźć elementów FKX. Na naszej przykładowej stronie mo na w przykładach dołączonych do ksią ki wyró nić dział nawigacyjny (ang. navigation), w którym zostaną umieszczone połączenia z innymi stronami, dział DI — zawierający obraz tła działu Określanie struktury strony nawigacyjnego oraz dział treści (ang. content) — zawierający podstawową treść strony, czyli tekst i obrazki. Strona zawiera tak e dział kalendarz, będący ruchomym paskiem bocznym, słu ącym do wyświetlania przyszłych zdarzeń. 2. Rozmieść elementy FKX w kolejności, która ma sens nawet wtedy, gdy arkusze stylów nie są obsługiwane. Na przykład na samym początku strony umieść tytuł, za nim spis treści, a na końcu właściwą treść strony. Dzięki temu wcią będziesz mógł dowolnie rozmieszczać elementy, wykorzystując CSS, a strona zawsze będzie mieć sensowny wygląd — nawet jeśli style nie będą obsługiwane (oczywiście kolejność rozmieszczenia elementów zale y od sytuacji, docelowej grupy odbiorców oraz wielu innych czynników. Pamiętaj, aby cały czas zastanawiać się nad sposobami zapewnienia dostępności strony, nawet w przypadkach, gdy CSS nie będą stosowane). Rysunek 11.3. Oto, jak nasza strona wygląda w przypadku, gdy style w ogóle nie są wykorzystywane (w przeglądarce 3. W spójny sposób u ywaj elementów tworzących Netscape 4 dla Windows). Ze względu na swoją odpowiednią nagłówki (J, J i tak dalej), aby określić znaczenie strukturę wygląda ona całkiem przyzwoicie, choć mo e nieco informacji umieszczonych na stronie. spartańsko 4. Stosuj komentarze, aby wskazać ró ne fragmenty strony oraz opisać ich zawartość. 176
• 12.
  Określanie układu stronyza pomocą stylów Model prostokątów W CSS strona jest traktowana w taki sposób, jak gdyby ka dy z umieszczonych na niej elementów był zawarty w niewidocznym prostokącie. Prostokąt ten składa się z obszaru zawierającego treść elementu, obszaru otaczającego obszar treści (nazywanego wypełnieniem), krawędzi wypełnienia, czyli ramek, oraz niewidzialnego obszaru umieszczonego poza krawędziami (marginesów). Rysunek 11.4. Prostokąt ka dego elementu posiada cztery istotne cechy określające jego wielkość (podane tutaj Wykorzystując CSS, mo na określić poło enie w kolejności od środka obszaru elementu): obszar zawartości, prostokąta ka dego elementu strony, co daje nam wypełnienie, krawędzie oraz margines. Ka dą z tych właściwości znaczącą kontrolę nad jej układem. (a nawet wybrane cechy ka dej z nich) mo na określać niezale nie od pozostałych Zgodnie z tym, co podałam wcześniej (na stronie 28), prostokąt elementu mo e mieć charakter pojemnika (przez co za elementem zostanie utworzony nowy wiersz) lub charakter wewnątrzwierszowy (i w takim przypadku nowy wiersz za elementem nie będzie tworzony). Właśnie ta cecha określa początkowy układ strony: domyślnie elementy są wyświetlane w kolejności, w jakiej występują w kodzie (X)HTML, przy czym nowe wiersze są tworzone na początku Model prostokątów i na końcu prostokątów elementów blokowych. Istnieją cztery podstawowe sposoby określenia poło enia prostokąta elementu: mo na go pozostawić w naturalnym poło eniu (domyślnym, określanym tak e jako statyczne), mo na usunąć element z naturalnego toku rozmieszczania i określić dokładnie jego poło enie w odniesieniu do elementu nadrzędnego (poło enie bezwzględne) lub całej strony (poło enie ustalone), mo na wreszcie te przesunąć element względem jego poło enia naturalnego (poło enie względne). Co więcej, jeśli prostokąty elementów Rysunek 11.5. Ka dy element posiada własny prostokąt. zachodzą na siebie wzajemnie, mo na określić W tym przykładzie elementami blokowymi są działy strony, kolejność, w jakiej powinny być wyświetlane nagłówki ró nego stopnia, akapity , jak równie połączenia (tak zwany z-indeks). nawigacyjne („Strona główna”, „Barcelona”, i tak dalej), które, choć normalnie są elementami wewnątrzwierszowymi, Po wskazaniu, gdzie nale y wyświetlić prostokąt w tym przykładzie zostały zmienione na elementy blokowe. elementu, mo na zająć się jego wyglądem i określić Zwróć uwagę, e elementy wewnątrzwierszowe, takie jak em jego wypełnienie, krawędzie, marginesy, wielkość, (na przykład: „budowanie stajni” oraz „Castellers”), wyrównanie, kolor i tak dalej. Wszystkie te cechy nie generują nowych wierszy zostały opisane w niniejszym rozdziale. Zwróć uwagę, e niektóre właściwości związane z układem, w szczególności te, których wartości są określane w jednostkach em lub w formie wartości procentowych, są uzale nione od elementu nadrzędnego. Pamiętaj, e element nadrzędny to ten, w którym element bie ący jest umieszczony (patrz strona 28). 177
• 13.
  Rozdział 11. Wyświetlanie i ukrywanie elementów Rysunek 11.6. Wykorzystamy właściwość display, Właściwość FKURNC[ jest bardzo przydatna do ukrywania aby zmienić na elementy blokowe elementy a umieszczone lub wyświetlania określonych elementów w zale ności w dziale nawigacyjnym, dzięki czemu ka dy z nich zostanie od rodzaju przeglądarki u ytkownika, jego języka wyświetlony w osobnym wierszu. Zwróć uwagę, i zmieniam lub dowolnego innego kryterium. Mo na tak e zmienić właściwość display wyłącznie w elementach a umieszczonych domyślny sposób wyświetlania danego elementu w dziale navigation; te same elementy umieszczone w innych częściach strony nie zostaną w aden sposób zmodyfikowane (z blokowego na wewnątrzwierszowy lub na odwrót). Mo na te sprawić, e wszystkie elementy będą wyświetlane w postaci listy, nawet bez potrzeby stosowania znacznika NK (to zagadnienie opisałam na stronie 203). Aby określić, jak wyświetlane będą elementy: 1. Wpisz FKURNC[. 2. Dopisz PQPG, aby ukryć dany element, lub wpisz DNQEM, aby wyświetlić element w postaci blokowej (i tym samym utworzyć nowy akapit), Wyświetlanie i ukrywanie elementów lub wpisz KPNKPG, aby wyświetlić element w postaci wewnątrzwierszowej (nie tworząc nowego akapitu), lub wpisz NKUVKVGO, aby wyświetlić element w taki sposób, jak gdyby był on umieszczony wewnątrz elementu NK (zobacz strony od 203 – 212). Wskazówki Rysunek 11.7. Teraz elementy a są wyświetlane w osobnych Netscape 6 jest tak skrupulatny, gdy chodzi wierszach. Zwróć uwagę, e element a umieszczony o przestrzeganie standardów, e dodaje nieco w pierwszym wierszu ostatniego widocznego akapitu wolnej przestrzeni poni ej wewnątrzwierszowych („budowanie stajni”) wcią jest wyświetlany jako element obrazków umieszczanych w komórkach tabel. wewnątrzwierszowy (czyli tak, jak powinien być wyświetlany) Trzeba o tym pamiętać. Jeśli w komórce tabeli znajduje się tylko jeden obrazek, mo na uniknąć tego efektu, zmieniając obrazek w element blokowy. W razie u ycia właściwości FKURNC[PQPG element zostanie ukryty, nie pozostawiając adnego śladu. Miejsce po nich zostaje zapełnione przez inne elementy strony. Właściwość FKURNC[ nie jest dziedziczona. Do ukrywania elementów bez jednoczesnego usuwania ich z układu strony mo na u yć właściwości XKUKDKNKV[JKFFGP. W takim przypadku element staje się niewidoczny, lecz zajmowany przez niego obszar wcią jest uwzględniany w układzie strony. 178
• 14.
  Określanie układu stronyza pomocą stylów Bezwzględne rozmieszczanie elementów Wszystkie elementy strony są rozmieszczane na niej w takim porządku, w jakim się pojawiają. Oznacza to, Rysunek 11.8. Choć podając przesunięcia nale y dokładnie e jeśli na przykład znacznik KOI znajduje się przed określić, gdzie element umiejscawiany bezwzględnie ma zostać znacznikiem R, to obrazek zostanie wyświetlony przed wyświetlony (oczywiście w odniesieniu do jego elementu akapitem. Nazywane jest to naturalnym układem nadrzędnego), mo na jednak do tego celu wykorzystać wartości procentowe, tworząc w ten sposób elastyczny układ, strony. Mo esz jednak zmienić naturalny układ strony, który mo e się dostosowywać do wielkości okna przeglądarki rozmieszczając elementy bezwzględnie — czyli określając ich poło enie względem elementu nadrzędnego. Aby rozmieścić element bezwzględnie: 1. Wpisz RQUKVKQPCDUQNWVG (pamiętaj o średniku, odstęp po nim jest ju opcjonalny). 2. Wpisz VQR, TKIJV, DQVVQO lub NGHV. 3. Podaj X, gdzie X określa przesunięcie elementu Bezwzględne rozmieszczanie elementów w stosunku do jego elementu nadrzędnego, wyra one w formie wartości bezwzględnej lub względnej (na przykład RZ lub GO), albo w formie wartości procentowej, określanej względem elementu nadrzędnego. 4. Jeśli chcesz, powtórz czynności z punktów 2. i 3. dla innych kierunków, rozdzielając poszczególne pary właściwość-wartość średnikami. Wskazówki Pamiętaj, e elementy są rozmieszczane względem ich elementu nadrzędnego. Informacje o elementach Rysunek 11.9. Strona szybko nabiera kształtu. nadrzędnych mo na znaleźć na stronie 28. Dział zawartości (content) zaczyna się w odległości 30% szerokości okna przeglądarki od jego lewej krawędzi, W przypadku tworzenia układów elastycznych, a obszar nawigacyjny (navigation) rozpoczyna się dostosowujących się do wielkości okna przeglądarki, 10 pikseli poni ej górnej krawędzi okna przeglądarki nale y posługiwać się wartościami procentowymi. i tylko 2% od jego lewej krawędzi. Obszar bg został chwilowo wyświetlony poni ej obszaru nawigacyjnego Poniewa elementy rozmieszczane bezwzględnie nie są uwzględniane przy naturalnym rozmieszczaniu elementów strony, mogą zatem wzajemnie na siebie zachodzić (co nie zawsze jest niepo ądane). Jeśli nie określisz przesunięcia elementu, zostanie on wyświetlony w swoim naturalnym poło eniu, ale nie będzie miał wpływu na poło enie kolejnych elementów. Sposób pozycjonowania elementu nie jest dziedziczony w jego elementach podrzędnych. 179
• 15.
  Rozdział 11. Określanie stałego położenia elementu w oknie przeglądarki Gdy u ytkownik przewija zawartość okna przeglądarki, porusza się ona w górę i w dół, choć na przykład Rysunek 11.10. Jedyną ró nicą pomiędzy przedstawionymi przyciski Wstecz i Do przodu pozostają nieaktywne. tu regułami stylów a regułami z rysunku 11.8, zamieszczonego Kaskadowe arkusze stylów pozwalają na określenie na stronie 179, jest u ycie właściwości position z wartością stałego poło enia elementów względem okna fixed w regułach dla stylów bg oraz navigation przeglądarki, dzięki czemu elementy te nie są przesuwane w przypadku przewijania zawartości strony. Aby określić stałe położenie elementu w oknie przeglądarki: 1. Wpisz RQUKVKQPHKZGF (nie zapomnij średnika). 2. Wpisz VQR, TKIJV, DQVVQO lub NGHV. 3. Wpisz X, gdzie X określa przesunięcie elementu względem krawędzi okna przeglądarki, wyra one Określanie stałego położenia elementu w formie wartości bezwzględnej lub względnej (na przykład RZ lub GO), albo w formie wartości procentowej, określanej względem wielkości okna przeglądarki. 4. W razie potrzeby powtórz kroki 2. oraz 3., Rysunek 11.11. Na pierwszy rzut oka ta strona wygląda definiując przesunięcia w innych kierunkach. tak samo, jak strona z rysunku 11.9, przedstawionego Pamiętaj, aby poszczególne pary właściwość- na stronie 179 wartość oddzielać średnikami. Wskazówki Pamiętaj, e przesunięcia elementów o ustalonym poło eniu są określane względem okna przeglądarki, natomiast przesunięcia elementów umiejscawianych bezwzględnie — w odniesieniu do ich elementu nadrzędnego. Gdyby umiejscawianie ustalone było lepiej obsługiwane w przeglądarkach, stanowiłoby ono doskonały substytut ramek i układów ramek. Niestety przeglądarka Internet Explorer przeznaczona do u ycia w systemach Windows (włącznie z wersją 6) nie obsługuje tej metody umiejscawiania elementów. Rysunek 11.12. Jednak gdy u ytkownik zacznie przewijać stronę, oka e się, e zarówno pasek nawigacyjny, Sposób umiejscowienia elementu nie jest jak i jego tło nie zmieniają poło enia dziedziczony. 180
• 16.
  Określanie układu stronyza pomocą stylów Przesuwanie elementów względem ich naturalnego położenia Ka dy element posiada pewne naturalne poło enie w zawartości dokumentu. Przesuwanie elementów Rysunek 11.13. Ten fragment kodu przesuwa nagłówki h2 względem tego poło enia nazywane jest określaniem oraz h3 o 25 pikseli w lewo względem miejsca, w którym poło enia względnego. W przypadku wykorzystania powinny się znajdować tego sposobu umiejscawiania poło enie elementów sąsiednich nie jest w aden sposób modyfikowane. Aby przesunąć element względem jego naturalnego położenia: 1. Wpisz RQUKVKQPTGNCVKXG (nie zapomnij o średniku). 2. Wpisz VQR, DQVVQO, NGHV lub TKIJV. 3. Wpisz X, gdzie X określa przesunięcie elementu względem jego naturalnego poło enia, wyra one w formie wartości bezwzględnej lub względnej (na przykład RZ lub GO). 4. W razie potrzeby powtórz kroki 2. oraz 3., Przesuwanie elementów definiując przesunięcia w innych kierunkach. Pamiętaj, aby poszczególne pary właściwość- wartość oddzielać średnikami. Wskazówki W przypadku tego sposobu umiejscawiania Rysunek 11.14. Nagłówki h2 oraz h3 są przesunięte słowo „względem” odnosi się do oryginalnego w lewo poza obszar działu strony, w jakim są umieszczone. poło enia elementu, a nie elementów sąsiadujących Nie ma to jednak adnego znaczenia — są one przesuwane z nim. Nie mo na przesunąć elementu względem względem swego oryginalnego poło enia, niezale nie od tego, poło enia innego elementu strony. Zamiast tego gdzie by się nie znajdowały element mo na przesunąć względem poło enia, jakie powinien on zajmować. Tak, to jest bardzo wa ne! Poło enie innych elementów nie jest w aden sposób modyfikowane — są one rozmieszczane w naturalny sposób, tak jak gdyby przesunięty element znajdował się w swym oryginalnym poło eniu. Dlatego te elementy mogą się wzajemnie przesłaniać. Podane przesunięcie nie będzie miało adnego wpływu na poło enie elementu, jeśli w stylu nie zostanie określona właściwość RQUKVKQP. Sposób umiejscowienia elementu nie jest dziedziczony. 181
• 17.
  Rozdział 11. Modyfikowanie tła Termin „tło” odnosi się nie do tła całej strony, lecz do tła konkretnego elementu. Innymi słowy, mo na określać tło dowolnego elementu — w tym tak e obrazków, pól formularzy oraz tabel. Aby zmienić kolor tła: 1. Wpisz DCEMITQWPFEQNQT. 2. Wpisz VTCPURCTGPV (aby widoczne było tło elementu nadrzędnego) lub MQNQT, gdzie MQNQT jest nazwą koloru lub wartością rgb (patrz strona 46 lub tylna Rysunek 11.15. Definiujemy białe tło elementu body, okładka ksią ki). działu treści oraz wskazanych myszką łączy nawigacyjnych. Dział bg strony ma mieć czarne tło (to przygotowanie do Aby zastosować obraz tła: zmian wprowadzanych na stronach 190 – 192). Wskazane myszką łącze do bie ącej strony ma być przezroczyste, gdy nie 1. Wpisz DCEMITQWPFKOCIG. chcemy, aby wyglądało ono jak typowe łącze 2. Wpisz WTN QDTCGMIKH, gdzie QDTCGMIKH jest nazwą obrazka, który powinien być wyświetlony jako tło elementu. Aby aden obraz nie był wyświetlany, wpisz PQPG (rysunki 11.17 oraz 11.18). Aby powtórzyć obraz tła: Modyfikowanie tła 1. Wpisz DCEMITQWPFTGRGCV MKGTWPGM, gdzie MKGTWPGM mo e przybierać następujące wartości: TGRGCV (aby obrazek był powtarzany zarówno w pionie, jak i w poziomie), TGRGCVZ (aby obrazek był powtarzany w poziomie), TGRGCV[ (aby obrazek był powtarzany w pionie) lub PQTGRGCV (aby obrazek nie był powtarzany). Aby określić, czy obrazek tła ma ustalone położenie: Rysunek 11.16. Prawdopodobnie najtrudniejszą 1. Wpisz DCEMITQWPFCVVCEJOGPV. do zauwa enia modyfikacją jest określenie białego tła strony. Niemniej jednak jest to modyfikacja kluczowa 2. Wpisz HKZGF, aby poło enie obrazka tła w oknie (o czym przekonamy się na stronach od 190 – do 192) przeglądarki było stałe, lub UETQNN, aby obrazek przesuwał się wraz z przewijaną zawartością okna przeglądarki. Aby określić położenie obrazu tła elementu: 1. Wpisz DCEMITQWPFRQUKVKQP Z [, gdzie Z oraz [ mogą być wyra one w formie wartości procentowych lub bezwzględnych. Jako Z mo na tak e u yć wartości predefiniowanych NGHV, EGPVGT lub TKIJV, a jako [ wartości VQR, EGPVGT lub DQVVQO. 182
• 18.
  Określanie układu stronyza pomocą stylów Aby określić wszystkie właściwości tła w jednym miejscu: 1. Wpisz DCEMITQWPF. 2. Wpisz dowolną kombinację akceptowanych wartości związanych z określaniem postaci tła elementu (opisanych na poprzedniej stronie). Wartości te mogą być zapisane w dowolnej kolejności. Wskazówki Domyślną wartością właściwości DCEMITQWPF Rysunek 11.17. Tylko na chwilkę wykorzystamy obraz tła, EQNQT jest VTCPURCTGPV. Domyślną wartością którego w praktyce trudno jest u ywać efektywnie właściwości DCEMITQWPFKOCIG jest PQPG. Domyślną wartością właściwości DCEMITQWPFTGRGCV jest TGRGCV, właściwości DCEMITQWPFCVVCEJOGPV — UETQNN, a właściwości DCEMITQWPFRQUKVKQP — VQR NGHV. U ywając skróconej właściwości DCEMITQWPF (opisanej na początku tej strony), nie trzeba podawać wszystkich wartości określających postać tła elementu. Nale y jednak pamiętać, e wszystkie właściwości, które nie zostaną Modyfikowanie tła jawnie określone, przyjmą swoje wartości domyślne (co mo e przesłonić reguły stylów zdefiniowane wcześniej). Właściwości DCEMITQWPF nie są dziedziczone. Chcąc przesłonić inne reguły stylów, nale y jedynie jawnie podać wartości domyślne, takie jak VTCPURCTGPV lub UETQNN. W przypadku wykorzystania powtarzanego Rysunek 11.18. Pomimo tego, e obraz tła elementu body (TGRGCV) obrazu tła i jednoczesnego u ycia jest powtarzany w poziomie, jest on przesłaniany przez właściwości DCEMITQWPFRQUKVKQP będzie ona biały obraz tła działu content (który, dzięki zastosowaniu określać poło enie pierwszego z powtarzanych atrybutu id, jest określany z większą precyzją). Zauwa , obrazów tła. e obraz tła rozpoczyna się w lewym, dolnym rogu całej strony, a nie ekranu (jak jest to błędnie interpretowane Aby stworzyć tło całej strony, nale y określić tło w IE dla komputerów Macintosh) elementu DQF[ (to jedyna metoda, aby wykorzystać właściwość DCEMITQWPF w Netscape 4). W przypadku określenia zarówno koloru, jak i obrazu tła, kolor zostanie wykorzystany do momentu pobrania obrazu tła, a potem będzie widoczny przez jego przezroczyste obszary (jeśli kolor nie zostanie określony, to Netscape 4 u yje koloru czarnego). 183
• 19.
  Rozdział 11. Zmiana koloru Mo na zmieniać kolor dowolnego elementu, w tym tak e tekstu, linii poziomych oraz pól formularzy. Aby zmienić kolor: 1. Wpisz EQNQT. 2. Wpisz PCYCAMQNQTW, gdzie PCYCAMQNQTW to jedna z 16 predefiniowanych nazw kolorów (patrz strona 46 lub tylna okładka ksią ki), lub wpisz TTIIDD, gdzie TTIIDD to szesnastkowa reprezentacja koloru (patrz strona 46 lub tylna okładka ksią ki), Rysunek 11.19. Zmieniłam domyślny kolor całego tekstu lub wpisz TID T I D, gdzie T, I i D to liczby na stronie na czarny (w elemencie body). Jednak tekst w obszarze nawigacyjnym będzie biały (aby odró niał się całkowite z zakresu od 0 do 255, określające od przyszłego tła tego obszaru, które zostanie zmienione na odpowiednio ilość koloru czerwonego, zielonego stronach 190 – 192). Łącze do bie ącej strony umieszczone oraz niebieskiego w kolorze wynikowym, w obszarze nawigacyjnym będzie blado ółte (#339, tak aby który chcemy zastosować, nie wyglądało jak łącze). Jednak inne łącza, po wskazaniu ich wskaźnikiem myszy, powinny być wyświetlane na niebiesko lub wpisz TID T I D , gdzie T, I i D to wartości (aby były wyraźnie widoczne na białym tle strony, określające procentową ilość czerwonego, zielonego zdefiniowanym na stronie 182) i niebieskiego w kolorze wynikowym. Wskazówki Zmiana koloru Jeśli jako T, I lub D wpiszesz wartość większą od 255, zostanie ona zastąpiona liczbą 255. Podobnie, jeśli jako wartość procentową wpiszesz więcej ni 100%, zostanie ona zastąpiona wartością 100%. Właściwość EQNQT najczęściej jest stosowana do określania koloru tekstu. Więcej informacji na ten temat mo na znaleźć na stronie 166, w sekcji „Definiowanie koloru tekstu”. Zmienianie koloru obrazu nie ma adnego widocznego efektu (taką operację nale ałoby wykonać w programie graficznym). Mo na jednak zmienić kolor tła elementu KOI (który będzie widoczny przez przezroczyste obszary obrazka). Więcej informacji na ten temat mo na znaleźć na stronie 182, w sekcji „Zmiana koloru tła tekstu”. Rysunek 11.20. Teraz, gdy łącza nawigacyjne są białe, mo na je zobaczyć wyłącznie w przypadku umieszczenia na nich wskaźnika myszy (lub zdefiniowania na stronie jakiegoś tła — patrz strony 190 – 192) 184
• 20.
  Określanie układu stronyza pomocą stylów Modyfikacja wskaźnika myszy Zazwyczaj to przeglądarka określa wygląd wskaźnika myszy, przy czym w większości przypadków ma on kształt strzałki, a po umieszczeniu go w obszarze łącza — kształt dłoni z wyprostowanym palcem wskazującym. Dzięki CSS to projektant strony mo e określić postać wskaźnika myszy. Aby zmienić kształt wskaźnika myszy: 1. Wpisz EWTUQT. 2. Wpisz RQKPVGT, aby wskaźnik miał kształt dłoni ( ), FGHCWNV, aby miał kształt strzałki ( ), ETQUUJCKT ( ), Rysunek 11.21. Dodałam właściwość cursor do selektora wybierającego wyłącznie łącza klasy current, nale ące OQXG ( ), YCKV ( ), JGNR ( ) lub VGZV ( ), do elementu o identyfikatorze navigation. Co więcej, lub wpisz CWVQ, aby postać wskaźnika była określana łącza te muszą być aktualnie wskazywane myszką. automatycznie, w zale ności od sytuacji, Całkiem interesujący selektor, nieprawda ? lub wpisz ZTGUKG, aby wskaźnik przybrał postać dwukierunkowej strzałki, przy czym Z jest określeniem jednego z głównych kierunków geograficznych, Modyfikacja wskaźnika myszy na przykład P (north — północ), PY (northwest — północny zachód), G (east — wschód). Przykładowo, wskaźnik GTGUKG ma postać . Wskazówki Internet Explorer 5.x dla Windows rozpoznaje wartość JCPF, lecz nie rozpoznaje standardowej wartości RQKPVGT ( ). Aby zadowolić tych, którzy lubią wszystko robić po swojemu, Microsoft Internet Explorer 6 oraz inne przeglądarki działające zgodnie ze standardami (takie jak Netscape 6) obsługują obie wartości — EWTUQTRQKPVGT EWTUQTJCPF. Kolejność zapisu jest w tym przypadku wa na, gdy przeglądarka IE5 dla Windows wybierze wartość RQKPVGT, jeśli ta zostanie zapisana jako ostatnia. Rysunek 11.22. Teraz, gdy ktoś wska e łącze do bie ącej Rysunki przedstawione na tej stronie zostały strony, nie będzie ono wcale wyglądać jak łącze (choć sporządzone przy u yciu przeglądarki IE6 w systemie adres strony docelowej będzie wyświetlany na pasku stanu, Windows 98. Wskaźniki u ywane w ró nych wersjach a samo łącze będzie działać poprawnie) przeglądarek oraz w ró nych systemach operacyjnych nieznacznie się od siebie ró nią. Przykładowo, wskaźnik typu YCKV na komputerach Macintosh ma kształt zegarka: Osobiście uwa am, e nazwy u ywane do określania postaci wskaźnika myszy są dosyć mylące. Wartość FGHCWNV (ang. domyślny) wcale nie określa domyślnego kształtu wskaźnika myszy, lecz przypomina strzałkę, dlatego nazwałabym ją RQKPVGT (ang.: wskaźnik); jednak wartości RQKPVGT odpowiada wskaźnik o kształcie dłoni (ang.: hand), z kolei wartość JCPF jest niestandardowa i stosowana tylko w Internet Explorerze. O rany! 185
• 21.
  Rozdział 11. Tworzenie obramowań Mo na stworzyć obramowanie wokół elementu, a następnie określić jego grubość, styl oraz kolor. W przypadku określenia wypełnienia (patrz strona 189) obramowanie będzie otaczać zarówno zawartość danego elementu, jak i jego wypełnienie. Aby zdefiniować styl obramowania: 1. Wpisz DQTFGTUV[NGV[R, gdzie V[R mo e przyjmować jedną z następujących wartości: PQPG, FQVVGF, FCUJGF, UQNKF, FQWDNG, ITQQXG, TKFIG, KPUGV lub QWVUGV. Aby określić grubość obramowania: Rysunek 11.23. Przy wykorzystaniu skrótowej właściwości 1. Wpisz DQTFGTYKFVJP, gdzie P określa grubość border-left mo na jednocześnie określić wszystkie trzy obramowania i jest liczbą wraz z jednostkami właściwości lewej krawędzi obramowania elementu (na przykład RZ). Aby określić kolor obramowania: 1. Wpisz DQTFGTEQNQTMQNQT, gdzie MQNQT jest nazwą koloru lub wartością TID Tworzenie obramowań (patrz strona 46 lub tylna okładka ksią ki). Aby jednocześnie określić jedną lub kilka właściwości obramowania: 1. Wpisz DQTFGT. 2. Jeśli chcesz, wpisz VQR, TKIJV, DQVVQO lub NGHV, aby ograniczyć efekt działania reguły do konkretnej krawędzi obramowania. 3. Jeśli to konieczne, wpisz Y C EKYQ è, gdzie właściwość to UV[NG, YKFVJ lub EQNQT. W ten sposób mo esz ograniczyć działanie Rysunek 11.24. Oto proste obramowanie o szerokości reguły do konkretnej właściwości. 1 piksela i postaci linii ciągłej. Zwróć uwagę, e pomiędzy obramowaniem i tekstem elementu przydałoby się wyświetlić 4. Wpisz . jakiś odstęp. Ju wkrótce się tym zajmiemy (patrz strona 188) 5. Wpisz odpowiednie wartości (opisane na początku strony). Jeśli pominąłeś krok 3., mo esz podać dowolną lub wszystkie trzy właściwości krawędzi (na przykład DQTFGT RZ UQNKF lub DQTFGTTKIJV RZ FCUJGF ITGGP). Jeśli w kroku 3. określiłeś wybraną właściwość, powinieneś podać wyłącznie jedną z wartości odpowiednich dla tej właściwości (na przykład DQTFGTTKIJVUV[NGFQVVGF). 186
• 22.
  Określanie układu stronyza pomocą stylów Wskazówki Postać obramowania nie jest dziedziczona. Poszczególne właściwości obramowania (DQTFGTYKFVJ, DQTFGTUV[NG oraz DQTFGTEQNQT) mogą przyjmować od jednej do czterech wartości. W razie podania jednej wartości określi ona postać wszystkich krawędzi obramowania. Jeśli podamy Rysunek 11.25. Za pomocą jednej właściwości border-color dwie wartości, pierwsza z nich określać będzie określiłam kolory wszystkich czterech krawędzi obramowania. postać dolnej i górnej krawędzi, a druga Następnie, korzystając z właściwości border-width, określiłam — krawędzi prawej i lewej. W razie podania trzech grubości poszczególnych krawędzi (zaczynając od wartości wartości pierwsza z nich posłu y do określenia 2px i przesuwając się zgodnie z ruchem wskazówek zegara). górnej krawędzi, druga — krawędzi prawej i lewej, W końcu stworzyłam klasy dla ka dego z istniejących stylów a trzecia — dolnej. W razie podania czterech i przypisałam je jednej lub kilku krawędziom poszczególnych działów strony wartości zostaną one u yte do określenia postaci odpowiednio górnej, prawej, dolnej i lewej krawędzi obramowania. Aby obramowanie było wyświetlone, nale y określić przynajmniej jego styl. Jeśli styl nie zostanie określony, obramowanie nie będzie widoczne. Domyślną wartością stylu jest PQPG. Jeśli skorzystamy z właściwości skrótowych Tworzenie obramowań (takich jak DQTFGT lub DQTFGTNGHV), a wartości nie zostaną podane jawnie, przyjmą one wówczas odpowiednie wartości domyślne. A zatem właściwość DQTFGT RZ DNCEM odpowiada właściwości DQTFGT RZ DNCEM PQPG (nawet jeśli styl został wcześniej określony za pomocą właściwości DQTFGTUV[NG). Domyślny kolor obramowania odpowiada wartości właściwości EQNQT danego elementu (patrz strona 166). Grubość obramowania mo na tak e określić za pomocą wartości ogólnych — VJKP (cienka), OGFKWO (średnia) oraz VJKEM (gruba). Wartością domyślną jest OGFKWO, która w Internet Explorerze Rysunek 11.26. Zwróć uwagę, jak działają ró ne właściwości wynosi 4 piksele, a w Netscape 3 piksele. skrótowe. Na przykład border-style:dotted (pierwszy przykład) tworzy kropkowane obramowanie na wszystkich czterech Starsze wersje przeglądarek (wcześniejsze ni krawędziach, natomiast border-style:dashed none tworzy IE 5.5 oraz Netscape 6) nie obsługują wszystkich obramowanie w postaci linii przerywanej na górnej i dolnej istniejących, pojedynczych właściwości, krawędzi elementu i nie wyświetla adnego obramowania określających postać obramowania. na krawędzi prawej i lewej. Przeglądarki (IE 6 z lewej oraz Netscape 7 z prawej) w nieco odmienny sposób Właściwość DQTFGT mo na stosować w tabelach interpretują poszczególne style obramowań oraz w komórkach table. Więcej informacji na ten temat mo na znaleźć na stronie 218, w sekcji „Dodawanie krawędzi tabel”. Szczerze mówiąc, uwa am, e ktoś przesadził z ilością mo liwych sposobów określania postaci obramowań. 187
• 23.
  Rozdział 11. Dodawanie wypełnienia wokół elementu Wypełnienie to dodatkowa przestrzeń wokół elementu, umieszczona wewnątrz jego obramowania. Mo na je sobie wyobrazić jako pokaźnych rozmiarów brzuch Świętego Mikołaja, opięty jego pasem. W przypadku wypełnienia mo na określać wyłącznie jego szerokość, nie ma natomiast mo liwości określania ani jego koloru, ani faktury. Aby dodać wypełnienie wokół elementu: 1. Wpisz RCFFKPIZ, gdzie Z jest szerokością Rysunek 11.27. Przypisanie wartości 0 właściwości padding nie jest złym pomysłem, gdy w ró nych przeglądarkach dodawanego wypełnienia, wyra oną za pomocą domyślne wypełnienia ró nych elementów mają ró ne konkretnych jednostek (RZ) lub w formie wartości wielkości. Zwróć uwagę, e ostatnie dwa style wypełnienia procentowej, odnoszącej się do wielkości elementu (dla elementów #navigation a oraz h1) są równowa ne nadrzędnego ( ). Dodawanie wypełnienia wokół elementu Wskazówki Jeśli w definicji wypełnienia zostanie podana tylko jedna wartość, to posłu y ona do określenia szerokości wypełnienia ze wszystkich czterech stron elementu. W przypadku podania dwóch wartości pierwsza z nich posłu y do określenia wartości wypełnienia u góry i u dołu elementu, a druga — z jego lewej i prawej strony. W razie podania trzech wartości pierwsza z nich określać będzie wypełnienie u góry elementu, druga — z lewej i prawej strony elementu, a trzecia — u dołu elementu. W przypadku podania czterech wartości posłu ą one do określenia odpowiednio górnego, prawego, dolnego i lewego wypełnienia elementu. Do właściwości RCFFKPI mo na tak e dodać jedną z następujących końcówek, określających postać Rysunek 11.28. Zawartość elementu wygląda znacznie wypełnienia z konkretnej strony elementu: VQR, lepiej, gdy pomiędzy nią a obramowaniem elementu znajduje DQVVQO, NGHV, TKIJV. Pomiędzy słowem RCFFKPI się jakaś wolna przestrzeń. Zwróć uwagę, e w przypadku a końcówką nie powinno być adnych dodatkowych dodania wypełnienia tło obramowania („Katalonia”) odstępów. jest powiększane Wypełnienie nie jest dziedziczone. W przypadku tworzenia elastycznych układów, które rozszerzają się lub zmniejszają w zale ności od wielkości okna przeglądarki, wypełnienie mo na określać, wykorzystując wartości procentowe lub jednostki em. 188
• 24.
  Określanie układu stronyza pomocą stylów Określanie marginesów wokół elementu Margines to przezroczysta przestrzeń, oddzielająca elementy od siebie. Marginesy są niezale ne oraz znajdują się na zewnątrz wypełnienia (patrz strona 188) i obramowania (patrz strona 186) — mo na by je porównać do przestrzeni osobistej Świętego Mikołaja. Aby określić marginesy elementu: Rysunek 11.29. Margines elementu h3 moglibyśmy 1. Wpisz OCTIKPZ, gdzie Z jest szerokością dodawanego tak e określić za pomocą właściwości margin-top:15px obszaru, wyra oną jako długość lub wartość procentowa określana względem szerokości elementu nadrzędnego, bądź te przyjmującą wartość CWVQ. Wskazówki Właściwości OCTIKP mo na przypisać od jednej Określanie marginesów wokół elementu do czterech wartości — patrz pierwsza rada dotycząca właściwości RCFFKPI (na stronie 188). Do właściwości OCTIKP mo na tak e dodać jedną z czterech końcówek: VQR, DQVVQO, NGHV lub TKIJV, aby ograniczyć margines do konkretnej strony elementu. Pomiędzy słowem margin a końcówką nie powinno być adnego odstępu (na przykład OCTIKPVQR RZ). Faktyczna wielkość wartość CWVQ przypisywanej właściwości DQTFGT zale y od wartości właściwości YKFVJ (patrz strona 190). Jeśli przypiszemy Rysunek 11.30. Tekst prezentowany w dziale content wartość CWVQ jednemu marginesowi elementu, strony wygląda znacznie lepiej, gdy pomiędzy nagłówkiem przeglądarka nada mu największą z mo liwych a akapitem jest mniej wolnego miejsca. Pamiętaj, e margines to obszar pomiędzy prostokątami elementów, wartości. Jeśli jednocześnie przypiszemy których rozmiar jest z kolei określany przez tak ró norodne lewemu i prawemu marginesowi wartości CWVQ, czynniki, jak zawartość, wysokość wiersza, właściwość height to przeglądarka nada im dwie największe, i tak dalej. Zwróć tak e uwagę, e margines pomiędzy równe wartości. Fakt ten mo na wykorzystać elementem h3 oraz p ma wielkość 15 pikseli (czyli odpowiada w celu wyśrodkowania elementu na stronie. większemu z marginesów, a nie ich sumie, która ma wartość 20 pikseli) Jeśli jeden element jest umieszczony powy ej drugiego, wykorzystany zostanie tylko jeden z dwóch stykających się ze sobą marginesów — ten większy. W takim przypadku mówimy, e mniejszy margines zapada się. Ten sposób działania nie dotyczy marginesów prawych i lewych. Marginesy nie są dziedziczone. 189
• 25.
  Rozdział 11. Określanie wysokości i szerokości elementu Rysunek 11.31. Przypomnij sobie, e w kodzie (X)HTML Istnieje mo liwość określenia wysokości i szerokości dokumentu określiliśmy szerokość obrazka umieszczonego niemal wszystkich elementów strony, w tym tak e w dziale bg strony — 100 pikseli obrazków, pól formularzy, a nawet bloków tekstu. Aby określić wysokość i szerokość elementu: 1. Wpisz YKFVJY, gdzie Y określa szerokość obszaru elementu, wyra oną w formie długości (liczby wraz z określeniem jednostki) lub wartości procentowej (obliczanej względem szerokości elementu nadrzędnego). Mo esz tak e u yć wartości CWVQ, aby szerokość elementu została określona przez przeglądarkę. 2. Wpisz JGKIJVJ, gdzie J określa wysokość obszaru Określanie wysokości i szerokości elementu elementu i mo e być wyra ona wyłącznie w formie długości (liczby wraz z określeniem jednostki). Rysunek 11.32. Określiłam szerokość obrazka umieszczonego Mo esz tak e u yć wartości CWVQ, aby wysokość w dziale bg przy u yciu właściwości width (przesłaniając elementu została określona przez przeglądarkę. w ten sposób wartość atrybutu (X)HTML, przedstawionego na rysunku 31). Zwróć uwagę, e zmieniłam tak e pionowe Wskazówki i poziome przesunięcie elementu div o identyfikatorze bg, a dodatkowo przypisałam ujemną wartość lewemu marginesowi Jeśli wysokość i szerokość elementu nie zostanie elementu, aby wyśrodkować tę część obrazka, która mnie jawnie podana, przeglądarka u yje wartości CWVQ interesuje (patrz strona 191). Pamiętaj, e wartość procentowa jest określana na podstawie szerokości elementu nadrzędnego — a nie oryginalnej szerokości samego elementu. Wypełnienie, obramowania oraz marginesy nie są uwzględniane w wartości właściwości YKFVJ (z wyjątkiem przeglądarki IE 5.x dla Windows, która błędnie zakłada, e właściwość YKFVJ jest sumą szerokości obszaru zawartości elementu, jego wypełnienia i obramowania — patrz następna strona). Szerokość i wysokość elementu nie są dziedziczone. Istnieją tak e właściwości OKPYKFVJ, OKPJGKIJV Rysunek 11.33. Zwróć uwagę, e dział zawartości zaczynający oraz OCZYKFVJ i OCZJGKIJV, lecz aktualnie nie się od 30% szerokości strony, licząc od jej lewej krawędzi, są one obsługiwane przez wszystkie przeglądarki. zachodzi na dział bg strony. Poniewa dział zawartości strony ma białe tło, jego część pokrywająca się z tym obszarem będzie niewidoczna. Dodatkowo zwróć uwagę, i tak e część nawigacyjna strony jest w tej chwili niewidoczna. Ju wkrótce rozwią emy ten problem 190
• 26.
  Określanie układu stronyza pomocą stylów Szerokość, marginesy oraz wartość auto W przypadku większości elementów blokowych wartość CWVQ właściwości YKFVJ odpowiada szerokości obszaru zawierającego elementu, pomniejszonej Rysunek 11.34. Ustaliłam, e nadrzędny element div o wypełnienie, obramowanie oraz marginesy. Obszar będzie mieć szerokość 300 pikseli. To będzie nasz obszar zawierający. Oba umieszczone w nim akapity mają marginesy zawierający to szerokość przydzielona danemu o szerokości 10 pikseli, wypełnienie o szerokości 5 pikseli elementowi przez jego element nadrzędny — często i obramowanie o szerokości 5 pikseli z ka dej strony. mylnie nazywana szerokością odziedziczoną, choć Szerokość pierwszego akapitu jest określana automatycznie, absolutnie nie ma nic wspólnego z normalnymi natomiast drugiemu jawnie nadałam szerokość 200 pikseli zasadami dziedziczenia, obowiązującymi w CSS. W przypadku elementów zawierających obrazki i inne obiekty (elementy zastąpione) wartość CWVQ szerokości odpowiada wewnętrznej szerokości elementu, czyli faktycznej szerokości obrazka lub obiektu zapisanego w pliku zewnętrznym. W przypadku elementów „pływających” wartości CWVQ odpowiada szerokość Określanie wysokości i szerokości elementu wynosząca 0 pikseli. We wszystkich innych elementach wewnątrzwierszowych właściwość YKFVJ jest ignorowana. W przypadku ręcznego określania właściwości YKFVJ, OCTIKPNGHV oraz OCTIKPTKIJV, gdy łączna szerokość wraz z wielkością obramowania i wypełnienia nie odpowiadają szerokości obszaru zawierającego, jakąś szerokość trzeba będzie zmienić. I faktycznie, w takim przypadku przeglądarka zignoruje podaną wartość właściwości OCTIKPTKIJV i przypisze jej wartość CWVQ (rysunki 11.34 oraz 11.35). Jeśli ręcznie określisz wartość właściwości YKFVJ i przypiszesz szerokości jednego z marginesów wartość CWVQ, to margines ten będzie zmniejszany lub powiększany, tak by mo liwe było skompensowanie ró nic. Jeśli samodzielnie określisz wartość właściwości YKFVJ i szerokości obu marginesów przypiszesz CWVQ, to przeglądarka nada obu marginesom tę samą, maksymalną szerokość (co w efekcie spowoduje, e element zostanie wyśrodkowany). Zauwa , e przeglądarka nigdy nie modyfikuje szerokości obramowania ani wypełnienia elementu. Takie są zasady — niezale nie od tego, ile są warte. Rysunek 11.35. Jeśli szerokość jest określana automatycznie (jak w przypadku górnego akapitu), Niestety, w przeglądarce IE 5 (oraz IE 6 działającej zostaje ona określona na podstawie szerokości obszaru w trybie niestandardowym) określenie szerokości zawierającego, pomniejszonej o szerokość marginesów, (właściwość YKFVJ) jest interpretowane jako określenie wypełnienia i obramowań. Jeśli natomiast szerokość jest sumy szerokości obszaru zawartości, wypełnienia, podana jawnie (jak w przypadku drugiego akapitu), to obramowania i marginesów, a nie — tak jak powinno zazwyczaj wszelkie ró nice kompensowane są poprzez być — samego obszaru zawartości. Z kolei w IE 6 modyfikację szerokości prawego marginesu marginesy oraz elementy zastępowane, umieszczane w elementach podrzędnych, mogą wpływać na szerokość bloku zawierającego, choć w dokumentacji jej twórcy zapewniają, e nic takiego nie ma prawa się dziać. Jak gdyby to wszystko i tak nie było dostatecznie skomplikowane! 191
• 27.
  Rozdział 11. Pozycjonowanie elementów w trzecim wymiarze Względne oraz bezwzględne rozmieszczanie elementów mo e doprowadzić do sytuacji, gdy elementy będą się wzajemnie nakładać. W takiej sytuacji mo na określić, który element powinien być wyświetlony „powy ej” pozostałych. Aby rozmieścić elementy w przestrzeni: 1. Wpisz KPFGZ. Rysunek 11.36. Wartości właściwości z-index elementów 2. Wpisz P, gdzie P jest liczbą, określającą poło enie content oraz navigation mo na bez przeszkód zamieniać, elementu na „stosie” obiektów. o ile pozostaną one większe od wartości właściwości z-index elementu bg, wynoszącej 1 (wartość z-index w elemencie Wskazówki content musi być większa ni w elemencie bg, gdy jego białe tło ukrywa część obrazka wychodzącą poza obszar, Im wy sza jest wartość właściwości KPFGZ, Pozycjonowanie elementów w trzecim wymiarze jaki ma zajmować element bg) tym wy ej element zostanie wyświetlony. Mo na wyobra ać sobie właściwość KPFGZ jako określenie poziomu, na jakim element jest wyświetlany — przy czym u ytkownicy, „szybując” nad stroną, patrzą na nią z góry, widząc najpierw te elementy, które zostały wyświetlone na najwy szym poziomie. Właściwości KPFGZ mo na przypisywać zarówno wartości dodatnie, jak i ujemne. Jeśli jakieś elementy zostały umieszczone w elemencie o określonej wartości właściwości KPFGZ, to wszystkie te elementy zostaną rozmieszczone w pierwszej kolejności zgodnie z wartościami zdefiniowanych w nich właściwości KPFGZ, a dopiero potem — jako grupa elementów — zostaną rozmieszczone w szerszym kontekście strony. Wyobraźmy sobie na przykład, e w elemencie A właściwość KPFGZ ma wartość 10, w elemencie B wartość 20, a w elemencie C Rysunek 11.37. Teraz obszar nawigacyjny jest wyświetlony wartość 30. Element B zawiera dwa elementy powy ej działu bg; w końcu wyjaśniło się, dlaczego łącza podrzędne: bb, w którym właściwość KPFGZ zostały wyświetlone na biało ma wartość 35, oraz bbb, w którym właściwość ta ma wartość 5. Wszystkie te elementy zostaną wyświetlone w następującej kolejności (licząc od „góry”): C (który ma najwy szą wartość KPFGZ na swoim poziomie strony), B (w którym KPFGZ ma drugą co do wielkości wartość); następnie zostaną wyświetlone elementy podrzędne elementu B — bb oraz bbb (w takiej kolejności), a na samym końcu zostanie wyświetlony element A, którego właściwość KPFGZ ma wartość mniejszą ni odpowiednia właściwość elementu B. Właściwość KPFGZ nie jest dziedziczona. 192
• 28.
  Określanie układu stronyza pomocą stylów Określanie sposobu wyświetlania zawartości elementu Elementy nie zawsze są wyświetlane wewnątrz swych Rysunek 11.38. W pierwszej kolejności sformatowałam element div o identyfikatorze calendar, tak aby ładnie wyglądał prostokątów. Czasami prostokąty te po prostu nie są odpowiednio du e. Mo e się tak e zdarzyć, e zawartość została umieszczona poza prostokątem danego elementu. Niezale nie od przyczyny, za pomocą właściwości QXGTHNQY mo na kontrolować, co się będzie działo z zawartością znajdującą się poza prostokątem elementu. Aby określić sposób wyświetlania zawartości elementu 1. Wpisz QXGTHNQY. 2. Wpisz XKUKDNG, aby nadać elementowi większy Rysunek 11.39. Kalendarz wygląda całkiem ładnie Sposób wyświetlania zawartości elementu rozmiar, wystarczający do wyświetlenia całej jego u dołu strony, ale według mnie jest zbyt długi zawartości (to domyślna wartość właściwości QXGTHNQY), lub wpisz JKFFGP, aby ukryć zawartość, Rysunek 11.40. A zatem jawnie określiłam wysokość (height) która nie mieści się w prostokącie elementu, oraz szerokość (width) akapitu dates umieszczonego wewnątrz lub wpisz UETQNN, aby w elemencie zawsze były elementu calendar, dzięki czemu wiem, jakie wymiary będzie wyświetlane paski przewijania, umo liwiające miał wynikowy akapit. Następnie dodałam właściwość overflow, aby odpowiednio uło yć zawartość akapitu, u ytkownikom wyświetlenie zawartości która nie mieści się w jego prostokącie nie mieszczącej się w prostokącie elementu, lub wpisz CWVQ, aby paski przewijania były wyświetlane wyłącznie w razie konieczności. Wskazówki Pamiętaj, e w przeglądarce Internet Explorer 6 zakładane jest, e nie wiesz, co robisz, nadając elementowi podrzędnemu większe wymiary ni ma element nadrzędny, i powiększa element nadrzędny tak, aby element podrzędny w nim się zmieścił. Jedynym wyjątkiem od tej reguły jest sytuacja, w której właściwości QXGTHNQY zostanie Rysunek 11.41. Teraz akapit dates ma dokładnie 150 pikseli przypisana dowolna wartość oprócz XKUKDNG szerokości i 2 em wysokości; są w nim wyświetlane paski (domyślnej). W takim przypadku elementowi przewijania, aby u ytkownicy mogli zobaczyć całą jego nadrzędnemu zostanie nadana zamierzona wielkość, zawartość a właściwość QXGTHNQY będzie mogła spełnić swoje zadanie. Domyślną wartością właściwości QXGTHNQY jest XKUKDNG. Właściwość ta nie jest dziedziczona. 193
• 29.
  Rozdział 11. Otaczanie elementów tekstem Nic nie stoi na przeszkodzie, aby otoczyć element tekstem (bądź tak e innymi elementami). Niestety przeglądarki czasami nieprawidłowo obsługują właściwość HNQCV. Rysunek 11.42. Chcemy, aby cały dział calendar strony był dosunięty do prawej krawędzi strony i otaczany tekstem Aby otoczyć element tekstem: 1. Wpisz HNQCV. 2. Wpisz NGHV, jeśli chcesz, aby element znajdował się z lewej strony, a tekst otaczał go z prawej, lub wpisz TKIJV, jeśli chcesz, aby element znajdował się z prawej strony, a tekst otaczał go z lewej. 3. Skorzystaj z właściwości YKFVJ (patrz strona 190), aby jawnie określić szerokość elementu. Wskazówki Rysunek 11.43. Tekst umieszczony bezpośrednio za działem calendar otacza go z lewej strony Pamiętaj, e kierunek wybrany w definicji Otaczanie elementów tekstem właściwości dotyczy poło enia elementu, a nie tekstu. Definicja HNQCVNGHV spowoduje umieszczenie tekstu z prawej strony elementu. Sztuczka pozwalająca na rozmieszczenie tekstu pomiędzy elementami polega na umieszczeniu Rysunek 11.44. Teraz wyobraźmy sobie, e przed elementem elementu bezpośrednio przed tekstem, calendar znajduje się obrazek, w którym właściwości float który ma go otaczać. tak e przypisano wartość right Informacje na temat staromodnego, odrzuconego, ale powszechnie obsługiwanego sposobu wyświetlania tekstu pomiędzy obrazkami mo na znaleźć na stronie 110, w sekcji „Otaczanie obrazów tekstem”. Jeśli w więcej ni jednym elemencie podano tę samą wartość właściwości HNQCV, to pierwszy element jest umieszczony najdalej we wskazanym kierunku, drugi jest umieszczany za pierwszym i tak dalej (rysunki 11.44 oraz 11.45). Rysunek 11.45. Poniewa niewielki obrazek jest umieszczony Elementy, które nie są zastępowane i w których w kodzie (X)HTML przed elementem div, zostanie on nie została określona wartość właściwości YKFVJ, wyświetlony z jego prawej strony nie będą poprawnie otaczane. Właściwość HNQCV nie jest dziedziczona. 194
• 30.
  Określanie układu stronyza pomocą stylów Kontrola sposobu otaczania elementów Mo na określić, jakie elementy mogą być otaczane przez inne elementy, a jakie nie. Aby element nie był wyświetlany obok innego elementu, obok którego nie powinien być umieszczany, nale y posłu yć się właściwością ENGCT. Rysunek 11.46. Właściwość clear jest umieszczana Aby kontrolować sposób otaczania elementów: w elementach, które nie mają być wyświetlane obok innych 1. Wpisz ENGCT. „otaczanych” elementów. W tym przykładzie chcemy, aby adne inne elementy nie znajdowały się z prawej strony 2. Wpisz NGHV, aby inne elementy nie otaczały działu calendar i dlatego w dotyczącej go regule arkusza bie ącego elementu z lewej strony, stylów umieściłam właściwość clear: right lub wpisz TKIJV, aby inne elementy nie otaczały bie ącego elementu z prawej strony, lub wpisz DQVJ, aby dany element nie był otaczany Kontrola sposobu otaczania elementów ani z prawej, ani z lewej strony, lub wpisz PQPG, aby inne elementy nie mogły otaczać bie ącego elementu ani z lewej, ani z prawej strony. Wskazówki Właściwość ENGCT sprawia, e element, w którym została ona zdefiniowana, nie będzie wyświetlany Rysunek 11.47. Dział calendar nie zostanie wyświetlony a do momentu, gdy po podanej stronie nie będą a do momentu, gdy z jego prawej strony nie będzie ju ju wyświetlane adne inne elementy. adnych innych elementów (czyli przeglądarka wyświetli go dopiero poni ej niewielkiego obrazka) Właściwość ENGCT jest dodawana do elementów, obok których nie mają być wyświetlane adne inne „otaczane” elementy. A zatem jeśli chcesz, aby dany element nie był wyświetlany a do momentu, gdy z jego prawej strony nie będą ju umieszczone adne inne „otaczane” elementy, zdefiniuj w nim (a nie w tych innych elementach) właściwość ENGCTTKIJV. Sposób u ycia właściwości ENGCT przypomina posługiwanie się znacznikiem DT z (odrzuconym) atrybutem ENGCT (patrz strona 112). 195
• 31.
  Rozdział 11. Wyrównywanie elementów w pionie Aby poprawić atrakcyjność strony, elementy mo na wyrównywać na wiele ró nych sposobów. Aby wyrównać elementy w pionie: 1. Wpisz XGTVKECNCNKIP. 2. Wpisz DCUGNKPG, aby wyrównać elementy do podstawy (ang.: baseline) elementu nadrzędnego, Rysunek 11.48. Jedynie w obrazkach nale ących do klasy line u yliśmy wyrównania elementu do górnej krawędzi linii lub wpisz OKFFNG, aby wyrównać środki elementów (vertical-align:top) do środka elementu nadrzędnego, lub wpisz UWD, aby umieścić element w dolnym indeksie elementu nadrzędnego, lub wpisz UWRGT, aby umieścić element górnym indeksie elementu nadrzędnego, lub wpisz VGZVVQR, aby wyrównać górną część elementu z górną częścią elementu nadrzędnego, Wyrównywanie elementów w pionie lub wpisz VGZVDQVVQO, aby wyrównać dolną część elementu z dolną częścią elementu nadrzędnego, lub wpisz VQR, aby wyrównać górną część elementu z górną częścią najwy szego elementu w linii, Rysunek 11.49. Wszystkie trzy obrazki nale ące do klasy line są wyrównane w pionie względem swych górnych krawędzi lub wpisz DQVVQO, aby wyrównać dolną część elementu z dolną częścią najni szego elementu w linii, lub podaj procent wysokości elementu (mo esz u yć wartości dodatniej lub ujemnej). 196