Användarhandbok Avbryt

Arbeta med head-innehåll för sidor

  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

 

Visa och redigera innehåll på en Dreamweaver-webbsida, ange metaegenskaper för sidans titel, ange nyckelord och beskrivningar för en sida med mera.

Sidor innehåller element som beskriver informationen på sidan, som används av webbläsare. Om du vill styra hur sidorna identifieras ställer du in egenskaperna för head-elementen.

Visa och redigera huvudinnehåll

Du kan visa elementen i head-sektionen i ett dokument genom att använda kodvyn eller kodkontrollen.

Infoga ett element i head-sektionen i ett dokument

  1. Välj en head-tagg från Infoga > HTML.

  2. Ange alternativen för elementen i dialogrutan som visas eller i egenskapskontrollen.

Redigera ett element i head-sektionen i ett dokument

Du kan redigera head-element genom att skriva in koden direkt i kodvyn eller i Egenskapskontrollen.

Så här redigerar du element i head-sektionen med Egenskapskontrollen:

  1. Markera head-elementet i DOM-panelen (Fönster > DOM-panelen). 

    Egenskaperna för det valda elementet visas i Egenskapskontrollen.

  2. Ange eller ändra egenskaperna för elementet i egenskapskontrollen.

Ange sidans meta-egenskaper

En meta-tagg är ett head-element som registrerar information om den aktuella sidan, t.ex. teckenkodning, författare, upphovsrätt eller nyckelord. Dessa taggar kan även användas för att ge information till servern, t.ex. utgångsdatumet, uppdateringsintervall och POWDER-klassificering för sidan. (POWDER, Protocol for Web Description Resources, är en metod för att tilldela klassificeringar, t.ex. filmrecensioner, till webbsidor.)

Lägga till en meta-tagg

  1. Välj Infoga > HTML > Meta.

  2. Ange egenskaperna i dialogrutan som visas.

Redigera en befintlig meta-tagg

Du kan redigera metaelement genom att skriva in koden direkt i kodvyn eller i Egenskapskontrollen.

Så här redigerar du element i metasektionen med Egenskapskontrollen:

  1. Markera head-elementet i DOM-panelen (Fönster > DOM-panelen). 

    Egenskaperna för det valda elementet visas i Egenskapskontrollen.

  2. Välj en metatagg från DOM-panelen.

  3. Ange egenskaperna i egenskapskontrollen.

    Attribut

    Anger huruvida meta-taggen innehåller beskrivande information om sidan (name) eller HTTP-huvudinformation (http-equiv).

    Värde

    Anger typen av information som du uppger i den här taggen. Vissa värden, till exempel description, keywords och refresh är redan väl definierade (och har sina egna individuella egenskapskontroller i Dreamweaver), men du kan ange praktiskt taget alla värden (till exempel creationdate, documentID och level).

    Innehåll

    Anger den faktiska informationen. Om du till exempel angav level för Värde kan du ange beginner, intermediate eller advanced för Innehåll.

Ange sidans rubrik

Det finns bara en titelegenskap: titeln på sidan. Du kan ändra sidrubriken på något av följande sätt:

  • Redigera rubriken i koden direkt (i kodvyn)
  • Markera rubriktaggen på DOM-panelen och redigera rubriken i Egenskapskontrollen

Ange nyckelord för sidan

Många sökrobotar (program som automatiskt bläddrar i den insamlade webbinformationen för sökmotorer som ska indexeras) läser innehåll i meta-taggen för nyckelord och använder informationen till att indexera sidorna i sina databaser. Eftersom vissa sökmotorer begränsar antalet nyckelord eller tecken som de indexerar eller ignorerar alla nyckelord om du överskrider gränsen är det bra att bara använda ett par väl utvalda nyckelord.

Lägga till en meta-tagg för nyckelord

  1. Välj Infoga > HTML > Nyckelord.

  2. Ange nyckelorden, avgränsade med kommatecken, i dialogrutan som visas.

Redigera en meta-tagg för nyckelord

Du kan ändra metabeskrivningarna för nyckelorden på något av följande sätt:

  • Redigera nyckelordet direkt i koden (i kodvyn)
  • Välj metataggen för nyckelordet på DOM-panelen och visa, ändra eller ta bort nyckelord i Egenskapskontrollen.
Obs!

Nyckelord avgränsas med kommatecken.

Ange beskrivningar för sidan

Många sökrobotar (program som automatiskt bläddrar i den insamlade webbinformationen för sökmotorer som ska indexeras) läser innehåll i meta-taggen för beskrivning. Vissa använder informationen för att indexera dina sidor i sina databaser och vissa visar även informationen på sökresultatsidan (istället för att visa de första raderna i dokumentet). En del sökmotorer begränsar antalet tecken som de indexerar, så det kan vara bra att begränsa beskrivningen till ett fåtal ord (till exempel fläskgrillcatering på Djurgården, Stockholm, eller webbdesign till rimliga priser för kunder globalt).

