Flash - Tworzenie Serwisów - Przyk³adowy Projekt

Tworzenie serwisów

Przykładowy projekt – Wirtualna ksi

garnia

Dotarli

my do ostatniego rozdziału tej ksi

ąŜ

ki, w którym w praktyce wykorzystamy wiedz

, zdobyt

w tej ksi

ąŜ

ce. Naszym zadaniem b

dzie stworzenie serwisu ksi

garni internetowej o nazwie Wirtualna

Ksi

garnia. Aby przetestowa

serwis skopiujmy jego pliki do katalogu domowego naszego serwera

WWW

baz

danych

Wirtualna_Ksiegarnia.mdb,

która

znajduje

katalogu

Rozdzial09\Serwis\BazaDanych, poł

czmy ze

ródłem danych ODBC (Systemowe DSN) pod nazw

Baza (rys.9.1.).

Rysunek 9.1. Strona główna serwisu Wirtualna Ksi

garnia, który stworzymy w tym rozdziale

Chocia

projekt nie jest skomplikowany, to jednak nie jest on te

na tyle prosty aby mo

na było pisa

go w notatniku, dlatego te

do stworzenia projektu niezb

dny b

dzie jeden z programów typu

WYSIWYG, słu

Ŝą

cych do tworzenia serwisów i zarz

dzania nimi. W tym rozdziale skorzystamy z

programu Dreamweaver 4, poniewa

jest on produktem Macromedii, tej samej, która stworzyła Flasha

i Generator. Narz

dzia, które s

wbudowane w Dreamweavera, umo

liwiaj

bezpo

rednie

umieszczanie w tworzonym dokumencie HTML plików SWF i SWT, z których b

dziemy korzystali

podczas tworzenia projektu.

li, kto

z was drodzy Czytelnicy nie zna tego programu nie powinien si

przejmowa

. W tym

rozdziale serwis b

dziemy tworzy

krok po kroku, dzi

ki czemu zbudujemy całkiem ambitny projekt od

podstaw, ucz

c si

przy okazji tego kapitalnego programu (polecamy ten program ka

demu

projektantowi serwisów WWW, który chce tworzy

zło

one serwisy nie tylko z elementami SWF i

SWT).

Co potrzebujemy?

Przede wszystkim oprogramowanie, które powinni

my mie

dawno zainstalowane, a wi

Flasha, Generator oraz serwer WWW (w tym wypadku zdecydowanie IIS w systemie Windows 2000,
poniewa

z PWS pod systemem Win9x s

problemy, z jednoczesnym przetwarzaniem wielu

szablonów SWT). Dodatkowo musimy zaopatrzy

w Dreamweavera 4. Na płycie CD-ROM, która

jest doł

czona do tej ksi

ąŜ

ki znajduje si

trzydziestodniowa wersja (trial) Dreamweavera 4, któr

powinni

my zainstalowa

zanim przyst

pimy do pracy.

Poniewa

wykonanie serwisu w najdrobniejszych szczegółach (np. graficznych) nie miało by

najmniejszego sensu a dodatkowo zaj

ło by nam sporo czasu, na CD-ROM’ie w katalogu

Rozdzial09\Projekt znajdziemy gotowe elementy graficzne oraz animacje SWF, których u

yjemy w

projekcie. Nasze zadanie ograniczy si

do stworzenia szablonów SWT (i to nie wszystkich) oraz

skryptów, które b

„sterowały” prac

serwisu.

Podczas projektowania serwisu, wszystkie animacje SWF, z których b

dziemy korzystali zostały

przygotowane wcze

niej, równie

niektóre szablony SWT s

gotowe, poniewa

nie miało by sensu

aby

my tworzyli wiele podobnych animacji.

UWAGA !!! Z góry zastrzegamy,

e projekt ów nie jest kompletnym serwisem internetowym lecz

skupia si

głównie na tworzeniu szablonów SWT i pisaniu skryptów ASP obsługuj

cych poł

czenie z

baz

danych. Projekt ten nie zawiera

ADNYCH mechanizmów ochrony danych, zawartych w

bazie danych ani tych przesyłanych przez „wirtualny Internet”, dlatego te

nie mo

bezpo

rednio stanowi

projektu wyj

ciowego serwisu internetowego, chocia

na zastosowa

niektóre zawarte tutaj rozwi

zania. Równie

w przypadku bazy danych, która została stworzona na

potrzeby tego serwisu zostały pomini

te kryteria, które powinny zosta

spełnione przy efektywnym

projektowaniu. Owe „niedoci

gni

cia” wynikaj

z samej natury serwisu, który jest jedynie elementem

edukacyjnym doł

czonym do niniejszej ksi

ąŜ

ki.

Interfejs Dreamweavera

Ten podrozdział jest przeznaczony dla tych, który nie znaj

Dreamweavera. Ci z was drodzy

Czytelnicy, którzy potrafi

posługiwa

tym programem mog

przej

ść

do nast

pnego podrozdziału,

natomiast pozostali znajd

tutaj informacje, które w telegraficznym skrócie przedstawi

koncepcj

tworzenia serwisów internetowych w tym programie.

Dreamweaver to edytor WYSIWYG słu

Ŝą

cy do tworzenia serwisów internetowych. Skrót

WYSIWYG pochodzi z j

zyka angielskiego i oznacza What You See Is What You Get czyli: To co

widzisz to masz. Z edytorami WYSIWYG spotkali

my si

zapewne ju

nieraz (np. pakiet MSOffice czy

chocia

by Flash) i pewnie nie jest dla nas tajemnic

e charakteryzuj

one tym, i

elementy

graficzne, które składaj

na projekt s

układane przy pomocy myszki w przestrzeni roboczej, któr

w Dreamweaverze jest dokument HTML (albo inaczej strona WWW).

To,

e program słu

y do tworzenia serwisów internetowych oznacza,

e przy jego pomocy

tworzymy strony WWW, które s

poł

czone fizycznie i merytorycznie w pewn

funkcjonaln

cało

ść

zwan

serwisem internetowym.

UWAGA!!! Pod poj

ciem strony WWW, strony internetowej lub dokumentu HTML (ang. web page)

dziemy rozumieli fizycznie jedn

stron

(dokument) zakodowan

w j

zyku HTML oraz JavaScript,

natomiast pod poj

ciem serwisu internetowego (ang. web site), b

dziemy rozumieli wiele stron

internetowych poł

czonych pod wzgl

dem fizycznym (za pomoc

hiperł

czy) i tematyczny w jedn

cało

ść

Na rysunku 9.2. wida

interfejs graficzny okna programu, w którym, korzystaj

c z narz

dzi

znajduj

cych si

w panelu narz

dziowym, budujemy kawałek po kawałku stron

WWW.

Rysunek 9.2. Okno projektu Dreamweavera
a) Panel narz

dziowy

b) Panel wła

ciwo

Najwa

niejsze panele (tj. te, z których najcz

ęś

ciej b

dziemy korzystali podczas pracy z

Dreamweaverem), to panel narz

dziowy oraz panel wła

ciwo

ci (rys.9.2.). Pierwszy z nich zawiera

narz

dzia takiej jak np. obrazek, tabela, animacji SWF itp., które układamy na stronie HTML przy

yciu myszki. Drugi z paneli, panel wła

ciwo

ci, zawiera parametry i opcj

konkretnych elementów

składaj

cych si

na dokument HTML (zawarto

ść

panelu wła

ciwo

ci zmienia si

w zale

ci od

tego, który element zostanie wyselekcjonowany w przestrzeni roboczej projektu).

Biała przestrze

, któr

wida

w oknie to wła

nie nasza, pusta jeszcze strona WWW. Je

li spojrzymy

na rysunek 9.3, to zobaczymy,

e program umo

liwia prace w trzech trybach (rys.9.3.):

Rysunek 9.3. Tryby pracy w Dreamweaverze
a)  Tryb widoku projektu
b)  Tryb mieszany
c)  Tryb kodowania
d)  Panel narz

dziowy

e) Panel wła

ciwo

•

Tryb widoku projektu (rys.9.3a) jest standardowym trybem pracy. Jest to graficzny tryb pracy,
co oznacza,

e korzystamy z narz

dzi znajduj

cych si

w panelu narz

dziowym. Owe

narz

dzia to obrazek, tabela, warstwa, hiperł

cze i inne;

•

Tryb mieszany widoku projektu i kodowania (rys.9.3b) to tryb, w którym okno projektu jest
podzielone na dwie cz

ęś

ci. W dolnej mo

emy, pracowa

korzystaj

c z narz

dzi znajduj

cych

w panelu narz

dziowym a w górnym mamy mo

liwo

ść

bezpo

rednio z klawiatury

wprowadza

kod HTML. Charakterystyczn

cech

tego trybu pracy jest fakt,

e ka

da zmiana

w obszarze graficznym ma natychmiastowy wpływ na kod HTML znajduj

cy si

w górnej cz

ęść

okna i odwrotnie, ka

da zmiana kodu jest natychmiast odwzorowywana w graficznej

reprezentacji dokumentu HTML w dolnej cz

ęś

ci okna. Tryb mieszany bardzo cz

sto stosuje si

do korygowania drobnych niedoci

gni

ęć

, poniewa

one natychmiast widoczne w postaci

graficznej;

•

Tryb kodowania (rys.9.3c.) jest ostatnim z trybów, w którym mo

na pracowa

Dreamweaverem. Całe okno projektu jest zast

powane przez edytor kodu HTML, w którym z

klawiatury wprowadzamy kolejne polecenia j

zyka HTML.

e tyle wst

pu wystarczy. Reszty dowiemy si

w trakcie tworzenia serwisu.

Przygotowanie projektu

Ze wzgl

du na specyfik

serwisu nie musimy traci

czasu na proces projektowania.. By

ęść

z nas uzna,

e projekt nie jest zbyt ambitny ani pod wzgl

dem graficznym ani te

nie jest zbyt

skomplikowany, ale to dlatego,

aden z tych elementów nie jest tak wa

ny jak sam projekt. Nie

napracujemy si

przy nim zbyt du

o poniewa

kszo

ść

elementów, które b

składa

serwis jest ju

gotowa. Naszym zadaniem, jak ju

pisałem wcze

niej, b

dzie stworzeniu kilku prostych

szablonów SWT, napisanie kilku prostych skryptów ASP i „zło

enie tego wszystkiego razem” w cało

przy pomocy narz

dzi Dreamweavera. Wykorzystamy do tego wi

kszo

ść

narz

dzi dost

pnych w

Dreamweaverze z narz

dziami słu

Ŝą

cymi do zarz

dzania serwisem na czele.

Pierwsz

rzecz

jak

musimy zrobi

to przygotowa

projekt. Katalogiem, w którym b

dzie

znajdował si

nasz projekt powinien by

katalog domowy serwera WWW, co zaoszcz

dzi nam

konieczno

ci kopiowania plików za ka

dym razem gdy b

dziemy chcieli przetestowa

serwis.

Przyst

pujemy wi

c do pracy:

1. Teraz uruchommy Dreamweavera.

Powinni

my zobaczy

okno jak na rys.9.2. (inne mo

e by

rozło

enie paneli, które zale

y od

konfiguracji programu).

2. Z menu Site wybierzmy polecenie Site Map.

li uruchamiamy Dreamweavera po raz pierwszy, to b

pojawia

ró

ne komunikaty, ale

powinni

my je zignorowa

aby nie utrudnia

sobie pracy. Nast

pnie pojawi si

okno Site

(rys.9.4.), w którym b

dziemy mogli kontrolowa

poszczególne dokumenty HTML, składaj

ce si

na serwis.
Okno owo jest podzielone na dwa obszary. W obszarze prawym widniej

pliki oraz katalogi, które

utworzymy w miar

posuwania si

z prac

nad serwisem. Obszar lewy zawiera graficzn

