Grundforløb - Grafisk workflow

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

Mail

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