[ Pobierz całość w formacie PDF ]
.Początkowo stanowił on część farmy o powierzchni kilkuset akrów, składającej się z kilku domów oraz stodoły.Aktualnie dom oraz stodoła usytuowane są na działce o powierzchni 4 akrów.</p></div><div id="content0102"><p>Wnętrze domu zostało nieco zmodyfikowane, na przykład, przebudowano kuchnię.Nie mniej jednak z zewnątrz dom się niemal nie zmienił.Stodoła nie została natomiast w żaden sposób zmodyfikowana.</p></div><div id="content0200"><img src="house.jpg" height="93" width="150" /><img src="barn.jpg" height="100" width="150" /><img src="grounds.jpg" height="69" width="150" /></div></body></html>Wynikowa strona WWW została przedstawiona na rysunku 21.6.Widać na nim rozwinięte menu, jednak nie zostały jeszcze wyświetlone żadne informacje.Rysunek 21.6Rozwijalne menu wyświetlone w przeglądarce Microsoft Internet Explorer 5Rysunek 21.7 przedstawia wygląd strony po wybraniu jednej z opcji menu.Jak widać, ukryta wcześniej zawartość strony została wyświetlona.Rysunek 21.7Ukryta wcześniej zawartość strony wyświetlona dzięki możliwościom DHTMLNa rysunku 21.8 przedstawiłam tę samą stronę wyświetloną w przeglądarce Netscape Navigator.Fakt, że strona działa poprawnie dowodzi, że wykorzystane techniki DHTML działają poprawnie w obu przeglądarkach.Jak widać na rysunku rozwinęłam menu i wybrałam ostatnią dostępną opcję, aby wyświetlić zdjęcia domu.Rysunek 21.8Strona wyświetlona w Netscape Navigatorze 4.61 jest potwierdzeniem, że stworzony kod DHTML może być używany w obu przeglądarkachĆwiczenie 2: Zagrajmy w kółko i krzyżykDo wykonaniaOstatnim przykładem, jaki podam w tym rozdziale, będzie strona WWW umożliwiająca grę w kółko i krzyżyk, w całości stworzona przy użyciu DHTML.Bez żadnych dodatków ani konserwantów! Sama gra, jak również strona, na której została umieszczona, wykorzystują kilka przydatnych technik DHTML, takich jak: określanie typu i wersji przeglądarki, określanie „poziomu” elementu przy wykorzystanie atrybutu z-index, chowanie i wyświetlanie elementów oraz tworzenie animacji.Strona, którą spróbujemy stworzyć, została przedstawiona na rysunku 21.9.Rysunek 21.9Gra w kółko i krzyżyk, stworzona jako strona DHTML działająca w różnych przeglądarkachOPISThe game … — Pionki biorące udział w grze są początkowo ukryte, pojawiają się w momencie kliknięcia pustego pola planszyTitle … — Tytuł strony „wysuwa się” z lewego, górnego wierzchołka stronyEach … — Każde pole planszy jest odrębnym elementemThe button … — Przycisk czyści planszę i przygotowuje ją do kolejnej gryChoć nie jesteś w stanie tego zobaczyć, patrząc na rysunki wydrukowane na stronach tej książki, to jednak w rzeczywistości tytuł strony jest początkowo wyświetlany poza jej lewym, górnym wierzchołkiem, po czym „wsuwa” się na nią i dociera do miejsca docelowego, czyli bezpośrednio nad planszę.Tworzenie elementów graficznych stronyGrafika bo bardzo ważny element wszystkich stron WWW.Tworzona strona zawiera wizualną (choć prostą) grę w kółko i krzyżyk, dlatego też zdecydowałam, że wyświetlane na niej elementy graficzne powinny być wesołe, proste i kolorowe.Gdy wymyśliłam już ogólną ideę działania strony i stworzyłam „wstępny” skrypt, byłam w stanie określić szczegółowy sposób rozwiązania problemu, jaki powstał w związku z graficzną postacią gry.W pierwszej chwili miałam zamiar stworzyć planszę do gry jako jeden duży kwadrat, podzielony na dziewięć mniejszych pól.Po stworzeniu takiej planszy odkryłam jednak, że łatwiejszym rozwiązaniem będzie wykreowanie dziewięciu niezależnych obrazków, reprezentujących dziewięć pól planszy i umieszczenie każdego z nich w odrębnym znaczniku div.Używając kaskadowych arkuszy stylów, każdy z tych elementów można wyświetlić w ściśle określonym miejscu strony, dzięki czemu użytkownik nie będzie w stanie stwierdzić, że plansza do gry składa się z dziewięciu części.NotatkaTworząc obrazki wykorzystywane na tej stronie, posługiwałam się programami Adobe Photoshop 5 oraz Adobe ImageReady.Zdaję sobie sprawę, iż możesz nie mieć dostępu do tych programów [ Pobierz całość w formacie PDF ]