Wstawianie i edytowanie obrazów w programie Dreamweaver

Umieść punkt wstawiania w tym miejscu w oknie dokumentu, gdzie ma się pojawić obraz, i wykonaj jedną z następujących czynności:

• Z rozwijanego menu na panelu Wstaw wybierz opcję HTML. Kliknij opcję Obraz. Dwukrotnie kliknij lub przeciągnij ikonę do okna dokumentu (albo do kodu, jeśli pracujesz w widoku Kod).

• Wybierz polecenie Wstaw > Obraz.

• Przeciągnij obraz z panelu Zasoby (Okno > Zasoby) na pożądane miejsce w oknie dokumentu; potem przejdź od razu do kroku 3.

• Przeciągnij obraz z panelu Pliki na pożądane miejsce w oknie Dokument, a następnie przejdź od razu do kroku 3.

• Przeciągnij obraz z pulpitu na pożądane miejsce w oknie dokumentu, a potem przejdź od razu do kroku 3.

• Pracując w widoku aktywnym, przeciągnij obraz z panelu Extract lub karty Warstwy. Następnie upuść go w odpowiednim miejscu (nad lub pod innym elementem albo po jego lewej lub prawej stronie), korzystając z aktywnych linii pomocniczych. Można także precyzyjnie umieścić element w strukturze dokumentu, klikając ikonę </> i korzystając z okienka Przegląd elementu.

Odszukaj i zaznacz obraz lub źródło zawartości, które chcesz wstawić.

Jeżeli pracujesz na niezapisanym dokumencie, Dreamweaver wygeneruje odniesienie do pliku graficznego w formie „file://”. Gdy zapiszesz dokument w dowolnym miejscu w serwisie, Dreamweaver przekształci to odniesienie na ścieżkę względną dokumentu.

Kliknij przycisk OK.

Aby wyświetlić panel Inspektor właściwości dla zaznaczonego obrazu, kliknij ten obraz i wybierz polecenie Okno > Właściwości.

W polu tekstowym pod miniaturką obrazu wpisz nazwę, za pomocą której będziesz odwoływać się do obrazu w zachowaniach programu Dreamweaver (np. Zamień obraz) albo w języku skryptów, np. JavaScript lub VBScript.

Szerokość i wysokość obrazu w pikselach. Podczas wstawiania obrazu na stronę, Dreamweaver automatycznie uaktualnia te pola tekstowe oryginalnymi wymiarami obrazu.

Jeżeli ustawisz opcje Szerokość i Wysokość na wartości, które nie odpowiadają rzeczywistej szerokości i wysokości obrazu, to będzie on nieprawidłowo wyświetlany w przeglądarkach. Aby przywrócić oryginalne wartości, kliknij etykiety pól Sz. i Wys. albo przycisk resetowania rozmiaru obrazu, który znajduje się po prawej stronie tych pól tekstowych.

Jest to atrybut określający plik źródłowy obrazu. Kliknij ikonę folderu, aby odszukać plik źródłowy, albo wpisz ścieżkę do tego pliku.

Określa hiperłącze prowadzące do obrazu. Przeciągnij ikonę „Wskaż plik” na plik na panelu Pliki. Kliknij ikonę folderu, aby odszukać dokument w serwisie, albo ręcznie wpisz adres URL.

Ten atrybut określa tekst zastępczy, wyświetlany zamiast obrazu w przeglądarkach obsługujących wyłącznie tekst, albo w przeglądarkach, w których ustawiono ręczne pobieranie obrazów. Na potrzeby osób niewidomych i słabo widzących, które używają syntetyzatorów mowy i przeglądarek tekstowych, tekst ten będzie odczytywany na głos. W niektórych przeglądarkach tekst ten pojawia się również po zatrzymaniu kursora nad obrazem.

Umożliwiają opisywanie i tworzenie klienckich map obrazu.

Cel Jest to atrybut określający docelową ramkę lub okno, w którym zostanie wczytana strona. (Ta opcja jest niedostępna, jeżeli obrazu nie połączono z innym plikiem). Na liście Target pojawiają się wszystkie ramki z bieżącego układu ramek. Możesz również wybrać jedną z następujących, zastrzeżonych nazw ramek/okien docelowych:

