Kliknij pasek Visual Media Query odpowiadający zapytaniu medialnemu, które chcesz edytować.
Ostatnia aktualizacja
20 gru 2021
Skorzystaj z funkcji wizualnych zapytań o media, które umożliwiają wyświetlanie i edytowanie strony w różnych punktach przerwań, odpowiadających różnym rozmiarom ekranu.
Zapytania o media to moduł specyfikacji CSS3, który ułatwia projektowanie reagujących serwisów WWW, ponieważ umożliwia definiowanie odmiennych reguł stylów dla różnych urządzeń lub typów mediów (nośników). Na podstawie tych reguł zawartość jest renderowana w celu dostosowania do różnych warunków, takich jak rozmiary ekranów, rozmiary okien przeglądarki, rozmiary urządzeń i orientacja oraz rozdzielczość.
Zapytania o media w stylach CSS dodaje się za pomocą reguły @media. Można również utworzyć oddzielne arkusze stylów dla różnych typów multimediów, a następnie wywołać je, używając następującej składni:
<link rel='stylesheet' media='all' href='normal.css' />
<link rel='stylesheet' media='print' href='print.css' />
<link rel='stylesheet' media='screen and (min-width: 701px)' href='medium.css' />
Przeglądarka na urządzeniu analizuje zapytanie o media, a następnie wyświetla stronę WWW, używając pliku CSS odpowiedniego do danego nośnika.
Więcej informacji zawiera ten artykuł.
Zapytania o media można dodawać, wprowadzając odpowiedni kod do plików HTML lub CSS. Ponadto program Dreamweaver pozwala łatwo tworzyć zapytania multimedialne i zarządzać nimi za pomocą:
Podstawową różnicą między tymi opcjami jest aspekt wizualny. Jeśli wolisz pisać kod, a potem wyświetlać wprowadzone zmiany w widoku aktywnym, skorzystaj z panelu Projektant CSS. Jeśli wolisz wyświetlać wizualizację strony na różnych etapach i jednocześnie wprowadzać zmiany układu, wygodniejsza będzie opcja wizualnych zapytań o media.Paski wizualnych zapytań o media
Paski wizualnych zapytań o media stanowią graficzną reprezentację zapytań istniejących na stronie. Ułatwia to wizualizację strony WWW w różnych punktach przerwań oraz analizowanie sposobu reorganizacji układu poszczególnych elementów strony przy różnych wielkościach portu ekranowego. Wyświetlając stronę przy różnych wielkościach portu ekranowego, można wprowadzić zmiany projektu odpowiednie dla konkretnej wielkości, nie wpływając na wygląd strony na innych ekranach.
Funkcja Wizualne zapytania o media składa się trzech pasków, wyświetlanych w postaci trzech poziomych rzędów. Każdy z nich odpowiada jednej kategorii zapytań o media:
Zielony: Zapytania multimedialne z warunkami max-width
Niebieski : Zapytania multimedialne z warunkami min-width i max-width
Fioletowy : Zapytania multimedialne z warunkami min-width
Zapytania multimedialne wymienione w panelu projektanta CSS są również poprzedzone tymi kolorami.
Każda kategoria może zawierać jedno lub więcej zapytań o media. Jeśli w dokumencie nie zdefiniowano zapytania o media uwzględniającego dany warunek, to nie zostanie wyświetlony pasek wizualnych zapytań o media dla takiego warunku. Na przykład, jeśli dokument nie zawiera warunków min-width, fioletowy pasek nie jest wyświetlany.
Wartości punktów przerwania są wskazane na paskach — min-width po lewej stronie i max-width po prawej stronie paska.
A. Punkty przerwań B. Paski wizualnych zapytań o media C. Ikona Dodaj zapytanie o media D. Scrubber
Ukryj lub pokaż wizualne zapytania multimedialne
W widoku aktywnym pasek wizualnych zapytań o media jest domyślnie widoczny. Aby ukryć pasek, użyj opcji Przełącz pasek wizualnych zapytań multimedialnych na pasku narzędzi.
Przełączanie między punktami przerwania
Aby wyświetlić stronę w określonym punkcie przerwań (czyli w wersji dla określonej wielkości), kliknij odpowiedni pasek zapytań o media. Dokument zostanie dopasowany do punktu przerwania.
Można również przeciągnąć suwak do wymaganego punktu przerwania.
Aby zmienić rozmiar widoku do rozmiaru okna dokumentu programu Dreamweaver, wykonaj jedną z następujących czynności:
- Dwukrotnie kliknij w obrębie szarego pola po prawej stronie dokumentu (tam, gdzie znajduje się napis „Kliknij dwukrotnie, aby zmieścić na szerokość”). Jeśli nie widzisz szarego obszaru, przeciągnij suwak w lewo.
- Wybierz opcję Pełna szerokość z listy rozwijanej u dołu okna dokumentu.
Jeśli nie widzisz tej opcji, przeciągnij suwak, aby zmniejszyć rozmiar strony internetowej.
Edytuj zapytania multimedialne wizualnie
Spowoduje to wyświetlenie uchwytów zmiany rozmiaru. W przypadku zapytań medialnych, które mają wartości zarówno min, jak i max-width, uchwyty do zmiany rozmiaru pojawiają się po obu stronach paska.
Przeciągnij uchwyty do wymaganego rozmiaru.
Zapytania o media zostaną odpowiednio uaktualnione nowymi wartościami właściwości min-width oraz max-width. Pomyślna modyfikacja zapytania o media zostanie potwierdzona komunikatem wyświetlonym na ekranie. Jeśli paskowi wizualnych zapytań o media odpowiada więcej niż jedno zapytanie, to uaktualnione zostaną wszystkie takie zapytania. Liczba zaktualizowanych zapytań multimedialnych jest wyświetlana wraz z komunikatem o powodzeniu.
Aby cofnąć, naciśnij Ctrl+Z (Win) lub Cmd+Z (Mac).
Można również dwukrotnie kliknąć wartości punktów przerwania, aby wprowadzić wartości za pomocą klawiatury.
Dodawanie nowych zapytań medialnych
Przeciągnij suwak wzdłuż linijki do wymaganego rozmiaru.
Kliknij ikonę 
.
W wyświetlonym okienku jest domyślnie wybrana opcja maksymalnej szerokości (max-width). Aby określić min-width lub min-max, wybierz odpowiednią opcję z listy rozwijanej i wybierz wymagane jednostki.
Następnie wybierz źródło CSS, w którym należy dodać zapytanie medialne.
Jeśli wybierzesz opcję utworzenia nowego pliku CSS, zostanie wyświetlone kolejne okienko. Określ nazwę i ścieżkę nowego pliku CSS i kliknij OK.
Aby cofnąć, naciśnij Ctrl+Z (Win) lub Cmd+Z (Mac).
Usuwanie zapytań medialnych
Kliknij prawym przyciskiem myszy odpowiadający pasek Visual Media Query.
Kliknij Usuń, a następnie kliknij kwerendę multimedialną, którą chcesz usunąć.
Kliknij OK, aby potwierdzić, że chcesz usunąć wszystkie zapytania o media i powiązane selektory.
Aby cofnąć, naciśnij Ctrl+Z (Win) lub Cmd+Z (Mac).
Wyświetlanie kodu zapytań medialnych
Kliknij prawym przyciskiem myszy wymagany pasek Visual Media Query i najedź myszą na Przejdź do kodu.
Pojawi się lista wszystkich zapytań medialnych w tym konkretnym zakresie punktów przerwania wraz z plikami, w których są zadeklarowane.
Kliknij wymagane zapytanie medialne, aby przejść do odpowiadającego kodu w widoku kodu.
Jeśli widok kodu nie jest widoczny, dokument zostanie przełączony na widok podzielony w celu wyświetlenia kodu.
Tworzenie estetycznych serwisów internetowych w programie Dreamweaver
Projektowanie, pisanie kodu i zarządzanie dynamicznymi serwisami internetowymi za pomocą jednego, kompleksowego narzędzia.
