Lär dig att använda panelen CSS Designer för att skapa eller koppla formatmallar, mediefrågor och väljare, och för att ange CSS-egenskaper.
CSS Designer panel (Fönster > CSS Designer) är en CSS-egenskapsinspektor som låter dig "visuellt" skapa CSS-stilar, filer och ange egenskaper tillsammans med mediafrågor.
Följande sektioner är tillgängliga i CSS Designer-gränssnittet:
Med CSS Designer kan du redigera en enskild regel i en CSS-stilmall (använd fliken Aktuell i CSS Designer), eller om du föredrar kan du arbeta direkt i CSS-stilmallen (använd fliken Alla i CSS Designer).
I rutan Källor på CSS Designer-panelen klickar du på 
och sedan på ett av följande alternativ:
Beroende på vilket alternativ du väljer visas dialogrutan Skapa en ny CSS-fil eller dialogrutan Koppla befintlig CSS-fil.
Klicka på Bläddra och ange namnet på CSS-filen och, om du håller på att skapa en CSS-formatmall, platsen där du vill spara den nya filen.
Gör något av följande:
(Valfritt) Klicka på Villkorsstyrd användning och ange den mediefråga du vill associera med CSS-filen.
I CSS Designer-panelen klickar du på en CSS-källa i rutan Källor.
Klicka på 
i rutan @Media och lägg till en ny mediefråga.
Dialogrutan Definiera mediefråga visas med en lista över alla mediefrågevillkor som stöds av Dreamweaver.
Välj de Villkor du behöver.
Kontrollera noga att du anger giltiga värden för alla villkor du väljer. Annars kan inte motsvarande mediefrågor skapas.
Endast 'Och'-operation stöds för flera villkor.
Om du lägger till mediefrågevillkor via kod fylls bara de villkor som stöds i automatiskt i dialogrutan Definiera mediefråga. I textrutan Kod i dialogrutan visas emellertid koden fullständigt (inklusive villkor som inte stöds).
Om du klickar på en mediefråga i Design-/Live-vyn ändras visningsrutan så den matchar den valda mediefrågan. Klicka på Global i rutan @Media för att visa i fullskärmsläge.
I panelen CSS Designer väljer du en CSS-källa i rutan Källor eller en mediafråga i rutan @Media.
I rutan Väljare klickar du på . Baserat på elementet som valts i dokumentet identifierar CSS Designer smart den relevanta väljaren och föreslår den för dig (upp till tre regler).
Du kan göra något av följande:
Obs! Alternativet Duplicera till mediefråga är bara tillgängligt om den aktiva väljarens källa innehåller mediefrågor. Det går inte att duplicera en väljare från en källa till en mediefråga från en annan källa.
Nu kan du kopiera stilar från en väljare och klistra in dem i en annan. Du kan kopiera alla stilar eller bara en särskild kategori med stilar, t.ex. Layout, Text och Kant.
Högerklicka på en väljare och välj från tillgängliga alternativ:
Klicka på den aktuella väljaren och dra den till den nya positionen i väljarrutan.
Egenskaperna är grupperade i följande kategorier och representeras av olika ikoner högst upp i rutan Egenskaper:
Identifiera element som är kopplade till en CSS-väljare med omvänd inspektion innan du redigerar egenskaperna för en CSS-väljare. Därigenom kan du utvärdera om alla element som markerades under den omvända inspektionen faktiskt behöver ändringarna.
Välj kryssrutan Visa om du bara vill visa de angivna egenskaperna. Om du vill visa alla egenskaper du kan ange för en väljare avmarkerar du kryssrutan Visa.
Om du vill ange en egenskap, till exempel bredd eller kantkomprimering, klickar du på de önskade alternativen bland alternativen som visas intill egenskapen i rutan Egenskaper.
Åsidosatta egenskaper anges med ett genomstruket format.
Med rutkontrollerna i rutan Egenskaper i CSS Designer kan du snabbt ställa in marginal-, utfyllnads- och positionsegenskaperna. Om du föredrar kod kan du ange kortformskod för marginal och utfyllnad i snabbredigeringsrutorna, som visas i det här exemplet.
Klicka på värdena och skriv önskat värde. Om du vill att alla fyra värdena ska vara samma och ändras samtidigt klickar du på länkikonen i mitten.
När som helst kan du inaktivera eller ta bort specifika värden, till exempel vänstermarginalen samtidigt som du behåller höger-, övre- och nedre värdena.
Egenskaper för kantlinjekontroll är organiserade i logiska flikar som hjälper dig att snabbt visa eller ändra egenskaperna.
Om du föredrar kod kan du ange stenografisk kod för kantlinjer och kantlinjeradie i snabbredigeringstextrutan.
Om du vill ange egenskaper för kantkontroll anger du först egenskaperna på fliken Alla sidor. De andra flikarna blir då aktiverade och egenskaperna som angetts på fliken "Alla sidor" återspeglas för enskilda kantlinjer.
När du ändrar en egenskap i de enskilda kantlinjeflikarna ändras värdet för motsvarande egenskap i fliken "Alla sidor" till "undefined" (standardvärde).
I exemplet nedan angavs kantlinjefärgen till svart och ändrades sedan till röd för den övre kantlinjen.
Koden som infogas baseras på inställningen för stenografisk eller långform.
Vid Inspektera fokuseras flikarna baserat på de ”angivna” flikarnas prioritet. Den högsta prioriteten har fliken Alla sidor, följt av Överkant, Höger, Nederkant och Vänster. Om till exempel endast det övre värdet för en kantlinje anges flyttar det beräknade läget fokus till fliken "Övre" och ignorerar fliken "Alla sidor" eftersom fliken "Alla sidor" inte är angiven.
Med funktionen Aktivera/inaktivera CSS-egenskap kan du kommentera bort delar av CSS från CSS Designer-panelen, utan att behöva ändra direkt i koden. När du kommenterar bort delar av CSS kan du visa hur vissa egenskaper och värden påverkar sidan.
När du inaktiverar en CSS-egenskap läggs CSS-kommentarstaggar och etiketten [inaktiverad] till i CSS-egenskapen som du inaktiverar. Du kan sedan på ett enkelt sätt aktivera om eller ta bort den inaktiverade CSS-egenskapen efter eget önskemål.
Du kan inaktivera eller ta bort varje egenskap med CSS Designer.
På följande skärmbild visas ikonerna för inaktivering och borttagning för egenskapen height. Ikonerna visas när du för musen över egenskapen.
Du kan också använda kontrollerna för att ta bort och inaktivera på kantlinjekontrollgruppnivå för att tillämpa dessa åtgärder på alla egenskaperna.
Du kan använda kortkommandon för att lägga till eller ta bort CSS-väljare och egenskaper. Du kan också navigera mellan egenskapsgrupperna i panelen Egenskaper.
|
Kortkommando |
Arbetsflöde |
|
CTRL+Alt+[Shift =] |
Lägger till en väljare (om kontrollen är i väljarsektionen) |
|
CTRL+Alt+S |
Lägger till en väljare (om kontrollen är var som helst i programmet) |
|
CTRL+Alt+[Skift =] |
Lägger till en egenskap (om kontrollen är i egenskapssektionen) |
|
CTRL+Alt+P |
Lägger till en egenskap (om kontrollen är var som helst i programmet) |
|
Markera + Delete |
Tar bort väljaren om den är markerad |
|
CTRL+Alt+(PgUp/PgDn) |
Hoppa mellan sektioner när du arbetar på underpanelen Egenskaper |
För det mesta är en enda CSS-väljare kopplad till flera sidelement. Texten i en sidas huvudinnehåll, sidhuvud och sidfot kan till exempel alla vara kopplade till samma CSS-väljare. När du redigerar CSS-väljarens egenskaper påverkas alla element som är kopplade till väljaren, inklusive element som du kanske inte vill ändra.
Live-markering hjälper dig att identifiera alla element som är kopplade till en CSS-väljare. Om du vill ändra inställningarna för ett enda element eller vissa av elementen kan du skapa en ny CSS-väljare för dessa element och sedan redigera egenskaperna.
Identifiera vilka sidelement som är kopplade till en CSS-väljare genom att föra musen över väljaren i Live-vy (med Live-kod ”Off”). Dreamweaver markerar de kopplade elementen med prickade linjer.
Klicka på väljaren om du vill låsa markeringen av elementen. Elementen är nu markerade med en blå kant.
Klicka på väljaren igen om du vill ta bort den blå kanten runt elementen.
Live-markering är aktiverat som standard. Om du vill inaktivera Live-markering öppnar du alternativen för Live-vyn i verktygsfältet Dokument och klickar på Inaktivera Live-markering.
När du redigerar en extern CSS-formatmall uppdateras alla dokument som är länkade till den CSS-formatmallen i enlighet med redigeringarna.
Du kan exportera CSS-formaten i ett dokument om du vill skapa en ny CSS-formatmall och koppla eller länka till en extern formatmall om du vill använda formaten i den.
Alla formatmallar som du skapar eller kopierar till platsen kan kopplas till sidorna.
Öppna CSS Designer genom att göra något av följande:
Klicka på + bredvid Källor i CSS Designer och välj Bifoga befintlig CSS-fil.
Gör något av följande:
Klicka på knappen Förhandsvisa när du vill verifiera att formatmallen använder de önskade formaten på den aktuella sidan.
Om de format som används inte är de du förväntade dig klickar du på Avbryt för att ta bort formatmallen. Sidan återställs då till det tidigare utseendet.
Klicka på OK.
Skapa snygga webbplatser i Dreamweaver
Designa, koda och hantera dynamiska webbplatser med ett kraftfullt allt-i-ett-verktyg.
