Användarhandbok Avbryt

Utforma sidor med hjälp av CSS Designer

  1. Användarhandbok för Dreamweaver
  2. Introduktion
    1. Grunderna i responsiv webbdesign
    2. Nyheter i Dreamweaver
    3. Webbutveckling med Dreamweaver – översikt
    4. Dreamweaver/vanliga frågor
    5. Kortkommandon
    6. Systemkrav för Dreamweaver
    7. Sammanfattning av funktioner
  3. Dreamweaver och Creative Cloud
    1. Synka inställningarna för Dreamweaver med Creative Cloud
    2. Creative Cloud Libraries i Dreamweaver
    3. Använda Photoshop-filer i Dreamweaver
    4. Arbeta med Adobe Animate och Dreamweaver
    5. Extrahera webboptimerade SVG-filer från bibliotek
  4. Arbetsytor och vyer i Dreamweaver
    1. Arbetsytan i Dreamweaver
    2. Optimera Dreamweaver-arbetsytan för visuell utveckling
    3. Söka efter filer baserat på filnamn eller innehåll | Mac OS
  5. Skapa webbplatser
    1. Om Dreamweaver-platser
    2. Skapa en lokal version av din webbplats
    3. Ansluta till en publiceringsserver
    4. Ställa i ordning en testserver
    5. Importera och exportera inställningarna för en Dreamweaver-plats
    6. För över befintliga webbplatser från en fjärrserver till din lokala platsrot
    7. Tillgänglighetsfunktioner i Dreamweaver
    8. Avancerade inställningar
    9. Ange platsinställningar för överföring av filer
    10. Ange proxyserverinställningar i Dreamweaver
    11. Synka inställningarna för Dreamweaver med Creative Cloud
    12. Använda Git i Dreamweaver
  6. Hantera filer
    1. Skapa och öppna filer
    2. Hantera filer och mappar
    3. Hämta och skicka filer till och från servern
    4. Checka in och checka ut filer
    5. Synka filer
    6. Jämför skillnader mellan filer
    7. Dölja filer och mappar på din Dreamweaver-plats
    8. Aktivera Design Notes för Dreamweaver-platser
    9. Sätta stopp för Gatekeeper
  7. Layout och design
    1. Använda visuella hjälpmedel för layout
    2. Layouta sidor med CSS
    3. Designa responsiva webbplatser med Bootstrap
    4. Skapa och använda mediefrågor i Dreamweaver
    5. Visa innehåll med tabeller
    6. Färger
    7. Responsiv design med flytande stödrasterlayouter
    8. Extract i Dreamweaver
  8. CSS
    1. Förstå Cascading Style Sheets (CSS)
    2. Utforma sidor med hjälp av CSS Designer
    3. Använda CSS-förbehandlare i Dreamweaver
    4. Ange CSS-formatinställningar i Dreamweaver
    5. Flytta CSS-regler i Dreamweaver
    6. Konvertera infogad CSS till en CSS-regel i Dreamweaver
    7. Arbeta med div-taggar
    8. Använda övertoningar på bakgrunden
    9. Skapa och redigera CSS3-övergångseffekter i Dreamweaver
    10. Formatera kod
  9. Sidinnehåll och resurser
    1. Ange sidegenskaper
    2. Ange CSS-rubrikegenskaper och CSS-länkegenskaper
    3. Arbeta med text
    4. Sök och ersätt text, taggar och attribut
    5. DOM-panel
    6. Redigera i live-vyn
    7. Koda dokument i Dreamweaver
    8. Markera och visa element i dokumentfönstret
    9. Ange textegenskaper i egenskapskontrollen
    10. Stavningskontrollera en webbsida
    11. Använda vågräta linjer i Dreamweaver
    12. Lägga till och ändra teckensnittskombinationer i Dreamweaver
    13. Arbeta med resurser
    14. Infoga och uppdatera datum i Dreamweaver
    15. Skapa och hantera favoritresurser i Dreamweaver
    16. Infoga och redigera bilder i Dreamweaver
    17. Lägga till medieobjekt
    18. Lägga till videor i Dreamweaver
    19. Infoga HTML5-video
    20. Infoga SWF-filer
    21. Lägga till ljudeffekter
    22. Infoga HTML5-ljud i Dreamweaver
    23. Arbeta med biblioteksobjekt
    24. Använda arabisk och hebreisk text i Dreamweaver
  10. Länkar och navigering
    1. Om länkar och navigering
    2. Länkning
    3. Bildmappningar
    4. Felsöka länkar
  11. jQuery-widgetar och effekter
    1. Använda jQuery-gränssnitt och mobilwidgetar i Dreamweaver
    2. Använd jQuery-effekter i Dreamweaver
  12. Koda webbplatser
    1. Om kodning i Dreamweaver
    2. Kodningsmiljön i Dreamweaver
    3. Ange kodningspreferenser
    4. Anpassa kodfärger
    5. Skriva och redigera kod
    6. Kodtips och kodkomplettering
    7. Komprimera och utöka kod
    8. Återanvända kod med fragment
    9. Granska kod
    10. Optimera kod
    11. Redigera kod i designvyn
    12. Arbeta med head-innehåll för sidor
    13. Infoga SSI i Dreamweaver
    14. Använda taggbibliotek i Dreamweaver
    15. Importera egna taggar i Dreamweaver
    16. Använda JavaScript-beteenden (allmänna instruktioner)
    17. Använda inbyggda JavaScript-beteenden
    18. Om XML och XSLT
    19. Utföra XSL-omvandlingar på servern i Dreamweaver
    20. Utföra XSL-omvandlingar på klienten i Dreamweaver
    21. Lägga till teckenentiteter för XSLT i Dreamweaver
    22. Formatera kod
  13. Arbetsflöden mellan produkter
    1. Installera och använda tillägg i Dreamweaver
    2. Uppdateringar i appen i Dreamweaver
    3. Infoga Microsoft Office-dokument i Dreamweaver (endast Windows)
    4. Använda Fireworks och Dreamweaver
    5. Redigera innehåll på Dreamweaver-webbplatser med Contribute
    6. Integrering mellan Dreamweaver och Business Catalyst
    7. Skapa anpassade e-postkampanjer
  14. Mallar
    1. Om Dreamweaver-mallar
    2. Känna igen mallar och mallbaserade dokument
    3. Skapa en Dreamweaver-mall
    4. Skapa ändringsbara regioner i mallar
    5. Skapa upprepande regioner och tabeller i Dreamweaver
    6. Använd valfria regioner i mallar
    7. Definiera redigerbara taggattribut i Dreamweaver
    8. Skapa kapslade mallar i Dreamweaver
    9. Redigera, uppdatera och ta bort mallar
    10. Exportera och importera XML-innehåll i Dreamweaver
    11. Lägga till eller ta bort en mall från ett befintligt dokument
    12. Redigera innehåll i Dreamweaver-mallar
    13. Syntaxregler för malltaggar i Dreamweaver
    14. Ange markeringsinställningar för mallområden
    15. Fördelar med att använda mallar i Dreamweaver
  15. Mobiler och flera skärmar
    1. Skapa mediefrågor
    2. Ändra sidorientering för mobila enheter
    3. Skapa webbappar för mobila enheter med Dreamweaver
  16. Dynamiska webbplatser, sidor och webbformulär
    1. Förstå webbprogram
    2. Konfigurera datorn för programutveckling
    3. Felsöka databasanslutningar
    4. Ta bort anslutningsskript i Dreamweaver
    5. Utforma dynamiska sidor
    6. Översikt över källor med dynamiskt innehåll
    7. Definiera källor med dynamiskt innehåll
    8. Lägga till dynamiskt innehåll på sidor
    9. Ändra dynamiskt innehåll i Dreamweaver
    10. Visa databasposter
    11. Ange och felsöka livedata i Dreamweaver
    12. Lägga till anpassade serverbeteenden i Dreamweaver
    13. Bygga formulär med Dreamweaver
    14. Använda formulär för att samla in information från användarna
    15. Skapa och aktivera ColdFusion-formulär i Dreamweaver
    16. Skapa webbformulär
    17. Förbättrat HTML5-stöd för formulärelement
    18. Använda Dreamweaver för att utveckla ett formulär
  17. Bygga program visuellt
    1. Bygga huvud- och detaljsidor i Dreamweaver
    2. Bygga sök- och resultatsidor
    3. Bygga en postinmatningssida
    4. Bygga en postuppdateringssida i Dreamweaver
    5. Bygga postborttagningssidor i Dreamweaver
    6. Förändra en databas med hjälp av ASP-kommandon i Dreamweaver
    7. Bygga en registreringssida
    8. Bygga en inloggningssida
    9. Bygga en sida som bara behöriga användare har åtkomst till
    10. Skydda mappar i ColdFusion med Dreamweaver
    11. Använda ColdFusion-komponenter i Dreamweaver
  18. Testa, förhandsgranska och publicera webbplatser
    1. Förhandsgranska sidor
    2. Förhandsgranska Dreamweaver-webbsidor på flera enheter
    3. Testa Dreamweaver-platsen

 

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.

Adobes logotyp

Logga in på ditt konto