Egyéni médialekérdezések létrehozása a Dreamweaverben

Amikor gördülékeny rácselrendezési funkciókkal hoz létre oldalakat, a Dreamweaver automatikusan létrehozza a megfelelő médialekérdezéseket, de létrehozhat saját egyéni médialekérdezéseket, és felhasználhatja azokat saját CSS-szabályainak megcélzására.

A médialekérdezéseket több mint egy évtizede használják az interneten más célokra, például egy alternatív, nyomtatásra optimalizált oldalterv létrehozására. A médialekérdezés egy adathordozó típusból, például képernyő vagy nyomtatásból (a két leggyakoribb) és egy opcionális kifejezésből áll, amely bizonyos jellemzőket, például magasságot vagy szélességet ellenőrzi. A leggyakrabban használt médiatípusok a

• mind: Minden eszközhöz alkalmas

• nyomtatás: Nyomtatási előnézethez és oldal nyomtatásakor történő megjelenítéshez tervezték

• képernyő: Bármely képernyőn megjelenített tartalomhoz

A kézi médiatípust szinte soha többé nem használják, és leginkább csak mobiltelefonokhoz és más, kis képernyővel, korlátozott sávszélességgel és csak bittérképes grafikát támogató monokróm kijelzőkkel rendelkező eszközökhöz használták. Az iOS-eszközök és a legtöbb okostelefon a képernyős médiatípusok közé sorolható.

Stílusok alkalmazása a Dreamweaver oldalakra

A stíluslapokat külső fájlként alkalmazhatja, ha összekapcsolja vagy importálja őket, vagy beillesztheti őket belső stílusokként az oldal HTML-kódjának fejrészébe. Még az eszközöket is megcélozhatja soron belüli stílusok használatával – ez egy praktikus lehetőség, ha egy adott szabályt csak bizonyos eszközökre szeretne alkalmazni.

Használhatja ezeknek a lehetőségeknek a kombinációját, és több külső stíluslapot importálhat vagy hivatkozhat ugyanarra a weboldalra. Miután meghatározta a médiatípust a megcélozni kívánt médiaszolgáltatásokkal, meg kell adnia, hogy a stílusokat hogyan kell alkalmazni az oldalon.

A médialekérdezések használata külső stíluslapokban a Dreamweaverben

A médialekérdezéseket külső stíluslapokkal kétféleképpen használhatja. Az első lehetőség egyetlen külső stíluslapra mutató hivatkozás több stíluskészlettel, amelyeket médialekérdezések választanak el. Így kapcsolja össze a Dreamweaver a stílusokat, amikor egy gördülékeny rácselrendezést hoz létre.

A második lehetőség az, hogy két vagy több különálló külső stíluslapot csatolunk minden HTML-oldalhoz, és minden stíluslapba belefoglaljuk a médialekérdezéseket. Akárhogy is, a CSS és a HTML kódja külön fájlokban kerül mentésre, és a

címke köti össze őket.

Akár egy fájlba, akár külön CSS-fájlokba menti az összes médialekérdezést és a kapcsolódó stílusokat, további stíluslapokat is csatolhat bármely HTML-oldalhoz. Például külön stíluskészletet is beilleszthet egy külön stíluslapba, amelyet úgy terveztek, hogy formázza az oldalt, amikor elküldi a nyomtatóra.

Médialekérdezések létrehozása a Dreamweaverben

A Dreamweaverben tetszőleges számú médialekérdezést hozhat létre, és beillesztheti őket egy vagy több CSS-fájlba. Ha új médialekérdezést szeretne létrehozni a Dreamweaverben, kövesse az alábbi lépéseket:

Nyissa meg a CSS Designer panelt az Ablak→CSS-stílusok menüponttal.

Válasszon ki egy meglévő stíluslapot a Források panelen, vagy hozzon létre egy újat a pluszjelre (+) kattintva a Források panelen.

Kattintson a pluszjelre (+) a @Media panelen a CSS Designer panelen.

Megnyílik a Médialekérdezések meghatározása párbeszédpanel.

Az első legördülő listából válassza a Média lehetőséget, a második legördülő listából pedig a Képernyőt.

Mozgassa a kurzort mindegyik legördülő listától jobbra, hogy megjelenjen a pluszjel, majd kattintson a pluszjelre egy új mező hozzáadásához.

Egy új mező jelenik meg a Médialekérdezések párbeszédpanelen, ahol megadhatja a tájolást. Ez a mező nem kötelező, de gyakran használják, ha különböző mintákat szeretne létrehozni fekvő és álló nézetekhez táblagépen vagy okostelefonon. Ha nem szeretne további elrendezéseket tájolás alapján létrehozni, a mínusz jelre kattintva eltávolíthatja ezt a mezőt.

Megjegyzés: A plusz és mínusz jelek csak akkor láthatók, ha a kurzort a párbeszédpanel jobb oldala fölé viszi.

Mozgassa a kurzort a legördülő listák jobb oldalára, kattintson a pluszjelre másodszor egy mező hozzáadásához, és adja meg a minimális szélességi feltételt.

A Minimális szélesség mező megjelenik a Médialekérdezések párbeszédpanelen, így megadhatja a lekérdezés célzásához használni kívánt minimális szélességet. A minimális szélesség azért fontos, mert a médialekérdezés az Ön által megadott minimális és maximális szélességi tartomány alapján célozza meg a stílusokat, amelyeket a következő lépésben tárgyalunk.

Mozgassa a kurzort a legördülő listák jobb oldalára, kattintson a pluszjelre harmadszor egy mező hozzáadásához, és adja meg a maximális szélességi feltételt.

A párbeszédpanelen megjelenik a Max-Width mező, ahol megadhatja a lekérdezés célzásához használni kívánt maximális szélességet.

Kattintson az OK gombra.

A Médialekérdezések párbeszédpanel bezárul, a médialekérdezés létrejön, és hozzáadódik a CSS Designer panel Források paneljén kiválasztott stíluslaphoz.

Ha további médialekérdezéseket szeretne hozzáadni bármely kiválasztott stíluslaphoz, ismételje meg a 3–8. lépéseket. Médialekérdezések másik stíluslaphoz való hozzáadásához ismételje meg a 2–8. lépéseket.

Bár a médialekérdezéseket tetszőleges számú különböző stíluslapba mentheti, az összes mentése egy külső stíluslapon hatékonyabb, mivel minden stíluslapot külön kell letölteni a szerverről, ami nagyobb sávszélességet igényel. Egy hosszú stíluslap letöltése több médialekérdezéssel egy kicsit hatékonyabb, mint több stíluslap letöltése.