Kuidas Dreamweaveris elemente ujukitega joondada

Disainerid joondavad sageli pildi, a

märgendit või mõnda muud Dreamweaveri veebilehest vasakul või paremal asuvat elementi ja mähkige seejärel mis tahes tekst või muu sisu selle elemendi ümber. Pilt joondatakse veerust paremale nii, et tekst murtakse selle kõrval vasakul pool. Järgmiste sammude käigus saate teada, kuidas luua sarnaseid stiile.

Krediit: pilt saidilt istockphoto.com

CSS pakub selliste elementide joondamisel palju eeliseid, kuid nende stiilide seadistamise viis ei ole nii ilmne, kui alguses arvata võiks, kuna kasutate ujumisvalikut.

Kui olete aru saanud, et saate elemente (nt pilte) hõljutada lehe vasakule või paremale küljele, on seda eesmärki täitvate stiilide loomine üsna lihtne. Selle harjutuse käigus õpite looma kahte stiili, mis sobivad ideaalselt piltide joondamiseks lehe vasakule ja paremale, lisades väikese veerise just sinna, kus seda vajate.

Dreamweaver CC-s sisalduvatel CSS-paigutustel on juba ujukistiilid, mida saate kasutada elementide paremale ja vasakule joondamiseks. Nende klassistiilide nimed on .fltlft (arvate ära, hõlju vasakule) ja .fltrt (paremal hõljumiseks).

Kahe klassistiili loomiseks, mida saate kasutada piltide ja muude elementide joondamiseks lehe vasakule ja paremale, toimige järgmiselt.

Klõpsake paneelil CSS Designer Selectors plussmärki.

Olenevalt lehel olevast lisatakse valijate paneelile uus stiilinimi või tühi väli, kuhu saate stiili nime sisestada.

Topeltklõpsake nime valimiseks, mille Dreamweaver paneelile lisas, ja muutke see oma uue stiili jaoks soovitud nimeks või klõpsake tühja välja valimiseks ja nime sisestamiseks.

Kui nime pole lisatud, sisestage soovitud nimi tühjale väljale. Saate stiilile nimetada ükskõik, mis teile meeldib, kuid kui loote klassistiili või ID-stiili jaoks #-märgi, sisestage nime ette punkt.

Topeltklõpsake uut nime ja muutke seda vastavalt soovile.

Kuigi saate neid stiile nimetada, mida eelistate, nimetatakse joondusstiile tavaliselt lühenditega fltrt ja fltlft, mis tähistavad vastavalt hõljumist paremale ja hõljumisele vasakule.

Näiteks kui loote stiili, et joondada elemendid vasakule, pange see nimeks .fltlft.

Klõpsake paneelil Atribuudid ikooni, mis seab suvandi Float asendisse Left.

Kasutage veerise sätteid paneelil Atribuudid, et luua ujuva elemendi ümber veeris.

Hea tava on lisada veerise ruumi ujuki seadistuse vastasküljele. Kui loote stiili kujutise hõljumiseks vasakule, lisage parempoolse veerise väljale 5 või 10 pikslit ruumi. Kui joondate pildi lehe vasakusse serva, luuakse veeris pildi ja mis tahes muu pildi kõrval oleva elemendi vahele.

Valige pilt või muu element, mida soovite lehel joondada.

Valige atribuutide inspektori rippmenüüst Klass loodud stiili nimi.

Stiili loomisel määratletud stiilireeglid rakendatakse automaatselt. Kui oleksite tekstilehel pildi valinud, liiguks pilt lehe vasakusse serva ja tekst jääks selle ümber pildi ja teksti vahele jääva veerisega.

Korrake samme 1–7, üks kord nii, et ujuk on seatud paremale ja 5 kuni 10 pikslit veerise väljal Kast kategoorias, ja uuesti, kui ujuki on seatud vasakule ja 5 kuni 10 pikslit veerise paremale. veerise väljale kategoorias Kast.