Rozdział 5. Połączenia i nawigacja

Ten rozdział omawia podstawy łączenia stron Twojej witryny w całość. Jeśli nigdy jeszcze nie zdarzyło Ci się zdefiniować połączenia, ucieszy Cię na pewno informacja, że jest bardzo proste. Ci wszyscy, którzy potrafią tworzyć połączenia, także znajdą tu coś interesującego, niech więc nie pomijają tego rozdziału. Tworzenie połączeń to coś więcej niż tylko wpisanie adresu URL. Jeśli Twoim narzędziem tworzenia stron WWW jest Dreamweaver, tym bardziej należy nauczyć się obsługi połączeń.

Ogólnie rzecz biorąc, połączenie oglądane od strony kodu to zestaw instrukcji określających, co powinno pojawić się w następnej kolejności na ekranie - czy ma to być inny dokument składowy Twojej witryny, czy też strona WWW z drugiego końca świata lub z rodzinnego miasta. Instrukcje te mają różną postać, która dla niewtajemniczonych może wydawać się tajemniczym szyfrem.

W rozdziale znajdziesz także ćwiczenia, które pomogą Ci poznać narzędzia nawigacji programu Dreamweaver. W wersji 4 programu pojawiły się pewne nowości - nowe opcje, takie jak na przykład Insert Navigation Bar, pozwalają tworzyć paski nawigacji oraz przyciski.

Oto lista tematów poruszanych w tym rozdziale:

• Rodzaje ścieżek dostępu

• Tworzenie połączeń tekstowych

• Kolory i style połączeń

• Zakotwiczenia o zdefiniowanych nazwach

• Paski nawigacji

• Menu połączeń

Rodzaje ścieżek dostępu

Zrozumienie relacji między adresem lokalnym dokumentu, w którym połączenie jest tworzone a adresem dokumentu, do którego ono prowadzi, jest szalenie istotne z punktu widzenia zrozumienia procesu definiowania połączenia. Relację tę odzwierciedla ścieżka dostępu. W tym rozdziale omówiona zostania podstawowa struktura ścieżki dostępu, natomiast w rozdziale 13., „Okno Site i organizacja plików” poruszone zostaną kwestie definiowania witryny i obsługi plików w programie Dreamweaver.

Co to jest ścieżka dostępu?

Wyobraź sobie, że szef prosi Cię o akta znajdujące się w innym biurze. Czeka Cię zejście do holu, otwarcie drzwi i wyciągnięcie akt z segregatora, w którym są wpięte. Powstaje ścieżka tej podróży. Ilekroć szef poprosi o dokument z tamtego biura, musisz powtórzyć spacer korzystając z tej samej ścieżki. Ścieżka komputerowa nie różni się wiele od Twojej ścieżki. W witrynie sieciowej stwarzasz użytkownikom możliwość pobierania plików zgromadzonych na serwerze sieciowym. Potraktuj ten serwer sieciowy jako segregator, w którym trzymasz informacje udostępniane na stronach Twojej witryny. Połączeniami mogłyby być obrazy, tekst lub współrzędne fragmentów większych obrazów. Kliknięcie połączenia powoduje przesłanie do serwera żądania udostępnienia innego pliku niż aktualnie wyświetlany w przeglądarce.

Zrozumienie struktury ścieżki dostępu oznacza, że wiesz jak sformułować żądanie pliku. Zdarzyło Ci się prawdopodobnie (bo komu się nie zdarzyło?), że kliknięcie połączenia zwracało błąd lub nic. Było tak prawdopodobnie dlatego, że umieszczona w kodzie ścieżka dostępu była nieprawidłowa lub prowadziła do nieistniejącego pliku. Gdybyś bowiem otrzymał instrukcje, aby wziąć akta z biura na trzynastym piętrze w biurowcu, który nie ma tylu pięter, zwróciłbyś prawdopodobnie podobny komunikat o błędzie: „Hej, takiego biura nie ma!”.

Zrozumienie ścieżek dostępu

Dreamweaver pozwala wybrać typ adresowania. Jeśli więc nie wiesz, jaka jest różnica między bezwzględnymi i względnymi ścieżkami dostępu, usiądź i poczytaj.

Ścieżka bezwzględna to po prostu pełny adres URL. Zawiera więc nie tylko nazwę żądanego pliku, lecz także nazwę serwera WWW, na którym plik rezyduje. Ma także przedrostek http, przez wszystkich znany i kochany. Oto przykład ścieżki bezwzględnej:

http://www.greatsites.com/terrific/wonderful.html

Jeśli na swoich stronach będziesz umieszczał połączenia, możesz oczywiście korzystać z adresów bezwzględnych URL - dokument zostanie pobrany. Jest jednak pewien problem. Stosowanie tego typu adresowania powoduje, że przy każdym wejściu w połączenie użytkownik jest niezmiennie kierowany do „drzwi frontowych” witryny sieciowej. Jest to znaczne obciążenie dla serwera i powoduje wydłużenie czasu ładowania strony. Z tego właśnie względu zaleca się stosowanie ścieżek względnych.

Są dwa rodzaje adresów względnych: definiowane względem dokumentu oraz definiowane względem foldera nadrzędnego. Zaczniemy od omówienia pierwszego typu.

Ścieżki dostępu definiowane względem dokumentu

Ścieżki dostępu definiowane względem dokumentu określają relację jednego dokumentu względem drugiego. Taka ścieżka względna nie rozpoczyna się od foldera nadrzędnego, lecz od nazwy bieżącego dokumentu, po której pojawia się ciąg katalogów prowadzący do drugiego pliku. Tak więc, aby zdefiniować ścieżkę dostępu względem dokumentu, wystarczy wskazać hierarchię folderów startując od bieżącego dokumentu.

