Ako vytvoriť vlastné mediálne dotazy v Dreamweaveri

Keď vytvárate stránky pomocou funkcií rozloženia mriežky s premenlivou mriežkou, Dreamweaver za vás automaticky vytvorí zodpovedajúce mediálne dotazy, ale môžete si vytvoriť svoje vlastné mediálne dotazy a použiť ich na zacielenie vlastných pravidiel CSS.

Dopyty na médiá sa na webe používajú už viac ako desať rokov na iné účely, ako je napríklad vytvorenie alternatívneho dizajnu stránky optimalizovaného pre tlač. Mediálny dotaz pozostáva z typu média, ako je obrazovka alebo tlač (dva najbežnejšie), a voliteľného výrazu, ktorý kontroluje konkrétne vlastnosti, ako je výška alebo šírka. Najčastejšie používané typy médií sú

• všetko: Vhodné pre všetky zariadenia

• tlač: Navrhnuté na ukážku tlače a na zobrazenie pri tlači stránky

• obrazovka: Pre obsah zobrazený na ľubovoľnej obrazovke

Vreckový typ média sa už takmer nikdy nepoužíva a najlepšie sa používal iba pre mobilné telefóny a iné zariadenia s malými obrazovkami, obmedzenou šírkou pásma a monochromatickými displejmi, ktoré podporujú iba bitmapovú grafiku. Zariadenia so systémom iOS a väčšina smartfónov sú kategorizované ako typy médií na obrazovke.

Ako použiť štýly na návrhy stránok Dreamweaver

Šablóny štýlov môžete použiť ako externé súbory ich prepojením alebo importovaním, alebo ich môžete zahrnúť ako interné štýly do oblasti hlavičky kódu HTML vašej stránky. Môžete dokonca zacieliť na zariadenia pomocou vložených štýlov, čo je užitočná možnosť, ak chcete použiť konkrétne pravidlo iba na určité zariadenia.

Môžete použiť kombináciu týchto možností a môžete importovať alebo prepojiť viacero externých šablón štýlov na rovnakú webovú stránku. Po definovaní typu média s funkciami médií, na ktoré chcete zacieliť, určíte, ako sa majú štýly použiť na stránku.

Ako používať mediálne dotazy v externých šablónach štýlov v Dreamweaveri

Dotazy na médiá s externými šablónami štýlov môžete použiť dvoma spôsobmi. Prvou možnosťou je prepojenie na jednu externú šablónu štýlov s viacerými sadami štýlov oddelených mediálnymi dopytmi. Takto Dreamweaver prepojí štýly, keď vytvoríte rozloženie plynulej mriežky.

Druhou možnosťou je prepojiť dva alebo viac samostatných externých hárkov štýlov s každou HTML stránkou a zahrnúť mediálne dotazy do každého hárku so štýlmi. V každom prípade sú kódy CSS a HTML uložené v samostatných súboroch a

spája ich značka.

Či už uložíte všetky mediálne dopyty a súvisiace štýly do jedného súboru alebo do samostatných súborov CSS, môžete tiež prepojiť ďalšie predlohy štýlov s ľubovoľnou stránkou HTML. Môžete napríklad zahrnúť samostatnú množinu štýlov do samostatnej šablóny so štýlmi, ktorá je určená na formátovanie strany pri odoslaní do tlačiarne.

Ako vytvoriť mediálne dotazy v Dreamweaveri

V aplikácii Dreamweaver môžete vytvoriť ľubovoľný počet mediálnych dopytov a môžete ich zahrnúť do jedného alebo viacerých súborov CSS. Ak chcete vytvoriť nový mediálny dotaz v aplikácii Dreamweaver, postupujte takto:

Otvorte panel CSS Designer výberom položky Window→CSS Styles.

Vyberte existujúcu šablónu štýlov na paneli Zdroje alebo vytvorte novú kliknutím na znamienko plus (+) na paneli Zdroje.

Kliknite na znamienko plus (+) na paneli @Media na paneli CSS Designer.

Otvorí sa dialógové okno Definovať mediálne dotazy.

Z prvého rozbaľovacieho zoznamu vyberte položku Médiá a z druhého rozbaľovacieho zoznamu položku Obrazovka.

Presuňte kurzor napravo od každého rozbaľovacieho zoznamu, aby sa zobrazilo znamienko plus, a potom kliknutím na znamienko plus pridajte nové pole.

V dialógovom okne Media Queries sa zobrazí nové pole, v ktorom môžete určiť orientáciu. Toto pole je voliteľné, ale bežne sa používa, ak chcete vytvoriť rôzne návrhy pre zobrazenie na šírku a na výšku na tablete alebo smartfóne. Ak nechcete vytvárať ďalšie rozloženia na základe orientácie, môžete toto pole odstrániť kliknutím na znamienko mínus.

Poznámka: Znamienka plus a mínus sa stanú viditeľnými iba vtedy, keď prejdete kurzorom na pravú stranu dialógového okna.

Presuňte kurzor napravo od rozbaľovacích zoznamov, druhým kliknutím na znamienko plus pridajte pole a zadajte podmienku minimálnej šírky.

Pole Min-Width sa zobrazí v dialógovom okne Media Queries, takže môžete zadať minimálnu šírku, ktorú chcete použiť na zacielenie dotazu. Minimálna šírka je dôležitá, pretože dopyt na médiá sa zacieľuje na štýly založené na minimálnom až maximálnom rozsahu šírky, ktorý určíte a ktorý je uvedený v nasledujúcom kroku.

Presuňte kurzor napravo od rozbaľovacích zoznamov, tretíkrát kliknite na znamienko plus, čím pridáte pole, a zadajte podmienku maximálnej šírky.

V dialógovom okne sa zobrazí pole Max-Width, takže môžete zadať maximálnu šírku, ktorú chcete použiť na zacielenie dotazu.

Kliknite na tlačidlo OK.

Dialógové okno Media Queries sa zatvorí a mediálny dotaz sa vygeneruje a pridá do hárku štýlov, ktorý ste vybrali na paneli Zdroje na paneli CSS Designer.

Ak chcete pridať ďalšie mediálne dotazy k ľubovoľnému vybratému hárku štýlov, zopakujte kroky 3–8. Ak chcete pridať mediálne dotazy do inej šablóny štýlov, zopakujte kroky 2–8.

Hoci môžete mediálne dotazy uložiť do ľubovoľného množstva rôznych hárkov štýlov, ich uloženie do jedného externého hárku štýlov je efektívnejšie, pretože každý hárok štýlov sa musí stiahnuť zo servera samostatne, čo si vyžaduje väčšiu šírku pásma. Stiahnutie jednej dlhej šablóny štýlov s viacerými mediálnymi dopytmi je o niečo efektívnejšie ako sťahovanie viacerých šablón štýlov.