Informacje o metodach wstawiania i zastępowania obrazów oraz zmiany ich rozmiaru w programie Dreamweaver.

Obrazy są ważną częścią serwisu WWW, zapewniając jego użytkownikom dodatkowy kontekst. Istnieje wiele formatów plików graficznych, jednak na stronach WWW zazwyczaj używa się plików GIF, JPEG i PNG. Najpowszechniej obsługiwane są formaty GIF i JPEG. Wyświetla je większość przeglądarek. Poniżej przedstawiono więcej informacji na temat tych formatów pliku:

GIF (Graphic Interchange Format). Pliki GIF mogą mieć maksymalnie 256 kolorów i najlepiej nadają się do wyświetlania obrazów bez płynnych przejść tonalnych albo obrazów, na których znajdują się duże połacie jednolitego koloru — np. pasków nawigacyjnych, przycisków, ikon, znaków logo i innych obrazów o jednolitych kolorach i odcieniach.

JPEG (Joint Photographic Experts Group). JPEG jest najlepszym formatem pliku do obsługi fotografii i obrazów o płynnych przejściach tonalnych, ponieważ może zawierać miliony kolorów. Wraz ze wzrostem jakości rośnie również rozmiar pliku JPEG i wydłuża się czas jego pobierania. Kompresując plik JPEG, można uzyskać prawidłową równowagę między jakością obrazu a rozmiarem pliku.

PNG (Portable Network Group). PNG to nieopatentowany format pliku, który zastępuje format GIF. Zapewnia obsługę obrazów w kolorach indeksowanych, skali szarości i pełnych kolorach, a także obsługę kanałów alfa do wyświetlania przezroczystości. Pliki PNG zachowują wszystkie źródłowe informacje o warstwach, obiektach wektorowych, kolorach i efektach (np. cieniach). Wszystkie te elementy można w dowolnym momencie edytować. Program Dreamweaver rozpoznaje pliki jako PNG tylko wtedy, gdy mają rozszerzenie .png.

Program Dreamweaver nie jest edytorem typu WYSIWYG („dostajesz to, co widzisz”). Oznacza to, że w programie Dreamweaver można wstawiać obrazy, ale nie można ich przesuwać ani pozycjonować.

Aby przenieść obraz w odpowiednie miejsce w układzie, trzeba użyć stylów CSS, sterujących odpowiednim wyświetlaniem zawartości HTML. Informacje o pracy z obrazami z użyciem kodu można znaleźć w samouczkach dotyczących kodu HTML i CSS. Dostępny jest także samouczek dotyczący pracy z obrazami w programie Dreamweaver.

W poniższych sekcjach opisano sposób wstawiania i używania obrazów w programie Dreamweaver.

Wstawianie obrazu

Po wstawieniu obrazu do dokumentu programu Dreamweaver w kodzie źródłowym HTML tworzone jest odniesienie do pliku graficznego z tym obrazem. Plik graficzny musi znajdować się w obrębie bieżącego serwisu, aby takie odniesienie było prawidłowe. Jeżeli obrazu nie ma w bieżącym serwisie, program Dreamweaver zapyta, czy skopiować go do serwisu.

W programie Dreamweaver można również wstawiać obrazy w sposób dynamiczny. Obrazy dynamiczne to takie, które często się zmieniają. Przykładem może być system rotacji banerów reklamowych, który wybiera losowo jeden obraz z listy potencjalnych banerów. Taki system dynamicznie wyświetla wybrany obraz w odpowiedzi na żądanie wygenerowania strony.

Co więcej, można przeciągać warstwy z panelu Extract w dowolne miejsce w widoku aktywnym programu Dreamweaver, posługując się aktywnymi liniami pomocniczymi i okienkiem Przegląd elementu. Na panelu Extract można wczytywać pliki PSD, a następnie przeciągać warstwy z tych plików bezpośrednio do dokumentu programu Dreamweaver.

Po wstawieniu obrazu można ustawić atrybuty znacznika IMAGE oraz atrybuty ułatwień dostępu. Pozwoli to czytnikom ekranowym odczytywać tekst znacznika na potrzeby osób słabo widzących. Atrybuty te można edytować w kodzie HTML.

