Przestrzeń robocza programu Dreamweaver

Gdy po raz pierwszy po zainstalowaniu uruchamia się program Dreamweaver, zostaje wyświetlone menu Szybki start z prośbą o odpowiedź na trzy pytania, które pomogą w spersonalizowaniu przestrzeni roboczej programu stosownie do potrzeb użytkownika.

W zależności od udzielonych odpowiedzi, program Dreamweaver otwiera przestrzeń roboczą Programista (minimalistyczny układ skupiony na kodzie) lub przestrzeń roboczą Standardowa (układ podzielony, z narzędziami graficznymi i podglądem podczas kodowania).

Po wybraniu przestrzeni roboczej należy wybrać najdogodniejszy dla siebie motyw kolorystyczny. Następnie można rozpocząć pracę.

Udoskonalony ekran główny

Ekran główny w programie Dreamweaver zapewnia łatwy dostęp do niedawno używanych plików, kategorii plików i szablonów startowych.

Zależnie od stanu subskrypcji mogą być na nim wyświetlane materiały dostosowane do wymagań użytkownika.

Program Dreamweaver wyświetla ekran główny przy uruchamianiu, a także w sytuacji, gdy nie są otwarte żadne dokumenty.

Opcje dostępne na ekranie startowym programu Dreamweaver

Kliknij kartę Nauka, aby uzyskać bezpośredni dostęp do samouczków programu Dreamweaver.

Umożliwia utworzenie dokumentów w programie Dreamweaver przez kliknięcie dowolnego z wyświetlonych typów plików.

Umożliwia otwarcie jednego z szablonów początkowych dołączonych do programu Dreamweaver.

Kliknij opcję Strona główna, aby wrócić do ekranu początkowego.

Na ekranie startowym są wyświetlane niedawno używane pliki. Jeśli nie ma takich plików, to karta ta będzie pusta.

Dostępna jest także funkcja wyszukiwania, uruchamiana przez kliknięcie ikony szukaj w prawym górnym rogu ekranu powitalnego. Jeśli wpiszesz termin do wyszukania, aplikacja wyświetli niedawne pliki, zasoby Creative Cloud, odsyłacze do artykułów pomocy oraz obrazy Stock pasujące do tego terminu.

Możesz kliknąć opcję Utwórz nowy, aby rozpocząć tworzenie nowych plików programu Dreamweaver. Jeśli w systemie są już pliki, kliknij opcję Otwórz. Więcej informacji: Tworzenie i otwieranie plików.

Omówienie przestrzeni roboczej

Przestrzeń robocza programu Dreamweaver umożliwia wyświetlanie właściwości dokumentów i obiektów. W przestrzeni roboczej znajduje się także wiele najczęściej używanych opcji. Są one umieszczone na paskach narzędziowych, co umożliwia szybkie stosowanie zmian w dokumentach.

Omówienie elementów przestrzeni roboczej

Przestrzeń robocza składa się z następujących elementów:

Znajduje się w górnej części okna aplikacji i zawiera przełącznik przestrzeni roboczej, menu (tylko w systemie Windows) i inne elementy sterujące aplikacji.

Zawiera przycisk opcji różnych widoków okna Dokument (np. widoku Projekt, widoku aktywnego oraz widoku Kod).

Aby wyświetlić standardowy pasek narzędziowy, wybierz polecenie Okno > Paski narzędziowe > Standardowy. Standardowy pasek narzędziowy zawiera przyciski typowych operacji z menu Plik oraz Edycja: Nowy, Otwórz, Zapisz, Zapisz wszystko, Drukuj kod, Wytnij, Kopiuj, Wklej, Cofnij oraz Ponów.

znajduje się po lewej stronie okna aplikacji i zawiera przyciski związane z widokiem.

Wyświetla bieżący dokument, w trakcie jego tworzenia i edycji.

Umożliwia wyświetlanie i zmianę różnych właściwości zaznaczonego obiektu lub tekstu. Każdy obiekt ma inne właściwości.

Umieszczony na pasku stanu, w dolnej części okna Dokument. Pokazuje hierarchię znaczników otaczających bieżące zaznaczenie. Kliknij dowolny znacznik w hierarchii, aby wybrać znacznik i całą jego zawartość.

Pomagają śledzić wykonywane czynności i modyfikować ich wyniki. Typowe przykłady to panel Wstaw, panel Projektant CSS i panel Pliki. Aby rozwinąć panel, kliknij dwukrotnie jego zakładkę.

Umożliwia przesyłanie i wyświetlanie plików PSD w chmurze Creative Cloud. Za pomocą panelu Extract można wydzielać style CSS, tekst, obrazy, czcionki, kolory, gradienty i pomiary z kompozycji PSD, aby wykorzystać je w dokumencie.

