Sådan justeres elementer med floats i Dreamweaver

Designere justerer ofte et billede, et tag eller et andet element til venstre eller højre for en webside i Dreamweaver og derefter pakker ind tekst eller andet indhold omkring det pågældende element. Billedet er justeret til højre for kolonnen, så teksten wraps ved siden af ​​den til venstre. I de trin, der følger, finder du ud af, hvordan du opretter stilarter som denne.

kredit: Billede fra istockphoto. com

CSS giver mange fordele, når det kommer til at tilpasse elementer som dette, men måden du opsætter disse stilarter på, er ikke så indlysende, som du måske forventer først, fordi du bruger float-indstillingen.

Når du har forstået, at du kan flyde elementer, som billeder, til venstre eller højre på en side, er det ret nemt at oprette stilarter, der opfylder dette mål. I denne øvelse lærer du at oprette to stilarter, der er ideelle til at tilpasse billeder til venstre og højre for en side, komplet med en lille margin, lige hvor du har brug for det.

CSS-layouterne i Dreamweaver CC har allerede float-stilarter, som du kan bruge til at justere elementer til højre og venstre. Disse klassestile er navngivet. fltlft (for du gættede det, flyd til venstre) og. fltrt (for float højre).

Følg disse trin for at oprette to klassestiler, som du kan bruge til at justere billeder og andre elementer til venstre og højre for en side:

1. Klik på plustegnet i panelet CSS Designer Selectors.

   Afhængigt af hvad der findes på siden, tilføjes et nyt stilnavn eller et tomt felt, hvor du kan indtaste et stilnavn, til panelet Selectors.

2. Dobbeltklik for at vælge det navn, Dreamweaver tilføjede til panelet, og skift det til det navn, du vil have til din nye stil, eller klik for at markere det tomme felt og indtaste et navn.

   Hvis der ikke er tilføjet noget, skal du indtaste det ønskede navn i det tomme felt. Du kan navngive stilen, hvad du vil, men sørg for at indtaste en periode før navnet, hvis du opretter en klassestil eller et # tegn på en ID-stil.

3. Dobbeltklik på det nye navn og rediger det som ønsket.

   Selvom du kan navngive disse stilarter, uanset hvad du foretrækker, kaldes justeringsstile ofte med den forkortede fltrt og fltlft, som står for float højre og flyder til venstre.

   Hvis du f.eks. Opretter en stil for at justere elementer til venstre, vil du nævne den. fltlft.

4. I panelet Egenskaber skal du klikke på ikonet, der angiver Float til venstre.

   

5. Brug marginalindstillingerne i panelet Egenskaber til at oprette en margen omkring det flytede element.

   Det er god praksis at tilføje marginrum til den modsatte side fra floatindstillingen. Hvis du opretter en stil, der flyder et billede til venstre, skal du tilføje 5 eller 10 pixels plads til feltet Højre margen.Når du justerer et billede til venstre på siden, oprettes der en margen mellem billedet og ethvert andet element, der wraps ved siden af ​​billedet.

6. Vælg det billede eller andet element, du vil justere på siden.

7. Vælg navnet på den stil, du oprettede i rullemenuen Klasse i ejendomsinspektøren.

   Den stil du har defineret, når du oprettede stilen, anvendes automatisk. Hvis du havde valgt et billede på en tekstside, ville billedet bevæge sig til venstre på siden, og teksten ville ombrydes med en margin mellem billedet og teksten.

8. Gentag trin 1-7, en gang med float-sæt til højre og 5 til 10 pixel af margenplads i feltet Venstre margen i bokskategorien, og igen med Float-sæt til venstre og 5 til 10 pixel margenplads i feltet Højre margen i boksen kategori.