Pomocí vizuálních multimediálních dotazů můžete zobrazit a upravit webové stránky podle potřeb jednotlivých velikostí displejů.

Multimediální dotazy je modul standardu CSS3, který umožňuje vytvářet responzivní webové stránky definováním různých pravidel stylu pro různá zařízení nebo typy médií. Na základě těchto pravidel je obsah vykreslován tak, aby se přizpůsobil různým podmínkám, například velikostem obrazovky, velikostem okna prohlížeče, velikostem a orientaci zařízení a rozlišení.

Multimediální dotazy můžete přidat do kódu CSS pomocí pravidla @media. Případně můžete vytvořit samostatné seznamy stylů pro různé typy médií a pak je vyvolat pomocí následující syntaxe:

<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' />

Prohlížeč v zařízení zkontroluje multimediální dotaz a použije k zobrazení webové stránky odpovídající soubor CSS. 

Další informace najdete v tomto článku.

Multimediální dotazy lze přidávat doplněním příslušného kódu do souborů HTML nebo CSS. Aplikace Dreamweaver zároveň umožňuje snadno vytvářet a spravovat multimediální dotazy pomocí následujícího:

Základní rozdíl mezi těmito dvěma metodami je vizuální aspekt. Pokud raději píšete kód a poté zobrazujete změny v Živém zobrazení, použijte nástroj CSS Designer. Pokud raději svou stránku vizualizujete na různých bodech přerušení a zároveň měníte návrh, zkuste spíše použít panel s dotazy na vizuální multimédia.

Řádky s dotazy na vizuální multimédia

Řádky s dotazy na vizuální multimédia jsou vizuální reprezentací multimediálních dotazů na stránce. Tyto řádky vám pomáhají vizualizovat webovou stránku na různých místech a ukazují, jak jsou různé součásti webové stránky přeformátovány na různých velikostech displejů. Zatímco zobrazujete svou stránku na různých velikostech displeje, můžete změnit design pro konkrétní velikost displeje bez vlivu na design stránky při jiných velikostech.

Řádky s dotazy na vizuální multimédia obsahují tři vodorovné řádky, z nichž každý představuje kategorii multimediálního dotazu:

  •  Zelená: Multimediální dotazy s podmínkami max-width (maximální šířka)
  •  Modrá: Multimediální dotazy s podmínkami min-width a max-width (minimální šířka i maximální šířka)
  •  Nachová: Multimediální dotazy s podmínkami min-width (minimální šířka)

Poznámka:

Multimediální dotazy uvedené v panelu CSS Designer mají také jako předvolby tyto barvy.

Každá kategorie se může skládat z jednoho nebo více multimediálních dotazů. Pokud podmínky multimediálního dotazu nejsou v dokumentu definovány, nezobrazí se ani odpovídající řádek pro vizuální multimediální dotaz. Například pokud dokument neobsahuje podmínky „min-width“, nezobrazí se fialový řádek.

Hodnoty bodů přerušení jsou uvedeny na řádcích – min-width na levém řádku a max-width na řádku pravém.

Hodnoty přerušení
Hodnoty přerušení

A. Body přerušení B. Řádky s dotazy na vizuální multimédia C. Přidat ikonu multimediálního dotazu D. Scrubber 

Skrýt nebo zobrazit dotazy na vizuální multimédia

Panel s dotazy na vizuální multimédia je v Živém zobrazení zobrazen ve výchozím nastavení. Pokud budete chtít panel skrýt, použijte řádek Přepnout dotazy na vizuální multimédia z panelu nástrojů.

Přepínání mezi body přerušení

Chcete-li svou stránku zobrazit v konkrétní velikosti (bodu přerušení), klikněte na odpovídající panel multimediálního dotazu. Dokument se přepne na bod přerušení.

Případně můžete přetáhnout nástroj pro posun na požadovaný bod přerušení.