Zawiera przyciski do wstawiania w dokumencie różnego rodzaju obiektów, np. obrazów, tabel oraz elementów multimedialnych. Każdemu obiektowi odpowiada pewien fragment kodu HTML, określającego różne atrybuty obiektu. W panelu Wstaw jest dostępny na przykład przycisk Tabela, którego kliknięcie powoduje wstawienie tabeli. Jeśli wolisz, zamiast z panelu Wstaw możesz wstawiać obiekty za pomocą menu Wstaw.

Umożliwia zarządzanie plikami i folderami, bez względu na to, czy są częścią serwisu programu Dreamweaver, czy znajdują się na serwerze zdalnym. Ponadto panel Pliki zapewnia dostęp do wszystkich plików na dysku lokalnym. Więcej informacji: Zarządzanie plikami i folderami.

Umożliwia zapisanie i ponowne wykorzystanie urywków kodu na wielu stronach WWW, w wielu serwisach i w wielu instalacjach programu Dreamweaver (po zsynchronizowaniu ich ustawień). Więcej informacji: Wielokrotne używanie urywków kodu.

Jest to Inspektor właściwości CSS, który umożliwia opracowywanie stylów CSS, plików i właściwości oraz zapytań o media metodą graficzną.

Omówienie okna Dokument

Okno Dokument wyświetla bieżący dokument. Aby przełączyć widok dokumentu, skorzystaj z opcji na pasku narzędziowym Dokument.

Widok można również zmienić za pomocą opcji w menu Widok.

Przedstawia realistyczną symulację wyglądu strony i umożliwia interakcję z elementami dokumentu w taki sam sposób, jak w przeglądarce internetowej. Bezpośrednio w widoku aktywnym można edytować elementy HTML i od razu zobaczyć efekty wprowadzonych zmian. Więcej informacji na temat edytowania w widoku aktywnym zawiera artykuł Edytowanie elementów HTML w widoku aktywnym.

Środowisko projektowania służące do tworzenia wizualnego układu strony, edycji, a także do szybkiego opracowywania aplikacji. W tym widoku program Dreamweaver przedstawia wizualnie dokument z możliwością nieograniczonej edycji. Wygląd dokumentu jest zbliżony do tego, co będzie widoczne podczas przeglądania strony w przeglądarce.

Środowisko ręcznego programowania, które umożliwia wpisywanie i edycję kodu HTML, JavaScript oraz wszelkich innych rodzajów kodu.

Wariant widoku Kod, w którym istnieje możliwość jednoczesnego przeglądania wielu różnych fragmentów dokumentu.

Wyświetla zarówno widok Kod, jak i widok aktywny tego samego dokumentu w jednym oknie.

Wyświetla zarówno widok Kod, jak i widok Projekt tego samego dokumentu w jednym oknie.

Wyświetla kod wykonywany przez przeglądarkę podczas prezentacji strony; w odpowiedzi na czynności użytkownika w widoku aktywnym kod ten podlega dynamicznym zmianom.

Gdy okno Dokument jest zmaksymalizowane (ustawienie domyślne), w górnej części tego okna znajdują się zakładki z nazwami plików wszystkich otwartych dokumentów. Jeśli w pliku wprowadzono zmiany i nie zapisano ich, program Dreamweaver wyświetla obok nazwy tego pliku gwiazdkę.

Pod zakładką dokumentu (lub pod jego paskiem tytułowym, jeśli dokumenty są przeglądane w osobnych oknach) program Dreamweaver wyświetla również pasek narzędziowy Pliki powiązane. Dokumenty powiązane są to dokumenty skojarzone z bieżącym plikiem, np. pliki CSS lub pliki JavaScript. Aby otworzyć jeden z plików powiązanych w oknie Dokument, należy kliknąć jego nazwę na pasku narzędziowym Pliki powiązane.

Przełączanie pomiędzy widokami

Pasek narzędziowy Dokument umożliwia szybkie przełączanie widoków. Więcej informacji: Omówienie paska narzędziowego Dokument.

Widok można również zmienić za pomocą następujących opcji w menu Widok:

• Tylko widok Kod: wybierz opcję Kod.
• Widok podzielony: wybierz opcję Podzielony oraz dowolne z opcji podziału.
• Tryb wyświetlania: przełączanie między widokiem aktywnym a widokiem Projekt.
• Przełącz widoki: umożliwia przełączanie z jednego widoku na inny.

Wyświetlanie okien dokumentów kaskadowo lub sąsiadująco albo zmiana ich ułożenia

Jeśli otwartych jest kilka dokumentów, można ułożyć je kaskadowo lub sąsiadująco.

