Rozdział 14. Publikowanie witryny, obsługa plików i raportowanie

Utworzyłeś już witrynę i być może nawet popróbowałeś już parę razy przesłać jej pliki na serwer i pobrać pliki z serwera. Oznacza to, że czas najwyższy, abyś zapoznał się z kilkoma narzędziami programu Dreamweaver, które ułatwiają aktualizację i obsługę witryny. W tym rozdziale omówimy także przygotowywanie raportów witryny podsumowujących zagadnienia wymagające rozwiązania. Rozdział zamkniemy instrukcją korzystania z mapy witryny. Poznasz też narzędzia znajdywania i zastępowania tekstu oraz kodu źródłowego HTML w plikach i folderach witryny. A teraz lista szczegółowych tematów:

• Eksploracja okna Site

• Zarządzanie połączeniami za pośrednictwem mapy witryny

• Tworzenie hierarchicznej prezentacji połączeń witryny

• Sprawdzanie połączeń i naprawianie połączeń zerwanych, zewnętrznych i niepełnych

• Synchronizacja witryn lokalnej i zdalnej

• Operacje znajdywania i zastępowania, w tym z zastosowaniem wyrażeń

• Generowanie raportów witryny

Okno Site

Okno Site to centrum zarządzania witryną. Umożliwia ono tworzenie i usuwanie plików, a nawet definiowanie między nimi połączeń. Jest także bardzo użyteczne przy przesuwaniu plików witryny. Nie tylko bowiem pozwala na wizualne przedstawienie całego procesu, lecz także umożliwia aktualizację połączeń witryny pod kątem wprowadzonych zmian. Okno udostępnia dwa widoki: plików (Site Files) i mapy witryny (Site Map). W widoku mapy także możliwe są dwa sposoby prezentacji witryny: tylko mapa (Map Only) oraz mapa i pliki (Map and Files). Okno Site można otworzyć w jeden z następujących sposobów:

• Wybierz pozycję Site Files w menu Site.

• Wybierz pozycję Open Site w menu Site, a następnie wskaż nazwę swojej witryny w menu podrzędnym.

• Naciśnij F8.

• Kliknij przycisk Site na pasku szybkiego uruchamiania (Launcher) lub na jego mini-odpowiedniku (na pasku stanu).

Większość projektantów stron WWW, w tym także ja sam, preferuje widok Site Files. Użytkownik ma w nim do dyspozycji znany i prosty interfejs zarządzania plikami. Pozwala on także szybko porównać układ i strukturę witryn lokalnej i zdalnej, bowiem obie mogą być wyświetlone jednocześnie. Widok Site Files jest widokiem domyślnym, jeśli jednak mimowolnie zmienisz widok na inny, możesz powrócić do poprzedniego naciskając klawisz F8 lub przycisk Site Files z lewej strony paska narzędzi okna Site.

W widoku Site Files okno podzielone jest na dwa panele. Zgodnie z ustawieniami domyślnymi, panel z plikami lokalnymi znajduje się z prawej strony, a pliki zdalne umieszczone są w panelu z lewej strony. Tak jest domyślnie, lecz można to zmienić w kategorii Site okna dialogowego Preferences. W rozdziale 2., „Dostosowywanie programu Dreamweaver do własnych potrzeb” znajdziesz informacje jak to zrobić. W kolejnych punktach wyjaśnimy teraz funkcje poszczególnych przycisków okna Site. Rysunek 14.1 pomoże Ci zorientować się, gdzie znajduje się dany przycisk.

Rys. 14.1. Zdalna witryna prezentowana jest w lewym panelu, a pliki witryny lokalnej w prawym

Przycisk Connects to Remote Host

Przycisk Connects to Remote Host umożliwia łączenie się i rozłączanie ze zdalnym serwerem FTP. Opcja ta jest także dostępna, jeśli korzystasz z systemu kontroli źródła, takiego jak SurceSafe lub WebDAV. Jeśli publikujesz na serwerze lokalnym, zainstalowanym na własnym komputerze lub w sieci lokalnej, przycisk nie będzie aktywny, a połączenie z lokalnym serwerem będzie nawiązywane automatycznie. Przycisk nie będzie także aktywny, jeśli w oknie Site Definition nie wskazano serwera FTP.

Kliknij przycisk Connect, aby nawiązać połączenie ze zdalnym serwerem FTP wskazanym w kategorii Remote Info okna dialogowego Site Definition. Po nawiązaniu połączenia, w lewym dolnym rogu przycisku Connect pojawia się zielona kropka. Jest to znak, że połączenie ze zdalnym serwerem zostało nawiązane, a funkcja przycisku została zmieniona na rozłączanie (Disconnect). Naciśnięcie przycisku w tym stanie powoduje rozłączenie ze zdalnym serwerem.

Jeśli masz problemy z nawiązywaniem połączenia ze zdalnym serwerem (albo po prostu chcesz wiedzieć, czy Dreamweaver rzeczywiście przystępuje do nawiązywania połączenia, gdy naciskasz przycisk Connect), możesz wyświetlić rejestr wszystkich operacji podejmowanych w trakcie nawiązywania połączenia FTP między klientem a serwerem - FTP log. W tym celu wybierz pozycję Site FTP Log w menu Window okna Site. Wszystkie żądania i odpowiedzi są prezentowane w raporcie w czasie rzeczywistym. Pomaga on także zorientować się jak Dreamweaver tworzy katalogi, przesyła pliki na serwer i ściąga je z serwera, i w jaki sposób korzysta z innych poleceń FTP.

Początek ramki

Podpowiedź

Macromedia udostępnia listę wszystkich poleceń FTP oraz informacje na temat interpretacji rejestrów FTP. Wszystko to znajdziesz pod adresem www.macromedia.com/support/dreamweaver/ts/documents/ftp_errors.htm.

Koniec ramki

Przycisk Refresh

Jeśli nawiązano połączenie ze zdalnym serwerem, przycisk Refresh umożliwi odświeżanie obu list plików witryny lokalnej i zdalnej. W przeciwnym razie odświeżana będzie tylko lista lokalna. Ten sam efekt uzyskasz korzystając z klawisza F5. Odświeżanie polega tylko na pobraniu zaktualizowanej listy plików. Same pliki nie są transferowane, nie odbywa się także proces synchronizacji witryn.

Jeśli chcesz odświeżyć tylko jedną z list plików, wybierz w menu View odpowiednią pozycję: Refresh Local (Shift+F5) lub Refresh Remote (Alt+F5).

Przyciski Get i Put

Z przycisków Get i Put będziesz bardzo często korzystał jako projektant witryn sieciowych. Przyciski te służą do wysyłania plików na serwer i pobierania plików z serwera na komputer lokalny w celu ich edycji.

Przycisk Get File(s) umożliwia ściągnięcie na komputer lokalny zaznaczonych plików odległej witryny. Ściągnięte kopie plików zastępują kopie bieżące. Dreamweaver ostrzega więc specjalnym komunikatem, że w efekcie tej operacji ściągane pliki zastąpią istniejące pliki lokalne. Dreamweaver zawsze pobiera pliki ze serwera, niezależnie od tego, który z paneli jest aktualnie aktywny. Pobierane są tylko pliki o nazwach zaznaczonych w panelu aktywnym. Ta opcja jest wyłączona, jeśli w kategorii Remote Info okna Site Definition nie wskazano zdalnego serwera.

Początek ramki

Uwaga

Po naciśnięciu przycisku Get lub Put pojawia się okno dialogowe Dependent Files, a w nim pytanie dotyczące uwzględnienia w operacji plików zależnych, do których zdefiniowano na stronach witryny połączenia. Pliki zależne to obrazy i pliki multimedialne. Wybierz odpowiedź Yes lub No, w zależności od tego, czy chcesz lub nie chcesz, by pliki zależne były uwzględniane. Możesz także wskazać programowi, jak ma w przyszłości odnieść się do tej kwestii. Jeśli teraz zażyczysz sobie, aby Dreamweaver nie pytał Cię o zdanie, a potem uznasz, że był to błąd, możesz ponownie uaktywnić wyświetlanie komunikatu. Zrobisz to w oknie dialogowym Preferences, w jego kategorii Site, zaznaczając pole wyboru Prompt on Get or Put. Aby skorzystać z tej opcji, nie zmieniając jednak ustawień na stałe, zanim naciśniesz przycisk Get lub Put, wciśnij klawisz Alt. Wymusi to pojawienie się okna dialogowego Dependent Files w tym konkretnym przypadku.

Koniec ramki

Jeśli zaznaczono w oknie Site Definition pole wyboru Enable File Check In and Check Out, pliki ściągane przy pomocy przycisku Get będą plikami tylko do odczytu (aby uzyskać do nich pełny dostęp, konieczne jest pobranie plików za pomocą polecenia Check Out). Pliki oznaczone jako tylko do odczytu możesz spokojnie oglądać na swoim komputerze, a jednocześnie inny członek zespołu może je u siebie edytować. Oto lista operacji, które działają w taki sam sposób jak przycisk Get:

• Wybranie pozycji Get w menu Site.

• Zastosowanie skrótu klawiaturowego Ctrl+Shift+D (lub Command+Shift+D w przypadku systemu Macintosh).

• Wskazanie pliku w oknie Site Files i wybranie pozycji Get z menu kontekstowego.

• Przeciągnięcie myszką plików zaznaczonych w panelu Remote do panelu Local. Korzystając z tej metody musisz zachować ostrożność, aby przeciągane pliki trafiły do właściwego foldera. W przeciwnym razie połączenia definiowane względem dokumentu zostaną zerwane. Operacja umieszczania plików na serwerze (opcja Put) wymaga większej uwagi, bowiem ewentualne pomyłki przy wyborze foldera dla pobieranych plików (opcja Get) są zauważane przez program - Dreamweaver wyświetli komunikat o konieczności aktualizacji połączeń.

Przycisk Put File(s) służy do przesyłania zaznaczonych plików witryny lokalnej do witryny odległej. Przesyłane pliki zastępują kopie bieżące. Zazwyczaj będziesz z tej opcji korzystał pracując nad własnym projektem, gdy strony witryny będą gotowe do umieszczenia na serwerze. Podobnie jak w przypadku przycisku Get File(s), transferowi podlegają pliki zaznaczone w panelu aktywnym. Opcja nie będzie dostępna, jeśli w kategorii Remote Info okna Site Definition nie wskazano zdalnego serwera.

Oto lista operacji, które działają w taki sam sposób jak przycisk Put:

• Wybranie pozycji Put w menu Site.

• Zastosowanie skrótu klawiaturowego Ctrl+Shift+U (lub Command+Shift+U w przypadku systemu Macintosh).

• Wskazanie pliku w oknie Site Files i wybranie pozycji Put z menu kontekstowego.

• --> Przeciągnięcie [Author:r] myszką plików zaznaczonych w panelu Local do panelu Remote. Korzystając z tej metody musisz zachować ostrożność, aby przeciągane pliki trafiły do właściwego foldera.

Jeśli nie zaznaczysz żadnych plików lub zaznaczysz tylko katalog główny, to kliknięcie przycisku Get lub Put spowoduje pobranie lub przesłanie całej witryny. Ponieważ jest to sytuacja ekstremalna, Dreamweaver powiadomi Cię o tym i pozwoli zrezygnować z przeprowadzania operacji. Co ważne, przy wydaniu przez Ciebie polecenia Get lub Put Dreamweaver automatycznie przystąpi do tworzenia niezbędnych folderów, zarówno po stronie lokalnej, jak i zdalnej.

Przyciski Check Out i Check In

Jeśli korzystasz z opcji pracy grupowej, naciśnięcie przycisku Check Out File(s) uaktywni system Check In/Out programu Dreamweaver (któremu więcej miejsca poświęcamy w następnym rozdziale). Przycisk Check Out umożliwia ściągnięcie kopii plików witryny odległej i powoduje oznaczenie ich w odległym ulokowaniu jako plików pobranych (lub w użyciu). Pozostali członkowie zespołu dowiedzą się więc, że aktualnie pracujesz nad plikiem, i że nie mogą teraz z niego korzystać. Jeśli chcą wprowadzać zmiany w pliku, muszą poczekać, aż Ty skończysz.

Funkcja przycisku Check In File(s) jest dokładnie odwrotna. Umożliwia on przesłanie lokalnej kopii pliku do witryny odległej i oznaczenie go jako zwróconego (lub nie w użyciu). Inni członkowie zespołu mogą teraz pobierać plik korzystając z poleceń Get i Check Out, i wprowadzać w nim zmiany. Zwrócenie pliku powoduje, że jego wersja lokalna oznaczana jest jako tylko do odczytu. Aby edycja była możliwa, musisz ponownie pobrać plik (stosując polecenie Check Out).

Przyciski Check In i Check Out nie będą wyświetlane, jeśli w oknie Site Definition nie zaznaczono pola wyboru Enable File Check In and Check Out.

Przycisk Stop Current Task

Jest to czerwony, ośmiokątny przycisk (tak, ma postać znaku Stop, nieustannie ignorowanego przez Ciebie - aczkolwiek w tym przypadku mam nadzieję, że tego znaku nie potraktujesz tak lekko). Pojawia się tylko wówczas, gdy Dreamweaver wykonuje zautomatyzowane zadanie, takie jak pobieranie czy wysyłanie plików, generowanie raportów i wykonywanie innych, podobnych funkcji. Zawsze wyświetlany jest w dolnym prawym rogu okna, w którym odbywa się proces. Kliknięcie tej czerwonej ikony powoduje, że Dreamweaver podejmuje próbę zatrzymania procesu w elegancki sposób. Mówię „podejmuje próbę”, bowiem nie zawsze operacja jest natychmiast czy też elegancko zatrzymywana. W pewnym stopniu decyduje o tym warstwa rozszerzalności programu Dreamweaver. Aby uczynić program rozszerzalnym (umożliwić akceptację rozszerzeń), część jego kodu musiała zostać napisana w języku JavaScript. Kod JavaScript nie daje takiego powinowactwa do systemu operacyjnego jakie byłoby w przypadku zastosowania języka C. Z tego powodu, od czasu do czasu, Dreamweaver ma kłopoty z zamknięciem zadania.

