Kako stvoriti prilagođene medijske upite u Dreamweaveru

Kada kreirate stranice koristeći značajke izgleda tekuće mreže, Dreamweaver automatski stvara odgovarajuće medijske upite za vas, ali možete stvoriti vlastite prilagođene medijske upite i koristiti ih za ciljanje vlastitih CSS pravila.

Medijski upiti koriste se na webu više od desetljeća za druge namjene, kao što je stvaranje alternativnog dizajna stranice optimiziranog za ispis. Upit za medije sastoji se od vrste medija, kao što je zaslon ili ispis (dva najčešća), i neobaveznog izraza koji provjerava određene značajke, kao što su visina ili širina. Najčešće korištene vrste medija su

• sve: Prikladno za sve uređaje

• ispis: Dizajniran za pregled ispisa i za prikaz kada se stranica ispisuje

• zaslon: Za sadržaj prikazan na bilo kojem zaslonu

Tip ručnih medija više se gotovo nikad ne koristi i najbolje je koristiti samo za mobitele i druge uređaje s malim zaslonima, ograničenom propusnošću i jednobojnim zaslonima koji podržavaju samo bitmapiranu grafiku. iOS uređaji i većina pametnih telefona kategorizirani su kao vrste zaslonskih medija.

Kako primijeniti stilove na dizajn stranica Dreamweavera

Tablice stilova možete primijeniti kao vanjske datoteke tako da ih povežete ili uvezete, ili ih možete uključiti kao interne stilove u područje zaglavlja HTML koda vaše stranice. Možete čak ciljati uređaje pomoću ugrađenih stilova — zgodna opcija ako želite primijeniti određeno pravilo samo na određene uređaje.

Možete koristiti kombinaciju ovih opcija, a možete uvesti ili povezati više vanjskih stilskih listova na istu web stranicu. Nakon što definirate vrstu medija s medijskim značajkama koje želite ciljati, određujete kako se stilovi trebaju primijeniti na stranicu.

Kako koristiti medijske upite u vanjskim stilovima u Dreamweaveru

Možete koristiti medijske upite s vanjskim stilovima na dva načina. Prva opcija je povezivanje na jedan vanjski stilski list s više skupova stilova odvojenih medijskim upitima. Tako Dreamweaver povezuje stilove kada kreirate fluidni raspored mreže.

Druga opcija je povezati dva ili više zasebnih vanjskih stilskih listova na svaku HTML stranicu i uključiti medijske upite u svaki stilski list. U svakom slučaju, kod za CSS i HTML spremaju se u zasebne datoteke, a

oznaka ih povezuje.

Bez obzira spremate li sve medijske upite i povezane stilove u jednu datoteku ili u zasebne CSS datoteke, možete povezati i dodatne listove stilova s ​​bilo kojom HTML stranicom. Na primjer, možete uključiti zaseban skup stilova u zaseban stilski list koji je dizajniran za formatiranje stranice kada se pošalje na pisač.

Kako stvoriti medijske upite u Dreamweaveru

Možete stvoriti onoliko medijskih upita koliko želite u Dreamweaveru i možete ih uključiti u jednu ili više CSS datoteka. Da biste stvorili novi medijski upit u Dreamweaveru, slijedite ove korake:

Otvorite ploču CSS Designer odabirom Window→CSS Styles.

Odaberite postojeći stilski list na ploči Izvori ili stvorite novi klikom na znak plus (+) na ploči Izvori.

Kliknite znak plus (+) na ploči @Media na ploči CSS Designer.

Otvara se dijaloški okvir Definiranje medijskih upita.

Odaberite Media s prvog padajućeg popisa i Screen s drugog padajućeg popisa.

Pomaknite pokazivač desno od svakog padajućeg popisa kako bi se pojavio znak plus, a zatim kliknite znak plus da biste dodali novo polje.

U dijaloškom okviru Media Queries pojavljuje se novo polje tako da možete odrediti orijentaciju. Ovo polje nije obavezno, ali se obično koristi ako želite stvoriti različite dizajne za pejzažne i portretne prikaze na tabletu ili pametnom telefonu. Ako ne želite stvarati dodatne izglede na temelju orijentacije, ovo polje možete ukloniti klikom na znak minus.

Napomena: Znakovi plus i minus postaju vidljivi samo kada pomaknete pokazivač preko desne strane dijaloškog okvira.

Pomaknite pokazivač desno od padajućih popisa, kliknite znak plus drugi put da dodate polje i unesite uvjet minimalne širine.

Polje Min-Width pojavljuje se u dijaloškom okviru Media Queries tako da možete odrediti minimalnu širinu koju želite koristiti za ciljanje upita. Minimalna širina je važna jer medijski upit cilja stilove na temelju minimalnog do maksimalnog raspona širine koji navedete, što je pokriveno u sljedećem koraku.

Pomaknite pokazivač udesno od padajućih popisa, kliknite znak plus treći put da dodate polje i unesite uvjet maksimalne širine.

Polje Max-Width pojavljuje se u dijaloškom okviru tako da možete odrediti maksimalnu širinu koju želite koristiti za ciljanje upita.

Kliknite OK.

Dijaloški okvir Medijski upiti se zatvara, a medijski upit se generira i dodaje u stilski list koji ste odabrali na ploči Izvori na ploči CSS Designer.

Da biste dodali dodatne medijske upite bilo kojem odabranom listu stilova, ponovite korake 3–8. Da biste dodali medijske upite u drugi stilski list, ponovite korake 2–8.

Iako medijske upite možete spremati u onoliko različitih listova stilova koliko želite, spremanje svih u jedan vanjski stilski list učinkovitije je jer se svaki list stilova mora zasebno preuzeti s poslužitelja, što zahtijeva veću propusnost. Preuzimanje jednog dugog stilskog lista s više medijskih upita malo je učinkovitije od preuzimanja više stilskih listova.