Informacje na temat wyodrębniania obrazów z kompozycji PSD zawiera artykuł Wydzielanie obrazów z plików PSD.

  1. Umieść punkt wstawiania w miejscu okna Dokument, 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 Dokument, a następnie 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 Dokument, a następnie 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.
  2. 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.

    Uwaga:

    Wstawiając obrazy, można użyć ścieżki bezwzględnej do obrazu znajdującego się na serwerze zdalnym, czyli obrazu, którego nie ma na lokalnym dysku twardym. Jeżeli jednak podczas pracy wystąpią problemy z wydajnością, to można wyłączyć wyświetlanie takiego obrazu w widoku Projekt, wyłączając opcję Polecenia > Wyświetlaj pliki zewnętrzne.

  3. Kliknij przycisk OK

Ustawianie właściwości obrazu

Inspektor właściwości obrazu umożliwia ustawianie atrybutów obrazów. Jeżeli nie widzisz wszystkich właściwości obrazu, kliknij strzałkę rozwijania w dolnym prawym rogu.

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

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

  3. Ustaw dowolne opcje obrazu.

    Sz. i Wys.

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

    Uwaga:

    Wartości te można zmodyfikować, aby zmienić skalę wyświetlania danego wystąpienia obrazu. Takie zmiany nie wpłyną jednak na czas pobierania, ponieważ przeglądarka musi pobrać wszystkie dane, zanim przeskaluje obraz. Aby skrócić czas pobierania i mieć pewność, że wszystkie wystąpienia obrazu będą miały te same wymiary, przeskaluj obraz za pomocą programu graficznego.

    Src

    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.

    Link

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

    Alt

    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.

    Narzędzia Nazwa mapy i Punkt aktywny

    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śli 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.

    Edytuj

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

    Edytuj ustawienia obrazu

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

    Aktualizuj z oryginału

    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.

    Kadrowanie

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

    Przeprowadź ponowne próbkowanie

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

    Jasność i kontrast

    Koryguje jasność i kontrast obrazu.

    Wyostrz

    Koryguje ostrość obrazu.

    Uwaga:

    Atrybuty obrazu można również edytować w widoku aktywnym za pomocą Szybkiego inspektora właściwości.

Edytowanie atrybutów dostępności obrazu w kodzie

Jeżeli wstawisz atrybuty dostępności dla obrazu, to możesz potem edytować ich wartości w kodzie HTML.

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

  2. 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.
    • Wartość atrybutu Alt można edytować w Inspektorze właściwości.


Zmiana rozmiaru obrazu

W programie Dreamweaver można wizualnie zmieniać rozmiary takich elementów, jak obrazy, wtyczki, pliki Shockwave lub SWF, aplety i formanty ActiveX.

Wizualna zmiana rozmiarów obrazu pozwala sprawdzić, w jaki sposób obraz ten prezentuje się w układzie przy różnych wielkościach. Nie powoduje jednak przeskalowania pliku graficznego do podanych proporcji. Jeżeli zmienisz wizualnie rozmiar obrazu w programie Dreamweaver, ale nie przeskalujesz go za pomocą programu graficznego, to przeglądarka użytkownika będzie skalować ten obraz już po wczytaniu strony. Może to wydłużyć pobieranie strony i spowodować błędy wyświetlania obrazu w przeglądarce użytkownika.

Aby skrócić czas pobierania i mieć pewność, że wszystkie wystąpienia obrazu będą miały te same wymiary, przeskaluj obraz za pomocą programu graficznego. Poniżej podano procedurę wizualnej zmiany rozmiarów elementu.

Wizualna zmiana rozmiarów elementu

  1. Zaznacz element (np. obraz lub plik SWF) w oknie dokumentu.

    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ż można kliknąć odpowiedni znacznik w selektorze znaczników, aby zaznaczyć element.

  2. Zmień rozmiar elementu strony, wykonując jedną z następujących czynności:
    • 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.
    Szerokość i wysokość elementu można dostosować za pomocą panelu Inspektor właściwości
    Szerokość i wysokość elementu można dostosować za pomocą panelu Inspektor właściwości
  3. 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.