Aby ułożyć okna dokumentów kaskadowo, wybierz polecenie Okno > Ułóż > Kaskada.

Aby ułożyć okna dokumentów sąsiadująco: 

• (Windows) Wybierz polecenie Okno > Ułóż > Sąsiadująco w poziomie lub Okno > Ułóż > Sąsiadująco w pionie.
• (Macintosh) Wybierz polecenie Okno > Ułóż > Sąsiadująco.

Otwarcie więcej niż jednego pliku powoduje wstawienie zakładek do okna Dokument. Aby zmienić kolejność okien dokumentów, przeciągnij zakładkę okna w nowe miejsce w ramach grupy.

Zmiana rozmiaru okna dokumentu

Na pasku stanu są wyświetlane bieżące wymiary okna Dokument (w pikselach). Aby zaprojektować stronę, która najlepiej wygląda w określonej wielkości, możesz dopasować okno Dokument do jednego z wcześniej określonych rozmiarów, zmienić określone rozmiary lub utworzyć nowy rozmiar.

Zmiana rozmiaru wyświetlania strony w widoku projektu lub widoku aktywnym powoduje tylko zmianę wymiarów widoku. Rozmiar dokumentu nie ulegnie zmianie.

Oprócz rozmiarów ustalonych i niestandardowych program Dreamweaver umożliwia także wybranie wymiarów określonych w zapytaniu o media. Gdy wybrany zostanie rozmiar odpowiadający zapytaniu o media, program Dreamweaver wyświetli stronę na podstawie tego zapytania. Można również zmienić orientację strony, aby wyświetlić jej podgląd na urządzeniach przenośnych, na których układ strony zmienia się w zależności od tego, w jaki sposób użytkownik trzyma urządzenie.

Aby zmienić rozmiar okna Dokument, wybierz jeden z rozmiarów z listy w wyskakującym menu Rozmiar okna w dolnej części tego okna.

Pokazany rozmiar okna odzwierciedla wewnętrzne wymiary okna przeglądarki bez krawędzi; rozmiar monitora lub urządzenia przenośnego jest wskazany po prawej stronie.

Zmiana wartości w wyskakującym menu Rozmiar okna

Dodawanie nowego rozmiaru do wyskakującego menu Rozmiar okna

Omówienie paska narzędziowego Dokument

Pasek narzędziowy Dokument zawiera przyciski, które umożliwiają szybkie przełączanie się między różnymi widokami dokumentu. Ten pasek narzędziowy zawiera także często używane polecenia i opcje służące do wyświetlania dokumentu oraz przesyłania go między serwisami lokalnym i zdalnym.

Na pasku narzędziowym Dokument są wyświetlane następujące opcje:

Wyświetla tylko widok Kod w oknie Dokument.

Dzieli okno Dokument na dwa widoki: Kod i Aktywny/Projekt. Opcja widoku Projekt nie jest dostępna w przypadku dokumentów z układem elastycznej siatki.

Jest to interaktywny podgląd, który zapewnia precyzyjny rendering projektów HTML5 i jest aktualizowany w czasie rzeczywistym, wyświetlając zmiany natychmiast po ich wprowadzeniu. W widoku aktywnym można ponadto edytować elementy HTML. Obok opcji widoku aktywnego znajduje się rozwijana lista, która umożliwia przechodzenie między widokiem aktywnym a widokiem Projekt. W dokumentach z układem elastycznej siatki ta lista nie jest dostępna.

Przedstawia taką reprezentację dokumentu, jaka będzie widoczna dla użytkownika przeglądarki internetowej.

Omówienie paska narzędziowego Standardowy

Aby wyświetlić standardowy pasek narzędziowy, wybierz polecenie Okno > Paski narzędziowe > Standardowy. Standardowy pasek narzędziowy zawiera przyciski typowych operacji z menu Plik oraz Edycja: Nowy, Otwórz, Zapisz, Zapisz wszystko, Drukuj kod, Wytnij, Kopiuj, Wklej, Cofnij oraz Ponów.

Omówienie paska narzędziowego Nawigacja w przeglądarce

