Jesus Kristus - Evig Konge

Jesus Kristus - Evig Konge

Jesus Kristus - Evig Konge

Grafisk Workflow

OpgavenOpgaven 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 Temp-lates 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.

- Korrekturlæsning - tekst, billeder, navigation, knap-per 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.

Templates

Templates:

Arbejdsbord:

CSS Styles:

Grafisk Workflow

FlowchartForeningen 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.

FlowchartDette flowchart er de sider jeg har med i min hjemmeside:

Index

GalleriKongenOs KontaktLinks

Eksterne links Mail

Grafisk Workflow

Forsiden

Kongens Folk • Frederiksgade 75 e, 8000 Århus C • Tlf.: 8871 7254 / 2048 6062 • info@kongensfolk.dk

Os? Kongen? Galleri Links Kontakt

Jesus Kristus - Evig Konge

Forsiden

Kongens Folk • Frederiksgade 75 e, 8000 Århus C • Tlf.: 8871 7254 / 2048 6062 • info@kongensfolk.dk

Os? Kongen? Galleri Links Kontakt

Kongens Folk

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 liniepå 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:18Herren er konge i al evighed

Jer. 1:11-12Herrens 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.«

- et folk med visioner orStor

LayoutHjemmesidens grundlæggendeudseende

Grafisk Workflow

StoryboardStoryboard giver det overskuelige overblik over, hvad der skal være på hver enkelt side:

1

4

2

3

5

6

78

9

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

SIDE 1: INDEXPunkterne her: 1, 2, 3, 4, 6, 7, og 9 går igen på alle sider, derfor er de kun vist på dette storyboard:

12

34

SIDE 2: OS

1. Billede kongensfolk.gif 2. Billede animation.gif 3. Tekst tekstbaggrund.png Os.docx - tekst placeres oven på tekstbaggrund.png padding: right: 10px 4. Billede logo.gif

Grafisk Workflow

Storyboard

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

SIDE 3: KONGEN

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

23

1

Grafisk Workflow

Storyboard

1. Billede: links.gif 2. Billede - hotspot tekstbaggrund.png links.png - billedet placeres oven på tekstbaggrund.png 3. Billede abe.jpg

SIDE 5: LINKS

SIDE 6: KONTAKT

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

1

23

12

33.1 3.2

3.3 3.4

3.5 3.6

4

Grafisk Workflow

Skelet

Side 1: INDEX

Footer 800 x 25 px

Menu 800 x 25 px

800 x 500 px

710 x 110 px

Banner 800 x 150 px

800 px

700

px

45 px

40 px

45 px

710 px

35 px

710 x 110 px

Side 4: GALLERI

Footer 800 x 25 px

Menu 800 x 25 px

Banner 800 x 150 px

800 px

700

px

800 x 500 px

Alle pixelmål til hjemmesiden

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”.

Footer 800 x 25 px

Menu 800 x 25 px

330 x 300 px 330 x 300 px

330 x 110 px330 x 110 px

Banner 800 x 150 px

800 px

700

px

300

px

45 px

40 px

45 px50 px

12 px

13 px

710 px15 px

35 px

200 x 90 px

200 x 90 px

90 x 90 px

90 x 90 px

90 x 90 px

200 x 90 px

10 px

10 px

10 px

15 px

Grafisk Workflow

Produktion i Dremweaver

Hver enkelt side laves fra bunden.

Lavet med CSS-styles:

Grafisk Workflow

Testet i forskellige browsere:

Safari

Firefox

Internet Explorer