Pokud chcete změnit velikost okna dokumentu Dreamweaver, proveďte jednu z následujících akcí:

  • Dvakrát klikněte kamkoli v šedé oblasti na pravé straně dokumentu, kde se nachází text „Poklepáním přizpůsobte šířce“. Pokud šedá oblast není vidět, přetáhněte posuvník vlevo.
  • Vyberte možnost Plná šířka v rozevíracím seznamu v dolní části okna dokumentu.
Změna velikosti okna
Změna velikosti okna

Pokud tuto možnost nevidíte, přetáhněte nástroj scrubber a zmenšete tím velikost webové stránky.

Vizuální úprava multimediálních dotazů

  1. Klikněte na panel s dotazy na vizuální multimédia, který odpovídá multimediálnímu dotazu, který chcete upravit.

    Objeví se ovladače pro změnu velikosti. Pro multimediální dotazy, které mají hodnoty min i max-width se zobrazí ovladače na obou stranách panelu.

    Ovladače pro změnu velikosti
    Ovladače pro změnu velikosti

  2. Přetáhněte ovladače na požadovanou velikost.

    Multimediální dotazy jsou automaticky aktualizovány na nové hodnoty min-width a/nebo max-width. Zobrazí se oznámení o úspěšné úpravě multimediálního dotazu. Pokud s panelem s dotazy na vizuální multimédia souvisí více multimediálních dotazů, jsou aktualizovány všechny multimediální dotazy. Počet aktualizovaných multimediálních dotazů je uveden společně se zprávou o úspěchu. 

Poznámka:

Chcete-li akci vrátit zpět, stiskněte Ctrl + Z (Win) nebo Cmd + Z (Mac).

Případně můžete dvakrát kliknout na hodnoty bodů přerušení a zadat tyto hodnoty pomocí klávesnice. 

Přidání nového dotazu na média

  1. Přetáhněte nástroj scrubber podél pravítka na požadovanou velikost.

  2. Klikněte na volbu .

    Přidávání multimediálních dotazů
    Přidávání multimediálních dotazů

  3. V zobrazeném místním okně bude ve výchozím nastavení zvolena možnost max-width. Chcete-li nastavit hodnotu min-width nebo max-width, zvolte odpovídající možnost z rozevíracího seznamu a vyberte požadované jednotky.

    Poté vyberte zdroj CSS, ve kterém je nutné multimediální dotaz přidat.

    Pokud zvolíte vytvoření nového souboru CSS, zobrazí se nový rozbalovací prvek. Zadejte název a cestu nového souboru CSS a klikněte na tlačítko OK.

Poznámka:

Chcete-li akci vrátit zpět, stiskněte Ctrl + Z (Win) nebo Cmd + Z (Mac).

Odstranění multimediálních dotazů

  1. Klepněte pravým tlačítkem na odpovídající panel s dotazy na vizuální multimédia.

  2. Klikněte na tlačítko Odstranit a poté klikněte na multimediální dotaz, který chcete odstranit..

  3. Klikněte na tlačítko OK a potvrďte, že chcete odstranit všechny multimediální dotazy a příslušné selektory.

Poznámka:

Chcete-li akci vrátit zpět, stiskněte Ctrl + Z (Win) nebo Cmd + Z (Mac).

Zobrazení kódu pro multimediální dotazy

  1. Klikněte pravým tlačítkem na požadovaný panel s dotazy na vizuální multimédia a umístěte kurzor myši na možnost Přejít ke kódu.

    Zobrazí se seznam multimediálních dotazů v příslušném rozsahu bodu přerušení společně se soubory, ve kterých jsou deklarovány.

  2. Klikněte na požadovaný multimediální dotaz a přejděte na odpovídající kód v Zobrazení kódu.

    Pokud Zobrazení kódu není viditelné, dokument se přepne do zobrazení Rozdělit a kód se zobrazí.

Tato práce podléhá licenci Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Na příspěvky ze služeb Twitter™ a Facebook se nevztahují podmínky licence Creative Commons.

Právní upozornění   |   Zásady ochrany osobních údajů online