Kako ustvariti medijske poizvedbe po meri v Dreamweaverju

Ko ustvarite strani z uporabo funkcij tekoče mreže, Dreamweaver samodejno ustvari ustrezne medijske poizvedbe za vas, lahko pa ustvarite svoje medijske poizvedbe po meri in jih uporabite za ciljanje na svoja pravila CSS.

Medijske poizvedbe so bile v spletu v uporabi že več kot desetletje za druge namene, kot je ustvarjanje alternativne zasnove strani, optimizirane za tiskanje. Medijska poizvedba je sestavljena iz vrste medija, kot sta zaslon ali tiskanje (dva najpogostejša), in izbirnega izraza, ki preverja določene značilnosti, kot sta višina ali širina. Najpogosteje uporabljene vrste medijev so

• vse: Primerno za vse naprave

• print: Zasnovan za predogled tiskanja in za prikaz, ko je stran natisnjena

• zaslon: Za vsebino, prikazano na katerem koli zaslonu

Ročni medij se skoraj nikoli več ne uporablja in ga je bilo najbolje uporabljati samo za mobilne telefone in druge naprave z majhnimi zasloni, omejeno pasovno širino in enobarvnimi zasloni, ki podpirajo samo bitne slike. Naprave iOS in večina pametnih telefonov so kategorizirane kot vrste zaslonskih medijev.

Kako uporabiti sloge v načrtih strani Dreamweaver

Tablice slogov lahko uporabite kot zunanje datoteke, tako da jih povežete ali uvozite, ali pa jih vključite kot notranje sloge v območje glave kode HTML vaše strani. Na naprave lahko celo ciljate z uporabo vgrajenih slogov – priročna možnost, če želite uporabiti določeno pravilo samo za določene naprave.

Uporabite lahko kombinacijo teh možnosti in lahko uvozite ali povežete več zunanjih slogovnih listov na isto spletno stran. Ko definirate vrsto medija s funkcijami predstavnosti, na katere želite ciljati, določite, kako naj se slogi uporabijo na strani.

Kako uporabljati medijske poizvedbe v zunanjih slogovnih listah v Dreamweaverju

Predstavnostne poizvedbe z zunanjimi slogovnimi listami lahko uporabite na dva načina. Prva možnost je povezava z eno zunanjo tabelo slogov z več nizi slogov, ločenimi s medijskimi poizvedbami. Tako Dreamweaver povezuje sloge, ko ustvarite tekočo postavitev mreže.

Druga možnost je povezovanje dveh ali več ločenih zunanjih slogovnih listov na vsako stran HTML in vključitev medijskih poizvedb v vsako slogovno tabelo. Kakor koli že, koda za CSS in HTML sta shranjena v ločenih datotekah in

oznaka jih povezuje.

Ne glede na to, ali shranite vse medijske poizvedbe in sorodne sloge v eno datoteko ali v ločene datoteke CSS, lahko povežete dodatne slogovne liste tudi s katero koli stranjo HTML. Na primer, lahko vključite ločen nabor slogov v ločeno slogovno listo, ki je zasnovana za oblikovanje strani, ko je poslana v tiskalnik.

Kako ustvariti medijske poizvedbe v Dreamweaverju

V Dreamweaverju lahko ustvarite toliko medijskih poizvedb, kot želite, in jih lahko vključite v eno datoteko CSS ali več. Če želite ustvariti novo medijsko poizvedbo v Dreamweaverju, sledite tem korakom:

Odprite ploščo CSS Designer tako, da izberete Window→CSS Styles.

Izberite obstoječo slogovno tabelo na plošči Viri ali ustvarite novo tako, da kliknete znak plus (+) na plošči Viri.

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

Odpre se pogovorno okno Definiraj medijske poizvedbe.

Na prvem spustnem seznamu izberite Media in na drugem spustnem seznamu Screen.

Premaknite kazalec desno od vsakega spustnega seznama, da se prikaže znak plus, nato pa kliknite znak plus, da dodate novo polje.

V pogovornem oknu Media Queries se prikaže novo polje, tako da lahko določite usmerjenost. To polje je neobvezno, vendar se običajno uporablja, če želite ustvariti različne zasnove za pokrajinske in pokončne poglede na tabličnem računalniku ali pametnem telefonu. Če ne želite ustvariti dodatnih postavitev na podlagi orientacije, lahko to polje odstranite s klikom na znak minus.

Opomba: znaka plus in minus postaneta vidna šele, ko premaknete kazalec na desno stran pogovornega okna.

Premaknite kazalec na desno od spustnih seznamov, še enkrat kliknite znak plus, da dodate polje, in vnesite pogoj najmanjše širine.

Polje Najmanjša širina se prikaže v pogovornem oknu Medijske poizvedbe, tako da lahko določite najmanjšo širino, ki jo želite uporabiti za ciljanje poizvedbe. Najmanjša širina je pomembna, ker medijska poizvedba cilja na sloge, ki temeljijo na razponu najmanjše do največje širine, ki ga določite, kar je zajeto v naslednjem koraku.

Premaknite kazalec na desno od spustnih seznamov, še tretjič kliknite znak plus, da dodate polje, in vnesite pogoj največje širine.

Polje Največja širina se prikaže v pogovornem oknu, tako da lahko določite največjo širino, ki jo želite uporabiti za ciljanje poizvedbe.

Kliknite V redu.

Pogovorno okno Medijske poizvedbe se zapre in medijska poizvedba je ustvarjena in dodana v slogovno tabelo, ki ste jo izbrali na plošči Viri na plošči Oblikovalec CSS.

Če želite dodati dodatne medijske poizvedbe kateri koli izbrani slogovni tabeli, ponovite korake 3–8. Če želite predstavnostne poizvedbe dodati v drugo slogovno tabelo, ponovite korake 2–8.

Čeprav lahko predstavnostne poizvedbe shranite v toliko različnih slogovnih listov, kolikor želite, je shranjevanje vseh v eni zunanji tabeli slogov učinkovitejše, ker je treba vsako slogovno tabelo prenesti s strežnika ločeno, kar zahteva več pasovne širine. Prenos ene dolge slogovne liste z več medijskimi poizvedbami je nekoliko bolj učinkovit kot prenos več slogovnih listov.