reprezentacj

poł

cze

dzy dokumentami HTML (realizowanych za pomoc

hiperł

czy).

Obszar prawy daje mo

liwo

ść

bardzo szybkiego odszukiwania konkretnych plików i otwierania ich

w oknach Dreamweavera, natomiast obszar lewy, nie przyda nam si

w przypadku tego

konkretnego projektu zbytnio, poniewa

wszystkie poł

czenia mi

dzy dokumentami, b

zawarte

w animacjach SWF oraz szablonach SWT, a tego niestety Dreamweaver jeszcze nie wy

wietla.

Okno Site jest bardzo wa

ne i powinno by

stale otwarte. Dzi

ki niemu mamy szybki dost

p do

dego pliku wchodz

cego w skład serwisu (a tak

e i tych plików, które nie wchodz

bezpo

rednio w skład serwisu, ale s

pomocne, np. tekst w pliku MSWorda opisuj

cy serwis).

Rysunek 9.4. Okno Site

3. Z listy rozwijanej opatrzonej etykiet

Site wybierzmy polecenie Define Sites (rys.9.5.).

Rysunek 9.5. Lista Site zawiera nazwy serwisów, których projekty s

realizowane w Dreamweaverze

Lista Site zawiera nazwy serwisów, których projekty s

realizowane przy pomocy Dreamweavera.

Dzi

ki niej mamy mo

liwo

ść

pracowa

nad wieloma serwisami (oczywi

cie nie w tej samej chwili),

przeł

czaj

c si

pomi

dzy nimi.

4. Po wybraniu wspomnianego polecenie pojawi si

okno Define Sites (rys.9.6.). W oknie tym,

podobnie jak na li

cie Site znajduj

nazwy serwisów, nad którymi pracujemy. W oknie Define

Sites mo

emy tworzy

nowe serwisy oraz modyfikowa

i usuwa

serwisy ju

istniej

ce. Je

uruchamiamy Dreamweavera po raz pierwszy, to w oknie Defines Sites b

znajdowa

serwisy Lessons – Dreamweaver oraz Tutorial – Dreamweaver (lekcje i przykłady pracy w
Dreamweaverze)

Rysunek 9.6. Okno Define Sites

Aby stworzy

nowy serwis wci

nijmy klawisz New

5. Pojawi si

kolejne okno Site Definition (rys.9.7.).

Przy pomocy tego okna mamy mo

liwo

ść

okre

lenia nazwy serwisu (w polu Site Name) oraz

katalogu na dysku twardym, w którym powinny znajdowa

pliki serwisu – katalog domowy (w

polu Local Root Folder).

Rysunek 9.7. Okno Site Definition

W naszym przypadku katalogiem domowym serwisu powinien by

katalog domowy serwera

WWW, dlatego te

podajmy t

lokalizacj

w polu tekstowym.

6. Gdy okre

limy ju

nazw

serwisu oraz jego katalog domowy kliknijmy przycisk OK. Pojawi si

ponownie okno Define Sites z pod

wietlon

nazw

stworzonego przed chwil

serwisu. Kliknijmy

Done aby zamkn

ąć

okno.

Zobaczymy

e okno mapy serwisu jest zupełnie puste (chyba,

e w katalogu domowym serwera

WWW zostawili

my jakie

pliki, je

li tak usu

my je), a w prawym obszarze znajduje si

tylko

nazwa katalogu domowego serwisu. Jest tak, poniewa

nasz serwis nie posiada jeszcze

adnego

pliku.

Tworzenie szablonu DWT

Tworzenie serwisu rozpoczniemy od stworzenia szablonu, który ułatwi nam dalsza prac

. Szablon

(template) w Dreamweaverze stosuje si

wtedy, gdy wszystkie strony serwisu internetowego (lub

pewna ich grupa) maj

jedn

szat

graficzn

i ró

od siebie jedynie zawarto

. Taka sytuacja

ma miejsce w przypadku wi

kszo

ci serwisów, wystarczy

e przypatrzymy si

chocia

by serwisowi