Przywracanie oryginalnego rozmiaru obrazu

Kliknij przycisk Przywróć rozmiar na panelu Inspektor właściwości obrazu.

Przywracanie oryginalnego rozmiaru obrazu
Przywracanie oryginalnego rozmiaru obrazu

Przeprowadzanie ponownego próbkowania obrazu po zmianie rozmiaru

Podczas zmiany wymiarów obrazu w programie Dreamweaver można ponadto przeprowadzić ponowne próbkowanie, aby dostosować obraz do tych nowych wymiarów. Ponowne próbkowanie 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.

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

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

    Ponowne próbkowanie obrazu w programie Dreamweaver
    Ponowne próbkowanie obrazu w programie Dreamweaver

    Uwaga:

    Nie można ponownie próbkować obrazów zastępczych ani elementów innych niż obrazy bitmapowe.

Edytowanie obrazów w programie Dreamweaver

Program Dreamweaver zapewnia podstawowe narzędzia graficzne, które umożliwiają modyfikowanie obrazów bez potrzeby korzystania z zewnętrznej aplikacji do edycji grafiki, takiej jak Photoshop. Narzędzia graficzne programu Dreamweaver ułatwiają współpracę z grafikami, którzy odpowiadają za przygotowanie plików obrazów na potrzeby projektowanego serwisu.

Program Dreamweaver umożliwia wykonywanie na obrazach takich operacji, jak ponowne próbkowanie, kadrowanie, optymalizowanie i wyostrzanie. Można także zmieniać jasność i kontrast obrazów.

Uwaga:

Aby móc korzystać z funkcji graficznych programu Dreamweaver, nie trzeba instalować na komputerze programu Photoshop ani żadnej innej aplikacji do edycji obrazów.

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

    Optymalizuj

    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.

    Przeprowadź ponowne próbkowanie

    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.

    Kadrowanie

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

    Jasność i kontrast

    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.

    Wyostrz

    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.

    Uwaga:

    Funkcje edycji obrazu w programie Dreamweaver można stosować tylko do obrazów w formatach JPEG, GIF i PNG. Inne bitmapowe formaty plików graficznych nie mogą być edytowane za pomocą tych funkcji.

Kadrowanie obrazu

Program Dreamweaver umożliwia kadrowanie lub przycinanie plików bitmapowych.

Uwaga:

Wykadrowanie obrazu powoduje zmianę źródłowego pliku graficznego na dysku. Dlatego też zaleca się zachowanie kopii zapasowej tego pliku graficznego, na wypadek, gdyby trzeba było wrócić do oryginalnego obrazu.

  1. 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 pojawią się uchwyty kadrowania.
    Kadrowanie obrazów w programie Dreamweaver
    Kadrowanie obrazów w programie Dreamweaver
  2. Dopasuj uchwyty kadrowania tak, aby obwiednia otaczała ten obszar obrazu, który chcesz zachować.
  3. Kliknij dwukrotnie wewnątrz obwiedni lub naciśnij Enter, aby wykadrować zaznaczenie.
  4. 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.

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

    Uwaga:

    Efekt polecenia Kadruj można cofnąć (przywracając oryginalny plik obrazu), dopóki nie zamknie się programu Dreamweaver albo nie zmodyfikuje danego pliku w zewnętrznej aplikacji graficznej.

Optymalizacja obrazu

W programie Dreamweaver można optymalizować obrazy na stronach WWW.

  1. 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.
    Edytowanie ustawień obrazu w Inspektorze właściwości
    Edytowanie ustawień obrazu w Inspektorze właściwości
  2. Wprowadź odpowiednie zmiany w oknie dialogowym Optymalizacja obrazu i kliknij przycisk OK.

    Optymalizacja obrazu w programie Dreamweaver
    Optymalizacja obrazu w programie Dreamweaver

Wyostrzanie obrazu

