Strekkbar kantlinje oppgave

    

 

    
 
  1. Lag et design i f.eks Photoshop eller bruk Photoshop-filen jeg har laget.
  2. Del opp bildet med hjelpelinjer og lagre de grafiske elementene som er nødvendig for å kunne lage en kantlinje (hjørner og streker)
  3. Se Photoshopfilen min for forklaring på hva du trenger å lagre som grafikkelementer.
  4. Sett inn en tabell med 5 rader og 5 kolonner, 100% Width, Cellspacing=0, Cellpadding=0 og Border=0.
  5. Sjekk Photoshop filen og finn ut hvilken celle første hjørne (2) skal inn i.
    Se hjepelinjene.
  6. Her skal den inn i tredje rad; andre kolonne. Sett inn hjørne (2)
  7. Sjekk Photoshopfilen og finn ut hvilken celle det andre hjørnet (4) skal inn i.
  8. Her skal det inn i femte rad andre kolonne. Sett inn hjørne (4).
  9. Marker hele andre kolonne og sette Width=26 ( = bredden på hjørnene)
    Marker hele kolonner ved å klikke og holde i første celle og dra over alle cellene i en kolonne, eller
    ved å føre musepekeren til toppen av kolonnen og klikke når du ser en liten nedoverpekende svart pil som markør.
    (den siste metoden kan være litt vanskelig å få til)
  10. Sjekk Photoshop filen og finn ut hvilken celle tredje hjørne (6) skal inn i.
  11. Her skal den inn i tredje rad; fjerde kolonne. Sett inn hjørne (6)
  12. Sjekk Photoshop filen og finn ut hvilken celle fjerde hjørne (8) skal inn i.
  13. Her skal den inn i første rad; fjerde kolonne. Sett inn hjørne (8)
  14. Marker hele fjerde kolonne og sette Width=21( = bredden på hjørnene)
  15. Så må vi få lagt inn strekene som skal forbinde hjørnene.
  16. Sett inn den horisontale streken (1) inn som et bilde i rad 3 kolonne 1
  17. Legg samme bildet inn som et bakgrunnsbilde i samme celle.
  18. Sett inn den vertikale streken (3) som et bilde i rad 4 kolonne 2
  19. Legg inn samme bildet som et bakgrunnsbilde i samme celle.
  20. Sett inn den horisontale streken (5) inn som et bilde i rad 5 kolonne 3
  21. Legg samme bildet inn som et bakgrunnsbilde i samme celle.
  22. Sett inn den vertikale streken (7) som et bilde i rad 4 kolonne 4
  23. Legg inn samme bildet som et bakgrunnsbilde i samme celle.
  24. Sett inn den vertikale streken (7) som et bilde i rad 3 kolonne 4
  25. Legg inn samme bildet som et bakgrunnsbilde i samme celle.
  26. Sett inn den vertikale streken (7) som et bilde i rad 2 kolonne 4
  27. Legg inn samme bildet som et bakgrunnsbilde i samme celle.
  28. Sett inn den horisontale streken (9) inn som et bilde i rad 1 kolonne 5
  29. Legg samme bildet inn som et bakgrunnsbilde i samme celle.
  30. Da gjenstår det bare å bestemme bredden på de forskjellige kolonnene.
  31. Marker hele kolonne 1 og sett Width til ønsket bredde (her har jeg valgt 110)
  32. Marker hele kolonne 5 og sett Width til ønsket bredde (her har jeg valgt 50)
  33. Den midterste kolonnen (kolonne 3 her) setter vi ikke noe bredde på. Den vil utvide seg/ krympe etter størrelsen på browservinduet.
  34. Pass på at du ikke setter inn noe innhold i radene som inneholder et hjørne som er høyere enn hjørnene. Det vil ødelegge kantlinjene.
    (Det er mulig å gjøre det slik at du kan legge inn innhold i disse cellene også, men det krever at du bruker og kan CSS.)
  35. Husk også på at Dreamweaver legger inn   i tomme celler. Så hvis du har laget en veldig tynn kantlinje, kan det hende at du må slette disse (eventuelt legge inn blanke gif'er) i radene hvor du har et hjørne eller flere for å få raden til å være like høy som hjørnet.