Początek ramki

Uwaga

Taką samą funkcję jak przycisk Stop spełnia klawisz ESC.

Koniec ramki

Przycisk zwijania/rozwijania okna

Przycisk ten ma postać niewielkiego trójkąta, a znajduje się w lewym dolnym rogu okna Site. Po naciśnięciu, widok dwukolumnowy zastępowany jest widokiem jednokolumnowym. Ponowne naciśniecie przywraca poprzedni układ okna Site.

Przycisk Site Files

Przycisk ten dzieli okno Site na dwa panele. Domyślnie, w lewym panelu prezentowana jest witryna odległa, natomiast prawy panel wyświetla pliki witryny lokalnej. Tę domyślną kolej rzeczy możesz zmienić w kategorii Site okna dialogowego Preferences (w rozdziale 2. znajdziesz informacje szczegółowe). Widok Site Files jest widokiem domyślnym okna Site. Oto operacje, które powodują wyświetlenie okna Site w swej domyślnej postaci:

• Naciśnięcie F8.

• Wybranie polecenie Site Files w menu Window.

• Wybranie polecenie Site Files w menu Site (w oknie dokumentu).

Przycisk Site Map

Przycisk Site Map umożliwia wyświetlenie w oknie Site wizualnej reprezentacji witryny. Tworzy ją mapa zbudowana w oparciu o połączenia witryny.

Jeśli klikniesz przycisk Site Map i przytrzymasz chwilę klawisz myszki, wyświetlisz menu zawierające dwie opcje: Map Only i Map and Files. Wybranie pierwszej spowoduje wyświetlenie w oknie Site tylko mapy witryny. W drugim przypadku, z prawej strony (domyślnie) mapy witryny pojawi się także niewielki panel prezentujący pliki witryny lokalnej. Jeśli po wybraniu dowolnej z opcji powrócisz do widoku Site Files, opcja ta stanie domyślnym widokiem mapy witryny i zostanie wyświetlona po kliknięciu przycisku Site Map. Do widoku mapy witryny prowadzą następujące drogi:

• Naciśnięcie Alt+F8.

• Wybranie pozycji Site Map w menu Window.

• Wybranie Site Map w menu Site (w oknie dokumentu).

Menu Site

Menu Site w oknie Site zawiera wszystkie witryny, które dotychczas skonfigurowałeś w programie Dreamweaver. Możesz więc przełączać się między witrynami wybierając ich nazwy z tej właśnie listy. Ostatnią pozycją menu jest pozycja Define Sites. Umożliwia ona wyświetlenie okna dialogowego Define Sites - centrum obsługi witryny, w którym możesz dodawać, usuwać i edytować informacje dotyczące witryn.

Przycisk pomocy

Przycisk ze znakiem zapytania to ostatni z prawej przycisk na pasku narzędzi okna Site. Kliknięcie go uaktywnia system pomocy i powoduje wyświetlenie stron pomocy w oknie domyślnej przeglądarki. Firma Macromedia stworzyła jeden z najlepiej dopracowanych systemów pomocy jaki kiedykolwiek widziałem. Byłoby wspaniale, gdybyś wykorzystał to świetne narzędzie. Należy także wspomnieć, że w pewnych przypadkach system pomocy jest kontekstowy. Jeśli naciśniesz przycisk pomocy w oknach dialogowych, w przeglądarce automatycznie wyświetlone zostaną strony pomocy z informacjami dotyczącymi tego, co akurat chcesz zrobić.

Korzystanie z mapy witryny

Mapa witryny (Site Map) prezentuje zazwyczaj witrynę lokalną. W tym widoku zachowujesz możliwość publikowania stron na odległym serwerze, lecz musisz mieć świadomość, że poziom kontroli nad całym procesem jest zdecydowanie niższy. Mapa witryny przedstawia witrynę jako hierarchię plików połączonych połączeniami. Plik znajdujący się na szczycie hierarchii to Twoja strona główna. W praktyce nie da się utworzyć mapy witryny, jeśli w definicji witryny nie zostanie określona strona główna. W rozdziale 13., „Okno Site i organizacja plików” znajdziesz informacje jak to zrobić. Poniżej strony głównej znajdują się wszystkie pliki bezpośrednio z nią połączone. Domyślnie nie są wyświetlane pliki ukryte i pliki zależne (a więc obrazy, pliki Shockwave i Flash, szablony, itp.), ale można je wyświetlić umieszczając znacznik obok pozycji Show Depentent Files i Show Files Marked As Hidden menu View. W tej strukturze hierarchicznej są także uwzględniane połączenia e-mail, połączenia prowadzące na zewnątrz oraz pliki multimedialne osadzone na stronie. Pozostała część mapy witryny utworzona jest w ten sam sposób - z plików i połączeń.. Poszczególne struktury drzewiaste można zwijać i rozwijać klikając znaki plus (+) i minus (-) wyświetlane z lewej strony ikon dokumentów.

Aby wyświetlić mapę witryny z poziomu okna dokumentu, wybierz pozycję Site Map w menu Site, natomiast w oknie Site wybierz pozycję Site Map w menu Window. W obu oknach skutkuje skrót klawiszowy Alt+F8. Jeśli okno Site jest otwarte, możesz oczywiście skorzystać z przycisku Site Map na pasku narzędzi. Przytrzymanie tego przycisku przez chwilę otwiera dostęp do dwóch dodatkowych opcji: Map Only (tylko mapa) i Map and Files (mapa i pliki) (patrz rysunek 14.2). Wybranie pierwszej spowoduje wyświetlenie w oknie Site tylko mapy witryny. W drugim przypadku, z prawej strony (domyślnie) mapy witryny pojawi się także niewielki panel prezentujący pliki witryny lokalnej.

Rys. 14.2. Przytrzymanie przycisku otwiera dostęp do dwóch dodatkowych opcji: Map Only (tylko mapa) i Map and Files (mapa i pliki)

Jeśli strona główna witryny nie została jeszcze wskazana, Dreamweaver przypomni Ci, abyś to uczynił. Strona główna stanowi dla niego punkt centralny, względem którego konstruuje mapę. W następnym punkcie omówimy szerzej kwestię definiowania strony głównej witryny. Pewne funkcje i opcje programu Dreamweaver są specyficzne dla witryn lokalnych. Mapa witryny, a przynajmniej jej obrazowa reprezentacja, do tej grupy niewątpliwie należy. Nadal jednak można wykorzystać mapę witryny do zarządzania witryną odległą.

Elementami mapy witryny są niewielkie ikony o postaciach odzwierciedlających stan pliku lub połączenia. Plik jest zazwyczaj opisany czarną czcionką. Połączeniu zerwanemu odpowiada kolor czerwony. Połączenia prowadzące na zewnątrz oraz specjalne reprezentuje niebieski kolor tekstu i ikona kuli ziemskiej. Przykładem połączenia specjalnego jest połączenie e-mail. Jeśli stosowany jest system Check In/Check Out, zielony znacznik obok nazwy pliku wskazuje, że pobrałeś plik do edycji. Znacznik czerwony pojawia się obok plików edytowanych aktualnie przez inne osoby. Ikona kłódki to znak, jest zablokowany lub tylko do odczytu. Jest to zabezpieczenie przed edycją plików ukończonych.

Początek ramki

Uwaga

Domyślnie, na mapie witryny pojawiają się tylko dokumenty HTML. Pliki ukryte (są to także pliki HTML, lecz oznaczone jako ukryte - przypis tłumacza) oraz zależne można także wyświetlić. Omawiamy to w następnym punkcie.

Koniec ramki

Dostosowywanie mapy witryny

Jak już wspomniano, wygląd mapy witryny można zmienić w oknie Site Definition. Skonfigurowanie ustawień w tym oknie pozwala nadać mapie witryny żądaną postać domyślną, co zwalnia z konieczności powtarzania procedury dostosowywania mapy witryny przy każdym przełączeniu się do tego widoku.

Aby dostosować ustawienia konfiguracyjne mapy witryny:

1. Wybierz w menu Site pozycję Define Sites. Wskaż w oknie dialogowym Define Sites bieżącą witrynę i naciśnij przycisk Edit.

2. Wybierz w oknie Site Definition kategorię Site Map Layout (patrz rysunek 14.3).

3. Teraz nadarza się dobry moment na wskazanie strony głównej witryny. Wpisz w polu tekstowym Home Page ścieżkę dostępu do pliku strony głównej lub skorzystaj z ikony foldera, aby wybrać plik w oknie dialogowym, które się ukaże. Strona główna to dokument HTML, który zostanie zastosowany przez program Dreamweaver jako centrum, w oparciu o które zbudowana zostanie hierarchiczna struktura - mapa witryny. Dokument ten zajmuje w niej pozycję najwyższą. Nasuwa się tu skojarzenie z pniem drzewa, z którego wyrastają i rozchodzą się gałęzie. Innymi słowy, jest to zazwyczaj strona, która pojawi się na ekranie jako pierwsza.

4. W polu Number of Coulmns podaj liczbę kolumn, a w polu Column Width szerokość pojedynczej kolumny. Są to wartości określające liczbę stron wyświetlanych w każdym wierszu mapy witryny. Domyślnie w wierszu jest miejsce na 200 stron. Prawdopodobieństwo, że do Twojej strony głównej będzie podłączonych więcej niż 200 stron jest niewielkie, nie musisz więc zmieniać tej wartości.

5. W sekcji Icon Labels masz do wyboru dwa sposoby opisu dokumentów - poprzez nazwy plików (opcja File Names) lub tytuły stron (Page Titles). Jeśli pilnie stosujesz się do zasady tytułowania stron za pomocą opisowych tytułów, możesz wybrać drugą z opcji. Prezentacja plików poprzez tytuły stron to także dobry test skuteczności tytułów. Nie uwierzysz, jak bardzo dezorientujące mogą być tytuły - czasami musisz spojrzeć na treść strony, aby zrozumieć sens jej tytułu.

6. W sekcji Options znajdziesz pola wyboru, które pozwalają określić typ plików uwzględnianych na mapie witryny. Pierwsze z pól, Display Files Marked As Hidden, pozwala włączyć wyświetlanie plików ukrytych. Jeśli zaznaczysz to pole, pliki ukryte zostaną wyświetlone. Opcja Display Dependent Files umożliwia wyświetlenie plików zależnych, a więc obrazów, plików multimedialnych i innych, do których zdefiniowano w kodzie HTML strony połączenia. Pliki tego typu zostaną wyświetlone w kolejności, w jakiej pojawiają się w kodzie HTML.

Rys. 14.3. Ustawienia tej kategorii określają wygląd mapy witryny

Dodawanie, usuwanie i modyfikowanie połączeń

Jedną z najcenniejszych cech mapy witryny jest możliwość szybkiego tworzenia połączeń do dokumentów. Dzięki niej proces przekształcania luźnego zestawu dokumentów w funkcjonującą witrynę jest prosty i szybki. Jest ona tym bardziej użyteczna, że pozwala dołączać strony do witryny natychmiast po wypełnieniu ich zawartością, bez stresu, że zapomnisz o ich istnieniu.

Tworzenie połączeń

Czy uwierzysz, że w programie Dreamweaver utworzenie połączenia do istniejącego pliku wymaga jednego kliknięcia? Tak, to prawda. Zgoda, jest to nieco wydłużone kliknięcie, ale nadal kliknięcie, czyż nie? Umożliwia to ikona Point to File. Ma ona postać celownika, a pojawia się na mapie witryny obok ikony zaznaczonego pliku. Jeśli chcesz utworzyć połączenie, wszystko, co jest Ci niezbędne, to oba panele - mapy witryny i jej plików. Tak więc kliknij i przytrzymaj przycisk Site Map na pasku narzędzi okna Site, a następnie wybierz z menu pozycję Map and Files.

Początek ramki

Uwaga

Można utworzyć połączenie bez wyświetlania listy plików witryny, ale w takim przypadku plik, do którego połączenie ma prowadzić, musi znajdować się na mapie witryny.

Koniec ramki

Zaznacz plik, z którego chcesz utworzyć połączenie. Obok ikony tego dokumentu pojawi się ikona celownika, co pokazuje rysunek 14.4. Złap myszką celownik i przeciągnij na plik docelowy. Gdy żądany plik znajdzie się w obramowaniu (pojawia się ono wokół nazw plików, nad którymi przesuwasz celownik), zwolnij klawisz myszki. W pliku, z którego startowałeś, Dreamweaver utworzy połączenie. Pojawia się ono pod wcześniejszą zawartością strony, a jego tekstem prezentacyjnym jest nazwa pliku, do którego połączenie prowadzi.

Rys. 14.4. Ikona o postaci celownika umożliwia tworzenie połączeń

Są także inne metody definiowania połączeń do plików. Połączenia prowadzące do plików znajdujących się poza witryną lokalną najlepiej tworzyć korzystając z Eksploratora Windows. Pliki z Eksploratora należy przeciągnąć na żądany plik na mapie witryny. Zadbaj o to, aby okno Site i Eksplorator Windows nie zakrywały się nawzajem w trakcie tej operacji.

