Przestrzeń robocza programu Dreamweaver

Wprowadzenie do programu Dreamweaver

Po zainstalowaniu Dreamweaver, podczas pierwszego uruchamiania aplikacji na ekranie pojawi się menu QuickStart z trzema pytaniami, które pomogą spersonalizować obszar roboczy Dreamweaver zgodnie z potrzebami.

Na podstawie odpowiedzi na te pytania Dreamweaver otwiera się w Workspace programisty (minimalistyczny układ skoncentrowany na kodzie) lub w standardowym Workspace (podzielony układ z narzędziami wizualnymi i podglądem w aplikacji podczas kodowania). 

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

Udoskonalony ekran główny

Ekran główny w Dreamweaver zapewnia szybki dostęp do ostatnio używanych plików, typów plików i szablonów startowych.

Zależnie od stanu członkostwa mogą w niej być wyświetlane materiały dostosowane do wymagań użytkownika.

Dreamweaver wyświetla ekran główny przy uruchomieniu lub gdy żadne dokumenty nie są otwarte.

Opcje dostępne na ekranie startowym programu Dreamweaver

Kliknij opcję Nauka, aby natychmiast uzyskać dostęp do samouczków Dreamweaver z tego ekranu.

Rozpocznij tworzenie dokumentów w Dreamweaver, klikając dowolny z wyświetlanych typów plików.

Otwórz jeden z szablonów startowych dostarczanych z Dreamweaver. 

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

Na ekranie startowym są wyświetlane niedawno używane pliki. Jeśli nie ma żadnych ostatnich plików, ta karta jest pusta.

Dostępna jest także funkcja wyszukiwania, uruchamiana przez kliknięcie ikony szukaj w prawym górnym rogu ekranu powitalnego. Gdy wpiszesz zapytanie wyszukiwania, aplikacja wyświetli ostatnie pliki, zasoby Creative Cloud, linki pomocy i obrazy bez tantiem pasujące do zapytania.

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. Informacje o tworzeniu i otwieraniu dokumentów w programie Dreamweaver można znaleźć w sekcji Utwórz i otwórz pliki.

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

Workspace zawiera następujące elementy:

Znajduje się u góry okna aplikacji i zawiera przełącznik przestrzeni roboczej, menu (tylko Windows) oraz inne elementy sterujące aplikacji.

Zawiera przyciski umożliwiające wybór różnych opcji widoków okna Dokumentu (takich jak widok Projekt, widok na żywo i widok Kod).

Aby wyświetlić standardowy pasek narzędziowy, wybierz polecenie Okno > Paski narzędziowe > Standardowy. Pasek narzędzi zawiera przyciski najczęściej używanych operacji z menu Plik i Edycja: Nowy, Otwórz, Zapisz, Zapisz wszystkie, Drukuj kod, Wytnij, Kopiuj, Wklej, Cofnij i Ponów.

Znajduje się po lewej stronie okna aplikacji i zawiera przyciski specyficzne dla widoku.

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ą tego panelu można wyodrębnić CSS, tekst, obrazy, czcionki, kolory, gradienty i wymiary z kompozycji PSD do dokumentu.

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 podano w 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.

to narzędzie CSS Property Inspector, które umożliwia „wizualne" tworzenie stylów CSS, plików i ustawianie właściwości wraz z zapytaniami mediów.

Omówienie okna Dokument

Okno Dokument wyświetla bieżący dokument. Aby przełączać widoki dokumentu, należy użyć opcji widoku na pasku narzędzi dokumentu. 

Można również przełączać widoki za pomocą opcji Widok 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 Live podano w części Edytuj elementy HTML w widoku Live.

Ś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.

to środowisko do ręcznego kodowania służące do pisania i edycji HTML, JavaScript i każdego innego rodzaju kodu.

to podzielona wersja widoku Code, która pozwala przewijać, aby pracować nad różnymi sekcjami dokumentu w tym samym czasie. 

pozwala zobaczyć jednocześnie widok Code i widok Live dla tego samego dokumentu w jednym oknie.

pozwala zobaczyć jednocześnie widok Code i widok Design dla tego samego dokumentu w jednym oknie.

wyświetla rzeczywisty kod, którego przeglądarka używa do wykonania strony, i może się dynamicznie zmieniać podczas interakcji ze stroną w widoku Live.

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. Dreamweaver wyświetla gwiazdkę po nazwie pliku, jeśli wprowadzono zmiany, które nie zostały jeszcze zapisane.

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 podano w Omówienie paska narzędzi dokumentu.

Można również przełączać między widokami, używając następujących opcji w menu Widok:

• Tylko widok Code: wybierz Code
• Widok podzielony: wybierz Split i wybierz dowolną z opcji podziału
• Tryb widoku: przełączaj między widokami Live i Design
• Przełącz widoki: aby przełączać widoki 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ć kaskadowo okna dokumentów: wybierz Window > Arrange > Cascade.

Aby ułożyć kafelkowo okna dokumentów:

• (Windows) Wybierz Window > Arrange > Tile Horizontally lub Tile Vertically.
• (Macintosh) Wybierz Window > Arrange >Tile.