Pasek narzędziowy Nawigacja w przeglądarce włącza się w widoku aktywnym (lecz tylko wtedy, gdy uaktywniono jego wyświetlanie za pomocą menu Okno->Paski narzędzi->Standardowy). Jest na nim widoczny adres strony wyświetlanej w oknie Dokument. Widok aktywny zachowuje się jak typowa przeglądarka internetowa. Nawet jeśli przejdzie się do stron spoza lokalnego serwisu (np. na stronę http://www.adobe.com), program Dreamweaver wyświetli je w oknie Dokument.

Łącza w widoku aktywnym są domyślnie nieaktywne. Dzięki temu można zaznaczyć lub kliknąć tekst łącza w oknie Dokument — kliknięcie nie spowoduje przejścia do kolejnej strony. Aby przetestować łącza w widoku aktywnym, można włączyć jednorazowe lub stałe klikanie, wybierając odpowiednio polecenie Widok > Opcje widoku aktywnego > Śledź łącza (Ctrl + kliknięcie łącza) albo Stale śledź łącza.

Omówienie paska narzędziowego

Ten pasek narzędziowy jest wyświetlany pionowo w lewej części okna Dokument i jest widoczny we wszystkich widokach (Kod, Aktywny oraz Projekt). Przyciski dostępne na pasku zależą od widoku i są wyświetlane tylko wtedy, gdy można ich użyć w aktualnie wybranym widoku. Na przykład podczas pracy w widoku aktywnym nie będą widoczne opcje specyficzne dla widoku Kod, takie jak Formatuj kod źródłowy.

Dostosowywanie paska narzędzi

Pasek narzędziowy można dostosować do własnych potrzeb, dodając opcje menu lub usuwając niepotrzebne opcje z paska.

Aby dostosować pasek narzędziowy, wykonaj następujące czynności:

Aby przywrócić domyślne przyciski paska narzędziowego, kliknij przycisk Przywróć domyślne w oknie dialogowym Dostosuj pasek narzędziowy.

Omówienie paska stanu

Pasek stanu w dolnej części okna Dokument zapewnia dodatkowe informacje o tworzonym dokumencie.

Selektor znaczników

Pokazuje hierarchię znaczników otaczających bieżące zaznaczenie. Kliknij dowolny znacznik w hierarchii, aby wybrać znacznik i całą jego zawartość. Kliknij znacznik <body>, aby zaznaczyć cały dokument. Aby ustawić atrybuty class lub ID znacznika występującego w selektorze znaczników, kliknij znacznik prawym przyciskiem myszy (Windows) lub z wciśniętym klawiszem Control (Macintosh), a następnie wybierz klasę lub identyfikator z menu kontekstowego.

Panel Wyjście

Kliknij tę ikonę, aby wyświetlić panel Wyjście, który prezentuje błędy kodowania wykryte w dokumencie.

Kolorowanie kodu

(Dostępne tylko w widoku Kod).

Wybierz język kodu z tego menu, aby zmienić ustawienia kolorowania zgodnie z wybranym językiem programowania.

Przełącznik trybu wstawiania (INS) oraz zastępowania (OVR)

(Dostępne tylko w widoku Kod).

Umożliwia przełączanie między trybem wstawiania lub zastępowania podczas pracy w widoku Kod.

Numer wiersza i kolumny

(Dostępne tylko w widoku Kod).

Wyświetla numer wiersza lub numer kolumny w miejscu położenia kursora.

Omówienie Inspektora właściwości

Inspektor właściwości (Okno > Właściwości) umożliwia przeglądanie i edytowanie najczęściej używanych właściwości aktualnie zaznaczonego elementu strony, takiego jak tekst lub wstawiony obiekt.

Zawartość Inspektora właściwości zależy od zaznaczonego elementu. Na przykład jeśli zaznaczy się obraz na stronie, to Inspektor właściwości będzie wyświetlać właściwości zaznaczonego obrazu (np. jego ścieżkę, szerokość i wysokość, dane krawędzi wokół obrazu itp.).

Inspektor właściwości jest wyświetlany domyślnie przy lewej krawędzi przestrzeni roboczej, ale można go oddokować i w ten sposób zmienić w panel ruchomy.

Aby uzyskać pomoc dotyczącą konkretnego Inspektora właściwości, kliknij przycisk pomocy w prawym górnym rogu tego Inspektora lub wybierz polecenie Pomoc z menu Opcje w Inspektorze właściwości. 

Wyświetlanie i modyfikowanie właściwości elementu strony

Menu kontekstowe

Menu kontekstowe zapewniają wygodny dostęp do najczęściej używanych poleceń i właściwości powiązanych z obiektem lub oknem, z którymi pracujesz. Menu kontekstowe zawiera tylko te polecenia, które mają zastosowanie do bieżącego zaznaczenia.

Aby otworzyć menu kontekstowe, kliknij prawym przyciskiem myszy (Windows) lub kliknij, przytrzymując klawisz Ctrl (Mac) sekcję kodu w widoku Kod albo obiekt w widoku aktywnym lub widoku Projekt.

Zmiana położenia paneli w programie Dreamweaver

Położenie i wygląd wszystkich paneli w programie Dreamweaver można dostosować do własnych potrzeb.

Dokowanie i oddokowywanie paneli

• Aby zadokować panel, należy przeciągnąć jego zakładkę do pozycji dokowania nad, pod lub między innymi panelami.
• Aby zadokować grupę paneli, należy przeciągnąć ich paski tytułu (jednolity pusty pasek powyżej zakładki) do pozycji dokowania.
• Aby usunąć panel lub grupę paneli, przeciągnij go poza stację dokowania przy użyciu zakładki lub paska tytułu. Można także przeciągnąć go do innej stacji dokowania lub umożliwić mu swobodne przemieszczanie się.

Przesuwanie paneli

W trakcie przesuwania paneli będą widoczne podświetlone na niebiesko strefy upuszczania. Są to obszary, do których można przesunąć panel. Można na przykład przesunąć panel do góry lub w dół w stacji dokowania, przeciągając go do wąskiej niebieskiej strefy powyżej lub poniżej panelu. Jeśli przesuniesz go do obszaru, który nie jest strefą upuszczania, panel będzie się swobodnie przemieszczał w przestrzeni roboczej.

• Aby przesunąć panel, przeciągnij jego zakładkę.
• Aby przesunąć grupę paneli, przeciągnij pasek tytułu.

Dodawanie i usuwanie paneli

Jeśli usuniesz wszystkie panele ze stacji dokowania, stacja zniknie. Dok można utworzyć poprzez przesunięcie paneli do prawej krawędzi przestrzeni roboczej tak, aby pojawił się obszar upuszczenia.

• Aby usunąć panel, kliknij jego zakładkę prawym przyciskiem myszy (Windows) lub przytrzymując klawisz Control (Mac) i wybierz opcję Zamknij lub usuń zaznaczenie w menu Okno.
• Aby dodać panel, zaznacz go w menu Okno i zadokuj w dowolnie wybranym miejscu.

Obsługa grup paneli

• Aby przesunąć panel do grupy, przeciągnij jego zakładkę do podświetlonej strefy upuszczania w grupie.
• Aby zmienić ułożenie paneli w grupie, przeciągnij zakładki poszczególnych paneli na inne miejsce.
• Aby usunąć panel z grupy, umożliwiając jego swobodne przemieszczanie, przeciągnij jego zakładkę poza grupę.
• Aby przesunąć grupę, przeciągnij pasek tytułowy (obszar nad zakładkami).

Układanie ruchomych paneli

Jeśli panel zostanie przeciągnięty ze stacji dokowania do miejsca innego niż strefa upuszczania, zmieni się w panel ruchomy. Taki panel można umieścić w dowolnym miejscu przestrzeni roboczej. Ruchome panele oraz grupy paneli można układać w stos — tak, aby przy przeciąganiu paska tytułu najwyżej położonego elementu przemieszczały się jak pojedynczy obiekt.

• Aby ułożyć ruchome panele w stos, przeciągnij ich zakładki do strefy upuszczania znajdującej się na dole innego panelu.
• Aby zmienić kolejność układania, przeciągnij zakładkę panelu w górę lub w dół.
• Aby wyjąć panel lub grupę paneli ze stosu, tak by mogły się przemieszczać swobodnie, przeciągnij ich zakładkę lub pasek tytułu poza stos.

Zmiana rozmiarów paneli

• Kliknij dwukrotnie zakładkę, aby zminimalizować lub zmaksymalizować panel, grupę paneli lub stos paneli. Można także dwukrotnie kliknąć obszar zakładek (wolna przestrzeń obok zakładek).
• Aby zmienić rozmiary panelu, przeciągnij dowolną jego część. 

Zwijanie i rozwijanie ikon paneli

Panele można zwinąć do postaci ikon, aby uporządkować przestrzeń roboczą. W niektórych przypadkach, panele są zwinięte do postaci ikon w domyślnych ustawieniach przestrzeni roboczej.

• Aby zwinąć lub rozwinąć wszystkie ikony paneli w kolumnie, kliknij podwójną strzałkę u góry stosu.
• Kliknij ikonę panelu, aby ją rozwinąć.
• Aby zmienić rozmiar ikon paneli tak, aby widoczne były wyłącznie ikony (a nie ich etykiety), dostosuj szerokość doku tak, aby zniknął tekst. Aby ponownie wyświetlić tekst ikony, zwiększ szerokość doku.
• Aby zwinąć rozwinięty panel z powrotem do postaci ikony, kliknij jego zakładkę, jego ikonę lub podwójną strzałkę na pasku tytułu panelu.

Tworzenie własnych przestrzeni roboczych

Przestrzeń roboczą można dostosować, dodając lub usuwając panele stosownie do własnych potrzeb. Wprowadzone zmiany przestrzeni roboczej można zapisać do późniejszego wykorzystania. Zapisana przestrzeń będzie dostępna do wyboru za pomocą przełącznika przestrzeni roboczych na pasku narzędziowym Dokument.

Dzięki zapisaniu bieżącego rozmiaru i położenia paneli jako nazwanej przestrzeni roboczej możliwe jest przywrócenie układu tej przestrzeni roboczej, nawet jeśli przesunie się lub zamknie panel.

Aby zapisać własną przestrzeń roboczą:

1. Wybierz polecenie Okno > Układ przestrzeni roboczych > Nowa przestrzeń robocza.
2. Wpisz nazwę przestrzeni roboczej.

Przestrzeń robocza zostanie zapisana i będzie widoczna w przełączniku przestrzeni roboczych na pasku narzędziowym Dokument.

Aby usunąć własną przestrzeń roboczą:

Z przełącznika na pasku aplikacji wybierz polecenie Zarządzaj przestrzeniami roboczymi, aby otworzyć okno dialogowe Zarządzaj przestrzeniami roboczymi. Zaznacz odpowiednią przestrzeń roboczą, a następnie kliknij przycisk Usuń.

Wyświetlanie lub przełączanie przestrzeni roboczych

Wybierz przestrzeń roboczą za pomocą przełącznika na pasku narzędziowym Dokument.

Dostosowywanie programu Dreamweaver na komputerach używanych przez wielu użytkowników

Program Dreamweaver można dostosowywać do własnych potrzeb także w systemie operacyjnym, z którego korzysta wielu użytkowników, np. w Windows XP lub Mac OS X.

Program chroni dostosowaną konfigurację przed zastąpieniem jej ustawień przez innego użytkownika, który inaczej skonfiguruje program. Aby było to możliwe, podczas pierwszego uruchomienia programu Dreamweaver w systemie operacyjnym obsługującym wielu użytkowników tworzone są kopie plików konfiguracyjnych. Pliki konfiguracyjne każdego użytkownika są umieszczane w folderze odpowiadającym temu użytkownikowi.

Jeśli program Dreamweaver zostanie ponownie zainstalowany lub uaktualniony, automatycznie utworzy kopie zapasowe istniejących plików konfiguracyjnych, co umożliwia dostęp do zmian naniesionych w tych plikach.

Wyświetlanie dokumentów z zakładkami (tylko Mac)

Program Dreamweaver może wyświetlać wiele dokumentów w pojedynczym oknie Dokument, korzystając z zakładek służących do rozpoznawania dokumentów. Może też wyświetlać je jako część ruchomej przestrzeni roboczej, w której każdy dokument wyświetlany jest w jego własnym oknie.

Otwieranie dokumentu z zakładkami w oddzielnym oknie

Kliknij zakładkę z wciśniętym klawiszem Control i wybierz z menu kontekstowego polecenie Przejdź do nowego okna.

Zmiana domyślnego ustawienia dokumentu z zakładkami

1. Wybierz polecenie Dreamweaver > Preferencje i otwórz kategorię Ogólne.
2. Zaznacz lub usuń zaznaczenie opcji Otwórz dokumenty w zakładkach i kliknij przycisk OK.

Program Dreamweaver nie zmienia sposobu wyświetlania dokumentów otwartych w przypadku zmiany preferencji. Dokumenty otwarte po wybraniu nowej preferencji zostaną wyświetlone zgodnie z wybranymi opcjami.

Ekran powitalny pojawia się po uruchomieniu programu Dreamweaver i w czasie, gdy nie ma żadnych otwartych dokumentów. Ekran powitalny może być ukrywany, a potem znowu wyświetlany. Jeśli ekran powitalny jest ukryty i nie ma żadnych otwartych dokumentów, to okno Dokument jest puste.

Często używane panele programu Dreamweaver

Podczas pracy w programie Dreamweaver korzysta się z wielu paneli. Tutaj opisano najczęściej używane z nich.

Omówienie panelu Wstaw

Panel Wstaw (Okno > Wstaw) zawiera przyciski do tworzenia i wstawiania obiektów, takich jak tabele, obrazy i łącza. Przyciski są zgrupowane w kilku kategoriach, które można przełączać za pomocą rozwijanej listy na górze.

Niektóre kategorie zawierają przyciski z wyskakującymi menu. Zaznaczenie opcji w wyskakującym menu powoduje, że staje się ona domyślną operacją danego przycisku. Na przykład jeśli z wyskakującego menu przycisku Znak zostanie wybrana opcja Łamanie wiersza, to po następnym kliknięciu przycisku Znak program Dreamweaver wstawi znak podziału wiersza. Po wybraniu nowej opcji z wyskakującego menu domyślna operacja przycisku jest zmieniana.

Panel Wstaw zawiera następujące kategorie:

Umożliwia tworzenie i wstawianie najczęściej używanych elementów HTML, np. znaczników DIV i obiektów takich jak obrazy i tabele.

Zawiera przyciski do tworzenia formularzy i wstawiania elementów formularza, takich jak wyszukiwanie, miesiąc, hasło.

Dokument można zapisać jako szablon, oznaczając poszczególne regiony jako edytowalne, opcjonalne, powtarzalne — a nawet opcjonalne regiony powtarzalne.

Zawiera składniki Bootstrap używane do tworzenia elementów nawigacyjnych, kontenerów, rozwijanych menu i innych obiektów, które można wykorzystać w projektach reagujących.

Zawiera przyciski do tworzenia serwisów korzystających z biblioteki jQuery Mobile.

Umożliwia wstawianie elementów jQuery do budowania interfejsu użytkownika, takich jak harmonijka, suwaki i przyciski.

Umożliwia grupowanie i organizację najczęściej używanych przycisków z panelu Wstaw w jednym wspólnym miejscu.

Wstawianie obiektu

Aby wstawić obiekt za pomocą panelu Wstaw:

Edytowanie preferencji panelu Wstaw

Dodawanie, usuwanie lub obsługa elementów z kategorii Ulubione panelu Wstaw

Omówienie panelu Pliki

Panel Pliki służy do wyświetlania plików wchodzących w skład serwisu programu Dreamweaver oraz zarządzania tymi plikami.

Panel Pliki umożliwia wyświetlanie plików i folderów oraz sprawdzanie, czy zostały one skojarzone z serwisem programu Dreamweaver. Pozwala również na wykonywanie typowych operacji konserwacyjnych na plikach, takich jak ich otwieranie i przenoszenie.

Ponadto panel Pliki ułatwia zarządzanie plikami i przenoszenie ich między komputerem lokalnym a serwerami zdalnymi. 

Więcej informacji o możliwościach panelu Pliki: Zarządzanie plikami i folderami.

Projektant CSS

Panel Projektant CSS (Okna > Projektant CSS) to Inspektor właściwości CSS, który umożliwia tworzenie plików i stylów CSS metodą graficzną, ustawianie właściwości oraz definiowanie zapytań o media.

Operacje wykonane w panelu Projektant CSS można cofnąć, naciskając klawisze Ctrl/Cmd+ Z, lub ponowić, naciskając klawisze Ctrl/Cmd + Y. Zmiany są automatycznie odzwierciedlane w widoku aktywnym, a odpowiedni plik CSS jest odświeżany. Program sygnalizuje zmianę pliku powiązanego, przez krótką chwilę (około 8 sekund) podświetlając zakładkę tego pliku.

Panel Projektant CSS zawiera następujące sekcje i opcje:

Wszystko Wyświetla cały kod CSS oraz wszystkie zapytania o media i selektory związane z bieżącym dokumentem. Można filtrować wymagane reguły CSS i modyfikować właściwości. Za pomocą tego trybu można również rozpocząć tworzenie selektorów lub zapytań o media.

Ten tryb nie rozpoznaje zaznaczenia. Oznacza to, że po zaznaczeniu elementu na stronie związany z nim selektor, zapytanie o media lub kod CSS nie będą podświetlane w panelu Projektant CSS.

Bieżące Wyświetla wyliczone style elementu zaznaczonego w widoku Projekt lub Aktywny w bieżącym dokumencie. Użycie tego trybu w przypadku pliku CSS w widoku Kod spowoduje wyświetlenie wszystkich właściwości aktywnego selektora.

Ten tryb ma charakter kontekstowy. Jest to opcja przydatna podczas edytowania właściwości selektorów powiązanych z elementem, który został zaznaczony w dokumencie.

Źródła Zawiera listę wszystkich arkuszy stylów CSS związanych z danym dokumentem. Za pomocą tej sekcji można tworzyć i dołączać arkusze CSS do dokumentu. Można również definiować style CSS wewnątrz dokumentu.

@Media Zawiera listę wszystkich zapytań o media w źródłach wybranych w sekcji Źródła. Jeśli nie wybrano konkretnego arkusza stylów CSS, to ta sekcja panelu będzie wyświetlać wszystkie zapytania o media związane z dokumentem.

Selektory Zawiera listę wszystkich selektorów w źródłach wybranych w sekcji Źródła. Jeśli wybrano również zapytanie o media, to ta sekcja panelu wyświetli listę ograniczoną do selektorów danego zapytania o media. Jeśli natomiast nie wybrano ani arkusza CSS, ani zapytań o media, to zostaną wyświetlone wszystkie selektory w dokumencie.

Jeśli w sekcji @Media wybrano opcję Globalnie, to wyświetlone zostaną wszystkie selektory, które nie zostały uwzględnione w zapytaniu o media dla wybranego źródła.

Właściwości Wyświetla właściwości, które można ustawić w odniesieniu do wybranego selektora. Więcej informacji: Określanie właściwości.

Rozmiary okienek ustawione w danej sesji są zapamiętywane także po zwinięciu lub rozwinięciu poszczególnych części panelu Projektant CSS. Okienka Źródła i Media zachowują niestandardowy rozmiar do czasu kolejnej zmiany tego rozmiaru.

Uwaga: Po wybraniu elementu strony w sekcji Selektory zostanie zaznaczony najbardziej szczegółowy selektor. Aby wyświetlić właściwości konkretnego selektora, kliknij jego nazwę w panelu.

Aby wyświetlić wszystkie selektory, można wybrać opcję Wszystkie źródła w sekcji Źródła. Aby wyświetlić selektory, które nie należą do żadnego zapytania o media w wybranym źródle, kliknij opcję Globalnie w panelu @Media.

Omówienie wizualnych linii pomocniczych

Program Dreamweaver udostępnia kilka rodzajów wizualnych linii pomocniczych, ułatwiając projektowanie dokumentów i przewidywanie, w jaki sposób będą one wyświetlane w przeglądarkach. Dostępne są następujące możliwości:

• Szybkie przyciąganie okna Dokument do wymaganego rozmiaru okna, aby sprawdzić, w jaki sposób elementy zostaną dopasowane do strony.

• Używanie obrazu-wzornika jako tła strony, co jest pomocne przy powielaniu projektu utworzonego w aplikacji do edycji ilustracji lub zdjęć, np. Adobe® Photoshop® lub Adobe® Fireworks®.

• Używanie miarek i linii pomocniczych do precyzyjnego rozmieszczania i zmiany wielkości elementów strony wizualnie.

• Używanie siatki do precyzyjnego rozmieszczania i zmiany wielkości bezwzględnie umieszczonych elementów (elementy AP).

  Znaczniki siatki na stronie służą do wyrównywania elementów AP. Gdy włączone jest przyciąganie, to podczas przesuwania lub zmiany wielkości elementów AP są one automatycznie przyciągane do najbliższego punktu siatki. (Inne obiekty, np. obrazy lub akapity, nie są przyciągane do siatki). Przyciąganie działa bez względu na widoczność siatki.

Powiększanie lub zmniejszanie strony

Program Dreamweaver umożliwia powiększanie (przybliżanie) zawartości okna dokumentu, co pozwala sprawdzić dokładność grafiki na poziomie pikseli, zaznaczać małe elementy, projektować strony zawierające drobny tekst, projektować duże strony itd.

Aby powiększyć lub zmniejszyć stronę, wybierz polecenie Widok > Opcje widoku Projekt > Powiększenie. Następnie wybierz jedną z dostępnych opcji powiększenia.

Do wyboru jest wiele opcji. Można również wybrać polecenie:

• Zmieść zaznaczenie — zaznacz obiekt lub tekst, a następnie wybierz to polecenie, aby wypełnić całe okno Dokument zaznaczonym elementem.
• Zmieść wszystko — wypełnia okno dokumentu całą stroną.
• Zmieść na szerokość — wypełnia okna dokumentu całą szerokością strony.

Określanie ogólnych preferencji programu Dreamweaver

Określanie preferencji czcionek w dokumentach programu Dreamweaver

Kodowanie dokumentu określa sposób wyświetlania tego dokumentu w przeglądarce. Preferencje czcionek programu Dreamweaver umożliwiają dobór określonego kroju i rozmiaru czcionki do danego kodowania. Czcionki zaznaczone w oknie dialogowym Preferencje czcionek dotyczą tylko sposobu wyświetlania tekstu w programie Dreamweaver; nie mają natomiast wpływu na wygląd dokumentu w przeglądarce użytkownika. Aby zmienić wygląd czcionek w przeglądarce użytkownika, należy użyć Inspektora właściwości albo reguły CSS.

Informacje na temat ustawiania domyślnego kodowania nowych dokumentów znajdują się w sekcji Tworzenie i otwieranie dokumentów.

Dostosowywanie kolorów podświetlenia w programie Dreamweaver

Sekcja Podświetlanie w preferencjach umożliwia dostosowanie kolorów, którymi program Dreamweaver oznacza poszczególne obszary szablonów, elementy biblioteki, znaczniki innych producentów, elementy układu i kod.