wydawnictwa Helion (http://www.helion.pl) (rys.9.8.).

Rysunek 9.8. Serwis wydawnictwa Helion posiada pewne cechy wspólne dla wszystkich jego stron
(patrz górna oraz lewa cz

ęść

dej strony)

W Dreamweaverze, te cz

ęś

ci dokumentu HTML, które nie ulegaj

zmianie mo

emy zaprojektowa

tylko jeden raz i umie

w szablonie jako regiony stałe, natomiast te cz

ęś

ci które b

dziemy chcieli

modyfikowa

w ka

dym dokumencie tworzymy jako regiony edytowalne (editable regions).

1. Przejd

my ponownie do okna projektu (okna które pokazało si

jako pierwsze po otworzeniu

Dreamweavera) i w polu tekstowym Title na górnej belce okna wpiszmy nazw

okna Wirtualna

Ksi

garnia.

2. Otwórzmy okno Page properties wybieraj

c z menu Modify polecenie Page Properties lub

naciskaj

c CTRL+J (rys.9.9.).

Rysunek 9.9. Okno Page properties daje mo

liwo

ść

okre

lenia podstawowych parametrów

edytowanego dokumentu HTML

W oknie Page properties mamy mo

liwo

ść

okre

lenia min. takich parametrów dokumentu jak

tytuł, kolor tła tekstu, hiperł

czy, marginesy, a tak

e sposób kodowania dokumentu.

3. Tytuł dokumentu powinien by

wpisany, poniewa

zrobili

my to w poprzednim punkcie wi

teraz ustawmy wszystkie marginesy na zero a kodowanie na Central Europe (ISO-8859-2)
(rys.9.9.).

Zerowe marginesy powoduj

e elementy dokumentu HTML mog

znajdowa

bezpo

rednio

(ka

dej) ramki okna w przegl

darce internetowej, a kodowanie dokumentu, które ustawili

spowoduje,

e przegl

darka internetowa b

dzie poprawnie wy

wietla

tekst z polskimi literami (

, ł, itd.). Gdy wspomniane parametry zostan

ustawione naci

nijmy OK.

Ci z Nas, którzy przygl

li si

białej przestrzenie roboczej w oknie Dreamweavera, zapewne

zauwa

yli,

e miga tam kursor tekstowy (w Dreamweaverze tekst do dokumentu HTML mo

wprowadza

bezpo

rednio z klawiatury). Jednak zanim dokonali

my zmian w oknie Page

Properties kursor, ten był w pewnej odległo

ci od granic obszaru roboczego (aby to zobaczy

ponownie wci

nijmy CTRL+Z a potem CTRL+Y aby anulowa

), a teraz znajduje si

bezpo

rednio

przy tej granicy. Jest to dowód na to,

e warto

ci marginesów (górnego i lewego) wynosz

zero.

4. Pora zapisa

dokument jako szablon. Z menu File wybierzmy polecenie Save as Template.

Pojawi si

okno Save as Template (rys.9.10.). Okre

lamy w nim serwis, w którym chcemy

stworzy

szablon oraz nazw

szablonu.

Rysunek 9.10. Okno Save as Template

W polu tekstowym Save as wpiszmy Glowny i wci

nijmy Save. Teraz na górnej belce okna

dokumentu pojawi si

nazwa szablonu, który przed chwil

stworzyli

my (rys.9.11.).

Rysunek 9.11. Zapisz <<Template>> umieszczony przed nazwa dokumentu sugeruje,

e edytowany

dokument jest szablonem

li przeł

czymy si

do okna Site to b

dziemy mogli zauwa

e Dreamweaver stworzył katalog

o nazwie Templates, w którym znajduje si

nasz szablon (rys.9.12.). Szablony Dreamweavera

maj

rozszerzenie DWT (Dreamweaver Template).

Rysunek 9.12. Dreamweaver standardowo umieszcza wszystkie szablony nale

Ŝą

ce do danego

serwisu w katalogu Templates

5. Pora przyst

do tworzenia projektu szablonu. Najpierw umie

cimy w szablonie nagłówek

serwisu, który b

dzie zawierał nazw

serwisu oraz jego logo.

Stwórzmy w katalogu domowym naszego serwisu (a jak zapewne pami

tamy jest to równie

katalog domowy serwera WWW) katalog o nazwie Rysunki i skopiujmy do niego cał

zawarto

ść

katalogu Rozdzial09\Projekt\Rysunki.

Serwis jest dedykowany na standardow

rozdzielczo

ść

800x600 i chocia

korzystaj

c mo

liwo

Flasha mo

na stworzy

serwis, który b

dzie automatycznie skalował si

do rozdzielczo

ci, nie

dziemy tego robi

, poniewa

jest to do

ść

skomplikowana sprawa (bardziej pracochłonna).

6. Wró

my do okna projektu Dreamweavera i w panelu narz

dziowym kliknijmy ikon

Insert

Fireworks HTML (rys.9.13.) a gdy pojawi si

okno o takiej samej nazwie, kliknijmy przycisk

Browse i z katalogu Rysunki, który przed chwil

stworzyli

my wybierzmy dokument

Naglowek.htm.

Fireworks to graficzny program firmy Macromedia, w którym przy pomocy narz

dzi do płaskiej

grafiki wektorowej mo

emy tworzy

grafik

rastrow

przeznaczon

specjalnie na strony WWW.

Grafika stworzona w Fireworks jest zapisywana w pliku PNG, jednak aby efektywnie wykorzysta

liwo

ci jaki niesie poł

czenie Fireworks oraz Dreamweaver, najlepiej jest wyeksportowa

grafik

z wykorzystaniem pliku HTML, który okre

la poszczególne elementy graficzne w tabeli.

Daje nam to mo

liwo

ść

eksportu grafiki nie jako cało

ci ale w kawałkach co, jak si

niedługo

przekonamy, jest bardzo efektowne.

Rysunek 9.13. Ikona Insert Fireworks HTML w panelu narz

dziowym

Gdy klikniemy OK do szablonu Glowny zostanie załadowana grafika. Z pozoru mo

e to wygl

jak cało

ść

, ale je

li klikniemy na jakiejkolwiek cz

ęś

ci załadowanego obrazka, to b

dziemy mogli

zauwa

e składa si

on z wielu cz

ęś

ci (rys.9.14.).

Rysunek 9.14. Grafika tworzona w Fireworks jest najcz

ęś

ciej „poci

ta” co ułatwia min. optymalizacj

poszczególnych elementów graficznych obrazka

Fragment, który wida

na rysunku 9.15. b

dzie zast

piony przez animowan

reklam

stworzon

szablonu SWT, ale tym zajmiemy si

nieco pó

niej.

Rysunek 9.15. Zaznaczony fragment obrazka, zostanie usuni

ty a w jego miejscu pojawi si

animowana reklama

7. Je

li zdeselekcjonowali

my tabel

, która zawiera „poci

” grafik

to wyselekcjonujmy j

ponownie (najlepiej kliknijmy myszk

na prawo od tabeli i maj

c wci

ąŜ

wci

ty lewy klawisz

myszy, przeci

gnijmy wska

nik myszki nad tabel

), a nast

pnie w panelu wła

ciwo

ci parametr

Align ustawmy na Center (rys.9.16.).

Rysunek 9.16. Centrowanie tabeli w poziomie wzgl

dem

rodka dokumentu HTML

Centrowanie powoduje,

e gdy serwis zostanie wy

wietlony w wy

szej rozdzielczo

ci to jego

elementy b

znajdowały si

dokładnie na

rodku dokumentu.

8. Wyselekcjonujmy element graficzny z napisem Strona główna.

Jest to przycisk, który został utworzony razem z grafik

w Fireworks. Posiada on inny obrazek dla

dego ze swoich stanów i kontrolowany jest przez skrypty JavaScript. Gdy ów przycisk zostanie

wyselekcjonowany zawarto

ść

panelu wła

ciwo

ci ulegnie zmianie. Wpiszmy wtedy w polu

tekstowym Alt tekst, który widnieje na przycisku (Strona główna) (rys.9.17.).

Rysunek 9.17. Parametr Alt zawiera alternatywny tekst, który jest przypisywany do przycisku.

dzie to informacja tekstowa, która pojawi si

gdy ogl

daj

cy serwis najedzie wska

nikiem

myszki na przycisk. Podobne informacje powinni

my doda

do dwóch pozostałych przycisków.

9. Naci

nijmy klawisz F12, aby zobaczy

jak tworzony szablon wygl

da w przegl

darce internetowej

(rys.9.18.).

Rysunek 9.18. Szablon w przegl

darce internetowej. W tym przypadku zrzut ekranu wykonano w

rozdzielczo

ci 1152x864

Gdy umie

cimy wska

nik myszki nad przyciskiem jego kolor zmieni si

na jasno niebieski, a gdy

klikniemy przycisk, kolor zmieni si

czerwony. Klikanie na przyciski nie przynosi jednak

adnego

efektu, poniewa

do przycisków nie s

przypisane

adne dokumenty HTML. Aby rysunek albo

tekst mogły by

hiperł

czami w Dreamweaverze wystarczy w polu tekstowym Link w panelu

wła

ciwo

ci wpisa

relatywny lub absolutny adres URL

Ŝą

danego dokumentu – my jednak nie

dziemy w tym rozdziale tworzy

hiperł

czy do wspomnianych trzech przycisków. Zamknijmy

przegl

dark

i powró

my do edycji szablonu

10. Teraz nale

y stworzy

kolejn

tabel

, w której b

dzie przechowywana główna zawarto

ść

dokumentu HTML.

Kliknijmy wska

nikiem myszki za tabel

(na prawo) z grafik

Fireworks. Powinni

my wtedy

zobaczy

migaj

cy kursor tekstowy którego wysoko

ść

dzie równa wysoko

ci tabeli. Oznacza to,

e kursor tekstowy znajduje si

za tabel

Z panelu narz

dziowego wybierzmy tabel

(rys.9.19.).

Rysunek 9.19. Narz

dzie tabeli w panelu narz

dziowym

Pojawi si

okno Inser Table, w którym poszczególne parametry ustawmy tak jak to wida

rysunku 9.20. Parametr Row oraz Column okre

la liczb

wierszy i kolumn w tabeli. parametry

Cell Padding oraz Cell Spacing okre

laj

odległo

ci mi

dzy komórkami tabeli (grubo

ść

ramki).

Parametr Width to szeroko

ść

tabeli. Jego warto

ść

– 775 pikseli, daje pewno

ść

e przy

rozdzielczo

ci 800x600 strona w przegl

darce nie b

dzie wymagała poziomego paska przewijania

(je

li wyselekcjonujemy tabel

z grafik

to zobaczymy,

e jej szeroko

ść

jest dokładnie taka sama).

Rysunek 9.20. W oknie Insert Table ustalamy wygl

d tabeli

Gdy klikniemy OK pojawi si

nowa tabela z dwiema kolumnami, która powinna znajdowa

pod

tabel

z grafik

Fireworks.

11. W panelu wła

ciwo

ci ustawmy parametr Align na Center tak aby tabela została wycentrowana.

12. Umie

ść

my wska

nik myszki nad lewa kolumn

stworzonej przed chwil

tabeli i kliknijmy jej lewy

przycisk. Przy lewej kraw

dzi wewn

trz pola tabeli powinien teraz miga

kursor tekstowy.

W panelu wła

ciwo

ci, warto

ść

w polu tekstowym W (Width) okre

la szeroko

ść

kolumny. W

naszym przypadku owa szeroko

ść

powinna wynosi

200 pikseli a szeroko

ść

drugiej kolumny

automatycznie 775-200 = 575.
Parametr Vert (Vertical) okre

la w jaki sposób elementy znajduj

ce si

w komórce tabeli b

rozło

one w pionie. Warto

ść

Top oznacza,

e b

rozmieszczane od góry w dół, niezale

nie od

wysoko

ci komórki tabeli (rys.9.21.).

Rysunek 9.21. Zmiana rozło

enia komórek w tabeli, nast

puje, po odpowiednim ustawieniu

parametrów w panelu wła

ciwo

13. Wyselekcjonujmy drug

kolumn

i warto

ść

parametru Vert ustalmy na Top. Mo

na równie

wpisa

warto

ść

575 w polu W, ale nie jest to konieczne.

14. Kliknijmy ponownie w lewej komórce tabeli i wybierzmy z panelu narz

dziowego ikon

Insert

Fireworks HTML a nast

pnie z katalogu Rysunki wybierzmy dokument Szukaj.htm.

W lewej komórce tabeli, pojawi si

obrazek imituj

cy tabel

(rys.9.22.). Zaznaczony fragment

obrazku, który wida

na rysunku 9.22. zostanie zast

piony animacj

Flasha, ale o tym pó

niej.

Rysunek 9.22. W serwisie Wirtualna Ksi

garnia istnieje mo

liwo

ść

wyszukiwania ksi

ąŜ

ek wg tytułu. W

miejsce zaznaczonego elementu, b

dzie wstawiona animacja Flasha, która zawiera pole tekstowe

oraz przycisk

15. Maj

c wyselekcjonowan

tabel

Szukaj ksi

ąŜ

ki, naci

nijmy jeden raz prawy klawisz kursora.

Tabela powinna zosta

zdeselekcjonowana a zaraz za ni

powinien znajdowa

kursor

tekstowy, którego wysoko

ść

dzie równa wysoko

ci tabeli (rys.9.23.).

Rysunek 9.23. Zdeselekcjonujmy tabel

umieszczaj

c kursor tekstowy zaraz za ni

16. Kliknijmy w panelu narz

dziowym ponownie ikon

Insert Fireworks HTML a nast

pnie

wybierzmy z katalogu Rysunki plik eInfo.htm (rys.9.24.).

Rysunek 9.24. Tabela e – Informacje daje internatom mo

liwo

ść

subskrypcji do informacji

wydawniczych serwisu

W tabeli e – Informacje b

dzie znajdowała si

animacja Flasha, która zast

pi obszar zajmowany

przez wyselekcjonowany na rys.9.24. element. Owa animacja da mo

liwo

ść

wpisania swojego

adresu poczty elektronicznej, na który od tej pory b

przychodzi

wszystkie informacje o

nowo

ciach wydawniczych i promocjach (podczas procesu tworzenia serwisu zrealizujemy jedynie

pierwszy problem, tj. dopisywanie adresów e-mail do bazy danych).

17. Podobnie jak tabel

e – Informacje umie

ść

my tabel

Promocje (dokument to Promocje.htm)

(rys.9.25.).

W tabeli Promocje b

dzie wy

wietlana ksi

ąŜ

ka, któr

na kupi

po promocyjnej cenie.

Rysunek 9.25. Tabela Promocje, b

dzie zawiera

animacj

SWF, powstał

w oparciu o szablon SWT.

Tre

ść

animacji b

dzie dotyczy

ksi

ąŜ

ki, któr

na kupi

po promocyjnej cenie

18. Na koniec wstawmy jeszcze tabel

Co o Nas s

dzisz? (plik HTML z t

tabel

to plik

CoMyslisz.htm) (rys.9.26.).

W tej tabeli b

dzie znajdowa

pole tekstowe, w które u

ytkownik b

dzie mógł wpisa

swoje

uwagi i komentarze odno

nie serwisu Wirtualnej Ksi

garni.

Rysunek 9.26. W tabeli Co o Nas s

dzisz? internauci b

mogli wyrazi

swoje opinie na temat

serwisu Wirtualna Ksi

garnia

emy teraz zobaczy

jak cało

ść

wygl

da w przegl

darce internetowej (F12). (rys.9.27.).

Rysunek 9.27. Wygl

d szablonu Glowny w oknie przegl

darki internetowej

Wszystkie elementy szablonu s

rozło

one równomiernie w przestrzeni okna przegl

darki, co jest

ne gdy serwis ma by

poprawnie wy

wietlany w ka

dej rozdzielczo

ci od 800x600 wzwy

19. Zamknijmy okno przegl

darki i wró

my do edycji szablonu w Dreamweaverze.

20. Umie

ść

my teraz kursor tekstowy za tabel

, z dwiema kolumnami, któr

stworzyli

my jako

drug

) a nast

pnie wybierzmy z przybornika narz

dziowego tabel

W oknie Insert Table warto

ść

parametru Columns powinna wynosi

1. reszta niech zostanie bez

zmian. Gdy tabela pojawi si

, korzystaj

c z parametru Align w panelu wła

ciwo

ci wycentrujmy

tabel

(rys.9.28.).

Rysunek 9.28. Tabela na samym dole b

dzie zawiera

tzw. stopk

Owa tabela b

dzie zawiera

stopk

, która z reguły znajduje si

na ka

dej stronie WWW. Stopka,

to inaczej stałe informacje niekoniecznie zwi

zane z zawarto

serwisu. Najcz

ęś

ciej te

informacje dotycz

twórców serwisu internetowego. Tak te

dzie w tym przypadku.

21. Kliknijmy wska

nikiem myszki w tabeli i parametr Vert w panelu narz

dziowym ustawmy na Top.

22. Z przybornika narz

dziowego wybierzmy rysunek (rys.9.29.) a gdy pojawi si

okno wyboru pliku,

wybierzmy plik Belka.jpg z katalogu Rysunki.

Rysunek 9.29. Narz

dzie rysunku w panelu narz

dziowym

W tabeli pojawi si

rysunek a zawarto

ść

panelu wła

ciwo

ci ulegnie zmienia. Kliknijmy ikon

polecenia Align right aby rysunek został wyrównany do prawej kraw

dzi tabeli (rys.9.30.).

Rysunek 9.30. Wyrównanie rysunku do lewej kraw

dzi tabeli

23. Maj

c wci

ąŜ

wyselekcjonowany rysunek, kliknijmy prawy klawisz kursowa, tak aby kursor

tekstowy pojawił si

za rysunkiem z nast

pnie wci

nijmy kombinacj

klawiszy SHIFT+ENTER.

Spowoduje to,

e kursor tekstowy przejdzie do nowego wiersza w tym samym akapicie(w kodzie

HTML zostanie wstawiony znacznik <br>).

24. Ponownie kliknijmy w panelu narz

dziowym ikon

narz

dzia rysunku i wybierz z katalogu Rysunki

plik SpiderLogo.jpg.

Plik ten zawiera logo firmy, która wykonała serwis na zlecenie Wirtualnej Ksi

garni (oczywi

cie

zarówno firma jak zlecenie s

czysto hipotetyczne, a jakakolwiek zbie

ść

czysto przypadkowa).

25. W panelu wła

ciwo

ci parametr Align ustawmy na Middle (rys.9.31.). To spowoduje,

e tekst,

który za chwil

wpiszemy za rysunkiem, b

dzie wy

wietlany w połowie wysoko

ci rysunku.

Rysunek 9.31. Parametr Align rysunku okre

la w jaki sposób tekst, b

dzie otaczał rysunek

26. Umie

ść

my kursor tekstowy tu

27. Teraz umie

ść

my kursor tekstowy pomi

dzy napisem Copyright a rokiem i z menu Insert

wybierzmy polecenie Special Characters/Copyright.

Do tekstu zostanie wstawiony napis &copy; który w przegl

darce internetowej jest wy

wietlany

tak: ©

28. Wyselekcjonujmy cały tekst i w panelu wła

ciwo

ci ustawmy czcionk

jako: Arial, Helvetica, sans-

serif a wielko

ść

size na 1 (rys.9.32.).

Rysunek 9.32. Zmiana atrybutów tekstu jest mo

liwa przy pomocy parametrów znajduj

cych si

panelu wła