Wyostrzanie zwiększa kontrast pikseli na krawędziach obiektów, aby zwiększyć wyrazistość, czyli ostrość obrazu.

  1. Otwórz stronę zawierającą obraz, który chcesz wyostrzyć. Zaznacz ten obraz i wykonaj dowolną z następujących czynności:
    • Kliknij przycisk Wyostrz w Inspektorze właściwości obrazu.
    • Wybierz polecenie Edycja > Obraz > Wyostrz.
  2. 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.

    Wyostrzanie obrazów w programie Dreamweaver
    Wyostrzanie obrazów w programie Dreamweaver
  3. Gdy uzyskasz zadowalający rezultat, kliknij przycisk OK.
  4. Zapisz zmiany, wybierając polecenie Plik > Zapisz, albo wróć do oryginalnego obrazu, wybierając polecenie Edycja > Cofnij Wyostrz.

    Uwaga:

    Efekt polecenia Wyostrz można cofnąć (przywracając oryginalny plik obrazu), o ile nie zapisano jeszcze strony zawierającej obraz. Po zapisaniu strony zmiany wprowadzone w obrazie stają się nieodwracalne.

Korygowanie jasności i kontrastu obrazu

Opcja Jasność i kontrast umożliwia modyfikację kontrastu lub jasności pikseli w obrazie. Wpływa to na wartości świateł, cieni i półcieni tego obrazu. Opcji Jasność i kontrast używa się na ogół do korygowania zbyt ciemnych lub zbyt jasnych obrazów.

  1. Otwórz stronę zawierającą obraz, który chcesz skorygować. Zaznacz ten obraz i wykonaj dowolną z następujących czynności:
    • Kliknij przycisk Jasność i kontrast w Inspektorze właściwości obrazu.
    • Wybierz polecenie Edycja > Obraz > Jasność/kontrast.
  2. Przeciągnij suwaki Jasność i Kontrast, aby dostosować te ustawienia. Wartości mogą się zmieniać się w zakresie od -100 do 100.
    Korygowanie jasności i kontrastu obrazu w programie Dreamweaver
    Korygowanie jasności i kontrastu obrazu
  3. Kliknij przycisk OK.

Tworzenie obrazu rollover (z efektem najazdu)

Rollover (najazd) to efekt widoczny w przeglądarce, gdy po nasunięciu wskaźnika myszy na obraz zachodzi zmiana tego obrazu. Aby utworzyć efekt najazdu, potrzebne są dwa obrazy: obraz podstawowy (wyświetlany w momencie załadowania się strony) i obraz dodatkowy (ten, który wyświetla się po najechaniu wskaźnikiem na obraz podstawowy). Oba obrazy użyte do utworzenia efektu najazdu muszą mieć ten sam rozmiar. W przeciwnym razie program Dreamweaver zmieni wymiary drugiego obrazu tak, aby były zgodne z właściwościami pierwszego.

