Jesus Kr
istus - Ev
ig Konge
e g n o K g i v E s u t s i r K Jesus
Jesus
Kristu
s - Evi
g Kon
ge
Grafisk Workflow
Opgaven Opgaven går ud på, at lave en hjemmeside, enten som en præsentation af noget, eller en kampagne for noget. Jeg laver en præsentation for foreningen Kongens Folk. Se hjemmesiden på http://www.mediegrafiker-ats. dk/10medie8a/maria/index.html
Arbejdsgang Hjemmesiden laves i programmet Dreamweaver med CSS (Cascading Style Sheets) . Den laves med Templates på de sider som er ens. Index- og Galleri-siden skiller sig ud fra de andre, så de har deres eget layout. I Dreamweaver arbejder jeg med Classic arbejdsbord og har det splittet op, så det både er Code og Design.
Procesbeskrivelse - Valg af produkt: hjemmeside til Kongens Folk - Planlægning af projekt med tidsplan. - Hjemmesidens indhold fastsættes med flowchart. - Valg af layout og modulopbygning. - Hjemmesidens udseende for hver side laves med storyboard. - Skelet laves - alle pixelmål fastsættes. - Fremstilling af hjemmesiden i Dreamweaver, med CSS og templates.
Arbejdsbord: Templates:
Templates
- Korrekturlæsning - tekst, billeder, navigation, knapper mm. - Forbindelse til Mediegrafiker-ats.dk, server. - Uploade hjemmesiden.
Test i forskellige browsere (Usability) Testet i Firefox: virker Testet i Safari: virker Testet i Internet Explorer: virker, også med farvet scrollbar
Kvalitetsvurdering Produktionen og arbejdsprocessen af hjemmesiden er gået godt og det fungerede effektivt. Det blev planlagt godt fra starten, med flowchart, storyboard og skelet, så det forløb uden stress. Hjemmesiden er blevet lavet, så den er nem og enkel at navigere rundt på. Siderne har et gennemgående fast, stilet og stabilt udtryk. Den er æstetisk pæn og enkel.
CSS Styles:
Grafisk Workflow Flowchart Foreningen har allerede en hjemmeside, hvorfra de ønsker, at ting / dele fra denne også skal være på den nye hjemmeside. Jeg har valgt at lave de sider der er markeret med rødt.
Flowchart Dette flowchart er de sider jeg har med i min hjemmeside:
Index
Os
Kongen
Galleri
Links
Kontakt
Eksterne links
Grafisk Workflow Layout Hjemmesidens grundlæggende udseende
Forsiden
Os?
Kongen?
Galleri
Links
Kontakt
Kongens Folk • Frederiksgade 75 e, 8000 Århus C • Tlf.: 8871 7254 / 2048 6062 • info@kongensfolk.dk
Forsiden
Os?
Kongen?
Galleri
Kongens Folk - et folk med visioner
Links
Kontakt
or
Stor
En samling radikale kristne, som, på alle måder, tilstræber at efterfølge Jesus Kristus i livsstil og handlinger. Vi står for en ren linie på Bibelens grund. Vi giver os ikke ud for at være fuldkomne, men vi er helhjertede. Jesus Kristus er vores frelser, Konge og Herre. 2. Mos. 15:18 Herren er konge i al evighed Jer. 1:11-12 Herrens ord kom til mig: »Hvad ser du ... ? »Jeg ser en mandelgren.« Og Herren sagde til mig: »Du ser rigtigt, for jeg våger over, at mit ord bliver udført.«
Jesus Kristus - Evig Konge
Kongens Folk • Frederiksgade 75 e, 8000 Århus C • Tlf.: 8871 7254 / 2048 6062 • info@kongensfolk.dk
Grafisk Workflow Storyboard Storyboard giver det overskuelige overblik over, hvad der skal være på hver enkelt side: 1
SIDE 1: INDEX Punkterne her: 1, 2, 3, 4, 6, 7, og 9 går igen på alle sider, derfor er de kun vist på dette storyboard:
2
1. Browserbaggrund: farve sort #000000 2. Banner: banner.jpg 3. Menu: farve: sort #000000 mus over: streg under 4. Baggrund, wrapper: billede: baggrund.jpg 5. Billede: index_banner1.png 6. Vandret streg vandret.gif 7. Lodret streg lodret.gif 8. Billede indexbox.png tekst-links: Kongens Folk, Hvem er Kongen?, Se bille- der, Links, Kontakt os 7. Footer: farve hvid #ffffff
3 4 5 6 7
8
9
SIDE 2: OS
1
3
1. Billede 2. Billede 3. Tekst 4. Billede
2
4
kongensfolk.gif animation.gif tekstbaggrund.png Os.docx - tekst placeres oven på tekstbaggrund.png padding: right: 10px logo.gif
Grafisk Workflow Storyboard
SIDE 3: KONGEN 1. Billede: jesus_kristus.gif 2. Tekst Scrollbar: basecolor #F90, arrowcolor: #000 tekstbaggrund.png Kongen.docx - tekst placeres oven på tekstbaggrund.png 3.Billede tekstbaggrund.png jesus.png - billedet placeres oven på tekstbaggrund.png
1
3
2
SIDE 4: GALLERI 1.Simpleviewer: Laves i Adobe Bridge: viewer.swf Indeholder 7 miniaturebilleder og et i stor størrelse: 34 i alt: bil- lede1.jpg, billede2.jpg . . . bil- lede34.jpg 1
Grafisk Workflow Storyboard
SIDE 5: LINKS 1. Billede: 2. Billede - hotspot 3. Billede
links.gif tekstbaggrund.png links.png - billedet placeres oven på tekstbaggrund.png abe.jpg 1
2
3
SIDE 6: KONTAKT
1
2
3.1
3.2
3.3
3.4
3.5
3.6
3
4
1. Billede: kontakt-os.gif 2. Tekst: kontakt1.docx 3.Tekst og billeder: tekstbaggrund.png 3.1 lillejj.png 3.2 Pastor og Formand (bold) Johannes og Joan Nørga- ard 3.3 lille_cats.png 3.4 Næstformand (bold) Cathrine Malta Jakobsen 3.5 lille_helenes.png 3.6 Kasserer (bold) Helene Dalager 4. Billede link til Google Maps: Frederiksgade 75, 8000 Århus C
Grafisk Workflow Skelet
Alle pixelm책l til hjemmesiden
800 px
Side 1: INDEX
Banner 800 x 150 px
Menu 800 x 25 px 40 px
710 x 110 px
700 px
45 px
710 x 110 px
45 px
710 px
800 x 500 px
35 px Footer 800 x 25 px
Side 4: GALLERI 800 px
Banner 800 x 150 px
700 px
Menu 800 x 25 px
800 x 500 px Footer 800 x 25 px
Grafisk Workflow Skelet Side 2: OS Side 3: KONGEN Side 5: L INKS Side 6: KONTAKT - Det som er tegnet med rødt, hører kun til siden “kontakt”. 800 px
Banner 800 x 150 px
Menu 800 x 25 px 40 px
330 x 110 px
330 x 110 px 50 px
15 px
200 x 90 px
200 x 90 px
10 px 90 x 90 px 200 x 90 px
35 px Footer 800 x 25 px
12 px 13 px
330 x 300 px
10 px 90 x 90 px
10 px
45 px
710 px
15 px 90 x 90 px
300 px
700 px
45 px
330 x 300 px
Grafisk Workflow Produktion i Dremweaver Hver enkelt side laves fra bunden.
Lavet med CSS-styles:
Grafisk Workflow Testet i forskellige browsere: Safari
Internet Explorer
Firefox