• Wartość _blank powoduje, że połączony plik zostanie wczytany w nowym, nienazwanym oknie przeglądarki.
• Wartość _new spowoduje wczytanie połączonego pliku w nowym oknie przeglądarki.
• Wartość _parent powoduje wczytanie połączonego pliku w nadrzędnym układzie ramek lub w oknie ramki, która zawiera łącze. Jeżeli ramka zawierająca łącze nie jest zagnieżdżona, to połączony plik zostanie wczytany w pełnym oknie przeglądarki.
• Wartość _self powoduje, że połączony plik jest wczytywany w tej samej ramce lub oknie, w której znajduje się łącze. Jest to opcja domyślna parametru Target. W związku z tym nie trzeba jej jawnie definiować.
• Wartość _top powoduje wczytanie połączonego pliku w pełnym oknie przeglądarki i usunięcie wszystkich ramek.

Uruchamia edytor obrazu, wskazany w preferencjach edytorów zewnętrznych, po czym otwiera w nim wybrany obraz.

Otwiera okno dialogowe Optymalizacja obrazu, w którym można zoptymalizować obraz.

Gdy na stronie programu Dreamweaver nie jest zsynchronizowany z oryginalnym plikiem programu Photoshop, program Dreamweaver wykrywa, że oryginalny plik został uaktualniony i wyświetla na czerwono jedną ze strzałek ikony obiektu inteligentnego. Zaznaczenie obrazu internetowego w widoku Projekt i kliknięcie przycisku Aktualizuj z oryginału na panelu Inspektor właściwości spowoduje, że obraz ten zostanie automatycznie zaktualizowany i będzie odzwierciedlać zmiany wprowadzone w oryginalnym pliku programu Photoshop.

Przycina obraz, pozwalając usunąć niepożądane obszary.

Przeprowadza ponowne próbkowanie obrazu po zmianie rozmiaru, poprawiając jego jakość w nowych wymiarach i proporcjach.

Koryguje jasność i kontrast obrazu.

Koryguje ostrość obrazu.

Kliknij obraz w oknie Dokument albo zaznacz znacznik tego obrazu w kodzie.

Wykonaj jedną z następujących czynności, aby wprowadzić nazwę lub krótki opis obrazu (poniżej 50 znaków) w polu Tekst zastępczy. Wpisane tutaj informacje będą odczytywały czytniki ekranowe.  

• Edytuj stosowne atrybuty obrazu w widoku Kod.

• Edytuj atrybuty obrazu w widoku aktywnym za pomocą Szybkiego inspektora właściwości.

• Wartość atrybutu Alt można edytować w Inspektorze właściwości.

Na dole i po prawej stronie elementu oraz w jego prawym dolnym rogu pojawią się uchwyty do zmiany rozmiaru. Jeśli uchwyty zmiany rozmiaru nie są widoczne, kliknij poza elementem, a następnie zaznacz go ponownie. Można również kliknąć odpowiedni znacznik w selektorze znaczników, aby zaznaczyć element.

• Aby dopasować szerokość elementu, przeciągnij uchwyt zaznaczenia po prawej stronie.

• Aby dopasować wysokość elementu, przeciągnij uchwyt zaznaczenia na dole.

• Aby dopasować jednocześnie wysokość i szerokość elementu, przeciągnij uchwyt w narożniku.

• Aby zachować proporcje elementu (czyli stosunek jego szerokości do wysokości) podczas zmiany wymiarów, przytrzymają klawisz Shift, gdy przeciągasz uchwyt zaznaczenia.

• Aby zmienić szerokość i wysokość elementu do konkretnych wymiarów (np. 1 x 1 piksel), skorzystaj z panelu Inspektor właściwości. Wpisz wartość liczbową w pola Sz. i Wys. Minimalny rozmiar, do którego można wizualnie zmienić wielkość elementu, wynosi 8 x 8 pikseli.

Aby przywrócić oryginalne wymiary elementu, którego rozmiar został zmieniony, usuń wartości z pól Sz. i Wys. na panelu Inspektor właściwości. Można również kliknąć przycisk Przywróć rozmiar na tym panelu.

Zmień rozmiar obrazu za pomocą procedury opisanej w sekcji Zmiana rozmiarów obrazu.

Kliknij przycisk Przeprowadź ponowne próbkowanie w Inspektorze właściwości obrazu.

Wybierz polecenie Edytuj > Obraz. W programie Dreamweaver można ustawić następujące opcje modyfikacji obrazu:

Wybierz ustawienie predefiniowane, określ format pliku i zdefiniuj poziom jakości. Przesuwając suwak poziomów jakości, można obserwować rozmiar pliku graficznego w oknie dialogowym. Po zakończeniu kliknij przycisk OK.

