Si të poziciononi elementët në Dreamweaver për të krijuar tre paraqitje në një rrjet Fluid

Ajo që i bën paraqitjet e rrjetit fluide kaq të fuqishme është se ju mund të ndryshoni pozicionin dhe madhësinë e elementeve në Dreamweaver në mënyrë që ato të renditen ndryshe për secilën nga tre paraqitjet, duke krijuar dizajne që janë të optimizuara për ekranet e celularëve, tabletëve dhe desktopit. Për të ndryshuar gjerësinë ose pozicionin e një elementi, përdorni mjetet vizuale të Dreamweaver.

Si të modifikoni paraqitjen e celularit në Dreamweaver

Dreamweaver vendos stilet në mënyrë të tillë që ato të kalojnë nëpër secilën nga tre paraqitjet. Kjo do të thotë që fillimisht duhet ta merrni dizajnin e celularit ashtu siç dëshironi. Më pas kaloni në paraqitjen e tabletit dhe ndryshoni vetëm elementët që dëshironi të shfaqen ndryshe në tablet. Më në fund, shikoni paraqitjen e desktopit. Përsëri, ndryshoni vetëm elementët që dëshironi të shfaqen ndryshe.

Për të modifikuar paraqitjen e celularit, ndiqni këto udhëzime.

Zgjidhni opsionin Mobile Size në fund të hapësirës së punës.

Zona e hapësirës së punës ndryshon për të shfaqur faqen në pamjen paraprake të celularit, të formatuar me grupin përkatës të stileve.

Shënim: Tre ikonat e vogla në fund djathtas të hapësirës së punës ofrojnë akses në pamjet paraprake të celularit, tabletit dhe desktopit. Kur kaloni nga njëri në tjetrin, ju ndryshoni jo vetëm madhësinë e zonës së ekranit, por edhe grupin përkatës të stileve të aplikuara në faqen tuaj.

Shtoni tekst dhe imazhe te elementët në paraqitjen e rrjetës suaj të lëngshme, ashtu siç do të shtonit përmbajtje në çdo faqe tjetër në Dreamweaver.

Mund të kopjoni dhe ngjitni tekstin, si dhe të aplikoni etiketa HTML dhe formatimin CSS.

Zgjidhni një element në zonën e projektimit.

Stili përkatës CSS shfaqet në panelin e përzgjedhësve, ku mund ta modifikoni.

Krijoni, modifikoni dhe aplikoni stile në tekst dhe imazhe siç do të bëni në çdo dizajn tjetër faqesh në Dreamweaver.

Stilet që dëshironi të aplikoni në të tre paraqitjet duhet të krijohen kur zgjidhet faqosja e celularit, sepse këto stile do të zbatohen për të tre dizajnet, përveç nëse anashkalohen nga një stil tjetër i krijuar në paraqitjet e tabletit ose desktopit.

Si të modifikoni paraqitjen e tabletit në Dreamweaver

Pasi të keni marrë paraqitjen e celularit ashtu siç dëshironi, kaloni në paraqitjen e madhësisë së tabletit dhe modifikoni stilet që zbatohen për atë paraqitje.

Për të modifikuar paraqitjen e tabletit, ndiqni këto udhëzime.

Zgjidhni opsionin e madhësisë së tabletit, në fund të djathtë të hapësirës së punës.

Zona e hapësirës së punës ndryshon për të shfaqur faqen në pamjen paraprake të tabletit, të formatuar me grupin përkatës të stileve.

Zgjidhni një element që dëshironi të ndryshoni në një kolonë dhe përdorni dorezat në anën e djathtë për të tërhequr kolonën në gjerësinë e dëshiruar.

Dreamweaver ofron një koleksion të mjeteve të redaktimit vizual që e bëjnë më të lehtë rregullimin e madhësisë dhe pozicionimit të elementeve të rrjetës fluide.

