Kaip išdėstyti elementus „Dreamweaver“, kad būtų sukurti trys išdėstymai vienoje skysčio tinklelyje

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.

Kaip redaguoti mobiliojo telefono išdėstymą „Dreamweaver“.

„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.

Kaip redaguoti planšetinio kompiuterio išdėstymą „Dreamweaver“.

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.

Kaip redaguoti darbalaukio išdėstymą „Dreamweaver“.

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.

Kaip perjungti maketus „Dreamweaver“.

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,