Kaip sukurti pasirinktines medijos užklausas „Dreamweaver“.

Kai kuriate puslapius naudodami sklandaus tinklelio išdėstymo funkcijas, „Dreamweaver“ automatiškai sukuria atitinkamas medijos užklausas už jus, tačiau galite sukurti savo pasirinktines medijos užklausas ir naudoti jas savo CSS taisyklėms taikyti.

Žiniasklaidos užklausos žiniatinklyje buvo naudojamos daugiau nei dešimtmetį kitiems tikslams, pavyzdžiui, kuriant alternatyvų puslapio dizainą, optimizuotą spausdinti. Medijos užklausą sudaro laikmenos tipas, pvz., ekranas arba spausdinimas (du dažniausiai naudojami), ir pasirenkama išraiška, tikrinanti, ar nėra tam tikrų savybių, pvz., aukščio arba pločio. Dažniausiai naudojami medijos tipai

• viskas: tinka visiems įrenginiams

• spausdinimas: sukurtas spaudinio peržiūrai ir rodymui, kai puslapis spausdinamas

• ekranas: turiniui, rodomam bet kuriame ekrane

Rankinės laikmenos tipas beveik niekada nebenaudojamas ir buvo geriausiai naudojamas tik mobiliesiems telefonams ir kitiems įrenginiams su mažais ekranais, ribotu pralaidumu ir vienspalviais ekranais, kurie palaiko tik bitų grafiką. „iOS“ įrenginiai ir dauguma išmaniųjų telefonų priskiriami ekrano medijos tipams.

Kaip pritaikyti stilius „Dreamweaver“ puslapių dizainui

Stilių lapus galite taikyti kaip išorinius failus, susiedami juos arba importuodami juos, arba galite įtraukti juos kaip vidinius stilius į savo puslapio HTML kodo antraštės sritį. Jūs netgi galite taikyti įrenginius naudodami įterptuosius stilius – patogi parinktis, jei norite taikyti konkrečią taisyklę tik tam tikriems įrenginiams.

Galite naudoti šių parinkčių derinį ir importuoti kelis išorinius stiliaus lapus arba susieti juos su tuo pačiu tinklalapiu. Apibrėžę medijos tipą su medijos funkcijomis, pagal kurias norite taikyti, nurodote, kaip stiliai turėtų būti taikomi puslapiui.

Kaip naudoti medijos užklausas išoriniuose Dreamweaver stiliaus lapuose

Medijos užklausas su išoriniais stiliaus lapais galite naudoti dviem būdais. Pirmoji parinktis yra susieti su vienu išoriniu stilių lapu su keliais stilių rinkiniais, atskirtais medijos užklausomis. Taip „Dreamweaver“ susieja stilius, kai kuriate sklandų tinklelio išdėstymą.

Antroji galimybė yra susieti du ar daugiau atskirų išorinių stiliaus lapų su kiekvienu HTML puslapiu ir įtraukti medijos užklausas į kiekvieną stiliaus lapą. Bet kuriuo atveju CSS ir HTML kodas išsaugomas atskiruose failuose ir

žyma juos jungia.

Nesvarbu, ar visas medijos užklausas ir susijusius stilius įrašote viename faile, ar atskiruose CSS failuose, papildomus stilių lapus taip pat galite susieti su bet kuriuo HTML puslapiu. Pavyzdžiui, galite įtraukti atskirą stilių rinkinį į atskirą stiliaus lapą, skirtą formatuoti puslapį, kai jis siunčiamas į spausdintuvą.

Kaip sukurti medijos užklausas „Dreamweaver“.

„Dreamweaver“ galite sukurti tiek medijos užklausų, kiek norite, ir galite jas įtraukti į vieną arba daug CSS failų. Norėdami sukurti naują medijos užklausą Dreamweaver, atlikite šiuos veiksmus:

Atidarykite CSS Designer skydelį pasirinkdami Langas → CSS stiliai.

Skydelyje Šaltiniai pasirinkite esamą stiliaus lapą arba sukurkite naują spustelėdami pliuso ženklą (+) skydelyje Šaltiniai.

Spustelėkite pliuso ženklą (+) skydelyje @Media, esančiame CSS Designer skydelyje.

Atsidaro dialogo langas Define Media Queries.

Pirmame išskleidžiamajame sąraše pasirinkite Media ir antrame išskleidžiamajame sąraše Ekranas.

Perkelkite žymeklį į dešinę nuo kiekvieno išskleidžiamojo sąrašo, kad būtų rodomas pliuso ženklas, tada spustelėkite pliuso ženklą, kad pridėtumėte naują lauką.

Dialogo lange Media Queries pasirodo naujas laukas, kuriame galite nurodyti orientaciją. Šis laukas yra neprivalomas, bet dažniausiai naudojamas, jei planšetiniame kompiuteryje ar išmaniajame telefone norite sukurti skirtingus kraštovaizdžio ir portreto vaizdų dizainus. Jei nenorite kurti papildomų maketų pagal orientaciją, galite pašalinti šį lauką spustelėdami minuso ženklą.

Pastaba: Pliuso ir minuso ženklai tampa matomi tik užvedus žymeklį ant dešinės dialogo lango pusės.

Perkelkite žymeklį į dešinę iš išskleidžiamųjų sąrašų, antrą kartą spustelėkite pliuso ženklą, kad pridėtumėte lauką, ir įveskite minimalaus pločio sąlygą.

Laukas Minimalus plotis rodomas dialogo lange Medijos užklausos, kad galėtumėte nurodyti mažiausią plotį, kurį norite naudoti taikydami užklausą. Mažiausias plotis yra svarbus, nes medijos užklausa taikoma pagal stilius pagal jūsų nurodytą minimalų ir maksimalų pločio diapazoną, kuris bus aptartas kitame veiksme.

Perkelkite žymeklį į dešinę iš išskleidžiamųjų sąrašų, trečią kartą spustelėkite pliuso ženklą, kad pridėtumėte lauką, ir įveskite maksimalaus pločio sąlygą.

Dialogo lange rodomas laukas Max-Width, kad galėtumėte nurodyti maksimalų plotį, pagal kurį norite taikyti užklausą.

Spustelėkite Gerai.

Dialogo langas Medijos užklausos uždaromas, medijos užklausa sugeneruojama ir pridedama prie stiliaus lapo, kurį pasirinkote skydelyje „Šaltiniai“, esančiame skydelyje „CSS Designer“.

Norėdami pridėti papildomų medijos užklausų prie bet kurio pasirinkto stiliaus lapo, pakartokite 3–8 veiksmus. Norėdami įtraukti medijos užklausas į kitą stiliaus lapą, pakartokite 2–8 veiksmus.

Nors medijos užklausas galite įrašyti tiek skirtingų stilių lapų, kiek norite, jas visas išsaugoti viename išoriniame stilių lape yra efektyviau, nes kiekvienas stiliaus lapas turi būti atsisiunčiamas iš serverio atskirai, todėl reikia daugiau pralaidumo. Vieno ilgo stiliaus lapo atsisiuntimas su keliomis medijos užklausomis yra šiek tiek efektyvesnis nei kelių stiliaus lapų atsisiuntimas.