Nëse tërhiqni dorezën e çdo elementi të rrjetës së lëngshme nga e majta në të djathtë, ju shtoni hapësirën e margjinës që e detyron elementin të qëndrojë në të djathtë të paraqitjes. Nëse tërhiqni një dorezë nga e djathta në të majtë, ju ndryshoni madhësinë e elementit.

Zgjidhni një element të ndryshuar përmasat që dëshironi të ripoziciononi dhe më pas klikoni shigjetën Lëviz lart një rresht.

Elementi lëviz lart dhe rreshtohet pranë elementit mbi të.

Për të zhvendosur një element poshtë, klikoni shigjetën Starts New Row.

Shënim: Klikoni secilën nga katër ikonat për të fshehur një element, për ta zhvendosur lart ose poshtë, për ta dublikuar ose për ta fshirë.

Si të modifikoni paraqitjen e desktopit në Dreamweaver

Pasi t'i merrni paraqitjet e celularit dhe tabletit ashtu siç dëshironi, kaloni në paraqitjen e madhësisë së desktopit dhe modifikoni stilet që zbatohen për më të madhin nga tre paraqitjet.

Për të modifikuar paraqitjen e desktopit, ndiqni këto udhëzime.

Zgjidhni opsionin Desktop Size në fund të djathtë të hapësirës së punës.

Zona e hapësirës së punës ndryshon për të shfaqur faqen në pamjen paraprake të desktopit, të formatuar me grupin përkatës të stileve.

Zgjidhni një shigjetë Swap në mes të çdo dy elementi për të ndërruar pozicionet e dy elementeve.

Elementet Neni 1 dhe Neni 2 mund të ndërrohen thjesht duke klikuar shigjetën Swap midis tyre.

Formatoni tekstin, imazhet dhe elementët e tjerë sipas dëshirës për dizajnin e desktopit.

Të gjitha opsionet e tjera të formatimit vizual të mbuluara në paraqitjen e tabletit janë të disponueshme.

Zgjidhni Skedar → Ruaj të gjitha për të ruajtur të gjithë skedarët në paraqitjen e rrjetit të lëngshëm.

Kur jeni duke redaktuar një plan urbanistik të rrjetës fluide, po bëni ndryshime në skedarin HTML si dhe në një fletë stili të jashtëm. Përdorimi i opsionit "Ruaj të gjitha" siguron që të keni ruajtur të gjithë skedarët e nevojshëm përpara se t'i shikoni paraprakisht ose të publikoni faqen tuaj në një server në internet.

Si të kaloni midis paraqitjeve në Dreamweaver

Është praktikë e mirë të dizajnoni paraqitjet e rrjetit të lëngjeve në këtë renditje: fillimisht versioni celular, më pas versioni i tabletit dhe në fund versioni i desktopit. Sidoqoftë, mund të kaloni midis këtyre tre paraqitjeve ndërsa përmirësoni modelet tuaja.

Mbani parasysh rregullat e mëposhtme të përgjithshme dhe praktikat më të mira:

• Strukturat e rrjetit të lëngshëm krijohen duke përdorur pyetje mediatike që veprojnë si ndarës midis secilit prej grupeve të stileve që formatojnë paraqitjet e celularit, tabletit dhe desktopit.

• Kur modifikoni stilet, duhet të kujdeseni që po redaktoni stilet që korrespondojnë me paraqitjen me të cilën dëshironi të punoni.

• Nëse shikoni stilet përkatëse që krijohen automatikisht në pamjen e kodit, do të shihni se gjerësia dhe madhësitë e tjera janë specifikuar në pikën e katërt dhjetore, për shembull, gjerësia: 48,2758%. Nëse i ndryshoni këta numra në pamjen e kodit, Dreamweaver nuk do t'i rregullojë më automatikisht për ju.

• Kur krijoni stile që dëshironi të aplikoni në të tre paraqitjet, fillimisht zgjidhni Çdo media nga paneli @Media në panelin "CSS Designer",