Inny sposób definiowania połączeń wiedzie przez okno dialogowe Select HTML File. Oto trzy metody otwierania tego okna: zaznacz na mapie witryny plik, w którym tworzysz połączenie, i wybierz pozycję Link to Existing File z menu Site okna Site, skorzystaj ze skrótu klawiaturowego Ctrl+Shift+K lub zaznacz na mapie witryny ikonę pliku, kliknij prawym klawiszem myszki i wybierz z menu kontekstowego pozycję Link to Existing File. W wyświetlonym oknie Select HTML File znajdź plik, do którego połączenie ma prowadzić. Podstawowa wyższość tej metody nad metodą wykorzystującą ikonę Point-to-File polega na łatwości tworzenia połączeń do plików ulokowanych poza witryną. Odradzam jednak tworzenie połączeń prowadzących do plików znajdujących się poza folderem głównym witryny. Jeśli jest taka konieczność, zaleca się raczej skopiowanie pliku do foldera witryny lokalnej i utworzenie połączenia do kopii lokalnej.

Choć nie opisywaliśmy tego szczegółowo, proces definiowania połączeń do nowych plików przebiega tak samo. W jego efekcie powstaje w zaznaczonym pliku połączenie, które prowadzi do nowego dokumentu. Polecenie Link to New File znajdziesz w menu Site lub w menu kontekstowym dla zaznaczonego pliku. Jego skrót klawiaturowy to Ctrl+Shift+N. Polecenie wywołuje okno dialogowe Link to New File, pokazane na rysunku 14.5. Definiujesz w nim nazwę pliku, tytuł strony i tekst tworzonego połączenia. Po wprowadzeniu ustawień, kliknij OK. Plik zostanie utworzony w tym samym katalogu, co plik z którego połączenie wychodzi.

Rys. 14.5. Okno dialogowe Link to New File

Modyfikowanie połączeń

Kiedyś zdarzyło mi się współpracować z pewnym człowiekiem, który wcześniej zajmował się wyłącznie publikacjami drukowanymi. Praca nad projektem internetowym była więc jego pierwszym doświadczeniem tego rodzaju. Gdy ukończyliśmy i opublikowaliśmy witrynę, zadzwonił do mnie i zdenerwowany poinformował, że popełniliśmy błąd w pisowni nazwy CFO. Spokojnie oświadczyłem, że nie jest to problem, i że usunę błąd w ciągu godziny. Pilna potrzeba poprawienia błędu jest oczywista, aczkolwiek po dziś dzień nie mam pewności, czy zdawał on sobie sprawę, jak prostym jest to zadaniem. Dla kogoś, kto zawsze zajmował się tworzeniem drukowanych dokumentów, publikowanie w Internecie stanowi całkiem nową odmianę gry. Tutaj możesz aktualizować na bieżąco i w takiż sam sposób poprawiać. Dokument drukowany ma natomiast ustaloną postać, a jego kolejne wersje zawierają nowy materiał i podlegają rozpowszechnieniu dopiero po wydrukowaniu.

Dotyczy to nie tylko tekstu na stronach WWW, lecz także nazw plików. A jak się już wielokrotnie zdążyłeś przekonać, w programie Dreamweaver 4 ten proces jest wyjątkowo szybki i bezbolesny.

Aby na mapie witryny skierować połączenie do innego pliku:

1. Zaznacz na mapie witryny plik zawierający połączenie, które chcesz modyfikować.

2. Wybierz pozycję Change Link w menu Site lub zastosuj skrót Ctrl+L. Możesz także wskazać plik, kliknąć prawym klawiszem myszki i wybrać polecenie Change Link z menu kontekstowego.

3. Wyświetlone zostanie okno dialogowe Select HTML File. Wybierz w nim plik, którym chcesz zastąpić poprzedni docelowy plik połączenia. Gdy go znajdziesz, naciśnij przycisk Select.

4. Pojawi się kolejne okno - Update Files. Prezentuje ono listę wszystkich plików witryny, które wymagają aktualizacji.

5. Kliknij przycisk Update, aby zaktualizować wszystkie połączenia w tych plikach. Jeśli chcesz dokonać aktualizacji połączeń tylko w niektórych plikach, wskaż te pliki myszką, trzymając wciśnięty klawisz Ctrl, a po wybraniu aktualizowanych plików, naciśnij Update.

W programie Dreamweaver jest jeszcze jedno podobne polecenie - Change Link Sitewide. Pozwala ono ręcznie zmieniać wszystkie połączenia i kierować je w inne miejsce. Aby skierować połączenia w wybranym pliku pod inny adres:

1. Zaznacz plik w panelu Local okna Site.

2. Wybierz polecenie Change Link Sitewide w menu Site.

3. Wyświetlone zostanie okno dialogowe Change Link Sitewide, w którego polu Change All Links To prezentowana jest ścieżka dostępu, którą chcesz zmienić (patrz rysunek 14.6). Jeśli nie zaznaczyłeś pliku (a tak też można), możesz po prostu wpisać ścieżkę i nazwę pliku w tym polu.

4. Wpisz następnie w polu Into Links To (lub skorzystaj z ikony foldera) ścieżkę i nazwę pliku, który ma zastąpić plik wskazany w poprzednim polu.

5. Kliknij OK. Wyświetlone zostanie okno dialogowe Update Files. Reszta procedury jest w zasadzie taka sama jak w przypadku modyfikacji pojedynczego połączenia.

Rys. 14.6. Okno dialogowe Change Link Sitewide

Usuwanie połączeń

Czasami pojawia się konieczność usunięcia jakiegoś połączenia między stronami. Widok mapy witryny (Site Map) doskonale się do tego nadaje. Usunięcie połączenia nie powoduje usunięcia pliku, do którego połączenie prowadziło - znika tylko połączenie do tego pliku na wskazanej stronie. Być może na początku będzie Cię to mylić, ale z czasem i rosnącym doświadczeniem stanie się prostsze. Należy także nadmienić, że po usunięciu połączenia w widoku mapy witryny, jedyne sposoby odtworzenia go to ponowne utworzenie połączenia w tym widoku lub ręczna edycja dokumentu HTML. Nie ma natomiast możliwości cofnięcia operacji za pomocą polecenia Undo.

Aby usunąć połączenie korzystając z widoku mapy witryny:

1. Zaznacz połączenie, którego chcesz się pozbyć.

2. Wykonaj jedną z operacji:

• Naciśnij klawisz Delete.

• Wybierz pozycję Remove Link z menu Site.

• Zastosuj skrót Ctrl+Shift+L.

• Wskaż połączenie, kliknij prawym klawiszem myszki i wybierz z menu kontekstowego pozycję Remove Link.

Zmiana tytułu strony

Widok mapy witryny pozwala szybko modyfikować tytuły stron. Jednak aby to zrobić, musisz najpierw wyświetlić tytuły stron. Wybierz więc pozycję Show Page Titles z menu Edit lub zastosuj skrót Ctrl+Shift+T, który spowoduje przełączenie do widoku prezentującego tytuły stron.

Po wyświetleniu tytułów stron, zaznacz żądany plik. Następnie kliknij ponownie na tekście tytułu strony. Teraz możesz wpisać nowy tytuł strony (patrz rysunek 14.7). To „wolne podwójne kliknięcie” można wykonać w miarę szybko, aczkolwiek jeśli zrobisz to zbyt szybko, otworzysz plik w oknie dokumentu.

Początek ramki

Uwaga

Aby zmienić tytuł strony, możesz zaznaczyć plik i wybrać w menu File pozycję Rename. Ten sam efekt powoduje naciśnięcie klawisza F2. Ta ostatnia metoda to w programie Dreamweaver szybki i standardowy sposób zmiany nazw plików i tytułów stron w oknie Site.

Koniec ramki

Rys. 14.7. Edycja tytułu strony w widoku mapy witryny

Zmiana strony głównej widoku mapy witryny

Zanim rozwiniemy ten temat, chciałbym najpierw wyjaśnić, że strona główna w widoku mapy witryny nie musi być koniecznie stroną główną witryny. Jest to po prostu strona stosowana w widoku mapy witryny jako główna.

Dreamweaver 4 umożliwia zastąpienie istniejącej strony głównej inną istniejącą stroną lub stroną całkowicie nową, w tym także plikami, które nie są w formacie HTML, a więc obrazami lub plikami .swf. Aby utworzyć nowy dokument strony głównej, wybierz pozycję New Home Page w menu Site. Pojawi się okno dialogowe New Home Page. Wprowadź w nim nazwę pliku i tytuł nowej strony głównej. Po utworzeniu nowej strony głównej, powinieneś zająć się połączeniami - skorzystaj tu z polecenia Link to Existing File i ikony Point to File. Procedurę tworzenia połączeń omawialiśmy we wcześniejszej części tego rozdziału.

Aby w widoku mapy witryny zadeklarować istniejącą stronę jako główną, zaznacz odpowiedni plik w panelu Local okna Site (w tym celu musisz włączyć tryb Map and Files). Następnie wybierz w menu Site pozycję Set as Home Page. Mapa witryny zostanie odtworzona z uwzględnieniem wprowadzonych zmian dotyczących strony głównej i struktury połączeń. Możesz także wskazać plik w oknie Site, kliknąć prawym klawiszem myszki i wybrać z menu kontekstowego pozycję Set as Home Page.

Przydatną opcją programu Dreamweaver 4 jest możliwość efektywnego przeglądania map witryny z różnymi stronami głównymi, bez konieczności rzeczywistej zmiany strony głównej (patrz rysunek 14.8). Aby się o tym przekonać, wybierz pozycję View as Root w menu View lub zastosuj skrót Ctrl+Shift+R. Możesz także wskazać stronę, którą chcesz zobaczyć jako stronę główną, i kliknij prawym klawiszem myszki. Wybierz następnie z menu kontekstowego pozycję View as Root, aby zmienić układ mapy witryny. Ulokowany pod paskiem narzędzi okna Site pasek przycisków nawigacji (Site Navigation) zmieni się, odzwierciedlając ulokowanie strony głównej względem bieżącej strony głównej. Klikając ikonę pliku na pasku nawigacji, możesz cofać zmiany, aż do powrotu do pierwotnej struktury witryny.

Rys. 14.8. Tymczasowa zmiana strony głównej

Opcje widoku mapy witryny

Moja babcia pracowała kiedyś w instytucji charytatywnej. Jeden z jej obowiązków polegał na przygotowaniu comiesięcznego raportu oddawanego do rąk prezydenta. Kupiłem więc i zainstalowałem na jej komputerze edytor Microsoft Word 2000. Od tej pory, każdego miesiąca miałem lawinę telefonów wzywających mnie, abym przyszedł i powstrzymał Worda od przejmowania kontroli nad jej dokumentem. Po odejściu babci ze stanowiska, pomyślałem sobie: „Jaki pożytek z tych wszystkich bajerów, jeśli są one źle zaimplementowane?”. Nie żebym uważał edytor Word za zły program (w końcu korzystam z niego codziennie) - chodzi o to, że fakt wyposażenia programu w daną opcję nie oznacza, że program powinien zmuszać Cię do korzystania z niej.

Firma Macromedia wzięła ten punkt widzenia pod uwagę przy tworzeniu programu Dreamweaver 4. Nie tylko wyposażono go we wszystkie możliwe cudeńka, lecz pomyślano o takim ich zaimplementowaniu, aby były nie narzucające się, pomocne i opcjonalne, co odpowiada wielu użytkownikom. Pod tym względem mapa witryny nie stanowi wyjątku. O wielu atrybutach i opcjach mapy już mówiliśmy, ale jest jeszcze kilka innych opcji, o których także warto wspomnieć.

Pliki ukryte i zależne

Pomimo, że mapa witryny sprezentuje pliki w zhierarchizowany i zorganizowany sposób, nawet ona staje się czasami zbyt zagmatwana. Dreamweaver 4 udostępnia dwie opcje, które są pomocne w walce z bałaganem. Dają one możliwość ukrycia określonego pliku oraz wyświetlenia bądź ukrycia plików zależnych.

Domyślnie, mapa witryny prezentuje wszystkie pliki HTML, między którymi zdefiniowano w witrynie połączenia. Czasami pomocne jest ukrycie określonego pliku lub połączenia i powiększenie w ten sposób obszaru dla prezentacji pozostałych elementów. Aby skonfigurować plik jako ukryty, zaznacz go i wybierz pozycję Show/Hide Link z menu View. Na mapie witryny połączenie znika, znikają też pliki z nim stowarzyszone. Skrót klawiaturowy odpowiadający temu poleceniu to Ctrl+Shift+Y.

Aby wyświetlić pliki oznaczone jako ukryte, wybierz po prostu pozycję Show Files Marked as Hidden z menu View. Pliki ukryte opisane są kursywą. W tym momencie masz możliwość zmiany ich statusu. Aby plik przestał być ukryty, zaznacz go i ponownie wybierz pozycję Show/Hide Link z menu View lub zastosuj skrót Ctrl+Shift+Y.

Druga z opcji, pozwalająca wyświetlić pliki zależne, jest domyślnie wyłączona. Pliki zależne to obrazy, arkusze stylów i inne pliki multimedialne, do których zdefiniowano na stronach witryny połączenia. Konkretnie każdy plik, do którego zdefiniowano w dokumencie HTML połączenie, a który sam nie jest dokumentem HTML, jest uważany za plik zależny. Połączenia e-mail, FTP i do grup dyskusyjnych stanowią wyjątek, bowiem nie są same plikami sensu stricte. Aby wyświetlić pliki zależne, wybierz pozycję Show Dependent Files w menu View.