ciwo

Teraz wci

nijmy F12, aby zobaczy

jak szablon ze stopk

wygl

da w przegl

darce internetowej.

Wstawianie elementów SWF i SWT do szablonu

Czas teraz aby powróci

do tematu tej ksi

ąŜ

ki jak

jest przecie

Generator (i po

rednio Flash).

Korzystaj

c z tego, czego dowiedzieli

my si

w tej ksi

ąŜ

ce, stworzymy teraz kilka szablonów SWT, i

razem z gotowymi animacjami SWF umie

cimy je w poszczególnych tabelach szablonu

Dreamweavera. Wszystkie materiały niezb

dne do dalszej pracy znajdziemy w katalogach

Rozdzial09\Projekt\SWF oraz Rozdzial09\Projekt\SWT.

Najpierw animacje SWF. Te animacje s

gotowe, tak aby

my nie tracili czasu na ich projektowanie

(poniewa

nie jest to ksi

ąŜ

ka o Flashu).

1. Stwórzmy w katalogu domowym serwisu Wirtualna Ksi

garnia katalog SWF i skopiujmy do niego

wszystkie pliki SWF z katalogu Rozdzial09\Projekt\SWF. Nie musimy kopiowa

plików FLA,

poniewa

i tak nie b

one u

yte bezpo

rednio w serwisie.

2. Teraz przejd

my do szablonu Dreamweavera, wyselekcjonujmy

rodkowy element tabeli Szukaj

ksi

ąŜ

ki (zaznaczony na rysunku 9.22) i wci

nijmy klawisz DELETE. Ów element zostanie usuni

ty.

3. Z przybornika narz

dziowego wybierzmy narz

dzie Flasha (Insert Flash) (rys.9.33.) a nast

pnie,

gdy pojawi si

okno wyboru pliku z katalogu SWF wybierzmy animacj

Szukaj.swf.

Rysunek 9.33. Narz

dzie Insert Flash w panelu narz

dziowym

W tabeli Szukaj ksi

ąŜ

ki pojawi si

ikona symbolizuj

ca animacj

SWF (rys.9.34.). Zwró

uwag

e wymiary wstawionej animacji s

identyczne z wymiarami usuni

tego elementu. Dzi

temu cało

ść

nie „rozjedzie si

” na skutek niedopasowania elementów w dokumencie HTML.

Rysunek 9.34. Animacje SWF w tabeli Szukaj ksi

ąŜ

4. Podobnie dodajmy animacje do tabeli e – Informacje (plik eInfo.swf) oraz do tabeli Co o Nas

dzisz (plik CoMyslisz.swf).

li teraz klikniemy klawisz F12, to zobaczymy, jak szablon wygl

da w przegl

darce internetowej

(rys.9.35.).

Rysunek 9.35. Szablon z wstawionymi animacjami SWF

Na rysunku wida

e tabele zostały zapełnione. Oczywi

cie nie było konieczne stosowanie animacji

SWF dla uzyskania tak prostych efektów, ale wystarczy,

e troch

dłu

ej popracujemy nad

poszczególnymi plikami FLA, a uzyskamy o wiele ciekawsze efekty.

li poeksperymentujemy troch

z animacjami w tabelach, to szybko zauwa

ymy,

przeprowadzaj

one prosta kontrol

danych przed wysłaniem (np. nie wy

lemy adresu e-mail je

brak jest w tym adresie znaku @ lub wyst

puje spacja). Gdy klikniemy przyciski Szukaj lub Wy

lij, to

przegl

darka internetowa wy

wietli informacje,

e nie mo

e znale

źć

dokumentu. Jest tak poniewa

da z animacji

Ŝą

da odpowiedniego skryptu ASP, które b

dziemy pisa

dopiero pó

niej.

Teraz nadszedł czas aby zacz

ąć

tworzy

szablony SWT. W szablonie Dreamweavera wstawimy

dwa pliki SWT. Miejsca, w których powinni

my to zrobi

zaznaczone na rysunku 9.36.

Rysunek 9.36. Zaznaczone miejsca zostan

zast

pione plikami Generatora

Szablon SWT, który umie

cimy w nagłówku b

dzie zawierał trzy ró

ne reklamy (proste animacje z

napisem Reklama) wy

wietlane po sobie. B

one dobierane losowo przez skrypt ASP. Szablon

SWT, który umie

cimy w tabeli Promocje b

dzie wy

wietlał ksi

ąŜ

, któr

na kupi

promocyjnej cenie. W przeciwie

stwie do animacji SWF, owe szablony Generatora wykonamy sami.

1. Otwórzmy we Flashu plik Rozdzial09\Projekt\SWT\Reklama.fla.

Na razie jest to zwykła animacja, która po opublikowaniu b

dzie plikiem SWF (poniewa

jeszcze

nie zawiera

adnych obiektów Generatora). Wymiary animacji (rys.9.37.) to 400x50 i odpowiadaj

one dokładnie wymiarom elementu w nagłówku szablonu Dreamweavera, który zostanie
zast

piony szablonem SWT.

Rysunek 9.37. Szablon SWT, który b

dzie wy

wietlał animowane reklamy w nagłówku ka

dej strony

WWW serwisu Wirtualna Ksi

garnia.

Jak wida

na rysunku, tło animacji, to element nagłówka. Dzi

ki temu, b

dziemy w stanie tworzy

animacje, które idealnie wkomponuj

w tło. Oczywi

cie nie wszystkie animacje musz

wykorzystywa

to tło. Klipy z reklamami b

znajdowały si

na warstwie Reklama.

2. Wyselekcjonujmy warstw

Reklama a nast

pnie z panelu Generator Objects przeci

gnijmy do

obszaru roboczego ikon

obiektu Insert Symbol.

3. Obiekt umie

ść

my tak, aby jego punkt centralny znajdował si

dokładnie w centrum obszaru

roboczego (rys.9.38.).

Rysunek 9.38. Obiekt Insert Symbol powinien znajdowa

w centrum prostok

ta przestrzeni

roboczej

4. W panelu Generator jako wła

ciwo

ść

Symbol Name wpiszmy {Symbol} a wła

ciwo

ść

Scale to fit

ustawmy na false (rys.9.38.). Zmienna Generatora b

dzie decydowa

o tym, jaki symbol zostanie

wietlony.

5. Przekonwertujmy obiekt Insert Symbol do klipu filmowego o nazwie Reklama.

6. Przejd

my do trybu edycji symbolu i na warstwie Layer 1 wstawmy klatki (F5) to 75-tej wł

cznie.

7. Wró

my do trybu edycji animacji głównej i wyselekcjonujmy nowo stworzony klip, a nast

pnie z

listy rozwijanej panelu Generate wybierzmy polecenie Replicate.

8. Jako warto

ść

wła

ciwo

ci Data Source wpiszmy:

http://localhost/skrypty/reklama.asp

Reszta niech pozostanie bez zmian.

Łatwo si

domy

e jest to skrypt, który b

dzie generował dane dla polecenia Replicate. Dane

te b

zawierały nazwy symboli, które b

wstawiane do obiektu Insert Symbol.

9. Klipy z reklamami, których b

dziemy u

ywali znajduj

w pliku BazaReklamy.swt. W katalogu

Rozdzial09\Projekt\SWT znajdziemy szablon i jego

ródło. Ka

dy z klipów filmowych, który

zawiera jedn

reklam

(a wła

ciwie jej szkielet) ma długo

ść

75. klatek.

W katalogu domowym serwisu Wirtualna Ksi

garnia stwórzmy katalog SWT. Skopiujmy do nowo

stworzonego katalogu plik Rozdzial09\Projekt\SWT\BazaReklamy.swt.

10. Wracaj

c do animacji Reklamy.fla, otwórzmy panel ustawie

publikacji i dodajmy plik

BazaReklamy.swt (po prostu wpiszmy jego nazw

i kliknij przycisk Add) do pola External Media

(rys.9.39.).

Rysunek 9.39. Klipy z reklamami znajduj

w pliku BazyReklamy.swt

Jak wida

plik BazyReklamy.swt musi znajdowa

w tym samym katalogu w którym b

dzie

znajdował si

plik Reklamy.swt.

Animacja szablonu Reklama.fla jest ju

gotowa i teraz musimy napisa

skrypt reklama.asp, który w

sposób losowy b

dzie wybierał dwie z czterech reklam, które znajduj

w szablonie

BazaReklamy.swt. Klipy filmowe, które zawieraj

reklamy w szablonie BazaReklamy.swt nazywaj

Reklama_1, Reklama_2, Reklama_3 oraz Reklama_4, tak wi

c skrypt musi losowa

jedynie numer od

1 do 4.

11. Otwórzmy notatnik i napiszmy w nim nast

puj

cy tekst:

Symbol
<%
'Liczba klipów z reklamami, które znajduj

w pliku

'BazaReklamy.swt

   Liczba_Reklam     = 4

   'Liczba klipów, które b

losowane do wy

wietlenia w szablonie

   'Reklama.swt
   Liczba_losowanych = 2
   Dim Tablica(2)

   'Losowanie liczby z zakresu 1 do Liczba_reklam, która nie mo

e si

'powtarza

Randomize
For iter=1 to Liczba_losowanych

Response.Write "Reklama_"

'Rzeczywiste losowanie warto

Warunek = true

While Warunek

Warunek = false

Rand_Number = Round(Rnd*(Liczba_Reklam-1)+1)

For jter = 1 to Liczba_losowanych

if Rand_Number = Tablica(jter) Then Warunek = true

Wend

'Zapami

tanie warto

ci wylosowanej

Tablica(iter) = Rand_Number

'Wysłanie warto

ci do szablonu i przej

cie do nowego wiersza

       Response.Write (Rand_Number)
       Response.Write Chr(13)
   Next

12. W katalogu domowym serwisu Wirtualna Ksi

garnia stwórzmy katalog Skrypty a nast

pnie

zapiszmy do niego tekst stworzony przed chwil

w notatniku pod nazw

reklama.asp

13. Aby sprawdzi

czy skrypt działa poprawnie uaktywnijmy WWW serwera, otwórzmy przegl

dark

internetow

i wpiszmy w oknie adresu nast

puj

cy adres URL:

http://localhost/skrypty/reklama.asp

W oknie przegl

darki powinni

my ujrze

obraz jak na rysunku 9.40.

Rysunek 9.40. Wynik działania skryptu reklama.asp widoczny w oknie przegl

darki internetowej

14. Wró

my teraz do Flasha, do animacji reklama.fla i wciskaj

c przycisk Publish opublikujmy

animacj

a nast

pnie zamknijmy plik FLA animacji.

15. Stworzony przed chwil

szablon Reklam.swt skopiujmy do katalogu Swt znajduj

cego si

katalogu domowym serwisu Wirtualna Ksi

garnia

Teraz musimy stworzy

jeszcze szablon Promocje.swt, który b

dzie wy

wietlał informacje o

ksi

ąŜ

ce, b

cej w promocj.

1. Otwórzmy we Flashu plik Rozdzial09\Projekt\Swt\Promocje.fla

Jest to pusta animacja. Jej wymiary i kolor tła odpowiadaj

wymiarowi i kolorowi elementu tabeli

Promocje, który zostanie zast

piony szablonem SWT.

2. Umie

ść

my w obszarze roboczym obiekt Generatora Insert GIF File i ustalmy jego szeroko

ść

75., wysoko

ść

na 100., a odległo

ść

od lewej i górnej kraw

dzi obszaru widocznego animacji na 5.

(rys.9.41.).

Rysunek 9.41. Obiekt Insert GIF File b

dzie wy

wietlał okładk

ksi

ąŜ

ki, która jest w promocji

3. W panelu Generator wła

ciwo

ść

File name ustalmy na {Okladka}, reszt

pozostawmy bez zmian

(rys.9.41.).