Po otwarciu większej liczby plików okna dokumentów zostają oznaczone. Aby zmienić kolejność oznaczonych 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 dokumentu, wybierz jeden z rozmiarów z menu podręcznego Window Size u dołu okna dokumentu.

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 widocznych 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. Pasek narzędziowy zawiera także często używane polecenia i opcje wyświetlania dokumentu i 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 Design nie jest dostępna dla dokumentów fluid grid.

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. Ta lista rozwijana nie jest dostępna w dokumentach fluid grid.

Wyświetla reprezentację dokumentu pokazującą, jak użytkownik widzi go w przeglądarce internetowej. 

Omówienie paska narzędziowego Standardowy

Aby wyświetlić standardowy pasek narzędziowy, wybierz polecenie Okno > Paski narzędziowe > Standardowy. Pasek narzędzi zawiera przyciski typowych operacji z menu File i Edit: New, Open, Save, Save All, Print Code, Cut, Copy, Paste, Undo i Redo.

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ć linki w widoku Live, możesz włączyć jednorazowe klikanie lub ciągłe klikanie, wybierając Widok > Opcje widoku Live > Śledź linki (Ctrl+kliknij link) lub Śledź linki w sposób ciągły.

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, jeśli pracujesz w widoku Live, opcje specyficzne dla widoku kodu, takie jak Formatuj kod źródłowy, nie są widoczne. 

Dostosowywanie paska narzędzi

Można dostosować ten pasek narzędzi do swoich potrzeb, dodając opcje menu lub usuwając niechciane opcje z paska narzędzi.

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

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

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 Output pokazujący błędy w kodzie w dokumencie.

Kolorowanie kodu

(Dostępne tylko w widoku kodu)

Wybierz dowolny z języków kodowania z tego menu rozwijanego, aby zmienić kolorowanie kodu w celu wyświetlania zgodnie z językiem programowania.

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

(Dostępne tylko w widoku kodu)

Pozwala przełączać się między trybami Insert i Overwrite podczas pracy w widoku kodu.

Numer wiersza i kolumny

(Dostępne tylko w widoku Code.)

Wyświetla numer linii i numer kolumny, w których znajduje się kursor.

Omówienie Inspektora właściwości

Property Inspector (Okno > Właściwości) pozwala sprawdzać i edytować najczęstsze właściwości aktualnie wybranego 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 uczynić panelem ruchomym.

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 są odpowiednie dla bieżącego wyboru.

Aby otworzyć menu kontekstowe, kliknij prawym przyciskiem myszy (Windows) lub Ctrl+kliknij (Mac) sekcję kodu w widoku kodu lub obiekt w widokach Live lub Design.

Zmiana położenia paneli w programie Dreamweaver

Można dostosować umiejscowienie i wygląd wszystkich paneli programu Dreamweaver zgodnie z wymaganiami.

Dokowanie i oddokowywanie paneli

• Aby zadokować panel, należy przeciągnąć go przy użyciu jego zakładki do stacji dokowania na górze, na dole lub pomiędzy innymi panelami.
• Aby zadokować grupę paneli, należy przeciągnąć je przy użyciu ich paska tytułu (jednolity pusty pasek powyżej zakładki) do stacji 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 prawym przyciskiem myszy (Windows) lub kliknij przycisk Control (Mac) jego zakładkę i wybierz opcję Zamknij lub usuń zaznaczenie w menu Okno.
• Aby dodać panel, zaznacz go w menu Okno i zadokuj gdziekolwiek.

Obsługa grup paneli

• Aby przesunąć panel do grupy, przeciągnij jego zakładkę do podświetlonej strefy upuszczania w grupie.
• Ponowne ułożenie paneli w grupie jest możliwe przez przeciągnięcie zakładek paneli na inne miejsce w grupie.
• Aby usunąć panel z grupy umożliwiając mu swobodne przemieszczanie się, należy przeciągnąć jego zakładkę poza grupę.
• Aby przesunąć grupę, przeciągnij pasek tytułowy (obszar nad zakładkami).

Układanie przemieszczających się paneli

W czasie przeciągania panelu z jego stacji dokowania do miejsca innego niż strefa upuszczania, panel swobodnie przemieszcza się. 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 umieścić na stosie przemieszczające się panele, przeciągaj je używając ich zakładek do strefy upuszczania znajdującej się na dole innego panelu.
• Aby zmienić porządek składowania, przeciągnij panel do góry lub w dół używając jego zakładki.
• Aby usunąć panel lub grupę paneli ze stosu, tak by mógł się przemieszczać swobodnie, przeciągnij go poza stos używając jego zakładki lub paska tytułu.

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

Można zwinąć panele 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. Następnie możesz zapisać te zmiany w obszarze roboczym, zapisując go w celu późniejszego dostępu z przełącznika obszarów roboczych w pasku narzędzi dokumentu.

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ć niestandardowy obszar roboczy:

1. Wybierz Okno > Układ obszaru roboczego > Nowy obszar roboczy.
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ąć niestandardową przestrzeń roboczą:

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