Początek ramki

Podpowiedź

Dreamweaver umożliwia bardzo prostą obsługę połączeń definiowanych względem dokumentu. Kliknij ikonę Browse for File w oknie inspektora Property, aby wybrać plik, do którego chcesz utworzyć połączenie.

Koniec ramki

Jeśli chcesz przetestować swoje strony WWW lokalnie w przeglądarce, musisz korzystać ze ścieżek definiowanych względem dokumentu. Dlaczego? Ponieważ większość przeglądarek nie ma możliwości stwierdzenia, z jakiego foldera lokalnego korzystasz, tak więc przeglądarka może podążać tylko ścieżką zdefiniowaną względem aktualnie wyświetlanego dokumentu. Domyślnie, Dreamweaver zapisuje Twoje pliki stosując adresowanie względne.

Początek ramki

Uwaga

Jeśli przed wstawieniem obrazu lub utworzeniem połączenia nie zapiszesz pliku, Dreamweaver nie ma odniesienia, z którego mógłby korzystać, aby zlokalizować dokument, nad którym aktualnie pracujesz. Z tego powodu program wyświetli Ci komunikat przypominający o konieczności zapisania pliku. Jeśli tego nie zrobisz, Dreamweaver utworzy połączenie specyficzne dla Twojego komputera. Po umieszczeniu dokumentu na serwerze, takie połączenie nie będzie działać. Niech więc zapisywanie nowych dokumentów we właściwym katalogu, natychmiast po ich utworzeniu, stanie się Twoim zwyczajem.

Koniec ramki

Oto przykład adresowania względem dokumentu:

../poerty/bookshelf.html

