Sådan justeres elementer med flydere i Dreamweaver

Designere justerer ofte et billede, en

tag eller et andet element til venstre eller højre for en webside i Dreamweaver, og omslut derefter al tekst eller andet indhold omkring dette element. Billedet er justeret til højre for kolonnen, så teksten ombrydes ved siden af ​​det til venstre. I de følgende trin finder du ud af, hvordan du opretter stilarter som denne.

Kredit: Billede fra istockphoto.com

CSS tilbyder mange fordele, når det kommer til at justere elementer som dette, men den måde, du opsætter disse stilarter på, er ikke så indlysende, som du kunne forvente i starten, fordi du bruger float-indstillingen.

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

CSS-layouterne inkluderet i Dreamweaver CC har allerede float-stile, som du kan bruge til at justere elementer til højre og venstre. Disse klassestile hedder .fltlft (for, du gættede rigtigt, float til venstre) og .fltrt (for float right).

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

Klik på plustegnet i panelet CSS Designer Selectors.

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

Dobbeltklik for at vælge det navn, som Dreamweaver føjede til panelet, og skift det til det navn, du ønsker til din nye stil, eller klik for at vælge det tomme felt og indtast et navn.

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

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

Selvom du kan navngive disse stilarter, hvad end du foretrækker, er alignment-stile almindeligvis navngivet med de forkortede fltrt og fltlft, som står for henholdsvis float right og float left.

For eksempel, hvis du opretter en typografi for at justere elementer til venstre, vil du navngive den .fltlft.

I panelet Egenskaber skal du klikke på ikonet, der indstiller Float til Venstre.

Brug margenindstillingerne i panelet Egenskaber til at oprette en margen omkring det flydende element.

Det er god praksis at tilføje marginplads til den modsatte side af flydeindstillingen. Hvis du opretter en stil til at flyde 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, vil der blive oprettet en margen mellem billedet og ethvert andet element, der ombrydes ved siden af ​​billedet.

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

Vælg navnet på den typografi, du har oprettet, fra rullemenuen Klasse i egenskabsinspektøren.

De stilregler, du definerede, da du oprettede stilen, anvendes automatisk. Hvis du havde valgt et billede på en side med tekst, ville billedet flytte til venstre side af siden, og teksten ville ombrydes med en margen mellem billedet og teksten.

Gentag trin 1-7, én gang med float indstillet til højre og 5 til 10 pixel marginplads i venstre margenfelt i bokskategorien, og igen med float indstillet til venstre og 5 til 10 pixel marginplads i højre marginfeltet i Box-kategorien.