4. Wstawmy cztery pola tekstowe tak jak to wida

na rysunku 9.42. Najwy

sze i najni

sze z pól

zawieraj

zwykły tekst, a pola z napisami {tytul} oraz {autor} b

odpowiednimi danymi z bazy

danych.

Rysunek 9.42. Rozmieszczenie i tre

ść

pól tekstowych w szablonie Promocja.swt

5. Klikaj

c ikon

Generator environment variable otwórzmy okno Set Environment (rys.9.43.),

kliknijmy ikon

Column Name/Value data layout i wpiszmy do pola tekstowego nast

puj

adres URL:

Rysunek 9.43. Skrypt b

dzie generował dane dla całego szablonu a nie tylko dla pojedynczy obiektów

http://127.0.0.1/skrypty/promocja.asp

6. Otwórzmy notatnik i wpiszmy do niego nast

puj

cy skrypt:

Okladka, Tytul, Autor
<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

    Polaczenie.Open "Baza"

    'Proste zapytanie SQL, przypisywane do zmiennej.

ZapytanieSQL = "SELECT Okladka, Tytul, Autor FROM Ksiazki WHERE

Promocja = True"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

    'Wysłanie do szablonu numeru okładki ksi

ąŜ

    Response.Write "http://127.0.0.1/Rysunki/Okladki/"
    Response.Write (Kolumny("Okladka"))
    Response.Write (".gif, ")

    'Wysyłanie warto

ci z kolumny Tytul

    Response.Write (Kolumny("Tytul"))
    Response.Write (", ")

    'Wysyłanie warto

ci z kolumny Autor

Response.Write (Kolumny("Autor"))

'Przej

cie do nowego wiersza

Response.Write Chr(13)

'Zamkni

cie poł

czenia z baz

danych

Polaczenie.Close

Skrypt zapiszmy jako promocja.asp w pliku Skrypty, znajduj

cym si

w katalogu domowym

serwisu Wirtualna Ksi

garnia. Wynik, który zostanie „wyprodukowany” przez ów skrypt wygl

dał

dzie nast

puj

co:

Okladka, Tytul, Autor

http://127.0.0.1/Rysunki/Okladki/Numer2.gif, Linux, Andrzej Kwiatkowski

Aby ów skrypt działał, baza danych, która znajduje si

w katalogu Rozdzial09\BazaDanych o

nazwie WirtualnaKS.mdb musi by

poł

czona ze

ródłem danych ODBC jako Systemowe DNS

jako Baza (patrz rozdział 3.).

7. Opublikujmy animacj

a stworzony w ten sposób szablon skopiujmy do katalogu Swt, w katalogu

domowym serwisu.

8. W Dreamweaverze otwórzmy szablon Glowny.dwt i w miejscach zaznaczonych na rysunku 9.44.

wstawmy odpowiednio, przy u

yciu narz

dzia z Insert Generator szablony reklama.swt (do

nagłówka) oraz promocja.swt (do tabeli Promocje).

Po wstawieniu szablonu Generatora kliknijmy w panelu wła

ciwo

ci przycisk Reset Size aby

wymiary szablonu odpowiadały rzeczywisto

Rysunek 9.44. Gotowy szablon Glowny.dwt

Elementy szablonu, które stworzyli

my do tej pory charakteryzuj

tym,

e nie b

mogły by

edytowane w

adnym z dokumentów, który powstanie w oparciu o szablon Glowny.dwt. Dlatego te

musimy stworzy

miejsce w szablonie, które b

dzie mogło by

edytowane, tak aby do kolejnych

dokumentów mo

na było wstawia

ró

tre

ść

. Owym edytowalnym miejscem b

dzie prawa kolumna

tabeli, w której znajduj

tabele Fireworks.

1. Kliknijmy myszk

w owej kolumnie a nast

pnie z menu Modify/Templates wybierzmy polecenie

New Editable Region.

2. Pojawi si

okno New Editable Region (rys.9.45.), w którym wpiszmy Tabela i kliknijmy OK

Rysunek 9.45. W oknie New Editable Region okre

lamy nazw

edytowalnego regionu w szablonie

W kolumnie pojawi si

edytowalny region o nazwie Tabela (rys.9.46.), który b

dzie mógł by

dowolnie modyfikowany w ka

dym dokumencie, utworzonym w oparciu o szablon Glowny.swt

Rysunek 9.46. Edytowalny region jest wyró

niony w szablonie niebiesk

etykiet

oraz nazw

regionu

Zapiszmy szablon Glowny.dwt. Mo

emy zosta

zapytani przez Dreamweavera czy uaktualni

zawarto

ść

dokumentów, które powstały w oparciu o szablon. Poniewa

na razie nie mamy takich

dokumentów, mo

emy anulowa

proces.

Tworzenie dokumentu index.htm

Teraz gdy szablon Glowny.dwt jest ju

gotowy, pora wzi

ąć

za tworzenie poszczególnych stron

serwisu. Pierwsz

stron

jaka b

dzie załadowana do przegl

darki internetowej, po wpisaniu adresu

serwisu Wirtualna Ksi

garnia b

dzie index.htm.

1. Z menu File wybierzmy polecenie New from Template.

Pojawi si

okno Select Template (rys.9.47.), gdzie wybieramy szablon, na podstawie którego

tworzony jest nowy dokument.

Rysunek 9.47. Okno Select Template słu

y do wyboru szablonu, w oparciu o który zostanie

stworzony nowy dokument

2. Na li

cie Templates powinna znajdowa

nazwa Glowny. Wyselekcjonujmy t

nazw

nast

pnie kliknijmy przycisk Select. Dreamweaver stworzy nowy dokument, którego zawarto

ść

dzie odpowiadała zawarto

ci szablonu Glowny.dwt.

Charakterystyczn

cech

owego dokumentu jest to,

e gdy przesuniemy wska

nik myszki na

który

z gotowych elementów graficzny, które stworzyli

my, kursor muszki zmieni si

ze strzałki w

znak zakazu (rys.9.48.). Jedynym sposobem na zmodyfikowanie tej zawarto

ci jest

zmodyfikowanie zawarto

ci szablonu. Ma to t

zalet

e gdy zostanie zmodyfikowana zawarto

ść

szablonu DWT, Dreamweaver automatycznie zmodyfikuje zawarto

ść

wszystkich dokumentów,

które powstały na bazie szablonu DWT.

Rysunek 9.48. Dreamweaver nie pozwala na modyfikowanie zawarto

ci, która została stworzona w

oparciu o szablon DWT

3. Zapiszmy stworzony dokument jako index.html, w katalogu domowym serwisu Wirtualna

Ksi

garnia.

li teraz w przegl

darce WWW wpiszemy, np.:

http://localhost

To serwer WWW powinien wy

wietli

dokument index.html z animacjami SWF, wstawionymi przez

komponent Online Generatora (je

li jest on oczywi

cie aktywny) w miejsce szablonów SWT.

4. Powró

my do dokumentu index.html w Dreamweaverze i umie

ść

my kursor tekstowy w kolumnie,

w której pisze {Tabela}.

Jak zapewne pami

tamy, jest to jedyne miejsce w całym dokumencie, w którym mo

emy

wprowadza

zmiany.

5. Z panelu narz

dziowego wybierzmy narz

dzie tabeli. Niech posiada ona jeden wiersz i dwie

kolumny a szeroko

ść

niech wynosi 100% (reszt

pozostawmy bez zmian w stosunku do rys.20.).

Napis {Tabela} mo

emy bez usun

ąć

. Nie b

dzie on nam potrzebny.

W dokumencie index.html oprócz elementów, które s

dost

pne w szablonie, znajdowa

równie

•

nowo

ci wydawnicze;

•

serie wydawnicze;

•

najlepsze ksi

ąŜ

ki.

Wszystkie owe elementy to animacje SWT, które s

aktualizowane na podstawie bazy danych.

Zajmiemy si

najpierw nowo

ciami wydawniczymi:

1. Otwórzmy plik Rozdzial09\Projekt\Swt\Nowosci.fla

Jest to animacja, która b

dzie wy

wietla

nowo

ci wydawnicze, tj. tworzy

list

ksi

ąŜ

ek,

zaczynaj

c od tej, która ukazała si

najwcze

niej a ko

c na tej, która ukazała si

najpó

niej.

2. Wyselekcjonujmy warstw

Lista i z panelu Generator Objects przeci

gnijmy ikon

obiektu

Scrolling List do obszaru roboczego.

3. Wy

wietlmy panel Info i maj

c wyselekcjonowany stworzony przed chwil

obiekt Generatora,

zmie

my nast

puj

ce parametry obiektu:

•

W: 320;

•

H: 560;

•

X: 10;

•

Y: 5;

Obiekt powinien wygl

tak jak na rysunku 9.49.

Rysunek 9.49. Poprawne uło

enie obiektu Scrolling List w obszarze roboczym

4. Maj

c wci

ąŜ

wyselekcjonowany obiekt Scrolling list w panelu Generator ustalmy nast

puj

warto

ci znajduj

cych si

tam wła

ciwo

ci:

•

Data source:

http://127.0.0.1/skrypty/nowosci.asp

•

Orientation: vertical;

•

Step size: 5;

•

Instance name: Lista

Reszta wła

ciwo

ci niech zostanie bez zmian.

5. Otwórzmy notatnik i wpiszmy tam nast

puj

cy skrypt:

Clip, Data, Tytul, Autor
<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

    Polaczenie.Open "Baza"

    'Proste zapytanie SQL, przypisywane do zmiennej. Kolejno

ść

'pojawiania si

poszczególnych rekordów jest uzale

niona od daty,

'przy czym, im pó

niej została wydana ksi

ąŜ

ka, tym wy

ej znajdzie

'si

na li

cie

    ZapytanieSQL = "SELECT * FROM Ksiazki ORDER BY Data DESC"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

    'P

tla Do Until ... Loop jest wykonywana dopóki w obiekcie Kolumny

'znajduj

elementy z tabeli

    Do Until Kolumny.EOF

      'Wywołanie nazwy klipu listy
      Response.Write ("Klip, ")

      'Wysyłanie kolejnych warto

ci z kolumny Data

      Response.Write (Kolumny("Data"))
      Response.Write (", ")

      'Wysyłanie kolejnych warto

ci z kolumny Tytul

      Response.Write (Kolumny("Tytul"))
      Response.Write (", ")

      'Wysyłanie kolejnych warto

ci z kolumny Autor

Response.Write (Kolumny("Autor"))

'Przej

cie do nowego wiersza

     Response.Write Chr(13)

     'Nast

pny element obiektu Kolumny

     Kolumny.MoveNext

   Loop

   Polaczenie.Close

Zapiszmy plik tekstowy jako nowosci.asp w katalogu Skrypty, który powinien znajdowa

katalogu domowy serwisu Wirtualna Ksi

garnia. Aby zobaczy

wynik działania skryptu w polu

adresu przegl

darki WWW wpiszmy:

http://127.0.0.1/skrypty/nowosci.asp

Wynik powinien by

identyczny z tym na rysunku 9.50.

Rysunek 9.50. Wynik działania skryptu nowosci.asp

6. Wracaj

c do animacji FLA. Wiemy ju

e b

dzie nam potrzebny klip filmowy o nazwie Klip

(wynika to z analizy wyników działania skryptu nowosci.asp). W menu Insert wybierzmy polecenie
New Symbol a nast

pnie wybierzmy Movie clip, wpisuj

c nazw

Klip i wciskaj

c klawisz OK.

7. Flash przejdzie do trybu edycji symbolu. Przy pomocy narz

dzia prostok

ta stwórzmy szary

prostok

t (bez obwiedni) o wymiarach W: 310; H: 18 i poło

eniu X: 5; Y: 7.

8. Wstawmy równie

pole tekstowe i umie

ść

w nim napis {Data}. Wymiary pola tekstowego wida

