Kako pozicionirati elemente u Dreamweaveru za stvaranje tri rasporeda u jednoj Fluid Grid

Ono što rasporede fluidne mreže čini tako moćnim je to što možete promijeniti položaj i veličinu elemenata u Dreamweaveru tako da budu različito raspoređeni za svaki od tri izgleda, stvarajući dizajne koji su optimizirani za zaslone mobilnih uređaja, tableta i stolnih računala. Za promjenu širine ili položaja elementa koristite vizualne alate Dreamweavera.

Kako urediti mobilni izgled u Dreamweaveru

Dreamweaver postavlja stilove na takav način da kaskadiraju kroz svaki od tri izgleda. To znači da biste prvo trebali dobiti mobilni dizajn kakav želite. Zatim prijeđite na izgled tableta i promijenite samo elemente za koje želite da se na tabletu pojavljuju drugačije. Na kraju pogledajte izgled radne površine. Opet promijenite samo elemente za koje želite da se prikazuju drugačije.

Za uređivanje mobilnog izgleda slijedite ove upute.

Odaberite opciju Mobile Size na dnu radnog prostora.

Područje radnog prostora mijenja se tako da prikazuje stranicu u mobilnom pregledu, formatiranu odgovarajućim skupom stilova.

Napomena: tri male ikone u donjem desnom kutu radnog prostora omogućuju pristup pregledima na mobilnom uređaju, tabletu i desktopu. Kada prelazite s jednog na drugi, mijenjate ne samo veličinu područja prikaza nego i odgovarajući skup stilova primijenjenih na vašu stranicu.

Dodajte tekst i slike elementima u svom tekućem rasporedu mreže baš kao što biste dodali sadržaj na bilo koju drugu stranicu u Dreamweaveru.

Možete kopirati i zalijepiti tekst, kao i primijeniti HTML oznake i CSS formatiranje.

Odaberite element u području dizajna.

Odgovarajući CSS stil prikazan je na ploči Selectors, gdje ga možete uređivati.

Izradite, uređujte i primijenite stilove na tekst i slike kao što biste to učinili u bilo kojem drugom dizajnu stranica u Dreamweaveru.

Stilovi koje želite primijeniti na sva tri izgleda trebali bi se izraditi kada se odabere mobilni izgled jer će se ti stilovi primijeniti na sva tri dizajna osim ako ih ne nadjača drugi stil kreiran u izgledima za tablet ili stolno računalo.

Kako urediti izgled tableta u Dreamweaveru

Nakon što dobijete izgled za mobilni uređaj kakav želite, prijeđite na izgled veličine tableta i uredite stilove koji se odnose na taj izgled.

Da biste uredili izgled tableta, slijedite ove upute.

Odaberite opciju Tablet Size, u donjem desnom kutu radnog prostora.

Područje radnog prostora mijenja se tako da prikazuje stranicu u pregledu tableta, formatiranu odgovarajućim skupom stilova.

Odaberite element koji želite promijeniti u stupac i upotrijebite ručke s desne strane da povucite stupac do željene širine.

Dreamweaver nudi kolekciju alata za vizualno uređivanje koji olakšavaju podešavanje veličine i položaja fluidnih elemenata mreže.

Ako povučete ručicu bilo kojeg elementa tekuće mreže s lijeva na desno, dodajete prostor na margini koji prisiljava element da ostane s desne strane izgleda. Ako povučete ručicu s desna na lijevo, mijenjate veličinu elementa.

Odaberite element promijenjene veličine koji želite premjestiti, a zatim kliknite strelicu Pomakni redak gore.

Element se pomiče prema gore i poravnava se uz element iznad njega.

Da biste element pomaknuli prema dolje, kliknite strelicu Započinje novi red.

Napomena: Kliknite svaku od četiri ikone da biste sakrili element, pomaknuli ga gore ili dolje, duplicirali ili izbrisali.

Kako urediti izgled radne površine u Dreamweaveru

Nakon što dobijete izglede za mobitele i tablete kakve želite, prijeđite na izgled veličine radne površine i uredite stilove koji se primjenjuju na najveći od tri izgleda.

Da biste uredili izgled radne površine, slijedite ove upute.

Odaberite opciju Veličina radne površine u donjem desnom kutu radnog prostora.

Područje radnog prostora mijenja se za prikaz stranice u pregledu radne površine, formatiran odgovarajućim skupom stilova.

Odaberite Zamijeni strelicu u sredini bilo koja dva elementa za promjenu položaja dvaju elemenata.

Elementi Article1 i Article2 mogu se zamijeniti jednostavnim klikom na strelicu Zamijeni između njih.

Oblikujte tekst, slike i druge elemente po želji za dizajn radne površine.

Dostupne su sve ostale opcije vizualnog oblikovanja obuhvaćene izgledom tableta.

Odaberite Datoteka→Spremi sve da biste spremili sve datoteke u rasporedu tekuće mreže.

Kada uređujete izgled tekuće mreže, unosite promjene u HTML datoteku, kao i na vanjski stilski list. Korištenje opcije Spremi sve osigurava da ste spremili sve potrebne datoteke prije nego što ih pregledate ili objavite svoju stranicu na web poslužitelju.

Kako se prebacivati ​​između izgleda u Dreamweaveru

Dobra je praksa dizajnirati fluidne rasporede mreže ovim redoslijedom: prvo mobilnu verziju, zatim verziju za tablete i na kraju verziju za stolna računala. Međutim, možete se prebacivati ​​između ova tri izgleda dok usavršavate svoje dizajne.

Imajte na umu nekoliko sljedećih općih pravila i najboljih praksi:

• Rasporedi fluidne mreže kreiraju se pomoću medijskih upita koji djeluju kao razdjelnici između svakog od skupova stilova koji formatiraju izglede za mobilne uređaje, tablete i stolna računala.

• Kada uređujete stilove, morate paziti da uređujete stilove koji odgovaraju izgledu na kojem želite raditi.

• Ako pogledate odgovarajuće stilove koji se automatski kreiraju u prikazu koda, vidjet ćete da su širine i druge veličine navedene do četvrte decimalne točke, na primjer, širina: 48,2758%. Ako promijenite ove brojeve u prikazu koda, Dreamweaver ih više neće automatski prilagođavati umjesto vas.

• Kada kreirate stilove koje želite primijeniti na sva tri izgleda, prvo odaberite Bilo koji medij s ploče @Media na ploči CSS Designer,