Lägga till en meta-tagg för beskrivning

  1. Välj Infoga > HTML > Beskrivning.

  2. Ange beskrivande text i dialogrutan som visas.

Redigera en meta-tagg för beskrivning

Du kan ändra metabeskrivningarna på något av följande sätt:

  • Redigera beskrivningen direkt i koden (i kodvyn)
  • Välj metataggen för beskrivningen på DOM-panelen och redigera beskrivningen i Egenskapskontrollen.

Ange uppdateringsegenskaper för sidan

Använd elementet Uppdatera för att ange att webbläsaren automatiskt ska uppdatera din sida, genom att läsa in den aktuella sidan på nytt eller genom att gå till en annan, efter en viss tid. Elementet används ofta för att hänvisa användare från en URL-adress till en annan, ofta efter att ha visat ett textmeddelande om att URL-adressen har ändrats.

Lägga till en meta-tagg för uppdatering

  1. Välj Infoga > HTML > Meta.

  2. Ange egenskaperna enligt följande i den dialogruta som visas:

    Attribut

    Anger att meta-taggen innehåller information om HTTP-rubriken (http-motsvarighet).

    Värde

    Anger att informationstypen som du anger i den här taggen är refresh.

    Innehåll

    Ange tid i sekunder innan sidan uppdateras i webbläsaren. Om du vill att webbläsaren ska uppdatera sidan direkt efter inläsning skriver du in 0 i den här rutan.

Redigera en meta-tagg för uppdatering

Du kan ändra meta-taggen för uppdatering på något av följande sätt:

  • Redigera egenskaperna direkt i koden (i kodvyn)
  • Välj meta-taggen för uppdatering på DOM-panelen eller i koden och redigera egenskaperna i Egenskapskontrollen.

Redigera en basmeta-tagg

Du kan redigera det baselement som används för att ange den grundläggande URL-adress som alla dokumentberoende sökvägar på sidan anses vara beroende av.

  1. Välj ett baselement på DOM-panelen.

  2. Ange egenskaperna för basmeta-taggen i egenskapskontrollen.

    Href

    Bas-URL. Klicka på knappen Bläddra för att bläddra till och markera en fil eller skriv in en sökväg i rutan.

    Mål

    Anger ramen eller fönstret som alla länkade dokument ska öppnas i. Välj en av ramarna i den aktuella ramuppsättningen eller ett av följande reserverade namn:

    • _blank läser in det länkade dokumentet i ett nytt, namnlöst webbläsarfönster.

    • _parent läser in det länkade dokumentet i den överordnade ramuppsättningen eller det överordnade fönstret för den ram som innehåller länken. Om ramen som innehåller länken inte är kapslad motsvarar detta _top och det länkade dokumentet läses in i hela webbläsarfönstret.

    • _self läser in det länkade dokumentet i samma ram eller fönster som länken. Standardinställningen är det här målet, så du behöver oftast inte ange detta.

    • _top läser in det länkade dokumentet i hela webbläsarfönstret och tar därigenom bort alla ramar.

Redigera en Link-meta-tagg

Du kan redigera en link-tagg som definierar förhållandet mellan det aktuella dokumentet och en annan fil.

Obs!

link-taggen i head-avsnittet är inte samma sak som en HTML-länk mellan dokument i body-avsnittet.

  1. Välj Link-elementet på DOM-panelen eller i kodvyn.

  2. Ange egenskaperna för Link-meta-taggen i egenskapskontrollen.

    Href

    URL-adressen till filen som du definierar ett förhållande till. Klicka på knappen Bläddra för att bläddra till och markera en fil eller skriv in en sökväg i rutan. Observera att det här attributet inte anger en fil som du länkar till som vanligt med HTML. De förhållanden som anges i ett länkelement är mer komplicerade.

    ID

    Anger en unik identifierare för länken.

    Titel

    Anger förhållandet. Det här attributet har särskild relevans för länkade formatmallar. Mer information finns i avsnittet External Style Sheets i HTML 4.0-specifikationen på webbplatsen för World Wide Web Consortium på www.w3.org/TR/REC-html40/present/styles.html#style-external.

    Rel

    Anger förhållandet mellan det aktuella dokumentet och dokumentet i rutan Href. Möjliga värdenär Alternate, Stylesheet, Start, Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help och Bookmark. Om du vill ange mer än ett förhållande avgränsar du värdena med ett mellanslag.

    Rev

    Anger ett omvänt förhållande (motsatsen till Rel) mellan det aktuella dokumentet och dokumentet i rutan Href. Möjliga värden är desamma som de för Rel.

Adobes logotyp

Logga in på ditt konto