Kako poravnati elemente s plovci v Dreamweaverju

Oblikovalci pogosto poravnajo sliko, a

oznako ali drug element levo ali desno od spletne strani v Dreamweaverju in nato ovijte poljubno besedilo ali drugo vsebino okoli tega elementa. Slika je poravnana na desni strani stolpca, tako da se besedilo zavije poleg nje na levi strani. V naslednjih korakih boste izvedeli, kako ustvariti sloge, kot je ta.

Zasluge: Slika iz istockphoto.com

CSS ponuja številne prednosti, ko gre za poravnavo elementov, kot je ta, vendar način, kako nastavite te sloge, ni tako očiten, kot bi sprva pričakovali, ker uporabljate možnost float.

Ko razumete, da lahko plavate elemente, kot so slike, na levo ali desno stran strani, je precej enostavno ustvariti sloge, ki dosegajo ta cilj. V tej vaji se naučite ustvariti dva sloga, ki sta idealna za poravnavo slik na levo in desno stran strani, skupaj z majhnim robom tam, kjer ga potrebujete.

Postavitve CSS, vključene v Dreamweaver CC, že imajo lebdeče sloge, ki jih lahko uporabite za poravnavo elementov na desno in levo. Ti slogi razreda se imenujejo .fltlft (za, uganili ste, float levo) in .fltrt (za float desno).

Če želite ustvariti dva sloga razreda, ki ju lahko uporabite za poravnavo slik in drugih elementov na levi in ​​desni strani strani, sledite tem korakom:

Kliknite znak plus na plošči Izbirniki oblikovalca CSS.

Glede na to, kaj je na strani, se na ploščo Izbirniki doda novo ime sloga ali prazno polje, kamor lahko vnesete ime sloga.

Dvokliknite, da izberete ime, ki ga je Dreamweaver dodal na ploščo, in ga spremenite v ime, ki ga želite za svoj novi slog, ali kliknite, da izberete prazno polje in vnesete ime.

Če ni dodanega nobenega imena, v prazno polje vnesite želeno ime. Slog lahko poimenujete karkoli želite, vendar ne pozabite vnesti pike pred imenom, če ustvarite slog razreda ali znak # za slog ID-ja.

Dvokliknite novo ime in ga po želji uredite.

Čeprav lahko te sloge poimenujete, kakor koli želite, se slogi poravnave običajno poimenujejo s skrajšanima fltrt in fltlft, ki pomenita lebdeči desno in plavajočo levo.

Če na primer ustvarite slog za poravnavo elementov na levo, bi ga poimenovali .fltlft.

Na plošči Lastnosti kliknite ikono, ki nastavi Float na levo.

Uporabite nastavitve robov na plošči Lastnosti, da ustvarite rob okoli plavajočega elementa.

Dobra praksa je, da dodate prostor roba na nasprotni strani od nastavitve plavajočega. Če ustvarjate slog za lebdenje slike na levi, dodajte 5 ali 10 slikovnih pik prostora v polje desnega roba. Ko sliko poravnate na levo stran strani, se ustvari rob med sliko in katerim koli drugim elementom, ki se ovije poleg slike.

Izberite sliko ali drug element, ki ga želite poravnati na strani.

V spustnem meniju Razred v inšpektorju lastnosti izberite ime sloga, ki ste ga ustvarili.

Pravila sloga, ki ste jih določili, ko ste ustvarili slog, se samodejno uporabijo. Če ste na strani z besedilom izbrali sliko, bi se slika premaknila na levo stran strani in besedilo bi se ovijalo okoli nje z robom med sliko in besedilom.

Ponovite korake 1–7, enkrat s plavajočo vrednostjo, nastavljeno na desno in 5 do 10 slikovnimi pikami prostora na robu v polju Levi rob v kategoriji Box, in znova s ​​plavajočo nastavljeno na levo in 5 do 10 slikovnimi pikami prostora na robu v desnem. polje margin v kategoriji Box.