rysunku 9.51.

Rysunek 9.51. Wymiary pola tekstowego, w którym b

dzie wy

wietlana data wydania ksi

ąŜ

li teraz opublikujemy animacj

, to powinni

my uzyska

obraz jak na rysunku 9.52. Klip Klip

został powielony tyle razy, ile ksi

ąŜ

ek znajduje si

w bazie danych.

Rysunek 9.52. Wynik działania szablonu Nowosci.swt

Oprócz daty ukazania si

ksi

ąŜ

ki niezb

dny jest jeszcze tytuł ksi

ąŜ

ki a tak

e jej autor. Po klikni

ciu na

tytule ksi

ąŜ

ki internauta powinien uzyska

cej informacji o ksi

ąŜ

ce.

9. Pod szarym prostok

tem stwórzmy pole tekstowe i napiszmy w nim {Tytul}.

Długo

ść

pola tekstowego, powinna by

tylko nieco krótsza od długo

ci szarego prostok

ta a

wysoko

ść

powinna by

równa jednemu wierszowi (zakładamy,

e wszystkie tytuły ksi

ąŜ

zmieszcz

w jednym wierszu).

10. Przekonwertujmy stworzone przed chwil

pole tekstowe do symbolu Button (o nazwie Tytul), a

nast

pnie stwórzmy trzy stany przycisku i obszar Hit, tak aby przycisk poprawnie reagował na

wska

nik myszki (rys.9.53.).

Rysunek 9.53. Przycisk Tytul b

dzie bezpo

rednio kierował internaut

do ksi

ąŜ

ki, której tytuł znajduje

w etykiecie przycisku

11. Umie

ść

my kolejne pole tekstowe, pod przyciskiem Tytul i napiszmy w nim {Autor}. Długo

ść

pola

tekstowego powinna w przybli

eniu odpowiada

długo

ci przycisku (rys.9.54.).

Rysunek 9.54. Gotowy klip Klip

Teraz opublikujmy animacj

, aby zobaczy

jej efekt (rys.9.55.). Postarajmy si

tak dobra

poło

enie

elementów w klipie Klip aby w obiekcie Scrolling list klipy były wy

wietlane w cało

ci , tj. aby na dole

listy nie było wida

ęś

ci nowego klipu (np. cz

ęś

ci szarego prostok

ta).

Rysunek 9.55. Lista nowo

ci wydawniczych

Teraz musimy zrobi

jeszcze dwie rzeczy. Napisa

skrypt, który sprawi,

e po klikni

ciu na tytule

ksi

ąŜ

ki internauta dostanie szczegółowe informacje o tej ksi

ąŜ

ce, oraz napisa

skrypt, który b

dzie

przewijał zawarto

ść

listy Scrolling list w gór

i w dół.

12. Znajduj

c si

w trybie edycji symbolu Klip wyselekcjonujmy przycisk Tytul, otwórzmy panel akcji i

dodaj tam nast

puj

cy skrypt:

on (release) {

getURL("http://127.0.0.1/skrypty/szukaj.asp?search={Tytul}", "_self")

}

Ów skrypt, powoduje załadowanie do okna przegl

darki internetowej skryptu szukaj.asp (który

stworzymy pó

niej) przekazuj

c do niego jako zmienn

tytuł ksi

ąŜ

ki, który jest wy

wietlany przez

dany przycisk.

13. Przejd

my do trybu edycji animacji, wyselekcjonujmy warstw

Przyciski i umie

ść

my na niej

odno

niki do symboli P_Up oraz Down (oba znajduj

w bibliotece), tak jak to wida

na rysunku

9.56. Pierwszy z nich to klip filmowy, zawieraj

cy przycisk a drugi, to przycisk.

Rysunek 9.56. Za pomoc

przycisków internauta b

dzie mógł przewija

zawarto

ść

listy w gór

i w dół

14. Wyselekcjonujmy przycisk, na którym niebieska strzałka skierowana jest w dół, otwórzmy panel

akcji i dodajmy do okna programu nast

puj

cy skrypt:

on (press) {

Lista.play();

}

on (release, releaseOutside) {

Lista.stop();

}

Działanie tego skryptu powoduje,

e gdy wci

niemy i przytrzymamy lewy klawisz myszki, gdy ta

znajduje si

nad przyciskiem, to zawarto

ść

listy Scrolling list b

dzie przesuwa

do góry,

odsłaniaj

c znajduj

ce si

ej pozycje. Gdy zwolnimy lewy klawisz myszki, to zawarto

ść

listy

przestanie si

przesuwa

15. Wyselekcjonujmy teraz klip filmowy, w którym niebieska strzałka zwrócona jest do góry i

przejd

my do trybu edycji tego klipu.

16. Stwórzmy now

warstw

i nadajmy jej nazw

Akcje a nast

pnie stwórzmy kolejno trzy puste

cia kluczowe (F7).

W kolejnych uj

ciach na warstwie Akcje stwórzmy nast

puj

ce skrypty:

//Uj

cie pierwsze

stop();

//Uj

cie drugie

_parent.Lista.prevFrame();

//Uj

cie trzecie

gotoAndPlay(2);

17. Teraz jeszcze wyselekcjonujmy przycisk znajduj

cy si

na warstwie Przycisk w klipie P_Up i

dodajmy do niego nast

puj

cy skrypt:

on (press) {

gotoAndPlay(2);

}

on(release, releaseOutside) {

gotoAndStop(1);

}

Cały skrypt znajduj

cy si

w klipie P_Up odpowiada za przewijanie zawarto

ci listy Scrolling list

w dół. Wi

cej o specyfice tego algorytmu mo

na przeczyta

w rozdziale 5. „Obiekty Generatora” w

podrozdziale „Obiekty List, Scrolling List i Ticker”.

Szablon Nowosci.swt jest ju

gotowy. Mo

emy sprawdzi

czy lista przewija swoj

zawarto

ść

gór

i w dół w zale

ci od klikni

tego przycisku. Je

li z jakiego

powodu nie udało nam si

stworzy

poprawnego szablonu, to gotowy plik

ródłowy mo

na znale

źć

w katalogu Rozdzial09\Serwis\Swt.

Gotowy szablon Nowosci.swt skopiujmy do katalogu Swt w katalogu domowym serwisu Wirtualna
Ksi

garnia.

18. Wró

my teraz do Dreamweavera do dokumentu index.htm. Umie

ść

my kursor tekstowy w lewej

kolumnie stworzonej wcze

niej tabeli, a nast

pnie, korzystaj

c z narz

dzia Insert Fireworks

HTML wstawmy do owej kolumny dokument Rysunki/Nowosci.htm.

19. Wyselekcjonujmy element nowo wstawionej tabeli jak pokazano na rys.9.57. i usu

my go.

Rysunek 9.57. Usuni

ty element zostanie zast

piony szablonem Generatora

20. Z panelu narz

dziowego wybierzmy narz

dzie Insert Generator a nast

pnie wstawmy plik

Nowosci.swt z katalogu Swt.

Aby zobaczy

jak Generator tworzy animacj

w oparciu o szablon SWT, zapiszmy dokument

index.html i otwórzmy go w przegl

darce WWW wpisuj

c w jej polu adresu nazw

naszego serwera

WWW, np.(rys.9.58.):

http://127.0.0.1

Rysunek 9.58. Szablon SWT w dokumencie index.htm. Znaki Macromedii zostały usuni

te aby obraz

był przejrzysty

Pora stworzy

teraz szablon SWT, który b

dzie wy

wietlał serie wydawnicze, w jakich ukazuj

ksi

ąŜ

ki. Zało

enie jest takie,

e po klikni

ciu na danej serii wydawniczej, do przegl

darki internetowej

zostanie załadowany dokument, w którym b

znajdowa

tytuły wszystkich ksi

ąŜ

ek, znajduj

cych

w danej serii wydawniczej.

1. Otwórzmy animacj

Rozdzial09\Projekty\Swt\SerieWydaw.fla

Jest to animacja, która zawiera gotowy przycisk w bibliotece. Naszym zadaniem b

dzie

stworzenie obiektu Generatora, który wy

wietli tyle przycisków ile jest serii wydawniczych (serie

wydawnicze znajduj

w tabeli SerieWydaw bazy danych) oraz napisanie skryptu, który

spowoduje załadowanie do przegl

darki internetowej dokumentu zawieraj

cego ksi

ąŜ

ki z danej

serii.

2. Umie

ść

my w obszarze roboczym animacji obiekt List. Zmodyfikujmy jego wymiary i poło

enie tak,

aby zajmował cały niebieski obszar przestrzeni roboczej.

3. Maj

c wyselekcjonowan

stworzon

przed chwil

list

, otwórzmy panel Generator i zmodyfikujmy

nast

puj

co dwie wła

ciwo

ci:

•

Data source:

http://127.0.0.1/skrypty/seriewydaw.asp

•

Orientation: vertical

Reszt

pozostawmy bez zmian.

4. Otwórzmy teraz notatnik i umie

ść

my w nim taki oto skrypt:

Clip, Seria
<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

    Polaczenie.Open "Baza"

    'Proste zapytanie SQL, przypisywane do zmiennej.
    ZapytanieSQL = "SELECT Seria FROM SerieWydaw"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

    'P

tla Do Until ... Loop jest wykonywana dopóki w obiekcie Kolumny

'znajduj

elementy z tabeli

    Do Until Kolumny.EOF

      'Wysłanie nazwy klipu Przycisk
      Response.Write ("Przycisk, ")

      'Wysyłanie kolejnych warto

ci z kolumny Seria

      Response.Write (Kolumny("Seria"))

     'Przej

cie do nowego wiersza

     Response.Write Chr(13)

     'Nast

pny element obiektu Kolumny

     Kolumny.MoveNext
   Loop

   Polaczenie.Close

Zapiszmy plik w katalogu Skrypty pod nazw

SerieWydaw.asp. Skrypt powinien generowa

wyniki, takie jak wida

na rysunku 9.59.

Rysunek 9.59. Serie wydawnicze odczytane przez skrypt z bazy danych

Teraz nale

y jeszcze stworzy

skrypt, który otworzy odpowiedni dokument w przegl

darce

internetowej po klikni

ciu na danej serii wydawniczej

5. Przejd

my do trybu edycji klipu Przycisk, który znajduje si

w bibliotece, wyselekcjonujmy

znajduj

cy si

tam przycisk a nast

pnie, przy pomocy panelu akcji dodajmy do niego nast

puj

skrypt:

on (release) {
getURL("http://127.0.0.1/skrypty/seriawybr.asp?Seria={Seria}","_self")

}

Szablon SWT jest ju

gotowy. Opublikujmy go i skopiuj do domowego katalogu serwisu Wirtualna

Ksi

garnia, do katalogu Swt.

6. Wró

my do Dreamweavera, do dokumentu index.htm a nast

pnie umie

ść

my kursor tekstowy w

prawej kolumnie tabeli, w której znajduje si

tabela Nowo

ci wydawnicze. Musimy by

bardzo

ostro

ni poniewa

Dreamweaver najprawdopodobniej zmniejszył szeroko

ść

lewej kolumny tabeli

do zera (bo wcze

niej nie ustalili

my jej szeroko

ci), dlatego te

najlepiej kliknijmy wska

nikiem

myszki zaraz za tabel

Nowo

ci i naci

nijmy klawisz TAB, to spowoduje,

e kursor zostanie

umieszczony w kolejnej, wła

ciwej kolumnie.

7. W panelu wła

ciwo

ci ustawmy parametry W: 200 i Vert: Top

8. Korzystaj

c z narz

dzia Insert Fireworks HTML wybierzmy dokument Rysunki\SerieWydaw.htm.

9. W miejsce najwi

kszego elementu tabeli wstawmy szablon SerieWydaw.swt (rys.9.60.).

