Sklandūs tinklelio išdėstymai yra tokie galingi, kad galite pakeisti „Dreamweaver“ elementų padėtį ir dydį taip, kad jie būtų išdėstyti skirtingai kiekvienam iš trijų išdėstymų, sukuriant dizainą, optimizuotą mobiliesiems, planšetiniams kompiuteriams ir stalinių kompiuterių ekranams. Norėdami pakeisti elemento plotį arba padėtį, naudokite „Dreamweaver“ vaizdo įrankius.
„Dreamweaver“ nustato stilius taip, kad jie kaskaduotųsi per kiekvieną iš trijų išdėstymų. Tai reiškia, kad pirmiausia turėtumėte gauti tokį mobilųjį dizainą, kokio norite. Tada pereikite prie planšetinio kompiuterio išdėstymo ir pakeiskite tik tuos elementus, kurie planšetiniame kompiuteryje būtų rodomi kitaip. Galiausiai peržiūrėkite darbalaukio išdėstymą. Vėlgi, pakeiskite tik tuos elementus, kuriuos norite rodyti kitaip.
Norėdami redaguoti mobiliojo telefono išdėstymą, vadovaukitės šiomis instrukcijomis.
Darbo srities apačioje pasirinkite parinktį Mobilusis dydis.
Darbo srities sritis pasikeičia, kad puslapis būtų rodomas peržiūroje mobiliesiems, suformatuotas pagal atitinkamą stilių rinkinį.
Pastaba: trys mažos piktogramos apatiniame dešiniajame darbo srities kampe suteikia prieigą prie mobiliojo, planšetinio kompiuterio ir darbalaukio peržiūrų. Perjungdami iš vieno į kitą, pakeičiate ne tik rodymo srities dydį, bet ir atitinkamą jūsų puslapyje taikomų stilių rinkinį.
Pridėkite teksto ir vaizdų prie sklandaus tinklelio išdėstymo elementų taip, kaip pridėtumėte turinį į bet kurį kitą Dreamweaver puslapį.
Galite kopijuoti ir įklijuoti tekstą, taip pat taikyti HTML žymas ir CSS formatavimą.
Pasirinkite elementą dizaino srityje.
Atitinkamas CSS stilius rodomas skydelyje Selectors, kur galite jį redaguoti.
Kurkite, redaguokite ir pritaikykite stilius tekstui ir vaizdams, kaip tai darytumėte bet kuriame kitame „Dreamweaver“ puslapio dizaine.
Stiliai, kuriuos norite taikyti visiems trims maketams, turėtų būti sukurti, kai pasirenkamas išdėstymas mobiliesiems, nes šie stiliai bus taikomi visiems trims dizainams, nebent juos pakeis kitas planšetinio kompiuterio ar darbalaukio maketuose sukurtas stilius.
Gavę mobiliesiems skirtą išdėstymą taip, kaip norite, pereikite prie planšetinio kompiuterio dydžio išdėstymo ir redaguokite tam išdėstymui taikomus stilius.
Norėdami redaguoti planšetinio kompiuterio išdėstymą, vadovaukitės šiomis instrukcijomis.
Apatiniame dešiniajame darbo srities kampe pasirinkite parinktį Planšetinio kompiuterio dydis.
Darbo srities sritis pasikeičia, kad būtų rodomas puslapis planšetinio kompiuterio peržiūroje, suformatuotas pagal atitinkamą stilių rinkinį.
Pasirinkite elementą, kurį norite pakeisti į stulpelį, ir dešinėje pusėje esančiomis rankenėlėmis vilkite stulpelį iki norimo pločio.
„Dreamweaver“ pateikia vizualinio redagavimo įrankių rinkinį, kuris palengvina sklandaus tinklelio elementų dydžio ir padėties reguliavimą.
Jei vilkite bet kurio sklandaus tinklelio elemento rankenėlę iš kairės į dešinę, pridėsite paraštės vietos, dėl kurios elementas liktų dešinėje išdėstymo pusėje. Jei vilkite rankenėlę iš dešinės į kairę, pakeisite elemento dydį.
Pasirinkite pakeisto dydžio elementą, kurio vietą norite pakeisti, tada spustelėkite rodyklę Perkelti aukštyn eilute.
Elementas juda aukštyn ir išsilygiuoja šalia virš jo esančio elemento.
Norėdami perkelti elementą žemyn, spustelėkite rodyklę Pradeda naują eilutę.
Pastaba: spustelėkite kiekvieną iš keturių piktogramų, norėdami paslėpti elementą, perkelti jį aukštyn arba žemyn, kopijuoti arba ištrinti.
Gavę mobiliųjų ir planšetinių kompiuterių išdėstymus taip, kaip norite, pereikite prie darbalaukio dydžio išdėstymo ir redaguokite stilius, taikomus didžiausiam iš trijų išdėstymų.
Norėdami redaguoti darbalaukio išdėstymą, vadovaukitės šiomis instrukcijomis.
Apatiniame dešiniajame darbo srities kampe pasirinkite parinktį Darbalaukio dydis.
Darbo srities sritis pasikeičia, kad puslapis būtų rodomas darbalaukio peržiūroje, suformatuotas pagal atitinkamą stilių rinkinį.
Pasirinkite Keisti rodyklę bet kurių dviejų elementų viduryje, kad pakeistumėte dviejų elementų pozicijas.
Straipsnio 1 ir 2 elementus galima sukeisti tiesiog spustelėjus rodyklę Keisti juos.
Suformatuokite tekstą, vaizdus ir kitus elementus, kaip pageidaujate darbalaukio dizainui.
Galimos visos kitos vizualinio formatavimo parinktys, nurodytos planšetinio kompiuterio išdėstyme.
Pasirinkite Failas → Išsaugoti viską, kad išsaugotumėte visus sklandaus tinklelio maketo failus.
Kai redaguojate sklandų tinklelio išdėstymą, keičiate HTML failą ir išorinį stiliaus lapą. Naudodami parinktį Išsaugoti viską užtikrinate, kad išsaugojote visus reikalingus failus prieš peržiūrėdami juos arba paskelbdami svetainę žiniatinklio serveryje.
Gera praktika sklandžius tinklelio išdėstymus kurti tokia tvarka: pirmiausia versija mobiliesiems, tada planšetinio kompiuterio versija ir galiausiai darbalaukio versija. Tačiau tobulindami dizainą galite perjungti šiuos tris išdėstymus.
Nepamirškite kelių bendrųjų taisyklių ir geriausios praktikos:
Sklandūs tinklelio išdėstymai kuriami naudojant medijos užklausas, kurios veikia kaip skirtuvai tarp kiekvieno stilių rinkinio, kuris formatuoja mobiliojo telefono, planšetinio kompiuterio ir darbalaukio maketus.
Kai redaguojate stilius, turite pasirūpinti, kad redaguojate stilius, kurie atitinka išdėstymą, su kuriuo norite dirbti.
Jei peržiūrėsite atitinkamus stilius, kurie automatiškai sukuriami kodo rodinyje, pamatysite, kad pločiai ir kiti dydžiai nurodyti ketvirtosios dešimtosios tikslumu, pavyzdžiui, plotis: 48,2758%. Jei pakeisite šiuos skaičius kodo rodinyje, „Dreamweaver“ jų nebekoreguos automatiškai.
Kai kuriate stilius, kuriuos norite taikyti visiems trims išdėstymams, pirmiausia CSS Designer skydelio @Media skydelyje pasirinkite Bet kokia laikmena,
Pagrindinės formos, tokios kaip kvadratai ir apskritimai, yra būtinos Adobe Illustrator. Sužinokite, kaip jas kurti efektyviau ir optimizuokite savo dizaino įgūdžius!
Sužinokite, kaip efektyviai sujungti sluoksnius „Photoshop CS6“, kad optimizuotumėte failo dydį ir pagerintumėte darbo efektyvumą.
Sužinokite apie pagrindinius „Illustrator CC“ formos įrankius, tokius kaip stačiakampiai, elipsės, daugiakampiai ir žvaigždės, ir kaip juos efektyviai naudoti.
Sužinokite, kaip „Illustrator“ pritaikyti skaidrumą SVG grafikai. Sužinokite, kaip išvesti SVG su skaidriu fonu ir pritaikyti skaidrumo efektus.
Importavę vaizdus į „Adobe XD“, neturėsite daug redagavimo valdymo galimybių, tačiau galite keisti vaizdų dydį ir pasukti juos taip, kaip darytumėte bet kurią kitą formą. Taip pat galite lengvai apvalinti importuoto vaizdo kampus naudodami kampinius valdiklius. Vaizdų užmaskavimas Nustatydami uždarą formą […]
Kai turite tekstą Adobe XD projekte, galite pradėti keisti teksto ypatybes. Šios ypatybės apima šriftų šeimą, šrifto dydį, šrifto svorį, lygiavimą, tarpą tarp simbolių (įbrėžimas ir sekimas), eilučių tarpus (pirmaujantis), užpildymą, kraštinę (brūkšnį), šešėlį (metamas šešėlis) ir fono suliejimą. Taigi pažiūrėkime, kaip šios savybės taikomos. Apie skaitomumą ir šriftą […]
Kaip ir „Adobe Illustrator“, „Photoshop“ piešinių lentos suteikia galimybę viename dokumente sukurti atskirus puslapius arba ekranus. Tai gali būti ypač naudinga, jei kuriate ekranus mobiliajai programai ar nedidelei brošiūrai. Galite galvoti apie piešinių lentą kaip apie specialų sluoksnių grupės tipą, sukurtą naudojant skydelį Sluoksniai. Jos […]
Daugelis įrankių, kuriuos rasite skydelyje „InDesign Tools“, naudojami linijoms ir formoms piešti puslapyje, todėl galite įvairiais būdais kurti įdomius savo leidinių brėžinius. „InDesign“ viduje galite kurti bet ką – nuo pagrindinių formų iki sudėtingų brėžinių, o ne naudoti piešimo programą, pvz., […]
Teksto įvyniojimas naudojant Adobe Illustrator CC nėra tas pats, kas įvynioti dovaną – tai lengviau! Teksto apvyniojimas verčia tekstą apvynioti aplink grafiką, kaip parodyta šiame paveikslėlyje. Ši funkcija bet kuriam kūriniui gali suteikti šiek tiek kūrybiškumo. Grafika verčia tekstą apvynioti aplink jį. Pirmiausia sukurkite […]
Kuriant „Adobe Illustrator CC“ dažnai reikia tikslaus dydžio (pavyzdžiui, 2 x 3 colių) formos. Sukūrus formą, geriausias būdas pakeisti jos dydį iki tikslių išmatavimų yra naudoti transformavimo skydelį, parodytą šiame paveikslėlyje. Pasirinkite objektą ir pasirinkite Langas → Transformuoti į […]
