Handledning för CSS i Dreamweaver

Cascading Style Sheets ( CSS ) är en avancerad form av HTML webbsida kodning som ger ökad design och formateringsalternativ . I stället för att tillämpa individuella strängar av HTML-kod till varje textblock eller avsnitt på sidan , låter CSS du definiera "stil " regler och klasser , liknande stil uppsättningar i ordbehandling och sidlayout programvara . Du kan sedan använda formaten för element på dina sidor --- gör formatering snabbare och enklare , samt att säkerställa enhetlighet i hela sidan eller en hel webbplats . Dreamweaver inbyggda CSS -funktionen verkar komplicerat i början, men inte efter att du har provat det några gånger . Saker du behöver
Adobe Dreamweaver CS1 eller senare
Visa fler instruktioner
använda CSS i Dreamweaver
1

Starta en ny Dreamweaver HTML-dokument eller öppna ett befintligt dokument där du vill skapa CSS-regler .
2

Gå till panelen Egenskaper och klicka på " CSS " -knappen på vänstra sidan av panelen . Detta placerar Dreamweaver i CSS -läge .
3

Klicka på " Targeted Rule " drop -down i panelen Egenskaper och välj " " .
4

Klicka på " Redigera regel " -knappen i panelen Egenskaper . Detta öppnar nya CSS- regel dialogruta där du namnge din nya stil regeln och definiera dess beteende .
5

Klicka på " Selection Type " drop -down . Det finns fyra alternativ på denna drop - släpp , som har beskrivande namn som förklarar vad de gör . Till exempel , " Class ( kan tillämpas på alla HTML-element ) " kan du skapa en stil klass kan du söka till någon text i dokumentet . " Förening ( baserat på ditt val ) " kan du skapa en stil klass baserad på text du väljer innan du klickar på " Redigera regel . "
6

Klicka på " Selector Name" och skriv namnet du stil. Beroende på vilket val typ du valde i föregående steg , vissa typer av stil reglerna kräver särskilda namnkonventioner . Till exempel , " Class ( kan tillämpas på alla HTML-element ) " kräver att stilen namn börja med en punkt (. ) . Så , om du definierar en rubrik stil , till exempel , kan du namnge den första rubriken nivån " . H1 . " Du kan namnge brödtext " . Kropp " . Dreamweaver kommer att fråga dig om din namngivning är fel , och ge dig en förklaring av hur du namnge stilen .
7

Klicka på " Rule Definition " rullgardinsmenyn och välj hur du vill att Dreamweaver ska tillämpa stilen . Det finns två alternativ : " Detta dokument endast " skapar stil taggar i HTML Huvudsektion av den aktuella sidan . De stilar är tillgängliga för endast den här sidan . " (New formatmallsfil ) " skapar en extern CSS ( . Css -fil) .

Kraften i CSS är att du kan formatera flera sidor --- en hel webbplats --- baseras på samma uppsättning CSS-regler . Detta uppnås med externa CSS-filer . Om du väljer " ( Ny formatmallsfil ) , " när du klickar på " OK " i denna dialogruta , uppmanas Dreamweaver dig att namnge CSS-fil . Om du bara använder en CSS-fil för hela området , är det standard namnkonventionen " styles.css . " Däremot kan en webbplats har många stilmallar --- ett för rubriker , en annan för sidfot sidofält . Ge dina CSS-filer meningsfulla namn .

När du har skapat din första CSS extern fil , nästa gång du öppnar nya CSS-regel , visas filen i Rule Definition rullgardinsmenyn . När du skapar en annan stil , se till att du lägger den till lämplig extern CSS-fil .
8

Klicka på " OK " för att visa " CSS Rule Definition för ... " dialogrutan . Det är här du formatera din stil , t.ex. typsnitt, storlek , stil ( fet , kursiv ) , färg . De här alternativen är omfattande , vilket möjliggör relativt grundlig formatering , inklusive textrutor , bakgrunder och många andra val formatering . Ställ alla önskade formateringen för den här stilen , och klicka sedan på " OK . "
9

Upprepa denna process för att skapa ytterligare stilregler . För att använda en stil till ett textblock , klicka i stycket och väljer önskad stil från " Targeted Rule " drop -down i panelen Egenskaper .