Dra från motsvarande linjal.
Senast uppdaterad den
27 apr. 2021
Använd visuella hjälpmedel för layout i Dreamweaver, t.ex. ställ in linjaler, ställ in stödlinjer, använd stödlinjer med mallar, använd ett layoutrutnät och använd en hjälpbild.
Ställa in linjaler
Linjaler hjälper dig att mäta, organisera och planera din layout. De kan visas på vänster och övre kanten av sidan, markerade i pixlar, tum eller centimeter.
- Om du vill växla mellan att visa och dölja linjalerna väljer du Visa > Designvyalternativ > Linjaler > Visa/dölj.
- Om du vill ändra startpunkten drar du ikonen med linjalens startpunkt
(i det övre vänstra hörnet i dokumentfönstrets designvy) till en plats på sidan. - Om du vill återställa startpunkten till standardpositionen väljer du Visa > Designvyalternativ > Linjaler > Återställ origo.
- Om du vill ändra måttenheter väljer du först Visa > Linaljer och sedan Pixlar, Tum eller Centimeter.
Ställa in stödlinjer för layout
Guides är linjer som du drar till dokumentet från linjaler. De hjälper dig att placera och justera objekt mer exakt. Du kan också använda guides för att mäta storleken på sidelement eller emulera vikningen (synliga områden) i webbläsare.
För att hjälpa dig justera element kan du fästa element till guides och fästa guides till element. (Element måste vara absolut positionerade för att fästfunktionen ska fungera.) Du kan också låsa guides för att förhindra att de flyttas av misstag av en annan användare.
Skapa en horisontell eller vertikal guide
Placera guiden i dokumentfönstret och släpp
musknappen (flytta guiden genom att dra den igen).
Obs!
Som standard registreras guides som absoluta pixelmått från övre eller vänstra sidan av dokumentet och visas relativt till linjalens ursprung. För att registrera guiden som en procentsats trycker du på Skift-tangenten när du skapar eller flyttar guiden.
Visa eller dölj stödlinjer
Välj Vy > Guides > Visa Guides.
Fästa element mot stödlinjer
- Om du vill fästa element mot stödlinjer väljer du Visa > Designvyalternativ > Stödlinjer > Fäst mot stödlinjer.
- Om du vill fästa stödlinjer mot element väljer du Visa > Designvyalternativ > Stödlinjer > Fäst stödlinjer mot element.
Obs!
När du ändrar storlek på element som absolut positionerade element (AP-element), tabeller och bilder, fästs de storleksändrade elementen mot stödlinjer.
Låsa eller låsa upp alla stödlinjer
Välj Visa > Designvyalternativ > Stödlinjer > Lås stödlinjer.
Visa och flytta en guide till en specifik position
Håll muspekaren över guiden
för att visa dess position.
Dubbelklicka på stödlinjen.
Ange den nya positionen i dialogrutan Flytta guide och
klicka på OK.
Visa avståndet mellan stödlinjer
Tryck på Ctrl (Windows) eller Kommando (Macintosh)
och håll muspekaren var som helst mellan de två guiderna.
Obs!
Måttenheten är densamma som måttenheten som används för linjaler.
Emulera vikningen (synligt område) i en webbläsare
Välj först Visa > Designvyalternativ > Stödlinjer och sedan en förinställd webbläsarstorlek på menyn.
Ta bort en stödlinje
Dra bort stödlinjen från dokumentet.
Ändra inställningar för stödlinjen
Välj Visa > Designvyalternativ > Stödlinjer > Redigera stödlinjer och ange följande alternativ. Sedan klickar du på OK.
Stödlinjefärg
Anger färgen på stödlinjerna. Klicka på färgrutan och välj en färg från färgväljaren eller skriv ett hexadecimalt nummer i textrutan.
Mellanrumsfärg
Anger färgen på linjerna som visas som avstånds indikatorer när du håller muspekaren mellan guides. Klicka på färgrutan och välj en färg från färgväljaren eller skriv ett hexadecimalt nummer i textrutan.
Visa stödlinjer
Gör så att stödlinjer visas i designvyn.
Fäst mot stödlinjer
Gör så att sidelement fästs till guides när du flyttar element runt på sidan.
Lås stödlinjer
Låser fast stödlinjerna.
Fäst stödlinjer mot element
Fäster stödlinjer mot element på sidan när du drar stödlinjerna.
Radera allt
Raderar alla stödlinjer på sidan.
Använda stödlinjer med mallar
När guides läggs till i en Dreamweaver-mall ärver alla instanser av mallen guiderna. Guides i mallinstanser behandlas dock som redigerbara områden, så användare kan ändra dem. Ändrade guides i mallinstanser återställs till sin ursprungliga plats när instansen uppdateras med huvudmallen.
Du kan även lägga till egna stödlinjer i instanser av en mall. Guides som läggs till på detta sätt skrivs inte över när mallinstansen uppdateras med huvudmallen.
Använda stödraster för layout
Rutnätet visar ett system av horisontella och vertikala linjer i dokumentfönstret. Det är användbart för att placera objekt exakt. Du kan få absolutpositionerade sidelement att automatiskt fästa vid rutnätet när du flyttar dem, och ändra rutnätet eller kontrollera fästbeteendet genom att ange rutnätsinställningar. Fästning fungerar oavsett om rutnätet är synligt eller inte.
Visa eller dölja stödrastret
Välj Visa > Designvyalternativ > Stödraster > Visa stödraster.
Aktivera eller inaktivera fästfunktionen
Välj Visa > Designvyalternativ > Stödraster > Fäst mot stödraster.
Ändra inställningar för stödraster
Välj Visa > Designvyalternativ > Stödraster > Stödrasterinställningar.
Ange alternativ och klicka på OK för att tillämpa ändringarna.
Färg
Anger färgen på stödrasterlinjerna. Klicka på färgrutan och välja en färg från Färgväljaren, eller skriv ett hexadecimalt nummer i textrutan.
Visa stödraster
Gör så att stödrastret visas i designvyn.
Fäst mot stödraster
Gör så att sidelement fäster mot linjerna i stödrastret.
Mellanrum
Styr hur stort avståndet mellan stödlinjerna är. Ange ett nummer och välja px, tum eller centimeter från menyn.
Visning
Anger om stödlinjerna visas som linjer eller som punkter.
Obs!
Om Visa rutnät inte är valt visas inte rutnätet i dokumentet och inga ändringar syns.
Använda en hjälpbild
Du kan använda en hjälpbild som guide för att återskapa en sidlayout som skapats i ett grafikprogram som Adobe Freehand eller Fireworks.
En hjälpbild är en JPEG-, GIF- eller PNG-bild som placeras i bakgrunden av dokumentfönstret.Du kan dölja bilden, ange dess opacitet och ändra dess position.
Hjälpbilden är endast synlig i Dreamweaver; den visas inte när du visar sidan i en webbläsare.När hjälpbilden är synlig är sidans faktiska bakgrundsbild och färg inte synliga i dokumentfönstret; bakgrundsbilden och färgen kommer dock att vara synliga när sidan visas i en webbläsare.
Placera en hjälpbild i dokumentfönstret
Gör något av följande:
Välj Visa > Designvyalternativ > Hjälpbild > Ladda.
Välj Arkiv > Sidegenskaper och klicka sedan på Bläddra (bredvid hjälpbildens textruta) i kategorin Hjälpbild.
Navigera till din bildfil och klicka på OK.
I dialogrutan Sidegenskaper anger du genomskinligheten för bilden genom att dra reglaget Bildgenomskinlighet. Klicka sedan på OK.
Om du vill byta till en annan hjälpbild eller ändra den aktuella hjälpbildens genomskinlighet väljer du Arkiv > Sidegenskaper.
Visa eller dölj hjälpbilden
Välj Visa > Designvyalternativ > Hjälpbild > Visa.
Ändra positionen för en hjälpbild
Välj Visa > Designvyalternativ > Hjälpbild > Justera placering.
För att exakt ange positionen för hjälpbilden anger du koordinatvärden i textrutorna X och Y.
För att flytta bilden 1 px i taget använder du piltangenterna.
För att flytta bilden 5 px i taget trycker du på Skift och en piltangent.
Återställ positionen för hjälpbilden
Välj Visa > Designvyalternativ > Hjälpbild > Återställ placering.
Hjälpbilden återgår till det övre vänstra hörnet av dokumentfönstret (0,0).
Justera hjälpbilden mot ett valt element
Välj ett element i dokumentfönstret.
Välj Visa > Designvyalternativ > Hjälpbild > Justera med markering.
Det övre vänstra hörnet av hjälpbilden justeras med det övre vänstra hörnet av det valda elementet.
Ange egenskaper för hjälpbild
Ange egenskaper för en hjälpbild (som är en bildfil att använda som guide när du designar din sida).
Gör något av följande:
- Klicka på Arkiv > Sidegenskaper
- Klicka på Fönster > Egenskaper och klicka sedan på Sidegenskaper i egenskapskontrollen för text.
Välj Hjälpbild i dialogrutan Sidegenskaper. Du kan konfigurera följande alternativ på den här panelen:
- Hjälpbild: Anger en bild att använda som guide för att kopiera en design. Bilden används endast som referensram och visas inte när dokumentet öppnas i en webbläsare.
- Genomskinlighet: Bestämmer opaciteten för hjälpbilden, från helt genomskinlig till helt ogenomskinlig.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