Rysunek 9.60. Szablon SerieWydaw.swt w tabeli Serie wydawnicze

Na koniec, zostało jeszcze stworzenie szablonu, w którym b

wietlane informacje o najlepiej

sprzedaj

cych si

ksi

ąŜ

kach.

1. Otwórzmy plik Rozdzial09\Projekt\Swt\Najlepsze.fla

Jest to pusta animacja, w bibliotece której znajduje si

klip filmowy, podobny do tego z animacji

SerieWydaw.fla. Zało

enie jest takie,

e po klikni

ciu na tytule ksi

ąŜ

ki, w przegl

darce

internetowej otworzy si

dokument z dokładnymi informacjami o danej ksi

ąŜ

ce. Jak si

łatwo

domy

konstrukcja tego szablonu b

dzie bardzo podoba do konstrukcji szablonu

SerieWydaw.swt

2. Umie

ść

my w obszarze roboczym obiekt List, tak aby zajmował cał

biał

przestrze

obszaru

roboczego i ustalmy jego wła

ciwo

ci nast

puj

co:

•

Data source:

http://127.0.0.1/skrypty/najlepsze.asp

•

Orientation: vertical

Reszt

pozostawmy bez zmian.

3. Otwórzmy notatnik i wpiszmy tam nast

puj

cy tekst:

Clip, Tytul
<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

Polaczenie.Open "Baza"

'Zapytanie SQL, przypisywane do zmiennej.
'Z tabel Sprzedaz i Ksiazki s

pobierane wszystkie rekordy przy

'zało

eniu,

e poszczególne pola kolumny Numer w tabeli Sprzedaz

'odpowiadaj

polom Numer w tabeli Ksiazki. Uzyskane dane s

'sortowane odwrotnie do warto

ci pola w kolumnie LiczbaEGZ tabeli

'sprzeda

ZapytanieSQL = "SELECT * FROM Sprzedaz, Ksiazki ->

-> WHERE Sprzedaz.Numer = Ksiazki.Numer ORDER BY LiczbaEGZ DESC"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

tla Do Until ... Loop jest wykonywana dopóki w obiekcie Kolumny

'znajduj

elementy lub dopóki zmienna Iter jest mniejsza od 11.

Iter = 1
Do Until Kolumny.EOF OR Iter > 10

      'Wywołanie nazwy klipu listy
      Response.Write ("Przycisk, ")

      'Wysyłanie kolejnych warto

      Response.Write (Kolumny("Tytul"))

     'Przej

cie do nowego wiersza

     Response.Write Chr(13)

     'Nast

pny element obiektu Kolumny i kolejna pozycja Iter

     Iter = Iter+1
     Kolumny.MoveNext
   Loop

   Polaczenie.Close
%>

Plik zapiszmy w katalogu Skrypty pod nazw

Najlepsze.asp

4. Je

li teraz opublikujemy animacj

, to uzyskamy obraz jak na rysunku 9.61.

Rysunek 9.61. Szablon Najlepsze.swt po opublikowaniu

5. Do przycisku, znajduj

cego si

w klipie Przycisk dodajmy nast

puj

cy skrypt:

on (release) {

getURL("http://127.0.0.1/skrypty/szukaj.asp?search={Tytul}", "_self")

}

Dzi

ki temu, gdy kto

kliknie tytuł ksi

ąŜ

ki, do przegl

darki internetowej zostanie załadowany

dokument ze szczegółowymi danymi o ksi

ąŜ

ce.

Opublikujmy ponownie animacj

, aby uzyska

aktualny szablon SWT, a nast

pnie skopiujmy plik

Najlepsze.swt do katalogu domowego serwisu a dokładniej do katalogu Swt.

6. Wró

my do Dreamweavera i umie

ść

my kursor tekstowy dokładnie za tabel

Serie wydawnicze a

nast

pnie korzystaj

c z narz

dzia Insert Fireworks HTML otwórzmy dokument Najlepsze.htm.

7. W miejsce najwi

kszego elementu graficznego powstałej tabeli Najlepsze ksi

ąŜ

ki wstawmy, przy

pomocy narz

dzia Insert Generator szablon Najlepsze.swt (rys.9.62a.).

Dokument index.htm jest ju

gotowy. Aby zobaczy

go w pełnej krasie w oknie przegl

darki

wpiszmy np. (rys.9.62b.):

http://127.0.0.1

Rysunek 9.62. Dokument index.htm w Dreamweaverze oraz w przegl

darce internetowej

a) Dokument index.html w Dreamweaverze
b) Dokument index.html w przegl

darce internetowej

Tworzenie dokumentów pobocznych

Dokument index.htm jest podstawowym dokumentem w całym serwisie wirtualnej ksi

garni. Tre

ść

reszty dokumentów zale

y od tego co zrobi odwiedzaj

cy serwis Wirtualnej Ksi

garni gdy w jego

przegl

darce wy

wietlany jest dokument index.htm. W tym podrozdziale, analizuj

c poszczególne

animacje SWF oraz szablony SWT, znajduj

ce si

w dokumencie index.htm b

dziemy tworzy

kolejne

dokumenty.

li w przegl

darce internetowej podamy adres:

http://127.0.0.1

a nast

pnie wpiszemy

dowoln

nazw

w polu tekstowym znajduj

cym si

w tabeli Szukaj i klikniemy przycisk Szukaj, to

uzyskamy efekt identyczny z tym na rysunku 9.63.

Rysunek 9.63. W dotychczasowym projekcie nie ma

adnego dokumentu, którego

Ŝą

daj

animacje

znajduj

ce si

w index.htm

Nie posiadamy jeszcze ani dokumentu szukaj.asp ani innych, które s

niezb

dne do poprawnego

działania serwisu. Zajmiemy si

teraz nimi po kolei.

Dokument szukaj.asp

Dokument szukaj.asp jest dokumentem, który wy

wietla wyniki szukania w postaci animacji Flasha,

osadzonej w grafice znajduj

cej si

w szablonie Glowny.dwt. Owa animacja jest generowana na

podstawie szablonu SWT, dlatego te

nie mo

na w prosty sposób przekaza

do niej parametrów a

dokument szukaj.asp nie b

dzie dokumentem

ródłowym dla szablonu SWT, poniewa

dzie on

utworzony na bazie szablonu Gotowy.dwt. Potrzebne jest rozwi

zanie po

rednie:

1. Przejd

my do Dreamweavera i z menu File wybierz polecenie New from Template. Nowo

stworzony dokument zapiszmy w katalogu Skrypty pod nazw

szukaj.asp.

Teraz je

li w przegl

darce internetowej klikniemy przycisk Szukaj w tabeli Szukaj ksi

ąŜ

ki, to do

okna przegl

darki zostanie załadowany dokument szukaj.asp, który na razie jest zwykła stron

WWW.

W dokumencie szukaj.asp umie

cimy szablon SWT, który b

dzie wy

wietlał wyniki wyszukiwania w

bazie danych.

Jest tylko jeden problem. W jaki sposób przekaza

szukany ci

g tekstowy do szablonu, który

przecie

dzie korzystał z innego

ródła danych ni

dokument szukaj.asp. Z pomoc

przychodz

tutaj zmienne o zasi

gu aplikacji (patrz rozdział 3. „Podstawy ASP” podrozdział „Zmienne”), które

inicjowane dokumencie szukaj.asp (dlatego wła

nie jest to skrypt a nie zwykły dokument HTML)

a odczytywane w skrypcie, który b

dzie odczytywał informacje z bazy danych i wysyłał je do szablonu

generatora.

2. Uaktywnijmy okno Dreamweavera, w którym znajduje si

dokument szukaj.asp i przejd

my do

mieszanego trybu pracy (kliknijmy ikon

Show Code and Design Views, znajduj

po lewej

stronie na górnej belce okna – rys.9.3b.).

Przewi

my zawarto

ść

kodu HTML do samej góry, i umie

ciwszy kursor tekstowy przed

elementem <html> wpiszmy nast

puj

cy skrypt (rys.9. 64.):

Rysunek 9.64. Stworzenie zmiennej o zasi

gu aplikacji umo

liwia przekazywanie parametrów

pomi

dzy skryptami

Application("CiagSzukany") = Request.QueryString("Search")

Teraz zmienna CiagSzukany, b

dzie widoczna w ka

dym skrypcie jaki zostanie uruchomiony.

3. Gotowy

szablon

SWT

znajdziemy

katalogu

Rozdzial09\Projekty\Swt

pod

nazw

WynikiSzukaj.swt. Skopiujmy go do domowego katalogu naszego serwisu do katalogu Swt.

Pozostałe szablony SWT, jakie musimy jeszcze wstawi

do dokumentów serwisu, b

gotowe,

poniewa

ich tworzenie nie zawiera

adnych „nowo

ci” w stosunku do szablonów, które w tym

rozdziale ju

zbudowali

W katalogu Rozdzial09\Projekt\Swt znajduje si

równie

plik

ródłowy FLA szablonu

WynikiSzukaj.swt, który mo

emy przegl

ąć

4. Pora stworzy

skrypt, który b

dzie obsługiwał wspomniany szablon SWT. Otwórzmy notatnik i

umie

ść

tam nast

puj

cy tekst:

Clip, Okladka, Tytul, Autor, Cena, Strony, CD, Data, Opis, Seria
<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

Polaczenie.Open "Baza"

'Proste zapytanie SQL, przypisywane do zmiennej
ZapytanieSQL = "SELECT * FROM Ksiazki WHERE Tytul = '" + ->

-> Application("CiagSzukany")+"'"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
     Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

    'Je

li danej ksi

ąŜ

ki nie ma w bazie danych

if Kolumny.EOF Then

Response.Write ("NoKlip, , , , , , , , , ")

    Else

'Wywołanie nazwy klipu listy

Response.Write ("Klip, ")

'Pełny adres URL okładki ksi

ąŜ

Response.Write ("http://127.0.0.1/Rysunki/Okladki/")

Response.Write (Kolumny("Okladka"))

Response.Write (".gif, ")

'Wysyłanie kolejnych warto

ci z kolumny Tytul

Response.Write (Kolumny("Tytul"))

Response.Write (", ")

'Wysyłanie kolejnych warto

ci z kolumny Autor

Response.Write (Kolumny("Autor"))

Response.Write (", ")

'Wysyłanie kolejnych warto

ci z kolumny Cena

Response.Write (Kolumny("Cena"))

Response.Write (" PLN, ")

'Wysyłanie kolejnych warto

ci z kolumny Strony

Response.Write (Kolumny("Strony"))

Response.Write (", ")

'Wysyłanie kolejnych warto

ci z kolumny CD

Response.Write (Kolumny("CD"))

Response.Write (", ")

'Wysyłanie kolejnych warto

ci z kolumny Data

Response.Write (Kolumny("Data"))

Response.Write (", ")

'Wysyłanie kolejnych warto

ci z kolumny Opis

Response.Write (Kolumny("Opis"))

Response.Write (", ")

'Tworzenie ponownego zapytania SQL w celu okre

lenia nazwy

'serii wydawniczej

ZapytanieSQL = "SELECT * FROM SerieWydaw WHERE Numer = " & ->

-> Kolumny("Seria")

Set Seria_Wydawnicza = Polaczenie.Execute(ZapytanieSQL)

Response.Write (Seria_Wydawnicza("Seria"))

'Przej

cie do nowego wiersza

Response.Write Chr(13)

    'Koniec warunku
    End if

    'Zamkni

cie poł

czenia z baza danych

Polaczenie.Close
%>

Skrypt zapiszmy w katalogu Skrypty jako WynikiSzukaj.asp. Dzi

ki temu skryptowi, do szablonu

zostaj

podane wszystkie najwa

niejsze informacje znajduj

ce si

w bazie danych. Jest to do

ść

prosty skrypt, poniewa

zakłada,

e u

