Page 1


Opgaven

Tidsplan

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

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

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 Flowchart

Kort beskrivelse af virksomheden

Tidsplan (Excel)

Ideudvikling/skitser

Flowchart

Skelet med alle pixelmål

Storyboard

Logo

Animation som skal integres i hjemmesiden

Frit farve og skriftvalg

eksempel på korrekt grafikoptimering (indgår ikke)

Efter 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 dikterede 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.

(indgår ikke)

Hjemmesiden skulle afleveres oploaded og testet. velkommen

Galleri

Kontakt

Index

Historie

FAQ

Love

Repræsenterer FAQ_sub -­  vinduer


Storyboard Med flowchartet pü plads kunne jeg nu begynde at opstille sitet som jeg ønskede det.

Storyboard forside

1 6

7

9

8

10

4

5

3 1: index_01.jpg 2: 3: index_02.jpg 4: txt_forside.rtf 5: index_03.jpg

6: knap1galleri.jpg/knap2galleri.jpg 7: knap1FAQ.jpg/ knap2FAQ.jpg 8: knap1lovgivning.jpg/ knap2lovgivning.jpg 9: knap1historie.jpg/ knap2historie.jpg 10:knap1zkontakt.jpg/ knap2kontakt.jpg

Storyboard FAQ

1

1: FAQ_txt.rtf 2: FAQ_03.jpg

2


Storyboard Love

1

2

3 1: love_txt_1 2: love_txt_2 3: love.jpg

Storyboard Tattoo Historie

1

2

1: Tattoo_txt.rtf 2: tatto historie.jpg


Storyboard Kontakt

1

2

3

1:kontakt_txt.rtf 2: Google maps link. Se skelet for flere detaljer 3: kontakt.jpg

Skelet Efter at designet er på plads kan jeg nu lave et skelet. Jeg valgte her at bruge Photoshop’s værktøj, Slice Tool og Select 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 korrekte mål.

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

7 4

5

6

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;

body

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

typografisk h1 info: font-size: 14px; h2 font-size: 12px; line-height: 170%;

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;

p font-size: line-hight:

11px; 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


FAQ 1 2

FAQ subbox info: Wrapper er vejlendende for faktisk størrelse. Denne skal variere iht. tekstmÌngde.

FAQ subbox:

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

body font-family: Verdana, Geneva, sans-serif; 2.FAQ_txtbox font-size: 11px; float: left; color: #FFF; height: 350px; width: 260px; wrapper margin-top: 45px; height: 290px; margin-left: 63px; width: 250px; h2 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;

Lov 1 2

3

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;


Historie

1

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

2

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

Kontakt 1 2

3

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 #kontakttxtbox p a { text-decoration: none; color: #FFF;


Galleri 1.Galleribox float: left; height: 575px; width: 766px; background-image: url(img/ tatto%20galleri.jpg); 2.Galleri_img_box float: left; height: 400px; width: 290px; margin-top: 35px; margin-left: 50px; (her tilpasses billeder med class) 3.Galleri_storimg_box float: right; height: 350px; width: 350px; margin-top: 33px; margin-right: 20px;

grafisk_workflow  

grafisk workflow

Read more
Read more
Similar to
Popular now
Just for you