Tworzenie stron WWW. Biblia. Wydanie II

Wydawnictwo Helion

ul. Chopina 6

44-100 Gliwice

tel. (32)230-98-63

e-mail: [email protected]

PRZYK£ADOWY ROZDZIA£PRZYK£ADOWY ROZDZIA£

IDZ DOIDZ DO

ZAMÓW DRUKOWANY KATALOGZAMÓW DRUKOWANY KATALOG

KATALOG KSI¥¯EKKATALOG KSI¥¯EK

TWÓJ KOSZYKTWÓJ KOSZYK

CENNIK I INFORMACJECENNIK I INFORMACJE

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW INFORMACJEO NOWO�CIACH

ZAMÓW CENNIKZAMÓW CENNIK

CZYTELNIACZYTELNIA

FRAGMENTY KSI¥¯EK ONLINEFRAGMENTY KSI¥¯EK ONLINE

SPIS TRE�CISPIS TRE�CI

DODAJ DO KOSZYKADODAJ DO KOSZYKA

KATALOG ONLINEKATALOG ONLINE

Tworzenie stron WWW.Biblia. Wydanie II

Wszystko, co musisz wiedzieæ, aby stworzyæ w³asn¹ witrynê WWW

• Poznaj jêzyk HTML

• Wstaw na stronê tekst i sformatuj go za pomoc¹ arkuszy stylów

• Dodaj do stron obiekty multimedialne, formularze i skrypty napisane

w jêzyku JavaScript

• Administruj witryn¹ i aktualizuj jej tre�æ

• Zarejestruj swój serwis WWW w wyszukiwarkach internetowych

Tworzenie stron WWW to tylko pozornie proste zadanie. Profesjonalnie

przygotowana witryna WWW to nie tylko kilka zdañ napisanych w edytorze tekstu

i wyeksportowanych do formatu HTML. Projekt serwisu WWW powinien zawieraæ

odpowiednio przygotowane elementy graficzne, mechanizmy nawigacyjne, prawid³owo

dobran¹ tre�æ, formularze, skrypty i wiele innych sk³adników. Po umieszczeniu witryny

w sieci nale¿y j¹ wypromowaæ i dbaæ o aktualno�æ informacji w niej zawartych.

Widaæ wiêc, ¿e stworzenie i utrzymywanie witryny WWW, która przyci¹gnie

uwagê u¿ytkowników sieci, wymaga opanowania wielu zagadnieñ.

Ksi¹¿ka „Tworzenie stron WWW. Biblia. Wydanie II” to kompletny przewodnik

po tych w³a�nie zagadnieniach. Znajdziesz w niej wszystkie informacje niezbêdne

do zaprojektowania, stworzenia, opublikowania i utrzymywania w³asnej witryny WWW.

Przeczytasz o jêzyku HTML i kaskadowych arkuszach stylów, narzêdziach do tworzenia

stron WWW i umieszczaniu witryny w sieci. Nauczysz siê formatowaæ tekst,

umieszczaæ na stronach formularze, skrypty i elementy multimedialne, poznasz

jêzyk XML i programy do przygotowywania grafiki na potrzeby sieci. Dowiesz siê tak¿e,

jak wypromowaæ swoj¹ witrynê i jak przygotowaæ j¹ tak, aby wygl¹da³a prawid³owo

równie¿ na wy�wietlaczach telefonów komórkowych.

• Promowanie witryny i rejestracja w wyszukiwarkach

• Projekt witryny WWW

• Jêzyk HTML i technologia CSS

• Wybór dostawcy us³ug internetowych i publikacja witryny

• Schemat nawigacji w witrynie

• Obróbka grafiki pod k¹tem zastosowania jej na stronach WWW

• Tworzenie skryptów w jêzyku JavaScript

• Flash i inne technologie multimedialne

• E-biznes — witryny komercyjne i aukcje internetowe

• Administrowanie witryn¹

• Nowe technologie — XML i WML

Je�li chcesz poznaæ najnowsze technologie, narzêdzia i standardy projektowania stron

WWW, koniecznie przeczytaj tê ksi¹¿kê.

Autorzy: David A. Crowder, Andrew Bailey

T³umaczenie: S³awomir Dzieniszewski, Krzysztof Jurczyk

ISBN: 83-7361-857-0

Tytu³ orygina³u: Creating Web Sites Bible, Second Edition

Format: B5, stron: 896

Przyk³ady na ftp: 166 kB

http://helion.pl/view/2547w



http://helion.pl/add/2547w/twwbi2




mailto:[email protected]

http://helion.pl/view/2547w/twwbi2.htm

http://www.amazon.com/exec/obidos/ASIN/0764574981/eboinf-20

ftp://ftp.helion.pl/przyklady/twwbi2.zip

��

��

��

Klasyfikacja witryn internetowych .....................................................................................................29Prywatne strony domowe .............................................................................................................30Witryny informacyjne ..................................................................................................................30Witryny organizacji ......................................................................................................................32Witryny o tematyce politycznej ....................................................................................................32Witryny komercyjne .....................................................................................................................34

Informacje w Internecie ......................................................................................................................35Odnajdywanie dobrych informacji ............................................................................................... 36Badanie preferencji gości witryny internetowej ...........................................................................37

Przygotowanie planu ..........................................................................................................................38Ustalanie celów ............................................................................................................................38Wybór technologii ........................................................................................................................39Planowanie budżetu ......................................................................................................................40

Podsumowanie ....................................................................................................................................40

��

Wykorzystanie wyszukiwarek internetowych .....................................................................................42Zasada działania robotów i pająków .............................................................................................44Rejestrowanie się w przeglądarce .................................................................................................44Jak ułatwić wyszukiwanie kluczowych informacji na stronie? ....................................................45Przykład wykorzystania opisu zawartości strony .........................................................................48Ranking wyników wyszukiwania .................................................................................................49Portale ..........................................................................................................................................49Blokowanie przeszukiwania witryny ............................................................................................50

Korzystanie z katalogów internetowych .............................................................................................51Ranking stron w katalogu .............................................................................................................52Zgłaszanie witryny do katalogu ....................................................................................................52Usługi katalogowe typu Free-For-All ........................................................................................... 53

Publikowanie ogłoszeń prasowych .....................................................................................................54Nawiązywanie i podtrzymywanie kontaktu z klientem ................................................................54Odnajdywanie adresów poczty elektronicznej .............................................................................55Formatowanie e-maili — HTML czy zwykły tekst? ....................................................................56

�� !"��

Wykorzystywanie wzajemnych połączeń ........................................................................................... 56Wykorzystanie banerów reklamowych ...............................................................................................56

Tworzenie banerów ......................................................................................................................57Projektowanie efektywnych banerów ...........................................................................................57Reklamy multimedialne ...............................................................................................................58Wymiana banerów ........................................................................................................................59Reklama tradycyjna ......................................................................................................................59

Podsumowanie ....................................................................................................................................60

�� #��$�%&� ��'�

Struktura dokumentu HTML ..............................................................................................................61Podstawowe elementy strony WWW .................................................................................................62

Definiowanie elementów strony znacznikami otwierającymi i zamykającymi ............................62Zagnieżdżanie elementów ............................................................................................................63Elementy blokowe ........................................................................................................................63Elementy wewnątrzwierszowe .....................................................................................................63

Atrybuty elementów ...........................................................................................................................64Atrybuty wspólne dla wszystkich elementów ..............................................................................64Wykorzystanie atrybutów specjalnych .........................................................................................65Akceptowanie domyślnych i wprowadzanie własnych wartości atrybutów .................................66

Wstawianie tekstu ...............................................................................................................................66Poziomy nagłówka .......................................................................................................................66Wstawianie znaku podziału wiersza ............................................................................................. 67Podział strony liniami poziomymi ................................................................................................68Znaki niewidoczne .......................................................................................................................70

Narzędzia do tworzenia stron WWW .................................................................................................71Edytory tekstu ..............................................................................................................................72Edytory HTML .............................................................................................................................73Programy WYSIWYG .................................................................................................................74Programy zaawansowanej edycji tekstu .......................................................................................76Inne programy ..............................................................................................................................77

Wybór programu narzędziowego ........................................................................................................77Wersje demonstracyjne ................................................................................................................78Programy typu shareware .............................................................................................................78Programy typu freeware ...............................................................................................................79

Programy dodatkowe ..........................................................................................................................79Programy sprawdzające łącza .......................................................................................................79Programy sprawdzające zgodność kodu .......................................................................................81Programy sprawdzające zgodność z typami przeglądarek ............................................................81Monitorowanie serwerów .............................................................................................................81

Wykorzystanie niektórych narzędzi ....................................................................................................81Notatnik ........................................................................................................................................82HomeSite ......................................................................................................................................82Netscape Composer ......................................................................................................................83Dreamweaver ...............................................................................................................................83

Podsumowanie ....................................................................................................................................84

� (��)��

�� *�+��,-

Porównanie projektu strony i projektu witryny ..................................................................................85Kolor ............................................................................................................................................86Styl tekstu .....................................................................................................................................86Nawigacja .....................................................................................................................................87Kluczem do sukcesu jest zawartość witryny ................................................................................88Funkcjonalność strony ..................................................................................................................88

Struktura witryny ................................................................................................................................89Podział tematyczny .......................................................................................................................91Naturalny podział informacji ........................................................................................................91

Nadawanie adresów URL ...................................................................................................................92Dodawanie łączy .................................................................................................................................93

Wprowadzanie właściwych adresów w łączach ...........................................................................95Tworzenie wewnętrznych łączy za pomocą odnośników .............................................................95Wysyłanie wiadomości poczty elektronicznej za pomocą łącza mailto ........................................96Inne rodzaje łączy .........................................................................................................................97Wprowadzanie adresów URL za pomocą elementu BASE ..........................................................97

Podsumowanie ....................................................................................................................................98

�� -��.��/��

Jak uzyskać własną nazwę domeny? ..................................................................................................99Wybór nazwy domeny ................................................................................................................100Wybór firmy rejestrującej nazwy domen ...................................................................................102Pułapki rejestracji .......................................................................................................................103

Wybór firmy udostępniającej miejsce na serwerze WWW ...............................................................104Wybór najlepszego serwera WWW ............................................................................................105Ilość potrzebnego miejsca na serwerze .......................................................................................107Sposób przechowywania witryny WWW na serwerze ...............................................................107Wybór odpowiednich usług ........................................................................................................109Sprawdzanie firm udostępniających miejsce na serwerach WWW ............................................111

