Video: Invoegen afbeelding centreren 2024
Met Dreamweaver kunt u uw opmaak centreren met behulp van CSS-marges. Veel webpaginaontwerpen zijn gecentreerd op de pagina zodat ze lijken te zweven tussen de zijkanten van het browservenster, ongeacht hoe breed of smal het venster wordt. Dit helpt de illusie te creëren dat het ontwerp de pagina vult, zelfs als het browservenster veel breder is dan het paginaontwerp.
De meeste webpaginaontwerpen die met CSS zijn gemaakt, bereiken dit effect door één tag te maken die alle pagina-inhoud omringt en vervolgens een stijl op die tag toe te passen die een stijlregel bevat die die tag centreert. Zoals u in de volgende stapsgewijze instructies ontdekt, is het maken van een stijl om een tag te centreren niet zo voor de hand liggend als u zou denken, maar is deze eenvoudig te implementeren.
Het is gebruikelijk om een ID-stijl te gebruiken voor de tag die uw ontwerp centreert en om deze #wrapper of #container te noemen.
Als uw pagina nog niet is ingesteld met een tag rond al uw inhoud, vindt u hier een tip om er een toe te voegen. Klik en sleep eerst om alle tekst, afbeeldingen en andere inhoud op de pagina te selecteren. Kies vervolgens Invoegen → Layout-objecten → Div-tag. Zorg er in het dialoogvenster Div Tag invoegen voor dat de optie Wrap around Selection is geselecteerd in de vervolgkeuzelijst Invoegen.
Laat de rest van de velden leeg en klik op OK om een tag rond de gehele inhoud van uw pagina toe te voegen, en u bent klaar voor de volgende stappen.
Als u een volledig paginaontwerp wilt centreren, zorgt u ervoor dat een tag de volledige inhoud van de pagina omringt en volgt u deze stappen:
-
Klik op het plusteken in het paneel CSS Designer Selectors.
Afhankelijk van wat er op de pagina staat, wordt een nieuwe stijlnaam of een leeg veld waarin u een stijlnaam kunt invoeren toegevoegd aan het deelvenster Selectors.
-
Dubbelklik om de naam te selecteren die Dreamweaver aan het paneel heeft toegevoegd en verander deze in de gewenste naam voor uw nieuwe stijl, of klik om het lege veld te selecteren en voer een naam in.
Als er geen naam is toegevoegd, voert u de gewenste naam in het lege veld in. U kunt de stijl een naam geven die u wilt, maar zorg ervoor dat u een punt vóór de naam invoert als u een klassestijl of een # -teken voor een ID-stijl maakt.
-
Geef in het venster Eigenschappen de breedte, marges en andere opmaakinstellingen op die u wilt definiëren.
De breedte voor de containertag is ingesteld op 980 pixels. Dit is de truc om een tag als deze te centreren: stel de linker- en rechtermarge in op Auto. Op die manier voegt een browser automatisch een gelijke hoeveelheid marge toe aan elke kant van de tag, waardoor deze effectief op de pagina wordt gecentreerd.
-
Selecteer de ID die alle inhoud op de pagina omringt.
Om er zeker van te zijn dat u de juiste tag hebt geselecteerd, klikt u om uw cursor ergens in het hoofdgedeelte van de pagina te plaatsen en klikt u vervolgens op de tag die helemaal links in de Quick Tag Selector onderaan de werkruimte wordt weergegeven.
-
Selecteer de tag en selecteer de naam van de stijl die u hebt gemaakt in de vervolgkeuzelijst ID in de eigenschappencontrole.
De stijlregels die u hebt gedefinieerd toen u de stijl maakte, worden automatisch toegepast op de tag. In dit voorbeeld is het resultaat dat de grootte van de tag wordt gewijzigd in 980 pixels breed en de tag en de volledige inhoud ervan op de pagina zijn gecentreerd.
Niet alle functies werken wanneer Dreamweaver is ingesteld op Live view. Hoewel Live view een goede manier is om een voorbeeld te bekijken van hoe uw paginaontwerpen er in de meeste moderne webbrowsers uit zullen zien, maakt het gebruik van de Live view-functie veel van de bewerkingstools van Dreamweaver onbruikbaar. Als de eigenschappencontrole bijvoorbeeld grijs wordt weergegeven wanneer u deze wilt gebruiken, zorg dan dat de knop Live is uitgeschakeld.