ytkownik w polu szukaj poda dokładny tytuł ksi

ąŜ

ki (mo

to by

jedynie tytuł), tak wi

c odpowiedzi

e by

tylko jedna ksi

ąŜ

ka. Ma to oczywi

cie sens

tylko w przypadku takiego prostego projektu jak Wirtualna Ksi

garnia, natomiast rozwi

zanie jest

zbyt prymitywne dla ambitniejszych zastosowa

. Nale

ało by znacznie rozbudowa

ów skrypt, tak

aby mo

na było wyszukiwa

pozycje wydawnicze na wiele sposobów (aby si

przekona

jak

powinien wygl

mechanizm wyszukiwania w powa

nych serwisach odwied

którykolwiek z

portali informacyjnych lub np. serwis wydawnictwa Helion

http://helion.pl

UWAGA!!! Gotowe skrypty, mo

emy tak

e znale

źć

w katalogu Rozdzial09\Serwis\Skrypty

5. Teraz w edytowalnej cz

ęś

ci dokumentu Szukaj.asp umie

ść

my tabel

Fireworks, której plik

WynikiSzukaj.asp znajduje si

w katalogu Rysunki.

6. Gdy tabela Wyniki poszukiwa

, pojawi si

w dokumencie Szukaj.asp, usu

my jej

rodek i

wstawmy tam szablon Generatora WynikiSzukaj.asp.

Otwórzmy teraz przegl

dark

WWW podajmy w jej polu adresowym nazw

naszego serwera

WWW.

Po wpisaniu w polu tekstowym tabeli Szukaj dowolnego tytułu (tytuł ksi

ąŜ

ki mysi znajdowa

bazie danych), do okna przegl

darki internetowej zostanie załadowana animacja SWF, stworzona na

bazie szablonu WynikiSzukaj.swt (rys.9.65.). Je

li tytuł, który wpiszemy nie znajduje si

w naszej

bazie danych, zamiast informacji o ksi

ąŜ

ce zostanie wy

wietlony odpowiedni komunikat.

Rysunek 9.65. Wyniki wyszukiwania na podstawie szablonu WynikiSzukaj.swt

Zauwa

my,

e dokładnie z tego samego dokumentu i szablonu SWT korzysta animacja, która

prezentuje nowo

ci wydawnicze (Nowosci.swt), oraz animacja znajduj

ca si

w tabeli Najlepsze

ksi

ąŜ

ki, dzi

ki czemu w wi

kszej cz

ęś

ci mamy ju

gotowe odwołania z dokumentu index.htm.

Samej operacji dodawania do koszyka, nie b

dziemy ju

wykonywa

. Je

li klikniemy przycisk

Dodaj zostanie po prostu wy

wietlona informacja oznajmiaj

ca,

e pozycja została dodana do

koszyka.

Dokument SerieWybrane.asp

Dokument SerieWybrane.asp jest wywoływany wtedy, gdy klikniemy któr

ąś

z pozycji w tabeli Serie

Wydawnicze. Poniewa

póki co, tego dokumentu jeszcze nie stworzyli

my, w przegl

darce

internetowej pojawia si

komunikat,

Ŝą

dany dokument nie mo

e zosta

otwarty. Musimy ten

dokument dopiero stworzy

. Zrobimy to podobnie, jak to miało w przypadku szablonu Szukaj.asp.

1. Stwórzmy w Dreamweaverze nowy dokument na bazie szablonu Glowny.swt, nast

pnie zapiszmy

go w katalogu Skrypty pod nazw

SeriaWybr.asp

2. Podobnie jak to miało miejsce w przypadku dokumentu Szukaj.asp tak i teraz umie

cimy na

pocz

tku dokumentu SeriaWybr.asp skrypt. Przeł

czmy si

do mieszanego trybu pracy i dodajmy

na samym pocz

tku kodu HTML edytowanego dokumentu nast

puj

cy skrypt:

Application("SeriaSzukana") = Request.QueryString("Seria")

Dzi

ki temu zmienna SeriaSzukana b

dzie widoczna we wszystkich innych skryptach.

3. W katalogu Rozdzial09/Projekt/Swt znajdziemy gotowy szablon SeriaWybrana.swt. Skopiujmy go

do katalogu SWT, który znajduje si

w katalogu domowym naszego serwera WWW.

li otworzymy plik SeriaWybrana.fla zobaczymy, ze obiekt List, który si

tam znajduje wymaga

ródła danych o nazwie DanaSeria.asp.

4. Otwórzmy wi

c notatnik i wpiszmy do niego nast

puj

cy skrypt:

Clip, Num, Tytul, Autor
Seria, ,  <%=Application("SeriaSzukana") %>
<%
    'Przej

cie do nowego wiersza

    Response.Write Chr(13)
    Iter = 1

    'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

Polaczenie.Open "Baza"

'Proste zapytanie SQL, przypisywane do zmiennej
ZapytanieSQL = "SELECT * FROM SerieWydaw, Ksiazki WHERE ->

-> SerieWydaw.Seria = '"+ Application("SeriaSzukana") +"' ->
-> AND SerieWydaw.Numer = Ksiazki.Seria"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

    'P

tla Do Until ... Loop jest wykonywana dopóki w obiekcie Kolumny

'znajduj

elementy z tabeli

    Do Until Kolumny.EOF

      'Wywołanie nazwy klipu listy
      Response.Write ("Klip, ")

      ‘Wysłanie numeru Iter oraz warto

ci z kolumny Tytuł

      Response.Write(Iter)
      Response.Write(", ")
      Response.Write (Kolumny("Tytul"))
      Response.Write (", ")
      Iter = Iter+1

      'Wysłanie zwarto

ci z kolumny Autor

      Response.Write (Kolumny("Autor"))

      'Przej

cie do nowego wiersza

      Response.Write Chr(13)

      'Nast

pny element obiektu Kolumny

Kolumny.MoveNext

   Loop

    'Zamkni

cie poł

czenia z baza danych

Polaczenie.Close
%>

a nast

pnie zapiszmy go pod nazw

DanaSeria.asp w katalogu Skrypty.

5. Powró

my do Dreamweavera i przy pomocy narz

dzia Insert Fireworks HTML wstawmy do

dokumentu tabel

Serie wydawnicze (plik WybraneSerie.html) a nast

pnie do tabeli szablon

SeriaWybrana.swt. Zapiszmy plik SeriaWybr.asp.

Po otwarciu serwisu w przegl

darce internetowej i klikni

ciu na którym

z przycisków w tabeli

Serie Wydawicze, serwis wy

wietli wszystkie ksi

ąŜ

ki, jakie znajduj

w danej serii wydawniczej

(rys.9.66.).

Rysunek 9.66. Wszystkie ksi

ąŜ

ki pochodz

z jednej serii wydawniczej

Oczywi

cie po klikni

ciu, na którym

z tytułów, serwis wy

wietli szczegółowe informacje o danej

pozycji.

Dodawanie informacji do bazy danych

Serwis jest ju

prawie gotowy. Pozostało nam jeszcze stworzy

dwa skrypty. Pierwszy z nich to

skrypt mail.asp, którego

Ŝą

da animacja umo

liwiaj

ca nam dodanie adresu e-mail do bazy danych

(tabela e – Informacje) a drugi to skrypt CoMyslisz.asp, który dodaje opini

odwiedzaj

cych serwis do

bazy danych.

Najpierw skrypt mail.asp:

1. Stwórzmy w Dreamweaverze nowy dokument na bazie szablonu Glowny.asp i zapiszmy go w

katalogu Skrypty jako mail.asp.

2. Korzystaj

c z narz

dzia Insert Image wstawmy do edytowalnej cz

ęś

ci dokumentu obrazek

Dzieki.gif, a nast

pnie umie

ść

my kursor tekstowy za obrazkiem i wci

nijmy ENTER.

3. Gdy kursor tekstowy znajdzie si

pod obrazkiem wpiszmy z klawiatury nast

puj

cy tekst:

Dzi

kujemy za informacje. Twój adres e-mail został dodany do naszej bazy

danych. B

dziesz teraz otrzymywał informacje o wszystkich nowo

ciach

wydawniczych, które mo

esz zamówi

poprzez nasz

ksi

garni

internetow

li to konieczne, to przy pomocy panelu wła

ciwo

ci zmie

my wła

ciwo

ci tekstu, tak aby

wygl

dał tak jak sobie tego

yczymy (rys.9.67.).

Rysunek 9.67. Komunikat wy

wietlany przez serwis Wirtualna Ksi

garnia po dodaniu adresu e-mail do

bazy danych

4. Przejd

my teraz do mieszanego trybu pracy i na pocz

tku kodu HTML dokumentu Mail.asp

dodajmy nast

puj

cy skrypt:

<%
'Tworzenie obiektu ł

cego

    Set Polaczenie = Server.CreateObject("ADODB.Connection")

    'Otwieranie poł

czenia z baz

danych

    Polaczenie.Open "Baza"

    'Proste zapytanie, umieszczaj

ce w tabeli eInfo w kolumnie Email

'warto

ść

zmiennej email przekazanej do skryptu.

ZapytanieSQL = "INSERT INTO eInfo (Email) VALUES ->

-> ('"+Request.QueryString("email")+"')"

    'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
    Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

   Polaczenie.Close

Teraz skrypt jest ju

gotowy. Je

li w polu tekstowym tabeli eInfo wpiszemy poprawny (zawieraj

znak @) adres e-mail, i klikniemy przycisk Wy

lij, to do naszej bazy danych do tabeli eInfo zostanie

dopisana warto

ść

zmiennej email, która jest przesyłana do skryptu mail.asp.

Na koniec wykonamy jeszcze skrypt CoMyslisz.asp.

1. Stwórzmy jeszcze raz nowy dokument z szablonu Glowny.swt i zapiszmy go w katalogu Skrypty

pod nazw

CoMyslisz.asp.

2. Do edytowalnej cz

ęś

ci dokumentu, podobnie jak to miało miejsce w przypadku dokumentu

mail.asp wstawmy obrazek Dzieki.gif a pod nim umie

ść

my napis:

Dzi

kujemy za informacje. Twoja opinia została dodana do naszej bazy

danych.

3. Przejd

my do mieszanego trybu pracy i na pocz

tku kodu HTML dokumentu CoMyslisz.asp

wstawmy, nast

puj

cy skrypty:

'Tworzenie obiektu ł

cego

Set Polaczenie = Server.CreateObject("ADODB.Connection")

'Otwieranie poł

czenia z baz

danych

Polaczenie.Open "Baza"

'Proste zapytanie, umieszczaj

ce w tabeli Opinia w kolumnie Tekst

'warto

ść

zmiennej Opinia przekazanej do skryptu.

ZapytanieSQL = "INSERT INTO Opinia(Tekst) VALUES

('"+Request.QueryString("Opinia")+"')"

'Inicjowanie obiektu Kolumny jako wyniku zapytania SQL
Set Kolumny = Polaczenie.Execute(ZapytanieSQL)

Polaczenie.Close

li teraz w polu tekstowym tabeli wpiszemy dowolny tekst i wci

niemy klawisz wy

lij, to

zawarto

ść

owego pola tekstowego zostanie dodana do naszej bazy danych do tabeli Opinie.

Podsumowanie

Wła

nie uko

czyli

my nasz serwis Wirtualna Ksi

garnia. Mo

emy teraz testowa

go na wiele

sposobów a tak

e samodzielnie tworzy

dalej. Dobrym sprawdzeniem naszych umiej

tno

ci mo

e by

np. dodanie skryptów umo

liwiaj

cych wysłanie do bazy danych koszyka zamówionych ksi

ąŜ

ek, lub

rozbudowanie skryptu wyszukuj

cego ksi

ąŜ

ki w bazie danych, tak aby mo

na było odszukiwa

cej ni

jedn

pozycje naraz.