Zmiana skali mapy witryny

Wyobraź sobie przez chwilę, że jesteś webmasterem takiej witryny jak Amazon.com, obecnie chyba jednego z największych detalistów sieciowych. Zajmujesz się obsługą tysięcy stron. A teraz wyobraź sobie, że wszystkie te strony wyświetlasz na mapie witryny w programie Dreamweaver 4. Straszliwa perspektywa, co?

Całe szczęście Dreamweaver umożliwia zmianę skali mapy w prosty sposób. Dzięki tej opcji można wyświetlić większy wycinek witryny, poświęcając tekst, który zostanie niestety pomniejszony. Przycisk Zoom znajduje się lewym dolnym rogu okna Site (gdy włączony jest widok Site Map). Umożliwia on wyświetlenie menu, z którego można wybierać procentową skalę, w jakiej mapa zostanie wyświetlona: 12, 25, 50, 75 i 100% (patrz rysunek 14.9).

Rys. 14.9. Oto procentowa skala, w jakiej mapa zostanie wyświetlona: 12, 25, 50, 75 i 100%

Zapisywanie mapy witryny jako obrazu

Inna ciekawa opcja, to możliwość zapisania mapy witryny w formacie mapy bitowej (.bmp) lub .png (Portable Network Graphics). Wydrukowana mapa witryny to stała i łatwo dostępna pomoc, gdy trzeba przypomnieć sobie strukturę witryny. Jest także bardzo poręcznym materiałem pomocniczym przy prezentacji struktury witryny klientom. Dzięki wydrukowi, nie musisz już rysować skomplikowanych schematów ręcznie, aby zapoznać klienta z organizacją jego witryny.

Ćwiczenie 14.1. Zapisywanie mapy witryny jako obrazu

Aby zapisać kopię mapy witryny:

1. Sprawdź, czy w oknie Site włączony został widok mapy witryny dla wybranej witryny.

2. Wybierz pozycję Save Site Map z menu File okna Site.

3. Nawiguj do foldera, w którym chcesz zapisać obraz mapy witryny. Podaj nazwę pliku. Rysunek 14.10 posłuży Ci jako podpowiedź.

Rys. 14.10. Wybierz ulokowanie pliku zawierającego obraz mapy witryny

4. Z listy Save As Type wybierz format pliku - .bmp lub .png.

5. Naciśnij przycisk Save.

Zapisany obraz mapy witryny można otworzyć i modyfikować w programie do obróbki grafiki. Plik ten można także dołączyć do wiadomości e-mail lub wydrukować. Wymiary obrazu są wyliczane przez program Dreamweaver i zależą od rozmiaru mapy witryny.

Początek ramki

Podpowiedź

Zazwyczaj natychmiast po zapisaniu mapy witryny otwieram plik w Fireworks (www.macromedia.com/software/fireworks) i eksportuję do formatu .gif korzystając z narzędzi optymalizacji obrazów tego programu. Dzięki zmniejszeniu rozmiaru pliku, mogę go rozsyłać jako załącznik poczty elektronicznej.

Koniec ramki

Kontrola połączeń

Znane jest Ci zapewne uczucie zirytowania, jakie pojawia się, gdy odwiedzasz wspaniałą witrynę i na powitanie otrzymujesz sławny już komunikat: „404 - File not found”. Tak, to niemiłe doświadczenie, nieprawdaż? Nie martw się jednak. Dreamweaver postara się, abyś wiedział o wszystkich martwych połączeniach, zanim dowie się o tym reszta świata.

Masz możliwość sprawdzania połączeń w poszczególnych plikach, w grupach plików lub folderów oraz w całej witrynie. Funkcja Check Links programu Dreamweaver analizuje poprawność połączeń, wyniki kontroli przedstawione są w trzech sekcjach:

• Broken Links - komunikaty o błędach pojawią się w tej sekcji w przypadku istnienia plików, w których zdefiniowano w połączeniach wewnętrznych, a więc w połączeniach do plików zawartych w tej samej witrynie, złe ścieżki dostępu. Tego typu błąd oznacza, że Dreamweaver nie znajduje wskazanego pliku pod adresem URL użytym w połączeniu. Czasami projektanci używają przy definiowaniu połączeń symbolu #, aby umożliwić klikanie na określonym obiekcie. W ten sposób definiuje się połączenia, które prowadzą do nikąd. Są to tak zwane połączenia puste. Są one stosowane przy dołączaniu behawiorów i zdarzeń do obiektów umieszczonych na stronie. Na przykład zastosowano by je w przypadku korzystania z dynamicznego wyświetlania i ukrywania warstw. Należałoby zastąpić znak # wyrażeniem javascript:;. Ten typ fikcyjnego połączenia pojawi się w sekcji połączeń zewnętrznych. Korzystanie z fikcyjnych (lub prawdziwych) połączeń skryptowych zapobiega ponownemu załadowaniu strony po wejściu w połączenie. Kliknięcie takiego połączenia nie powoduje także nagłego przesunięcia strony do samej góry, a więc korzystanie z niego pozwala niejako „zamrozić” pozycję strony.

• External links - połączenia zewnętrzne stanowią chyba najczęstsze źródło problemów z wyświetleniem obrazów oraz błędów 404. Prowadzą one do plików ulokowanych poza witryną. Generalnie najwięcej takich połączeń znajduje się w sekcji Linki czy Połączenia (tak zazwyczaj projektanci nazywają ten element witryny). Połączenia zewnętrzne są wyświetlane, a więc musisz być świadom możliwych z nimi problemów. Należy jednak pamiętać, że pojawienie się połączenia na liście połączeń zewnętrznych nie oznacza, że jest to połączenie zerwane - oznacza jedynie, że znajduje się ono poza zakresem działania systemu zarządzania plikami programu Dreamweaver.

• Orphaned files - „bękartami” nazywa się pliki, do których nie prowadzi żadne połączenie. Zazwyczaj są to starsze wersje plików witryny, które już nie są stosowane. Ich usunięcia nie stanowi dla witryny zagrożenia. Pamiętaj jednakże, że rozszerzalność Dreamweavera implikuje czasami konieczność obecności takich plików. Weźmy choćby behawior Open Picture Window Fever! Drewa McLellan'a. Zanim więc usuniesz bękarty, sprawdź dokładnie, czy nie są potrzebne.

Aby sprawdzić poprawność połączeń w pojedynczym dokumencie:

1. Przed przystąpieniem do procedury kontroli połączeń zapisz plik.

2. Wybierz pozycję Check Links z menu File lub naciśnij Shift+F8. W oknie Site możesz także wskazać plik (w panelu Local), nacisnąć prawy klawisz myszki i wybrać z menu kontekstowego pozycję Check Links, a następnie pozycję Selected Files/Folders z menu podrzędnego.

3. W ten sam sposób możesz skontrolować połączenia w kilku plikach lub folderach (zaznacz je wcześniej z użyciem klawisza Ctrl).

Aby poddać kontroli poprawności połączenia całej witryny:

1. Zapisz wszystkie otwarte dokumenty.

2. Wybierz pozycję Check Links Sitewide z menu Site lub naciśnij Ctrl+F8. W oknie Site możesz także wskazać plik (w panelu Local lub na mapie witryny), nacisnąć prawy klawisz myszki i wybrać z menu kontekstowego pozycję Check Links, a następnie pozycję Entire Site z menu podrzędnego.

Po zakończeniu procedury sprawdzania połączeń wyświetlane jest okno dialogowe Link Checker (patrz rysunek 14.11). Możesz wybrać z listy rozwijanej Show dowolną z trzech sekcji raportu. W przypadku dwóch pierwszych sekcji: Broken Links i External Links, w lewej kolumnie okna wyświetlana jest lista plików, w których stwierdzona została obecność „niepewnych” połączeń. W kolumnie prawej zebrane są te właśnie połączenia. Sekcja Orphaned Files ma tylko jedną kolumnę, ponieważ nie ma połączeń stowarzyszonych z „bękartami”.

Po przeprowadzonej analizie, możesz zamknąć okno Link Checker lub zapisać raport w pliku tekstowym o polach oddzielonych znakami tabulacji. Wszystkie trzy sekcje zostaną zapisane w jednym pliku. Listę możesz zaimportować na stronę korzystając z polecenia Import Tabular Data w menu podrzędnym Import menu File.

Rys. 14.11. Po sprawdzeniu połączeń, przeglądnij listy połączeń zerwanych i zewnętrznych oraz plików, do których nie prowadzą żadne połączenia

Początek ramki

Podpowiedź

Czasami „gubi” mi się okno Link Checker. Choć początkowo pojawia się przy oknie Site (jeśli akurat okno to jest otwarte), to natychmiast stowarzysza się z oknem dokumentu, gdy tylko przestaniesz korzystać z okna Site lub klikniesz menu. Jedynym sposobem, aby powrócić do okna Link Checker jest przełączyć się do okna dokumentu. Może nawet okazać się konieczne otworzenie dokumentu, jeśli nie jest otwarty.

Koniec ramki

Naprawa połączeń

Istnieją dwie metody naprawy zerwanych i zewnętrznych połączeń (o ile rzeczywiście wymagają one naprawy). Obie są dostępne poprzez okno Link Checker (patrz rysunek 14.12). Pierwszy sposób polega na dwukrotnym kliknięciu nazwy pliku, w którym znalezione zostało zerwane lub zewnętrzne połączenie. Spowoduje to otwarcie pliku w oknie dokumentu, w którym wątpliwe połączenie będzie zaznaczone. Jeśli inspektor Property jest uruchomiony (wybierz pozycję Properties w menu Window lub naciśnij Ctrl+F3), połączenie będzie także zaznaczone w polu Link lub Src inspektora. Możesz więc poprawić odwołanie ręcznie lub skorzystać z ikony foldera i wybrać plik.

Druga metoda jest chyba szybsza i prostsza, o ile znasz dobrze swoją witrynę. Kliknij w oknie Link Checker kwestionowane połączenie (w prawej kolumnie). Otworzy to możliwość edycji połączenia. Jeśli naprawiasz zerwane połączenie (sekcja Broken Links), pojawi się ikona foldera, która pozwoli nawigować do właściwego pliku. W przypadku istnienia innych zerwanych połączeń o takim samym odwołaniu, Dreamweaver zapyta, czy one także mają być aktualizowane.

Rys. 14.12. Edycja zerwanych połączeń po wcześniejszej kontroli

Początek ramki

Uwaga

Jeśli przy tworzeniu witryny korzystasz z systemu Check In/Check Out, Dreamweaver przystąpi do pobierania pliku przy użyciu polecenia Check Out, aby umożliwić zmianę połączeń. W przypadku niepowodzenia, program wyświetli komunikat z ostrzeżeniem i pozostawi połączenie jako zerwane.

Koniec ramki

Zmiana połączeń

W jaki sposób Dreamweaver aktualizuje podobne zerwane połączenia, po korekcie jednego z nich w oknie Link Checker? Czasami konieczna jest zmiana odwołania do jakiejś strony w każdym dokumencie witryny. Wykonanie takiego zadania jest w programie Dreamweaver bajecznie proste.

Aby

1. Zaznacz plik w widoku Local okna Site.

2. Wybierz pozycję Change Link Sitewide z menu Site.

3. Wpisz w polu tekstowym Into Links To ścieżkę i nazwę pliku lub skorzystaj z ikony foldera, aby wskazać plik i utworzyć nowe połączenie.

Wszystkie odwołania do tego pliku zostaną zmienione tak, aby wskazywały na nowy plik. Metoda adresowania pozostaje taka sama (jeśli stosowano adresowanie względem foldera głównego witryny, w zmienionym połączeniu będzie one takie samo). W ten sposób usunięte zostają w witrynie wszelkie odwołania do zaznaczonego pliku, a on sam staje się „bękartem”. Możesz go spokojnie usunąć, bez obawy o wygenerowanie zerwanych połączeń.

Synchronizacja witryn lokalnej i odległej

Jednym z problemów, z którym twórcy witryn spotykają się po umieszczeniu wstępnej wersji witryny na serwerze jest inna lokalizacja plików w wersji bieżącej. Problem staje się jeszcze bardziej złożony w przypadku pracy grupowej. Jeśli tylko jedna osoba operuje plikami, zazwyczaj jest w stanie ogarnąć to, co robi. Dreamweaver udostępnia dwa sposoby synchronizacji witryn lokalnej i odległej. Najpierw omówimy „starą” metodę ręczną, a następnie zajmiemy się zautomatyzowaną procedurą o szerokich możliwościach, która uruchamiana jest poleceniem Synchronize.

Polecenia Select Newer Local/Remote

Aby przeprowadzić ręczną procedurę synchronizacji, można skorzystać z poleceń Select Newer Local/Remote. Ta funkcja porównuje dla każdego pliku daty modyfikacji na komputerze lokalnym i odległym serwerze. Następnie określa ulokowanie plików i wybiera je. Aby przeprowadzić pełną synchronizację, musisz skorzystać z obu funkcji. Aby wybrać nowsze pliki na komputerze lokalnym, wybierz pozycję Select Newer Local z menu Edit. Z kolei, aby zrobić to samo w odniesieniu do witryny odległej, wybierz z menu Edit polecenie Select Newer Remote.

Początek ramki

Podpowiedź

Ważne jest, aby dla obu witryn (na odległym serwerze i na komputerze lokalnym) zdefiniować dokładny czas. W przeciwnym razie możesz niechcący spowodować wybranie starszych plików jako nowszych.

