Jak vytvořit vlastní dotazy na média v Dreamweaveru

Když vytváříte stránky pomocí funkcí rozvržení proměnlivé mřížky, Dreamweaver za vás automaticky vytvoří odpovídající dotazy na média, ale můžete si vytvořit své vlastní dotazy na média a použít je k zacílení vlastních pravidel CSS.

Dotazy na média se na webu používají již více než deset let pro jiné účely, jako je vytvoření alternativního návrhu stránky optimalizovaného pro tisk. Dotaz na média se skládá z typu média, jako je obrazovka nebo tisk (dva nejběžnější), a volitelného výrazu, který kontroluje konkrétní funkce, jako je výška nebo šířka. Nejčastěji používané typy médií jsou

• vše: Vhodné pro všechna zařízení

• tisk: Navrženo pro náhled tisku a pro zobrazení při tisku stránky

• obrazovka: Pro obsah zobrazený na libovolné obrazovce

Kapesní typ média se již téměř nikdy nepoužívá a nejlépe se používal pouze pro mobilní telefony a další zařízení s malými obrazovkami, omezenou šířkou pásma a monochromatickými displeji, které podporují pouze bitmapovou grafiku. Zařízení iOS a většina smartphonů jsou kategorizovány jako typy médií na obrazovce.

Jak použít styly na návrhy stránek v aplikaci Dreamweaver

Šablony stylů můžete použít jako externí soubory tak, že je propojíte nebo je importujete, nebo je můžete zahrnout jako interní styly do oblasti záhlaví HTML kódu vaší stránky. Můžete dokonce cílit na zařízení pomocí inline stylů – užitečná možnost, pokud chcete použít konkrétní pravidlo pouze na určitá zařízení.

Můžete použít kombinaci těchto možností a můžete importovat nebo propojit více externích šablon stylů na stejnou webovou stránku. Poté, co definujete typ média s funkcemi médií, na které chcete cílit, určíte, jak mají být styly aplikovány na stránku.

Jak používat dotazy na média v externích šablonách stylů v Dreamweaveru

Dotazy na média s externími šablonami stylů můžete použít dvěma způsoby. První možností je propojení s jednou externí šablonou stylů s více sadami stylů oddělenými dotazy na média. Takto Dreamweaver propojí styly, když vytvoříte rozvržení proměnlivé mřížky.

Druhou možností je propojit dvě nebo více samostatných externích šablon stylů s každou stránkou HTML a zahrnout dotazy na média do každé šablony stylů. V obou případech jsou kódy CSS a HTML uloženy v samostatných souborech a

spojuje je značka.

Ať už uložíte všechny dotazy na média a související styly do jednoho souboru nebo do samostatných souborů CSS, můžete také propojit další šablony stylů s jakoukoli stránkou HTML. Můžete například zahrnout samostatnou sadu stylů do samostatné šablony stylů, která je určena k formátování stránky při jejím odeslání do tiskárny.

Jak vytvořit mediální dotazy v Dreamweaveru

V aplikaci Dreamweaver můžete vytvořit libovolný počet mediálních dotazů a můžete je zahrnout do jednoho nebo více souborů CSS. Chcete-li vytvořit nový dotaz na média v aplikaci Dreamweaver, postupujte takto:

Otevřete panel CSS Designer výběrem Window→CSS Styles.

Vyberte existující šablonu stylů v panelu Zdroje nebo vytvořte novou kliknutím na znaménko plus (+) v panelu Zdroje.

Klikněte na znaménko plus (+) na panelu @Media na panelu CSS Designer.

Otevře se dialogové okno Definovat dotazy na média.

Z prvního rozevíracího seznamu vyberte položku Média a z druhého rozevíracího seznamu vyberte možnost Obrazovka.

Přesuňte kurzor napravo od každého rozevíracího seznamu, aby se zobrazilo znaménko plus, a poté kliknutím na znaménko plus přidejte nové pole.

V dialogovém okně Media Queries se objeví nové pole, ve kterém můžete určit orientaci. Toto pole je volitelné, ale běžně se používá, pokud chcete vytvořit různé návrhy pro zobrazení na šířku a na výšku na tabletu nebo smartphonu. Pokud nechcete vytvářet další rozvržení na základě orientace, můžete toto pole odebrat kliknutím na znaménko mínus.

Poznámka: Znaménka plus a mínus se stanou viditelnými, pouze když přejedete kurzorem přes pravou stranu dialogového okna.

Přesuňte kurzor napravo od rozevíracích seznamů, druhým kliknutím na znaménko plus přidejte pole a zadejte podmínku minimální šířky.

Pole Min-Width se zobrazí v dialogovém okně Media Queries, takže můžete určit minimální šířku, kterou chcete použít k cílení dotazu. Minimální šířka je důležitá, protože dotaz na média cílí na styly na základě minimálního až maximálního rozsahu šířky, který určíte a který je popsán v dalším kroku.

Přesuňte kurzor napravo od rozevíracích seznamů, potřetí klikněte na znaménko plus pro přidání pole a zadejte podmínku maximální šířky.

V dialogovém okně se zobrazí pole Max-Width, takže můžete zadat maximální šířku, kterou chcete použít k cílení dotazu.

Klepněte na tlačítko OK.

Dialogové okno Dotazy na média se zavře a dotaz na média se vygeneruje a přidá do šablony stylů, kterou jste vybrali na panelu Zdroje v panelu Návrhář CSS.

Chcete-li do libovolné vybrané šablony stylů přidat další dotazy na média, opakujte kroky 3–8. Chcete-li přidat dotazy na média do jiné šablony stylů, opakujte kroky 2–8.

Ačkoli můžete dotazy na média ukládat do tolika různých šablon stylů, kolik chcete, uložení všech do jedné externí šablony stylů je efektivnější, protože každou šablonu stylů je nutné stáhnout ze serveru samostatně, což vyžaduje větší šířku pásma. Stahování jedné dlouhé šablony stylů s více dotazy na média je o něco efektivnější než stahování více šablon stylů.