Inne czynniki wpływające na wybór firmy ....................................................................................... 112Obsługa klienta ...........................................................................................................................112Korzystanie z pomocy technicznej .............................................................................................112

Unikanie nieuczciwych firm .............................................................................................................113Na co zwrócić szczególną uwagę? .............................................................................................113Kradzież nazw domen ................................................................................................................113Pułapka nielimitowanej liczby odwiedzin na stronie lub nieograniczonego miejsca na dysku .... 114Pułapka ofert promocyjnych .......................................................................................................114

Usługi dodatkowe .............................................................................................................................115Dodatkowe konta poczty elektronicznej .....................................................................................115Przekierowanie wiadomości poczty elektronicznej ....................................................................115Konta pocztowe automatycznie wysyłające odpowiedzi ............................................................117Statystyki odwiedzin ..................................................................................................................118Konfigurowanie parametrów witryny za pomocą panelu administracyjnego .............................119Redystrybucja miejsca na serwerze WWW ................................................................................121

Ładowanie stron na serwer WWW ...................................................................................................121Transfer poprzez FTP .................................................................................................................122Transfer za pomocą przeglądarki WWW poprzez HTTP ...........................................................126

Podsumowanie ..................................................................................................................................127

�� !"��

��

�� !��"�� #�$

�� '��0��1��

Style znaków ....................................................................................................................................131Kursywa .....................................................................................................................................132Tekst pogrubiony ........................................................................................................................132Tekst preformatowany ................................................................................................................133Indeks górny i dolny ...................................................................................................................133

Elementy FONT i BASEFONT ........................................................................................................135Wyznaczanie wielkości czcionki ................................................................................................ 135Względna wielkość czcionki ......................................................................................................136Porównanie wielkości czcionki i wielkości nagłówka ................................................................136Zmiana domyślnego kroju czcionki ...........................................................................................137Kolor czcionki ............................................................................................................................138

Wyrównywanie i wprowadzanie wcięć w tekście .............................................................................138Co robić z elementami przestarzałymi? ......................................................................................138Wprowadzanie wcięć za pomocą elementu BLOCKQUOTE ....................................................140

Wybór zestawu znaków ....................................................................................................................141Znaki specjalne .................................................................................................................................145Podsumowanie ..................................................................................................................................153

�� 2��* ��1��!��3��/��--

Rodzaje plików graficznych .............................................................................................................155GIF .............................................................................................................................................155JPEG ..........................................................................................................................................156PNG ............................................................................................................................................156

Korzystanie z darmowej grafiki dostępnej w Internecie ...................................................................156Fotografie ogólnie dostępne .......................................................................................................156Wykorzystywanie dzieł grafików ...............................................................................................157Wybór właściwych artystów ......................................................................................................157Wykorzystanie kolekcji fotografii ..............................................................................................158

Unikanie problemów prawnych ........................................................................................................159Wykorzystanie materiału chronionego prawem autorskim .........................................................159Poszanowanie znaków towarowych ...........................................................................................160

Podsumowanie ..................................................................................................................................161

�� ,��4��#��!��3�� '

Dodawanie obrazków do strony .......................................................................................................163Wykorzystanie atrybutów height i width ....................................................................................164Określanie dodatkowych odstępów ............................................................................................165Określanie grubości ramki ..........................................................................................................166

Wprowadzanie zamienników obrazków ...........................................................................................168Dodawanie opisu obrazka ułatwiającego nawigację ...................................................................168Wykorzystanie obrazków o niskiej rozdzielczości do skracania czasu pobierania strony ..........169

Wzajemne położenie tekstu i obrazków ............................................................................................170Przesuwanie obrazków do prawego lub lewego marginesu ........................................................172Zawijanie tekstu wokół obrazka .................................................................................................172Jednoczesne rozmieszczanie kilku obrazków .............................................................................174

� (��)��

Wykorzystanie obrazków do tworzenia połączeń .............................................................................174Wykorzystanie ramek .................................................................................................................175Umieszczanie pod obrazem wielu łączy za pomocą map obrazków ...........................................176

Rozwiązywanie problemów z obrazkami .........................................................................................177Wykorzystanie miniaturek obrazków .........................................................................................177Osadzanie na stronie specjalnych krojów czcionek ....................................................................178

Dodawanie grafiki jako tła ................................................................................................................180Definiowanie wielkości obrazków wielokrotnie powielanych ...................................................180Wprowadzanie tła z bocznym motywem ....................................................................................181Obrazki tła bez widocznych spoin .............................................................................................. 182Unikanie tła rozpraszającego uwagę ..........................................................................................183Wybór koloru i kontrastu ...........................................................................................................183

Podsumowanie ..................................................................................................................................185

�� 5��!��3�� ,2

Wybór programu graficznego ...........................................................................................................187Photoshop ...................................................................................................................................187Fireworks ....................................................................................................................................188Painter ........................................................................................................................................188Paint Shop Pro ............................................................................................................................189

Modyfikowanie obrazków ................................................................................................................189Kadrowanie ................................................................................................................................190Zmiana wielkości i rozdzielczości ..............................................................................................191Obracanie i odwracanie ..............................................................................................................194Wyostrzanie i rozmazywanie .....................................................................................................196Stosowanie filtrów efektów artystycznych .................................................................................197

Wykorzystanie programów do tworzenia grafiki trójwymiarowej ....................................................199Poser ...........................................................................................................................................200Bryce ..........................................................................................................................................201trueSpace ....................................................................................................................................202iSpace .........................................................................................................................................202Trójwymiarowe modele i nie tylko… .........................................................................................203

Podsumowanie ..................................................................................................................................204

�� 6��!3��"��3�� "�� 6-

Określanie atrybutów koloru ............................................................................................................205Ustawianie koloru tła .................................................................................................................206Wybór koloru tekstu ...................................................................................................................207Określanie koloru łączy ..............................................................................................................207

Nazwy i kody szesnastkowe kolorów ...............................................................................................208Kody kolorów .............................................................................................................................209Nazwy kolorów ..........................................................................................................................209Paleta bezpiecznych kolorów .....................................................................................................210

Zasada trzech „k”: komplementarność, kontrast i koordynacja ........................................................213Wybór kolorów komplementarnych ...........................................................................................214Dobór odpowiedniego kontrastu ................................................................................................215Koordynacja schematu kolorów .................................................................................................215

Właściwości kolorów .......................................................................................................................216Podsumowanie ..................................................................................................................................216

�� !"��

��%�&�� '�(�)'�� #�

�� !�"�� Wstawianie tabel i definiowanie ich rozmiarów ...............................................................................220Obramowania tabel ...........................................................................................................................224Odstępy w tabelach ...........................................................................................................................225Wyrównywanie tabel i zawartości komórek .....................................................................................227

Wyrównywanie w poziomie ....................................................................................................... 228Wyrównywanie w pionie ............................................................................................................234Zablokowanie zawijania tekstu w komórkach ............................................................................234

Łączenie komórek .............................................................................................................................236Obrazki i kolory w tabelach ..............................................................................................................237

Dodawanie obrazków tła do tabeli .............................................................................................238Definiowanie koloru tła tabeli ....................................................................................................239

Podsumowanie ..................................................................................................................................244

�� 1�� 1��#��-Projektowanie układu ramek ............................................................................................................246

Funkcje ramek ............................................................................................................................247Projektowanie układu nawigacji .................................................................................................247Układ ramek typu działanie-wynik .............................................................................................248

Tworzenie dokumentów układu ramek ............................................................................................. 248Wstawianie ramek pionowych i poziomych ...............................................................................250Definiowanie wymiarów ramki w pikselach, wartościach procentowych i względnych ............253Zablokowanie możliwości zmiany wielkości ramek ..................................................................256Definiowanie nazw i zawartości ramek ......................................................................................256Zagnieżdżanie dokumentów układu ramek ................................................................................258Zastosowanie elementu NOFRAMES ........................................................................................259

Wykorzystanie połączeń w ramkach ................................................................................................260Lokalizowanie połączeń w określonych ramkach ......................................................................261Wykorzystanie zarezerwowanych nazw ramek ..........................................................................262

Definiowanie obramowania i marginesów ramek .............................................................................263Określanie grubości linii obramowania ......................................................................................263Definiowanie kolorów obramowania .........................................................................................264Wprowadzanie szerokości marginesów ramki ...........................................................................265

Konfigurowanie opcji paska przewijania ..........................................................................................265Alternatywy dla ramek ...............................................................................................................265

Unikanie problemów z ramkami .......................................................................................................267Sprawdzanie, czy została zdefiniowana właściwa liczba ramek .................................................268Dodawanie obcych elementów ...................................................................................................268Jakich rozdzielczości monitora najczęściej używają użytkownicy? ...........................................268Projektowanie właściwej liczby ramek ......................................................................................269Zamieszczanie połączeń do menu nawigacyjnego .....................................................................269

Podsumowanie ..................................................................................................................................270

�� #�7((� ��2�Testowanie przeglądarki WWW .......................................................................................................272Obsługa CSS w przeglądarce WWW ...............................................................................................272Kaskadowa hierarchia .......................................................................................................................273

Zastosowanie atrybutu style .......................................................................................................273Osadzanie stylów za pomocą znacznika <STYLE> ...................................................................274Dołączanie zewnętrznych arkuszy stylów ..................................................................................275

� (��)��

Zmiana właściwości elementów HTML ...........................................................................................276Przypisywanie klas ...........................................................................................................................277Wykorzystanie selektorów ID ..........................................................................................................278Definiowanie właściwości elementów zagnieżdżonych ...................................................................278

Niektóre ciekawe możliwości CSS .............................................................................................279Specyfikacja CSS .............................................................................................................................281

Właściwości CSS1 .....................................................................................................................281Właściwości CSS2 .....................................................................................................................290

Programy służące do tworzenia arkuszy stylów ...............................................................................314Przydatne witryny poświęcone CSS .................................................................................................314Podsumowanie ..................................................................................................................................315

�� "��3��#��2Dodawanie warstw ...........................................................................................................................317

Wykorzystanie CSS do rozmieszczania elementów ...................................................................317Różne układy ..............................................................................................................................318Bezwzględny i względny sposób rozmieszczania warstw ..........................................................319Elementy zagnieżdżone ..............................................................................................................321Warstwy nachodzące na siebie ...................................................................................................322Układanie warstw w stos za pomocą atrybutu z-index ...............................................................322Zastosowanie przezroczystości i kolorów tła warstwy ...............................................................323

