Användarhandbok Avbryt

Utforma sidor med hjälp av CSS Designer

 

 

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
CSS Designer-panel

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:

  • Källor: En samling CSS-filer som är kopplad till projektet
  • @Media: Mediefrågor som styr skärmstorleken
  • Väljare: Väljare som är kopplade till de valda mediefrågorna på panelen @Media
  • Egenskaper: Egenskaper som är kopplade till den valda väljaren, med ett alternativ för att endast visa de angivna egenskaperna

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).

Skapa och bifoga formatmallar

  1. I rutan KällorCSS Designer-panelen klickar du på och sedan på ett av följande alternativ:

    • Skapa en ny CSS-fil: Så här skapar du och bifogar en ny CSS-fil till dokumentet
    • Koppla befintlig CSS-fil: Så här kopplar du en befintlig CSS-fil till dokumentet
    • Definiera på sida: Så här definierar du en CSS-formatmall i dokumentet
    Skapa och koppla formatmallar med hjälp av CSS Designer
    Skapa och koppla formatmallar med hjälp av CSS Designer

    Beroende på vilket alternativ du väljer visas dialogrutan Skapa en ny CSS-fil eller dialogrutan Koppla befintlig CSS-fil.

  2. 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.

  3. Gör något av följande:

    • Klicka på Länka och koppla Dreamweaver-dokumentet till CSS-filen
    • Klicka på Importera och importera CSS-filen till dokumentet.
  4. (Valfritt) Klicka på Villkorsstyrd användning och ange den mediefråga du vill associera med CSS-filen.

Definiera mediefrågor

  1. I CSS Designer-panelen klickar du på en CSS-källa i rutan Källor.

  2. 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.

  3. Välj de Villkor du behöver.

    Definiera mediefrågor
    Definiera mediefrågor

    Kontrollera noga att du anger giltiga värden för alla villkor du väljer. Annars kan inte motsvarande mediefrågor skapas.

    Obs!

    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.

Definiera CSS-väljare

  1. På panelen CSS Designer väljer du en CSS-källa i rutan Källor eller en mediefråga i rutan @Media.

  2. 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:

    • Använd upp- eller nedpilarna om du vill göra den föreslagna väljaren mer eller mindre specifik.
    • Ta bort den föreslagna regeln och skriv väljaren. Du måste skriva namnet på väljaren tillsammans med beteckningen för typen av väljare. Om du till exempel anger ett ID skriver du ”#” framför namnet på väljaren.
    • Om du vill söka efter en specifik väljare använder du sökrutan högst upp i rutan.
    • Om du vill byta namn på en väljare klickar du på väljaren och skriver önskat namn.
    • Om du vill ändra väljarnas inbördes ordning drar du dem till önskad position.
    • Om du vill flytta en väljare från en källa till en annan drar du väljaren till den önskade källan i rutan Källa.
    • Om du vill duplicera en väljare i den valda källan högerklickar du på väljaren och klickar på Duplicera.
    • Om du vill duplicera en väljare och lägga till den i en mediefråga högerklickar du på väljaren, för markören över Duplicera till mediefråga och väljer sedan mediefrågan.

    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.

Kopiera och klistra in stilar

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:

  • Om det inte finns några stilar för en väljare är alternativen Kopiera och Kopiera alla stilar inaktiverade.
  • Klistra in stilar är inaktiverat för fjärrplatser som inte kan redigeras. Men Kopiera och Kopiera alla stilar är tillgängliga.
  • Det går att klistra in stilar som redan delvis finns i en väljare (överlappande). Unionen för alla väljare klistras in.
  • Det går också att kopiera och klistra in stilar för olika CSS-filkopplingar, t.ex. import, länk och infogade stilar.
Kopiera och klistra in format
Kopiera och klistra in format

Ordna om väljare

Klicka på väljaren och dra den till en ny position i rutan Väljare.

Ange CSS-egenskaper

Egenskaperna är grupperade i följande kategorier och representeras av olika ikoner högst upp i rutan Egenskaper:

  • Layout
  • Text
  • Kant
  • Bakgrund
  • Mer (lista med ”endast text”-egenskaper och inte egenskaper med visuella kontroller)
Obs!

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.

Ställa in marginaler, utfyllnad och position

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.

margin-egenskap
Margin-egenskapen

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.

Ange kantegenskaper

Egenskaper för kantkontroll är ordnade på logiska flikar så att du snabbt kan visa och ändra egenskaperna. 

Egenskaper för kantkontroll
Egenskaper för kantkontroll

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. 

Ange kantfärg för alla sidor
Ange kantfärg för alla sidor

Kant på alla sidor
Kant på alla sidor

Ange kantfärg överst
Ange kantfärg överst

Kantfärg angiven som röd för övre
Kantfärg angiven som röd för övre

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.

Inaktivera eller ta bort egenskaper

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.

Inaktivera/ta bort egenskap
Inaktivera/ta bort egenskap

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.

Kortkommandon

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 

Identifiera sidelement som är kopplade till en CSS-väljare

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. 

Länka till en extern CSS-formatmall

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.

  1. Öppna CSS Designer genom att göra något av följande:

    • Välj Fönster > CSS Designer.
    • Tryck på Skift+F11.
  2. Klicka på + bredvid Källor i CSS Designer och välj Koppla befintlig CSS-fil.

    Koppla befintlig CSS-fil
    Koppla befintlig CSS-fil

  3. Gör något av följande:

    • Klicka på Bläddra om du vill bläddra till en extern CSS-formatmall.
    • Ange sökvägen till formatmallen i rutan Fil/URL.
  4. 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.

  5. Klicka på OK.

Få hjälp snabbare och enklare

Ny användare?