<< Tillbaka

Heidiuppgift

Den färdiga uppgiften skall se ut ungefär så här:

Steg för steg

  1. Skapa lämplig katalog på din webbplats. Kalla den exvis Heidi. Skapa underkatalogerna Bild och Css för filer av dessa slag.
  2. Spara ner de bilder som skall användas, samt det Word-dokument som innehåller artikelns text.
    Länk till bild 1.
    Länk till bild 2.
  3. Skapa ett nytt dokument i Dreamweaver.
  4. Spara dokumentet som heidi.htm.
  5. Gå in i kodläget och lägg in två divtagar i dokumentets body-del. Namnge divtagarna enligt nedanstående kodförlaga:
    <div id="divText">
          Lorem ipsum (text)
    </div>
    <div id="divBild">
         Lorem ipsum (bild)
    </div>
  6. Gå till designläge. Skärmen bör se ut ungefär så här:
  7. Redigera CSS-egenskaper för den första div-tagen, genom att klicka på +-tecknet i paletten Layout/Styles.
  8. Fyll i den ruta som dyker upp enligt nästa illustration. Lägg märke till att du skall skapa en ny fil med css-formatmallar.
  9. Du kommer att uppmanas att spara din css-fil. Gör det:
  10. Ange positionering av div-tagen, genom att gå in under fliken Positioning:
  11. Klicka OK och gå tillbaka till designläget. Lägg nu in bilden cohen.gif i i divtagen #divText (dvs där som det står Lorem Ipsum (text)). Lägg därefter in artikelns text, genom att först öppna Worddokumentet, och därefter kopiera allt utom de sista tre raderna till samma divtag (#divText). Det skall se ut ungefär så här:
  12. Markera bilden och sätt dess namn till passfoto nere i Properties-paletten.
  13. Klicka åter på +-tecknet (New CSS-style) på Design/Css Style-paletten. Ange att du i heidi.css vill formatera #passfoto.
  14. Gå till fliken Box och välj alternativet left under rubriken float. Ställ även in padding enligt följande:
    - padding-top: 30px;
    - padding-right: 25px;
    - padding-bottom: 20px;
    - padding-left: 0px;
  15. Dags att formatera textens typografi. Börja med tagen H1. Klicka åter på Designpalettens plustecken.
  16. Ställ in följande under fliken Type:
    Arial, Helvetica, sans-serif
    36 px
    bold
    färg #666666 (grå)
  17. Upprepa samma procedur för taggarna H2 och H3. Teckensnitt och form skall vara samma som för H1. Däremot skall storleken vara annorlunda:
    H2 24px
    H3 16px
  18. Ta därefter bort avstånd mellan alla rubriker genom att sätta bottenmarginalen till 0 px.
  19. Fortsätt att formatera P-taggar och LI-taggar enligt följande:
    Georgia, "Times New Roman", Times, serif
    12px
    margin-top: 0px
  20. Lägg in en rödprickig ramlinje i vänsterkanten av #divText.
  21. Lägg in formattering för de textelement som är markerade med tagen STRONG, dvs text med fet stil. Gör texten tegelröd (#990000).
  22. Gå sedan över till divtagen #divBild. För närvarande ligger den uppe i vänstra hörnet och innehåller en Lorem Ipsum-text. Byt ut Lorem Ipsum-texten mot de tre sista raderna i Worddokumentet. Så här kommer det att se ut:
  23. Skapa ny Css-style för att formatera #divBild
  24. Försök hitta rätt bland flikarna och ställ in följande egenskaper:
    Type-fliken
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 12px;
    color: #cccccc;
    Position-fliken
    position: absolute;
    width: 165px;
    left: 28px;
    top: 239px;
    z-index: 2;
    Border-fliken
    border: thin inset #0033ff;
    Background-fliken
    background-color: #000066;
    Box-fliken
    padding: 5px;
  25. Lägg till sist in en bakgrundsbild i BODY-tagen:

  26. Bläddra fram den bild som skall vara bakgrund.
  27. Justera eventuellt placeringen av lagren så att de överensstämmer med förlagan överst på denna sida.
  28. Slut