OpgavenYoung Tattoo er en tattoo-butik der henvender sig til den unge kundegruppe. Firmaet ønsker at få lavet en hjemmeside.

Til denne hjemmeside skulle følgende elementer indgå:

• Index

• Galleri

• Spørgsmål og svar (FAQ)

• Love

• Kontakt os

Til opgaven var der et manus med tekst som skulle indgå. Denne skulle rettes for fejl. Sitet skulle fungere på en 17” skærm. Opløsning: 1024 x 768 px

Krav til opgaven• Kort beskrivelse af virksomheden

• Tidsplan (Excel)

• Ideudvikling/skitser

• Flowchart

• Skelet med alle pixelmål

• Storyboard

• Logo (indgår ikke)

• Animation som skal integres i hjemmesiden

• Frit farve og skriftvalg

• eksempel på korrekt grafikoptimering (indgår ikke)

Hjemmesiden skulle afleveres oploaded og testet.

TidsplanJeg valgte, som det første, at lave en tidsplan for at få et overblik om opgavens omfang.

FlowchartEfter denne var færdigt, lavede jeg flowchartet da jeg kendte de forskellige elementer der indgik i sitet. Hertil valgte jeg allerede her at opbygge spørgsmålene i FAQ efter et behavior der diktere-de at et link skulle åbne et nyt vindue hvor eneste mulighed er at lukke det igen, eller kopiere teksten.

Dette kan ses under FAQ hvor der linkes til eksterne sider.

velkommen

Galleri Kontakt Index Historie FAQ Love

Repræsenterer

FAQ_sub  -­  vinduer

Storyboard forside

1

3

4

5

1: index_01.jpg2: 3: index_02.jpg4: txt_forside.rtf5: index_03.jpg

6 7 8 9 10

6: knap1galleri.jpg/knap2galleri.jpg7: knap1FAQ.jpg/ knap2FAQ.jpg8: knap1lovgivning.jpg/ knap2lovgivning.jpg9: knap1historie.jpg/ knap2historie.jpg10:knap1zkontakt.jpg/ knap2kontakt.jpg

1 2

1: FAQ_txt.rtf2: FAQ_03.jpg

Storyboard FAQ

StoryboardMed flowchartet på plads kunne jeg nu begynde at opstille sitet som jeg ønskede det.

12

3

Storyboard Love

1: love_txt_12: love_txt_23: love.jpg

1

2

1: Tattoo_txt.rtf2: tatto historie.jpg

Storyboard Tattoo Historie

1:kontakt_txt.rtf2: Google maps link. Se skelet for flere detaljer3: kontakt.jpg

12

3

Storyboard Kontakt

SkeletEfter at designet er på plads kan jeg nu lave et skelet.Jeg valgte her at bruge Photoshop’s værktøj, Slice Tool og Se-lect Slice Tool til at udvælge de forskellige emner så jeg, senere hen, kunne indsætte dem i en ID box i DreamWeaver med de kor-rekte mål.

1.wrapper background-color: #FFF;height: 700px;width: 900px;margin-top: 10px;margin-right: auto;margin-bottom: 0px;margin-left: auto;

2.header float: left;height: 100px;width: 900px;

3.leftbox float: left;height: 600px;width: 134px;background-image:url(img/index_02.jpg);

4.textbox height: 340px;width: 255px;margin-top: 50px;margin-left: 60px;

2

3

4 5 6

7

bodyfont-family: Verdana, Geneva, sans-serif;font-size: 10px;font-style: normal;line-height: 140%;font-weight: normal;color: #FFF;

Wrapper, menu, leftbox, mainbox er udeladt på de næste sider

typografisk info:

h1 font-size: 14px;h2 pfont-size: 12px; font-size: 11px;line-height: 170%; line-hight: 140%

5.mainbox float: left;height: 600px;width: 766px;

6.forsidebox float: left;height: 575px;width: 766px;background-image: url(img/index_03.jpg);

7.menu1 float: left;height: 20px;width: 150px;margin-top: 5px;margin-left: 15px;Samme for menubox 2,3,4,5

Forside

1.FAQbox float: left;height: 575px;width: 766px;background-image: url(img/FAQ_03.jpg);

2.FAQ_txtbox float: left;height: 350px;width: 260px;margin-top: 45px;margin-left: 63px;h2

FAQ subbox info:

Wrapper er vejlendende for faktisk størrelse. Denne skal variere iht. tekstmængde.

1

2

FAQ

FAQ subbox:

bodyfont-family: Verdana, Geneva, sans-serif;font-size: 11px;color: #FFF;

wrapper height: 290px;width: 250px;background-color: #09F;float: left;margin-top: 5px;margin-right: auto;margin-bottom: 5px;margin-left: auto;

p margin-top: 10px;margin-right: 5px;margin-bottom: 5px;margin-left: 5px;

1.lovebox background-image: url(img/love.jpg);float: left;height: 575px;width: 766px;

2lovetxtbox_left float: left;height: 400px;width: 280px;margin-top: 35px;margin-left: 55px;

3.lovetxtbox_right float: left;height: 400px;width: 280px;margin-top: 35px;margin-left: 60px;

1

2 3

Lov

1.historiebox float: left;height: 575px;width: 766px;background-image: url(img/tatto%20historie.jpg);

2.historietxtbox float: left;height: 400px;width: 290px;margin-top: 35px;margin-left: 50px;

1 2

Historie

1.kontaktbox float: left;height: 575px;width: 766px;background-image: url(img/kontakt.jpg);

2.kontakttxtbox float: left;height: 250px;width: 250px;margin-top: 30px;margin-left: 47px;

3.maps1 float: right;height: 280px;width: 350px;margin-top: 33px;margin-right: 20px;

wrapper #mainbox #kontaktbox #kon-takttxtbox p a {text-decoration: none;color: #FFF;

1

2 3

Kontakt

Galleri1.Galleriboxfloat: left;height: 575px;width: 766px;background-image: url(img/tatto%20galleri.jpg);

2.Galleri_img_boxfloat: left;height: 400px;width: 290px;margin-top: 35px;margin-left: 50px;(her tilpasses billeder med class)

3.Galleri_storimg_boxfloat: right;height: 350px;width: 350px;margin-top: 33px;margin-right: 20px;