Rozdział 1. Co nowego w programie Dreamweaver 4

Być może przyjaciel powiedział Ci o nim, może poznałeś już jego wcześniejsze wersje, a może jest to narzędzie, z którego musisz korzystać na zajęciach w szkole. Niezależnie od tego jak lub dlaczego, trafiłeś na jedyne chyba na rynku narzędzie tworzenia stron WWW o takich możliwościach rozbudowywania go i dostosowywania do potrzeb użytkownika. Zespół opracowujący Dreamweaver z firmy Macromedia ciężko pracował od chwili wypuszczenia wersji 3 programu i w obecnej wersji to widać.

Poprawiło się wiele - począwszy od lepszej kontroli przez rozbudowę rozszerzeń i ich obsługi, po nowe narzędzia ułatwiające pracę z kodem HTML, skryptami JavaScript i elementami CSS. Zanim jednak sięgniesz po program, poświęć chwilę, aby poczytać o wszystkich nowinkach i ciekawych opcjach oferowanych przez Dreamweaver 4.

W tym rozdziale omówione zostaną następujące zagadnienia:

• Pływające palety

• Kod źródłowy

• Projektowanie

• Opcje pracy grupowej

• Zarządzanie środowiskiem

Pływające palety

Pływające palety to nie nowina w programie Dreamweaver 4, aczkolwiek niewątpliwie warto o nich wspomnieć. Większość z nich można łączyć, a więc tworzyć z nich okienka zaopatrzone w zakładki. Taką właściwość posiadają następujące palety: Assets, Behaviors, Code Inspector, CSS Styles, Frames, History, HTML Styles, Layers, Reference i Objects. Zakładki poszczególnych kategorii można przeciągać między oknami. Wyjątek stanowi jedynie paleta obiektów (ang. Objects Panel), jeśli wyświetlana jest we własnym oknie. Inne palety można przeciągać do palety obiektów i tu przycumowywać, ale nie można przeciągnąć palety obiektów do okna innej palety. Dreamweaver śledzi wszelkie zmiany i zachowuje ich efekt w kolejnych sesjach. Więcej informacji na ten temat znajdziesz w rozdziale 2, Dostosowywanie programu Dreamweaver.

Kod źródłowy

W nowej edycji programu Dreamweaver, znakomicie poprawiono możliwości edycji kodu źródłowego. Począwszy od umożliwienia edycji dokumentów innych niż HTML, po dodanie programu uruchomieniowego skryptów JavaScript - Dreamweaver pojawił się na placu boju gotowy, by konkurować z wszystkimi specjalizowanymi edytorami tekstowymi, od których wcześniej był zależny. Teraz ma własne edytory.

Zintegrowany edytor tekstu

Niezgrabne i nieefektywne narzędzie jakim był w poprzedniej wersji HTML Inspector zostało przebudowane w doskonały edytor kodu źródłowego o szerokich możliwościach. Dostęp do tego narzędzia masz zarówno z poziomu menu Code, jak i w palecie Code Inspector. Nowy widok Split pozwala wyświetlić stronę WWW jednocześnie w dwóch widokach: projektu i kodu źródłowego.

Zintegrowany edytor automatycznie stosuje wcięcia do kodu HTML i JavaScript oraz zawiera propozycje schematów kolorystycznych, które pomogą Ci wizualizować określone elementy dokumentu. Dreamweaver automatycznie otworzy także pliki XML i skrypty JavaScript w widoku kodu, co pozwala od razu przystąpić do pracy. W ustawieniach programu (Preferences) masz także możliwość zdefiniowania dodatkowych typów plików, które można otwierać w tym widoku. W widoku kodu zachowujesz dostęp do obiektów programu Dreamweaver i innych opcji menu. Dodatkowe informacje na temat tej poprawionej opcji znajdziesz w rozdziale 3., „Dreamweaver i HTML”, oraz w rozdziale 4., „Praca z tekstem”.

