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:
q Rodzaje ścieżek dostępu
q Tworzenie połączeń tekstowych
q Kolory i style połączeń
q Zakotwiczenia o zdefiniowanych nazwach
q Paski nawigacji
q Menu połączeń
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.
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!”.
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 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.
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.
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).
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.
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.
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:
q plików tekstowych
q graficznych
q filmów
q plików dźwiękowych
q adresów e-mail
q skryptów JavaScript
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.
Potrzebne Ci w tym przykładzie pliki znajdziesz na dysku CD, w folderze podrzędnym Poetry foldera Ch05.
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.
Rys.5.2.
Kliknięcie w inspektorze Property ikony foldera prowadzi do okna dialogowego Select File
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.
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łą
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
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:
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:
Jak już wspomniano w tym rozdziale, połączenia do stron WWW innej witryny muszą być definiowane bezwzględnie. Aby zdefiniować takie połączenia:
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:
q Połączeń nieodwiedzanych – są to połączenia, które użytkownik widzi, gdy pierwszy raz odwiedza stronę WWW. Definiuje się je w polu Links.
q Połączeń aktywnych – czyli w momencie kliknięcia. Reprezentuje je pole Active Links.
q 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 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.
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ą).
Wolf-1