Wyobraź sobie, że kropki to winda, którą możesz podjechać w górę lub w dół, aby pobrać dokumenty z innych biur. Jeśli połączenie ma prowadzić do plików na innym serwerze, nie można stosować adresowania względem dokumentu. Jeśli więc chcesz skierować użytkowników do artykułu na stronie cnn.com lub na aukcję na stronie ebay.com, musisz podać bezwzględny adres URL (na przykład tak: http://www.ebay.com).

Ścieżki względne definiowane względem foldera nadrzędnego

Jeśli pracujesz nad ogromną witryną korzystającą z kilku serwerów lub jeśli na Twoim serwerze rezyduje kilka różnych witryn, mógłbyś zastanowić się nad zdefiniowaniem ścieżek względem foldera nadrzędnego. Ten typ adresowania należałoby Ci doradzić, gdy często przemieszczasz swoje pliki.

O ile adresowanie względem dokumentu określa relację między dwoma plikami, to adresowanie względem foldera nadrzędnego określa relację między każdym plikiem i folderem witryny. Wracając do wcześniejszej analogii z biurem, odpowiada to relacji między dwoma biurami (tym, z którego wyszedłeś rozpoczynając podróż po akta i tym, do którego w końcu przybyłeś) określającej ich położenie względem holu budynku.

Adres definiowany względem foldera nadrzędnego rozpoczyna się od ukośnika:

/Poetry/BOOKSHELF.HTML

W tym przykładzie ścieżka prowadzi do pliku BOOKSHELF.HTML ulokowanego w folderze podrzędnym Poetry foldera głównego witryny. Połączenia definiowane względem foldera nadrzędnego są interpretowane przez serwery, a nie przez przeglądarki. Dlatego gdy otwierasz stronę WWW ulokowaną na dysku twardym, na której zdefiniowano takie połączenia, nie będą one działać. Przy przeglądaniu strony, Dreamweaver przekonwertuje chwilowo adresowanie względem foldera nadrzędnego w adresowanie bezwzględne. Gdy klikniesz połączenie, nie będzie ono działać lokalnie, ponieważ określono je względem foldera nadrzędnego witryny. Jednak w Twojej przeglądarce zadziała, ale strony będziesz mógł przeglądać tylko pojedynczo.

Adresowanie względem foldera nadrzędnego sprawdza się najlepiej, gdy pliki witryny są często przemieszczane. Jego przewaga nad adresowaniem względem dokumentu polega właśnie na tym, że pomimo przeniesienia plików do nowego ulokowania, układ połączeń będzie nadal sprawny. Tak więc, jeśli w Twojej firmie wydawany jest sieciowy biuletyn, którego artykuły są co miesiąc odnawiane, a stare trafiają do katalogu Archive, definiowanie połączeń względem foldera nadrzędnego zaoszczędzi Twój czas, który musiałbyś poświęcić, aby zaktualizować wszystkie połączenia.

Poprawne zdefiniowanie ścieżek dostępu może być czasami trudne. Na szczęcie Dreamweaver zdecydowanie ułatwia Twoje zadanie. Jedynie musisz wiedzieć, kiedy masz zastosować dany typ adresowania. Jeśli nie czujesz się pewnie w tej dziedzinie, rozdział 13. przyniesie więcej szczegółowych informacji na ten temat.

Definiowanie połączeń

W tym punkcie zajmiemy się podstawami tworzenia połączeń tekstowych. Wykorzystamy możliwości inspektora Property, a nasza przykładowa witryna nosić będzie nazwę The Poerty Bookshelf (Półka z tomikami poezji). Zastosujemy połączenia definiowane względem dokumentu - z jednym wyjątkiem: będzie to połączenie prowadzące na zewnątrz witryny.

Początek ramki

Anatomia połączenia

Adres URL wydłuża się, gdy patrzymy na jego postać w kodzie HTML. Spójrz na ten oto przykład:

<a href=”bookshelf.html”>Poetry Bookshelf</a>

W kodzie pojawia się znacznik HTML <A HREF>, zwany także znacznikiem <A> lub znacznikiem zakotwiczenia. Informuje on przeglądarkę, gdzie przenieść użytkownika, który kliknie połączenie.

Podobnie jak większość znaczników HTML, znacznik <A HREF> musi mieć znacznik zamykający. Wpisując kod ręcznie, pamiętaj więc o dodaniu znacznika </A>.

Znacznik <A HREF> może prowadzić do plików najróżniejszego typu, w tym na przykład do:

• plików tekstowych

• graficznych

• filmów

• plików dźwiękowych

• adresów e-mail

• skryptów JavaScript

Koniec ramki

Dreamweaver jest wyposażony w wiele narzędzi, umożliwiających zarządzanie połączeniami witryny. Rozdział 14.,”Publikowanie witryny, obsługa plików i raportowanie” pokazuje jak wprowadzać zmiany w połączeniach witryny oraz w inny sposób zarządzać połączeniami.

Ćwiczenie 5.1. Tworzenie połączeń tekstowych, naprawianie zerwanych połączeń i korzystanie z ikony Point-to-file

Potrzebne Ci w tym przykładzie pliki znajdziesz na dysku CD, w folderze podrzędnym Poetry foldera Ch05.

Część I. Tworzenie połączeń tekstowych przy wykorzystaniu inspektora Property

W pierwszej części ćwiczenia utworzysz w pliku BOOKSHELF.HTML połączenia tekstowe do plików POETRY1.HTML, POETRY2.HTML i POETRY3.HTML. Tekst połączeń będzie następujący:

Browse Shelf #1

Browse Shelf #2

Browse Shelf #3

Rysunek 5.1 pokazuje stronę BOOKSHELF.HTML w oknie przeglądarki.

Rys.5.1. Strona BOOKSHELF.HTML w oknie przeglądarki

Otwórz plik BOOKSHELF.HTML w oknie programu Dreamweaver i zastosuj skrót klawiaturowy Ctrl+F3, aby wyświetlić inspektora Property. Kliknij w widoku projektu obraz przedstawiający napis Poetry Bookshelf i spójrz na pole SRC w oknie Inspector Property. W polu tym pojawia się ścieżka dostępu do pliku zawierającego obraz. Połączenia tekstowe, które masz zdefiniować, będą wyglądać podobnie, ale prowadzić będą do innych plików HTML.

1. Aby utworzyć pierwsze połączenie do pierwszego pliku, zaznacz tekst Browse Shelf #1.

2. Kliknij w inspektorze Property ikonę foldera i wybierz w oknie dialogowym Select File plik o nazwie POETRY1.HTML (patrz rysunek 5.2).

Rys.5.2. Kliknięcie w inspektorze Property ikony foldera prowadzi do okna dialogowego Select File

3. Upewnij się, czy z listy rozwijanej Relative To okna Select File wybrana została pozycja Document. Kliknij Select. W polu Link inspektora Property pojawi się teraz połączenie do pliku o nazwie POETRY1.HTML.

4. Zaznacz następną nazwę, ponownie kliknij w inspektorze Property ikonę foldera i wybierz w oknie dialogowym Select File plik o nazwie POETRY2.HTML. Powtórz to samo dla trzeciego tekstu.

Początek ramki

Uwaga

Jeśli nie widzisz pola Link w inspektorze Property, oznacza to, że prawdopodobnie okno to jest wyświetlane w uproszczonej postaci. Aby wyświetlić wszystkie jego ustawienia, kliknij przycisk rozwijania okna, z niewielką białą strzałką, umieszczony w prawym dolnym rogu.

Koniec ramki

Warto sprawdzać połączenia w trakcie ich tworzenia. Aby sprawdzić działanie połączeń, wybierz pozycję Preview in Browser w menu File i wskaż żądaną przeglądarkę w menu podrzędnym. Gdy strona pojawi się w oknie przeglądarki, klikaj połą

Część II. Naprawianie zerwanych połączeń

Połączenie Back Home (u dołu strony) w pliku POETRY3.HTML z foldera podrzędnego Poetry foldera Ch05 na dysku CD jest zerwane. Jeśli je klikniesz w oknie przeglądarki, wyświetlony zostanie błąd (patrz rysunek 5.3).

Aby naprawić to połączenie, otwórz plik POETRY3.HTML w oknie programu Dreamweaver i umieść punkt wstawiania w obrębie tekstu połączenia. Wykonaj działania określone w punktach 2 i 3 z pierwszej części ćwiczenia skierowując połączenie do pliku BOOKSHELF.HTML.

Rys.5.3. Komunikat o zerwanym połączeniu

Część III. Korzystanie z ikony Point-to-File

Narzędzie Point-to-File umożliwia tworzenie połączeń w niezwykle prosty sposób. Narzędzie to znajdziesz w inspektorze Property, obok narzędzia Browse for File (ikony foldera)(patrz rysunek 5.4). Korzystając z niego musisz pamiętać o takim zmniejszeniu rozmiarów okna Site, abyś mógł widzieć jednocześnie zarówno to okno, jak i dokument, nad którym pracujesz.

Rys. 5.4. Ikona Point-to-File

Aby zdefiniować połączenie korzystając z ikony Point-to-File:

1. Otwórz plik POETRY2.HTML, wpisz w notce reklamowej poświęconej książce Franka O'Hary tekst More Info i zaznacz go.

2. Otwórz okno Site i tak uporządkuj ekran, abyś widział jednocześnie okno dokumentu i okno Site. Kliknij ikonę Point-to-File w inspektorze Property i przeciągnij ją do pliku MOREINFO.HTML. Plik ten znajduje się w folderze Poetry, wraz z pozostałymi plikami, z których korzystamy w tym ćwiczeniu. Wskazywany przez znacznik ikony Point-to-File plik oznaczany jest ramką.

3. Zapisz plik i wyświetl w przeglądarce, aby sprawdzić działanie połączenia.

Usuwanie połączeń

Jeśli musisz usunąć połączenie, także pomoże Ci w tym inspektor Property. Zaznacz cały tekst połączenia. Jeśli zaznaczysz go częściowo, ten fragment, który nie został zaznaczony nadal będzie połączeniem.

Aby usunąć połączenie:

1. Zaznacz tekst połączenia.

2. Zaznacz adres URL wyświetlany w polu Link inspektora Property.

3. Naciśnij klawisz Del lub Backspace.

Definiowanie połączeń prowadzących na zewnątrz witryny

Jak już wspomniano w tym rozdziale, połączenia do stron WWW innej witryny muszą być definiowane bezwzględnie. Aby zdefiniować takie połączenia:

1. Zaznacz w swoim dokumencie tekst połączenia.

2. Umieść punkt wstawiania w polu Link inspektora Property.

3. Wpisz w tym polu pełny adres URL, rozpoczynając od http:// (na przykład http://www.yahoo.com).

4. Naciśnij Enter, aby zakończyć definiowanie połączenia.

Kolory połączeń i podkreślenia

W programie Dreamweaver kolory połączeń definiowane są w oknie dialogowym Page Properties (patrz rysunek 5.5). Aby je otworzyć, wybierz pozycję Page Properties z menu Modify lub skorzystaj ze skrótu klawiaturowego Ctrl+J.

Rys. 5.5. Okno dialogowe Page Properties

O ile Twój dokument nie jest tworzony na bazie szablonu, musisz zdefiniować dla niego w oknie dialogowym Page Properties następujące kolory:

• Połączeń nieodwiedzanych - są to połączenia, które użytkownik widzi, gdy pierwszy raz odwiedza stronę WWW. Definiuje się je w polu Links.

• Połączeń aktywnych - czyli w momencie kliknięcia. Reprezentuje je pole Active Links.

• Połączeń odwiedzonych - są to połączenia kliknięte. Gdy użytkownik powraca do strony wyjściowej, ich kolor jest inny, co pozwala stwierdzić, że były już używane. Odpowiada im pole Visited Links.

Aby wybrać własne kolory dla połączeń, kliknij w oknie dialogowym Page Properties ikonę próbki koloru obok pola Link, a następnie wybierz z palety odpowiedni kolor próbnikiem lub kliknij ikonę System Color Picker i zdefiniuj nowy kolor w oknie dialogowym Color.

Wybór schematów kolorystycznych

Wybór odpowiednich kolorów dla połączeń to trudna sprawa. Ważne jest to, aby wybrane kolory prezentowały się jednakowo wspaniale na różnych ekranach. Trzeba mieć świadomość, że rozjaśnienie ekranu zależy nie tylko od rodzaju platformy (ekrany komputerów Macintosh są z reguły jaśniejsze niż ekrany komputerów PC). W tym aspekcie komputery różnią się także między sobą. Dlatego kolory, które na Twoim ekranie są wyświetlane poprawnie, na innym ekranie mogą stapiać się z tłem.

Nic nie zastąpi testowania wybranych kolorów. Zobacz jak się prezentują na różnych komputerach i w różnych przeglądarkach, aby mieć pewność, że są czytelne. Możesz także skorzystać z wbudowanych schematów kolorystycznych programu Dreamweaver. Aby uzyskać dostęp do schematów, wybierz pozycję Set Color Scheme w menu Commands. Rysunek 5.6 prezentuje okno dialogowe, które wówczas się ukaże.

Rys. 5.6. Okno dialogowe Set Color Scheme Command

Schemat kolorów zawiera zestaw kolorów tła, połączeń, aktywnych połączeń i odwiedzonych połączeń. Kliknij nazwę koloru na liście Background i wybierz z listy Text and Links odpowiadający schemat Ci schemat kolorystyczny połączeń. Kliknij przycisk Apply, aby zastosować schemat w dokumencie.

Wyłączanie opcji podkreślania połączeń

W niektórych przypadkach konieczne jest usunięcie domyślnego podkreślenia połączenia. Aby wyłączyć opcję podkreślania dla całej witryny, zastosuj zewnętrzny kaskadowy arkusz stylów (rozdział 12., „Stosowanie kaskadowych arkuszy stylów” zawiera więcej informacji na temat kaskadowych arkuszy stylów i zewnętrznych plików, które je przechowują).

1. Wybierz w widoku projektu pozycję CSS Styles z menu Window lub zastosuj skrót Shift+F11.

2. Otwórz okno dialogowe definiowania nowego stylu klikając ikonę New Style (ze znakiem plus) znajdującą się u dołu okna palety CSS Styles. Alternatywnie, możesz nacisnąć przycisk ze strzałką w prawym górnym rogu palety CSS Styles i wybrać pozycję New Style z menu (patrz rysunek 5.7).

Rys. 5.7. Wybieranie stylu z palety CSS Styles

3. W oknie dialogowym New Style kliknij przycisk opcji Redefine HTML Tag. Utworzony zostanie nowy styl HTML, który tak zdefiniujemy, aby nie zawierał podkreślenia połączeń (patrz rysunek 5.8).

Rys. 5.8. Definiowanie nowego stylu

4. Rozwiń listę Tag i wybierz znacznik a.

5. Wskaż opcję This Document Only. W ten sposób zmiana będzie dotyczyła tylko bieżącego dokumentu.

6. Kliknij OK.

7. W ustawieniach kategorii Type okna dialogowego Style definition for zaznacz pole wyboru none (patrz rysunek 5.9). Usuwa to podkreślenie połączeń.

Rys. 5.9. Definiowanie stylu

Styl, który właśnie utworzyłeś zostaje osadzony w kodzie strony.

Połączenia e-mail

Połączenia e-mail są definiowane nieco inaczej niż zwykłe. Kliknięcie połączenia e-mail powoduje otwarcie pustego okna nowej wiadomości pocztowej. Ponieważ stanowi ono element przeglądarki, to niepoprawnie skonfigurowane ustawienia obsługi poczty uniemożliwią działanie połączeń e-mail.

Połączenia e-mail wstawiane są poleceniem Email Link. Aby z nich skorzystać:

1. Wskaż kursorem miejsce dokumentu, w którym ma się pojawić połączenie e-mail. Jeśli chcesz przekształcić obraz w takie połączenie, zaznacz obraz. Jeśli natomiast chcesz utworzyć połączenie tekstowe, zaznacz tekst.

2. Wybierz pozycję Email Link w menu Insert. Możesz także skorzystać z palety obiektów i wybrać ikonę Insert Email Link z kategorii Common.

3. W wyświetlonym oknie dialogowym Email Link wpisz lub zmień tekst prezentacyjny połączenia (patrz rysunek 5.10).

4. W polu E-Mail podaj adres e-mail, do którego połączenie ma prowadzić.

5. Kliknij OK.

Rys. 5.10. Okno dialogowe Insert Email Link

Początek ramki

Uwaga

Jeśli tekst prezentacyjny połączenia został wcześniej sformatowany, zanim przeznaczyłeś go na połączenie e-mail, formatowanie zostanie utracone. Aby tego uniknąć, definiuj połączenia e-mail z poziomu inspektora Property.

Koniec ramki

Definiowanie połączeń e-mail z poziomu inspektora Property

Inna metoda tworzenia połączeń e-mail korzysta z inspektora Property. Dzięki niej możesz zaoszczędzić swój czas. Oto procedura:

1. Zaznacz tekst lub obraz, który ma zostać przekształcony w połączenie.

2. Kliknij w polu Link inspektora Property i wpisz kod mailto, tak jak pokazano poniżej:
   mailto:[e-mail]
   Zwróć uwagę, że po dwukropku nie ma odstępu.

Początek ramki

Podpowiedź

Aby automatycznie adresować pola cc: lub subject: w oknie wiadomości e-mail, dodaj znak zapytania ? po nazwie domeny, a po nim wpisz subject=xxx (lub cc=[e-mail]):

mailto:[e-mail]?cc=[e-mail]

Początek ramki

Istnieje rozszerzenie programu Dreamweaver o nazwie E-Mail Generator, które automatycznie dołącza temat i treść, gdy list jest wysyłany z Twojej witryny. Dzięki temu zidentyfikujesz miejsce pochodzenia wiadomości. Możesz też dołączyć wiadomość, aby nadawca nie musiał tyle pisać.

Rozszerzenie znajdziesz pod adresem: www.macromedia.com/exchange - szukaj pod hasłem e-mail.

Po instalacji, ikona narzędzia E-Mail Generator jest dodawana do kategorii Common palety obiektów.

Koniec ramki

Zakotwiczenia o zdefiniowanych nazwach

Czyż nie doceniasz wysiłku tych autorów stron WWW, którzy wyposażyli je w połączenia prowadzące do celu na tej samej stronie? Dzięki temu nie musisz przewijać strony, aby znaleźć to, czego szukasz. Jeśli definiujesz połączenie do określonego miejsca dokumentu, to tworzysz połączenia do zakotwiczenia o zdefiniowanej nazwie.

Ćwiczenie 5.2. Definiowanie połączenia do zakotwiczenia o zdefiniowanej nazwie

Połączenia do zakotwiczenia o zdefiniowanej nazwie odrobinę różnią się od zwykłych połączeń. W tym ćwiczeniu potrenujesz ich definiowanie. Będzie do tego potrzebny plik DRUID.HTML.

U góry strony WWW znajdziesz nazwy miesięcy

1. Przewiń stronę do miejsca, w którym zaczynają się wróżby dla urodzonych w lutym i umieść tu punkt wstawiania.

2. Wybierz z menu Insert pozycję Invisible Tags, a z menu podrzędnego pozycję Named Anchor (patrz rysunek 5.11). Możesz także kliknąć ikonę Insert Named Anchor w kategorii Invisibles palety obiektów.

Rys. 5.11. Wstawianie połączenia do zakotwiczenia o zdefiniowanej nazwie

3. W oknie dialogowym Insert Named Anchor podaj nazwę zakotwiczenia i kliknij OK. (na rysunku 5.12 jako nazwa zakotwiczenia użyta została nazwa miesiąca).

Rys. 5.12. Definiowanie zakotwiczenia

W miejscu punktu wstawiania pojawi się zakotwiczenie. Jeśli go nie widzisz, wybierz w menu View pozycję Visual Aids, a następnie pozycję Invisible Elements.

Ponieważ wstawiłeś zakotwiczenie, potrzebne Ci jeszcze połączenie do niego prowadzące. Wróć do początku strony i zaznacz nazwę odpowiedniego miesiąca.

Początek ramki

Uwaga

Definiując nazwy zakotwiczeń, unikaj spacji. Pamiętaj także, że wielkość liter gra tu rolę. Upewniaj się także, że nie umieszczasz samego zakotwiczenia w obrębie warstwy, ponieważ w niektórych przeglądarkach nie będzie to działać (na przykład w Netscape Navigatorze).

Koniec ramki

1. Kliknij w polu Link inspektora Property (aby go wywołać, zastosuj skrót klawiaturowy Ctrl+F3).

2. Wpisz w tym polu nazwę zakotwiczenia poprzedzoną znakiem #. Obecność tego znaku jest bardzo istotna, bowiem bez niego połączenie nie działa.

3. Zapisz plik i wyświetl go w przeglądarce, aby sprawdzić, że działa. Jeśli są problemy, sprawdź w pierwszej kolejności, czy w polu Link nie zrobiłeś w nazwie jakiejś literówki. Pamiętaj także, że w przypadku nazw zakotwiczeń wielkość liter ma znaczenie.

Początek ramki

Uwaga

Jeśli chcesz skierować połączenie do zewnętrznego pliku, nazwa zakotwiczenia musi pojawić się jako ostatni element ścieżki wyświetlanej w polu Link inspektora Property. Wyglądałoby to mniej więcej tak: inny_plik.html#nazwa_zakotwiczenia

Aby przećwiczyć wstawianie zakotwiczeń, zdefiniuj w pliku DRUID.HTML pozostałe zakotwiczenia i połączenia na nie nakierowane.

Definiowanie zakotwiczeń przy pomocy Point-to-File

Definiując połączenia prowadzące do zakotwiczeń możesz korzystać z narzędzia Point-to-File, które znajdziesz w inspektorze Property. Oto metoda:

1. Wstaw zakotwiczenie.

2. Zaznacz tekst, który chcesz przekształcić w połączenie skierowane do celu.

3. Kliknij w inspektorze Property ikonę Point-to-File, znajdującą się obok pola Link.

4. Przeciągnij ikonę do znacznika zakotwiczenia i zwolnij klawisz myszki, gdy w polu Link pojawi się nazwa zakotwiczenia.

Jeśli konieczne jest przewinięcie strony, przeciągnij ikonę Point-to-File do krawędzi ekranu.

Definiowanie mapy odnośników

Połączenie niekoniecznie musi być skojarzone z tekstem lub pojedynczym obrazem. Równie dobrze może odnosić się do punktu o określonych współrzędnych. Mapa odnośników to obraz, który prowadzi do wielu plików, a skierowane do nich połączenia definiowane są w oparciu o współrzędne. Każdy punkt obrazu ma swoje współrzędne X i Y. Oto przykład kodu HTML definiującego za pomocą współrzędnych obszar będący połączeniem i umieszczony wewnątrz mapy odnośników:

<area shape=”rect” coords=”9,181,111,256” href=”capricorn.html”>

Liczby 9, 181, 111 i 256 określają obszar w obrębie obrazu, który stanowi połączenie do innego dokumentu. Gdy użytkownik umieszcza wskaźnik myszki nad takim aktywnym obszarem, wskaźnik przyjmuje postać łapki lub innej ikony wskazującej obecność połączenia. Kliknięcie obszaru aktywnego powoduje wysłanie żądania HTTP i załadowanie nowej strony do bieżącego lub nowego okna przeglądarki.

Na pewno spotkałeś w Internecie strony WWW, na których umieszczone były mapy kraju, a poszczególne jego obszary stanowiły połączenia do innych dokumentów. Jest to chyba najbardziej typowe zastosowanie mapy odnośników.

W programie Dreamweaver mapa odnośników jest tworzona za pomocą narzędzia Hotspot, a obszary aktywne mogą mieć kształt kwadratu, prostokąta lub wielokąta. Nie musisz brać korepetycji z geometrii, aby zdefiniować mapę odnośników. Wystarczy Ci obraz w formacie GIF lub JPG, który należy umieścić w dokumencie programu Dreamweaver (więcej na temat wstawiania i umiejscawiania obrazów znajdziesz w rozdziale 6., „Praca z obrazami”). Ćwiczenie 5.3 pozwoli Ci opanować wszystkie kroki konieczne do zdefiniowania w programie Dreamweaver mapy odnośników.

Ćwiczenie 5.3. Tworzenie mapy odnośników z obszarami aktywnymi

W tym ćwiczeniu skorzystamy z plików z foldera Astrology znajdujących się na dołączonym do książki dysku CD. Utworzymy obszary aktywne, a każdy z nich będzie prowadził do innego dokumentu HTML z foldera Astrology.

1. Otwórz plik o nazwie YOURSIGN.HTML - znajdziesz go w folderze Astrology na dołączonym do książki dysku CD. Plik zawiera --> obraz [Author:r] przedstawiający wszystkie znaki zodiaku. Obszar wokół znaku Wodnika został już przekształcony w obszar aktywny (patrz rysunek 5.13). Otwórz inspektora Property i kliknij obszar aktywny (zaznaczony kolorem niebieskim). W polu Link inspektora Property pojawi się nazwa pliku, do którego prowadzi to połączenie - jest to plik AQUARIUS.HTML.

Rys. 5.13. Plik YOURSIGN.HTML zawiera obraz YOURSIGN.GIF. Obraz ten przekształcimy w mapę odnośników

2. Aby zdefiniować kolejny obszar aktywny, zaznacz obraz YOURSIGN.GIF. W sekcji Map inspektora Property kliknij narzędzie Rectangular Hotspot Tool (patrz rysunek 5.14). Przeciągnij narzędziem i zdefiniuj obszar wokół kolejnego znaku zodiaku.

Rys. 5.14. Zaznacz obraz i zdefiniuj obszar wokół kolejnego znaku zodiaku korzystając z inspektora Property

3. Kliknij w inspektorze Property ikonę Browse for File (ikona foldera), aby wskazać plik, do którego poprowadzi połączenie. Na przykład obszar wokół znaku Koziorożca stanowić będzie połączenie wiodące do pliku CAPRICORM.HTML.

4. W podobny sposób zdefiniuj pozostałe obszary aktywne i połączenia.

5. Zapisz plik i wyświetl go w przeglądarce, aby sprawdzić jego działanie.

Usuwanie obszarów aktywnych

Aby usunąć obszar aktywny, otwórz dokument zawierający mapę odnośników w widoku projektu. Kliknij niebieski obszar reprezentujący połączenie i naciśnij klawisz Delete lub Backspace.

Początek ramki

Uwaga

Uwaga dla użytkowników Fireworks: możecie zdefiniować obszary aktywne już w trakcie tworzenia obrazu. Zapisaną mapę odnośników można potem zaimportować do programu Dreamweaver.

Koniec ramki

Paski nawigacji

Twoja strona zrobi większe wrażenie na odbiorcach, jeśli wprowadzisz na nią tak złożony element jak pasek nawigacji.

Pasek nawigacji tworzony jest przy pomocy narzędzia Navigation Bar programu Dreamweaver i składa się z szeregu obrazów podpowiadających wizualnie, gdzie prowadzą przyciski. Czasami na pasku nawigacji umieszczane są także obrazy interaktywne (ang. rollover images). Są to obrazy-przyciski, których treść lub kolorystyka zmienia się, gdy znajdzie się nad nimi wskaźnik myszki. Zazwyczaj pasek nawigacji zawiera także połączenie powrotne, prowadzące do strony głównej. W tym ćwiczeniu utworzysz pasek nawigacji, którego połączenia będą zmieniać kolor, gdy umieszczony zostanie nad nimi wskaźnik myszki.

Ćwiczenie 5.4. Pasek nawigacji zawierający obrazy interaktywne

Plik NAVIGATE.HTML zapisany w folderze Astrology na dysku CD dołączonym do książki zawiera umieszczony w tabeli obraz pełniący funkcję nagłówka (korzystanie z tabel przy projektowaniu strony omówione zostało w rozdziale 8.). W tym ćwiczeniu skorzystamy z tego właśnie pliku, aby zaprojektować pasek nawigacji. Pasek nawigacji zawierający przycisk o dwóch stanach można utworzyć korzystając z polecenia Insert Rollover Image.

Otwórz plik o nazwie NAVIGATE.HTML i kliknij pod obrazem. Możesz także zaznaczyć obraz i nacisnąć Enter, aby przesunąć punkt wstawiania do pustego obszaru strony. Następnie wykonaj następujące operacje:

1. Wybierz w menu Insert pozycję Interactive Images, a następnie pozycję Navigation Bar.

2. W oknie dialogowym Insert Navigation Bar (patrz rysunek 5.15) umieść punkt wstawiania w polu Up Image, a następnie kliknij przycisk Browse. Wybierz z foldera Images plik AIRES_UP.GIF. Obraz ten pojawi się w trakcie ładowania strony.

3. Umieść punkt wstawiania w polu Over Image i kliknij przycisk Browse. Wybierz z foldera Images plik AIRES_OVER.GIF. Obraz ten pojawi się, gdy wskaźnik myszki znajdzie się nad obrazem.

4. Umieść punkt wstawiania w polu Down Image i kliknij przycisk Browse. Wybierz z foldera Images plik AIRES_DOWN.GIF. Obraz ten zastąpi obraz kliknięty. Pomiń pole Over While Down Image.

5. Umieść punkt wstawiania w polu When Clicked, Go to URL i kliknij przycisk Browse. Wybierz z foldera Astrology plik AIRE.HTML. Sprawdź, czy w sekcji Options zaznaczone jest pole Preload Images.

6. Wybierz z menu Insert pozycję Vertically i zaznacz pole wyboru Use Tables.

Rys. 5.15. Wstawianie paska nawigacji

Na Twoim pasku nawigacji pojawił się pierwszy obraz. Aby dodać kolejne obrazy, kliknij znak plus (+) u góry okna dialogowego Insert Navigation Bar i powtórz kroki 4-7.

Po dodaniu wszystkich dwunastu znaków Zodiaku, naciśnij OK.

Zapisz dokument i wyświetl w przeglądarce, aby zobaczyć rezultaty. Jeśli popełniłeś jakiś błąd, wybierz w menu Modify pozycję Navigation Bar, aby go poprawić.

Początek ramki

Uwaga

Zdefiniowanie pozycji Up Image i Element Name jest niezbędne, aby utworzyć pasek nawigacji. Musisz je określić, aby móc dodać kolejny element.

Koniec ramki

Interaktywne paski nawigacji - ciąg dalszy

Wykorzystując wszystkie cztery stany przycisku paska nawigacji możesz uzyskać efekt animacji. Spróbuj przygotować obrazy i przyporządkować je wszystkim stanom, aby uzyskać podobieństwa do prawdziwego przycisku.

Jeśli chcesz przygotować prosty pasek nawigacji, w którym wykorzystane będą tylko dwa stany, wybierz w menu Insert pozycję Interactive Images, a następnie pozycję Rollover Image z menu podrzędnego (patrz rysunek 5.16).

Rys. 5.16. Okno dialogowe Insert Rollover Image

Początek ramki

Połączenia puste

Połączenia puste (ang. null links) umożliwiają przypisanie tekstowi lub obrazom behawiorów, na przykład takich jak odegranie dźwięku po kliknięciu obrazu, otwarcie wyskakującego okna lub pojawienie się wyskakującego komunikatu.

Aby zdefiniować połączenie puste, zaznacz tekst lub obraz, a w polu Link inspektora Property wpisz znak #. Po zdefiniowaniu połączenia pustego, otwórz paletę Behaviors wybierając pozycję Behaviors w menu Window (lub stosując skrót Shift+F3). Kliknij przycisk ze znakiem plus, u góry palety, aby rozwinąć listę dostępnych behawiorów, które możesz przypisać zakotwiczeniu (tekst lub obraz muszą być zaznaczone w trakcie tej operacji). Szczegółowe informacje na temat behawiorów znajdziesz w rozdziale 19., „Tworzenie skryptów Javascript w programie Dreamweaver”.

Koniec ramki

Menu rozwijane

Jednym z najbardziej przydatnych narzędzi nawigacji, które warto umieścić w swojej witrynie, jest menu rozwijane. Na pewno wielokrotnie widziałeś takie menu na różnych stronach WWW w Internecie. Są to obiekty proste, ale dają niezwykłą oszczędność miejsca. Mogą też spełniać rolę planu „B”, gdy zawiedzie ten bardziej złożony system nawigacji. Rysunek 5.17 prezentuje przykładowe menu rozwijane w przeglądarce.

Rys. 5.17. W takiej postaci pojawia się menu rozwijane w przeglądarce

Ćwiczenie 5.4. Tworzenie menu rozwijanego

W tym ćwiczeniu skorzystamy z plików HTML z foldera Astrology na dysku CD dołączonym do książki. Utworzymy menu rozwijane i umieścimy na nim dwanaście znaków zodiaku. Oto kolejne kroki:

1. Otwórz plik YOURSIGN.HTML z foldera Astrology na dysku CD. Kliknij w wierszu tabeli poniżej obrazu YOURSIGN.GIF. Tu właśnie wstawimy menu rozwijane.

2. Wybierz w menu Insert pozycję Form Objects, a następnie pozycję Jump Menu z menu podrzędnego.

3. W oknie dialogowym Insert Jump Menu (patrz rysunek 5.18) wpisz w polu tekstowym pytanie Jaki jest Twój znak? Dla zainteresowanych będzie ono zaproszeniem do rozwinięcia menu.

4. Kliknij znak plus (+) w górnym lewym rogu okna dialogowego. Umożliwi to dodanie nowej pozycji menu.

5. W polu tekstowym Text wpisz nazwę znaku zodiaku.

6. Umieść punkt wstawiania w polu When Selected Go to URL i kliknij przycisk Browse. Znajdź w folderze Astrology plik HTML dla wskazanego znaku Zodiaku.

7. Z listy Open URLs In wybierz z listy rozwijanej pozycję Main Window.

8. W polu tekstowym Menu Name podaj krótką, opisową nazwę danej pozycji menu.

Rys. 5.18. Okno dialogowe Insert Jump Menu

9. Dokonaj ustawień w sekcji Options zaznaczając odpowiednie pola wyboru: Insert Go Button After Menu i Select First Item After URL Change. Pierwsza z opcji spowoduje umieszczenie obok menu przycisku z napisem Go (przycisk ten pozwala udać się pod adres URL odpowiadający opcji aktualnie wybranej). Druga opcja pozwala wskazać pozycję domyślną menu.

10. Dodaj kolejne znaki Zodiaku klikając znak plus (+) u góry okna dialogowego.

11. Jeśli uznasz, że należy zmienić kolejność pozycji menu, skorzystaj z przycisków ze strzałkami, z prawej strony okna. Po zdefiniowaniu menu, naciśnij OK.

W oknie dokumentu menu rozwijane pojawi się obwiedzione przerywaną czerwoną linią. Jej obecność wskazuje, że znajduje się ono w obrębie znacznika formularza. Wynika to z faktu, że w Netscape obiekty tego typu nie są wyświetlane, jeśli nie zostaną zawarte w elemencie FORM. Zapisz swój dokument i wyświetl go w oknie przeglądarki.

Edycja menu rozwijanego

Aby w istniejącym menu rozwijanym wprowadzić zmiany:

1. Otwórz w widoku projektu plik zawierający menu rozwijane.

2. Otwórz paletę Behaviors wybierając w menu Window pozycję Behaviors lub korzystając ze skrótu Shift+F3.

3. Zaznacz menu rozwijane i kliknij dwukrotnie w oknie palety Behaviors zdarzenie onChange.

4. Wyświetlone zostanie okno dialogowe Jump Menu. Wprowadź zmiany i zamknij okno naciskając przycisk OK.

Aby zmienić elementy listy, zaznacz menu rozwijane i naciśnij w inspektorze Property przycisk List Values.

Podsumowanie

Definiowanie połączeń i planowanie nawigacji to integralna część procesu tworzenia stron WWW. Projektując witrynę musisz dokładnie przemyśleć system nawigacji, który chcesz zastosować. Chcesz przecież umożliwić odbiorom swoich stron prosty sposób przeglądania informacji sieciowych.

Zastanów się także nad strukturą ścieżek dostępu. Jeśli zamierzasz udostępniać swoje strony WWW lokalnie, zastosuj adresowanie względem dokumentu. Jeśli wiesz, że pliki będą często zmieniały ulokowanie, rozważ możliwość zdefiniowania adresów względem foldera głównego. W obu przypadkach musisz stosować adresowanie bezwzględne dla połączeń, które prowadzą na zewnątrz Twojego serwera sieciowego.

Lista systemów nawigacji udostępnianych w programie Dreamweaver jest długa. Podstawowym elementem są połączenia - najprostszą i najszybszą drogą do ich utworzenia są narzędzia inspektora Property. Połączenia mogą mieć postać obszarów aktywnych definiowanych w obrębie obrazów. Możesz także tworzyć paski nawigacji zawierające obrazy interaktywne. Wreszcie możesz konstruować menu rozwijane. Zazwyczaj najlepszym systemem nawigacyjnym jest system korzystający z różnych technik nawigacji.

2 Część I ♦ Podstawy obsługi systemu WhizBang (Nagłówek strony)

2 G:\DREAM_trans\rozdz05.doc

plik nie zawiera obrazu!

---