Obrazy najazdu są automatycznie ustawiane tak, aby reagowały na zdarzenie onMouseOver (ang. „przy najeździe myszą”). Można również ustawić opcje obrazu tak, aby reagował na inne zdarzenie (np. na kliknięcie myszą albo zmianę obrazu w efekcie najazdu).

  1. Umieść punkt wstawiania w tym miejscu w oknie dokumentu, gdzie chcesz wstawić obraz rollover.
  2. Wstaw obraz rollover, używając jednej z poniższych metod:
    • Z rozwijanego menu na panelu Wstaw wybierz opcję HTML. Z listy opcji wybierz polecenie Obraz rollover.
    • Wybierz polecenie Wstaw > HTML > Obraz rollover.
  3. W oknie dialogowym Wstaw obraz rollover wybierz odpowiednie obrazy i ustaw właściwości efektu najazdu. Dostępne są następujące właściwości:

    Ustawianie właściwości obrazu rollover (z efektem najazdu)
    Ustawianie właściwości obrazu rollover (z efektem najazdu)

    Nazwa obrazu

    Nazwa obrazu rollover.

    Oryginalny obraz

    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 rollover

    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.

    Wstępnie wczytaj obraz rollover

    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.

    Tekst zastępczy

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

    Po kliknięciu, przejdź do adresu URL

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

    Uwaga:

    Jeżeli hiperłącze obrazu nie zostanie podane, program Dreamweaver wstawi hiperłącze puste (#) w kodzie źródłowym HTML, do którego przyłączone jest zachowanie efektu najazdu. Jeżeli puste hiperłącze zostanie usunięte, efekt najazdu przestanie działać.

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

  5. W przeglądarce przesuń wskaźnik nad oryginalny obraz, aby zobaczyć obraz rollover.

    Uwaga:

    W widoku Projekt efekt rollover nie będzie widoczny.

Korzystanie z zewnętrznego edytora graficznego

Pracując w programie Dreamweaver, można otworzyć zaznaczony obraz w zewnętrznym edytorze graficznym. Po zapisaniu pliku graficznego i powrocie do programu Dreamweaver wszystkie zmiany wprowadzone na obrazie będą widoczne w oknie dokumentu.

Można również skonfigurować podstawowy edytor zewnętrzny i określić, jakie typy plików mają być otwierane przez poszczególne edytory, a także zdefiniować wiele edytorów obrazu. Preferencje można na przykład ustawić tak, aby w celu edycji plików JPEG był uruchamiany program Photoshop, a w celu edycji animowanych plików GIF używany był inny edytor graficzny.

Uruchamianie zewnętrznego edytora graficznego

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

Ustawianie edytora zewnętrznego dla istniejącego typu pliku

Można wybrać edytor zewnętrzny, który będzie służył do otwierania i edycji plików graficznych. Aby wybrać zewnętrzny edytor graficzny, wykonaj następujące czynności:

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

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

    Ustawianie zewnętrznego edytora dla określonego typu pliku
    Ustawianie zewnętrznego edytora dla określonego typu pliku
  3. Kliknij przycisk Dodaj (+) nad listą edytorów.
  4. W oknie dialogowym Wybierz edytor zewnętrzny przejdź do aplikacji, którą chcesz uruchamiać jako edytor dla plików danego typu.

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

  6. Jeżeli chcesz skonfigurować dodatkowy edytor dla plików tego typu, powtórz kroki 3 i 4.

    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.

Dodawanie nowego typu pliku do listy Rozszerzenia

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

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

    Na liście Rozszerzenia pojawi się pole tekstowe.

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

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

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

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

Zmiana istniejących preferencji edytora

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

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

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

Stosowanie zachowań do obrazów

Do obrazu lub jego punktu aktywnego można stosować dowolne dostępne zachowania. Jeśli zastosujesz zachowanie do punktu aktywnego, program Dreamweaver wstawi kod źródłowy HTML do znacznika area. Istnieją trzy zachowania przeznaczone specjalnie do obsługi obrazów: Wczytaj wstępnie obrazy, Zamień obraz oraz Przywróć zamieniony obraz.

Wczytaj wstępnie obrazy

Powoduje wczytanie obrazów, które nie wyświetlają się na stronie od razu (np. obrazów, które będą zamieniane za pomocą zachowań, elementów AP, kodu JavaScript) do bufora przeglądarki. Pozwala to uniknąć opóźnień spowodowanych pobieraniem w momencie, gdy obraz powinien się pojawić.

Zamień obraz

Zamienia jeden obraz na drugi, zmieniając atrybut src w znaczniku img. Za pomocą tej operacji można utworzyć przyciski z efektem rollover oraz inne efekty graficzne (np. zamieniać więcej niż jeden obraz naraz).

Przywróć zamieniony obraz

Przywraca poprzednie pliki źródłowe w ostatnim zestawie zamienionych obrazów. Ta operacja jest dodawana automatycznie za każdym razem, gdy do obiektu doda się operację Zamień obraz. W tej sytuacji nie trzeba wybierać jej ręcznie.

Za pomocą zachowań można również tworzyć bardziej złożone systemy nawigacji, np. menu przeskoków.

Ta zawartość jest licencjonowana na warunkach licencji Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Posty z serwisów Twitter™ i Facebook nie są objęte licencją Creative Commons.

Informacje prawne   |   Zasady prywatności online