Vytvořte webovou stránku.
Naposledy aktualizováno
27. 4. 2021
Multimediální dotazy lze použít k určení souborů CSS na základě nahlášených charakteristik zařízení (responzivní návrh). Prohlížeč v zařízení zkontroluje multimediální dotaz a použije k zobrazení webové stránky odpovídající soubor CSS.
Například následující multimediální dotaz určuje pro zařízení s šířkou 300–320 pixelů soubor phone.css.
<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max-width: 320px)">
Podrobný úvod do dotazů na média najdete v článku Dana Bootha na webu Adobe Developer Center www.adobe.com/go/learn_dw_medquery_don_en.
Další informace o media queries od W3C najdete na www.w3.org/TR/css3-mediaqueries/.
Vytvoření multimediálního dotazu
V aplikaci Dreamweaver můžete vytvořit soubor dotazů médií pro celý web nebo dotazy médií specifické pro dokument.
Soubor media query pro celou stránku
Určuje nastavení zobrazení pro všechny stránky ve vašem webu, které obsahují soubor.
Soubor media query pro celou stránku funguje jako centrální úložiště pro všechny media queries na vašich stránkách.Po vytvoření tohoto souboru jej propojte se stránkami webu, které musí použít media queries v souboru pro své zobrazení.
Media query specifická pro dokument
Media query je vložena přímo do dokumentu a stránka je zobrazena na základě vložené media query.
Vyberte možnost Změnit > Multimediální dotazy.
Proveďte jeden z následujících úkonů:
Chcete-li vytvořit soubor media queries pro celou stránku, vyberte možnost Soubor media queries pro celou stránku.
Pokud chcete vytvořit multimediální dotaz specifický pro dokument, vyberte možnost Tento dokument.
Pokud chcete pracovat s multimediálním dotazem na celé webové místo, postupujte následovně:
Klepněte na možnost Určit.
Vyberte možnost Vytvořit nový soubor.
Zadejte název souboru a klepněte na tlačítko OK.
Je možné, že některá zařízení neuvádějí svou skutečnou šířku.Chcete-li vynutit u zařízení hlášení jejich skutečné šířky, zajistěte, aby byla povolena možnost Vynutit u zařízení hlášení skutečné šířky.
Následující kód se vloží do souboru, když zvolíte tuto možnost.
<meta name="viewport" content="width=device-width">
Proveďte jeden z následujících úkonů:
Klikněte na "+" a definujte vlastnosti souboru media query.
Klikněte na Výchozí předvolby, pokud chcete začít se standardními předvolbami.
Vyberte řádky v tabulce a upravte jejich vlastnosti pomocí možností v části Vlastnosti.
Popis
Popis zařízení, pro které musí být CSS soubor použit.Například telefon, televizor, tablet a podobně.
Minimální šířka a maximální šířka
Soubor CSS se používá pro zařízení, jejichž nahlášená šířka je v rozsahu zadaných hodnot.
Poznámka
Ponechejte pole Min. šířka nebo Max. šířka prázdné, pokud nechcete rozsah hodnot pro zařízení výslovně zadat. Například je běžné ponechat prázdné pole Min. šířka, pokud chcete vybrat telefony se šířkou 320 obrazových bodů nebo méně.
Soubor CSS
Vyberte Použít existující soubor a procházejte k souboru CSS pro zařízení.
Pokud chcete určit CSS soubor, který teprve vytvoříte, vyberte Vytvořit nový soubor.Zadejte název CSS souboru.Soubor bude vytvořen po stisknutí tlačítka OK.
Klepněte na tlačítko OK.
Pro potřeby multimediálního dotazu na celé webové místo bude vytvořen nový soubor. Uložte jej.
Media query pro celou stránku: U existujících stránek zajistěte, abyste zahrnuli soubor media query do všech stránek ve značce <head>.
Příklad odkazu na media query, kde mediaquery_adobedotcom.css je soubor media query pro celý web www.adobe.com:
<link href="mediaquery_adobedotcom.css" rel="stylesheet" type="text/css">
Použití existujícího souboru s multimediálním dotazem
Vytvořte webovou stránku nebo otevřete existující stránku.
Vyberte možnost Změnit > Multimediální dotazy.
Vyberte možnost Soubor s multimediálním dotazem na celý web.
Klepněte na možnost Určit.
Vyberte možnost Použít existující soubor, pokud jste již vytvořili soubor CSS s Media Query.
Klepnutím na ikonu procházení můžete vyhledat a vybrat soubor. Klepněte na tlačítko OK.
Vyberte soubor s multimediálním dotazem na celý web.
Chcete-li vynutit, aby zařízení hlásila svou skutečnou šířku, ujistěte se, že je povolena možnost Vynutit hlášení skutečné šířky zařízení. Následující kód se vloží do souboru, když zvolíte tuto možnost.
<meta name="viewport" content="width=device-width">
Klikněte na tlačítko OK.
Vyberte jiný soubor media queries pro celý web
Tento postup použijte ke změně souboru media queries pro celý web, který jste nastavili v dialogovém okně Media Queries.
Vyberte možnost Web > Správa webů.
V dialogovém okně Správa webových míst vyberte webové místo.
Klepněte na možnost Upravit. Zobrazí se dialogové okno Nastavení webu.
V části Další nastavení na levém panelu vyberte možnost Lokální informace.
V části Soubor Media Query pro celý web na pravém panelu klikněte na tlačítko Procházet a vyberte soubor CSS s media query.
Poznámka
Změna souboru media queries pro celý web neovlivní dokumenty propojené s jiným nebo předchozím souborem media queries pro celý web.
Klikněte na tlačítko Uložit.
Zobrazit webové stránky na základě media query
Rozměry zadané v media query se zobrazují v možnostech velikosti tlačítka/okna Multiscreen.Když vyberete Dimension z nabídky, uvidíte následující změny:
Velikost pohledu se změní tak, aby odrážela vybrané rozměry. Velikost rámce dokumentu zůstane nezměněna.
Soubor CSS zadaný v media query se použije k zobrazení stránky.
Tvorba nádherných webů v aplikaci Dreamweaver
Vytvářejte, kódujte a spravujte dynamické weby pomocí výkonného všestranného nástroje.
