sammanfattnig dub

Post on 04-Apr-2018

228 views

Category:

Documents

0 download

Embed Size (px)

TRANSCRIPT

  • 7/30/2019 Sammanfattnig DUB

    1/12

    Sammanfattnig DUBVi ska skapa en layout som ser ut shr.

  • 7/30/2019 Sammanfattnig DUB

    2/12

    Vi brjar med att skapa en DIV som hller ihop allt. Dvs den ska innehlla Header, navbar, content

    och footer

    Klicka p Insert new div.

    Det hr ska ju bli en ID-selektor s skriv wrapper p ID.

    OK

    Vlj New Style Sheet File

    D skapar dreamweaver en egen fil dr du har all CSS-kod.

  • 7/30/2019 Sammanfattnig DUB

    3/12

    OK

    vlj var du vill spara din nya style sheet och dp den, vlj sedan spara.

    Klicka OK p nsta ruta som kommer upp. Den rutan r om vi vill att dreamweaver ska skriva kod t

    oss. Men vi vill skriva koden sjlv. Klick OK p alla pop-rutor.

    Som du ser har vi nu skapat en DIV.

    Den DIV r stylade med en Id-selektor som heter Wrapper.

    Klicka p kodvyn och kontrollera i body s att du hittar den hr kodraden.

  • 7/30/2019 Sammanfattnig DUB

    4/12

    Content for id "wrapper" Goes Here

    Det verkar vara rtt.

    Egenskaper fr vr wrapperNu ska vi ge lite egenskaper till vr wrapper, tex hur bred den ska vara. Det fixar vi nu.

    Hgerklicka p #wrapper under CSS boxen och vlj go to code.

    Din style sheet ppnas.

    Stll in de hr attributen s du blir njd.

    width jag satte min till 850px;

    height stt ingenting hr, du vill ju att sidan ska kunna ka i hjd ju mer du lgger p den.

    margin ifall du alltid vill ha din sida i mitten oavsett hur bred display den visas p

  • 7/30/2019 Sammanfattnig DUB

    5/12

    position om du vill styra exakt var den ska vara.

    Jag gjorde min s att den blir 850px bred. Jag satte inget vrde fr hjd eftersom jag vill att den ska

    kunna ka i hjd beroende p hur mycket jag lgger p sidan. Det borde se ut s hr nu.

    delete Content for id "wrapper" Goes Here. Den r bara ivgen.

    Vi fortstter och skapar Header, navbar,content och footer I den ordningen. De ska alla ligga inuti din

    wrapper.

    Hr visar jag hur jag gr header.

    G till kodvyn igen

    Se till s att du str ngonstans inuti din wrapper, dvs mellan och

    Klicka sedan p Insert DIV tag

    P ID skriver du header

    Klicka p New CSS Style.

    OK p nsta

    OK p nsta

    Gr likadant som du gjorde med din wrapper och stll in vilken storlek du ska ha p din header

    genom att skriva in vrdet p height. Width kan du skriva till 100% eftersom header ska ta upp hela

    bredden p wrapper.

    Jag satte height till 250px s jag fr plats att lgga in en snygg logotype.

    Jag skrev ingen annan kod

    http://www.htmldog.com/guides/cssadvanced/layout/http://www.htmldog.com/guides/cssadvanced/layout/http://www.htmldog.com/guides/cssadvanced/layout/
  • 7/30/2019 Sammanfattnig DUB

    6/12

    Fortstt att lgg in navbar, sedan content och sedan footer.

    Du kan vnta med att styla dem till senare. S hr ska det se ut nr du r klar.

    Nu kan du g in och skriva in vad du vill ha fr bredd och hjd p dina DIV.

    Hgerklicka under CSS paletten och vlj Go to Code.

  • 7/30/2019 Sammanfattnig DUB

    7/12

    OBS!!!

    Kom ihg att din wrapper r stylad att vara 850px. Du mste allts rkna lite i huvudet om du ska f

    plats med bde navbar och content dr.

    Jag satte min navbar till 150px och min content till 700px (150+700=850)

    S hr r min sida ut nu i dw.

    Nu ska vi ordna s att navbar och content hamnar bredvid varandra.

    Fr att lyckas med det behver vi skapa en float p bda.

  • 7/30/2019 Sammanfattnig DUB

    8/12

    Lgg in den hr koden i content och navbar

    float:left;

    allts;

    #content

    {

    float:left;

    }

    Som du mrker kommer bda att lgga sig bredvid varandra precis som vi tnkt oss.

    Fixa placeringen p footer

    Face rolla s du fr lite random text p navbar och content.

    Som du mrker sticker footer in under navbar, vilket blir fult. Nu ska vi f den att stanna lngst ner p

    sidan.

    Det fixar vi genom att skapa ett block element som ligger mellan kontent och navbar. Ett block

    element r ju en html-tag som tar upp en hel rad som du minns.

    Jag vljer att skapa en div.

    Nr jag har skapat div skapar jag en klass. Jag dper klassen till clear. Anledningen till att jag vill ha en

    class hr r sklart att jag vill kunna anvnda den igen.

    Anvnd % istllet fr px

    Lt mttet p din wrapper vara som det r, dvs i det hr fallet 850px. ndra alla andra mtt till %.

    Frdelen blir att om du vill ha en annan storlek p sidan behver du bara ndra p din wrapper sen

    fljer resten med.

  • 7/30/2019 Sammanfattnig DUB

    9/12

    G tillbaka till din style sheet. (hgerklicka go to code)

    och skapa klassen

    .clear

    {

    clear:both;

    }

    Nu attachar du klassen till den div du nyss skapade. Allts

    Nu ska vi skapa en meny med en hover effect nr vi fr musen over lnkarna.

    G in i design vyn.

    Skriv hem, gallery, flash, om oss, kontakt i navbar s hr.

  • 7/30/2019 Sammanfattnig DUB

    10/12

    Markera nu orden du nyss skrev och gr skapa en onumrerad lista. (html kod fr den r ul). Det gr

    du helt enkelt genom att klicka p list knappen nr du har orden markerade.

    Markera ter alla orden och skapa en lnk av dem. Enklast r att bara skriva # i Link rutan.

    Nu ska vi snygga till lnkarna

    Ta bort underline p lnkarna

    Ta bort prickarna p listposterna

    Vi brjar med att styla vr lista. Enklaste sttat att gra det r att anvnda oss av en html-selektor. I

    det hr fallet vill vi ju nra hur UL ser ut. ul r ju unordered list.

  • 7/30/2019 Sammanfattnig DUB

    11/12

    G till din stylesheet och skapa den hr koden

    ul

    ul

    {

    list-style-type:none;

    padding:0px;

    margin:0px;

    }

    list-style-type:none; gr s att alla punkter p listan frsvinner.

    Padding och margin tar bort allt mellanrum runt listan s den hamnar lngst till vnster i navbar.

    Nu fixar vi s att lnkarna fr bort all understrykning och den fula bl frgen

    Fr att gra det kan vi ocks anvnda oss av en html-seletor, det r ju alla lnkar vi ska fixa, dvs alla

    lnkar r ju a.

    G till din stylesheet och skriv

    a

    {

    text-decoration:none;

    }

    Fixa hover. Nu ska vi gra s att bakgrunden p lnkarna fr en frg och den frgen ndras nr vi fr

    musen ver dem.

    Fr att gra det behver vi lgga till de hr attributen

    display: block; s att bakgrunden syns

    background-color:#98bf21; s att vi fr en frg p bakgrunden

    width: 100% s att vi r helt skra p att bakgrunden tcker upp hela ytan av navbar

    a

    {

    text-decoration:none;

    display:block;

  • 7/30/2019 Sammanfattnig DUB

    12/12

    background-color:#009900;

    width:100%;

    }

    Nu lgger vi till hur den ska se ut nr du fr musen ver lnken

    a:hover

    {

    background-color: #00FF00;

    }

    Fixa nu s det ser ut p ett annat vis nr du har klickat p en lnk. D mste du lgga till kod fra:visited

    Box-modellen

    Padding

    Fyll nu i text till din content. Som du mrker blir det ganska fult, eftersom texten gr hela vgen motkanten av rutan. Det fixar du med hjlp av padding. Om du stter tex

    padding: 5px; s blir det ett mellanrum p 5px mellan det du skriver och divs kant.

    Nu mste du rkna matte. Padding kar allts bredden med 5px p vnster sida och 5px p hgersida. Allts 10px. D mste du allts minska din widht med samma sak dvs 10px fr att inte din layoutska g sdner.

    Border

    Lgger du till en border p 2px s kar ju bredden ocks med 2px + 2px.