Si të rreshtoni elementët me Floats në Dreamweaver

Dizajnerët shpesh rreshtojnë një imazh, a

etiketë, ose një element tjetër në të majtë ose në të djathtë të një faqe interneti në Dreamweaver dhe më pas mbështillni çdo tekst ose përmbajtje tjetër rreth atij elementi. Imazhi është rreshtuar në të djathtë të kolonës në mënyrë që teksti të mbështillet pranë tij në të majtë. Në hapat që vijojnë, do të zbuloni se si të krijoni stile si ky.

Kredia: Imazhi nga istockphoto.com

CSS ofron shumë përparësi kur bëhet fjalë për rreshtimin e elementeve si ky, por mënyra se si i vendosni këto stile nuk është aq e dukshme sa mund të prisni në fillim, sepse përdorni opsionin float.

Pasi të kuptoni se mund të lëvizni elementë, të tillë si imazhet, në anën e majtë ose të djathtë të një faqeje, është shumë e lehtë të krijoni stile që përmbushin këtë qëllim. Në këtë ushtrim, ju mësoni të krijoni dy stile që janë ideale për rreshtimin e imazheve majtas dhe djathtas të një faqeje, të kompletuara me një diferencë të vogël pikërisht aty ku ju nevojitet.

Paraqitjet CSS të përfshira në Dreamweaver CC tashmë kanë stile float që mund t'i përdorni për të lidhur elementët djathtas dhe majtas. Këto stile klasash emërtohen .fltlft (për, e keni marrë me mend, float majtas) dhe .fltrt (për float djathtas).

Për të krijuar dy stile klasash që mund t'i përdorni për të rreshtuar imazhet dhe elementët e tjerë majtas dhe djathtas të një faqeje, ndiqni këto hapa:

Klikoni shenjën plus në panelin e përzgjedhësve të projektuesit CSS.

Në varësi të asaj që është në faqe, një emër stili i ri ose një fushë bosh ku mund të vendosni një emër stili shtohet në panelin e përzgjedhësve.

Klikoni dy herë për të zgjedhur emrin që Dreamweaver shtoi në panel dhe ndryshoni atë në emrin që dëshironi për stilin tuaj të ri, ose klikoni për të zgjedhur fushën e zbrazët dhe për të futur një emër.

Nëse nuk shtohet asnjë emër, futni emrin që dëshironi në fushën e zbrazët. Ju mund ta emërtoni stilin çdo gjë që ju pëlqen, por sigurohuni që të vendosni një pikë përpara emrit nëse krijoni një stil klase ose një shenjë # për një stil ID.

Klikoni dy herë mbi emrin e ri dhe modifikojeni sipas dëshirës.

Megjithëse mund t'i emërtoni këto stile çfarëdo që preferoni, stilet e shtrirjes zakonisht emërtohen me shkurtesat fltrt dhe fltlft, të cilat janë përkatësisht float djathtas dhe float majtas.

Për shembull, nëse krijoni një stil për të rreshtuar elementët në të majtë, do ta emërtoni atë .fltlft.

Në panelin Properties, klikoni ikonën që vendos Float në Majtas.

Përdorni cilësimet e Marzhit në panelin Vetitë për të krijuar një diferencë rreth elementit të lundruar.

Është praktikë e mirë të shtoni hapësirën e margjinës në anën e kundërt nga cilësimi i notimit. Nëse po krijoni një stil për të lëvizur një imazh në të majtë, shtoni 5 ose 10 piksele hapësirë ​​në fushën e margjinës së djathtë. Kur rreshtoni një imazh në anën e majtë të faqes, do të krijohet një diferencë midis imazhit dhe çdo elementi tjetër që mbështillet pranë imazhit.

Zgjidhni imazhin ose elementin tjetër që dëshironi të rreshtoni në faqe.

Zgjidhni emrin e stilit që keni krijuar nga menyja rënëse Class në inspektorin e pronës.

Rregullat e stilit që keni përcaktuar kur keni krijuar stilin zbatohen automatikisht. Nëse do të kishit zgjedhur një imazh në një faqe teksti, imazhi do të zhvendosej në anën e majtë të faqes dhe teksti do të mbështillej rreth tij me një diferencë midis imazhit dhe tekstit.

Përsëritni hapat 1–7, një herë me float të vendosur në Djathtas dhe 5 deri në 10 piksele të hapësirës së diferencës në fushën e margjinës së majtë në kategorinë Box, dhe përsëri me Float të vendosur në Majtas dhe 5 deri në 10 pikselë të hapësirës së marzhit në të djathtë fushën e marzhit në kategorinë Box.