Widok kodu i projektu

Widok Show Code and Design Views umożliwia jednoczesne zaprezentowanie kodu źródłowego i projektu w jednym oknie. Kod można wyświetlić i optymalizować w górnym lub dolnym panelu, a drugi z paneli wykorzystać do przełączania się między projektem a zawartością strony. W poprzednich wersjach jednoczesna prezentacja kodu i projektu była możliwa tylko w przypadku korzystania z wielu monitorów. Temu trybowi pracy poświęcony jest rozdział 3.

Moduł uruchomieniowy JavaScript

Nowy program uruchomieniowy JavaScript niewątpliwie uwolni wielu programistów od bólu głowy. Masz w nim możliwość wstawiania w kodzie punktów kontrolnych i śledzenia w przeglądarce Internet Explorer lun Netscape Navigator wykonywania skryptu w czasie rzeczywistym, krok po kroku. Jest to nie tylko doskonałe narzędzie do usuwania błędów, lecz także narzędzie dydaktyczne. Pozwala zobaczyć jak poszczególne przeglądarki radzą sobie z interpretacją i obsługą funkcji języka JavaScript. Rozdział 23., „Skrypty i języki oparte o znaczniki”, omawia to narzędzie szczegółowo.

Dodatkowe informacje na temat kodu

Za nami już czasy, gdy traciłeś cenne minuty wyszukując w sieci lub grubych tomiskach atrybuty znaczników lub sprawdzając składnię wyrażeń. Dreamweaver 4 został wyposażony w rozbudowaną bibliotekę znaczników HTML, styli CSS i obiektów JavaScript, do których prosty dostęp daje narzędzie Reference. Jak pokazuje rysunek 1.1, potrzebna Ci informacja na temat określonego elementu może zostać automatycznie przywołana szybko i bez trudu. W rozdziale 3. dowiesz się jak to zrobić.

Rys. 1.1. Paleta Reference

Skróty klawiszowe z możliwością dostosowania

Standardowym wyposażeniem produktów firmy Macromedia jest edytor skrótów klawiszowych, zaprezentowany na rysunku 1.2. Pozwala on dowolnie definiować skróty w oparciu o własne ustalenia użytkownika, które uznaje on za najbardziej „sensowne”. Dreamweaver jest wyposażony w kilka zestawów skrótów klawiszowych, aczkolwiek możliwe jest tworzenie własnych zestawów i zapisywanie ich. Z rozdziału 2. dowiesz się jak tworzyć swoje zestawy skrótów klawiszowych i jak korzystać z istniejących.

Początek ramki

Uwaga

Wszystkie odwołania do skrótów klawiszowych pojawiające się w tej książce dotyczą standardowego zestawu skrótów firmy Macromedia. Jeśli zdecydujesz się na korzystanie z własnych skrótów lub wybierzesz inny zestaw, odwołania mogę przestać być poprawne.

Koniec ramki

Nawigacja w kodzie

Dreamweaver 4 umożliwia programistom korzystającym z języka JavaScript szybkie przeszukiwanie kodu przy użyciu narzędzia Code Navigation, którego ikona umieszczona jest na pasku narzędzi. Narzędzie to dostępne w widoku kodu pozwala profesjonalistom w branży programowania efektywniej korzystać z języka JavaScript. Szczegółowa prezentacja tej opcji znajduje się w rozdziale 3.

Rys. 1.2. Keyboard Shortcuts

Zmiana kolorystyki składni na bieżąco

Dreamweaver 4 pozwala użytkownikowi korzystać z opcji bieżącego dostosowywania kolorystyki składni. Opcja działa w ten sposób, że określone elementy kodu HTML lub JavaScript pojawiają się automatycznie i w czasie rzeczywistym (w trakcie pisania) w charakterystycznym dla nich kolorze. Dzięki kolorom składni programista na bieżąco śledzi zmiany zachodzące na stronach. Zróżnicowana kolorystyka kodu pozwala także zorganizować kod w taki sposób, żeby nie było konieczne przeszukiwanie tekstu w celu znalezienia określonego elementu. Szczegółowe omówienie tej opcji znajdziesz w rozdziale 2.

