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-panelen (Fönster > CSS Designer) är en CSS-egenskapskontroll där du ”visuellt” kan skapa CSS-format och -filer och ange egenskaper och mediefrågor.
Följande avsnitt finns tillgängliga i CSS Designer-gränssnittet:
Med CSS Designer kan du redigera en enskild regel i en CSS-formatmall (använd fliken Aktuell i CSS Designer). Om du föredrar det kan du arbeta direkt i CSS-formatmallen (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.
Det är bara operatorn ”And” som 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.
På panelen CSS Designer väljer du en CSS-källa i rutan Källor eller en mediefråga i rutan @Media.
I rutan Väljare klickar du på . Beroende på vilket element du valt i dokumentet identifierar och föreslår CSS Designer en lämplig väljare (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 något av de tillgängliga alternativen:
Klicka på väljaren och dra den till en ny position i rutan Väljare.
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 width eller border-collapse, 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 att använda kod kan du ange kodförkortningar för marginaler och utfyllnad i snabbredigeringsrutorna, se följande exempel.
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.
Du kan när du vill inaktivera eller ta bort specifika värden, till exempel värdet för vänster marginal samtidigt som du behåller värdena för höger, övre och undre marginal.
Egenskaper för kantkontroll är ordnade på logiska flikar så att du snabbt kan visa och ändra egenskaperna.
Om du föredrar att använda kod kan du ange kodförkortningar för kanter och kantradie i textrutorna för snabbredigering.
Om du vill ange egenskaper för kantkontroll anger du först egenskaperna på fliken Alla sidor. Då aktiveras de övriga flikarna och egenskaperna som har angetts på fliken Alla sidor återspeglas för enskilda kanter.
När du ändrar en egenskap på de enskilda kanternas flikar ändras motsvarande egenskap på fliken Alla sidor till ”undefined” (standardvärde).
I exemplet nedan angavs kantfärgen som svart och ändrades sedan till röd för den övre kanten.
Koden som infogas baseras på inställningen för förkortning eller lång form.
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 exempelvis enbart värdet för överkant har angetts flyttar det beräknade läget fokus till fliken Överkant, och ignorerar fliken Alla sidor eftersom fliken Alla sidor inte har angetts.
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 de olika egenskaperna med hjälp av 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å gruppnivå för kantkontrollen om du vill tillämpa åtgärderna på alla egenskaper.
Du kan använda kortkommandon för att lägga till eller ta bort CSS-väljare och egenskaper. Du kan även navigera mellan de olika egenskapsgrupperna i rutan Egenskaper.
|
Kortkommando |
Arbetsflöde |
|
CTRL+Alt+[Skift =] |
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 Koppla 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.
