W tym rozdziale przyjrzymy się narzędziom, z których możesz skorzystać podczas tworzenia witryn WWW, kodu HTML, formularzy, a w szczególności stron ASP. Nasze rozważania rozpoczniemy od omówienia najbardziej podstawowego narzędzia, które powinieneś już posiadać, Notatnika. Przekonasz się, że przy użyciu jedynie Notatnika możesz stworzyć swoją własną stronę ASP.
Następnie zwrócimy uwagę na parę innych narzędzi, których możesz użyć do tworzenia stron WWW. Te narzędzia, FrontPage 2000 i NetObjects Fusion, posiadają szybki i intuicyjny interfejs do budowania witryn i stron. Przyjrzymy się również dodawaniu elementów do stron przy użyciu tych narzędzi oraz tworzeniu formularzy.
Potem skupimy się na narzędziach używanych do tworzenia kodu stron ASP, a na samym początku będzie to NetObjects ScriptBuilder 3.0. To narzędzie tworzenia zawiera wspaniały interfejs, który powoduje, że tworzenie bloków kodu jest niesamowicie proste. Przyjrzymy się również Visual InterDev Microsoftu. Jeśli jesteś zaznajomiony z jakimkolwiek produktem serii Visual Studio, przyjemnie zaskoczy cię jego podobny układ i funkcjonalność.
Jeśli masz komputer z zainstalowanym systemem Windows jakiejkolwiek wersji, to już posiadasz narzędzie do tworzenia stron ASP i pracy z nimi - to narzędzie to Notatnik.
Strony WWW i ASP są stworzone po prostu przy użyciu tekstu, dlatego jedyną rzeczą, której potrzeba do ich tworzenia i pracy z nimi jest edytor tekstu. Notatnik lub jakikolwiek inny edytor tekstu, świetnie będzie wspomagał tworzenie i edycję stron HTML i ASP.
Naprawdę, czasami to wszystko czego potrzebujesz. Osobiście posiadam duży wybór narzędzi do tworzenia stron WWW, witryn oraz stron ASP, ale w dalszym ciągu od czasu do czasu używam Notatnika. Jednym z powodów jest tutaj prostota ładowania tego edytora tekstu przy jego olbrzymich możliwościach twórczych. Kolejnym powodem do rozważenia możliwości użycia edytora tekstu jest fakt, że jest on dostępny nawet na mniej zaawansowanych technologicznie komputerach. Zawsze powinieneś znaleźć na nich edytor tekstu, a jeśli istnieje możliwość połączenia z twoim serwerem internetowym, na bieżąco możesz dokonywać modyfikacji stron.
Ponadto w przypadku prostego HTML, to bardzo ważne, aby okresowo przeglądać swój naturalny kod. Przekonasz się, że wiele narzędzi używanych do tworzenia stron i witryn WWW dodaje liczne linie kodu układu tabeli, które mogą być swobodnie usunięte co spowoduje, że twoja strona stanie się dużo mniejsza i będzie się ładowała dużo szybciej.
Spójrzmy na przykład poniższego kodu HTML, który został wygenerowany przez narzędzie tworzenia witryn, zwane NetObjects Fusion, które omówimy później:
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH=570>
<TR VALIGN="top" ALIGN="left">
<TD WIDTH=68 HEIGHT =7><IMG SRC="./assets/images/dot_clear.gif"
WIDTH =68 HEIGHT =1 BORDER=0></TD>
<TD WIDTH=27><IMG SRC="./assets/images/dot_clear.gif" WIDTH =27
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=95><IMG SRC="./assets/images/dot_clear.gif" WIDTH =95
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=95><IMG SRC="./assets/images/dot_clear.gif" WIDTH =95
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=95><IMG SRC="./assets/images/dot_clear.gif" WIDTH =95
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=95><IMG SRC="./assets/images/dot_clear.gif" WIDTH =95
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=61><IMG SRC="./assets/images/dot_clear.gif" WIDTH =61
HEIGHT =1 BORDER=0></TD>
<TD WIDTH=34><IMG SRC="./assets/images/dot_clear.gif" WIDTH =34
HEIGHT =1 BORDER=0></TD>
</TR>
<TR VALIGN="top" ALIGN="left">
<TD></TD>
<TD WIDTH=468 COLSPAN=6><P ALIGN="center"><B>
<FONT COLOR="#800000" SIZE="+2" FACE="Arial,Helvetica">
All invitations and accessories priced at a 25% discount!</B>
</FONT></P></TD>
<TD></TD>
</TR>
<TR VALIGN="top" ALIGN="left">
<TD COLSPAN=8 HEIGHT =39></TD>
</TR>
</TABLE>
Prawie identyczne wyjście można uzyskać z następującego kodu HTML:
<p ALIGN="center"><b><font SIZE="+2" FACE="Arial,Helvetica">
All invitations and accessories priced at a 25% discount!
</b></font></p>
Ten kod jest objętościowo jedynie ułamkiem tego poprzedniego, tak więc strona będzie wyświetlana znacznie szybciej.
Jedyną rzeczą, o której należy pamiętać używając Notatnika jako edytora stron ASP jest nadanie plikowi odpowiedniego rozszerzenia. Notatnik domyślnie przydziela rozszerzenie .txt. Kiedy więc zapisujesz plik napisany w Notatniku, upewnij się, czy przydzieliłeś mu właściwe rozszerzenie, jak to pokazano na rysunku 3.1.
Rysunek 3.1. Przydzielanie właściwego rozszerzenia w Notatniku
FrontPage 2000 jest narzędziem Microsoftu, które możesz wykorzystać do tworzenia pojedynczych stron i witryn WWW. Ponieważ FrontPage jest produktem Microsoftu, jest zaprojektowany tak, aby współpracował z serwerem IIS, umożliwiając natychmiastową modyfikację witryny WWW; używając innych narzędzi musisz w zasadzie załadować stronę na serwer.
Rysunek 3.2 pokazuje środowisko, w którym strona WWW jest przeglądana. Widok pokazany na tym rysunku jest widokiem strony, którą przejrzeć można naciskając przycisk Strona (Page) w pasku narzędziowym znajdującym się po lewej stronie ekranu. Kiedy przycisk zostanie naciśnięty, w środku okna ukaże się panel prezentujący zawartość bieżącego folderu. W tym przypadku katalog macierzysty FrontPage nazywa się fpsample.
Rysunek 3.2. Środowisko pracy FrontPage w czasie przeglądania strony WWW
W prawym panelu okna FrontPage prezentowana jest zawartość aktualnie wybranej strony WWW. Klikając dowolną stronę w panelu środkowym, uaktywniamy ją w prawym panelu. W prawym panelu dostępne są trzy rodzaje widoków strony. Pierwszy z nich, pokazany na rysunku 3.2, to widok normalny, gdzie możliwe jest graficzne dodawanie i edycja elementów strony. Jeśli zmienisz widok na HTML, ujrzysz sam kod HTML (Rysunek 3.3.). W widoku normalnym możesz edytować kod HTML, aby dodać skrypty lub kod ASP. Możesz go użyć również jako narzędzia szkoleniowego, pokazującego co dzieje się ze stroną, gdy dodajesz do niej różne elementy.
Rysunek 3.3. Widok HTML strony WWW w programie FrontPage
Trzecim widokiem jest podgląd. Dzięki temu widokowi pokazanemu na rysunku 3.3 sprawdzisz, jak strona będzie wyglądała w przeglądarce. Ta prosta opcja pozwala na szybki podgląd wyjściowej postaci strony.
Rysunek 3.4. Podgląd strony
Przypis
Podgląd jest uruchamiany po stronie klienta. Oznacza to, że każdy kod po stronie klienta również będzie widoczny, ale żadna z twoich stron ASP nie zostanie przetworzona.
Kolejnym widokiem głównym (dostępnym w lewym panelu okna) jest widok Foldery (Folders), co pokazano na rysunku 3.5. Widok ten pozwala na zarządzanie plikami i folderami twojej witryny. Ze środkowego panelu korzystasz w celu wyszukiwania katalogów. W tym samym czasie panel prawy pokazuje zawartość wybranego folderu. Rozszerzona informacja o każdym z nich zawierająca nazwę, tytuł, datę modyfikacji oraz komentarze, jest prezentowana w prawym panelu. Tak więc korzystając z tego widoku w prosty sposób możesz zlokalizować pliki, dodawać do nich zadania, przeglądać ich strukturę oraz sortować je po którymkolwiek z pól.
Rysunek 3.5. Widok Foldery w programie FrontPage
Aby dodać komentarz do pliku, kliknij jego ikonę prawym przyciskiem myszy i wybierz Właściwości (Properties). Następnie kliknij zakładkę Skrót (Summary) i wpisz swój komentarz (Rysunek 3.6.). Komentarz możesz dodać do każdego pliku witryny.
Rysunek 3.6. Okno dialogowe wykorzystywane w celu dodawania komentarza do pliku
Kolejny widok - Raporty (Reports) - pozwala na przejrzenie rozmaitych raportów dotyczących twojej witryny WWW. Krótki raport domyślny jest pokazany na rysunku 3.7.
Rysunek 3.7. Widok Raporty
Przeglądu dodatkowych raportów możesz dokonać wybierając Raporty (Reports) z menu Widok (View). Dzięki temu wygenerujesz listę wolnych stron, starych plików, dodanych ostatnio plików, przerwanych łącz i wielu innych. Niektóre z tych raportów można nawet skonfigurować wybierając Narzędzia (Tools), Opcje (Options), a następnie przeglądając zakładkę Widok raportów (Reports View). Tutaj możesz określić, ile maksymalnie dni ma mieć plik, aby był zakwalifikowany jako nowy. Tak samo zakwalifikować możesz plik jako stary, ustalając minimalną liczbę dni. Możesz również ustalić liczbę sekund, która musi upłynąć podczas ładowania strony, aby uznać ją za wolną.
Następnym widokiem, pokazanym na rysunku 3.8, jest Nawigacja (Navigation). Ten widok pozwala na projektowanie logicznego układu witryny. Tutaj możesz dodawać strony do schematu poprzez przeciągnięcie ich z listy folderów do prawego panelu. Tam strony mogą zostać połączone w układ logiczny. W widoku nawigacji możesz usunąć dowolną stronę z witryny bez obawy o to, że plik zostanie usunięty z sieci.
Rysunek 3.8. Widok Nawigacji w programie FrontPage 2000
Przycisk Hiperłącza (Hyperlinks) uruchamia kolejny graficzny widok twojej witryny WWW. Wybierając daną stronę z listy folderów, w prawym panelu ujrzysz jej wszystkie łącza.
Ostatnim z widoków są Zadania (Tasks), co pokazano na rysunku 3.9. Prezentuje on działania, które należy podjąć podczas tworzenia witryny WWW. Zadania przydzielane są osobom - mają swój priorytet, status, datę i opis.
Rysunek 3.9. Widok Zadań w programie FrontPage 2000
Możesz mieć przydzielone zadanie ogólne, nie odnoszące się do żadnego szczególnego zadania z listy. Na przykład możesz przydzielić zadanie rejestracji witryny w wyszukiwarce; być może zadaniem będzie ukończenie schematu strony. Aby dodać zadanie ogólne, najpierw upewnij się, czy znajdujesz się w widoku zadań. Następnie wybierz z menu Edycja (Edit) Zadania (Tasks) i Dodaj zadanie (Add Task). Powinieneś zobaczyć okno pokazane na rysunku 3.10.
Rysunek 3.10. Dodawanie zadania w oknie dialogowym Nowe zadanie
W oknie dialogowym Nowe zadanie (New Task) przydzielasz zadanie określonej osobie. Możesz również ustalić priorytet zadania oraz podać jego opis. Kiedy naciśniesz przycisk OK, nowe zadanie zostanie dodane do listy w widoku Zadania.
Możesz również przydzielić zadania plikom i folderom w witrynie WWW. Robi się to poprzez wybranie strony z listy folderów, a następnie kliknięcie jej prawym przyciskiem myszy oraz wybranie pozycji Dodaj zadanie (Add Task). Kolejne kroki są takie same jak przy dodawaniu zadania ogólnego.
Widok Zadania jest wykorzystywany do zarządzania. Kiedy klikniesz dowolne zadanie prawym przyciskiem, możesz wybrać Rozpocznij zadanie (Start Task), co spowoduje, że przeniesiesz się do pliku związanego z tym zadaniem. Możesz również oznaczyć zadanie jako zakończone klikając je prawym przyciskiem. Zadanie zakończone ma inną ikonę, co ułatwia jego rozpoznanie spośród zadań niezakończonych.
W programie FrontPage termin sieć Web odnosi się do nazwy domeny lub podkatalogu, gdzie witryna WWW będzie umieszczona. FrontPage dysponuje kreatorem, którego możesz użyć do stworzenia nowej sieci Web. Aby skorzystać z kreatora wybierz menu Plik (File), Nowa (New), a następnie Sieć Web (Web). Powinieneś ujrzeć dialog wyboru witryn, pokazany na rysunku 3.11.
Rysunek 3.11. Dialog wyboru witryn
Bez względu na typ witryny, którą wybierzesz, będziesz musiał podać jej położenie. Jeśli serwer jest oddalony, możesz być zapytany o nazwę użytkownika oraz hasło komputera NT, na którym zainstalowany został serwer IIS. W tym miejscu będzie stworzona twoja witryna. Jeśli pracujesz z witryną i zapisujesz na bieżąco zmiany, będą one natychmiastowo przenoszone na serwer.
Zwróć uwagę na duży wybór sieci Web. Jeśli wybierzesz pojedynczą stronę, kreator stworzy ją w jednym tylko w jednym kroku, a niezbędne pliki zostaną umieszczone na serwerze. Inne kreatory są nieco bardziej złożone. Weźmy na przykład kreatora prezentacji firmy. Na samym początku wybierasz strony, które chcesz włączyć do witryny (zobacz rysunek 3.12.).
Rysunek 3.12. Wybór stron witryny prezentującej firmę
Dla każdej strony wybierasz elementy, które mają się na niej pojawić. Zaraz po tym, jak kreator wygeneruje stronę, twój wybór zostanie uwzględniony w szablonie strony, który posiada wolne miejsce na dodatkową zawartość.
Kreator zapyta cię również o wybór tematu będącego ogólnym wyglądem twojej witryny, zawierającego kombinację banerów, tła, stylu czcionki i innych elementów. FrontPage zawiera mnóstwo tematów. Możesz je wybierać bądź zmieniać korzystając z menu Format, a następnie zaznaczając Temat (Theme). Zobaczysz wtedy okno dialogowe pokazane na rysunku 3.13.
Rysunek 3.13. Wybór tematu dla witryny
Temat możesz zastosować do dowolnej ilości stron twojej witryny. Możesz również modyfikować wygląd tematu. Staraj się jednak uważnie korzystać z tych gotowych tematów. Pamiętaj, że FrontPage jest bardzo popularny i każdy twórca korzystający z niego posiada te same tematy, co ty. Tak więc ktoś, kto odwiedza twoją witrynę, a wcześniej przeglądał inne stworzone przy użyciu FrontPage, może stwierdzić, że twoja witryna nie jest niczym wyjątkowym.
Jak mogliśmy się zorientować z wcześniejszych kart tego rozdziału, najprostszą i najszybszą metodą przeglądania strony, nad którą pracujesz to wybrać Podgląd (Preview) w trybie Strona (Page) - pozwala to jednak tylko na szybki przegląd. Ty natomiast chciałbyś może zobaczyć, jak twoja strona będzie widziana przez wolnostojącą przeglądarkę. Da się to zrobić wybierając w menu Plik (File) opcję Widok w przeglądarce (Preview in Browser). Wyświetlone zostaje okno dialogowe pokazane na rysunku 3.14.
Rysunek 3.14. Okno dialogowe Widok w przeglądarce
To narzędzie podglądu pozwala na wybranie typu przeglądarki, za pomocą której chcesz przeglądać witrynę. To bardzo ważne, aby zobaczyć jak wygląda witryna we wszystkich tych przeglądarkach, których mogą używać potencjalni użytkownicy, ponieważ czasami strona różnie zachowuje się w różnych typach przeglądarek.
Możesz również uzupełnić listę dodatkowymi przeglądarkami klikając przycisk Dodaj (Add). Wpisujesz wtedy nazwę nowej przeglądarki, która pojawi się następnie na liście.
Zauważ również, że można dokonać wyboru rozmiaru okna. Pamiętaj, że odwiedzający mogą mieć monitor o rozmiarze innym od tego, który ty posiadasz. Dlatego sprawdź, jak wygląda twoja witryna WWW na monitorach różnego rozmiaru. Następnie, na podstawie tego podglądu, będziesz mógł wyregulować końcowy wygląd twojej witryny.
FrontPage posiada jeszcze jedno narzędzie, które jest pomocne w radzeniu sobie z różnicami pomiędzy przeglądarkami. Znajdując się w widoku Strona (Page), wybierz Opcje strony (Page Options) z menu Narzędzia (Tools). Następnie wybierz zakładkę Kompatybilność (Compatibility). Zobaczysz okno dialogowe pokazane na rysunku 3.15. Tutaj możesz wybrać przeglądarkę docelową dla tej strony, jej wersję oraz serwer, na który strona będzie wysyłana. W oparciu o dokonane wybory, różne pola wyboru poniżej będą aktywowane bądź dezaktywowane. To samo stanie się z pozycjami menu programu FrontPage.
Rysunek 3.15. Kompatybilność strony
Możesz również wybrać typ i wersję przeglądarki oraz typ serwera według własnych potrzeb. W tym wypadku ręcznie określasz technologie, które mają obsługiwać stronę, zaznaczając bądź odznaczając dowolne pola wyboru znajdujące się na dole okna.
Możesz dodać nową stronę WWW lub ASP do sieci Web stworzonej w programie FrontPage wybierając Nowa (New), Strona (Page) z menu Plik (File). Kiedy to uczynisz, zobaczysz kolejny ekran wyboru, który prezentuje rysunek 3.16. W tym dialogu możesz dokonać wyboru spośród wielu szablonów stron. Te wzorcowe strony przeprowadzą cię przez kreator, dzięki któremu stworzysz nową stronę, uzupełniając szablon odpowiednimi informacjami. Możesz również wybrać szablon nazwany Stroną normalną (Normal Page), który jest po prostu pustą stroną. Zakładka Strony ramek (Frames Pages) zawiera więcej szablonów, ale są one zbudowane przy użyciu ramek.
Rysunek 3.16. Dialog wyboru szablonu strony WWW
Kiedy przejdziesz przez wszystkie kroki kreatora, twoja nowa strona zostanie wyświetlona. Kiedy będziesz chciał ją zapisać, zostaniesz zapytany o tytuł strony i nazwę pliku. To w tym miejscu ustalasz, czy dana strona jest stroną ASP czy jakiegoś innego typu. Po prostu określ odpowiednio rozszerzenie pliku.
Pamiętaj jednak, że nawet jeśli dasz plikowi rozszerzenie .asp, to i tak kod strony serwera nie zadziała dopóki nie zostanie przetworzony przez serwer. Kiedy już stworzyłeś stronę ASP, możesz przejść do widoku HTML i ręcznie dodać twój kod do strony.
Znajdując się w widoku normalnym strony możesz zacząć wpisywać do niej tekstową zawartość. Możesz również formatować tekst podobnie jak w każdym innym programie Microsoft Office przy użyciu paska formatowania, pokazanego na rysunku 3.17.
Rysunek 3.17. Pasek formatowania
Pierwsza lista rozwijana paska narzędziowego pozwala na wybór typu elementu HTML, który zostanie użyty dla tego tekstu, na przykład H1 lub OL. Następnie możesz określić rodzaj i rozmiar czcionki oraz atrybuty akapitu. Jeśli potem spojrzysz na kod HTML strony, zobaczysz, że twoje zmiany zamieniły się w odpowiednie znaczniki HTML.
Jak pokazano na rysunku 3.18, inne elementy HTML dodaje się do strony WWW w menu Wstaw (Insert).
Rysunek 3.18. Menu Wstaw w widoku strony
Wybór większości elementów w tym menu, uruchamia kreatora lub dialog uzyskujący od ciebie informacje potrzebne podczas dodawania nowego elementu do strony. Na przykład jeśli wybierzesz Hiperłącze (Hyperlink), program poprosi cię o podanie położenia pliku, do którego odnosi się łącze lub o wybranie strony w sieci Web.
Dodawania elementów formularza dokonuje się w ten sam sposób, wybieramy któryś z podpunktów opcji Formularz (Form) dostępnej w menu Wstaw (Insert). Możesz dodać formularz na dwa sposoby. Po pierwsze, wstawienie pojedynczego elementu. Jeśli przykładowo chciałbyś wstawić pojedyncze pole tekstowe, wybierasz odpowiednią pozycję z menu Formularza, a FrontPage doda ten element w ramach jego własnego znacznika form do twojej strony WWW i wyświetli widok pokazany na rysunku 3.19.
Rysunek 3.19. Pojedyncze pole formularza
Możesz wtedy określić działania, które należy podjąć oraz inne właściwości formularza klikając na nim prawym przyciskiem myszy, a następnie wybierając Właściwości Formularza (Form Properties). W ten sam sposób możesz dodać inne formularze.
Jeśli formularz ma być bardziej złożony, możesz również wybrać w podmenu punkt Formularz (Form). Stworzony zostanie wtedy formularz z przyciskami Prześlij (Submit) oraz Skasuj (Reset). Następnie dodajesz elementy to tego formularza wybierając je z podmenu w czasie, gdy sam formularz jest zaznaczony.
Jeśli klikniesz prawym przyciskiem myszy którykolwiek z elementów formularza, możesz przejrzeć jego właściwości wybierając Właściwości pola formularza (Form Field Properties). Odpowiednie okno dialogowe pokazuje rysunek 3.20.
Rysunek 3.20. Właściwości pola formularza
Różne typy elementów formularza mają różne, odpowiadające im dialogi. Przycisk Sprawdź poprawność (Validate) pozwala na stworzenie ograniczeń typu i wartości zapisu wprowadzanego w pole formularza po stronie klienta.
Kolejnym narzędziem tworzenia witryn WWW jest NetObjects Fusion, https:\\www.netobjects.com. NetObjects posiada duży wybór narzędzi wspierających projektowanie. W dalszej części rozdziału zwrócimy uwagę na jedno z nich zwane ScriptBuilder, posiadające wspaniały interfejs do pracy z kodami stron ASP. Możesz pobrać pełną, 30-dniową wersję tego programu z wymienionej wyżej witryny WWW.
Jak będziesz mógł się przekonać z treści tego rozdziału, największą korzyścią płynącą z pracy z NetObjects Fusion to kontrola, jaką sprawujesz nad układem elementów strony. Narzędzie to pozwala na umieszczanie elementów w dowolnej części strony, tak jak gdybyś projektował formularz w Visual Basic lub Access. NetObjects bazuje na niewidzialnych tabelach i grafikach generowanych w HTML w celu zapewnienia kompletnej swobody w rozmieszczaniu elementów na stronie.
Fusion posiada pięć głównych widoków: Witryna (Site), Strona (Page), Styl (Style), Zasoby (Assets) oraz Publikacja (Publish). Zmiany widoku dokonuje się klikając jedną z ikon z nazwami widoków, które znajdują się w pasku narzędziowym tuż pod menu.
Widok Witryna (Site) jest pokazany na rysunku 3.21. Jest to miejsce, od którego prawdopodobnie rozpoczniesz proces tworzenia, ponieważ właśnie w tym widoku możesz przeglądać strony znajdujące się w witrynie, dodawać je oraz usuwać. Strony są prezentowane w hierarchii logicznej. Jako że jest to widok logiczny, a nie fizyczny, nie możesz zapobiec połączeniom ze stronami spoza hierarchii. Widok ten wykorzystywany jest przez twórców do przemyślenia i zorganizowania logicznej struktury witryny WWW.
Rysunek 3.21. Widok Witryna programu NetObjects Fusion
Dodania strony do witryny dokonuje się przy użyciu klawisza Insert. Strona zostanie dodana jako potomna do dowolnej strony, która w tym czasie będzie zaznaczona. Na rysunku 3.21. zaznaczona jest strona Home, tak więc naciśnięcie klawisza Insert spowoduje dodanie właśnie do niej strony potomnej. Możesz usunąć stronę klikając ją prawym przyciskiem, a potem przyciskając klawisz Delete.
Każda strona posiada swoje właściwości, które wyświetlane są w zakładce Właściwości (Properties) w małym oknie dialogowym. Pokazane jest ono w prawym dolnym rogu rysunku 3.21.
W dialogu Właściwości (Properties) możesz zmienić nazwę bieżącej strony przez wpisanie jej do pola tekstowego Nazwa (Name). Jeśli naciśniesz przycisk Dostosowanie nazwy (Custom Names), powinieneś ujrzeć okno pokazane na rysunku 3.22.
Rysunek 3.22. Okno dialogowe Dostosowanie nazwy
Tworząc stronę w NetObjects, możesz dodać baner lub przycisk wyszukiwania. W oknie dialogowym dostosowania nazw możesz określić tekst, który będzie się pojawiał na tych elementach strony. Tutaj możesz również nadać plikowi odpowiednie rozszerzenie.
We właściwościach strony możesz umieścić również informacje związane z zarządzaniem twojej witryny. Możesz wybrać kolor tła strony używany w widoku hierarchii. Możesz również określić czy dana strona jest ukończona i czy powinna być publikowana. Dodatkowe pole tekstowe pozwala na dodanie komentarza do strony.
Dodatkowa zakładka w widoku witryny nosi nazwę Struktury (Outline), który pokazuje strukturę stron w postaci podobnej do tej w Eksploratorze Windows. Po lewej znajduje się lista stron pokazanych w ich poszczególnych położeniach, natomiast po prawej widoczne są wszystkie strony potomne strony bieżącej.
Tworząc stronę korzystasz z widoku Strona (Page). Aby znaleźć się w tym widoku, kliknij dwa razy na tej stronie w widoku witryny, z którą chcesz pracować. Zobacz rysunek 3.23.
Rysunek 3.23. Widok Strona programu Fusion
Będąc już w widoku strony, możesz dostać się do innych stron na kilka sposobów. Możesz skorzystać ze strzałek znajdujących się w lewym dolnym rogu, aby poruszać się między poziomami w hierarchii lub pomiędzy stronami znajdującymi się na ty samym poziomie. Strzałki pozwalają na poruszanie się w hierarchii pokazanej w widoku witryny.
Możesz również nacisnąć przycisk z czterema strzałkami, znajdujący się obok strzałek pojedynczych. Kiedy przycisk jest naciśnięty, małe okno wyszczególnia listę stron w formie hierarchii.
Możesz również poszukiwać stron naciskając przycisk Przejdź do (Go to) w prawym górnym rogu ekranu. Kiedy przycisk zostaje naciśnięty, program pyta cię o podanie części nazwy strony, którą chcesz znaleźć. Jeśli naciśniesz przycisk Ostatnia (Last), umieszczony w prawym górnym rogu ekranu, przeniesiesz się do strony, którą ostatnio otwierałeś.
Wzdłuż lewej strony okna umieszczono liczne elementy i składniki, które możesz włączyć do swojej strony. Większa ilość tych elementów dostępna jest w menu Widok (View), Paski narzędzi (Toolbars), gdzie wybrać można te paski, które aktualnie nie są prezentowane. Przyjrzymy się dokładnie niektórym z tych elementów nieco dalej w tym podrozdziale.
Sama strona ma wiele właściwości, które możesz ustawić. Jeśli chcesz im się przyjrzeć, kliknij daną stronę prawym przyciskiem myszy i wybierz Właściwości układu strony (Layout Properties). W zakładce Ogólne (General) możesz ustalić rozmiar strony i sposób wykonania jej układu.
Druga zakładka tego okna to Tło (Background). Tutaj ustalasz kolor tła strony, obrazy tła oraz jego dźwięki.
Kolejnym widokiem głównym programu Fusion jest Styl (Style), który odnosi się do domyślnych czcionek, kolorów, przycisków i grafik witryny, ich domyślnego wyglądu. Widok ten jest zaprezentowany na rysunku 3.24. Lewą stronę ekranu zajmuje długa lista stylów. Po prawej mamy podgląd wybranego stylu, który uzyskujemy przez kliknięcie go w lewym panelu. Kiedy już wybrałeś styl dla twojej witryny, kliknij przycisk Ustaw Styl (Set style).
Rysunek 3.24. Widok Styl programu Fusion
Możesz również edytować każdy element istniejącego stylu. Przypuśćmy na przykład, że chciałbyś użyć stylu Urban Legend, ale tło ma być inne. Modyfikacji tła stylu dokonasz wybierając Styl (Style), Edytuj element (Edit Element), oraz Tło (Background). Pokaże się wtedy okno dialogowe, takie jak na rysunku 3.25. Podobnie edytuje się inne elementy stylu.
Rysunek 3.25. Modyfikacja stylu
Jeśli nie chcesz korzystać z gotowych stylów, możesz stworzyć swój własny. Po prostu wybierz Styl (Style) i Nowy styl (New Style). Zostaniesz poproszony o podanie nazwy dla twojego stylu, a potem możesz już zacząć tworzyć jego elementy.
Kolejny widok główny Fusion to Zasoby (Assets), który wyszczególnia pliki, łącza, obiekty danych oraz zmienne mające związek z twoją witryną. Ten widok pokazany jest na rysunku 3.26.
Rysunek 3.26. Widok Zasoby programu Fusion
NetObjects Fusion obserwuje wszystkie pliki i łącza, które kiedykolwiek były związane ze stroną. Jeśli więc zdecydujesz się na dodanie łącza bądź obrazka do witryny, możesz wybrać je z listy plików i łącz, które już są jej częścią.
Możesz również użyć tego widoku do usuwania niepotrzebnych elementów z twojej witryny. Po prostu wybierz odpowiedni element i naciśnij klawisz Delete.
Możesz również korzystać z tego widoku podczas globalnego zastępowania zasobu. Załóżmy, że posiadasz łącze z witryną usytuowaną poza twoją własną, z którą łączysz się z różnych miejsc twojej witryny. Jeśli chcesz zmienić to łącze na jakieś nowe i zmiana ma być globalna, znajdź je na liście w zakładce Łącza (Links). Następnie kliknij dwukrotnie wybrane łącze i wpisz nowy adres URL.
Ostatni widok programu to Publikacja (Publish), gdzie określasz sposób i miejsce publikowania twojej witryny. Ten widok, pokazany jest na rysunku 3.27, prezentuje sposób fizycznego zapamiętywania witryny podczas jej publikowania. Na rysunku pliki są pokazane tak, jak byłyby umieszczone, gdyby były publikowane według typu. Możesz również wybrać publikację wszystkich plików w jednym katalogu lub w ich hierarchii logicznej. Aby zmienić sposób publikacji plików oraz ustawić inne właściwości, naciśnij przycisk Ustawienia (Setup). Powinieneś ujrzeć okno dialogowe pokazane na rysunku 3.28.
Rysunek 3.27. Widok Publikacja programu Fusion
Rysunek 3.28. Okno dialogowe Ustawienia publikacji
W pierwszej zakładce, Struktura katalogu (Directory Structure), możesz określić sposób fizycznego położenia twoich plików. Druga zakładka, Wyjście HTML (HTML Output), umożliwia zmianę generowanego układu strony oraz wykorzystywanego zestawu znaków. Zakładka trzecia, Położenie serwera (Server Location), daje możliwość określenia miejsca lub miejsc, gdzie będzie się znajdowała twoja witryna. Ta zakładka pokazana została na rysunku 3.29.
Rysunek 3.29. Zakładka Położenie serwera dialogu Ustawienia publikacji
Istnieją dwa typy publikacji: lokalna i zdalna. Każdą z nich możesz dodać klikając przycisk Dodaj (Add). Wybierając opcję Lokalna (Local) będziesz musiał po prostu podać katalog, w którym witryna będzie publikowana w twojej sieci. Jeśli wybierzesz opcję Zdalna (Remote), musisz określić położenie macierzystego komputera oddalonego, twoją nazwę użytkownika oraz hasło.
Czwarta zakładka okna dialogowego wyszczególnia listę składników, które będą publikowane wraz ze stroną, jeśli w ogóle takowe istnieją.
Kiedy już zakończysz dokonywanie ustawień, jesteś gotowy do publikacji twojej witryny. Dokonuje się tego klikając przycisk Publikuj (Publish). Po naciśnięciu przycisku wyświetlona zostanie lista miejsc publikacji witryny, które określiłeś w zakładce Położenie serwera (Server Location). Naciśnij OK, a twoja strona zostanie opublikowana.
Aby stworzyć nową stronę przy użyciu programu Fusion, wybierz z menu Plik (File) pozycję Nowa witryna (New Site). Jak to pokazano na rysunku 3.30, będziesz miał do wyboru trzy opcje. Wybierając opcję Pusta witryna (Blank Site), stworzona zostanie pojedyncza strona WWW; wybierając Według szablonu (From Template), zaprezentowany zostanie zbiór gotowych schematów witryn, które możesz wykorzystać jako szkielet twojej witryny; jeśli zdecydujesz się na opcję Z istniejącej witryny WWW (From Existing Web Site), program Fusion zaimportuje całą, wybraną witrynę WWW.
Rysunek 3.30. Tworzenie nowej strony
Jeśli kiedykolwiek pracowałeś z Visual Basic lub projektowałeś formularze w Microsoft Access, stosunkowo wygodnie będzie ci się pracowało ze stronami przy użyciu programu Fusion. Wszystkie elementy są kreślone na stronie. Kiedy już element się tam znajdzie, ustawiasz dla niego liczne właściwości w celu osiągnięcia pożądanego efektu. Jeśli na przykład chcesz dodać tekst do strony, wybierzesz ikonę Tekst (Text) znajdującą się w pasku narzędziowym widoku Strona (Page) po lewej stronie ekranu. Następnie wykreślisz element o odpowiednim rozmiarze. Rysunek 3.31. pokazuje stronę z nakreślonym elementem tekstowym.
Rysunek 3.31. Strona z wstawionym polem tekstowym
Teraz, kiedy element jest wykreślony na stronie, możesz ustawić jego właściwości. Po pierwsze, możesz wpisać tekst, który ma się pojawiać w elemencie. Następnie określasz styl tekstu, jego tło i wiele innych właściwości przy użyciu odpowiedniego okna dialogowego. Podobne czynności wykonuje się przy dodawaniu do strony innych elementów.
Kolejnym narzędziem NetObjects jest ScriptBuilder. To nie tylko wspaniałe narzędzie do tworzenia stron ASP. Dzięki niemu można również tworzyć skrypty wykonywane po stronie klienta oraz czysty kod HTML. W tym podrozdziale zwrócimy uwagę na tworzenie stron ASP przy użyciu NetObjects ScriptBuilder. Zobaczysz również, jak można wykorzystać funkcje tego narzędzia do ułatwienia dodawania skryptów oraz ich zatwierdzania.
Okno główne programu ScriptBuilder składa się z dwóch paneli: lewego i prawego. Lewy panel zazwyczaj zawiera listę działań lub opcji, zależnie od wybranej zakładki. Panel prawy pokazuje stronę ASP lub HTML, nad którą pracujesz.
Aby otworzyć stronę w prawym panelu, wybierz Plik (File), Otwórz (Open). Okno dialogowe, które się ukaże, pozwoli ci na znalezienie pliku, który chcesz otworzyć. Kiedy chcesz stworzyć nowy plik, wybierz Plik (File), Nowy (New). Wyświetlony zostanie dialog, który pokazano na rysunku 3.32.
Rysunek 3.32. Dialog Nowy Plik programu ScriptBuilder
Następnie możesz wybrać jeden z przedstawionych w oknie szablonów, reprezentujących typ strony, jaką chcesz stworzyć. Wybrany szablon wygeneruje podstawowe znaczniki dla wybranego przez ciebie typu strony. Jeśli zdecydowałeś się przykładowo na utworzenie strony ASP, szablon stworzy stronę zawierającą znaczniki języka podstawowego, HTML, nagłówka (head), oraz treści (body).
Możesz również modyfikować te szablony, w ten sposób za każdym razem, kiedy stworzysz nową stronę przy użyciu szablonu, będzie ona zawierała kod potrzebny dla tego typu pliku. Załóżmy na przykład, że posiadasz plik biblioteki, który zawsze chcesz dołączać do twoich stron ASP. Aby to zrobić, za każdym razem musisz dodawać do kodu wiersz Include dla tego pliku. Zmodyfikuj szablon strony ASP włączając do niego odpowiedni kod. W celu dokonania zmian we szablonie, wyświetl zawartość plików położonych w folderze Templates\Standard katalogu głównego ScriptBuilder.
Możesz również tworzyć swoje własne szablony. Być może często potrzebujesz strony ASP mającej kod, który wykreśla graf w oparciu o dane pochodzące z zestawu rekordów - możesz stworzyć taki szablon zawierający wspólny kod. Aby wykonać taki szablon, po prostu stwórz w zwykły sposób stronę ASP lub HTML, a następnie umieść ją w folderze Templates\Custom. Te pliki dostępne są w menu Plik (File), Nowy (New), w zakładce Własne (Custom).
W lewym panelu możesz wybrać zakładkę związaną z działaniami bądź opcjami, które wykorzystujesz podczas pracy ze stroną. Wybierając zakładkę Odwołanie (Reference), ujrzysz widok pokazany na rysunku 3.33. To, co tam widać to bogata biblioteka języków i technologii, które możesz wykorzystać podczas pracy z programem ScriptBuilder.
Rysunek 3.33. Widok Odwołanie w lewym panelu okna
Przypis
Jeśli nie widać listy rozwijanej, gdzie mógłbyś wpisać nazwę do wyszukania, kliknij małą strzałkę w górnym prawym rogu lewego panelu.
Większość odwołań pochodzi z zasobów online, co ma swoje plusy i minusy. Musisz być połączony z siecią, aby ujrzeć niektóre odwołania i punkty odwołań do stron, które już nie istnieją. Korzystne jest jednak to, że zawartość listy jest cały czas uaktualniana, ponieważ pochodzi ze znaczących obszarów odwołań firm takich jak Microsoft czy Netscape.
Możesz również użyć odwołania w celu wstawienia znaczników i kodu wprost do twojej strony. Na przykład chcesz wstawić listę numerowaną HTML. Mógłbyś wybrać znacznik w odniesieniu HTML. Następnie jeśli klikniesz prawym przyciskiem odpowiednią pozycję i wybierzesz Wstaw (Insert), znaczniki listy numerowanej pojawią się w prawym panelu okna w miejscu, gdzie znajduje się kursor.
Możesz też uzupełnić bibliotekę o nowe odwołania. Jeśli klikniesz prawym przyciskiem w dowolnym miejscu zakładki odwołań, powinieneś zobaczyć opcję Ustawienia (Settings). Kliknij ten punkt, a będziesz mógł przejrzeć wszystkie dostępne książki biblioteki. Ustawień innych opcji zakładki odwołań dokonasz wybierając Opcje (Options) z menu Narzędzia (Tools).
Jeśli wybierzesz zakładkę Odwzorowanie (Map), zobaczysz widok, który prezentuje rysunek 3.34. Odwzorowanie odnosi się tutaj do reprezentacji dokumentu, z którym pracujesz. Odwzorowane są znaczniki i składniki, które znalazły się w dokumencie, dzięki czemu możesz szybko znaleźć te miejsca w kodzie, gdzie zostały one użyte. Gdybyś chciał odszukać miejsca, w których użyto znacznika <BR>, kliknij dwa razy odpowiednią pozycję lewego panelu okna, a wiersz zawierający ten znacznik zostanie wyróżniony.
Rysunek 3.34. Widok Odwzorowanie programu ScriptBuilder
Zakładka Pulpit (Desktop), pokazana na rysunku 3.35, pozwala na poszukiwanie w systemie plików, które chcesz wykorzystać podczas pracy z witryną. Jeśli klikniesz dwa razy dowolny plik, zostanie on otwarty w prawym panelu okna. Jeśli klikniesz prawym przyciskiem myszy obszar Pulpitu, możesz utworzyć folder oraz przejrzeć właściwości pliku.
Rysunek 3.35. Widok Pulpit programu ScriptBuilder
Jednym z najużyteczniejszych składników programu ScriptBuilder jest biblioteka skryptów. Zakładka Biblioteka skryptów (Script Library) pokazana została na rysunku 3.36. Pozwala ona na proste wstawianie gotowych bloków kodu do twojej strony WWW. ScriptBuilder zawiera wiele skryptów strony klienta i strony serwera, które możesz włączyć do twoich stron ASP i HTML.
Rysunek 3.36. Widok Biblioteka skryptów programu ScriptBuilder
Lista biblioteki skryptów może być sortowana po dowolnej kolumnie, którą wybierzesz klikając jej nagłówek. Kolumny przedstawiają nazwę skryptu, użyty podczas jego tworzenia język lub technologię, jego opis oraz wersję programu Navigator lub Explorer obsługującego skrypt.
Aby wstawić skrypt do twojej strony, umieść kursor w tym miejscu, gdzie ma się znaleźć oraz kliknij dwukrotnie wybrany z biblioteki skrypt. Jeśli na przykład chcesz skorzystać z procedury odczytującej znacznik kontekstu klienta (cookie), najpierw umieść kursor w odpowiednim miejscu strony ASP, gdzie procedura ma występować. Następnie kliknij dwukrotnie w lewym panelu prezentującym zbiór skryptów procedurę o nazwie ReadCookie. Od tej chwili stanie się ona częścią twojego kodu.
Te wbudowane skrypty są całkowicie konfigurowalne i podatne na zmiany. Aby zmienić właściwości skryptu, kliknij go dwukrotnie i wybierz Właściwości (Properties). Ujrzysz dialog pokazany na rysunku 3.37. Tutaj możesz zmienić nazwę i opis skryptu. Możesz również wybrać jego język bądź technologię, jak również wersję przeglądarki Navigator lub Explorer, która będzie obsługiwała skrypt.
Rysunek 3.37. Dialog Właściwości skryptu
Modyfikacja kodu skryptu możliwa jest w zakładce Kod (Code). Okno powiększy się tak, aby pokazać kod danej procedury (Rysunek 3.38.). Właśnie tutaj możesz wprowadzić pożądane zmiany w treści dostępnych w bibliotece skryptów. Na przykład osobiście wolę, żeby procedury ASP (do nich należy ta pokazana na rysunku 3.38.) miały od razu w swej treści znaczniki bloku kodu ASP <% oraz %>. Mogę je tam umieścić modyfikując skrypt w tej zakładce. Kiedy zamkniesz okno kodu, program poprosi cię o potwierdzenie lub odrzucenie dokonanych zmian.
Rysunek 3.38. Okno kodu edytowanego skryptu
Moją ulubioną cechą programu jest możliwość dodawania do biblioteki własnych skryptów. Zauważyłem, że wiele krótkich bloków kodu, z których stale korzystam, nie znalazło się w procedurach. Aby nie przepisywać ciągle tych samych fragmentów kodu, można je umieścić w bibliotece.
Możesz dodać skrypt do biblioteki na dwa sposoby. Pierwszym z nich jest kliknięcie prawym przyciskiem w obszarze okna biblioteki i wybranie punktu Dodaj (Add). Ujrzysz wtedy puste okno kodu, takie samo, jak w wypadku edycji istniejącego skryptu. Tam wprowadzisz nowy kod skryptu. Po ukończeniu przejdź do zakładki Opis (Description). Tutaj wpiszesz nazwę nowego skryptu oraz jego krótki opis, wraz z wyszczególnieniem zastosowanego języka lub technologii i wersji obsługującej ten skrypt przeglądarki Navigator lub Explorer.
Drugim sposobem dodania procedury do biblioteki skryptu jest odzyskanie odpowiedniego fragmentu kodu z istniejącej już strony. Możesz to zrobić wyróżniając tekst w wybranym dokumencie, a następnie klikając prawym przyciskiem zaznaczony tekst i wybierając opcję Dodaj do biblioteki skryptów (Add to Script Library).
Powiedzmy, że w wielu stronach ASP łączysz się z bazą danych w ten sam sposób i chcesz, aby ten kod łączenia stał się częścią biblioteki skryptów. Wyróżnij ten fragment kodu przy użyciu myszy, a następnie kliknij prawym przyciskiem. Okno, które się wtedy pojawi, pokazane jest na rysunku 3.39.
Rysunek 3.39. Dodawanie kodu do biblioteki skryptów
Jeśli wybierzesz opcję Dodaj do biblioteki skryptów (Add to Script Library), kod jest dodawany jako pozycja do biblioteki. Ponownie wpisujesz wszystkie niezbędne informacje dotyczące nowego skryptu. Kiedy skończysz, kod staje się częścią biblioteki i może być wstawiany do tworzonych stron.
Ostatnią zakładką lewego panelu głównego okna programu ScriptBuilder jest Galeria składników (Component Gallery). Zawartość zakładki prezentuje rysunek 3.40. Galeria ułatwia pracę z programowalnymi, gotowymi do wstawienia składnikami. Możesz włączyć dany składnik do tworzonej strony ASP lub HTML, przeciągając go w to miejsce, w którym ma być inicjalizowany.
Rysunek 3.40. Galeria składników programu ScriptBuilder
Możesz określić właściwości, metody oraz zdarzenia związane z danym składnikiem, klikając go prawym przyciskiem myszy, a następnie wybierając odpowiedni punkt. Szablon właściwości, metody bądź zdarzenia jest wtedy dodawany do twojej strony. Możesz również dodać własny składnik do środowiska programu, klikając prawym przyciskiem w dowolnym miejscu Galerii składników oraz wybierając opcję Dodaj do galerii (Add to Gallery).
ScriptBuilder posiada wiele narzędzi wspomagających pisanie kodu i pracę z nim. ScriptBuilder wyświetla wiersze kodu w różnych kolorach, co powoduje, że kod jest bardziej czytelny i rozpoznawalny. Aby jednak z tej cechy programu skorzystać, najpierw musi on wiedzieć, z jakim językiem pracujesz. Tak więc jedną z pierwszych rzeczy, którą zrobisz będzie ustawienie domyślnego języka, który będzie wyróżniany. Wybierz z menu Widok (View) opcję Wyróżniony język (Highlighted Language), a następnie przykładowo VBScript, co pokazano na rysunku 3.41.
Rysunek 3.41. Ustawianie domyślnego języka do wyróżniania
Kiedy język zostanie określony, kod w odpowiedni sposób wyróżniany kolorami, co czyni go łatwiejszym do odczytu. Poza tym, skoro ScriptBuilder już wie, jakiego języka używasz, może automatycznie pomagać ci w uzupełnianiu bloków kodu. Jeśli na przykład napiszesz poniższy kod wraz ze spacją:
If
program uzupełni ten blok:
If expression Then
End If
Wyróżni nawet frazę expression, będziesz mógł więc natychmiast wpisać w to miejsce wybrane wyrażenie. Jeśli wpisałbyś ten kod wraz ze spacją:
Select
ScriptBuilder zbuduje następujący blok kodu, wyróżniając w nim słowo expression
Select Case expression
Case value
Case Else
End Select
Możesz również zmodyfikować funkcję automatycznego tworzenia skryptów tak, aby inne kody pojawiały się przy wyborze poszczególnych instrukcji. Przykładowo możesz chcieć, aby instrukcja If zawsze była uzupełniana instrukcją Else. Takiego ustawienia możesz dokonać wybierając Narzędzia (Tools) oraz Automatyczne tworzenie skryptów (AutoScripting). Zobaczysz wtedy kompletną listę dostępnych opcji automatycznego tworzenia skryptów (zobacz rysunek 3.42).
Rysunek 3.42. Konfiguracja funkcji Automatycznego tworzenia skryptów
Zauważ, że lista zawiera informacje o używanych językach. Przewijasz listę w poszukiwaniu instrukcji If dla języka VBScript. Następnie kliknij Edytuj (Edit). Wyświetli się ekran pokazany na rysunku 3.43. Tutaj możesz uzupełnić instrukcję If instrukcją Else lub dokonać jakiejkolwiek innej modyfikacji. Zwróć uwagę, że słowo expression jest wyróżnione. Kiedy wpisałeś If w kodzie strony, właśnie słowo expression było zaznaczone.
Rysunek 3.43. Edycja kodu w Automatycznym tworzeniu skryptów
Możesz również dodać swoje własne bloki kodu poprzez funkcję Automatycznego tworzenia skryptów, naciskając przycisk Nowy (New) w oknie dialogowym. Ukaże się ten sam dialog, co w wypadku edycji. Musisz tutaj wpisać słowo kluczowe, instrukcję, po pojawieniu się której ma wystąpić odpowiedni kod. Oprócz tego określasz język programowania dla tego kodu oraz oczywiście sam kod.
Możesz również użyć tej funkcji programu, aby zastosować skróconą metodę tworzenia kodu. Jak się dowiesz z kolejnego rozdziału, często na przykład będziesz włączał do kodu wiersz Option Explicit, aby ułatwić usuwanie błędów. Możesz zapewnić sobie skrót dla tej instrukcji dzięki stworzeniu odpowiedniej pozycji w oknie Automatycznego tworzenia skryptów. Najpierw wpisz następującą kluczową frazę:
ooo
Poniżej, w polu Wstawiany tekst (Text to Insert), wpisz:
Option Explicit
oraz nowy wiersz. Teraz, kiedy podczas tworzenia kodu wprowadzisz ooo, pojawi się na ekranie instrukcja Option Explicit, a po niej nowy wiersz.
W menu Skrypt (Script), a następnie pozycji Menu dostępna jest opcja Blok serwera (Server Block), której wybór powoduje wpisanie następującego kodu:
<%
%>
Tworzony jest więc blok serwera. Kiedy wybierzesz menu Narzędzia (Tools), Opcje (Options) oraz przejdziesz do zakładki Kod (Code), ukaże się ekran pokazany na rysunku 3.44. W tej zakładce możesz dokonać zmiany używanej składni bloku kodu przez ustawienie jej w polu o nazwie Typ znacznika (Tag Type).
Rysunek 3.44. Opcje ustawień kodu
W tym samym dialogu znajduje się punkt Bloki funkcji (Function Blocks). W odpowiednim polu wpisujesz tekst, który ma pojawiać się w bloku komentarza wstawianej procedury. Jeśli chcesz, aby pojawiało się twoje imię, wpisz je w pole Nazwa użytkownika (Username). Następnie możesz zaznaczyć, że twoje imię wraz z aktualną datą chcesz włączyć do nagłówka komentarza funkcji.
Ta informacja jest wykorzystywana w oknie dialogowym pokazanym na rysunku 3.45, które pojawi się kiedy wybierzesz opcję Bloki funkcji (Function Blocks) z menu Skrypt (Script).
Rysunek 3.45. Wstawianie bloku funkcji
Wpisujesz nazwę funkcji, a następnie opis jej działania. Kiedy naciśniesz OK, wprowadzone tutaj dane są łączone z danymi wprowadzonymi w dialogu Opcji i wytwarzany jest następujący, przykładowy blok kodu:
SampleFunction ()
Tutaj wpisz szczegóły dotyczące twojej funkcji
Autor: Greg Buczek
Data utworzenia: 8/4/99
Function SampleFunction ()
End Function
Jak więc widzisz, ScriptBuilder nie jest narzędziem wizualnego projektowania stron. Możesz w prosty sposób uruchomić podgląd strony, ale nie możesz umieszczać na niej elementów metodą przeciągania i upuszczania. W programie ScriptBuilder pracujesz jedynie z kodem oraz czystym HTML.
Pasek narzędziowy Znaczniki HTML (HTML Tags) pomaga jednak wstawiać znaczniki. Pasek ten pokazany jest na rysunku 3.46. Po naciśnięciu wybranego przycisku, odpowiedni znacznik jest wstawiany do twojego dokumentu w miejscu, gdzie znajduje się kursor, jeśli więc naciśniesz przycisk B, znaczniki <B> oraz </B> staną się częścią dokumentu. Jeśli najpierw wyróżnisz tekst do pogrubienia, a dopiero potem wybierzesz przycisk z paska, znaczniki będą umieszczone wokoło zaznaczonego tekstu.
Rysunek 3.46. Pasek narzędziowy Znaczniki HTML
Naciśnięcie jednego z przycisków wyrównania tekstu powoduje wytworzenie odpowiednich znaczników akapitu. Na przykład naciśnięcie przycisku wyrównania do lewej, tworzony jest następujący HTML:
<P ALIGN=LEFT></P>
Po ikonach wyrównania w pasku umieszczono ikony wypunktowania, numerowania, akapitu, wiersza podziału oraz linii poziomej, których naciśnięcie również spowoduje pojawienie się odpowiedniego znacznika.
Przyciski od H1 do H6 wytwarzają odpowiadające im znaczniki nagłówka, tak więc naciśnięcie przycisku H1 wywoła następujący HTML:
<H1></H1>
Kursor będzie znajdował się pomiędzy znacznikami, tak więc możesz od razu zacząć wpisywać tekst.
Ostatnie dwa przyciski związane są odpowiednio ze znacznikami obrazu i łącza. Naciśnięcie tych przycisków spowoduje pojawienie się odpowiedniego dialogu, w którym podasz konieczne informacje. Kiedy wybierzesz ikonę Obraz (Image), zobaczysz okno pokazane na rysunku 3.47.
Rysunek 3.47. Wstawianie znacznika obrazu
Wpisujesz w nim ścieżkę dostępu do obrazu, tekst pojawiający się wraz z obrazkiem lub zamiast niego, sposób wyrównania tekstu, granice, rozmiar obrazu oraz rozstaw. Znacznik obrazu tworzony jest na podstawie wprowadzonych zapisów.
Kiedy naciśniesz przycisk Łącze (Link), ujrzysz dialog pokazany na rysunku 3.48. Uzupełniasz go lokalizacją, do której łącze będzie odsyłało, tekstem pojawiającym się na stronie jako łącze oraz, opcjonalnie, nazwę łącza i jego cel. Pole tekstowe Cel (Target) odnosi się do przeglądarki lub ramki, do której wysyłana jest strona. Kiedy wprowadzisz już informacje i naciśniesz OK, utworzony zostanie odpowiedni znacznik.
Rysunek 3.48. Wstawianie znacznika łącza
ScriptBuilder posiada również pasek narzędziowy elementów formularza (rysunek 3.49.). Użycie każdego ze znajdujących się w nim przycisków spowoduje wyświetlenie dialogu, w który należy wpisać odpowiednie informacje potrzebne do stworzenia pożądanego znacznika. Pierwszy przycisk służy do tworzenia samego formularza. Kiedy go naciśniesz, dialog zapyta cię o nazwę formularza, okno wyjściowej przeglądarki lub ramki, typ kodowania oraz położenie strony, do której należy odesłać użytkownika po wypełnieniu i wysłaniu formularza. Określasz również metodę przesyłania formularza, GET lub POST. Różnice pomiędzy tymi metodami omówione zostały w rozdziale 5.
Rysunek 3.49. Pasek narzędziowy Elementy formularza
Rezultatem wypełnienia okna dialogowego jest stworzenie znacznika formularza w miejscu kursora, który może być podobny do tego:
<FORM NAME="MoreInfoForm" TARGET="New"
ACTION="https://www.whatever.com/page.asp" METHOD="post"
ENCODE="application/x-www-form-urlencoded">
</FORM>
Przy wyborze przycisków poświęconych elementom strony zostaniesz poproszony o podanie nieco innych informacji, zależnych od typu elementu, który wybrałeś. Przykładowo przy wyborze pola tekstowego będziesz musiał podać nazwę pola, jego wartość, długość oraz czy jest to pole z hasłem. Rezultatem może być następujący znacznik:
<INPUT TYPE="text" SIZE=20 MAXLENGHT=50 NAME="FirstName">
Jeśli jednak naciśniesz przycisk obszaru tekstowego, zostaniesz poproszony o określenie nazwy pola, domyślnego tekstu, jego rozmiaru oraz sposobu jego obramowania.
ScriptBuilder posiada również parę narzędzi wspierających sprawdzanie napisanego przez ciebie kodu. Są to: Korektor składni (Syntax Checker) i Kontroler skryptu (Script Inspector).
Jednym z błędów, które często zdarzają mi się podczas tworzenia stron ASP, jest opuszczanie nawiasów, jak w wierszu kodu poniżej:
If isempty(Request.Form(" OK") then
Ładuję stronę na serwer myśląc, że wszystko jest w porządku, a kiedy ją uruchamiam okazuje się, że wystąpił błąd w wierszu kodu. Wiem, w czym leży problem, ale muszę najpierw edytować tą stronę, a następnie ponownie umieścić ją na serwerze.
Korektor składni jest w tym względzie bardzo pomocny. Nie znajdzie on błędów związanych z użyciem niewłaściwej metody czy właściwości obiektu i pewnie nie rozpozna błędów logicznych, ale błędy składni, podobne do tego zaprezentowanego powyżej, zostaną przez program odnalezione.
Powiedzmy, że twój blok kodu wygląda następująco:
<%
if isempty(Session("StudentID")) then
Response.Redirect " /index.asp"
end if
if isempty(Request.QueryString("CourseID") then
Response.Redirect " /html/student_menu.asp"
end if
%>
Jesteś już gotów do wysłania twojej strony do serwera, ale przedtem chcesz sprawdzić, czy nie ma w niej jakichś błędów składni. Z menu Narzędzia (Tools) wybierz opcję Korektor składni (Syntax Checker). W rezultacie tego wyboru w oknie programu ScriptBuilder pojawi się dodatkowy panel, który pokazany jest na rysunku 3.50.
Rysunek 3.50. Rezultat uruchomienia Korektora składni
Zwróć uwagę na panel, który znajduje się a dole okna. Wyszczególnia on błąd w stronie w szóstym jej wierszu. Panel ten pokaże listę wszystkich błędów składni znalezionych w stronie. Jeśli klikniesz dwa razy wiadomość o błędzie, program przeniesie cię do tego wiersza, który ten błąd wywołał.
Korektor składni wyszuka wiele błędów podobnych do tego. Poinformuje cię o tym, że użyłeś instrukcji If bez End If lub instrukcji For bez Next. Zauważyłem jednak, że czasami korektor widzi błędy składni tam, gdzie ich nie ma. Weźmy następując fragment kodu, który w stronie ASP jest pojedynczym wierszem kodu:
<A HREF=" /html/lecturerouter.asp?LectureID=
<% Response.write RSLectures("LectureID") %>">
<IMG HEIGHT=28 WIDTH=35 SRC="<% Response.Write iconpath %>"
BORDER=0 ></A>
Ta linia spowoduje wystąpienie błędu, chociaż błędu nie ma. Taką reakcję programu ScriptBuilder wywoła pojawienie się kodu ASP wraz z HTML.
Innym narzędziem weryfikacji jest Kontroler skryptu. Przeglądnie on twój HTML, kod strony serwera i strony klienta i poda wersje przeglądarek Navigator i Explorer, które będą mogły rozpoznać twój kod.
Aby skorzystać z tego narzędzia, otwórz stronę, którą chcesz przetestować i wybierz opcję Kontroler skryptu (Script Inspector) z menu Narzędzia (Tools). W wyniku tego na dole okna ukażą się panele, które pokazane zostały na rysunku 3.51. Jeśli drugi panel nie został wyświetlony, kliknij prawym przyciskiem w obszarze panelu widocznego i wybierz Pokaż szczegóły (Show Details).
Rysunek 3.51. Wynik uruchomienia Kontrolera skryptu
Zauważ, że Kontroler skryptu zgłosił znalezienie znacznika VBScript strony klienta, który nie jest obsługiwany przez większość obecnych wersji przeglądarek Navigatora. Jeśli klikniesz podwójnie wiadomość o błędzie wyświetloną w najniżej położonym panelu, program przeniesie cię do tego wiersza kodu, który jest źródłem wystąpienia problemu.
Kolejnym pomocnym narzędziem, którego możesz użyć do tworzenia stron ASP jest Microsoft Visual InterDev 6.0. Ponieważ jest o produktem firmy Microsoft, łączą go bliskie relacje z Internetowym serwerem informacyjnym (IIS) oraz systemem NT. Z perspektywy twórcy stron najważniejszymi cechami tego programu są: wyróżnianie wizualne oraz automatyczne zakańczanie kodu.
Rysunek 3.52. pokazuje stronę ASP otwartą przy użyciu Visual InterDev. Program, dzięki zastosowaniu kolorowych czcionek, kolorów tła oraz pogrubienia tekstu, czyni stronę bardzo czytelną. W prosty sposób można wtedy dostrzec, gdzie się zaczyna, a gdzie kończy blok kodu; instrukcje w blokach kodu są pogrubione.
Rysunek 3.52. Okno programu Visual InterDev 6.0
Zauważ, że na dole okna znajdują się trzy zakładki odnoszące się do strony: Projekt (Design), Źródło (Source) i Szybki podgląd (Quick View). Niestety jeśli uruchomisz stronę zawierającą kod ASP wraz z HTML - czyli prawie każdą - zakładka Projekt (Design) nie zadziała; natomiast zakładka Szybki podgląd (Quick View) nie będzie funkcjonowała, ponieważ program nie przetwarza kodu strony serwera. Tak więc jedynym widokiem, który mamy do dyspozycji przez cały czas jest Źródło (Source).
Inną nadzwyczaj pomocną funkcją Visual InterDev są listy zakańczania kodu, generowane w chwili użycia kropki w składni kodu dla jednego z wbudowanych obiektów ASP. Na przykład jednym z najważniejszych obiektów ASP jest Response. Używany jest do komunikowania się z przeglądarką, która wywołała twoją stronę ASP. Obiekt ma liczne właściwości i metody, które pozwalają na podjęcie działań. Jeżeli w oknie Visual InterDev wpiszesz następujący kod:
Response.
pojawi się lista pokazana na rysunku 3.53. Będzie ona zawierała wszystkie właściwości i metody obiektu Response. Możesz zacząć wpisywać wybraną metodę albo po prostu przewinąć listę i wybrać z niej odpowiedni punkt.
Rysunek 3.53. Lista rozwijana zakończenia kodu dla obiektu Response
Bez względu na to, na które narzędzie się zdecydujesz, pamiętaj, że to tylko narzędzie - jeśli użyjesz właściwego, ułatwisz sobie pracę. Powinieneś przeanalizować ich pełne możliwości, ponieważ większość najciekawszych funkcji często bywa zagrzebana na samym dnie menu. Postaraj się nie zadowalać jednym tylko produktem. Nowe produkty i programy usługowe przez cały czas pojawiają się na rynku, a ich zastosowanie często zaoszczędzi ci mnóstwa czasu.
|