Edycja dokumentów w formacie innym niż HTML

Dreamweaver 4 może spełniać funkcję zwykłego edytora tekstu. Umożliwia edycję plików XML, JavaScript, ASP i innych plików tekstowych. Co więcej, program nie ingeruje w układ pliku, którego formatu nie zna. Dlatego można bezpiecznie modyfikować dokumenty ASP mając pewność, że kod nie zostanie zmieniony. Tymi kwestiami zajmuje się rozdział 3.

Pasek narzędzi programu Dreamweaver

Pasek narzędzi programu Dreamweaver, pokazany na rysunku 1.3, został na nowo zaprojektowany, aby ułatwić dostęp do wszystkich najczęściej stosowanych narzędzi i poleceń menu. Pasek pozwala zmieniać tytuł strony, przełączać się między widokami i daje dostęp do najczęściej wykorzystywanych opcji. Opcje są różne, w zależności od wybranego widoku, co dodatkowo poprawia funkcjonalność. Uaktywnianie zarządzania plikami oraz wyświetlania i testowania poprawności stron za pomocą jednego kliknięcia to także wielka zaleta. Rozdział 2. opisuje pasek narzędzi w szczegółach.

Rys. 1.3. Pasek narzędzi programu Dreamweaver

Projekt

Edytory HTML typu WYSIWIG (What You See Is What You Get) stwarzają fascynującą możliwość bycia bardziej projektantem niż programistą. Z powodu tych wszystkich usprawnień obsługi kodu oferowanych w najnowszej wersji programu, usprawnienia projektowe zeszły jakby w cień. Ten punkt prezentuje podsumowanie wszystkich nowych opcji projektowych, które ułatwią Ci nieco życie.

Widok układu strony

Widok układu strony (ang. Layout view) dostępny jest z poziomu palety obiektów. Jest to nowa opcja, która pozwala tworzyć tabele i zarządzać nimi w tak prosty sposób, jak w przypadku warstw. Po prostu klikasz i rozciągasz tabelę oraz jej komórki do żądanych rozmiarów, a Dreamweaver sam wyznacza najbardziej efektywny sposób uwzględnienia tych zmian w kodzie HTML oraz sam ten kod tworzy.

Zdecydowanie obniża to poziom wiedzy niezbędny do poprawnego manipulowania tabelami. Ponieważ Dreamweaver pomaga zautomatyzować proces tworzenia tabel i konfigurowania ich układu, mniej czasu spędzisz na wyrywaniu sobie włosów z głowy siedząc nad złożonym kodem. Rozdział 8., „Definiowanie układu strony za pomocą tabel”, omawia tę nową, ekscytującą opcję szczegółowo.

Tekst i przyciski programu Macromedia Flash

Teraz „wektorową” moc technologii programu Macromedia Flash możesz połączyć z prostotą interfejsu programu Dreamweaver, aby tworzyć tekst, który można edytować, skalować i wiernie odwzorować na wydruku. Dodatkowe style można ściągnąć z Macromedia Exchange lub przygotować samodzielnie. W rozdziale 18., Tworzenie animacji w programie Flash, nauczysz się korzystania z tego „wektorowego” cuda.

Edycja grafiki za pomocą programu Roundtrip

Program narzędziowy Roundtrip oferuje możliwość edycji, optymalizacji i wstawiania obrazów na stronach WWW. Jedno kliknięcie przycisku umożliwia otwarcie obrazów umieszczonych na stronach WWW w programie Fireworks, udostępniając całą jego potęgę. Kolejne kliknięcie poprowadzi Cię z powrotem do programu Dreamweaver, ze zmodyfikowanym obrazem pod pachą. Uruchom Fireworks automatycznie i dokonaj optymalizacji swoich obrazów w taki właśnie sposób. Rozdział 4., „Praca z tekstem”, oraz rozdział 6., „Praca z obrazami”, omawiają szczegółowo możliwości programu Roundtrip.

