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.
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.
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.
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.
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,
Šum na slikama sastoji se od bilo kakve zrnatosti ili teksture koja se javlja. Filtri šuma, kao što je dodatak za Photoshop CS6 Add Noise, proizvode nasumične teksture i zrnatost na slici.
Saznajte kako koristiti Adobe Illustrator CC za izradu neobičnih oblika teksta. Uzmite u obzir nove tehnike za prilagodbu teksta u različitim oblicima.
Naučite kako uvesti fotografije koje se već nalaze na vašem tvrdom disku, kao i nove fotografije iz memorijskih kartica u Adobe Lightroom Classic.
Jednostavan i praktičan način za stvaranje redaka i stupaca teksta pomoću opcija vrste područja u Adobe Creative Suite (Adobe CS5) Illustrator. Ova značajka omogućuje fleksibilno oblikovanje teksta.
Otkrijte kako očistiti crtano skeniranje u Adobe Photoshop CS6 koristeći npr. Threshold alat. Uklonite pozadinske boje i artefakte za savršene crno-bijele slike.
Kada uređujete fotografije i portrete u Photoshopu CC, ispravite efekt crvenih očiju s lakoćom. Ovaj vodič pruža korak po korak upute za učinkovito korištenje alata za ispravanje crvenih očiju.
Otkrijte kako spremiti svoj Adobe Illustrator CS6 dokument u PDF format sa detaljnim koracima i savjetima. Sačuvajte svoje radove i olakšajte dijeljenje s drugima uz PDF format.
Rješavanje rezolucije slike u Photoshopu je ključno za kvalitetu ispisa. U ovom članku pružamo korisne informacije o promjeni razlučivosti slike i savjetima za optimizaciju.
Naučite kako primijeniti transparentnost na SVG grafiku u Illustratoru. Istražite kako ispisati SVG-ove s prozirnom pozadinom i primijeniti efekte transparentnosti.
Nakon što uvezete svoje slike u Adobe XD, nemate veliku kontrolu nad uređivanjem, ali možete mijenjati veličinu i rotirati slike baš kao i bilo koji drugi oblik. Također možete jednostavno zaokružiti kutove uvezene slike pomoću kutnih widgeta. Maskiranje vaših slika Definiranjem zatvorenog oblika […]
