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;