Interfejs użytkownika w programach Macromedia

Firma Macromedia zadbała o to, aby interfejsy poszczególnych jej produktów cechowała spójna i zwarta postać. Z tym pomysłem wiązała się nadzieja, że przyzwyczajenie użytkownika do określonego, poznanego już interfejsu ułatwi korzystanie z interfejsów innych produktów. Pomysł wspaniały, a jego implementacja doskonała.

Opcje pracy grupowej

Czy próbowałeś kiedyś współpracować z wieloma osobami nad projektem dużej witryny sieciowej? A co w przypadku, gdy dwie osoby zechcą modyfikować jednocześnie ten sam plik? Czyjeś zmiany niewątpliwie zostaną nadpisane. A jeśli chcesz pozostawić kolejnej osobie korzystającej z pliku jakąś wiadomość - zwrócić na coś uwagę lub poinformować o koniecznych poprawkach? No cóż, w kwestii opcji pracy grupowej Dreamweaver 4 idzie znacznie dalej niż jego poprzednicy. W wiele z tych opcji możesz uwierzyć na słowo, chyba że spróbowałeś korzystać z innego edytora.

Zarządzanie zasobami

Wszystkie Twoje zasoby zastosowane w projekcie witryny są teraz zgromadzone w jednym miejscu, na jednej palecie o nazwie Assets. Umożliwia ona przeglądanie i korzystanie z obrazów, kolorów, adresów URL, obiektów programów Flash (co pokazuje rysunek 1.4) i Shockwave, plików multimedialnych, skryptów i szablonów. Paleta Assets prezentuje nie tylko same zasoby, lecz także szczegółowe informacje na ich temat. Najczęściej używane zasoby można przechowywać w zakładce Favorities, dzięki czemu jest do nich szybki i prosty dostęp. Rozdział 15., „Opcje pracy grupowej”, omawia szczegółowo paletę Assets.

Rys. 1.4. Paleta Assets

Integracja z Visual SourceSafe

Teraz masz możliwość zintegrowania Microsoft Visual SourceSafe z programem Dreamweaver. SourceSafe to oprogramowanie ułatwiające pracę grupową dużych zespołów, efektywne tworzenie i dokumentowanie projektów. Rozdział 15. omawia szczegółowo jego opcje.

Integracja z WebDAV

Niezależnie od możliwości zintegrowania programu Dreamweaver z SourceSafe, możliwa jest także integracja z dowolnym serwerem wspierającym protokół WebDAV (ang. WWW Distributing Authoring and Versioning). Szczegółowe informacje na ten temat znajdziesz w rozdziale 15.

Site Reporting

Narzędzie Site Reporting pojawiło się w najnowszej wersji programu Dreamweaver. Jak pokazują rysunki 1.5 i 1.6, Site Reporting to narzędzie przygotowywania raportów zawierających informacje o plikach. Z raportu dowiesz się, w jakich plikach zakończono wprowadzanie poprawek, gdzie umieszczono uwagi, jakie pliki zawierają zagnieżdżone znaczniki formatujące czcionkę, które można zastąpić jednym znacznikiem, gdzie brakuje tekstu alternatywnego, gdzie są nadmiarowe znaczniki zagnieżdżone, a gdzie znaczniki puste, które można usunąć, oraz w którym z dokumentów brak tytułu.

Rys. 1.5. Opcje raportu

Rys. 1.6. Raport

Wygenerowane raporty można zapisać, aby na ich podstawie wprowadzić później w pliku zmiany usuwające problem. Kwestie dotyczące raportów zostały omówione dokładniej w rozdziale 14.