Koniec ramki

Po wydaniu jednego ze wspomnianych poleceń, wszystkie nowsze pliki w danej lokalizacji witryny zostaną w oknie Site zaznaczone. Naciśnięcie przycisku Put lub zastosowanie skrótu Ctrl+Shift+U spowoduje przesłanie ich do witryny odległej. W ten sposób dokonana została połowa synchronizacji. Realizacja reszty procesu wymaga wybrania nowszych plików w ulokowaniu odległym. Gdy te pliki także zostaną zaznaczone, naciśnięcie przycisku Get lub zastosowanie skrótu Ctrl+Shift+D spowoduje przesłanie ich do lokalnej kopii witryny. W ten sposób obie witryny będą miały najświeższe wersje wszystkich plików.

Chciałbym podzielić się dwoma uwagami, które dotyczą korzystania z tej metody synchronizacji witryn:

• Ponieważ Dreamweaver zaznacza tylko pliki nowsze, pliki dokładnie takie same (to znaczy pod względem daty i godziny modyfikacji) nie zostaną zaznaczone. Jeśli witryna jest już zsynchronizowana, uruchomienie procedur nie spowoduje więc zaznaczenia jakiegokolwiek pliku. Nie oznacza to, że nic się nie stało, lecz po prostu że obie witryny są aktualne.

• Ponieważ Dreamweaver sprawdza wszystkie pliki witryny, wykonanie polecenia Select Newer Remote może zabrać trochę czasu, szczególnie wówczas, gdy łącza mają niewielką przepustowość. Czasami sprawia to wrażenie pozornego „zamrożenia” operacji.

Polecenie synchronizacji

Wprowadzone w wersji 3 programu Dreamweaver polecenie synchronizacji stanowi lepszą metodę synchronizacji plików, niż ręczne wybieranie nowszych plików, o którym wspominaliśmy w poprzednim punkcie. Synchronizacja uruchamiana jest poprzez wybrania polecenia Synchronize z menu Site. Doskonałość tego polecenia do pewnego stopnia wynika z możliwości bardzo precyzyjnego określenia zakresu synchronizacji. Oznacza to, że możesz przeprowadzić synchronizację tylko jednego foldera lub całej witryny. Możesz także zdecydować o usuwaniu każdego pliku witryny odległej, który nie ma swojego odpowiednika w kopii lokalnej, i vice versa. Poprzednia metoda nie daje takich możliwości.

Początek ramki

Uwaga

Pamiętaj, że polecenie Synchronize pozwala synchronizować pojedyncze pliki, grupy plików lub całe witryny. Jeśli nie chcesz poddać temu procesowi wszystkich plików witryny, musisz wcześniej wskazać pliki (w panelu Local okna Site), które mają zostać zsynchronizowane.

Koniec ramki

Aby przeprowadzić synchronizację korzystając z polecenia Synchronize:

1. Zaznacz pliki, które chcesz poddać procesowi synchronizacji (jeśli nie ma to być cała witryna) i wybierz pozycję Synchronize z menu Site. Wyświetlone zostanie okno dialogowe Synchronize Files, takie jak na rysunku 14.13.

2. Wybierz z listy rozwijanej Synchronize, czy chcesz poddać aktualizacji całą witrynę, czy też grupę plików.

3. Wybierz z listy rozwijanej Direction sposób synchronizacji. Do wyboru masz następujące opcje:

• Put newer files to remote - ta opcja spowoduje umieszczenie na odległym serwerze nowszych wersji plików lokalnych.

• Get newer files to remote - ta opcja spowoduje pobranie z odległego serwera nowszych wersji plików i umieszczenie ich na komputerze lokalnym.

