Hvordan justere elementer med flyter i Dreamweaver

Designere justerer ofte et bilde, en tag eller et annet element til venstre eller høyre på en nettside i Dreamweaver og deretter pakke inn tekst eller annet innhold rundt det aktuelle elementet. Bildet er justert til høyre for kolonnen slik at teksten brytes ved siden av den til venstre. I trinnene som følger, finner du ut hvordan du lager stiler som denne.

kreditt: Bilde fra istockphoto. com

CSS tilbyr mange fordeler når det gjelder å justere elementer som dette, men måten du konfigurerer på disse stilene, er ikke så åpenbart som du kanskje forventer først fordi du bruker float-alternativet.

Når du forstår at du kan flyte elementer, som bilder, til venstre eller høyre side av en side, er det ganske enkelt å lage stiler som oppnår dette målet. I denne øvelsen lærer du å lage to stiler som er ideelle for å justere bilder til venstre og høyre for en side, komplett med en liten margin akkurat der du trenger det.

CSS-oppsettene i Dreamweaver CC har allerede float-stiler som du kan bruke til å justere elementer til høyre og venstre. Disse klassestilene er oppkalt. fltlft (for, du gjettet det, flyte til venstre) og. fltrt (for float høyre).

For å lage to klassestiler som du kan bruke til å justere bilder og andre elementer til venstre og høyre for en side, følg disse trinnene:

1. Klikk plustegnet i CSS Designer Selectors-panelet.

   Avhengig av hva som er på siden, legges et nytt stilnavn eller et tomt felt der du kan skrive inn et stilnavn, til Selectors-panelet.

2. Dobbeltklikk for å velge navnet Dreamweaver legger til panelet og endre det til navnet du vil ha for den nye stilen din, eller klikk for å velge det tomme feltet og skriv inn et navn.

   Hvis ikke noe navn er lagt til, skriv inn navnet du ønsker i det tomme feltet. Du kan navngi stilen alt du vil, men sørg for å skrive inn en periode før navnet hvis du oppretter en klassestil eller et # -skilt for en ID-stil.

3. Dobbeltklikk på det nye navnet og rediger det som ønsket.

   Selv om du kan navngi disse stilene uansett hva du foretrekker, blir justeringsstilene ofte kalt med forkortet fltrt og fltlft, som står for float høyre og flyter til venstre.

   Hvis du for eksempel lager en stil for å justere elementer til venstre, vil du nevne den. fltlft.

4. I panelet Egenskaper klikker du på ikonet som setter Float til venstre.

   

5. Bruk Margin-innstillingene i Egenskaper-panelet for å opprette en margin rundt det flytede elementet.

   Det er god praksis å legge til margin plass til motsatt side fra flottørinnstillingen. Hvis du lager en stil for å flyte et bilde til venstre, legger du til 5 eller 10 piksler med plass til feltet Høyre margin.Når du justerer et bilde til venstre på siden, vil det opprettes en margin mellom bildet og et annet element som bryter ved siden av bildet.

6. Velg bildet eller annet element du vil justere på siden.

7. Velg navnet på stilen du opprettet, fra rullegardinmenyen Klasse i egenskapsinspektøren.

   Stilreglene du definerte når du opprettet stilen, blir automatisk brukt. Hvis du hadde valgt et bilde på en tekstside, flyttet bildet til venstre på siden, og teksten ville vikle rundt den med en margin mellom bildet og teksten.

8. Gjenta trinn 1-7, en gang med float sett til Høyre og 5 til 10 piksler med margin plass i feltet Venstre margin i boks kategorien, og igjen med Float sett til venstre og 5 til 10 piksler med margin plass i feltet Høyre margin i boks kategorien.