Konfigurowalne okno Site

W programie Dreamweaver można konfigurować najdrobniejsze szczegóły okna Site. Jak widać na rysunku 1.7, użytkownik może definiować widzialność, wyrównanie oraz inne ustawienia, zgodnie ze swoimi upodobaniami. Narzędzie Design Notes pozwala utworzyć nowe kolumny. Kolumny te mogą zawierać wybrane informacje o pliku, takie jak jego stan lub data zakończenia pracy nad nim. Rozdział 13., „Okno Site i organizacja plików”, omawia szczegółowo tę opcję.

Rys. 1.7. Okno Site

Wbudowana obsługa poczty e-mail

Zamiast dzwonić do osoby, która już zakończyła pracę nad plikiem, aby wróciła do niej, masz teraz możliwość automatycznego przesłania wiadomości e-mail z pytaniami lub instrukcjami. Ułatwia to ogromnie szybką komunikację z pozostałymi członkami zespołu za pośrednictwem jednego kliknięcia myszką. Rozdział 15. omawia szczegółowo tę możliwość.

Extension Manager

Przedstawiona na rysunku 1.8 aplikacja Extension Manager, współpracuje z programem Dreamweaver oraz z Macromedia Exchange, umożliwiając instalację, czasową dezaktywację oraz odinstalowywanie obiektów, behawiorów, poleceń i innych rozszerzeń programu Dreamweaver. Extension Manager pozwala także instalować rozszerzenia w programach Flash i Dreamweaver UltraDev. Rozdział 21. nauczy Cię korzystać z tego narzędzia.

Rys. 1.8. Extension Manager

Macromedia Exchange

Ta zarządzana przez firmę Macromedia witryna daje, za pośrednictwem narzędzia Extension Manager, dostęp do rozszerzeń, które można zainstalować jednym kliknięciem myszki. Macromedia Exchange to miejsce, gdzie masz dostęp do setek obiektów, behawiorów, poleceń i innych rozszerzeń. Rysunek 1.9 prezentuje niektóre z nich.

Rys. 1.9. Rozszerzenia DHTML/Layers Extensions na stronie Macromedia Exchange

Zarządzanie oknami

Dreamweaver jest aplikacją, w której praca odbywa się w wielu oknach. Każdy nowy dokument otwierany jest w osobnym oknie. Inaczej jest na przykład w edytorze Microsoft Word, gdzie różne dokumenty wyświetlane są w tym samym oknie aplikacji i tylko jeden z nich może być w danej chwili efektywnie modyfikowany (należy jednak zauważyć, że Word 2000 otwiera już każdy dokument w nowym oknie).

Dreamweaver korzysta z palet, które można składać. Można je przycumować do innych palet, do okien lub do brzegów ekranu. Na rysunku 1.10 palety tworzą „mur”, co systematyzuje sposób otwierania okien przez Dreamweaver.

Dreamweaver otwiera nowe okno dla każdego otwieranego lub tworzonego dokumentu i pozwala użytkownikowi dowolnie przemieszczać okna po ekranie. Często Ci się zdarzy, że jednocześnie będzie na ekranie otwartych kilka dokumentów. Dreamweaver obsługuje ten proces niezwykle elegancko, zachowując na pulpicie porządek.

Rys. 1.9. Nowe okna pojawiają się w obszarze wyznaczonym przez pozycje palet

Jaj widać na rysunku 1.10, okna otwieranych lub nowych dokumentów mają takie rozmiary, aby nie zasłaniały pływających palet.

Podsumowanie

W tym rozdziale omówione zostały zmiany oraz nowe opcje wprowadzone w programie Dreamweaver 4. Mamy nadzieję, że ta zapowiedź możliwości programu zmobilizuje Cię, by stać się doskonałym projektantem stron WWW.

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

2 G:\DREAM_trans\DW4\rozdz01.doc

---