Grafisk Workflow. Opgaven. Test i forskellige browsere (Usability) Arbejdsgang. Kvalitetsvurdering. Procesbeskrivelse

Transkript

1 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

2 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å dk/0medie8a/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. - 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: Arbejdsbord: Templates: Templates

3 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

4 Grafisk Workflow Layout Hjemmesidens grundlæggende udseende Forsiden Os? Kongen? Galleri Links Kontakt Kongens Folk Frederiksgade 75 e, 8000 Århus C Tlf.: / 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. 5:8 Herren er konge i al evighed Jer. :-2 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.: / info@kongensfolk.dk

5 Storyboard Storyboard giver det overskuelige overblik over, hvad der skal være på hver enkelt side: SIDE : INDEX Punkterne her:, 2, 3, 4, 6, 7, og 9 går igen på alle sider, derfor er de kun vist på dette storyboard: 2. Browserbaggrund: farve sort # Banner: banner.jpg 3. Menu: farve: sort # mus over: streg under 4. Baggrund, wrapper: billede: baggrund.jpg 5. Billede: index_banner.png 6. Vandret streg vandret.gif 7. Lodret streg lodret.gif 8. Billede indexbox.png tekst-links: Kongens Folk, Hvem er Kongen?, Se billeder, Links, Kontakt os 7. Footer: farve hvid #ffffff SIDE 2: OS 2. Billede kongensfolk.gif 2. Billede animation.gif 3. Tekst tekstbaggrund.png Os.docx - tekst placeres oven på tekstbaggrund.png padding: right: 0px 4. Billede logo.gif 3 4

6 Storyboard SIDE 3: KONGEN. 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 2 3 SIDE 4: GALLERI.Simpleviewer: Laves i Adobe Bridge: viewer.swf Indeholder 7 miniaturebilleder og et i stor størrelse: 34 i alt: billede.jpg, billede2.jpg... billede34.jpg

7 Storyboard SIDE 5: LINKS. Billede: links.gif 2. Billede - hotspot tekstbaggrund.png links.png - billedet placeres oven på tekstbaggrund.png 3. Billede abe.jpg 2 3 SIDE 6: KONTAKT. Billede: kontakt-os.gif 2. Tekst: kontakt.docx Tekst og billeder: tekstbaggrund.png 3. lillejj.png 3.2 Pastor og Formand (bold) Johannes og Joan Nørgaard 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

8 Skelet Alle pixelmål til hjemmesiden Side : INDEX 800 px Banner 800 x 50 px Menu 800 x 25 px 40 px 45 px 70 x 0 px 70 x 0 px 45 px 700 px 70 px 800 x 500 px 35 px Side 4: GALLERI Footer 800 x 25 px 800 px Banner 800 x 50 px Menu 800 x 25 px 700 px 800 x 500 px Footer 800 x 25 px

9 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 50 px Menu 800 x 25 px 40 px 45 px 330 x 0 px 50 px 330 x 0 px 45 px 700 px 5 px 90 x 90 px 70 px 5 px 200 x 90 px 2 px 0 px 90 x 90 px 3 px 330 x 300 px 330 x 300 px 200 x 90 px 300 px 0 px 90 x 90 px 200 x 90 px 0 px 35 px Footer 800 x 25 px

10 Produktion i Dremweaver Hver enkelt side laves fra bunden. Lavet med CSS-styles:

11 Testet i forskellige browsere: Safari Internet Explorer Firefox