Wyświetl lub przełączaj między przestrzeniami roboczymi

Wybierz obszar roboczy z przełącznika obszarów roboczych w pasku narzędzi dokumentu.

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

Można dostosować program Dreamweaver do swoich potrzeb nawet w wieloużytkownikowym systemie operacyjnym, takim jak 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 użytkownika są umieszczane w folderze danego użytkownika.

W przypadku ponownej instalacji lub uaktualnienia programu Dreamweaver program automatycznie tworzy kopie zapasowe istniejących plików konfiguracyjnych użytkownika, więc w przypadku ręcznego dostosowania tych plików nadal można uzyskać dostęp do wprowadzonych zmian.

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 zaznacz 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. Oto opis niektórych często używanych paneli.

Omówienie panelu Wstaw

Panel Wstaw (Okno > Wstaw) zawiera przyciski do tworzenia i wstawiania obiektów, takich jak tabele, obrazy i łącza. Przyciski są podzielone na kilka kategorii, między którymi można przełączać, wybierając żądaną kategorię z listy rozwijanej u góry.

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 wybierzesz Line Break z menu podręcznego przycisku Character, następnym razem po kliknięciu przycisku Character program Dreamweaver wstawi podział 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, takich jak znaczniki div oraz obiekty, takie jak obrazy i tabele.

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

Umożliwia zapisanie dokumentu jako szablonu i oznaczenie określonych regionów jako edytowalne, opcjonalne, powtarzające się lub edytowalne regiony opcjonalne.

Zawiera komponenty Bootstrap do zapewnienia nawigacji, kontenerów, menu rozwijanych i nie tylko, których można używać w projektach responsywnych.

Zawiera przyciski do budowania witryn, które używają jQuery Mobile.

Umożliwia wstawianie elementów jQuery UI, takich jak accordion, 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

Użyj panelu Pliki, aby wyświetlać pliki witryny Dreamweaver i zarządzać nimi.

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 wszystkim tym, co można wykonywać za pomocą panel Files, podano w Zarządzanie plikami i folderami.

Projektant CSS

Panel CSS Designer (Windows > CSS Designer) to inspektor właściwości CSS, który umożliwia „wizualne" tworzenie stylów CSS, plików i ustawianie właściwości wraz z zapytaniami 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, podświetlając zakładkę tego pliku przez krótką chwilę (około 8 sekund).

Panel CSS Designer składa się z następujących okienek i opcji:

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. Tego trybu można również użyć, aby rozpocząć tworzenie selektorów lub zapytań o media.

Ten tryb nie rozpoznaje zaznaczenia. Oznacza to, że po wybraniu elementu na stronie powiązany selektor, zapytanie o media lub CSS nie są wyróżnione w CSS Designer.

Bieżące Wyświetla wyliczone style elementu zaznaczonego w widoku Projekt lub Aktywny w bieżącym dokumencie. W przypadku korzystania z tego trybu dla pliku CSS w widoku Kod wyświetlane są wszystkie właściwości selektora w fokusie.

Ten tryb ma charakter kontekstowy. Ta opcja służy do edytowania właściwości selektorów powiązanych z wybranymi elementami 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.

Po wybraniu opcji Globalne w okienku @Media wyświetlane są wszystkie selektory, które nie są uwzględnione w zapytaniu o media 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 podano w części Ustawianie 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 określonego selektora, kliknij nazwę tego selektora w okienku.

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 multimedia w wybranym źródle, kliknij opcję Globalne w okienku @Media.

Omówienie wizualnych linii pomocniczych

Dreamweaver udostępnia kilka rodzajów prowadnic wizualnych, które ułatwiają projektowanie dokumentów i pozwalają w przybliżeniu przewidzieć, jak będą wyglądały w przeglądarkach.Można wykonać jedną z następujących czynnoś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, 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.

• 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

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 pomniejszyć stronę, wybierz Widok > Opcje widoku projektu > Powiększenie i wybierz jedną z dostępnych opcji powiększenia.

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

• Dopasuj zaznaczenie — Wybierz obiekt lub tekst i wybierz tę opcję, aby wypełnić okno dokumentu zaznaczeniem.
• Dopasuj wszystko — Wypełnij okno dokumentu całą stroną
• Dopasuj szerokość — Wypełnij okno 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 o ustawianiu domyślnego kodowania dla nowych dokumentów można znaleźć w sekcji Tworzenie i otwieranie dokumentów.

Dostosowywanie kolorów podświetlenia w programie Dreamweaver

Użyj preferencji wyróżniania, aby dostosować kolory identyfikujące regiony szablonów, elementy bibliotek, znaczniki innych firm, elementy układu i kod w programie Dreamweaver.

Więcej podobnych

• Otwieranie plików powiązanych
• Ogólne informacje o kodowaniu w programie Dreamweaver
• Ustawianie preferencji kodowania
• Wyświetlanie i edycja zawartości elementu HEAD
• Korzystanie z wizualnych pomocy do układu
• Podgląd stron
• Praca z plikami w panelu Pliki