Wycinanie fragmentów warstw ........................................................................................................324Widoczność warstw ....................................................................................................................325

Wyświetlanie elementów większych od rozmiarów warstwy ...........................................................325Warstwy widoczne .....................................................................................................................326Warstwy ukryte ..........................................................................................................................326Paski przewijania ........................................................................................................................327

Podsumowanie ..................................................................................................................................328

��*�+)�� "�� ,"�� -��'"�� )�� ..#

�� -��!��5��#�5��1"�� Wstawianie formularzy .....................................................................................................................334

Element INPUT ..........................................................................................................................334Wprowadzanie nazw elementów kontrolnych ............................................................................335

Wprowadzanie krótkich informacji za pomocą pól tekstowych .......................................................336Definiowanie rozmiaru pola tekstowego ....................................................................................337Definiowanie maksymalnej długości wprowadzanego tekstu ....................................................338Wprowadzanie wartości początkowych w polu tekstowym .......................................................339Definiowanie pól przeznaczonych tylko do odczytu ..................................................................340

Wprowadzanie kompleksowych informacji za pomocą wielowierszowych pól tekstowych ............341Definiowanie wielkości wielowierszowych pól tekstowych ......................................................341Zawijanie tekstu .........................................................................................................................342Wprowadzanie domyślnej zawartości ........................................................................................343

Wykorzystanie pól wyboru i przycisków wyboru ............................................................................343Dodawanie pól wyboru ..............................................................................................................345Grupowanie przycisków wyboru ................................................................................................345Definiowanie domyślnie zaznaczanego wyboru .........................................................................347

Wprowadzanie list wyboru za pomocą elementów SELECT oraz OPTION ....................................347Wprowadzanie wartości .............................................................................................................349Wyświetlanie menu przewijanego ..............................................................................................350

�� !"��

Możliwość wyboru wielu opcji w menu przewijanym ...............................................................350Wprowadzanie domyślnie zaznaczanej opcji .............................................................................352

Wykorzystanie przycisków INPUT ..................................................................................................352Wstawianie przycisku Submit ....................................................................................................352Wstawianie przycisku Reset .......................................................................................................353Tworzenie własnych przycisków ................................................................................................354Wstawianie obrazków pełniących funkcję przycisków ..............................................................354

Wykorzystanie elementu BUTTON ................................................................................................. 356Wstawianie pól ukrytych ..................................................................................................................357Dodawanie etykiet ............................................................................................................................358Definiowanie kolejności tabulacji ....................................................................................................359Definiowanie klawiszy skrótów ........................................................................................................360Wysyłanie formularza .......................................................................................................................361Podsumowanie ..................................................................................................................................363

�� '�� 8�9�(�� '-

Przykład programu w JavaScript ......................................................................................................365Składnia JavaScript ..........................................................................................................................366

Zmienne i stałe ...........................................................................................................................367Zmiana wartości zmiennych za pomocą operatorów ..................................................................369Wprowadzanie poleceń ..............................................................................................................371Łączenie poleceń w funkcje .......................................................................................................379Dokonywanie wyboru za pomocą if oraz if…else ......................................................................381Wykorzystanie pętli ....................................................................................................................382

Uruchamianie skryptów za pomocą zdarzeń ....................................................................................385Wywoływanie poleceń JavaScript przy ładowaniu strony i przechodzeniu na inną stronę ........387Reagowanie na ruchy myszą ......................................................................................................388Pojedyncze i podwójne kliknięcie myszą ...................................................................................390Wciskanie i zwalnianie klawiszy ................................................................................................391

Obiekty w JavaScript ........................................................................................................................392Właściwości ...............................................................................................................................393Metody .......................................................................................................................................395

Sprawdzanie danych formularza .......................................................................................................395Sprawdzanie kompatybilności przeglądarki .....................................................................................399Podsumowanie ..................................................................................................................................404

�� 2��:��+��)�3 ��!3��6-

Schemat nawigacji ............................................................................................................................405Unikanie pułapek nawigacyjnych ...............................................................................................406Unikanie stron-sierot ..................................................................................................................407

Dodawanie pasków nawigacyjnych ..................................................................................................408Projektowanie graficznych pasków nawigacyjnych ...................................................................409Dodawanie wskaźników .............................................................................................................411Dodawanie podmienianych obrazków za pomocą JavaScript ....................................................412Wybór kierunku wyświetlania paska nawigacyjnego .................................................................414

Wyświetlanie połączeń za pomocą list i menu .................................................................................415Wyświetlanie połączeń za pomocą zwykłego tekstu ..................................................................415Tworzenie wypunktowanych i numerowanych list połączeń .....................................................417Tworzenie menu za pomocą elementu SELECT ........................................................................422

Podsumowanie ..................................................................................................................................423

� (��)��

�� ,��4� �� "��3��-

Problemy związane ze wstawianiem animacji ..................................................................................425Obsługa zdarzeń myszy ....................................................................................................................426

Podmienianie obrazków .............................................................................................................426Wywoływanie zmian w innych elementach ...............................................................................428

Animowanie elementów ...................................................................................................................430Obliczanie pozycji bezwzględnej ............................................................................................... 431Animacja w starszych przeglądarkach ........................................................................................433Określanie rozmiaru okna przeglądarki ......................................................................................436Animacja koloru .........................................................................................................................440

Podsumowanie ..................................................................................................................................443

�� #�0"�� -

Układ programu Flash ......................................................................................................................445Obraz ..........................................................................................................................................446Sceny ..........................................................................................................................................447Warstwy .....................................................................................................................................447Listwa czasowa ..........................................................................................................................448Przybornik ..................................................................................................................................448Panele narzędzi ...........................................................................................................................450

Tworzenie obiektów .........................................................................................................................450Rysowanie linii za pomocą narzędzia Line ................................................................................452Zmiana właściwości rysowanych linii ........................................................................................452Zaznaczanie i kasowanie obiektów ............................................................................................453Narzędzia do rysowania dowolnych kształtów ...........................................................................453Zapisywanie dotychczasowej pracy ...........................................................................................454Importowanie grafiki ..................................................................................................................455Korzystanie z biblioteki ..............................................................................................................455

Modyfikowanie obiektów .................................................................................................................455Rozciąganie i zniekształcanie obiektów .....................................................................................456Grupowanie obiektów ................................................................................................................457Skalowanie .................................................................................................................................457Obracanie i pochylanie ...............................................................................................................458Prostowanie i wygładzanie .........................................................................................................458Wypełnianie gradientami ............................................................................................................459Wypełnianie bitmapami .............................................................................................................460

Praca z tekstem .................................................................................................................................460Dodawanie tekstu .......................................................................................................................461Wybór czcionki ..........................................................................................................................461Definiowanie właściwości czcionki ...........................................................................................462Tworzenie różnych efektów za pomocą tekstu ...........................................................................463

Wykorzystanie listwy czasowej do tworzenia animacji ....................................................................463Wykorzystanie klatek .................................................................................................................464Wprowadzanie klatek kluczowych .............................................................................................464Dodawanie warstw .....................................................................................................................464Dodawanie obiektów do warstwy ...............................................................................................465Zamiana obiektów na symbole ................................................................................................... 465Tworzenie animacji ....................................................................................................................466Tworzenie automatycznej animacji ............................................................................................467Tworzenie dodatkowych efektów na innych warstwach ............................................................468

�� !"��

Dodawanie dźwięku ...................................................................................................................469Dodawanie plików dźwiękowych MP3 ......................................................................................471Synchronizacja dźwięku i zdarzeń .............................................................................................471

Wykorzystanie zaawansowanych funkcji .........................................................................................471Programowanie w ActionScript .................................................................................................472Wprowadzanie akcji ...................................................................................................................472

Eksportowanie i publikowanie filmów .............................................................................................473Eksportowanie filmów ...............................................................................................................473Publikowanie filmów .................................................................................................................475Wskazówki pomocne w optymalizowaniu filmów .....................................................................477

Podsumowanie ..................................................................................................................................478

�� 6��4� ��!��3��1"�� "��2�

Dodawanie dźwięku .........................................................................................................................479Wybór formatu pliku dźwiękowego ...........................................................................................480Osadzanie dźwięku .....................................................................................................................480Definiowanie głośności ..............................................................................................................481Użycie elementu NOEMBED ....................................................................................................482Źródła muzyki cyfrowej .............................................................................................................482

Osadzanie filmów wideo ..................................................................................................................485Odtwarzanie filmu ......................................................................................................................487Źródła cyfrowych filmów wideo ................................................................................................488

Wstawianie apletów Javy .................................................................................................................488Definiowanie wartości atrybutu PARAM ..................................................................................488Wyświetlanie alternatywnej zawartości zamiast apletu ..............................................................489Przykład wykorzystania apletu ...................................................................................................489Aplety również są obiektami ......................................................................................................492Źródła apletów ...........................................................................................................................495

Podsumowanie ..................................................................................................................................496

�� "�+��2

Świat blogów ....................................................................................................................................497Korzystanie z witryny Blogger.com .................................................................................................499

Krótka historia Bloggera ............................................................................................................499Tworzenie bloga w witrynie Blogger .........................................................................................500Dodawanie nowych wpisów do bloga ........................................................................................505

Inne narzędzia do tworzenia blogów ................................................................................................508Hometown na America Online ...................................................................................................509blogs.com i TypePad ..................................................................................................................510LiveJournal .................................................................................................................................511Radio UserLand .........................................................................................................................512Polskie blogi ...............................................................................................................................513Dodatki dla bloggerów ...............................................................................................................514

Integrowanie blogów z witrynami WWW ........................................................................................515Blogowanie jako styl pisania ......................................................................................................516Integrowanie bloga z witryną za pomocą łączy ..........................................................................516Pełna integracja bloga z witryną .................................................................................................516

Podsumowanie ..................................................................................................................................517

� (��)��

��*�/0!�� 1#$

�� ;�� "��1��+��-��

Wybór rodzaju działalności ..............................................................................................................521Witryny oferujące pojedyncze lub wyspecjalizowane produkty .................................................522Witryny sprzedające różnorodne produkty .................................................................................522Megasklepy internetowe .............................................................................................................523Internetowe sklepy komputerowe ...............................................................................................525Witryny oferujące usługi ............................................................................................................525Centra handlowe .........................................................................................................................526