Dodaje lub odejmuje piksele z plików graficznych JPEG lub GIF, które zostały przeskalowane, aby jak najdokładniej dopasować ich wygląd do wyglądu oryginału. Ponowne próbkowanie obrazu zmniejsza rozmiar pliku i przyspiesza jego pobieranie.

Po zmianie wymiarów obrazu w programie Dreamweaver można przeprowadzić ponowne próbkowanie, aby dostosować obraz do tych nowych wymiarów. Podczas ponownego próbkowania obiektu bitmapowego piksele są dodawane do obrazu lub usuwane z niego, tak aby obraz stał się większy lub mniejszy. Ponowne próbkowanie obrazu do wyższej rozdzielczości zazwyczaj nie powoduje istotnej utraty jakości. Natomiast ponowne próbkowanie obrazu do niższej rozdzielczości zawsze powoduje utratę danych oraz zwykle skutkuje pogorszeniem się jakości.

Umożliwia edytowanie obrazu przez zmniejszanie jego powierzchni. Kadrowanie pozwala uwypuklić tematykę obrazu i usunąć niepotrzebne elementy znajdujące się wokół centralnego przedmiotu zainteresowania.

Pozwala na zmianę kontrastu lub jasności pikseli w obrazie. Opcje te umożliwiają modyfikację świateł, cieni i półcieni obrazu. Funkcji Jasność i Kontrast używa się na ogół do korygowania zbyt ciemnych lub zbyt jasnych obrazów.

Umożliwia skorygowanie ostrości obrazu, zwiększając kontrast odnalezionych na nim krawędzi. Podczas skanowania lub wykonywania zdjęć cyfrowych oprogramowanie do przechwytywania obrazu na ogół domyślnie rozmywa krawędzie obiektów. Takie skanowanie pozwala uniknąć utraty bardzo drobnych szczegółów na poziomie pikseli, z których składają się obrazy cyfrowe. Jednak aby uwypuklić detale obrazu, często trzeba go wyostrzyć. Opcja Wyostrz powoduje zwiększenie kontrastu krawędzi, przez co obraz wydaje się ostrzejszy.

Otwórz stronę zawierającą obraz, który chcesz wykadrować. Zaznacz ten obraz i wykonaj jedną z następujących czynności:

• Kliknij ikonę narzędzia Kadrowanie  w Inspektorze właściwości obrazu.

• Wybierz polecenie Edycja > Obraz > Kadruj.

• Wokół zaznaczonego obrazu zostaną wyświetlone uchwyty kadrowania.

Pojawi się okno dialogowe z informacją, że plik obrazu, który kadrujesz, zostanie zmodyfikowany na dysku. Kliknij przycisk OK.

Każdy piksel bitmapy poza obwiednią zostanie usunięty, pozostaną natomiast pozostałe obiekty na obrazie.

Obejrzyj obraz i sprawdź, czy spełnia oczekiwania. Jeżeli nie, wybierz polecenie Edycja > Cofnij Kadruj, aby wrócić do oryginalnego obrazu.

Otwórz stronę zawierającą obraz, który chcesz zoptymalizować. Zaznacz obraz i wykonaj jedną z następujących czynności:

• Kliknij przycisk Edytowanie ustawień obrazu w Inspektorze właściwości obrazu.

• Wybierz polecenie Edycja > Obraz > Optymalizuj.

Wprowadź odpowiednie zmiany w oknie dialogowym Optymalizacja obrazu i kliknij przycisk OK.

• Kliknij przycisk Wyostrz w Inspektorze właściwości obrazu.

• Wybierz polecenie Edycja > Obraz > Wyostrz.

Aby określić intensywność wyostrzania, jaką program Dreamweaver zastosuje do obrazu, przeciągnij suwak kontrolki. Można również wpisać wartość od 0 do 10 w polu tekstowym. Ustawiając ostrość za pomocą okna dialogowego Wyostrz, można wyświetlić podgląd efektów wprowadzanych zmian na obrazie.

Zapisz zmiany, wybierając polecenie Plik > Zapisz, albo wróć do oryginalnego obrazu, wybierając polecenie Edycja > Cofnij Wyostrz.

• Kliknij przycisk Jasność i kontrast w Inspektorze właściwości obrazu.

• Wybierz polecenie Edycja > Obraz > Jasność/kontrast.

• Z rozwijanego menu na panelu Wstaw wybierz opcję HTML. Z listy opcji wybierz polecenie Obraz po najeździe.

• Wybierz polecenie Wstaw > HTML > Obraz po najeździe.

