Kako postaviti elemente v Dreamweaverju, da ustvarite tri postavitve v eni tekoči mreži

Zaradi tega so postavitve tekoče mreže tako močne, da lahko spremenite položaj in velikost elementov v Dreamweaverju, tako da so razvrščeni za vsako od treh postavitev različno, s čimer ustvarite zasnove, ki so optimizirani za mobilne, tablične in namizne zaslone. Če želite spremeniti širino ali položaj elementa, uporabite vizualna orodja Dreamweaverja.

Kako urediti mobilno postavitev v Dreamweaverju

Dreamweaver nastavi sloge tako, da se prelivajo skozi vsako od treh postavitev. To pomeni, da morate najprej dobiti mobilno zasnovo, kot jo želite. Nato pojdite na postavitev tablice in spremenite samo elemente, za katere želite, da so na tabličnem računalniku prikazani drugače. Na koncu si oglejte postavitev namizja. Ponovno spremenite le elemente, za katere želite, da so prikazani drugače.

Če želite urediti mobilno postavitev, sledite tem navodilom.

Izberite možnost Mobile Size na dnu delovnega prostora.

Območje delovnega prostora se spremeni tako, da prikaže stran v predogledu za mobilne naprave, oblikovano z ustreznim naborom slogov.

Opomba: tri majhne ikone v spodnjem desnem kotu delovnega prostora omogočajo dostop do predogledov mobilnih telefonov, tablic in namizja. Ko preklopite z enega na drugega, spremenite ne le velikost območja prikaza, temveč tudi ustrezen nabor slogov, uporabljenih na vaši strani.

Dodajte besedilo in slike elementom v vaši tekoči postavitvi mreže, tako kot bi dodali vsebino kateri koli drugi strani v Dreamweaverju.

Besedilo lahko kopirate in prilepite ter uporabite oznake HTML in oblikovanje CSS.

Izberite element v območju oblikovanja.

Ustrezen slog CSS je prikazan na plošči Izbirniki, kjer ga lahko urejate.

Ustvarite, uredite in uporabite sloge za besedilo in slike, kot bi to storili pri kateri koli drugi zasnovi strani v Dreamweaverju.

Sloge, ki jih želite uporabiti za vse tri postavitve, je treba ustvariti, ko je izbrana mobilna postavitev, ker bodo ti slogi veljali za vse tri modele, razen če jih preglasi drug slog, ustvarjen v postavitvah tablice ali namizja.

Kako urediti postavitev tablice v Dreamweaverju

Ko dobite mobilno postavitev tako, kot želite, pojdite na postavitev velikosti tabličnega računalnika in uredite sloge, ki veljajo za to postavitev.

Če želite urediti postavitev tabličnega računalnika, sledite tem navodilom.

Izberite možnost Velikost tablice v spodnjem desnem kotu delovnega prostora.

Območje delovnega prostora se spremeni tako, da prikaže stran v predogledu tabličnega računalnika, oblikovano z ustreznim naborom slogov.

Izberite element, ki ga želite spremeniti v stolpec, in z ročici na desni strani povlecite stolpec na želeno širino.

Dreamweaver ponuja zbirko orodij za vizualno urejanje, ki olajšajo prilagajanje velikosti in položaja tekočih elementov mreže.

Če povlečete ročico katerega koli elementa tekoče mreže od leve proti desni, dodate prostor na robu, ki prisili element, da ostane na desni strani postavitve. Če povlečete ročico od desne proti levi, spremenite velikost elementa.

Izberite element s spremenjeno velikostjo, ki ga želite prestaviti, in nato kliknite puščico Premakni navzgor po vrstici.

Element se premakne navzgor in se poravna poleg elementa nad njim.

Če želite element premakniti navzdol, kliknite puščico Začne novo vrstico.

Opomba: Kliknite vsako od štirih ikon, da skrijete element, ga premaknete navzgor ali navzdol, podvojite ali izbrišete.

Kako urediti postavitev namizja v Dreamweaverju

Ko dobite postavitve mobilnih in tabličnih računalnikov tako, kot jih želite, pojdite na postavitev velikosti namizja in uredite sloge, ki veljajo za največjo od treh postavitev.

Če želite urediti postavitev namizja, sledite tem navodilom.

V spodnjem desnem kotu delovnega prostora izberite možnost Velikost namizja.

Območje delovnega prostora se spremeni tako, da prikaže stran v predogledu namizja, oblikovano z ustreznim naborom slogov.

Izberite puščico Zamenjaj na sredini poljubnih dveh elementov, da zamenjate položaje obeh elementov.

Elementa Article1 in Article2 lahko zamenjate tako, da preprosto kliknete puščico Zamenjaj med njima.

Oblikujte besedilo, slike in druge elemente po želji za oblikovanje namizja.

Na voljo so vse druge možnosti vizualnega oblikovanja, ki so zajete v postavitvi tabličnega računalnika.

Izberite Datoteka→ Shrani vse, da shranite vse datoteke v postavitvi tekoče mreže.

Ko urejate tekočo postavitev mreže, spreminjate datoteko HTML in zunanji slogovni list. Uporaba možnosti Shrani vse zagotavlja, da ste shranili vse potrebne datoteke, preden jih predogledate ali objavite spletno mesto na spletnem strežniku.

Kako preklapljati med postavitvami v Dreamweaverju

Dobra praksa je oblikovati tekoče postavitve mreže v tem vrstnem redu: najprej mobilna različica, nato različica za tablične računalnike in končno namizna različica. Lahko pa preklapljate med temi tremi postavitvami, ko izboljšujete svoje modele.

Upoštevajte naslednjih nekaj splošnih pravil in najboljših praks:

• Postavitve tekoče mreže so ustvarjene z uporabo medijskih poizvedb, ki delujejo kot delilniki med vsakim od naborov slogov, ki oblikujejo postavitve mobilnih, tabličnih in namiznih računalnikov.

• Ko urejate sloge, morate paziti, da urejate sloge, ki ustrezajo postavitvi, na kateri želite delati.

• Če si ogledate ustrezne sloge, ki so samodejno ustvarjeni v pogledu kode, boste videli, da so širine in druge velikosti določene na četrto decimalno vejico, na primer širina: 48,2758%. Če spremenite te številke v pogledu kode, jih Dreamweaver ne bo več samodejno prilagajal namesto vas.

• Ko ustvarite sloge, ki jih želite uporabiti za vse tri postavitve, najprej izberite Any Media na plošči @Media na plošči CSS Designer,