Konfigurowanie koszyka zakupów ...................................................................................................526Kwestia bezpieczeństwa .............................................................................................................527Zakładanie sklepu w istniejącym centrum handlowym ..............................................................528Zakup komercyjnych programów ...............................................................................................529Korzystanie z programów z bezpłatnym dostępem do kodu źródłowego ...................................531

Pobieranie opłat ................................................................................................................................531Karty kredytowe i debetowe .......................................................................................................532Czeki ..........................................................................................................................................533E-pieniądz ..................................................................................................................................534Zakładanie sklepu powiązanego z witryną .................................................................................534

Cykl dokonywania zakupów w Internecie ........................................................................................536Podsumowanie ..................................................................................................................................537

�� (�� )�� <""�+��-�

Pierwsze kroki na Allegro ................................................................................................................540Tworzenie konta na Allegro .......................................................................................................540Cennik Allegro ...........................................................................................................................543

Przygotowywanie sprzedaży na Allegro ...........................................................................................544Wybór kategorii ..........................................................................................................................544Opis przedmiotu .........................................................................................................................546Cena przedmiotu i czas trwania aukcji .......................................................................................547Opcje płacenia i dostawy ............................................................................................................549Opcje dodatkowe ........................................................................................................................550Wysyłanie przedmiotu ................................................................................................................551

Jak mieć jak najwięcej korzyści z Allegro? ......................................................................................552Tworzenie reputacji wiarygodnego sprzedawcy .........................................................................552Monitorowanie przebiegu aukcji ................................................................................................ 554Po aukcji .....................................................................................................................................554Jak zwiększyć szansę na udaną sprzedaż? ..................................................................................554Możliwości szablonów Allegro .................................................................................................. 555

Narzędzia dla sprzedających .............................................................................................................555motoAllegro ...............................................................................................................................556

e-Bay ................................................................................................................................................556PayPal ........................................................................................................................................558

Podsumowanie ..................................................................................................................................558

�� /�� -'�

Karty kredytowe i karty debetowe ....................................................................................................561Procedury zwrotu towarów i pieniędzy ......................................................................................563Problem kosztów obsługi kart kredytowych ...............................................................................565

�� !"��

Czeki .................................................................................................................................................566E-pieniądz .........................................................................................................................................567Podsumowanie ..................................................................................................................................568

�� -��"�� -'�

Reklamowanie się poprzez Google i inne wyszukiwarki internetowe ..............................................569Reklama poprzez Google ...........................................................................................................569Reklamowanie się w innych wyszukiwarkach ...........................................................................575Reklama z użyciem banerów ......................................................................................................576

Współpraca z agencjami reklamowymi ............................................................................................ 577Znajdowanie odpowiedniej agencji reklamowej ........................................................................577Programy stowarzyszeniowe ......................................................................................................579

Inne formy reklamy ..........................................................................................................................580Reklama za pomocą e-maili .......................................................................................................580Zbieranie adresów e-mail ...........................................................................................................580Rozsyłanie biuletynów pocztowych ...........................................................................................581

Podsumowanie ..................................................................................................................................582

�� '��3=�� -,

Używanie nazw domen i znaków towarowych ....................................................................................583Dyskusja związana z nazwami domen .......................................................................................584Ustawa ACPA ............................................................................................................................586Odszukiwanie nazw domen w Internecie ...................................................................................586Dbanie o swoją domenę .............................................................................................................586Sprawdzanie znaków towarowych w Internecie .........................................................................587

Pozbądźmy się nieuzasadnionych obaw ........................................................................................... 588Informowanie o bezpieczeństwie witryny ..................................................................................588„Polityka” prywatności ...............................................................................................................590

Zasady reklamacji i zwrotów towarów .............................................................................................593Możliwości zarabiania w Internecie .................................................................................................594

Zamieszczanie reklam ................................................................................................................595Optymalizacja witryny pod kątem wyszukiwarek ......................................................................596

Podsumowanie ..................................................................................................................................598

��*��2)�� '��'�" ��

�� &�� 1$$

�� 2��< ��#� ��'6�

Testowanie witryny ..........................................................................................................................601Oceń witrynę z punktu widzenia użytkownika ...........................................................................602Zlecanie testowania witryny osobom z zewnątrz .......................................................................603Analiza opinii osób testujących lub odwiedzających witrynę ....................................................605

Zmiany sposobu wyświetlania witryny .............................................................................................606Konfiguracja przeglądarki ..........................................................................................................606

Spójność elementów witryny ............................................................................................................608Dbaj o komfort gości Twojej witryny ........................................................................................608Podstawowe zadania administratora witryny .............................................................................608Wybór narzędzi do administrowania ..........................................................................................609Programy monitorujące pracę serwerów ....................................................................................609

Podsumowanie ..................................................................................................................................609

� (��)��

�� ,��.��1�"�� '��

Systematyczne uaktualnianie witryny ...............................................................................................611Zamieszczanie najnowszych informacji .....................................................................................612Ustalanie harmonogramu zmian .................................................................................................612Przygotowywanie aktualnych informacji ...................................................................................613Zachęcanie użytkowników do prezentowania opinii ..................................................................613

Techniki budowania stałych relacji z klientami ................................................................................ 615Tworzenie biuletynów i czasopism elektronicznych ..................................................................615Opinie o produkcie .....................................................................................................................616Tworzenie wirtualnych przewodników ......................................................................................616

Przyszłość należy do standardu XML ...............................................................................................617Klasyfikowanie zawartości a definiowanie układu wyświetlanej strony ....................................619Dodawanie kolejnych znaczników .............................................................................................620Wykorzystanie definicji rodzaju dokumentu (DTD) ..................................................................620Korzystanie z różnych słowników XML (XML vocabularies) ...................................................622

Wykorzystanie XHTML-a 1.0 ..........................................................................................................623Kompatybilność HTML-a i XML-a ...........................................................................................623Porównanie XHTML-a i HTML-a 4.0 .......................................................................................625Rozwiązywanie problemów związanych z kompatybilnością przeglądarki ...............................625

Podsumowanie ..................................................................................................................................626

�� >%&� ��'�2

Projektowanie z wykorzystaniem XML-a ........................................................................................627Zasady obowiązujące w języku XML ........................................................................................628Współpraca różnych słowników XML-a — przestrzenie nazw ..................................................629Klasyfikowanie zawartości a definiowanie układu wyświetlanej strony ....................................629Definiowanie CSS ......................................................................................................................630Tworzenie arkusza stylów XSL .................................................................................................. 631Definiowanie struktury dokumentu XML ..................................................................................636Dodawanie kolejnych znaczników .............................................................................................637Dodatkowe informacje na temat definicji typu dokumentu (DTD) ............................................638

Wykorzystanie XHTML-a 1.0 ..........................................................................................................639Kompatybilność HTML-a i XML-a ...........................................................................................640Porównanie XHTML-a i HTML-a 4.0 .......................................................................................641Rozwiązywanie problemów związanych z kompatybilnością przeglądarki ...............................642

Podsumowanie ..................................................................................................................................643

�� 6��;��"�+��!�"��<��%&��'�-

Co to jest WML? ..............................................................................................................................645Pierwsze kroki w WML .............................................................................................................646Znaczniki WML .........................................................................................................................648Tasowanie kart ...........................................................................................................................650

Interakcja z użytkownikiem ..............................................................................................................652Formularze w języku WML ....................................................................................................... 652Definiowanie formatu wprowadzanych danych .........................................................................654Definiowanie dopuszczalnych wartości wprowadzanych danych ..............................................654Tworzenie menu w języku WML ...............................................................................................655Menu wielokrotnego wyboru ..................................................................................................... 656Różnice pomiędzy listami w HTML i WML ..............................................................................657

Przekształcanie kodu XHTML na WML ..........................................................................................657Podsumowanie ..................................................................................................................................661

�� !"��

+)�� 33.