W oknie dialogowym Wstaw obraz po najeździe wybierz odpowiednie obrazy i ustaw właściwości efektu najazdu. Dostępne są następujące właściwości:

Nazwa obrazu z efektem najazdu.

Obraz, który ma być wyświetlany w momencie wczytywania strony. Wpisz ścieżkę w pole tekstowe albo kliknij przycisk Przeglądaj i wybierz obraz.

Obraz, który ma być wyświetlony, gdy wskaźnik najedzie na oryginalny obraz. Wpisz ścieżkę albo kliknij przycisk Przeglądaj i wybierz obraz.

Powoduje, że oba obrazy będą wstępnie wczytywane do bufora przeglądarki. Pozwala to uniknąć opóźnienia w momencie, gdy użytkownik najedzie kursorem na obraz.

(Opcjonalnie) Tekst opisujący obraz na potrzeby użytkowników, którzy korzystają z przeglądarek tekstowych.

Plik, który ma się otwierać, gdy użytkownik kliknie obraz z efektem najazdu. Wpisz ścieżkę albo kliknij przycisk Przeglądaj i wybierz plik.

Aby wyświetlić podgląd efektu najazdu, wybierz polecenie Plik > Podgląd w czasie rzeczywistym lub naciśnij klawisz F12.

Aby otworzyć edytor zewnętrzny, wykonaj jedną z następujących czynności:

• Dwukrotnie kliknij obraz, który chcesz edytować.

• Kliknij obraz, który chcesz edytować, prawym przyciskiem myszy (Windows) lub przytrzymując klawisz Control (Macintosh). Następnie wybierz polecenie Edytuj za pomocą > Przeglądaj i odszukaj odpowiedni edytor.

• Zaznacz obraz, który chcesz edytować, i kliknij przycisk Edycja w Inspektorze właściwości.

• Dwukrotnie kliknij plik graficzny na panelu Pliki, aby uruchomić podstawowy edytor graficzny. Jeżeli edytor graficzny nie został zdefiniowany, to program Dreamweaver uruchomi domyślny edytor danego typu pliku.

Jeżeli po powrocie do okna programu Dreamweaver nie widać uaktualnionego obrazu, zaznacz ten obraz i kliknij przycisk Odśwież na panelu Inspektor właściwości.

Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (macOS). Z listy Kategorie po lewej stronie wybierz opcję Typy plików/edytory.

Na liście Rozszerzenia zaznacz rozszerzenie pliku, dla którego chcesz zdefiniować edytor zewnętrzny.

W oknie dialogowym Wybierz edytor zewnętrzny przejdź do aplikacji, którą chcesz uruchamiać jako edytor dla plików danego typu.

Jeżeli chcesz, aby był to podstawowy edytor tego typu plików, to w oknie dialogowym Preferencje kliknij opcję Jako główny.

Gdy użytkownik zechce edytować obraz tego typu, program Dreamweaver automatycznie użyje edytora podstawowego. Inne edytory z tej listy będzie można wybierać z menu kontekstowego obrazu w oknie dokumentu.

Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (macOS). Z listy Kategorie po lewej stronie wybierz opcję Typy plików/edytory.

W oknie dialogowym Preferencje: Typy plików/edytory, kliknij przycisk Dodaj (+) nad listą Rozszerzenia.

Na liście Rozszerzenia pojawi się pole tekstowe.

Wybierz rozszerzenie nazwy plików danego typu, dla których chcesz ustawić edytor.

Aby wybrać zewnętrzny edytor dla plików tego typu, kliknij przycisk Dodaj (+) nad listą Edytory.

Zostanie wyświetlone okno dialogowe. Wybierz w nim aplikację, której chcesz używać do edycji obrazów tego typu.

Jeśli chcesz, aby był to podstawowy edytor tego typu obrazów, kliknij opcję Jako główny.

Wybierz polecenie Edycja > Preferencje (Windows) lub Dreamweaver > Preferencje (macOS). Z listy Kategorie po lewej stronie wybierz opcję Typy plików/edytory.

W oknie preferencji Typy plików/edytory zaznacz na liście Rozszerzenia typ pliku, który modyfikujesz, aby wyświetlić istniejące dla niego edytory.

Na liście Edytory zaznacz edytor, który chcesz zmienić, a następnie wykonaj jedną z następujących czynności:

• Aby dodać lub usunąć edytor, kliknij przycisk Dodaj (+) lub Usuń (-) nad listą Edytory.

• Aby zmienić domyślnie uruchamiany edytor, kliknij przycisk Jako główny.