This content was uploaded by our users and we assume good faith they have the permission to share this book. If you own the copyright to this book and it is wrongfully on our website, we offer a simple DMCA procedure to remove your content from our site. Start by pressing the button below!
. Znacznik ten wpływa na kilka różnych elementów formatowania wprowadzanego przez Ciebie tekstu, co jest zdecydowanie bardziej efektywne od stosowania zestawu znaczników fizycznych. Początek ramki Uwaga Dreamweaver nie obsługuje automatycznego wstawiania wszystkich znaczników logicznych stylu. Jeśli decydujesz się na korzystanie ze znaczników logicznych, które nie są obsługiwane przez interfejs programu (dotyczy to zresztą wszystkich takich znaczników, nie tylko logicznych), musisz albo ściągnąć rozszerzenie, które rozwiąże ten problem (o ile takie rozszerzenie istnieje), albo ręcznie wpisywać kod, korzystając z dostępnych w programie Dreamweaver metod. Większość z tych znaczników, których Dreamweaver nie chce wstawiać automatycznie, albo nie jest obsługiwana przez najpopularniejsze przeglądarki sieciowe, albo została wycofana z najnowszych specyfikacji języka HTML. Edycja kodu HTML jest omawiana w kolejnych punktach tego rozdziału. Koniec ramki Wybór stylu jest w istocie wyborem. Oba rodzaje znaczników mają swoje zalety, mają także wady. Nie należy ich jednak traktować jako przeciwstawnych sobie sił, lecz jako odrębne narzędzia, które mogą być wspólnie użyte do utworzenia poprawnej i efektywnej strony WWW.
Komentarze kodu HTML Każdy programista powie Ci, że komentowanie kodu jest niezwykle istotne. W przypadku złożonych programów i podprogramów, komentarze pozwalają podzielić odpowiedzialność między członków zespołu. Źle napisane komentarze (lub ich brak) zaowocują nocną bezsennością i bólem głowy, gdy parę miesięcy później będziesz chciał coś zmienić w swoim kodzie. Uwaga powyższa dotyczy także kodu HTML. Chociaż komentarze w kodzie HTML nie są tak żywotnie istotne jak w poważnych językach programowania, są jednak użyteczne. W komentarzach zawarte są nie tylko uwagi i wyjaśnienia, lecz także informacje ukryte. Często klient nie chce, aby na zamówionej przez niego stronie WWW pojawiała się informacja o autorach. W takiej sytuacji ewentualni klienci odwiedzający tę stronę nie znaleźliby adresu firmy, która stronę przygotowała. Dzięki komentarzom, można na początku kodu HTML umieścić krótki tekst z odpowiednią informacją. Tekst ten, jako ukryty, nie będzie wyświetlany w oknie przeglądarki, ale wszyscy zainteresowani będą mogli go przeczytać wyświetlając postać źródłową strony. Początek ramki
Uwaga Dreamweaver wyposażony jest w narzędzie Design Notes, które bardzo przypomina komentarze HTML, lecz jego rola ogranicza się do poziomu lokalnego. Użytkownik lub grupa osób współpracujących nad projektem mają dostęp do tych uwag z poziomu programu w efektywnie sformatowanym oknie. Narzędzie Design Notes zostało omówione w rozdziale 15., „Opcje pracy grupowej”. Koniec ramki Ćwiczenie 3.3. Wstawianie i edycja komentarzy Poprzedni przykład był może zbyt daleko idący, ale cel był jasny. Umieszczanie komentarzy stanowi dobrą metodę biernego reklamowania się, wyjaśniania stosowanych technik i prezentowania informacji, które nie powinny być wyświetlane w oknie przeglądarki. W tym ćwiczeniu wstawisz do kodu komentarz, a następnie zmienisz go. Aby wstawić komentarz, będzie Ci potrzebna paleta obiektów – sprawdź, czy jest wyświetlana (wybierz pozycję Objects w menu Window lub zastosuj Ctrl+F2) – a na niej kategoria Invisibles. Teraz wykonaj takie oto operacje: 1.
Umieść punkt wstawiania w tym miejscu strony, w którym chcesz umieścić komentarz, a następnie wybierz z palety obiektów Insert Comment. Okienko dialogowe Insert Comment można wyświetlić wybierając w menu Insert pozycję Invisible Tags, a następnie pozycję Comment w menu podrzędnym.
2.
Wpisz w polu tekstowym Comment tekst komentarza: This page was designed by Blurred Vision Studios. Check us at: http://www.bvstudios.com/.
3.
Twoje okienko Insert Comment powinno prezentować się tak, jak okienko z rysunku 3.8. Naciśnij OK.
Aby wprowadzić w komentarzu zmiany, sprawdź najpierw, czy umieszczony jest znacznik obok pozycji Invisible Elements w menu podrzędnym Visual Aids menu View. Następnie: 1.
Zaznacz ikonę komentarza w dokumencie.
2.
Kliknij w polu Comment okienka dialogowego właściwości (Property Inspector) i zastąp tekst bvstudios.com tekstem level67.net. Efekt tej operacji prezentuje rysunek 3.9.
Początek ramki Uwaga Chociaż zajmujemy się tutaj komentarzami umieszczanymi w sekcji BODY, nic nie stoi na przeszkodzie, aby umieszczać komentarze w sekcji HEAD. Czasami rzeczywiście twórcy strony zależy na umieszczeniu komentarza na samym początku kodu (tak jak w przypadku komentarza z autoreklamą). Znaczniki komentarza jako jedne z niewielu mogą być umieszczane nawet przed znacznikiem otwierającym , niemal zawsze pierwszym znacznikiem dokumentu HTML. Nie wpływają one w żaden sposób na układ lub wygląd strony, a oglądającym postać źródłową umożliwiają zapoznanie się z komentarzem już na wstępie. Koniec ramki Rys. 3.8.
Komentarze nie tylko mogą pomóc w reklamie Twojej pracy, ale także w przypomnieniu sposobów rozwiązania określonych kwestii, gdy w pół roku później będziesz wprowadzał na stronie zmiany Rys. 3.9. Zaznacz ikonę komentarza w dokumencie, a w polu Comment okna właściwości wyświetlony zostanie tekst komentarza
Atrybuty strony Nowy dokument otwierany w programie Dreamweaver nosi domyślny tytuł Untitled Document. Jedną z pierwszych rzeczy, od której zaczniesz projektowanie strony WWW, będzie najprawdopodobniej zmiana tego tytułu na taki, który będzie wyświetlany użytkownikom w trakcie ładowania strony. Jeśli jesteś nowicjuszem, należy Ci się krótkie wyjaśnienie. Tytuł strony WWW jest wyświetlany w górnym lewym rogu okna przeglądarki wyświetlającej stronę WWW. Rysunek 3.10 pokazuje, o co chodzi. Inne atrybuty, które być może będziesz chciał zmienić, to kolor i rodzaj tła (obraz jako tło) lub kolor połączeń. Okienko dialogowe Page Properties umożliwia takie zmiany. Rys. 3.10. Zwróć uwagę na tytuł strony. Strona zaopatrzona w tytuł sprawia zdecydowanie bardziej profesjonalne wrażenie, niż Untitled Document Początek ramki Uwaga Jeśli nie wiesz jeszcze, jak nazwać swój dokument, możesz ściągnąć i zainstalować rozszerzenie Paula Madara AutoTitle Untitled Documents, które automatycznie przekształca nazwę dokumentu w tytuł strony. Być może nie zawsze efekt końcowy będzie najszczęśliwszy, ale i tak lepszy niż tytuł domyślny. Zawsze możesz wrócić i zmienić tytuł później. Ściąganie dodatków, ich instalacja oraz stosowanie omówione jest w rozdziale 21. Koniec ramki Istnieje kilka metod wyświetlenia okienka dialogowego Page Properties (patrz rysunek 3.11). Można zastosować skrót klawiaturowy Ctrl+J, wybrać pozycję Page Properties w menu Modify,
lub kliknąć prawym klawiszem myszki dowolnym obszarze okna dokumentu, wolnym od obiektów (wyjątek tu stanowi tekst, o ile nie jest umieszczony w tabeli lub obszarze innego obiektu), i wybrać z menu kontekstowego pozycję Page Properties. Początek ramki Uwaga Klawiatury nowej generacji są wyposażone w specjalny klawisz, który działa tak, jak prawy klawisz myszki. Jeśli kursor znajduje się w „otwartej” przestrzeni okna dokumentu, możesz nacisnąć ten klawisz i korzystając z klawiszy ze strzałkami nawigować do pozycji Page Properties. Wspomniany klawisz nosi nazwę klawisza aplikacji i jest ulokowany z lewej strony prawego klawisza Ctrl. Klawiatury starszego typu mogą go nie mieć. Koniec ramki Rys. 3.11. W tym okienku dialogowym możesz zdefiniować wiele właściwości, w tym także tytuł strony Oto lista atrybutów dostępnych w oknie Page Properties:
Title – jest to tytuł strony WWW. Gdy przeglądarki sieciowe interpretują Twój dokument HTML, umieszczają zawartość tego pola na swoim pasku tytułu. Także serwisy wyszukujące korzystają z tytułu strony, aby wyświetlić notkę o Twojej stronie WWW. Tytuł jest najczęściej dołączany jako tekst opisujący stronę. Sposób definiowania tytułu strony w kodzie HTML jest następujący: <TITLE>Tytuł Twojej Strony.
Początek ramki Uwaga Teraz, w wersji 4 programu Dreamweaver, tytuł strony możesz w dowolnej chwili modyfikować bezpośrednio w oknie dokumentu. Pierwszy sposób polega na skorzystaniu z paska narzędzi. Sprawdź więc, czy pasek jest wyświetlany (wybierz pozycję Toolbar w menu View). Wpisz następnie żądany tytuł w polu Title paska narzędzi. Oto inny sposób: umieść znacznik obok pozycji Head Content w menu View (lub kliknij ikonę View Options na pasku narzędzi i wybierz pozycję Head Content) i kliknij ikonę Title. Tytuł strony staje się wówczas dostępny w inspektorze Property (wybierz pozycję Properties w menu Window, aby je wyświetlić). Z tej drugiej metody możesz korzystać także, aby zmienić inną zawartość sekcji HEAD. Koniec ramki
Background Image – ten atrybut umożliwia wskazanie obrazu jako tła strony. Dopuszczalne formaty pliku graficznego to GIF, JPEG, a nawet PNG. Jeżeli rozmiary obrazu są mniejsze niż zawartość sekcji BODY, tło zostanie złożone z powtórzeń obrazu – kafelków – ułożonych poziomo i pionowo.
W tym miejscu niezbędne są pewne wyjaśnienia. Jeśli nie chcesz, aby tło strony zostało złożone z powtórzeń obrazu, możesz (i musisz) zastosować kaskadowe arkusze stylów (CSS). Arkusze CSS zostały omówione szczegółowo w rozdziale 12. Składnia wyrażenia definiującego obraz jako tło jest następująca: . Jak widzisz, ten atrybut pojawił
się w znaczniku . Pewne atrybuty (takie jak te, definiujące tło strony) muszą być umieszczane w znacznikach HTML i nie korzystają z własnych znaczników. Modyfikują one bądź rozszerzają pierwotną funkcję znacznika nadrzędnego. Podobnie, nie wszystkie właściwości strony definiowane są w znaczniku , ale ponieważ sterują wyglądem całej strony, umieszczane są właśnie tu. Początek ramki Uwaga Korzystając z kaskadowych arkuszy stylów możesz narzucić zakaz składania tła strony z kafelków. W rozdziale 12. dowiesz się, jak to zrobić. Koniec ramki
Background – ten atrybut definiuje kolor tła strony. Kliknij próbkę koloru, aby rozwinąć paletę i wybrać kolor tła. Skorzystaj z próbnika, jeśli chcesz kolor pobrać z elementu na ekranie. Możesz także stworzyć własny kolor, wybierając ikonę System Color Picker. Paleta kolorów domyślnych zawiera kolory bezpieczne, obsługiwane w Internecie, które powinny wyglądać mniej więcej tak samo na każdym komputerze. Aby wybrać kolor z innej palety, rozwiń menu, które znajdziesz z prawej strony palety (klikając przycisk ze strzałką), i wybierz jedną z możliwości: Color Cubes, Continuous Tone, Windows OS, Mac OS lub Greyscale. Tylko kolory Color Cubes i Continuous Tone są w pełni bezpieczne. Jednak umieszczenie znacznika obok pozycji Snap to Web Safe sprawi, że Dreamweaver automatycznie będzie wybierał bezpieczny kolor najbliższy żądanemu. Kolory są reprezentowane w kodzie HTML przez liczby szesnastkowe, a składnia definicji koloru tła jest następująca: , gdzie #000000 to szesnastkowa reprezentacja koloru.
Początek ramki Uwaga Możesz korzystać także z tekstowych oznaczeń kolorów, wprowadzonych przez Netscape w wersji 1.1 przeglądarki Netscape Navigator. Zalecane są jednak kody szesnastkowe, ponieważ nie wszystkie przeglądarki interpretują oznaczenia tekstowe. Koniec ramki
Text – ten atrybut określa kolor tekstu na stronie WWW, nie będącego tekstem połączenia. Kliknij próbkę koloru, aby rozwinąć paletę i wybrać kolor tekstu. Składnia wyrażenia określającego kolor tekstu jest następująca: .
Links, Visited Links i Active Links – tutaj możesz wybrać kolory połączeń tekstowych na swojej stronie. Ustawienie Links określa kolor wszystkich nie odwiedzanych połączeń. Active Links to kolor wybieranych połączeń, a Visited Links, kolor połączeń odwiedzonych. Składnia kodu definiującego kolor połączenia jest taka: . Kolory pojawią się dopiero w oknie przeglądarki. W oknie dokumentu programu Dreamweaver wszystkie połączenia będą miały kolor taki jak połączenia nie odwiedzone.
Left Margin, Top Margin, Margin Width i Margin Height – te ustawienia umożliwiają zdefiniowanie w pikselach wartości marginesów, które zastąpią wartości domyślne ustalane przez przeglądarkę. Microsoft stosuje marginesy lewy (leftmargin) i górny
(topmargin), natomiast Netscape korzysta z atrybutów określających szerokość (marginwidth) i wysokość (marginheight). Składnia wyrażenia definiującego marginesy strony WWW jest następująca: . Pozostawienie tych pól tekstowych pustych oznacza zaakceptowanie wartości domyślnych przeglądarki, które rzadko są równe zero. Aby zostały zastosowane marginesy zerowe, musisz im tutaj aktywnie przypisać wartości zerowe.
Documect Encoding – jest to strona kodowa dokumentu, która określa kodowanie znaków na twojej stronie WWW. Domyślne kodowanie w większości przypadków to Western (Latin 1). Po zdefiniowaniu nowego typu, konieczne jest ponowne załadowanie strony. Składnia wyrażenia definiującego kodowanie znaków jest następująca: <META HTTP-EQUIV=”Content-type” CONTENT=”text/html; Character Set”>. Dodatkowe informacje na temat znaczników META znajdziesz w następnym punkcie.
Tracing Image, Image Transparency – pierwsze z ustawień umożliwia wskazanie obrazu stosowanego jako „kalka” strony. Z kolei suwak Image Transparency pozwala dopasować przeźroczystość obrazu, aby odróżniał się od zawartości strony. Kalki w połączeniu z warstwami to szybka i prosta metoda tworzenia stron WWW. Została ona omówiona w rozdziale 10., „Korzystanie z warstw”. Składnia wyrażenia HTML jest w tym przypadku następująca: . Kalka nie jest wyświetlana w przeglądarce – stanowi jedynie dla projektanta strony WWW punkt odniesienia.
Document Folder – nie jest to opcja, którą można modyfikować. Jest to po prostu informacja o folderze lokalnym przechowującym bieżący dokument i ścieżce dostępu do niego. Informacja ta pojawi się dopiero wówczas, gdy dokument zostanie zapisany. Modyfikacja ulokowania dokumentu jest możliwa w oknie Site. Rozdział 13. „Okno Site i organizacja plików” dostarczy Ci więcej informacji na temat zarządzania plikami.
Site Folder – nie jest to opcja, którą można modyfikować. Jest to po prostu informacja o folderze lokalnym przechowującym pliki witryny i ścieżce dostępu do niego. Podobnie jak poprzednio, modyfikacja ulokowania folderu jest możliwa w oknie Site. W rozdziale 13. dowiesz się jak definiować folder witryny.
Edycja kodu HTML W programie Dreamweaver dostępnych jest kilka sposobów modyfikacji kodu HTML. Dokładnie rzecz biorąc istnieją cztery podstawowe metody, z których trzy odnoszą się do aktualnie stosowanego widoku strony. W programie masz do dyspozycji trzy widoki: projektu, (Design View), kodu i projektu (Code and Design View) i kodu (Code View). Aby przełączyć się do innego widoku, kliknij ikonę żądanego widoku na pasku narzędzi lub wybierz w menu View odpowiednią pozycję: Code, Code and Design lub Design.
Widok projektu (Quick Tag Editor) Widok projektu (Design View) to nie tylko widok domyślny dla otwieranego dokumentu HTML, lecz także, jak się wydaje, najbardziej popularny z widoków. Oferuje bowiem twórcom stron WWW wybitnie projektowe środowisko pracy. Zapewnia więc efektywną pracę także i tym, którzy nie radzą sobie dobrze z kodem HTML, jest również użyteczny przy wstępnej fazie projektowania strony WWW i przy jej aktualizacji. Widok projektu jako taki nie udostępnia bezpośrednio kodu HTML, lecz Dreamweaver wyposażony jest w specjalny edytor – Quick Tag Editor – dzięki któremu nawet przy pracy w tym trybie możliwe jest wprowadzanie zmian w kodzie HTML. Początek ramki Uwaga Chociaż widok projektu jest widokiem domyślnym dla dokumentów HTML, w przypadku plików innego typu, ustawienia określające ich domyślny sposób prezentowania są inne. Na przykład pliki źródłowe JavaScript (*.js) otwierane są domyślnie w widoku kodu. Odpowiednie ustawienia są dostępne w oknie dialogowym Preferences, dla kategorii File Types/Editors. Tryb zmiany ustawień został omówiony w rozdziale 2., „Dostosowywanie programu Dreamweaver do własnych potrzeb”. Koniec ramki Początek ramki Uwaga Dostęp do edytora Quick Tag Editor jest możliwy we wszystkich trzech widokach, ale omówienie tej kwestii najlepiej pasuje do punktu poświęconego widokowi projektu. Koniec ramki Aby uruchomić edytor Quick Tag Editor, wybierz pozycję Quick Tag Editor z menu Modify, zastosuj skrót Ctrl+T lub kliknij ikonę Quick Tag Editor, ulokowaną przy prawej krawędzi okienka właściwości Property Inspector. Quick Tag Editor ma trzy tryby edycji, zależnych od aktualnie wybranego fragmentu kodu HTML: Insert HTML, Edit Tag i Wrap Tag. Choć Dreamweaver zazwyczaj trafnie wybiera tryb edycji, możesz przełączać się do pozostałych stosując skrót Ctrl+T. Początek ramki Uwaga Skrót klawiaturowy Ctrl+T to jedyna droga prowadząca do kolejnych trybów edycji kodu HTML edytora Quick Tag Editor. Pozostałe metody stosowane do uruchamiania edytora zawodzą, bowiem Quick Tag Editor znika, gdy uaktywnienie przenoszone jest w inne miejsce. Koniec ramki Quick Tag Editor można ulokować w dowolnym miejscu ekranu – wystarczy kliknąć jego pasek tytułu i przeciągnąć. Jest to pomocne w pewnych sytuacjach, ponieważ Quick Tag Editor zazwyczaj pojawia się nad aktualnie zaznaczonym elementem lub nad kursorem. Wyjątek od tej zasady stanowi otwieranie edytora z poziomu okienka dialogowego właściwości Property
Inspector. W tym przypadku okno edytora pojawia się obok okna właściwości. Chociaż większości użytkowników może to nie przeszkadzać, niektórzy nie lubią, gdy lista Tag Hints zasłania zaznaczony element (ustawienia edytora Quick Tag Editor można dostosować w okienku dialogowym Preferences, w kategorii Quick Tag Editor – informacje na temat tego okna znajdziesz w rozdziale 2). Początek ramki Uwaga Aby przełączać się między widokami projektu i kodu, możesz stosować skrót klawiaturowy Ctrl+Tab. Musisz jednak być w jednym z widoków, aby przełączyć się do drugiego. Koniec ramki
Tryb Insert HTML Tryb Insert HTML to tryb domyślny, w którym zgłasza się Quick Tag Editor w przypadku, gdy wywołany zostanie bez wcześniejszego zaznaczenia elementu. W oknie edytora wyświetlane są tylko oba nawiasy ostre – otwierający i zamykający. Możesz tu wpisać same znaczniki, znaczniki z atrybutami oraz zawartość. Po wpisaniu, naciśnij po prostu Enter, a kod zostanie wstawiony do dokumentu. Ostatnio wstawiony znacznik i zawartość zostaną wyróżnione. Jeśli przerwiesz na chwilę pisanie, pojawi się lista Tag Hints, pokazana na rysunku 3.12, z propozycjami adekwatnymi do tego, co już wpisałeś. Po wpisaniu definicji znacznika i zawartości, nie musisz wprowadzać znacznika zamykającego. Quick Tag Editor zrobi to sam, co dodatkowo upraszcza zadanie. Ten tryb można stosować do wstawiania znaczników, które nie są automatycznie umieszczane w kodzie przez program, na przykład otoczonego złą sławą znacznika <marquee> (znacznik ten występuje na liście Tag Hints). Początek ramki Uwaga Kliknięcie w obszarze projektu jest równoważne naciśnięciu klawisza Enter. W tym przypadku jednak kod nie zostanie podświetlony. Aby zamknąć Quick Tag Editor bez wprowadzania zmian w kodzie, naciśnij Esc. Przełączając się między trybami edycji edytora za pomocą skrótu Ctrl+T, pamiętaj także, że spowoduje to wprowadzenie zawartości edytora do kodu HTML. Koniec ramki Rys. 3.12. Lista Tag Hints to cena pomoc, jeśli nie pamiętasz wszystkich dostępnych znaczników
Tryb Edit Tag Jeśli zaznaczysz element i wywołasz edytor Quick Tag Editor, pojawi się on domyślnie w trybie Edit Tag. W trybie tym, w przeciwieństwie do pozostałych trybów, prezentowany jest zaznaczony znacznik wraz z atrybutami. Aby zmodyfikować wyrażenie, zmień po prostu atrybuty oraz
zawartość i naciśnij Enter (patrz rysunek 3.13). Podobnie jak w trybie Insert HTML, kliknięcie w obszarze projektu spowoduje wprowadzenie modyfikacji do kodu. Tryb ten jest szczególny użyteczny przy wprowadzaniu atrybutów, które nie są obsługiwane przez Dreamweaver. Tak więc, możesz automatycznie wygenerować podstawowy fragment kodu, a następnie ręcznie, z poziomu edytora Quick Tag Editor, wprowadzić atrybuty, których Dreamweaver nie obsługuje. Rys. 3.13. Edycja połączenia przy wykorzystaniu edytora Quick Tag Editor Początek ramki Uwaga Inny sposób wywołania edytora Quick Tag Editor w trybie Edit Tag polega na skorzystaniu z menu kontekstowego. Wskaż żądany znacznik, kliknij prawym klawiszem myszki i wybierz z menu pozycję Edit Tag. Koniec ramki
Tryb Wrap Tag Jeśli zaznaczony element to niesformatowany tekst lub obiekt, Quick Tak Edytor zamelduje się w trybie Wrap Tag (patrz rysunek 3.14). Znacznik, który wybierzesz i umieścisz w polu definicji edytora „zawrze” w sobie zaznaczony element. Jeśli na przykład zaznaczony został tekst: To powinien być tekst pogrubiony,... ale nie jest, naciśnięcie Ctrl+T umożliwia szybkie zastosowanie pogrubienia – wystarczy po prostu wstawić między nawiasami B (). Gdy naciśniesz Enter, zaznaczony tekst pojawi się jako pogrubiony. Rys. 3.14. Znacznik, który pojawi się tutaj zawrze w sobie zaznaczony element Początek ramki Uwaga Jeśli zaznaczony fragment zawiera otwierający lub zamykający znacznik HTML, Quick Tag Editor pojawi się w trybie Edit Tag, a znacznik nadrzędny zostanie zaznaczony. Koniec ramki
Widok kodu i Code Inspector Chociaż to miło korzystać z szybkiej i niezawiłej metody wstawiania i edycji kodu HTML, którą udostępnia Quick Tag Editor, umiejętność radzenia sobie z większymi blokami kodu pomoże początkującym lepiej zrozumieć wszystko to, co dzieje się na stronie WWW. Z kolei dla
użytkowników przyzwyczajonych do tworzenia stron WW w edytorach tekstowych, takich jak Homesite, BBEdit czy innych, jest to łagodne przejście do świata WYSIWIG. Początek ramki Uwaga Tu uwaga na marginesie. Dreamweaver jest teraz wyposażony w debuger JavaScript, który może być pomocny w rozwiązywaniu problemów ze skryptami. Narzędzie to zostało omówione w rozdziale 19., „Tworzenie skryptów JavaScript w programie Dreamweaver”. Koniec ramki Dreamweaver udostępnia dwie metody prezentacji kodu HTML (w rzeczywistości cztery, jeśli doliczyć widok kodu i projektu, który stanowi kombinację dwóch widoków, oraz edytor Quick Tag Editor). Pierwsza z nich to Code Inspector. Narzędzie Code Inspector było już obecne we wcześniejszych wersjach programu. Nowością w wersji 4 jest natomiast widok kodu. Zarówno widok kodu (Code View) jak i Code Inspector mają ten sam interfejs i funkcje. Różnica polega jedynie na tym, że Code Inspector pojawia się w samodzielnym, pływającym po ekranie oknie, a widok kodu to podstawowy interfejs edycji. Początek ramki Uwaga Coraz więcej projektantów zaczęło korzystać przy projektowaniu stron WWW z dwóch monitorów. Jeden monitor pokazuje stronę w widoku projektu, natomiast drugi służy jako pulpit prezentujący palety i inne narzędzia. Tu mogłoby się znaleźć miejsce dla okna Code Inspector. Rosnąca popularność pracy na dwóch monitorach w pewnym, aczkolwiek mniejszym, stopniu jest wynikiem pojawienia się w programie Dreamweaver nowej opcji – widoku kodu i projektu. Tym widokiem zajmiemy się w następnym punkcie. Koniec ramki Aby przełączyć się do widoku kodu, kliknij ikonę Show Code View na pasku narzędzi lub wybierz pozycję Code w menu View. Bezpośrednie przełączenie między widokami projektu i kodu jest możliwe także przy pomocy skrótu Ctrl+Tab (pamiętaj jednak, że ta metoda jest skuteczna tylko wtedy, gdy jesteś w jednym z widoków). Aby otworzyć okno Code Inspector, naciśnij klawisz F10 lub wybierz pozycję Code Inspector w menu Window. Do dyspozycji masz także ikonę na mini-pasku szybkiego uruchamiania. W widoku kodu (lub w oknie Code Inspector – te terminy mogą być stosowane wymiennie, a rozróżnienie wprowadzono jedynie w celu wyjaśnienia), można wstawiać obrazy i inne elementy HTML w taki sam sposób jak w widoku projektu. Jednak zamiast obrazu w postaci graficznej, widzisz go w postaci kodu HTML. Zmiany wprowadzane w widoku kodu nie są natychmiast implementowane. Aby zobaczyć ich efekt, musisz skorzystać z jednej z metod:
Nacisnąć F5.
Zastosować skrót Ctrl+Spacja.
Kliknąć ikonę Refresh na pasku narzędzi lub w oknie właściwości Property Inspector.
Przełączyć się do widoku projektu klikając ikonę Show Design View na pasku narzędzi lub stosując skrót Ctrl+Tab.
Menu otwierane ikoną View Options na pasku narzędzi udostępnia najczęściej stosowane w widoku kodu polecenia. Polecenia te są dostępne również w menu View jako menu podrzędne Code View Options. Oto wyjaśnienia funkcji poszczególnych pozycji:
Word Wrap – określa czy kod HTML ma być obłamywany do nowego wiersza, gdy osiągnięty zostanie brzeg ekranu. Ta opcja jest używana jedynie jako narzędzie ułatwiające zrozumienie kodu w trakcie jego edycji lub przy prezentacji postaci źródłowej strony WWW z przeglądarki sieciowej. Obłamywanie kodu nie wpływa na sposób wyświetlania strony.
Line Numbers – powoduje wyświetlenie numerów wierszy na lewym marginesie okna (patrz rysunek 3.15). Opcja jest użyteczna przy rozwiązywaniu problemów z kodem.
Highlight Invalid HTML – powoduje zaznaczenie kodu uznanego przez program za błędny.
Syntax Coloring – powoduje zastosowanie do elementów kodu kolorów zdefiniowanych w kategorii Code Colors okna dialogowego Preferences.
Auto Indent – automatycznie wprowadza do kodu wcięcia zdefiniowane w kategorii Code Format okna dialogowego Preferences.
Rys. 3.15. Jeśli zajmiesz się na serio pisaniem skryptów JavaScript, numery wierszy staną się Twoimi najlepszymi przyjaciółmi Inna użyteczna możliwość dostępna w widoku kodu to nawigacja w kodzie, do której dostęp daje ikona Code Navigation. Ta znajdująca się na pasku narzędzi ikona pozwala na nawigację między funkcjami JavaScript umieszczonymi w dokumencie. Jest to szybka i efektywna metoda poruszania się po kodzie JavaScript.
Widok kodu i projektu Stosowany w widoku projektu Quick Tag Editor jest w większości wypadków wystarczający, ale czasami pojawia się konieczność edycji całego bloku tekstu lub zestawu znaczników. Nieustanne wywoływanie tego edytora byłoby w takiej sytuacji dokuczliwe i spowalniałoby pracę. Podobnie, jeśli jesteś nowicjuszem w świecie znaczników HTML i nie bardzo wiesz do czego „to” w rzeczywistości służy, to analiza kodu źródłowego HTML może być pomocna, aby nauczyć się czytać i analizować kod. Niestety nieustanne przełączanie się między widokami projektu i kodu jest czasochłonne i nużące. Aby z tym skończyć, w wersji 4 programu Dreamweaver pojawił się jako novum łączony widok kodu i projektu. Umożliwia on bezpośrednią kontrolę nad projektem i kodem HTML prezentując stronę WWW zarówno w postaci WYSIWIG, jak i kodu źródłowego. Aby przełączyć się do widoku kodu i projektu, wybierz w menu View pozycję Code and Design lub kliknij ikonę Show Code and Design View na pasku narzędzi. Obszar roboczy okna zostanie wówczas podzielony na dwa panele. Domyślnie, kod HTML wyświetlany jest w górnym panelu, a widok projektu w dolnym.
Aby przełączać się między panelami, możesz korzystać ze skrótu klawiaturowego Ctrl+Tab, lub pozycji Switch Views menu View (pomocna jest także myszka – wystarczy kliknąć w żądanym panelu – przypis tłum.). Istnieje także możliwość zamiany miejscami obu paneli – innymi słowy panel projektu można przerzucić na górę. W tym celu wybierz z menu View pozycję Design View on Top lub z rozwijanego menu Options dostępnego na pasku narzędzi (patrz rysunek 3.16). Rys. 3.16. Opcje dostępne w widoku kodu i projektu Dostosować można także wzajemne proporcje obszarów zajmowanych przez panele widoków. Wystarczy za pomocą myszki przeciągnąć pasek je oddzielający (jest to linia pozioma wyświetlana bezpośrednio pod paskiem przewijania (o ile on jest) w panelu widoku kodu). Nad paskiem wskaźnik myszki zmienia swą postać, co jest wskazówką, że można dostosować wysokość okna. Kliknij więc i przeciągnij pasek w odpowiednie miejsce. Nawet jeżeli dokonujesz edycji strony w widoku projektu, wszelkie zmiany są natychmiast odzwierciedlane w kodzie prezentowanym w panelu widoku kodu. Jedną z największych zalet tego widoku, a szczególnie dla tych, którzy dopiero rozpoczynają swe zmagania z językiem HTML, jest to, że po wstawieniu obrazu, zastosowaniu do tekstu pogrubienia, czy też po jakiejkolwiek innej operacji, widok kodu aktualizuje się natychmiast, co pozwala zobaczyć fragmenty kodu wstawione w każdym z kroków tworzenia strony. Niewątpliwie jest to pomocne przy nauce języka HTML. Modyfikacje kodu HTML w panelu widoku kodu nie są już tak natychmiastowo przenoszone do panelu widoku projektu. Możesz wprowadzać w kodzie zmiany, ale na efekty zaczekasz. Aby je zobaczyć, musisz odświeżyć panel widoku projektu w taki sam sposób , w jaki to robiłeś w widoku kodu.
Paleta Reference Z biegiem czasu niewątpliwie nauczysz się wielu znaczników HTML, niezależnie od swoich wcześniejszych doświadczeń. Jednak zapamiętanie wszystkich to sprawa trudna. Nawet jeżeli wszystkie poznasz, to na pewno próba opisania ich jednakowo precyzyjnie stanowiłaby pewne wyzwanie. Dodaj do tego jeszcze niezliczoną ilość atrybutów, elementów CSS, JavaScript i innych języków skryptowych, z których masz możność korzystać, a uzyskasz setki, jeśli nie tysiące elementów do zapamiętania. Większość osób potrzebowałaby najprawdopodobniej słownika, aby pomóc sobie w uporządkowaniu wszystkich możliwości. Dreamweaver przyznaje tu słuszność i udostępnia całkowicie swobodnie pływający po ekranie, lecz zintegrowany z interfejsem programu, szeroko rozbudowany słownik i przewodnik po HTML-u, języku JavaScript i arkuszach CSS. Aby do niego dotrzeć, wybierz pozycję Reference w menu Window lub zastosuj skrót Ctrl+Shift+F1. Rozmiar czcionki możesz kontrolować, wybierając pozycję Small Font (mała czcionka), Medium Font (średnia) lub Large Font (duża) z rozwijanego menu otwieranego w prawym górnym rogu palety Reference. Początek ramki Uwaga
Na pasku narzędzi znajdziesz ikonę Reference – ona także zaprowadzi Cię do palety Reference, w której automatycznie pojawi się opis aktualnie zaznaczonego znacznika (lub punktu wstawiania). Koniec ramki Jak skorzystać z palety Reference: 1.
Wybierz książkę, z której chcesz korzystać. Masz do wyboru: O’Reilly CSS Reference, HTML Reference i JavaScript Reference. Wyboru dokonujesz z listy rozwijanej Book za pomocą myszki lub klawiszy ze strzałkami. Klawisze PgUp i PgDown są także obsługiwane.
2.
W zależności od wybranej książki, możesz teraz wybrać z listy styl, znacznik lub obiekt i wyświetlić na jego temat informacje.
3.
Po wybraniu elementu z książki, wyświetlony zostanie jego ogólny opis (patrz rysunek 3.7, na którym pokazany jest opis znacznika