4� ��<�(��5��$�%&��6�� ''-

4� �� (��5��>$�%&��6�� 1+�� ',-

4� ��7�(��5��>%&��6�� 2��

4� ��4�(��5��%&��6� ��2'2

4� ��?�&��8�9�(��,�-

(�� ,��

(�� ,'

��

��

��

��

� Wstawianie tabel i definiowanie ich rozmiarów

� Obramowania tabel

� Odstępy w tabelach

� Wyrównywanie tabel i zawartości komórek

� Łączenie komórek

� Obrazki i kolory w tabelach

Tabele na stronach WWW wydają się nieciekawe, lecz jeśli wykorzystasz je odpowied-nio, będą niezastąpionym narzędziem przy projektowaniu stron WWW. Tabela zawie-rająca listę słów lub liczb w kolejnych kolumnach, z pewnością nie nada oryginalnegocharakteru Twojej stronie. Oczywiście zestawienie danych w tabelach samo w sobie jestpożyteczną, a czasami wręcz niezbędną techniką prezentowania informacji. Nie jeste-śmy zatem przeciwnikami tabel służących wyłącznie do prezentowania danych, ponieważprzydają się one do przedstawiania określonych informacji — tabele takie pojawiają sięrównież w przykładach prezentowanych na stronach tej książki!

Jest to mniej atrakcyjne zastosowanie tabel i, niestety, podstawowe, jeśli chodzi o tabeleumieszczane w wydawnictwach papierowych. Natomiast tabele na stronach WWWmają znacznie szersze zastosowania i można z ich pomocą uzyskać zdumiewająceefekty. Zacznijmy od podstawowych definicji: tabela to zestaw komórek zawierającychokreślone informacje. Tabele na stronach WWW są tak użyteczne dzięki temu, co moż-na umieścić w ich komórkach. W odróżnieniu od dość prostych i nieciekawych tabelznanych z dokumentów drukowanych, w każdej komórce można umieścić prawie każdyelement tworzący stronę WWW. Wyjątkiem są ramki, które nie zawierają się w elemen-cie �� i jako takie nie mogą być wprowadzone do komórek tabeli. Poza tym nie maograniczeń — możesz realizować wszystkie swoje pomysły.

Element �� omówiliśmy w rozdziale 3., natomiast na temat ramek piszemyw rozdziale 12.

��

��

Pomysłowi projektanci stron WWW już od lat wykorzystują tabele, planując układ po-szczególnych elementów na stronach. Za pomocą tabel, których komórki są wypełnioneróżnymi elementami, na przykład obrazkami lub połączeniami, można uzyskać napraw-dę niezłe efekty — niektóre z najciekawszych projektów, na widok których wprost ci-śnie się na usta pytanie: „Jak oni to zrobili?”, zostały wykonane właśnie w ten sposób.Strona WWW, przedstawiona na rysunku 11.1, jest właśnie przykładem takiej tabeli.

�� Tabele wykorzystujesię do projektowaniaukładu strony WWWpoprzez umieszczaniew nich różnychelementów,niekoniecznietekstowych

Tabele dodajemy do stron WWW za pomocą znacznika ��. Zawiera on jeden lubwięcej elementów � (ang. table row — wiersz tabeli). Elementy � zawierają z kolei jedenlub więcej elementów �� (ang. table data — dane tabeli), które nazywamy komórkamitabeli. Kod źródłowy typowej tabeli wygląda następująco:

�� !�� "�� #�� $#�� %��#��

Zdefiniowana przez nas tabela, przedstawiona na rysunku 11.2, posiada trzy wiersze,a każdy z nich dwie komórki.

��

�� Przykładowa tabela

Jeśli szerokość i wysokość tabeli nie jest zdefiniowana w kodzie HTML, jej wymiary sąnarzucane przez zawartość komórek. Tabela automatycznie zmienia swoje wymiary, dopa-sowując je do elementów umieszczonych w komórkach — nawet jeśli w efekcie miała-by mieć większe rozmiary niż te podane przez nas w kodzie HTML.

Aby wprowadzić własny rozmiar tabeli, trzeba wykorzystać atrybuty �� (szerokość)i �� (wysokość). Na przykład, aby wstawić na stronie tabelę przedstawioną na rysunku11.3, zajmującą całą długość i wysokość okna przeglądarki, należy wprowadzić kod:

��#&��''(�&�� &#��''(��

�� Tabelamoże zajmowaćcałą szerokośći wysokośćokna przeglądarki

��

Atrybut ��#& jest znacznie częściej wykorzystywany niż &�� &#, ponieważ strony WWWmają w zasadzie nieograniczoną długość, a internauci są przyzwyczajeni do przewijaniastron, gdy chcą zobaczyć ciąg dalszy.

Wymiary tabeli wyrażone w procentach określają, jaką część okna przeglądarki — bezwzględu na rozdzielczość ekranu — zajmie tabela. 100 procent szerokości okna oznaczacałą szerokość okna, zaś 50 procent — połowę szerokości okna przeglądarki, itd. Wy-miary tabel można także definiować w pikselach. Przykładowo, aby utworzyć tabelęo szerokości 400 pikseli i wysokości 250 pikseli, wprowadź linię kodu:

��#&��)''�&�� &#��*+'��

Jeśli wymiary Twojej tabeli zostaną określone w pikselach, czasem się zdarzy, że bę-dziesz musiał przewijać stronę w poziomie. Na przykład, jeśli wprowadzisz szerokośćtabeli — 800 pikseli, a rozdzielczość ekranu ustawiona jest na 640×480 pikseli, prawajej część nie zostanie wyświetlona w oknie przeglądarki. Aby ją zobaczyć, należy prze-winąć stronę w poziomie. Dlatego lepszym rozwiązaniem jest podawanie wymiarów ta-bel w formie procentowej i pozostawienie przeglądarce kwestii ustalenia dokładnychwymiarów.

Można również połączyć obie techniki wprowadzania wymiarów tabel. Jeden z wymia-rów zdefiniować w pikselach, a drugi w formie procentowej. Na przykład, w kodzie wpro-wadzamy szerokość tabeli równą 400 pikselom i wysokość określoną jako trzy czwarteokna przeglądarki:

��#&��)''�&�� &#��,+(��

Możesz także definiować wysokość i szerokość poszczególnych komórek w tabeli, leczmusisz mieć świadomość, że wpłynie to na układ pozostałej części tabeli. Wprowadze-nie określonej szerokości jednej komórki spowoduje, że wszystkie inne w tej kolumnieprzyjmą tę samą szerokość. Podobnie, definiując wysokość jednej komórki, określaszwysokość wszystkich komórek w wierszu tabeli.

Jeśli wprowadzisz w jednym wierszu lub w kolumnie dwa różne wymiary komórek,zostanie narzucony większy. Na przykład, w tym samym wierszu określiłeś wysokośćjednej komórki na 50 pikseli, a innej — 80, wszystkie komórki w tym wierszubędą miały wysokość 80 pikseli. Jeśli dodasz jeszcze kolejną komórkę o wysokości100 pikseli, to wszystkie komórki w wierszu przyjmą wysokość 100 pikseli.

Atrybuty �� i �� odnoszą się do poszczególnych komórek, jak i całej tabeli. Jed-nak musisz wiedzieć, że kiedy wprowadzasz wymiar komórki w formie procentowej, toodnosi się on do rozmiarów tabeli, a nie okna przeglądarki. To znaczy, że umieszczającna stronie tabelę o szerokości 50 procent okna przeglądarki i definiując równocześnieszerokość komórki jako 50 procent szerokości tabeli, otrzymasz komórkę, której szero-kość wynosi 25 procent szerokości okna przeglądarki.

Przykład kodu obrazuje, jak można wprowadzić w tabeli szerokość pierwszej kolumnyrówną jednej trzeciej szerokości całej tabeli i jednocześnie zadać 100 pikseli jako wy-sokość drugiego wiersza.

��

�� #&��--(�� &�� &#��''�� !�� "�� #�� $#�� %��#��

Tabela o takich wymiarach została przedstawiona na rysunku 11.4.

�� Rezultatwprowadzeniaróżnych wartościwielkości wierszyi kolumn w tabeli

Jeśli w kodzie tabeli nie wprowadzisz żadnej zawartości do jej komórek, nie zostanieona też wyświetlona w oknie przeglądarki.

Podczas definiowania wymiarów poszczególnych części tabeli mogą się zdarzyć nie-przewidziane sytuacje. Określanie wymiaru w pikselach dla pojedynczych komórek jestprawidłowe, jeśli jednocześnie nie definiujesz sprzecznie wymiaru całej tabeli. Na przy-kład, zapis kodu, który prezentujemy niżej, przyniesie inne od oczekiwanych rezultaty— tabela nie zostanie wyświetlona prawidłowo w oknie przeglądarki:

��#&��.''�� #&��*''�� #&��''��

��

��&�� &#��''�� !�� "�� #�� $#�� %��#��

W opisanej sytuacji przeglądarka WWW rozwiąże jednak sama problem wyświetleniatak zdefiniowanej tabeli. Pierwsza kolumna będzie miała 400 pikseli szerokości, a druga— 200. Ponieważ zadana, łączna szerokość dwóch kolumn tabeli, zdefiniowanych w kodzieHTML, jest mniejsza (300 pikseli) od zadeklarowanej szerokości całej tabeli (600 pikseli),przeglądarka wybiera szerokość większą, czyli 600 pikseli. Jednocześnie zachowanajest proporcja szerokości komórek (w tym przypadku 2 do 1), co daje właśnie szerokości400 i 200 pikseli.

Podczas definiowania rozmiarów tabeli warto więc zwracać uwagę na wprowadzaniewłaściwych wielkości.

W zapisie procentowym można także przez pomyłkę wprowadzić błędne wartości, tzn.ich suma nie da 100 procent. Przeglądarki radzą sobie i z tym problemem — zachowu-jąc proporcje wymiarów komórek. Kiedy łączny wymiar komórek przekroczy 100 pro-cent, wszystko ponad to jest proporcjonalnie odejmowane od każdej komórki.

Funkcję tę można świadomie wykorzystywać. Wielu projektantów stron WWW posta-wionych przed problemem utworzenia tabeli złożonej z trzech kolumn o identycznejszerokości, rezygnując z precyzji, wprowadza odpowiednio 33, 33 i 34 procent (łącznie100 procent). Jeśli wprowadzisz we wszystkich komórkach rozmiar 33 procent, prze-glądarka podzieli brakujący 1 procent między wszystkie kolumny, więc będą one ideal-nie równe.

��

W zależności od przeznaczenia można wprowadzać różne rodzaje obramowania tabel.Jeśli tabela ma tylko pomóc w zaprojektowaniu określonego układu elementów na stro-nie, wprowadzanie obramowania nie jest pożądane. Niemniej, jeśli obramowanie tabelijest nam potrzebne, wprowadzenie go nie jest żadnym problemem.

Grubość obramowania definiujemy za pomocą atrybutu ��. W przykładzie koduokreśliliśmy grubość linii obramowania tabeli jako 1 piksel:

��

Większość osób projektujących strony WWW unika grubych krawędzi tabel i nadaje imwartość od 1 do 5 pikseli. Każde obramowanie grubsze niż 1 piksel jest wyświetlanew oknie przeglądarki w charakterystyczny sposób — prawa krawędź i dolna krawędźtabeli wydają się ciemniejsze od pozostałych. Uzyskujemy efekt rzucania cienia przeztabelę, jak gdyby promień światła padał z jej lewego, górnego rogu. Rysunek 11.5 przed-stawia różne rozmiary obramowania tabeli.

��

�� Ramki o grubościpowyżej 5 pikselinie wyglądajązachęcająco

Zwróć uwagę na to, że grubość obramowania tabeli nie wpływa na zmniejszenie we-wnętrznego obszaru komórek ani na grubość oddzielających je krawędzi. Od tej zasadyjest jednak wyjątek — jeśli definiujesz tabelę bez obramowania, nadając mu wartość ze-ro, to również komórki tabeli nie będą posiadały wewnętrznych krawędzi.

Dodatkowo można modyfikować obramowania tabel oraz układ krawędzi pomiędzykomórkami. Są to jednak funkcje o niewielkim znaczeniu, ponieważ związane są za-zwyczaj z jedną konkretną przeglądarką i nie mają statusu powszechnego standardu.

Nawet jeśli zamierzasz umieścić na stronie tabele pozbawione obramowania,najlepiej początkowo definiować je wraz z obramowaniem, a na końcu usunąćramki. Ułatwia to projektowanie układu strony, gdyż poszczególnych elementów

nie umieszczamy w „niewidzialnych” komórkach tabeli1.

��

Czasem regulujemy odległość pomiędzy zawartością komórki a jej krawędziami. Zale-ży to od zawartości określonej komórki (tekst, obrazek). Rysunek 11.6 przedstawia ta-belę, której komórki nie posiadają odstępu między krawędziami a zawartością. Pierwszakomórka zawiera obrazek, który idealnie się tu mieści, natomiast druga — tekst opisującyobrazek, który jest trudniejszy do odczytania, ponieważ przylega ściśle do krawędzikomórki.

1Część programów do tworzenia stron WWW oferuje możliwość podglądu układu tabeli, w której grubość

ramki zdefiniujemy jako 0 pikseli. Tak jest np. w programie Netscape Composer — przyp. tłum.

��

�� Obrazki w tabeliwyglądają lepiej,jeśli nie wprowadzimyodstępu między nimia krawędziamikomórek

Na rysunku 11.7 przedstawiono tę samą tabelę. Tym razem jednak odstęp między za-wartością a obramowaniem komórek wynosi 2 piksele. Jeśli mówimy o położeniu obrazka,to pojawiła się niepożądana przerwa między jego krawędziami i obramowaniem komórki,natomiast tekst pod obrazkiem jest bardziej czytelny niż w poprzednim przykładzie.

�� Tekst jestbardziej czytelny,jeśli dodamyodstęp między nimi obramowaniemkomórki

Wstawianie obrazków do tabeli zostało szerzej omówione w podrozdziale„Obrazki i kolory w tabelach”

��

Odstęp między zawartością tabeli i jej krawędziami można zdefiniować za pomocą atry-butu ��, który wprowadzamy w elemencie ��. Odstęp ten dotyczy całej ta-beli, nie można go zadeklarować tylko dla jej poszczególnych komórek. Aby zdefiniowaćodstęp 2 pikseli, omawiany w przytoczonym przykładzie, wprowadź następujący kod:

��!�//0��1 ��*��

Można również wprowadzić odstępy pomiędzy samymi komórkami w tabeli. Na ry-sunku 11.8 przedstawiamy różne warianty takich odstępów.

�� !�Można nadawaćodstępompomiędzy komórkamiróżne wartości

Odstępy między komórkami w tabeli wprowadza się za pomocą atrybutu ��,który definiujemy w elemencie ��. Przyjmujemy, że wprowadzamy odstęp 5 pikselimiędzy wszystkimi komórkami w tabeli:

��!�//�0�!�1 ��+��

Wybór odpowiedniego odstępu między zawartością tabeli a jej krawędziami oraz odstępumiędzy samymi komórkami w tabeli — to nie to samo, choć możemy je indywidualnieustalać. Wybór jest tutaj w znacznej mierze kwestią naszych preferencji estetycznych.Tabela, w której nie zostanie zdefiniowana żadna z tych wartości, i tak będzie poprawna.

��

Wyrównywanie tabel to działanie całkowicie odmienne od wyrównywania wierszy i ko-mórek. Polega na określaniu pozycji tabeli na stronie WWW. Definiujemy je w elemencie�� za pomocą atrybutu ��. Atrybut �� może przyjmować następujące wartości:�� (przysunięcie do lewego marginesu), �� (wyśrodkowanie na stronie) oraz �� (przysunięcie do prawego marginesu). Wyśrodkowanie tabeli spowoduje umieszczenieobu jej krawędzi w równej odległości od prawego i lewego marginesu. Na rysunku 11.9została przedstawiona tabela wyrównana do prawego marginesu strony.

��

�� "�Tabela wyrównanado prawegomarginesu strony

��

Atrybut ��, przypisany elementom � i ��, służy z kolei do wyrównywania zawartościobjętych nim komórek, a nie samych komórek. Między wyrównywaniem tabeli i wyrów-nywaniem wierszy lub komórek nie ma żadnego związku, chociaż używamy atrybutuo takiej samej nazwie i przyjmuje on identyczne wartości. W tym przypadku musimyzdecydować, ile komórek i które chcemy poddać formatowaniu — wszystkie będąpodlegać tej samej regule wyrównania.

Mamy tu do czynienia z jeszcze jednym przykładem dziedziczenia (w kodzie HTML)właściwości elementów nadrzędnych przez elementy, które są w nich zawarte. Ustawie-nia wprowadzone dla wiersza tabeli obejmują domyślnie wszystkie komórki, znajdujące sięw tym wierszu. Na przykład, jeśli element � (wiersz tabeli) jest wyrównany do środka,wszystkie elementy �� (komórka tabeli) w tym wierszu będą automatycznie objęte tym sa-mym wyrównaniem. Aby to zmienić, należy pominąć dziedziczone wartości atrybutów.

Relacje między elementami nadrzędnymi i podrzędnymi w kodzie HTML omówiliśmyw rozdziale 3.

Jako przykład pokazujemy tabelę złożoną z dwóch wierszy. Dla pierwszego nie zdefi-niowano typu wyrównania. Oznacza to, że zawartość wszystkich komórek w tym wier-szu jest automatycznie wyrównana, zgodnie z domyślną wartością, do lewego brzegukomórki. W drugim wierszu zadeklarowaliśmy wyrównanie do środka, ale w pierwszejkomórce tego wiersza wprowadziliśmy wyrównanie do prawej krawędzi.

��#&��)''�� 23 ��1�1��34/1��23 ��1�1��34/1��/� 1��!�1#� ��

��

��/� 1�� &#��23 ��1�1��0 ��5��34/1��3 ��1�1��/��

Rysunek 11.10 przedstawia tak zdefiniowaną tabelę, wyświetloną w oknie przeglądarki.

�� #�Wyrównanieobowiązującew całym wierszuzostanie pominięte,jeśli zdefiniujemywyrównaniekonkretnejkomórki

��

Jeśli umieścisz w tabelach znajdujące się na stronach WWW formularze — które nienajlepiej wyglądają w zwykłym kodzie HTML — zyskają nie tylko na wyglądzie, alebędzie je można wypełniać w prostszy sposób. Korzyść dla gości Twojej witryny jestwięc podwójna. Na rysunku 11.11 przedstawiamy formularz napisany w zwykłym HTML.Utworzono go za pomocą kodu:

�6��7�!#��1��! �8��1�!&�!��1#90/��#��0��#��:��;3#��1��<�=:�>�#30��#�?#�1�� 1��@��A�<�=:�>�#30��0�� 1��0��=:�>�#30��#�B�/��234/�5��6��7�

Formularze zostały omówione w rozdziale 15.

Na rysunku 11.12 przedstawiliśmy ten sam formularz, połączony jednak z tabelą, dziękiczemu wygląda dużo lepiej na stronie WWW.

��

�� Formularze tworzonew standardowymkodzie HTMLnie są zbyt ładne

�� Dzięki tabelomformularzena stronach WWWmogą wyglądaćlepiej

Formularz przedstawiony na rysunku 11.12 uzyskaliśmy dzięki wstawieniu tabeli zdefi-niowanej tak, jak to zostało pokazane w tym przykładzie kodu HTML:

�6��7�!#��1��! �8��1�!&�!��1#90/��#��0��#��/� 1�� &#��:��;3#��1��<��/� 1��/�C#��=:�>�#30��#�?#�1�� 1��

��

��/� 1�� &#��@��A�<��/� 1��/�C#��=:�>�#30��0�� 1��0��/� 1��/�C#��=:�>�#30��#�B�/��234/�5��6��7�

Ten efekt zawdzięczamy wstawieniu elementu �� wewnątrz elementu ��, a nie naodwrót. W tabelach można wstawiać elementy tylko do poszczególnych komórek, więccały formularz trzeba byłoby wstawić do jednej komórki, co nie pozwoliłoby kontrolowaćukładu poszczególnych pól. Trzeba zatem wstawić tabelę do formularza! W ten sposóbkorzystamy jednocześnie ze struktury tabeli i funkcji formularza.

Opisywana przez nas tabela posiada dwie kolumny. Pierwsza zawiera tekst, który opisujepola formularza i został wyrównany do prawej krawędzi komórki. W drugiej kolumniewstawiono pola formularza (do wypełnienia), które wyrównano do lewego brzegu ko-mórki. Dzięki temu uzyskaliśmy ładniejszy układ poszczególnych elementów formularza.

��

��

Tabele są wręcz niezbędne, jeśli na stronie wykorzystujemy tło z motywem graficznym,przylegającym do bocznej krawędzi strony. W naszym przykładzie z lewej strony znaj-duje się wzór, utrudniający odczytanie umieszczonego na pierwszym planie tekstu.Niewykorzystana pozostaje prawa część strony. Ilustruje to rysunek 11.13 — umiesz-czony w tradycyjny sposób na stronie tekst jest mało czytelny.

�� Element tłanie powinienzasłaniać tekstuumieszczonegona stronie

��

Więcej informacji o obrazkach tła znajdziesz w rozdziale 8.

Na stronie WWW w prosty sposób można wykorzystać obrazki tła i tak wkomponowaćtekst, by nie pokrywał się z artystycznym motywem tła. W kodzie HTML dokonuje siętego na kilka sposobów, ale najłatwiej i najszybciej osiąga się zamierzony efekt, wyko-rzystując tabelę. W zasadzie potrzebna jest Ci tylko jedna komórka tabeli. Podajemyprzykład, w którym zdefiniowaliśmy typową stronę WWW, tak aby obrazek znajdującysię z boku nie zakrywał tekstu umieszczonego na stronie:

�@�7��@��=��%# �1�� 5$!�#A��!�13�� =��@��!� ��1��#&��D'(��/� 1�� &#�� @�7��

Rysunek 11.14 przedstawia tabelę utworzoną według zapisanego kodu, umieszczonąw prawej części strony. Sztuczka polega na dobraniu odpowiedniej szerokości tabelii sposobu jej wyrównania. Tabelę wyrównano do prawego marginesu, co spowodowało,że znalazła się po przeciwnej stronie wzoru tła. Nadanie tabeli szerokości mniejszej niższerokość okna przeglądarki umożliwia oddzielenie graficznego motywu tła od tekstu,można więc uniknąć nakładania się wzoru i tekstu.

�� Tabelao odpowiedniejszerokości,wyrównanado prawegomarginesu,nie zakrywabocznegowzoru tła

��

Ten kod możesz zastosować na swoich stronach WWW, zastępując wyrażenie pliko-brazka nazwą pliku, w którym przechowywany jest obrazek, który służy za margines.Następnie określ rozmiary tabeli, tak by zajmowała część strony, która nie jest zarezer-wowana dla wzoru tła. Na przykład możesz zwiększyć rozmiary tabeli do 95 procent sze-rokości strony — wszystko zależy od rodzaju wstawionego tła, my zdecydowaliśmy sięna 80 procent. Ostatnim krokiem jest usunięcie krawędzi tabeli, po to by nie była widocz-na dla osób odwiedzających witrynę. Aby usunąć krawędzie tabeli, zastąp wyrażenie�� wyrażeniem �� .

Teraz należy zamieścić pomiędzy znacznikami !��" i !#��", w miejscu gdzie w pre-zentowanym przez nas kodzie znajduje się wyrażenie Zawartość strony, treść Twojejstrony WWW. Dzięki temu działaniu wszystkie elementy Twojej strony zostaną umiesz-czone w jednej komórce tabeli, która rozszerzy się w pionie i dopasuje do umieszczonejw niej zawartości. Na rysunku 11.15 przedstawiamy projekt strony, o której pisaliśmyna początku tego podpunktu, z zawartością umieszczoną w jednej komórce tabeli.

�� Umieszczeniezawartości stronyw tabeli pomagawe właściwymrozmieszczeniuelementóww stosunkudo elementugraficznego

Aby umieścić zawartość strony w pewnej odległości od lewej krawędzi, można takżeskorzystać z innych metod. Na przykład zamieszczając tekst w elemencie ��$%&'��.Wadą tego rozwiązania jest to, że tekst zostanie przesunięty równolegle w stosunku doobu marginesów, podczas gdy wystarczy odsunąć go tylko od lewego marginesu.W dodatku nie wiadomo, co zrobić z nietekstowymi elementami strony.

Innym rozwiązaniem jest wprowadzenie szerszego marginesu w lewej części strony zapomocą CSS, z tym że nie wszystkie przeglądarki WWW obsługują kaskadowe arkuszestylów.

CSS (kaskadowe arkusze stylów) omówiliśmy w rozdziale 13.

��

��

Wiersze i komórki tabeli wyrównujemy w poziomie za pomocą atrybutu ��, możnaje także wyrównywać w pionie — za pomocą atrybutu (��. Temu atrybutowi przypi-sujemy jedną z czterech wartości: �� (góra), )�� (środek), �� ) (dół) i ��.Wartość �� zawsze sprawia problemy. Różne przeglądarki odmiennie ją inter-pretują, więc nie można mieć pewności, w jaki sposób zostanie wyświetlona zawartośćkomórki. Zajmiemy się więc trzema podstawowymi wartościami.

Tym razem w naszym przykładzie zdefiniowaliśmy tabelę, która zawiera cztery wiersze.Pierwszy z nich nie ma zdefiniowanej wartości atrybutu (��, więc zgodnie z domyśl-ną wartością następuje wyrównanie do środka komórki. Dla drugiego wiersza zdefinio-wano wyrównanie do górnej krawędzi komórki, a dla trzeciego — do dolnej krawędzi.W ostatnim wierszu wprowadziliśmy wyrównanie do środka, tyle że dwie komórkiw tym wierszu posiadają swoje własne wartości wyrównania.

��&�� &#��)''�� 34/1��3 ��1�1��34/1��3 ��1�1��34/1��3 ��1�1��34/1��3 ��1�1��B�/� 1��#�0��23 ��1�1�� 3��23 ��1�1�� 3��23 ��1�1�� 3��23 ��1�1�� 3��B�/� 1��##��23 ��1�1��A��23 ��1�1��A��23 ��1�1��A��23 ��1�1��A��B�/� 1��!�1#� ��B�/� 1��#�0��23 ��1�1�� 3��23 ��1�1��34/1��/�� 23 ��1�1��34/1��/�� B�/� 1��##��23 ��1�1��A��

Tak zdefiniowana tabela została przedstawiona na rysunku 11.16.

��

Tekst w komórce tabeli, napotykając na krawędź, zawija się i przechodzi do następnejlinii. Jeśli to konieczne, wysokość komórki zostaje zwiększona, tak by cały tekst mógłsię zmieścić. Większość osób projektujących strony WWW korzysta z tego domyślnegoustawienia. Jeśli jednak zależy Ci na tym, aby pozostawić tekst w jednej linii komórki,możesz dodać do niej atrybut �� (bez zawijania). Na przykład:

��1�� 0�

��

�� Wyrównaniezadeklarowanedla całego wierszama niższy priorytetniż wyrównaniezdefiniowanedla poszczególnychkomórek

Jeśli wprowadzimy w komórce atrybut ��, zostanie ona poszerzona tak, by całytekst zmieścił się w jednej linii. Na rysunku 11.17 przedstawiamy tabelę, w której jednakomórka posiada zdefiniowany atrybut ��.

�� Atrybut nowrapumożliwiawyświetleniew jednej liniicałego tekstuumieszczonegow komórce

��

��

Podstawowy układ tabeli jest symetryczny — każdy wiersz i kolumna zawierają takąsamą ilość komórek, a każda komórka w wierszu i kolumnie posiada ten sam rozmiar.Można to jednak zmienić. Atrybuty �� (rozpiętość w kolumnie) i �� (rozpię-tość w wierszu) elementu �� (komórka tabeli) umożliwiają łączenie komórek — zarów-no w pionie, jak i poziomie. Funkcja ta jest niezwykle użyteczna w tabelach służącychprzede wszystkim do przedstawiania danych, zwłaszcza gdy konieczne jest wprowa-dzenie paska tytułowego, który zajmuje więcej niż jedną kolumnę lub jeden wiersz. Narysunku 11.18 przedstawiono przykład łączenia komórek.

�� !�Można łączyćkomórki wierszyi kolumn

Kod takiej tabeli wygląda następująco:

�� 0�1��*��!�/�0�1��*��E�#3��!�/�0�1��*��3��%��!��%��!��%��!��%��!�� 0�1��*��2� ��,��)��

��

��.��*-��.��+��*��F��

Pomimo tego że połączyliśmy komórki, tabela nadal posiada pięć kolumn i cztery wiersze.Zwiększenie rozpiętości komórki na kilka wierszy lub kolumn komplikuje kod źródłowy,w porównaniu do kodu symetrycznej tabeli.

Pierwszy wiersz wygląda następująco: pierwsza (pusta) komórka zajmuje dwa wiersze,lecz tylko jedną kolumnę. Kolejne dwie komórki zajmują tylko jeden wiersz, lecz każdaz nich jest rozpięta na dwie kolumny. Nadal w tabeli jest pięć kolumn.

Drugi wiersz jest nieco bardziej skomplikowany. Wyraźnie składa się tylko z czterechkomórek. Pierwsza komórka wyświetlana w tym wierszu jest właściwie pustą komórkązdefiniowaną w poprzednim wierszu, rozpiętą na dwa wiersze jednocześnie. Jeśli doda-my w drugim wierszu kolejne cztery elementy ��, otrzymamy w rezultacie pięć kolumn.

Trzeci wiersz rozpoczyna się komórką rozpiętą jednocześnie na trzecim i czwartym wierszu,lecz tylko na jednej kolumnie. Pozostałe cztery elementy �� uzupełniają następne czterykolumny, w rezultacie mamy pięć kolumn.

W ostatnim wierszu, podobnie jak w drugim wierszu od góry, pierwsza pusta komórkajest utworzona poprzez rozpięcie komórki z trzeciego wiersza na dwa wiersze jednocześnie.Następne cztery komórki zostały zdefiniowane w elementach ��, dając w rezultacie pięćkolumn.

��

Obrazki są dodawane do komórek tabeli tak samo jak do stron WWW — za pomocąelementu *�+. Różnica polega na tym, że element *�+ należy umieścić między znacznikami!��" i !#��". Przykład umieszczania obrazka w komórce tabeli przedstawiamy poniżej:

��=7G� !��

Przykład tabeli, zawierającej obrazek, przedstawia rysunek 11.19. Sama tabela nie jestwidoczna na stronie, została jedynie wykorzystana do rozmieszczenia elementów. (Atry-butowi �� przypisano wartość zero). Układ obrazka na stronie jest zdefiniowanypoprzez układ tabeli.

Więcej informacji związanych z dodawaniem obrazków do stron WWW znajdzieszw rozdziale 8.

��

�� "�Obrazkimożna dodawaćdo tabelna tej samej zasadziejak wszelkieinne elementy

��

Tabele, a nawet poszczególne wiersze czy komórki, mogą posiadać własne obrazki tła.Szczerze mówiąc, funkcja ta nie jest jednak użyteczna. Korzystanie z niej może prowadzićdo gorszego układu graficznego tabeli, a w konsekwencji całej strony. Jeśli przy plano-waniu układu graficznego tabeli wykorzystujesz zaawansowane funkcje, wprowadzenieobrazków tła tabeli może zniweczyć cały Twój trud. Przykładowo, na rysunku 11.20przedstawiamy tabelę, której ładną ramkę utworzono przez połączenie definicji kolorutła z widocznymi i niewidocznymi obrazkami na pierwszym planie. Na rysunku 11.21pokazujemy tę samą tabelę, w której wstawiliśmy obrazek tła, przez co praca włożonaw utworzenie ramki została zniweczona. Choć efekt końcowy w przeglądarce InternetExplorer nie prezentuje się tak źle jak w Netscape Navigator, i tak jest niezadowalający.

�� #�Tabelazaprojektowanabez tła

��

�� Ta sama tabelazniekształconaprzez dodanie tła

Dodatkowe trudności wynikają ze sposobu odczytywania kodu źródłowego przez prze-glądarki. Netscape Navigator rozróżnia obrazki tła na poziomie całej tabeli, wierszyi poszczególnych komórek, natomiast Internet Explorer nie wyświetla obrazków tławprowadzanych do wierszy tabeli.

Aby obrazek pojawił się jako tło tabeli, należy do odpowiedniego jej elementu dodaćatrybut ��,��-�� wraz z podaniem ścieżki dostępu do pliku obrazka. Na przykład, abydodać do całej tabeli obrazek tła o nazwie lisc_tlo.gif (zlokalizowany w tym samymfolderze co nasz plik HTML), wprowadź kod:

��!� ��1��/��!H#/�9 �C��

Aby wprowadzić obrazek tła do wiersza tabeli, zastosuj atrybut ��,��-�� do elementu �:

��!� ��1��/��!H#/�9 �C��

Do poszczególnych komórek tabeli wprowadzamy obrazek tła, modyfikując element ��:

��!� ��1��/��!H#/�9 �C��

��

Kolory tła, w przeciwieństwie do obrazków tła, są w tabelach częściej używane. W ta-belach zawierających dane, na przykład liczbowe, wyróżnianie wierszy poprzez okre-ślanie różnych ich kolorów, zwiększa przejrzystość i ułatwia odczytywanie zapisanychdanych. Używając koloru możemy także wyróżnić nagłówki tabeli, uwydatnić dolnąkrawędź lub dokonać innych operacji, które poprawią wyrazistość samej tabeli. Na ry-sunku 11.22 przedstawiamy tabelę, zawierającą dane, której elementy wyróżniliśmy,zmieniając w wierszach kolory tła.

��

�� Różne kolory tłapomagają wyróżnićposzczególneelementy tabeli

W projektowaniu stron WWW bardzo przydaje się stosowanie różnych kolorów tła ta-beli. Możesz zdefiniować kolor i rozmiar pojedynczej komórki tabeli, a uzyskasz róż-nokolorowe paski w poszczególnych częściach tabeli. Ten zabieg jest często stosowanyw tabelach zamiast obramowania, z równie dobrym efektem.

Kolor tła komórki tabeli nie jest wyświetlany w przeglądarce, do momentu aż znajdziesię w niej dowolny element. Jak więc można wprowadzić tło, nie umieszczając w ko-mórce żadnego elementu? Zwłaszcza takiego, który wpływałby na zmianę koloru tła?Kreatywni projektanci stron WWW znaleźli już rozwiązanie, i jest ono diabelnie proste.Wystarczy utworzyć specjalny obrazek, składający się tylko z jednego, „przezroczystegopiksela”. Taki obrazek możesz wprowadzić do dowolnej komórki tabeli bez koniecznościpodawania jej wymiarów. Jest to duża zaleta, zwłaszcza że dokładny wymiar nadajemykażdemu obrazkowi przez podanie wartości atrybutów �� i �� , które definiująwymiar komórki tabeli.

Prezentujemy przykład zastosowania tej techniki. Możesz ją przecież wykorzystywaćna swoich stronach WWW. Rysunek 11.23 przedstawia tabelę złożoną z kolorowychpasków i pary obrazków. Obrazkami są ukośne linie, po obu stronach pierwszego wierszatabeli. Linie poziome i pionowe w tabeli to pewnego rodzaju kolorowe paski, o którychwspominaliśmy wcześniej. W ich wyświetleniu oczywiście pomógł nam przezroczystyobrazek IttyBittyClear.gif.

Oto kod źródłowy wykorzystany do wygenerowania strony przedstawionej na rysun-ku 11.23:

�@�7��@��=�� 1��/� ��3!&0��=��@�� !�/� ��I666666��#&��''(�� '�!�//�0�!�1 ��'�!�//0��1 ��'��/� 1��/�C#�� 0�1��*��/� 1�� &#�!�/�0�1��*��=7G� !��0��C#)901 ��#&��)-�&�� &#��D)�� '�� 13�/��3� � ��

��

�� Efekty graficznezastosowanejtechniki

�� !�/� ��I-"+DF,�B�/� 1��#�0��/� 1��!�1#� ��#&��''(��=7G� !��=##3��##3"/�� 9 �C��#&��&�� &#��)�� '��/#�� 1� ��/� �� 0��C�1��135��''(�� 0�1��*��/� 1��/�C#�!�/�0�1��*��=7G� !��0�� &#)901 ��#&��)-�&�� &#��D)�� '��/#�� 13�0 ��3� � ��/� 1��!�1#� �B�/� 1��/��&�� &#��,D��#�5��!��31� A��/��/� ��/� 1��/�C#�� !�/� ��I-"+DF,�&�� &#��''(��=7G� !��=##3��##3"/�� 9 �C��#&��)�&�� &#�� '��/#��=7G� !��=##3��##3"/�� 9 �C��#&��-F�&�� &#�� '��/#��#�5��!��30��#�A$!�J4K�# �13��=7G� !��=##3��##3"/�� 9 �C��#&��-F�&�� &#�� '��/#�� !�/� ��I-"+DF,��/� 1�� &#�B�/� 1��/��=7G� !��=##3��##3"/�� 9 �C��#&��)�&�� &#�� '��/#��@�7��

W kodzie źródłowym zapisano, że szerokość górnego, kolorowego paska została zdefi-niowana jako 100 procent szerokości okna przeglądarki. Pamiętamy, że podawanie wy-miarów w procentach (względem wymiarów okna przeglądarki) gwarantuje automatycz-ne dostosowanie wymiaru do każdej rozdzielczości ekranu. Jeśli całkowita szerokośćtabeli przekroczy 100 procent szerokości okna przeglądarki (a tak jest w tym przypadku,

��

ponieważ w wierszu znajdują się jeszcze inne komórki), wtedy przeglądarka automa-tycznie zmniejszy proporcjonalnie wymiary każdej komórki w tym wierszu. Dzięki ta-kiemu rozwiązaniu, niezależnie od rozdzielczości ekranu i rozmiarów okna przeglądarki, ta-bela będzie zawsze wyświetlana prawidłowo.

Ten sam efekt można uzyskać poprzez nadanie komórce, zawierającej kolorowy pasek,absolutnej szerokości, powiedzmy 99999 pikseli. Ponieważ tabela jest już dopasowanado szerokości okna przeglądarki, więc nie spowoduje to zwiększenia szerokości jejkomórek.

Możesz skorzystać z zaprezentowanego szablonu strony WWW, wprowadzając, oczy-wiście w odpowiednim miejscu, zawartość Twojej strony. Do tabeli dodaje się kolejnewiersze poprzez kopiowanie ostatniego elementu � z zaprezentowanego kodu źródło-wego i wklejanie go do własnej strony, tyle razy, ile wierszy jest nam potrzebnych. Ele-ment ten oddzieliliśmy od pozostałej części kodu dodatkowymi odstępami, aby ułatwićCi jego kopiowanie. W ten właśnie sposób utworzyliśmy przykładową stronę, przed-stawioną na rysunku 11.24.

�� Do schematu strony,przedstawionejw poprzednimprzykładzie,dodaliśmynowe elementy

Nie trzeba wcale umieszczać kolorowych pasków na skraju tabeli. Możesz je także wsta-wić w dowolnej komórce. Spójrzmy teraz na przykład e-zinu, czyli internetowego ma-gazynu (patrz rysunek 11.25). Cienką, pionową linią będziemy oddzielać różne artykuły,upodobniając wygląd strony WWW do układu szpaltowego czasopism drukowanych. Po-dobnie jak w poprzednim przykładzie, również tutaj możesz wykorzystać przygotowanyprzez nas kod źródłowy, wprowadzając we właściwych miejscach zwartość Twojej strony.

Projekt e-zinu został przedstawiony na rysunku 11.25. Pierwszy wiersz tabeli, w którymumieściliśmy logo czasopisma, składa się z pojedynczej komórki, która rozpięta jest nawszystkich kolumnach tabeli. Następny wiersz składa się z trzech komórek. Środkowakomórka zawiera niewidoczny obrazek, umożliwiający wyświetlenie czarnego kolorutła. W komórkach z lewej i prawej strony umieszczono teksty artykułów. Ostatni, dolnywiersz, podobnie jak wiersz początkowy, jest rozpięty na wszystkich trzech kolumnach.Zazwyczaj umieszcza się w nim połączenia do innych stron, witryn; oczywiście, możeszto miejsce wykorzystać inaczej.

��

�� Podstawowy układe-zinu, wykorzystanokolorowy pasekoddzielającysąsiadująceartykuły

Opisany powyżej schemat e-zinu utworzyliśmy za pomocą następującego kodu:

�@�7��@��=�� 1��0 �5��#�� 31��=��@��#&��''(��=G:��!�1#� �B�/� 1��#�0��"��%��:��-��#�5��!��3/� ��B�/� 1��#�0��#&�+'(��#��5��!��30�� 3� #3��A9�� !�/� ��/�!��&�� &#��''(��=7G� !��=##3��##3"/�� 9 �C��#&��&�� &#�� '��/#��5��1��A�� 0�!��#&�+'(��#�5��!��3� � �� #3��A9��=G:��!�1#� �B�/� 1��/��"��%��:��-��#�5��!��30�A$!��1��@�7��

Wysokość komórki zawierającej kolorowy pasek jest równa wysokości całej tabeli(100%), dlatego linia ta będzie odpowiednio długa niezależnie od długości artykułu.

Na rysunku 11.26 przedstawiliśmy, jak wygląda układ naszej strony WWW po wsta-wieniu do tabeli przykładowych wartości. Wprowadziliśmy także odstęp 3 pikseli po-między zawartością i krawędziami komórek, zwiększając tym samym odstęp międzytekstem i krawędziami tabeli oraz rozmiar środkowej linii.

��

�� Układ strony WWWzbliżonydo układu stronytypowego czasopisma

Ten przykład niech będzie punktem wyjścia do dalszej pracy, doskonalenia układu stro-ny WWW przy pomocy tabel i jej poszczególnych elementów. Prześledź kod źródłowyi pomyśl, a z pewnością odkryjesz wiele zastosowań tabel i kolorowych pasków.

��

Jeśli w arsenale projektanta stron WWW znajduje się „tajna broń”, są nią właśnie tabele.Można je wykorzystać do różnych celów.

W tym rozdziale zwróciliśmy uwagę na następujące zagadnienia:

� Za pomocą tabel można wstawiać na strony WWW różne elementy.

� Tabele składają się z wierszy, reprezentowanych poprzez element �(ang. table row — „wiersz tabeli”). Wiersze z kolei są złożone z komórek,definiowanych za pomocą elementu �� (ang. table data — „dane tabeli”).

� Rozmiar tabeli można definiować za pomocą wartości absolutnych, wyrażonychw pikselach lub poprzez wartość procentową (względem rozmiaru okna przeglądarki).

� Obramowanie wyróżnia krawędzie tabel i komórek.

� W tabeli można zdefiniować określone odstępy między poszczególnymikomórkami.

� W tabeli można wprowadzić odstępy między krawędziami komóreka ich zawartością.

� Układ tabeli określa się poprzez zdefiniowanie wyrównania samej tabelii jej komórek.

� Komórki mogą obejmować więcej niż jeden wiersz lub kolumnę.

Tworzenie stron WWW. Biblia. Wydanie II

Documents

Transcript of Tworzenie stron WWW. Biblia. Wydanie II