Hem Sociala medier Hur man använder layoutalternativ i Dreamweavers CSS Property Panel - dummies

Hur man använder layoutalternativ i Dreamweavers CSS Property Panel - dummies

Video: Top 10 Microsoft Edge Chromium Best Features 2025

Video: Top 10 Microsoft Edge Chromium Best Features 2025
Anonim

Överst på CSS Designer Properties-panelen hittar du CSS-egenskaperna vanligtvis brukade skapa sidlayouter. Du använder dessa alternativ för att ange höjd, bredd, justering, positionering och mellanslag. Dessa inställningar är idealiska för att skapa sidlayouter med klass- och ID-stilar för att göra saker som justera bilder och positionstaggar för att skapa multikolonnlayouter.

Du kan använda alternativen Layout på CSS-objektpanelen för att ställa in dessa värden:

  • Bredd: Ange en bredd för ett element som kan ha dess angivna dimensioner, t.ex. en tagg. Storleksalternativ är pixel (px), punkt (pt), pica (pc), procent (%), em, rem, ex och ch.

  • Höjd: Ange en höjd för något element som kan ha sina dimensioner angivna.

    • Min och Max Bredd: Ange minsta och maximala bredd för taggar och andra blockelement. Dessa alternativ är användbara när du anger bredden i procent av webbläsarfönstret. Du kan till exempel ställa in designbredden vid 80 procent av webbläsarfönstret och ställa in en maxbredd på 1000 px för att förhindra att din layout sträcker sig bredare än 1000 pixlar.

    • Min och Max Höjd: Ange minsta och maximala höjder för taggar och andra blockelement.

    • Marginal: Ange mängden utrymme runt ett element. Marginaler kan användas för att skapa utrymme mellan kanten på ett element och andra element på sidan, som mellan en bild och text eller mellan två taggar. Du kan ställa in marginalen separat för topp, höger, botten och vänster. Padding mäts i pixlar, punkter, inches, centimeter, millimeter, picas, ems, exs och procentandelar.

    • Padding: Ställer in mängden utrymme inom ett elements gränser. Du kan till exempel använda padding för att skapa utrymme mellan gränserna för en tagg och dess innehåll. Du kan ställa in vadderingen separat för topp, höger, botten och vänster. Padding mäts i pixlar, punkter, inches, centimeter, millimeter, picas, ems, exs och procentandelar.

      Det kan vara svårt att ställa in vadderings- och marginalavstånd. När du lägger till margin och vaddering på ett element, till exempel en bild eller tagg, ökar du den totala storleken på det elementet och hur mycket utrymme det behöver i layouten.

  • Position: Alternativet Position, som finns tillgängligt under nedre delen av Layout-sektionen på Egenskaper-panelen, ändrar hur elementen är placerade på en sida. Positionering kan dramatiskt ändra hur blockelement (t.ex. tabell, lista, rubrik, punkt och taggar) visas i en webbläsare.

    • Inherit: Du behöver inte ange det här standardalternativet. Om inget annat alternativ är valt, arv varje element placeringen av dess moderelement.

    • Statisk: Placera innehållet på platsen i dokumentets flöde. Som standard är alla HTML-element som kan placeras statiska.

    • Absolut: Använd de övre och vänstra koordinaterna för att styra positionen för ett element i förhållande till det övre vänstra hörnet i webbläsarfönstret eller det övre vänstra hörnet av ett element som innehåller elementet.

    • Fast: Placera ett element i förhållande till webbläsarens övre vänstra hörn. Innehållet i ett element med fast positionering förblir konstant även om användaren rullar ner eller över sidan.

    • Relativ: Använd en position i förhållande till den punkt där du sätter in elementet i sidan eller i förhållande till dess behållare.

    • Float: Rikta in element, till exempel bilder och taggar, till vänster eller höger om en sida eller annan behållare som orsakar att text eller andra element sätter sig runt det. Klicka på ikonerna i Float-fältet för att ange följande fyra alternativ: Inherit, Right, Left, eller None.

    • Clear: Förhindra att flytande innehåll överlappar ett område till vänster eller höger eller på båda sidor av ett element. Det här alternativet är användbart när ett flytat element, till exempel en -tagg som används för att skapa en sidovägg, överlappar ett annat blocknivåelement, till exempel en tagg som används för att skapa sidfotens sidfot.

    • Överflöde-x och -y: Berätta för webbläsaren hur innehållet i ett element ska visas om behållaren, t.ex. en etikett, inte kan passa elementets hela höjd eller bredd. Överflödesalternativ är

    • Synlig: Håll innehåll, till exempel en bild eller text, synlig, även om den expanderar utöver den definierade höjden eller bredden på en behållare.

    • Dold: Klipp av innehållet om det överstiger behållarens storlek. Det här alternativet ger inte rullningslister.

    • Scroll: Lägg till rullfält i behållaren oavsett om innehållet överstiger elementets storlek.

    • Auto: Gör att rullningsfältet bara visas när innehållet i en behållare överstiger dess gränser.

  • Display: Ange om, eller hur, att göra ett element i en webbläsare. Du ändrar exempelvis placeringen av en obestämd lista från horisontal till vertikal genom att välja Inline eller dölja ett element, vilket gör det osynligt, genom att välja Ingen. Du kan använda Display-alternativet med ett skriptspråk för att ändra visning av element dynamiskt.

  • Synlighet: Kontrollera om webbläsaren visar ett element. Siktningsalternativen är

    • Inherit: Elementet har synligheten för det element som det finns i (standard).

    • Synlig: Elementet visas.

    • Dold: Elementet visas inte.

    • Dölj: För användning med HTML-tabeller. Kollaps kan användas för att ta bort en kolumn eller rad utan att påverka resten av tabelllayouten.

  • Z-Index: Kontrollera positionen för ett element på Z-koordinaten, som kontrollerar stackordning av element i förhållande till varandra.Högre nummererade element överlappar lägre nummererade element.

  • Opacitet: Kontrollera opacitetsnivån för ett element från 0. 0 (helt transparent) till 1. 0 (helt ogenomskinligt). Till exempel, om du anger. 5 i ogenomskinningsfältet, sänks opaciteten hos ett element till 50 procent.

