Cum se creează interogări media personalizate în Dreamweaver

Când creați pagini utilizând funcții de dispunere a grilei fluide, Dreamweaver creează automat interogările media corespunzătoare pentru dvs., dar puteți să creați propriile dvs. interogări media personalizate și să le utilizați pentru a viza propriile reguli CSS.

Interogările media au fost utilizate pe web pentru mai mult de un deceniu pentru alte utilizări, cum ar fi crearea unui design alternativ al paginii optimizat pentru imprimare. O interogare media este alcătuită dintr-un tip de suport, cum ar fi ecranul sau imprimarea (cele două cele mai comune) și o expresie opțională care verifică anumite caracteristici, cum ar fi înălțimea sau lățimea. Cele mai utilizate tipuri media sunt

toate: Potrivit pentru toate dispozitivele

print: Proiectat pentru previzualizare de imprimare și pentru afișare la imprimarea unei pagini

: Pentru conținut afișat pe orice ecran

este aproape niciodată folosit și a fost folosit cel mai bine numai pentru telefoanele mobile și alte dispozitive cu ecrane mici, lățime de bandă limitată și afișaje monocrome care acceptă numai grafică bitmap. Dispozitivele iOS și majoritatea smartphone-urilor sunt clasificate ca tipuri de ecran media.

Puteți aplica foile de stil ca fișiere externe prin legarea lor sau importul acestora sau le puteți include ca stiluri interne în regiunea capului dvs. pagina HTML a paginii. Puteți chiar să direcționați dispozitive utilizând stiluri inline - o opțiune la îndemână dacă doriți să aplicați o anumită regulă numai anumitor dispozitive.

Puteți utiliza o combinație a acestor opțiuni și puteți importa sau conecta mai multe foi de stil externe pe aceeași pagină Web. După ce ați definit tipul de suport media cu caracteristicile media pe care doriți să le vizați, specificați modul în care stilurile trebuie aplicate paginii.

Cum să utilizați interogările media în foi de stil externe în Dreamweaver

Puteți utiliza interogările media cu foi de stil externe în două moduri. Prima opțiune este legarea la o foaie de stil externă cu mai multe seturi de stiluri separate prin interogări media. Acesta este modul în care Dreamweaver leagă stilurile atunci când creați o structură de grilă fluidă.

A doua opțiune este legarea a două sau mai multe foi de stil externe separate la fiecare pagină HTML și includerea interogărilor media în fiecare foaie de stil. În orice caz, codul pentru CSS și HTML este salvat în fișiere separate, iar eticheta le conectează.

Fie că salvați toate interogările media și stilurile legate într-un fișier sau în fișiere separate CSS, puteți să conectați foi de stil suplimentare și la orice pagină HTML. De exemplu, puteți include un set separat de stiluri într-o foaie de stil separată, care este creată pentru a formata pagina când este trimisă la o imprimantă.

Cum se creează interogări media în Dreamweaver

Puteți crea cât mai multe interogări media în Dreamweaver și le puteți include într-un singur fișier CSS sau multe. Pentru a crea o nouă interogare media în Dreamweaver, urmați acești pași:

Deschideți panoul CSS Designer selectând Fereastră → Stiluri CSS.

1. Selectați o foaie de stil existentă în panoul Surse, sau creați unul nou făcând clic pe semnul plus (+) din panoul Surse.

2. Faceți clic pe semnul plus (+) din panoul @Media din panoul CSS Designer.

   

3. Se deschide caseta de dialog Define Media Queries.

   Selectați Media din prima listă derulantă și Ecran din a doua listă derulantă.

4. Mutați cursorul în partea dreaptă a fiecărei liste derulante pentru a face să apară semnul plus, apoi faceți clic pe semnul plus pentru a adăuga un câmp nou.

   

5. Un câmp nou apare în caseta de dialog Media Queries, astfel încât să puteți specifica orientarea. Acest câmp este opțional, dar este utilizat în mod obișnuit dacă doriți să creați diferite modele pentru vizualizări peisaje și portrete pe un tabletă sau pe un smartphone. Dacă nu doriți să creați machete suplimentare bazate pe orientare, puteți să eliminați acest câmp făcând clic pe semnul minus.

   Notă:

   Semnele plus și minus devin vizibile numai când rotiți cursorul peste partea dreaptă a casetei de dialog. Mutați cursorul în dreapta listelor drop-down, faceți clic pe semnul plus pentru a adăuga un câmp și introduceți o lățime minimă.

6. Câmpul Min-Lățime apare în caseta de dialog Media Queries, astfel încât să puteți specifica lățimea minimă pe care doriți să o utilizați pentru a viza interogarea. Lățimea minimă este importantă deoarece interogarea media vizează stilurile pe baza domeniului de lățime de la minim la maxim pe care îl specificați, acoperit în pasul următor.

   Mutați cursorul în partea dreaptă a listelor derulante, faceți clic pe semnul plus pentru a treia oară pentru a adăuga un câmp și introduceți condiția de lățime maximă.

7. Câmpul Max-Lățime apare în caseta de dialog, astfel încât să puteți specifica lățimea maximă pe care doriți să o utilizați pentru a viza interogarea.

   Faceți clic pe OK.

8. Caseta de dialog Media Queries se închide și interogarea media este generată și adăugată la foaia de stil selectată în panoul Surse din panoul CSS Designer.

   Pentru a adăuga interogări media suplimentare la orice foaie de stil selectată, repetați pașii 3-8. Pentru a adăuga interogări media într-o altă foaie de stil, repetați pașii 2-8.

9. Deși puteți salva interogările media în mai multe coli de stiluri diferite, salvarea acestora într-o singură foaie de stil extern este mai eficientă deoarece fiecare foaie de stil trebuie să fie descărcată separat de pe server, necesitând o lărgime de bandă mai mare. Descărcarea unei foi de stil lung cu mai multe interogări media este puțin mai eficientă decât descărcarea mai multor foi de stil.