• Get and Put newer files - w tym przypadku synchronizacja odbywa się w obie strony, w więc pliki są [pobierane i wysyłane.

Rys. 14.13. Wskaż, czy chcesz przesyłać, pobierać, czy też i przesyłać, i pobierać pliki

4. Jeśli wybierasz pozycję Get and Put newer files, przejdź od razu do punktu 5. Natomiast wskazanie jednego z dwóch pierwszych kierunków synchronizacji pozwala wybrać jeszcze jedną opcję: jeśli umieszczasz nowsze pliki na odległym serwerze, możesz usunąć z serwera pliki wcześniejsze, których nie ma na komputerze lokalnym -zaznacz w tym celu pole wyboru. Podobnie, pobierając nosze pliki z odległego serwera, masz możliwość usunięcia plików lokalnych, które nie mają odpowiedników na serwerze. Pole włączania opcji usuwania umieszczone jest z lewej strony okna dialogowego Synchronize Files. Pamiętaj, że usunięcie pliku jest nieodwracalne i nie da się cofnąć. Korzystaj więc ostrożnie z tej opcji.

Początek ramki

Uwaga

Prowadząc synchronizację w kierunku zdalny serwer-komputer lokalny (opcja Get Newer Files from Remote), możesz usuwać lokalnie pliki, które nie mają odpowiedników na zdalnym serwerze. Korzystając z tej opcji zachowaj najdalej idącą ostrożność. Większość projektantów przechowuje swoje pliki źródłowe (takie jak pliki programu Photoshop w formacie *.psd lub pliki Fireworks *.png) w folderach witryny lokalnej. Pliki te zazwyczaj nie są przesyłane na serwer przy publikowaniu witryny. Przed wydaniem polecenia synchronizacji, zawsze czytaj w oknie dialogowym Synchronize, jakie zmiany są proponowane. Kilka chwil poświęconych na przeczytanie paru zdań to nic w porównaniu z godzinami, które możesz stracić, aby zniwelować szkody wynikłe z podjęcia niewłaściwej decyzji. Jeśli usuniesz przypadkowo jakieś pliki lokalne, których nie miałeś zamiaru usuwać, masz szansę je uratować. Trafiają one do Kosza, skąd możesz je odzyskać, o ile chcesz.

Koniec ramki

5. Naciśnij przycisk Preview. Spowoduje to otwarcie okna dialogowego Synchronize (patrz rysunek 14.14). Okno to daje efektywny podgląd tego, co się zdarzy, gdy naciśniesz OK. Widzisz w nim, ile plików będzie synchronizowanych, jakie zostanie podjęte wobec nich działanie (pobranie, przesłanie, czy usunięcie), a także jakie są nazwy plików.

6. Domyślnie, wszystkie pola wyboru w kolumnie Action tego okna są zaznaczone. Wyczyszczenie pola wyboru wyłącza plik spod dalszej obróbki. Masz więc w ten sposób dokładną kontrolę nad przebiegiem wypadków i możliwość zmiany działań programu Dreamweaver.

7. Naciśnij OK.

Rys. 14.14. Po przeprowadzeniu synchronizacji, będzie możliwe przejrzenie wszystkich podejmowanych przez Dreamweaver działań

Dreamweaver informuje o postępie procesu synchronizacji, a po jej zakończeniu umożliwia zapisanie pliku tekstowego procedury w celu przeanalizowania. Taki plik można zaimportować na stronę WWW korzystając z polecenia Import Tabular Data w menu podrzędnym Import menu File.

Początek ramki

Uwaga

Polecenie Synchronize jest dostępne w oknie Site, lecz okno dialogowe Synchronize Files „woli” okno dokumentu. Jeśli okno synchronizacji nagle Ci zniknie, spróbuj przełączyć się do okna dokumentu (lub nawet otworzyć plik HTML). To zazwyczaj rozwiązuje problem.

Koniec ramki

Narzędzie znajdowania i zamiany

Raz jeszcze wrócę do historyjki o nazwie CFO, którą wcześniej opowiadałem. Jak pamiętasz, nazwa ta została podana na stronie WWW z błędem. Wyobraź sobie teraz, że taki błąd pojawia się na wielu stronach witryny. Zazwyczaj nazwom nie są przypisywane ich własne pozycje biblioteczne, tak więc musiałbyś odszukać każdą instancję błędu i poprawić. Ta właśnie sytuacja zbliża nas do tematu tego rozdziału - przeprowadzania w programie Dreamweaver operacji znajdywania i zamiany.

Od czasu do czasu - no dobrze, raczej często - pojawia się potrzeba zastąpienia na stronie WWW jakiejś frazy lub zdania, powtarzających się wielokrotnie. Chociaż Dreamweaver oferuje narzędzia zarządzania połączeniami, pozycje biblioteczne i inne opcje ułatwiające procedurę ręcznej zamiany, to i tak się to zdarza. Okno dialogowe Find and Replace, pokazane na rysunku 14.15, jest tak proste w użyciu jak jego odpowiednik z edytora tekstu. A przy wykorzystaniu w zapytaniach wyrażeń, staje się ono narzędziem o bardzo szerokich możliwościach, podobnie jak w przypadku innych narzędzi programistycznych. Jest kilka wyjątków, ponieważ mamy do czynienia z kodem HTML, lecz jeśli stosowałeś narzędzie Find and Replace z innego programu, nie powinieneś mieć problemów z przyzwyczajeniem się do interfejsu Dreamweavera.

Zanim omówimy poszczególne metody znajdywania, musisz dowiedzieć się, jak wywołać okno Find and Replace, oraz poznać wspólne cechy metod znajdywania. Aby wyświetlić okno Find and Replace, wybierz pozycję Find and Replace z menu Edit lub zastosuj skrót Ctrl+F. W widoku kodu natomiast możesz skorzystać z menu kontekstowego - w dowolnym miejscu kodu kliknij prawym klawiszem myszki i wybierz z menu kontekstowego pozycję Find and Replace. Spowoduje to wyświetlenie okna dialogowego Find and Replace, w którym możesz zdefiniować swoje zapytanie. Tabela 14.1 zawiera opisy poszczególnych ustawień tego okna - atrybutów zapytania. Funkcje atrybutów pozostają zawsze takie same, niezależnie od typu wyszukiwania.

Rys. 14.15. Okno dialogowe Find and Replace

Tabela 14.1. Elementy okna Find and Replace

Ustawienie	Opis
Find In	Na tej liście rozwijanej są do wyboru cztery opcje wskazujące zakres działania operacji znajdywania. W przypadku wybrania opcji Current document, operacja ograniczy się tylko do okna dokumentu, które było aktywne w chwili wybierania polecenia Find and Replace. Jeśli opcja zostanie wybrana, z prawej strony listy pojawi się nazwa dokumentu. Wybranie pozycji Entire Local Site spowoduje przeszukanie całej witryny. Jej nazwa pojawi się z prawej strony listy, podobnie jak dla poprzedniej opcji nazwa dokumentu. Opcja Files in Site umożliwia przeprowadzenie operacji w wybranych plikach. Zaznacz je w oknie Site, korzystając z pomocy klawisza Ctrl. Ostatnia z możliwości to Folder. Jeśli ją wybierzesz, z prawej strony pola listy pojawi się pole tekstowe, w którym możesz ręcznie wpisać ścieżkę dostępu do foldera. Jeśli jej nie pamiętasz, kliknij ikonę foldera i znajdź żądany folder. W tym przypadku operacją objęty zostanie folder wraz z folderami podrzędnymi.
Search For	Na tej liście znajdziesz cztery możliwości. Wybranie opcji Source Code umożliwia znalezienie kodu HTML. Opcja Text pozwala znajdować tylko tekst, natomiast kod HTML jest ignorowany. Pomijany jest także kod, który rozdziela łańcuch tekstowy, tak jak na przykład w tym przykładzie: „Pies został <i>zaadoptowany</i> przez bardzo miłą rodzinę” - tutaj znaczniki <i> i </i> zostaną pominięte. Opcja Text (Advanced) umożliwia znajdywanie łańcuchów znaków wewnątrz i na zewnątrz niektórych znaczników HTML. W tym przypadku należy podać szukany fragment tekstu oraz wskazać, czy jest on, czy też nie jest umieszczony w określonym znaczniku. Opcja Specific Tag służy do wyszukiwania znaczników HTML i pozwala na bardzo dokładne sprecyzowanie postaci szukanego znacznika. Jest stosowana przy dodawaniu, usuwaniu i zmianie atrybutów znacznika. Będzie na przykład użyteczna przy zastępowaniu stylów definiowanych lokalnie arkuszem stylów, gdy trzeba znaleźć i usunąć znaczniki <font>.
Match Case	Zaznaczenie tego pola wyboru spowoduje, że Dreamweaver będzie zgłaszał wystąpienia szukanego łańcucha znaków tylko wówczas, jeśli będzie się zgadzać wielkość liter. Innymi słowy zaznaczenie tego pola spowoduje, że procedura znajdywania stanie się czuła na wielkość liter.
Ignore Whitespace Differences	Zaznaczenie tego pola wyboru spowoduje, że wielokrotne spacje zostaną potraktowane jako pojedyncze. Ta opcja nie jest dostępna, jeśli zaznaczono pole Use Regular Expressions, ponieważ sposób potraktowania wielokrotnych spacji można zapisać przy użyciu wyrażeń regularnych.
Use Regular Expressions	Jeśli to pole wyboru zostanie zaznaczone, umożliwi to stosowanie wyrażeń regularnych w operacjach znajdywania. W punkcje „Stosowanie wyrażeń regularnych”, w dalszej części rozdziału, znajdziesz wyjaśnienie działania tej opcji.

Po zdefiniowaniu ustawień, musisz zdecydować się, którą z dostępnych metod znajdowania zastosować. Dreamweaver 4 udostępnia dwie metody, a każda z nich występuje w dwóch odmianach (co daje cztery typy poleceń):

• Find Next - ten przycisk uruchamia procedurę znajdowania skonfigurowaną w oknie Find and Replace. Dokument skanowany jest od góry do dołu. W przypadku przeszukiwania kilku dokumentów, po zakończeniu procedury w jednym z nich, podejmowana jest ona w następnym, aż do ostatniego z dokumentów.
  Naciśnięcie przycisku powoduje zatrzymanie procedury przy pierwszym wystąpieniu szukanego łańcucha znaków. Aby kontynuować proces, musisz ponownie nacisnąć przycisk Find Next. Powtarzaj tę operację, aż do końca dokumentu (lub dokumentów).

• Find All - ten przycisk uruchamia automatyczną procedurę skanowania całego dokumentu, foldera lub witryny, co zależy od ustawień wybranych w oknie Find and Replace. Ta opcja działa tak, jakby Dreamweaver za Ciebie naciskał przycisk Find Next. Nie bój się - program rejestruje wszystkie wystąpienia szukanego łańcucha znaków i na końcu przedstawia raport.
  Po zakończeniu procesu skanowania, okno Find and Replace jest rozbudowywane o panel raportu. Raport tworzy lista plików i znalezionych wystąpień szukanego łańcucha. Dwukrotne kliknięcie wpisu pliku w raporcie spowoduje otwarcie pliku. Wraz z nim otwiera się okno Code Inspector, w którym zaznaczone jest wystąpienie łańcucha.

• Replace - pierwsze naciśnięcie tego przycisku działa dokładnie tak, jak naciśnięcie Find Next. Kolejne naciśnięcia spowodują jednak zastąpienie zaznaczonego łańcucha znaków zawartością pola tekstowego Replace With i przejście do procedury znajdywania następnego wystąpienia szukanego tekstu.

Początek ramki

Podpowiedź

Jeśli ze znalezionych łańcuchów znaków chcesz zamienić tylko kilka, możesz skorzystać z mojego pomysłu na kooperatywne wykorzystanie poleceń Find All i Replace. Najpierw znajdź wszystkie wystąpienia łańcucha, który chcesz zamienić. Następnie klikaj dwukrotnie poszczególne pozycje listy wyników procedury znajdywania. Przeglądnij otwierane w ten sposób dokumenty, aby znaleźć te, w których łańcuch ma zostać zastąpiony innym.

Jeśli dokument zawiera taki łańcuch, upewnij się, że odwołanie do tego wystąpienia jest na liście rezultatów nadal zaznaczone i, po sprawdzeniu wszystkich wystąpień, kliknij przycisk Replace. W ten sposób możesz zamienić dowolną liczbę wystąpień danego łańcucha znaków.

Koniec ramki

• Replace All - po naciśnięciu tego przycisku pojawi się ostrzeżenie, że efekty działania operacji są nieodwracalne i w związku z tym nie można ich cofnąć. Operacja powoduje zastąpienie wszystkich wystąpień szukanego łańcucha znaków zawartością pola tekstowego Replace With.
  Polecam najpierw skorzystać z procedury Find All, a dopiero potem sięgnąć po polecenie Replace All. W ten sposób zanim zostanie podjęte działanie, możesz przynajmniej z grubsza przejrzeć wystąpienia łańcucha, co daje możliwość wychwycenia oczywistych błędów i dostosowania procedury znajdywania przed przystąpieniem do zamiany wszystkich znalezionych instancji łańcucha.

Początek ramki

Podpowiedź

Chociaż efekty działania polecenia Replace All są nieodwracalne, możesz ponownie uruchomić procedurę znajdywania i zamiany. Zastosuj takie same opcje, lecz zamień miejscami zawartość pól Search For i Replace With.

Koniec ramki

Omówiliśmy podobieństwa różnych typów procedur znajdywania, zastanówmy się więc nad różnicami.

Znajdowanie kodu źródłowego i tekstu

Procedura znajdywania kodu źródłowego (Source Code na liście Search For) umożliwia znajdywanie zarówno tekstu wyświetlanego w przeglądarce jak i znaczników HTML użytych na stronie. Natomiast procedura znajdywania tekstu (Text na liście Search For) ogranicza się tylko do wyświetlanego w przeglądarce tekstu.

Aby skorzystać z którejś z tych procedur, otwórz okno dialogowe Find and Replace stosując jeden z opisanych na początku tego punktu sposobów. Wybierz następnie z listy Search For pozycję Source Code lub pozycję Text. W polu tekstowym z prawej strony listy Search For wpisz łańcuch znaków, który chcesz znaleźć. Jeśli jego wystąpienia mają zostać zastąpione innym łańcuchem, podaj go w polu Replace With. Skorzystaj z wcześniej opisanych metod znajdywania i zamiany (o ile to konieczne) wprowadzonego łańcucha.

Wskazanie opcji Source Code informuje Dreamweavera, aby szukał w dokumencie łańcucha znaków, który jest elementem zwykłego tekstu lub znacznika HTML. Na przykład przy szukaniu łańcucha znaków large tank zostałyby zwrócone dwa wystąpienia: jedno w atrybucie ALT znacznika <IMG> oraz drugie, ze zdania (patrz rysunek 14.16 i kod poniżej). Gdyby procedura znajdywania objęła tylko tekst, zwrócone zostałoby tylko to drugie wystąpienie łańcucha. Moje rozważania opieram na tym oto fragmencie kodu źródłowego:

<p><img src=”sherman_dozer.gif” alt=”The Sherman Dozer was a Large Tank”> </p>

<p>The Sherman Dozer was one of the larger tanks used in World War II. Large tanks like this were built for combat, but this particular model also served as an engineer bulldozer.</p>

Rys. 14.16. Uruchomiono zwykłą procedurę znajdywania łańcucha „large tank”

Aby następnie zastąpić tekst „large tank” tekstem „small tank”, wpisz po prostu tekst zastąpienia w polu Replace With, tak jak pokazuje rysunek 14.17.

Rys. 14.17. Zamieniono łańcuch „large tank” na łańcuch „small tank”

Zaawansowane procedury znajdywania tekstu

Zaawansowane procedury znajdywania tekstu umożliwiają ograniczenie przeszukiwań do wnętrza znaczników lub tego, co znajduje się poza znacznikami, przy czym możliwe jest nawet wskazanie atrybutów, które znacznik musi mieć lub nie może mieć. Ta odmiana procedury znajdowania przypomina znajdywanie zwykłego tekstu, z tym wyjątkiem, że tam nie można wskazać znaczników, które mają być uwzględnione lub wykluczone.

Skorzystaj z jednej z metod wyświetlenia okna dialogowego Find and Replace. Następnie wybierz z listy Search For pozycję Text (Advanced). W polu tekstowym z prawej strony listy Search For wpisz łańcuch znaków, który chcesz znaleźć.

Poniżej listy Search For znajdziesz dwa przyciski: plus (+) i minus (-). Umieszczone są w tym obszarze okna, gdzie wskazujesz znacznik, który jest celem procedury. Wybierz, czy łańcuch ma być szukany wewnątrz znacznika (Inside Tag), czy też na zewnątrz (Not Inside Tag). Następnie wybierz znacznik, którego ten warunek dotyczy. Jeśli klikniesz przycisk +, możesz zdefiniować dodatkowe parametry ograniczające zakres poszukiwań lub wybrać całkowicie inny znacznik i ograniczyć lub rozbudować zakres poszukiwań.

Jeśli wystąpienia szukanego łańcucha znaków mają być zastąpione innym łańcuchem, wpisz tekst w polu Replace With. Skorzystaj z wcześniej opisanych metod znajdywania i zamiany (o ile to konieczne) wprowadzonego łańcucha.

Znajdowanie znaczników

Procedura znajdowania znaczników całkowicie ignoruje tekst znajdujący poza znacznikami. Ten typ znajdywania jest przeznaczony przede wszystkim do modyfikowania atrybutów znaczników. Może znaleźć także inne zastosowania, na przykład takie jak dodawanie, zmiana i usuwanie znaczników lub dodawanie tekstu przed lub za znacznikiem. Zazwyczaj jednak - tak przynajmniej wynika z mojego doświadczenia - opcja jest wykorzystywana do modyfikacji atrybutów znaczników.

Skorzystaj z jednej z metod wyświetlenia okna dialogowego Find and Replace. Następnie wybierz z listy Search For pozycję Specific Tag. Z listy rozwijanej z prawej strony listy Search For wybierz znacznik, który chcesz znaleźć. Jeśli interesuje Cię sam znacznik, a nie jego atrybuty, naciśnij przycisk minus (-), obok listy rozwijanej.

Teraz kolej na zdefiniowanie warunków procedury znajdywania dla tego znacznika. Rozwiń listę obok znaku +. Znajdziesz na niej takie możliwości: With Attribute (z atrybutem), Without Attribute (bez atrybutu), Containing (zawierający), Not Containing (nie zawierający), Inside Tag (wewnątrz znacznika) i Not Inside Tag (poza znacznikiem) Korzystając przycisków + i - możesz dodać kolejny warunek lub usunąć.

Po zbudowaniu listy warunków, możesz rozpocząć procedurę znajdywania, korzystając z metod opisanych wcześniej.

Rys. 14.18. Skonfigurowanie procedury znajdowania i zamiany znacznika to złożony proces i wymaga przemyślenia

Stosowanie wyrażeń regularnych

Wyrażenia regularne są stosowane do testowania wprowadzonego łańcucha pod względem zgodności z wzorcem składni opartym o symbole wieloznaczne. W programie Dreamweaver wyrażenia regularne tworzone są za pomocą symboli wieloznacznych i umożliwiają zdefiniowanie warunku, zakresu lub pozycji. Jeśli na przykład chcesz znaleźć na stronie WWW wszystkie numery telefonów, lecz nie znasz konkretnie tych numerów, możesz skorzystać z wyrażenia regularnego, aby z jego pomocą opisać format, w jakim numery są prezentowane. Także jeśli chcesz znaleźć adresy e-mail, wyrażenia regularne przyjdą Ci z pomocą. Musisz jednak zachować ostrożność i testować wyrażenia, zamiast zakładać, że są napisane bezbłędnie.

Ponieważ w wyrażeniach regularnych stosowane są symbole wieloznaczne, takie jak * i ?, konieczny jest także znak sterujący. Znak sterujący nakazuje zinterpretować następujący po min znak jako zwykły znak, a nie znak wyrażenia regularnego. Znakiem sterującym jest lewy ukośnik (\). Aby znaleźć na przykład gwiazdkę (*) i zapobiec zinterpretowaniu jej zgodnie ze znaczeniem wyrażenia, należałoby napisać \*. Podobnie, aby lewy ukośnik nie został potraktowany jako znak sterujący, konieczne jest wpisanie wyrażenia \\.

Tabela 14.2 prezentuje niektóre wyrażenia regularne, które można stosować w programie Dreamweaver. Znajdziesz je także w dokumentacji programu (i w większości książek o Dreamweaverze).

Wyrażenie	Znaczenie
^	Początek porównywanego tekstu. Wyrażenie ^A wykryje literę A w tekście „all for one”, lecz nie w tekście „one for all”.
$	Koniec porównywanego tekstu. $S wykryje tylko drugą z liter s w tekście „biscuits”.
*	Poprzedzający znak nie występuje lub występuje dowolną liczbę razy. om* wykryje „om” w „mom”, „omm” i w „mommy” oraz „o” w „son”.
+	Poprzedzający znak występuje dowolną liczbę razy. om+ wykryje „om” w „mom”, „omm” i w „mommy”, lecz nie wykryje „o” w „son”.
?	Poprzedzający znak występuje najwyżej raz. Tak więc, oznacza to, że „sen” i „Sn” w „Andersen” będą w tu opcjonalne. so?e?n wykryje „son” w „Anderson” i „sn” w „Snack”, lecz nic nie wykryje w „Soon”.
.	Dowolny znak, za wyjątkiem nowego wiersza. r.n wykryje „Ran” i „run”, lecz nie wykryje „rain” (bo tu są dwa znaki między r a n).
x|y	x lub y. cat|dog wykryje albo „cat”, albo „dog”.
{n}	Dokładnie n wystąpień poprzedzającego znaku. r{2} wykryje podwójne r w „irre-character.sistible”, lecz nie wykryje r w „rounder”.
{n,m}	Przynajmniej n i najwyżej m wystąpień poprzedzającego znaku. 0{2,4} wykryje dwa zera w „00EEEE” i trzy zera w „000EEE”, lecz nie wykryje zer w „0e0e0e”.
[abc]	Dowolny znak z podanej w nawiasach listy. Można podać zakres znaków korzystając z myślnika. Na przykład [a-f] jest równoważne [abcdef]. [rslf] wykryje r i l w „real”, f i r w „forever” oraz s i f w „self”.
[^abc]	Dowolny znak, którego nie ma na liście podanej w nawiasach. Można podać zakres znaków korzystając z myślnika. Na przykład [^a-f] jest równoważne [^abcdef]. [^els] wykryje „who”, lecz nie wykryje „else” w „or else”.
\b	Poszukiwanie liter na krawędzi słów. \bc wykryje c w „cure”, lecz nic nie wykryje w wyrazach „juice” i „electronic”.
\B	Poszukiwanie liter wewnątrz słów. \Bc wykryje c w wyrazach „juice” i „electronic”, lecz nic nie wykryje w słowie „cure”.
\d	Poszukiwanie dowolnej cyfry. Równoważne wyrażeniu [0-9]. \d wykryje cyfrę 2 w „R2D2”, lecz nic nie wykryje w „Skywalker”.
\D	Poszukiwanie dowolnego znaku, który nie jest cyfrą. Równoważne wyrażeniu [^0-9]. \D wykryje słowo „Skywalker” oraz litery R i D w „R2D2”.
\f	Wysuw strony.
\n	Wysuw linii.
\r	Powrót karetki.
\s	Dowolny pojedynczy odstęp, w tym spacja, znak tabulacji, znak wysuwu strony lub linii. \sone wykryje „one” w „is he the one?”, lecz nie wykryje nic w zdaniu „someone's there!”.
\S	Dowolny pojedynczy znak, który nie jest odstępem. \Sone wykryje „one” w „someone's there!”, lecz nie wykryje nic w zdaniu „is he the one?”.
\t	Tabulator.
\w	Dowolny znak alfanumeryczny. Równoważne wyrażeniu [A-Za-z0-9_]. r\w* wykryje „running” w „running wildly” oraz „ran” i „road” w zdaniu „He ran down the road”.
\W	Dowolny znak, który nie jest znakiem alfanumerycznym. Równoważne wyrażeniu [^A-Za-z0-9_]. \W wykryje wszystkie spacje oraz gwiazdkę (*) w „*certain restrictions may apply”.
Ctrl+Enter lub Shift+Enter	Znak nowego wiersza („Return”). Pamiętaj, aby wyczyścić pole wyboru Ignore Whitespace Differences, jeśli szukasz tego znaku nie korzystając z wyrażeń regularnych. Wykryty zostanie konkretny znak, a nie znacznik łamania wiersza. Na przykład nie zostaną wykryte znaczniki <br> i <p>. Znaki „Return” pojawią się jako spacje w oknie dokumentu, a nie jako łamania wierszy.

Ćwiczenie 14.2. Przeprowadzanie operacji znajdywania i zamiany

W tym ćwiczeniu skorzystamy z plików znajdujących się w folderze Chapter 14 na dysku CD dołączonym do książki.

1. Skopiuj pliki oraz foldery z foldera Chapter 14 na dysku CD na dysk twardy i zdefiniuj w programie Dreamweaver witrynę.

2. Twoje zadanie polega na dodaniu połączeń do plików faq.htm i search.htm. Mają się one pojawić u góry strony, na pasku nawigacji, z jego prawej strony. Spójrz na rysunek 14.19 - na razie nie ma na stronie połączeń do tych plików.

Rys. 14.19. Twoje zadanie polega na zdefiniowaniu połączeń do plików fqa.htm i search.htm i umieszczeniu ich na pasku nawigacji

3. Podpowiedź jest w tym przypadku taka - zacznij od procedury Find All. Potem, gdy opanujesz już poprawne definiowanie szukanego łańcucha znaków, podaj łańcuch, który zastąpi znaleziony. Otwórz więc okno dialogowe Find and Replace.

4. Przeszukaj kod źródłowy całej witryny lokalnej, znajdując wszystkie wystąpienia tekstu „About our Company”. Zaznacz pola wyboru Match Case i Ignore Whitespace Differences. Znalezionych zostanie piętnaście pozycji w piętnastu dokumentach, co pokazuje rysunek 14.20.

Rys. 14.20. Opcje procedury Find and Replace oraz jej wyniki

5. Każde ze znalezionych wystąpień szukanego tekstu kodu możesz teraz kliknąć dwukrotnie, aby zobaczyć je bezpośrednio w dokumencie (oraz w jego kodzie). Można teraz wpisać w polu Replace With kod, który zastąpi tekst znaleziony, i doda nowe połączenia. Kod jest następujący:
   About our Company</a> | <a href=”faq.htm”>FAQ</a> | <a href=”search.htm”>Search
   W łańcuchu, który ma zastąpić tekst znaleziony (zawartość pola Replace With) konieczne jest dołączenie także i tego tekstu („About our Company”). Po wprowadzeniu kodu, kliknij przycisk Replace All. Rysunek 14.21 pokazuje, jak będzie wyglądał ekran, po zakończeniu procedury.

6. Wyświetl ponownie strony w przeglądarce. Na wszystkich powinny pojawić się połączenia do stron FAQ i Search. Ta jedna operacja pozwoliła na zaktualizowanie piętnastu stron.

W tym ćwiczeniu cenne jest to, że nawet jeśli wszystko Ci się pomiesza, możesz ponownie skopiować pliki na dysk twardy. Nie bój się więc eksperymentować z tą opcją i zbadać jej możliwości szerzej, niż to zrobiliśmy tutaj.

Z rezultatów tego ćwiczenia będziemy korzystać w następnych dwóch ćwiczeniach, nie pozbywaj się ich więc.

Rys. 14.21. Jeśli po zamianie tekstu na kod coś nie działa, sprawdź dokładnie kod

Zapisywanie wzorców dla procedur znajdywania oraz znajdywania i zamiany

Zdarza się czasami, że tę samą procedurę znajdywania i zamiany trzeba powtarzać wielokrotnie. Skonfigurowanie wszystkich parametrów i warunków to zajęcie dość nużące i złożone. Całe szczęście Dreamweaver pozwala zapisać zapytania i korzystać z nich przy kolejnych operacjach.

Wzorce zapytań są przechowywane w folderze podrzędnym Queries foldera Configuration w katalogu programu Dreamweaver. Są to dokumenty XML i jako takie mogą być modyfikowane ręcznie, poza programem Dreamweaver. Jednak w przypadku większości użytkowników będzie bezpieczniej i prościej, jeśli kwestie modyfikacji kodu XML pozostawią oni programowi.

Zapisać można zarówno szukany wzorzec, jak i wzorzec tworzony przez obie komponenty: element szukany i zastępujący. Wzorzec dla procedury znajdywania ma rozszerzenie nazwy .dwq, natomiast dla procedury znajdywania i zamiany rozszerzenie ma postać .dwr. Niech Cię nie przeraża to zróżnicowanie rozszerzeń - Dreamweaver sam dołącza odpowiednie rozszerzenie do nazwy pliku, a więc Ty nie musisz o tym pamiętać.

Aby zapisać zapytanie:

1. Kliknij przycisk Save Query, na którym umieszczona jest ikona dyskietki. Na rysunku 14.22 możesz zobaczyć ulokowanie tego przycisku.

2. W wyświetlonym oknie dialogowym Save Query podaj nazwę pliku. Jak pamiętasz, Dreamweaver sam doda odpowiednie rozszerzenie nazwy, nie musisz więc tego robić.
   Nazwa, którą nadajesz zapytaniu powinna odzwierciedlać jego cel, co wydaje się oczywiste i nie wymaga chyba komentarza. Jeśli liczba zapisanych zapytań będzie duża, opisowa nazwa będzie pomocna przy odszukaniu tego właściwego.

3. Kliknij przycisk Save. Z zapisanych zapytań można w każdej chwili skorzystać - wystarczy tylko kilknąć parę razy myszką.

Rys. 14.22. Umiejscowienie przycisków Save Query i Load Query

Aby wczytać zapisane zapytanie:

1. Kliknij przycisk Load Query. Na tym przycisku umieszczono ikonę foldera. Na rysunku 14.22 możesz zobaczyć jego ulokowanie.

2. Wyświetlany w oknie Load Query katalog domyślny jest taki sam jak w oknie Save Query. Jeśli plik został umieszczony w innym katalogu, odszukaj go.

3. Kliknij dwukrotnie nazwę pliku lub zaznacz ją i naciśnij przycisk Open. Opcje i warunki zapytania zostaną załadowane do okna Find and Replace.

Po wprowadzeniu warunków zapytania do okna Find and Replace, należy bardzo dokładnie sprawdzić wszystkie ustawienia. Jest to uwaga generalna - zawsze należy nawet dwukrotnie sprawdzać coś, co w znaczącym stopniu wpłynie na Twoją witrynę. We wczytanym zapytaniu możesz wprowadzić zmiany i zastąpić oryginał zmodyfikowaną kopią.

Raporty witryny

Skorzystanie z raportów witryny to doskonały sposób, aby dokonać ostatnich poprawek w dokumentach HTML. Raporty dostarczają wielu cennych informacji, dzięki którym można poprawić takie usterki dokumentu jak obecność wielokrotnych zagnieżdżonych znaczników <font>, które można zastąpić jednym znacznikiem, brak tekstu alternatywnego połączeń, istnienie nadmiarowych znaczników zagnieżdżonych, znaczników pustych czy brak tytułu dokumentu. Raporty można także zbudować na bazie danych dziennika projektu (Design Notes). Można także wygenerować raporty uwzględniające wszystkie pliki pobrane do edycji przez członków zespołu.

Tak więc do dyspozycji masz wiele typów raportów, a generowany raport może uwzględniać różne kryteria i podawać informację sumaryczną. Wszystkie raporty HTML są tak oczywiste, że nie wymagają wyjaśnień. Nieco bardziej skomplikowane są raporty dotyczące pracy grupowej - Check Out By i Design Notes. Wszystkie typy raportów zostały omówione w tabeli 14.3, a ich ulokowanie prezentuje rysunek 14.23.

Tabela 14.3. Raporty pracy grupowej i HTML

Raport	Opis
Check Out By	Jeśli zaznaczone zostanie to pole wyboru, uaktywni się przycisk Report Settings, w lewym dolnym rogu okna Reports. Naciśnij go, aby otworzyć okno dialogowe Check Out By. Wpisz w nim szukaną nazwę użytkownika, pamiętając, że wielkość znaków jest tu istotna. Nie musisz wpisywać całej nazwy - jeśli na przykład szukanym użytkownikiem jest Jeffrey Steward, wystarczy podać Jeff, Jeffrey lub Steward.
Design Notes	Zaznaczenie tego pola wyboru, także uaktywni przycisk Report Settings, w lewym dolnym rogu okna Reports. Naciśnij go, aby otworzyć okno dialogowe Design Notes. Podaj w nim czy analizowane mają być uwagi (Notes), czy też status (Status) oraz określ warunek, który ma być spełniony. Jeśli na przykład szukasz wszystkich plików, które mają status Final (zakończono), w pierwszej kolumnie należy wpisać Status, w drugiej wybrać warunek, na przykład Contains (Is to także dobry wybór, z tym, że w tym przypadku znalezione zostaną wyłącznie pozycje o takim dokładnie statusie), a w trzeciej wpisać szukaną wartość (w tym przypadku Final).
Combinable Nested FONT Tags	W tym przypadku dokument jest sprawdzany pod kątem obecności zagnieżdżonych znaczników <FONT>, które można zastąpić jednym znacznikiem. Są to znaczniki obejmujące ten sam tekst, lecz różniące się atrybutami. Oto przykład: <font color=”00CCFF”><font size=”3”>Wyświetlany tekst</font></font>.
Missing Alt Text	W tym raporcie znajdziesz informacje o wszystkich znacznikach <IMG>, w których nie zdefiniowano atrybutu ALT, a więc tekstu alternatywnego, który jest wyświetlany nad obrazem oraz w zastępstwie obrazu, gdy użytkownik wyłączy opcję automatycznego ładowania obrazu. Tekst alternatywny pełni także ważną rolę w przeglądarkach tekstowych, a jest wręcz niezbędny, aby umożliwić korzystanie ze stron WWW ludziom z uszkodzonym wzrokiem.
Redundant Nested Tags	Ten raport informuje o obecności nadmiarowych znaczników zagnieżdżonych, a więc znaczników zagnieżdżonych w sobie, z których można zrezygnować. Na przykład przedstawiony poniżej kod zostałby wskazany jako nadmiarowy znacznik zagnieżdżony: <b>musisz się wytłumaczyć<b>rodzicom,</b>a nie mnie!</b>.
Removable Empty Tags	Znaczniki puste to znaczniki pozbawione zawartości. Jeśli na przykład w Twoim dokumencie pojawiłby się taki kod: <table></table>, zostałby uznany za znacznik pusty. Zazwyczaj znaczniki puste są efektem intensywnej ręcznej modyfikacji kodu źródłowego w widoku kodu.
Untitled Documents	Ten raport jest budowany w oparciu o tytuły dokumentów HTML. Pojawią się w nim dokumenty, dla których nie zdefiniowano tytułu, przypadki zdublowania tytułu, jak również dokumenty o tytule domyślnym Untitled Document, który Dreamweaver nadaje wszystkim nowo tworzonym dokumentom HTML.

Rys. 14.23. Oto długa lista raportów, z których możesz wybierać

Początek ramki

Podpowiedź

Okna dialogowe Reports oraz Results „wolą” okno dokumentu, niż okno Site. Jeśli stracisz któreś z oczu, to przejdź do okna dokumentu lub otwórz dokument. Ten zabieg powinien rozwiązać problem.

Koniec ramki

Aby wygenerować raport:

1. Wybierz w menu Site pozycję Reports. Wyświetlone zostanie okno dialogowe Reports.

2. Rozwiń listę Report On i wskaż, które dokumenty mają być poddane analizie. Możesz wybrać opcję Current Document, aby raport dotyczył tylko bieżącego dokumentu (jeśli jest on otwarty), opcję Entire Local Site, aby przeanalizować wszystkie pliki witryny lokalnej, opcję Selected Files in Site - jeśli w raporcie mają być uwzględnione tylko niektóre pliki wybrane w oknie Site, lub opcję Folder, która ogranicza raport do zawartości wskazanego foldera wraz z folderami podrzędnymi (w tym przypadku będziesz miał możliwość nawigowania do tego foldera).

3. Kolejny etap obejmuje określenie zakresu raportu. Określ go zaznaczając pola wyboru obok pozycji, które mają zostać uwzględnione w raporcie sumarycznym.

4. Naciśnij przycisk Run, aby Dreamweaver przystąpił do sporządzania raportu.

5. Gotowy raport zostanie zaprezentowany w oknie dialogowym Results (patrz rysunek 14.24). Okno to jest podzielone na trzy kolumny. W pierwszej wyświetlana jest nazwa pliku, w drugiej pojawia się numer wiersza kodu, który stał się powodem uwzględnienia pliku w raporcie (dotyczy to tylko raportów HTML), a w trzeciej pojawia się krótki opis przyczyn zakwestionowania pliku.

Początek ramki

Podpowiedź

Listę rezultatów można posortować klikając nagłówek kolumny. Rezultaty są wówczas sortowane w kolejności alfabetycznej względem kolumny, której nagłówek kliknięto. Jeśli porządek jest wstępujący (od A do Z), powtórne kliknięcie odwraca go (co daje uporządkowanie zstępujące, od Z do A).

Koniec ramki

6. Możesz od razu odtworzyć plik (kod odpowiadający raportowanemu zdarzeniu zostanie zaznaczony) lub zapisać raport, aby wrócić do niego później.

7. Aby otworzyć plik, kliknij dwukrotnie jego nazwę, lub wskaż nazwę i naciśnij w oknie Results przycisk Open File. Plik zostanie otwarty w widoku kodu i projektu (o ile nie korzystasz aktualnie z widoku kodu, bowiem w takim przypadku widok nie zostanie zmieniony).

8. Jeśli chcesz zapisać raport, aby sięgnąć do niego później, naciśnij przycisk Save Report. Raport zostanie zapisany w formacie XML, co pozwala wczytać go w programie do obsługi baz danych, umieścić w arkuszu kalkulacyjnym lub na stronie WWW.

9. Po zapisaniu raportu, zamknij okno Results.

Rys. 14.24. Przykładowe rezultaty raportu witryny

Raporty to cenne narzędzie, dzięki któremu zyskasz świadomość roli atrybutów w dokumentach HTML. Przekonasz się, że ich uporządkowanie znacznie poprawi jakość kodu, nawet jeśli były to atrybuty całkowicie poprawne. I ostatnia uwaga na temat raportów - można je uruchamiać tylko w obrębie witryny lokalnej.

Ćwiczenie 14.3. Uruchamianie raportu witryny

W tym ćwiczeniu skorzystamy z plików znajdujących się w folderze Chapter 14 na dysku CD dołączonym do książki.

1. Skopiuj wszystkie pliki i foldery z foldera Chapter 14 na dysku CD na swój dysk twardy i zdefiniuj w programie Dreamweaver witrynę. Jeśli wykonałeś poprzednie ćwiczenia z tego rozdziału, możesz pominąć ten punkt.

2. Wybierz pozycję Reports z menu Site, aby wyświetlić okno dialogowe Reports, takie jak pokazane na rysunku 14.25.

3. Przygotuj raport, który obejmie całą witrynę lokalną. Ma on składać się następujących raportów cząstkowych: Combinable Nested Font Tags, Missing Alt Text, Redundant Nested Tags, Removable Empty Tags i Untitled Documents.
   Raport nie powinien w rzeczywistości zwrócić żadnych rezultatów, a więc okno Results będzie puste, tak jak na rysunku 14.26. Możesz na przykład usunąć tytuły pewnych stron lub w inny sposób „zamieszać” w kodzie źródłowym, aby sztucznie wygenerować błąd, który nie zaburzy funkcjonalności dokumentu, natomiast uczyni go przedmiotem raportu.

Rys. 14.25. Zwróć uwagę na opcje wybrane w tym raporcie

Rys. 14.26. Jeśli wszystko pójdzie tak, jak planowaliśmy, Twoje okno Results będzie tak właśnie wyglądać

Sprawdzanie poprawności interpretacji stron WWW w różnych przeglądarkach

Jednym z ważniejszych etapów pracy nad witryną jest sprawdzenie poprawności obsługi kodu stron WWW w przeglądarkach, dla których strony są przeznaczone. W zależności od rodzaju tworzonej witryny oraz charakterystyki potencjalnych jej odbiorców, pewne przeglądarki można z testowania wykluczyć. Na przykład przeglądarki w wersji 2 są obecnie rzadkością. Także i wersje 3 straciły wielu użytkowników. Aby jednak zachować bezpieczną rezerwę, w projekcie powinny być uwzględnione wersje 3 i wyższe (co nadal zależy od Twoich użytkowników). Już wkrótce granica ta ulegnie przesunięciu i będziemy projektować dla przeglądarek w wersjach 4 i wyższych.

Nie musisz instalować na swoim komputerze wszystkich możliwych przeglądarek, aby przeprowadzić test kompatybilności. Dreamweaver wykona go bez oprogramowania, za pomocą tak zwanych profili przeglądarek. Są to po prostu specjalne pliki tekstowe, które specyfikują co jest, a co nie jest obsługiwane przez daną przeglądarkę. Dreamweaver dokona porównania Twoich stron z tymi specyfikacjami. Program dysponuje profilami dla przeglądarki Netscape Navigator w wersjach 2.0, 3.0 i 4.0 oraz dla Internet Explorera w wersjach 2.0, 3.0, 4.0 i 5.0.

Początek ramki

Podpowiedź

Inne profile można ściągnąć z Macromedia Exchange (www.exchange.macromedia.com/). Profile te zapewniają zgodność ze standardem HTML 4.01 na poziomie pełnym (Strict DTD) lub z uwzględnieniem elementów poprzednich wersji standardu (Transitional DTD). Porównanie ze standardami dotyczy oczywiście standardów określonych przez W3C.

Koniec ramki

Dreamweaver pozwala poddać kontroli poprawności interpretacji kodu pojedynczą stronę lub cały folder. Z tej procedury wyłączone są skrypty (Dreamweaver umożliwia jednak obserwację wykonania skryptów w tych przeglądarkach, o czym możesz przeczytać w rozdziale 23., „Skrypty i języki oparte o znaczniki”). Aby uruchomić procedurę Check Target Borowsers dla pliku:

1. Zapisz bieżący dokument, nad którym pracujesz. Dreamweaver będzie porównywał ze swoimi profilami ostatnio zapisaną kopię dokumentu, dlatego więc jest ważne, abyś pamiętał o zapisaniu.

2. Wybierz pozycję Check Target Browsers z menu File.

3. Wyświetlone zostanie okno dialogowe Check Target Browsers, takie jak pokazane na rysunku 14.27. Możesz w nim wskazać dowolną liczbę profili. Skorzystaj z pomocy klawisza Ctrl - wciśnij go i klikaj nazwy przeglądarek w dowolnej kolejności, lub z klawisza Shift - zaznacz pierwszą z przeglądarek, wciśnij Shift i kliknij ostatnią przeglądarkę z zakresu, który chcesz zaznaczyć.

Rys. 14.27. Publikację witryny warto poprzedzić kontrolą poprawności interpretacji jej kodu przez różne przeglądarki

4. Naciśnij przycisk Check, aby rozpocząć proces kontroli.

5. Po jego zakończeniu, otworzy się okno przeglądarki i zaprezentuje ładnie sformatowaną stronę, wyjaśniającą wszelkie możliwe problemy, które mogą się pojawić przy wyświetlaniu Twojej strony we wskazanych przeglądarkach (patrz rysunek 14.28).

6. Wygenerowany raport możesz zapisać, wybierając pozycję Save (lub Save As) z menu File przeglądarki. Jeśli rzeczywiście chcesz zachować kopię raportu, to zapisz go natychmiast, bowiem raport rezyduje w tymczasowym dokumencie HTML.

Początek ramki

Uwaga

Polecenie Check Target Browsers można uruchomić tylko dla plików witryny lokalnej.

Koniec ramki

Kontroli poprawności interpretacji kodu można poddać cały folder, a więc wszystkie dokumenty HTML zawarte w tym folderze oraz w folderach podrzędnych. W tym celu zaznacz po prostu w oknie Site pliki lub folder, ewentualnie folder podrzędny, które mają zostać skontrolowane, i wybierz pozycję Check Target Browser z menu File. Pozostała część procesu przebiega identycznie, jak poprzednio.

Początek ramki

Podpowiedź

Ponieważ możliwe jest poddanie procedurze kontroli interpretacji kodu całego foldera, zaznaczenie foldera witryny i uruchomienie procedury Check Target Browser spowoduje skontrolowanie całej witryny.

Koniec ramki

Rys. 14.28. Z niektórymi błędami można się pogodzić, lecz są też takie, które mogą mieć przykre konsekwencje

Ćwiczenie 14.4. Kontrola witryny pod kątem poprawności interpretacji kodu przez wybrane przeglądarki

W tym ćwiczeniu użyjemy ponownie plików z foldera Chapter 14 na dysku CD dołączonym do książki.

1. Skopiuj wszystkie pliki z foldera Chapter 14 z dysku CD na swój dysk twardy i zdefiniuj witrynę. Jeśli wykonałeś któreś z wcześniejszych ćwiczeń z tego rozdziału, możesz pominąć ten krok.

2. Zaznacz w panelu Local okna Site folder główny witryny.

3. Wybierz pozycję Check Target Browsers z menu File. Wyświetlone zostanie okno dialogowe Check Target Browsers, pokazane na rysunku 14.29.

4. Zaznacz w nim pozycje Internet Explorer 4, Internet Explorer 5, Netscape 3 i Netscape 4. Aby zaznaczyć kilka pozycji, wciśnij klawisz Ctrl i klikaj elementy listy.

5. Naciśnij przycisk Check. Procedura rozpocznie się.
   Po jej zakończeniu w oknie przeglądarki wyświetlona zostanie lista zwróconych błędów, podobna to tej z rysunku 14.30. Nie przejmuj się nimi. Jeśli przyjrzysz się dokładnie, zobaczysz, że odnoszą się one do kodu używanego wewnętrznie przez program Dreamweaver, z którym użytkownicy nie spotkają się na stronach WWW.

Rys. 14.29. Zaznacz na tej liście cztery przeglądarki

Rys. 14.30. Jeśli zwrócone zostaną błędy podobne do tych, nie przejmuj się nimi

6. Przeprowadź synchronizację witryn lokalnej i odległej. Jeśli jeszcze nie skonfigurowałeś witryny odległej, zrób to teraz. Potem wybierz w menu Edit pozycję Select Newer Local. Spowoduje to zaznaczenie wszystkich plików, które musisz umieścić na odległym serwerze. Jeśli chcesz, możesz skorzystać z opcji Synchronize, lecz skoro witryna jest niewielka, użyj metody już opisanej.

7. Naciśnij przycisk Put. Zaznaczone pliki zostaną przesłane do serwera.

Kontrola czasów ładowania

Kolejna ważna kwestia to czas ładowania stron. Najwspanialszy na świecie projekt i najcudowniejsza grafika nie będą miały żadnego znaczenia, jeśli użytkownicy nie poczekają wystarczająco długo, by je zobaczyć! Dreamweaver jest wyposażony w użyteczne narzędzie, które pozwala oszacować czas ładowania stron. Znajdziesz je na pasku stanu okna dokumentu, po prawej stronie. Wyświetlane tam są dwie informacje: rozmiar dokumentu i szacunkowy czas ładowania strony. W rozmiarze dokumentu, oprócz kodu HTML, uwzględnione są także elementy graficzne. Z kolei czas ładowania jest obliczany w oparciu o wartość przepustowości łącza zadeklarowaną w kategorii Status Bar okna dialogowego Preferences (szczegółowy opis znajdziesz w rozdziale 2.).

Początek ramki

Podpowiedź

Paul Strange z Level 67 LLC (www.level67.net/), firmy zajmującej się dostarczaniem rozwiązań dotyczących stron WWW oraz obsługi sieciowych baz danych, tak radzi tym, którzy kontrolują czasy ładowania tworzonych stron WWW:

„Witryna powinna być tak zaprojektowana, żeby pierwsze informacje pojawiły się na ekranie użytkownika już po 8 sekundach ładowania, niezależnie od tego, z jakiego łącza on korzysta. Czas ładowania całego dokumentu nie powinien przekraczać 15, 20 sekund. Z każdą sekundą ponad ten czas będziesz tracił użytkowników.”.

Bezwzględnie należy trzymać się tych zaleceń.

Koniec ramki

O wyborze testowanej szybkości transferu danych decyduje między innymi typ tworzonej przez Ciebie witryny. W przypadku sieci lokalnej przepustowości łączy będą wyższe, rzędu 1500 Kbps (przy łączach T1), natomiast jeśli witryna przeznaczona jest do prezentacji w Internecie, należy liczyć się z dziesięciokrotnie niższą przepustowością. Tak więc w tym przypadku obliczenia szacunkowe należy wykonać dla łączy 28.8 Kbps lub 33.6 Kbps, co powinno w wystarczyć.

Początek ramki

Uwaga

Dreamweaver oblicza czas ładowania dla sytuacji idealnej. Rzeczywiste czasy ładowania będą się znacząco różnić.

Koniec ramki

Podsumowanie

Najważniejszym zadaniem tego rozdziału było zaznajomienie Cię z narzędziami zarządzania witryną programu Dreamweaver. Omówiliśmy okno Site oraz konfigurowanie mapy witryny i posługiwanie się nią. Zajmowaliśmy się także sprawdzaniem poprawności połączeń, aktualizacją witryny za pomocą funkcji Synchronize oraz możliwościami, jakie daje narzędzie Find and Replace. Nauczyłeś się generować raporty witryny oraz sprawdzać poprawność obsługi jej kodu w różnych przeglądarkach i czas ładowania.

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

2 G:\DREAM_trans\rozdz14.doc

dwa razy to samo?