Hur man använder layoutalternativ i Dreamweavers CSS Property Panel - dummies

Redaktörens val

Vad är en Java-karta? - dummies

Vad är en Java-karta? - dummies

Arrays och specialiserade listor gör det möjligt att utföra en fantastisk uppsättning uppgifter med Java. Det finns dock situationer där en Java-applikation behöver något som är mer relaterat till en databas, utan att egentligen ha allt databasbagage (som att behöva köpa en separat applikation). Till exempel kanske du vill kunna ...

Några få saker om Java Math - dummies

Några få saker om Java Math - dummies

Tro det eller inte, datorer - även de mest kraftfulla - Ha vissa begränsningar när det gäller att utföra matematiska beräkningar. Dessa begränsningar är vanligtvis obetydliga, men ibland slår de sig och biter på dig. Här är de saker du behöver se upp för när du gör matte i Java. Helhetsflöde Det grundläggande problemet ...

Vad är recursion i Java Programmering? - dummies

Vad är recursion i Java Programmering? - dummies

Rekursion är en grundläggande programmeringsteknik som du kan använda i Java, där en metod kallar sig för att lösa ett problem. En metod som använder denna teknik är rekursiv. Många programmeringsproblem kan lösas endast genom rekursion, och vissa problem som kan lösas med andra tekniker löses bättre genom rekursion. En av ...

Redaktörens val

4 Måste-inkludera i din blogg sidobardesign - dummies

4 Måste-inkludera i din blogg sidobardesign - dummies

Din bloggens sidofält är viktig fastighet som bör innehålla de element du vill ha mest. När du utformar din blogg sidofält kan du dra från en nästan oändlig lista över sidospårelement. Genom att välja noggrant vad som ska inkluderas (och vad som inte ska inkluderas) kan du ställa in din blogg från andra.

5 Användbara Wordpress Plugins - dummies

5 Användbara Wordpress Plugins - dummies

Om du bloggar på en självhävd plattform med WordPress-programvara, är det dags att anpassa din blogg med plug-ins - programvara som kan "anslutas" till din befintliga WordPress bloggprogramvara. Plug-ins gör det möjligt för dig att göra allt från funktionsbildspel i dina blogginlägg för att ansluta sociala medier till din webbplats. Här är fem användbara ...

7 Sätt att erövra Writer's Block som en Blogger - dummies

7 Sätt att erövra Writer's Block som en Blogger - dummies

Varje bloggare möter författarens block i ett tid eller annan. Om du är den typ av bloggare som sköter innehåll varje dag, kan författarens block vara stäverande. Kan du inte ta en paus för att få ditt skrivande mojo tillbaka? Prova en (eller flera) av dessa sju sätt att slå författarens block för att få dig tillbaka ...

Redaktörens val

10 Stora elektronikkomponentkällor - dummies

10 Stora elektronikkomponentkällor - dummies

Letar du efter några bra källor till dina elektroniska delar? Denna lista ger dig några fleråriga favoriter, både inom och utanför Nordamerika. Denna lista är inte uttömmande. Du hittar bokstavligen tusentals specialutbud för ny och begagnad elektronik. Plus, Amazon och eBay ger virtuella marknadsplatser för alla sorters säljare - ...

Elektronik Basics: Resistance - dummies

Elektronik Basics: Resistance - dummies

I elektronikvärlden är motståndet inte meningslöst. Faktum är att motstånd kan vara mycket användbart. Utan motstånd skulle elektronik inte vara möjligt. Elektronik handlar om att manipulera strömmen av ström, och ett av de mest grundläggande sätten att manipulera strömmen är att minska det genom resistans. Utan motstånd strömmar strömmen oreglerad och där ...

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

Digital elektronik: Så här installerar du BASIC Stamp Editor och Anslut till Stämpeldummorna

För att berätta för BASIC Stamp vad du vill göra i ditt digitala elektronikprojekt måste du programmera det. BASIC Stamp Windows Editor är den programvara som du använder på din dator för att skapa program som kan laddas ner till en BASIC Stamp-mikrokontroller. Denna programvara är tillgänglig gratis från Parallax webbplats. ...