GRAFISK DESIGN. Opgaven. Målgruppe. Procesbeskrivelse. De 4 grafiske designparametre. Kvalitetsvurdering. Farver: Ideudvikling: Form: Typografi:

Transkript

1 GRAFISK DESIGN Opgaven Opgaven gik ud på at designe en æske, indpakningspapir og en lille folder til en produktlinie fra Chokoladefabrikken A/S. Derudover skulle der designes et logo til Chokoladefabrikken A/S og et logo til produktlinien. Målgruppe Vi valgt i gruppen, at det produktlinien skulle være de 4 årstider, og med frugt fyld fra frugter der passer til den givne årstid. Afsender: Chokoladefabrikken A/S, som er et lille firma der har specialiseret sig i at producere eksklusive håndlavede chokolader af økologiske råvarer. Budskab: Lækker, eksklusiv og økologisk chokolade der er en udsøgt nydelse - stykke for stykke. Målgruppe: Den kvalitetsbevidste forbruger, som går op i at produktet er lækkert, eksklusivet og økologisk. Det er hovedsagligt kvinder der er 30+, der er den primære målgruppe, som går op i enkelt og eksklusivt design, og som gerne vil give lidt ekstra for et godt produkt. De 4 grafiske designparametre Form: Folder: 160 x 57 mm - var forudbestemt af opgaveformuleringen. Praktisk format, som kan være i næsten alle strørrelse æsker. Indpakning: 92 x 30 mm + limstykke på 15 mm - et bånd der skal foldes omkring chokoladen. Der er lagt 2 mm til længden, da chokoladen skal pakkes ind i mørk brun foliepapir. Selve indpakning skal trykkes på blankt papir. Æske: 90 x 180 x 35 mm (udfoldet 340 x 180 mm + limstykke og indfoldning) - der er plads til 8 stykker chokolade, og det er en praktisk størrelse, som ikke fylder for meget. Typografi: Der er brugt de samme fonte på alle 3 produkter, og jeg har valgt at bruge en grotesk og en skriveskrift. Franklin Gothic Book Rolig Lidt kantet Tidsløs Lucida Calligraphic Enkelt Let og elegant Kontrast til grotesk font Illustrationer: Som illustration har jeg lavet et træ. Dette er for at referere til navnet på produktlinien De 4 årstider, hvor man kan komme til at tænke på træets forandring gennem året. Dette giver lidt liv til æsken, mens båndet omkring æsken skaber ro, med sine lige linier. Træet kan desuden også symbolisere økologi, da det er et symbol på natur. Derudover er der illustrationer af chokoladen og dens fyld. Som illustrationer til fyldet er der lavet frugter. De frugter som er blevet brugt, er frugter som er fremme i den givne årstid. Farver: Faverne kører i de varme farver. Som grundfarver er der brugt en rød, en mørk brun og en lys brun. Farverne er valgt, da det giver et eksklusivt udtryk, med den mørke farve og den samtidig henleder opmærksomheden på chokolade. Den røde farve er valgt, da den har samme farve som firmaloget, og man holder derfor en god rød tråd i produkterne. Der er kontrast mellem den lys brune og den mørk brune farve, for at give noget liv til produkterne. Derudover er der brugt fraverne fra frugterne i indpakningspapiret og i folderen. Dette er igen for at skabe noget kontrast, og for at symbolere chokoladens fyld. Procesbeskrivelse Ideudvikling: Brainstormin på chokolade, frugtfyld og chokoladeæske Inspirationssøgning på nettet Skitser i hånden Skitser i Illustrator til logo Skærmdumps Prøveprint Udarbejdelse i Illustrator, æske og indpakning Udarbejdelse i Indesign, folder Jeg fik hurtigt min idé, men havde lidt problemer i starten med at tegne æsken, da den oprindelige størrelse var for stor, til at få printet ud på et A3. Jeg rettede derfor målene, og bleve godt tilfreds med den nye størrelse. Ellers gik det fint med at tegne og udvikle produkterne. Kvalitetsvurdering Jeg er godt tilfreds med mine produkter. Jeg synes æsken udstråler kvalitet og eksklusivitet, med sin enkelthed og mørke farver. Folderen kører i samme stil, som æsken og holder derfor en rød tråd. Indpakningspapiret er i den lys brune farve, for at skabe en kontrast til æskens mørke farve. Jeg synes det giver et godt udtryk.

2 IDÉUDVIKLING / BRAINSTORM Logo Navn på produktlinie De 4 årstider Julechokolade, 4 søndage i advent Frugt Nødder Likør Romkugler De 4 musketerer Dyr Blomster Som produktlinie blev De 4 årstider valgt. Æske, indpakning og folder Økologisk Eksklusiv Fyld Kasse rød Kasse sort Bånd Sløjfe Godte til kaffen Gave kakao Vindue i æske Hjerter Brune farver Indhold Som navn på chokoladerne blev der valgt, at de skulle have navne efter årstiderne. Sommer = juni, juli, agust Vinter = December, januar, februar Efterår = September, oktober, november Forår = Marts, april, maj Sommer: Jordbær Vinter: Klemmentin, orange, appelsin Efterår: Vindrue, blåbær, brombær Forår: Abrikos, Fersken, melon, æble, pære, rabarbar, kiwi Som indhold blev der valgt, jordbær til Sommer, appelsin til Vinter, blåbær til Efterår og kiwi til Forår. Slogan Året rundt, chokolade er sundt Som at spise fra haven Regnbuens svar på chokolade Året rundt Delicious Når du behøver dem Som slogan blv Når du behøver dem valgt.

3 Idéudvikling / logo / skitser Når du behøver dem Når du behøver dem Når du behøver dem Når du behøver dem Når du behøver dem når du behøver dem

4 logo / præsentation Logo og slogan sammen i forskellige størrelser Når du behøver dem Når du behøver dem Når du behøver dem Når du behøver dem Når du behøver dem Logo og slogan sammen i farve, S/H og negativ Når du behøver dem Når du behøver dem Når du behøver dem Logo i forskellige størrelser Logo i farve, S/H og negativ Slogan i forskellige størrelser Når du behøver dem Når du behøver dem Når du behøver dem Når du behøver dem Slogan i farve, S/H og negativ Når du behøver dem Når du behøver dem Når du behøver dem

5 IDÉUDVIKLING / SKITSER

6 UDVIKLING / ÆSKE

7 UDVIKLING / BÅND OG INDPAKNING

8 UDVIKLING / FOLDER

9 TYPOGRAFI OG OMBRYDNING Opgaven Der skulle laves et redesign til AD-spiranten på 2-3 opslag med vores egne valg af typografi, layout og billedemateriale. Formatet var forudbestemt til at være 200 x 250 mm. Dokumentet 200 x 250 mm AS 5-format. Facing pages. Marginer in: 41 mm, out: 35 mm top: 41 mm, bund 24 mm 3 spalter med 6 mm gutter. 3 mm til beskæring. Start på side 18. Baseline Grid Grid sat til Brødtekstens skydning på 13 pt. Grid tilpasset så det flugter med bundmargin. Topmargin tilpasset brødtekstens x-højde. A-Master Pagina. Grid tilpasning. Kolumnetekst. Brødtekst Palatino: Antikva, elegant, letlæselig, god til store tekstmængder, giver et klassisk og seriøst udtryk. 9 pt/13 pt, Metrics. Låst til grundlinienettet. Alignment = Left Justify. Language = dansk. First line indent = 9 pt (en geviert). Wordspacing = min. 70 % og max 133 %. Er også lavet som brødtekst u. indryk, uden first line indent. Mellemrubrik Palatino: Antikva, elegant, letlæselig, giver et klassisk og seriøst udtryk. Bold. Giver kontrast til brødteksten. Farve = 69 : X : 0 : 0 11 pt/14 pt. Space after = 2 pt. Regnestykke for at komme frem til luft over: Brødtekstens skydning = 13 pt x 2 linier = 26 pt En linie: Luft under: 14 pt (mellemrubrikkens skydning) 2 pt 10 pt Billeder Billederne følger spaltebrederne, så de højre eller venstre kant flugter med tekst. Følger som udgangspunkt brødtekstens x-højde. Er holdt i en dunkel og lidt deprimerende stemning, for at indfange de følelser, som man får i forbindelse med stress. Farvevalg Orange: varme, glæde, livskraft. Lilla: uro, nervøsitet, angst. Disse er kontraster til hinanden i deres betydning, og har en symbolik, som passer til artiklen. Spartiering/knibning Knibning i overskrift = - 40 pt Max knibning brødtekst = - 15 pt Spartiering ved tekst omkring globus på 30 pt for bedre letlæselighed. Optiske årsager Billede side 21 følger citates x-højde, i stedet for at flugte med top margin. Unicial er rykket ud over spaltemargin i venstre side. Manchet er rykket ud over spaltemargin i højre side, for at flugte med overskriftens bagkant. Overskrift rykket ud over spaltemargin i venstre siden, for at fylde siden bedre ud. Kvalitetsvurdering Jeg havde problemer med tekstmængden. Oprindeligt ville jeg have holdt mig på 2 opslag, men da jeg valgte at overskrift og manchet skulle have en side for sig, var det svært at holde sig til de 2 opslag, hvis jeg også skulle have illustrationer og billeder. Derfor var jeg omkring mange muligheder, før jeg fandt en løsning, hvor siderne ikke virkede tomme. En af mine store problemer var mine grafer. Jeg brugte lang tid på ombrydningen i forhold til disse, og prøve af med enkelte grafer, små bokse med spørsmål og til sidst at samle dem i en, for både at få tekst og design til at harmonere. Jeg synes at jeg fandt en god løsning til sidst. Desuden ville jeg gerne have et pænt tekstforløb omkring min globus, så her brugte jeg meget tid på at få det til at se ordentlig ud. Overordnet set er jeg blevet rigtig godt tilfreds med mit slutresultat. Er også lavet som mellemrubrik top, uden luft over og under.

10 EN VERDEN MED STRESS / HIGHLIGHTS / SIDE Mine arbejdsplatter til denne opgave Rykket ud over venstre spaltemargin 3 mm beskæring Af optiske årsager er manchet rykket ud over højre spaltemargin Grid tilpasset x-højde, så det flugter topmargin Gutters afstand på 6 mm mellem tekst og graf Grid tilpasset så det flugter bundmargin

11 EN VERDEN MED STRESS / HIGHLIGHTS / SIDE Opmærksom på pænt tekstforløb ved figursats Billedekant flugter citats x-højde Gutters afstand på 6 mm mellem tekst og billede Flugter brødtekstens x-højde

12 EN VERDEN MED STRESS / HIGHLIGHTS / SIDE Mellemrubrik til top er uden space before og uden space after Uden ordeling for lettere læsbarhed Graf og baggrundsfarve er samlet i en boks

13 GRAFIK OG BILLEDE GRAFIK Opgaven Opgaven gik ud på at designe en æske, indpakningspapir og en lille folder til en produktlinie fra Chokoladefabrikken A/S. Derudover skulle der designes et logo til Chokoladefabrikken A/S og et logo til produktlinien. Programvalg Til at tegne æsken, indpakningspapir, logo og diverse illustrationer er der brugt Illustrator. Her har jeg brugt nogle forskellige værktøjer, som pentool og meshtool Arbejdsprocess Illustrationer: Chokolade: Chokoladedtykkerne er tegnet op med pentool efter et billede fra nettet. Jeg har derefter lagt meshtool på, for at give noget dybde og en 3D effekt. Der er laget et stroke på kanterne inden i chokoladen, for at markere disse, og de har fået gaussianblur på 4 px. Chokoladen er tegnet i flere lag, for at der ikke skal opstå fejl, ved at trykke på en eksisterende streg Fyld: Alle 4 frugter er tegnet op med pentool, og alle har fået effekt og dybde med meshtool. De er tegnet i flere lag, som er blevet lagt sammen, for at udgå fejl, ved at trykke på en eksisterende streg. Blåbærret har via meshtool fået lidt 3D effekt, mens de andre ser mere tegnet ud. Ved appelsinen er der desuden brugt linetool til at skabe de lyse streger i illustrationen. Ved jordbærret og kiwen er der lavet små kerner. Kiwiens kerner har fået lidt effekt med meshtool, og jeg har brugt startool på fr at lave de lysestreger i kiwiens frugt kød.. Logotype: Logotypen der er brugt til vores logo De 4 årstider er Helvetica Neue. Denne giver ro, og har en gode kurver. Der er der udover manipuleret lidt med E,et i de og med 4-tallet. Skabelon til æske: Skabelonen til æsken har jeg tegnet op med Rectangel tool og med pentool. Jeg har lavet en stanseform, som er 0,25 pt og dashed, og en farve form, hvor der er 2 mm stroke på, som ligger uden for formen, så der kommer 2 mm bleed. Skabelonen har jeg selv tegnet op efter en fysisk æske, og ændret målene så de passer. Først er der tegnet en skitse i hånden, og så er det tegnet ind på computeren. Opstart til slut Der var lidt problemer i starten, da jeg oprindeligt ville have haft æsken størrer end den blev, men så kunne den ikke printes ud på et A3 papir. Men da målene kom på plads, var det nemt at komme videre, og få lavet de sidste ting. Kvalitetsvurdering Overordnet er jeg blevet tilfreds, men synes bedst om blåbærret og chokoladen. Dette er fordi de har fået en bedre effekt ved brugen af meshtool, mens jordbærret, kiwien og appelsinen ser mere tegnet ud. Men overordnet set er jeg tilfreds. Træ: Jeg fandt en tegning på nettet, som var inspiration til det træ jeg har tegnet. Det eneste jeg har brugt til at tegne på med er pentool, og så har jeg varieret stegtykkelsen alt efter om træet skulle bruges på æsken eller på folderen. På æsken er stregen 1 pt og på folderen er den 0,25 pt

14 ILLUSTRATOR / PROCES / FYLD OG CHOKOLADE Før Efter Værktøjer Før Efter Værktøjer Før Efter Værktøjer

15 ILLUSTRATOR / PROCES / FYLD OG CHOKOLADE Før Efter Værktøjer Før Efter Værktøjer

16 GRAFISK WORKFLOW Opgaven Opgaven gik ud på at designe og opsætte en hjemmeside. Jeg valgte at producere et website for en zoologisk have. Ideen med websitet er at informere målgruppen om blandt andet åbningstider, beliggenhed, dyrene og events. Den skal udstråle en vis grad af seriøsitet, men samtidig understøtte det hyggelige i at besøge en zoologisk have. Layout Format 800x600 px. Dette er en god størrelse, da den passer til flere skærmstørrelser. Der er taget udgangspunkt i en skærmopløsningpå 1024x768 px, som svarer til en 17 skærm. Rollover-images med link Swarp image på billedegalleri siden Usability Sitet er nemt at gå til for enhver bruger. Den er meget enkelt stillet op og flowchartet er meget overskueligt. Der er få under menuer, men disse er let overskuelige man kan komme til de fleste sider fra alle sider, og i bunden er der lavet en kontaktlinie, så man på alle sider kan finde adresseoplysninger på Randers zoo. På kontakt siden er der link, så man kan sende mail med det samme og der er et kort fra google maps, så man kan se, hvor Randers zoo ligger. Browserkompatibilitet Er testet i både Firefox og Internet Explorer, hvor den virker fint i begge. Der er lavet om på farven for scrollbaren, som kun kan ses i Explorer. Kvalitetsvurdering Jeg synes, at man arbejdsproces er gået rigtig godt. Da der først var lavet inspirationssøgning, fik jeg hurtigt lavet skitser, og fandt frem til det layout jeg ville lave. Jeg havde forventet problemer, da jeg skulle lave flashbanner, men dette gik faktisk problemfrit. Der var lidt problemer, da jeg skulle sætte op i dreamweaver, med at få punktopstilling til at fungere, da den ikke villle få linierne til at flugte, når jeg sætte bullets på. Dette fik jeg løst ved at kombinere unordered list og list item. Koden for unordered list skulle sættes omkring hele teksten, mens koden for list item skulle indramme den enkelte linie. Alt i alt er jeg godt tilfreds med mit resultat af hjemmesiden, og er godt tilfreds med den arbejdesgang jeg har haft. Den har været godt struktureret. Procesbeskrivelse Brainstormin på dyr, natur og zoologisk have Inspirationssøgning på nettet Skitser i hånden Præsentationslayout i photoshop Skærmdumps Udarbejdelse af flowchart Udarbejdelse af skelet Udarbejdelse af storyboard Fremstilling af flash-element til banner Billeder behandlet i photoshop - RGB og 72 ppi, jpg- og png-filer Fremstilling af tekster Opsætning i Dreamweaver Benyttet html og css Testet i Firefox og internet Explorer Uploaded på

17 Proces / inspirationssøgning

18 PROCES / BRAINSTORM / SKITSER Brainstorm Dyr Hygge Familie Have Oplevelse Grønt Træ Natur Læring

19 Proces / layout / index.html

20 PROCES / FLOWCHART index.html omzoo.html besog.html zoosdyr.html kontakt.html dodhovedabe.html tiger.html love.html billedegalleri.html

21 PROCES / SKELET / GENERELT OG GALLERI Generelt 800 px 80 x 50 px 300 x 200 px 500 x 200 px 800 x 30 px 10 px 10 px 600 px 165 x 180 px 165 x 180 px 370 x 250 px 10 px 10 px 185 x 200 px 185 x 200 px 65 px 65 px 800 x 30 px Billedegalleri 800 px 80 x 50 px 300 x 200 px 500 x 200 px 800 x 30 px 600 px 70 x 70 px 230 x 230 px 70 x 70 px 70 x 70 px 70 x 70 px 70 x 70 px 70 x 70 px 70 x 70 px 70 x 70 px 170 px 70 x 70 px 70 x 70 px 70 x 70 px 70 x 70 px 250 x 250 px 800 x 30 px

22 PROCES / STORYBOARD / GENERELT FOR ALLE SIDER Elementer 1) logo.png 4) trae.jpg 5) trae.jpg Body Baggrund.png 4 5 Lorem ipsum dolor sit amet, consectetuer adipiscing elit Actions 2) og 3) flashbanner 4) LINKS: Forside -> linker til index.html Om zoo -> linker til omzoo.html Besøg -> linker til besog.html Zoos dyr -> linker til zoosdyr.html Kontakt -> linker til kontakt.html 5) info@randerszoo.dk linker til mail Typografi P I footer: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px Text-align: center Color: #FFFFFF P: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px Line-height: 14 px Text-align: left Color: # H1: Font-familie: Arial, Helvetica, sans-serif Font-size: 12 px, bold, all caps Color: # 5F7935 H2: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px, bold, all caps Color: # 5F7935 H3: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px, bold, Line-height: 14 px Text-align: left Color: # Links menu A: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px all caps Color: # FFFFFF A:hover Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px all caps Color: #C7CC9F Links A: Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px Color: # A:hover Font-familie: Arial, Helvetica, sans-serif Font-size: 10 px Color: #5F7935 Scrollbar overflow: auto; scrollbar-base-color: #FFFFFF; scrollbar-arrow-color: #5F7935; scrollbar-darkshadow-color: #5F7935; scrollbar-shadow-color: #FFF;

23 PROCES / STORYBOARD index.html Elementer 6) ulv.jpg 7) index.doc* 8) tiger4.jpg 9) index.doc* 10) lion7.jpg 11) park.jpg 12) index.doc* 13) index.doc* Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. 12 Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. 13 Lorem ipsum dolor sit amet, consectetuer adipiscing elit 6 Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 7 * I dokumentet index.doc vil det være delt op i rubrikker, som refererer til hvilken boks teksten skal være i. Actions 6) linker til omzoo.html, ved at holde mus over skiftes til ulvknap.jpg 7) >> -> linker til omzoo.html 8) linker til zoosdyr.html, ved at holde mus over skiftes til tiger4knap.jpg 9) >> -> linker til zoosdyr.html 10) linker til billedegalleri.html, ved at holde mus over skiftes til lion7knap.jpg 11) linker til besog.html, ved at holde mus over skiftes til parkknap.jpg 12) >> -> linker til billedegalleri.html 13) >> -> linker til besog.html omzoo.html Elementer 6) park1.jpg 7) omzoo.doc 8) park2.jpg Actions 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non. 7 6

24 PROCES / STORYBOARD besog.html 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non. 7 6 Elementer 6) parkstor.jpg 7) besøg.doc information om priser, åbningstider og events, skal sættes op i tabel. Mulighederne med årskort og nyttige oplysninger, skal sættes op i punktopstilling 8) gorilla2.jpg Actions zoosdyr.html Elementer 6) lion1.jpg 7) zoo.doc* 8) tiger4.jpg 9) zoo.doc* 10) lilleabe.jpg 11) zoo.doc* 8 10 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum dolor sit amet, consectetuer adipiscing elit. consectetuer adipiscing elit. consectetuer adipiscing elit Lorem ipsum dolor sit amet, consectetuer adipiscing elit *I dokumentet zoo.doc vil det være delt op i rubrikker, som refererer til hvilken boks teksten skal være i. 6 Actions 6) linker til love.html, ved at holde mus over skiftes til lion1knap.jpg 7) >> -> linker til love.html 8) linker til tiger.html, ved at holde mus over skiftes til tiger4knap.jpg 9) >> -> linker til tiger.html 10) linker til dodhovedabe.html, ved at holde mus over skiftes til lilleabeknap.jpg 11) >> -> linker til dodhovedabe.html

25 PROCES / STORYBOARD kontakt.html Elementer 6) tiger5.jpg 7) kontakt.doc 8) kort.jpg 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non. 7 6 Actions 7) info@randerszoo.dk -> linker til mail to 8) ved klik på kort kommer man ind på googlemaps dodhovedabe.html Elementer 6) lilleabe1.jpg 7) abe.doc vidste du at -afsnittet, skal sætte op i punktopstilling 8) lilleabe2.jpg Lorem ipsum 9 dolor 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. 7 6 Actions 9) LINKS: Løve -> linker til love.html Dødningehovedabe -> linker til dodhovedabe.html Tiger -> linker til tiger.html

26 PROCES / STORYBOARD love.html 6 Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 7 Lorem ipsum 9 dolor Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. Suspendisse neque arcu, ultrices commodo, pellentesque sit amet, ultricies ut, ipsum. Mauris et eros eget erat dapibus mollis. Mauris laoreet posuere odio. Nam ipsum ligula, ullamcorper eu, fringilla at, lacinia ut, augue. Nullam nunc. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non. 8 *I dokumentet løve.doc vil det være delt op i rubrikker, som refererer til hvilken boks teksten skal være i. 9 Elementer 6) lion7stor.jpg 7) løve.doc* 8) løve.doc* Vidste du at -afsnittet, skal sættes op i punktopstilling 9) lion1stor.jpg Actions 6) linker til billedegalleri.html, ved at holde mus over skiftes til lion7storknap.jpg 7) >> -> linker til billedegalleri.html 10) LINKS: Løve -> linker til love.html Dødningehovedabe -> linker til dodhovedabe.html Tiger -> linker til tiger.html tiger.html Elementer 6) tiger3.jpg 7) tiger.doc vidste du at -afsnittet, skal sættes op i punktopstilling 8) tiger.jpg Lorem ipsum 9 dolor 8 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc vitae purus. Aenean viverra malesuada libero. Fusce ac quam. Donec neque. Nunc venenatis enim nec quam. Cras faucibus, justo vel accumsan aliquam, tellus dui fringilla quam, in condimentum augue lorem non tellus. Pellentesque id arcu non sem placerat iaculis. Curabitur posuere, pede vitae lacinia accumsan, enim nibh elementum orci, ut volutpat eros sapien nec sapien. 7 6 Actions 9) LINKS: Løve -> linker til love.html Dødningehovedabe -> linker til dodhovedabe.html Tiger -> linker til tiger.html

27 PROCES / STORYBOARD billedegalleri.html Lorem ipsum dolor19 Elementer 6) lion7galleri.jpg 7) lion2galleri.jpg 8) lion3galleri.jpg 9) lion4galleri.jpg 10) lion5galleri.jpg 11) lion6galleri.jpg 12) lion1galleri.jpg 13) lion8gallari.jpg 14) cubsgalleri.jpg 15) cubs1galleri.jpg 16) cubs2galleri.jpg 17) cubs3galleri.jpg 18) cubs4galleri.jpg Lorem ipsum dolor sit amet, consectetuer adipiscing elit Actions 7) lion2galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion2galleristor.jpg 8) lion3galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion3galleristor.jpg 9) lion4galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion4galleristor.jpg 10) lion5galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion5galleristor.jpg 11) lion6galleri.jpg, ved at holde musen hen over, skiftes billede med 6) til lion6galleristor.jpg 12) lion1galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion1galleristor.jpg 13) lion8galleri.jpg, ved at holde musen hen over, skifter billede med 6) til lion8galleristor.jpg 14) cubsgalleri.jpg, ved at holde musen hen over, skifter billede med 6) til cubsgalleristor.jpg 15) cubs1galleri.jpg, ved at holde musen hen over, skifter billede med 6) til cubs1galleristor.jpg 16) cubs2galleri.jpg, ved at holde musen hen over, skifter billede med 6) til cubs2galleristor.jpg 17) cubs3galleri.jpg, ved at holde musen hen over, skifter billede med 6) til cubs3galleristor.jpg 18) cubs4galleri.jpg, ved at holde musen hen over, skifter billede med 6) til cubs4galleristor.jpg 19) Tilbage til løve -> linker til love.html

28 PROCES / FREMSTILLING AF FLASH Først lavede jeg banneret i photoshop, hvor jeg lagde de forskellige frames i hvert sit lag. Derefter hentede jeg det ind i flash og lavede dem om til movieclip. Så lavede jeg en key frame, så billederne var fremme i et stykke tid på skærmen før de skifter til et nyt. Derefter blev der oprettet en motion tween, med blur, så der er en rolig overgang mellem billederne.

29 PROCES / EKS. PÅ BILLEDEBEHANDLING Her ses det, hvordan jeg har lavet mine billeder klar til web. Føst tjekkes størrelse på billedet, hvilken opløsning (eks. 72 ppi) og om det var i RGB Derefter redigeres størrelsen, så billedet passer til den boks det skal være i på websitet Til sidst gemmes til web and devices, hvor indstillingerne sættes til jpg og høj kvalitet (60). Alt afhængig af billedet, satte jeg kvaliteten til enten medium kvalitet (50) eller høj kvalitet (60). Ved roll-over image er der lagt inner glow på billedet

30 Proces / tekster KONTAKT Har du spørgsmål, ris eller ros er du velkommen til at sende os en mail Randers zoo Grovebakkevej Randers NV Tlf info@randerszoo.dk Zoo 7) LØVERNE Hvor gammel kan en løve blive? Læs mere om det her og se de mange billeder >> 9) TIGERNE Læs mere om verdens største katte og se hvor store de kan blive >> 11) DØDNINGEHOVEDABERNE Hvor kommer denne abes navn fra? Få svar på dette ved at læse mere her >> DØDNINGEHOVEDABE (BOLIVIENSIS BOLIVIENSES) Udbredelse: Lever i trætoppene i Regnskoven. Kropslængde: Krop cm og hale cm. Vægt: g. Menu: FORSIDE, OM ZOO, BESØG, ZOOS DYR, KONTAKT Footer: Randers zoo, Grovebakkevej 10, 8920 Randers NV, Tlf , info@randerszoo.dk Index. 7) LÆS MERE OM ZOO Her kan du læse mere om, hvem vi er og vores projekter. >> 9) SE DYRENE Læs mere om dyrene, og se deres fodringstider, samt de mange billeder af løverne >> 12) SE BILLEDERNE AF LØVERNE OG DERES NYE UNGER Se de mange billeder af vores løver og de nye unger. Ungerne hygger sig, og er nu så gamle, at de kan tumle rundt, så der er masse af liv i Randers zoo i disse dage. >> 13) PLANLÆG DIT BESØG I RANDERS ZOO Her kan du læse mere om vores åbningstider og billetpriser, samt muligheden for at spise i zoo. Her vil også være oplysninger om events. >> Kønsmoden: 3 5 år. Drægtighed: dage Antal unger: 1 unge om året Føde: Frugter, bladknopper, insekter og små hviveldyr Levetid: år Social adfærd: Lever i store flokke af typisk individer. Status: Truet Vidste du at: Det engelske navn squirrelmonkey, henviser til dødningehovedabens lighed med et egern Det danske navn dødningehovedabe kommer af aftegningen i ansigtet som ligner et dødningehoved. Den lange hale bruges til at holde balancen, og aben bevæger sig adræt rundt, selv på meget tynde og bevægelige grene. Dødningehovedaber er meget sociale dyr. Gruppen kommunikerer indbyrdes bl.a. ved mange forskellige lyde og et enkelt advarselskald er nok til at drive hele flokken på flugt. De regnskovsområder, hvor dødningehovedaben naturligt lever, forsvinder med foruroligende hast til fordel for kvægdrift og landbrug. BESØG I RANDERS ZOO I Randers zoo kan du opleve dyr fra 5 verdensdele, og meget af turen rundt i haven foregår til fods, så man kan nyde de naturskønne omgivelser. Har man lyst til at opleve nogle af Afrikas dyr helt tæt på, kan man få en tur i safaribilen på en Land Rover Safari. For at gøre dit besøg så nemt som muligt, har vi samlet et udvalg af nyttige oplysninger herunder: Mulighed for at leje trækvogne. Der er borde og bænke rundt om i haven, hvor man kan spise sin medbragte mad. Der er mulighed for at spise på Zoo Café, som er åben hele året Man kan købe regnslag og paraplyer i Zoo Shoppen. Der er bagagebokse. Kørestole og el-scootere kan lejes. Hunde, der føres i snor, må gerne medtages. Handicaphjælpere har gratis adgang. Indgang lukkes en time tidligere end lukketider. PRISER 2011 voksen kr. 140,- Barn (3-11 år) kr. 80,- Studerende kr. 110,- Pensionist kr. 110,- Grupper på min. 20 personer - 20 % ÅRSKORT Fri adgang til Randers zoo i 12 måneder, samt en række rabatfordele voksen kr. 320,- Barn (3-11 år) kr. 190,- Studerende kr. 220,- Pensionist kr. 220,- Med et årskort får du mulighed for: At deltage gratis i en Løve årlig guidet aftenrundvisning i Randers zoo. At tage en ven med gratis i zoo til den årlige årskortweekend. At deltage i en årlig lodtrækning 6) SE BILLEDERNE om dyrepasser AF LØVERNE for OG en dag DERES NYE UNGER At få 10% rabat i Zoo Se Shoppen de mange billeder af vores løver og de nye unger >> At låne trækvogne gratis 8)LØVE At få 10% i spisestedet i Zoo Café AFRIKANSK LØVE (PANTHERA LEO) Udbredelse: Lever syd for Sahara i Afrika. Kropslængde: Han: 1,70-1,90 m og hun 1,40 1,75 m. Vægt: Han: kg og hun: kg. Kønsmoden: Han: 5 6 år og hun: 3 4 år. Drægtighed: dage. Antal unger: 2 4 unger. I sjældne tilfælde op til 7 unger. Føde: Hov- og klovdyr lige fra antiloper til giraffer. Til tider unge næsehorn, elefanter eller flodheste. Vortesvin er en lækkerbisken, der ofte spises som dessert. Levetid: år. I zoologiske haver op til 25 år. Social adfærd: Lever socialt. Flokke kan bestå af op til 30 dyr, hvor en eller flere hanner dominerer. Ved flere hanner, er de oftest fra samme kuld. Status: bestanden er stabil i visse beskyttede områder. De væsentligste trusler mod løver er forebyggende drab for at beskytte liv og husdyr samt trofæjagt.derud over har sygdomme været en trussel mod løvepopulationer. Vidste du at: Nyfødte løveungers øjne er åbne, og de har plettet skind, der virker som camouflage. Hanløvens funktion i gruppen er at beskytte denne, samt at gøre hunnerne drægtige. Når løveunger er 6-8 uger gamle, bliver de indlemmet i flokken. Alle flokkens hunner passer ungerne og lader gerne fremmede unger die ved sig. 4 ud af 5 løveunger dør inden de bliver 1 år. Løver jager helst om natten. Om dagen hviler de sig gerne et skyggefuldt sted TIGER SIBIRISK TIGER (PANTHERA TIGRIS ALTACIA) Udbredelse: Lever i skovområder i Sibirien, Nordkorea samt Manchuriet. Kropslængde: Han: 2,70 3,80 m og hun: 2,40 2,75 m. Vægt: Han: kg og hun: kg. Kønsmoden: 3 4 år. Drægtighed: dage. Antal unger: 2 4 unger. Føde: Okser, hjorte og vildsvin. I tilfælde af fødemangel også mindre dyr som frøer og endda store insekter. Levetid: år. I zoologiske haver op til 25 år. Social adfærd: Lever alene. Han og hun har overlappende territorier og mødes kun for at parre sig. Status: ca vildtlevende dyr tilbage. Vidste du at: Der findes i dag 5 ud af oprindeligt 8 forskellige tigerunderarter. De 5 nulevende arter er: 1. Sibirisk tiger 2. Bengalsk tiger 3. Indokinesisk tiger 4. Sydkinesisk tiger og 5. Sumatratiger. De 3 uddøde arter er: 1. Kaspisk tiger (panthera tigris virgata) - levede i skov og steppeområder i Afghanistan, Iran, Mongoliet, Tyrkiet og den centrale del af Rusland. Uddøde i starten af 1970 erne. 2. Java tiger (panthera tigris sondaica) - levede på den indonesiske ø, Java. Uddøde i 1980'erne. 3. Bali tiger (panthera tigris balica) - levede på den indinesiske ø, Bali. Uddøde i 1940 erne. Den sibirske tiger er den største af alle katte. En sibirsk tiger kan have et territorium på op til 80 km2. Tigeren kan æde kg kød på én gang. I gennemsnit lykkes kun 1 ud af 20 jagter. I kinesisk naturmedicin bruges alle dele fra tigeren mod diverse sygdomme. F eks. bruges knurhårene fra en tiger mod tandpine. Knoglerne i forskellige blandinger bruges mod bl.a. gigt, muskelkrampe, mavesår, tyfus og brandsår. OM RANDERS ZOO Randers zoo blev grundlagt i 2009 og er derfor en nyetableret zoologisk have, som strækker sig over et 65 hektar stort og naturskønt område med skov og søer ca. 10 kilometer fra Randers. Allerede i 2010 havde haven et besøgstal på ca. 1 mio, og der er nu 80 fuldtidsansatte medarbejdere inden for 6 områder: Administration, dyrepassere, dyrlæge, butik, cafe og service. Randers zoo er privatejet og ledes af den administrerende direktør, Sofie Jespersen, den øvrige direktion samt bestyrelsen. MASSER AF PLADS TIL DYRENE I dag er der ca. 80 arter i Randers zoo og flere af dem er udryddelsestruede. Vores filosofi er, at holder man dyr i fangenskab, skal man også sørge for, at de trives. Derfor skal dyrene blandt andet have masser af plads og mulighed for fysisk aktivitet, og det er derfor det vigtigt, at der er i Randers zoo er god plads og et godt miljø, som skal fremme dyrenes trivsel. AVLSPROJEKTER En stor del af arbejdet i Randers zoo består i at yde en aktiv indsats for bevarelse af udryddelsestruede dyr, og 20 af havens arter indgår derfor i særlige avlsprogrammer. Denne beslutning bliver taget på baggrund af artens besvær med at yngle i fangenskab, eller hvis arten er udryddelsestruet i naturen. Disse særlige avlsprogrammer bliver kaldet EES, European Endangerede Species, og EAB, European Animal Breeding, og samarbejdet foregår på tværs af landegrænser og på tværs af dyreparker, som et seriøst planlagt avlsarbejde koordineret internationalt. Der bliver bag kulisserne i de europæiske zoologiske haver lagt et stort arbejde i at bevare truede dyrearter. Til årlige konferencer vurderes situationen for de forskellige dyrearter, ud fra forskning, reelle tal og tidligere erfaringer. Hvis en dyreart er truet bliver den klassificeret til at være en EES art, som i praksis betyder, at der er særlig fokus på arten. Senere ophøjes arten til EAB, hvis det vurderes, at arten er ved at være truet, og tendensen for avl går i negativ retning. Dette betyder i praksis, at der laves et decideret avlsarbejde for arten. EAB bestemmer hvilke individer der skal parres, og hvilke dyr der skal flyttes fra den ene zoo til den anden. Vi bestemmer derfor ikke selv i Randers zoo, hvilke EAB dyr vi har i haven. Dyrene placeres efter, hvad der er bedst for arten, og ikke af hensyn til den enkelte zoo.

31 Proces / opsætning i dreamweaver / index.html

32 PROCES / CSS / FORSIDE.CSS OG ZOO.CSS utf-8 ; #wrapper #middel #down { float: left; height: 100px; width: 360px; padding-right: 10px; margin-top: 20px; #wrapper #middel #up { float: left; height: 100px; width: 360px; padding-right: 10px; #wrapper #middel #mid { float: left; height: 220px; width: 370px; margin-top: 20px; margin-left: 10px;.forside { margin-right: 5px; margin-left: 10px; #wrapper #middel #rightforside { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; margin-top: 20px; margin-left: 10px; float: left; utf-8 ; #wrapper #middel #leftzoo { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-top: 20px; margin-left: 71px; #wrapper #middel #midzoo { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-top: 20px; margin-left: 52px; #wrapper #middel #rightzoo { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-top: 20px; margin-left: 52px;

33 PROCES / CSS / STYLES.CSS body { background-image: url(img/baggrund.png); background-repeat: repeat-x; *{outline:none; #wrapper { float: none; height: 600px; width: 800px; margin-top: 40px; margin-right: auto; margin-left: auto; #logo { float: left; height: 50px; width: 80px; #banner { float: left; height: 200px; width: 800px; #menu { float: left; height: 25px; width: 800px; background-image: url(img/trae.jpg); padding-top: 5px; #wrapper #menu a { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; text-decoration: none; margin-right: 0px; margin-left: 50px; padding-right: 60px; #wrapper #menu a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #C7CC9F; text-decoration: none; #middel { float: left; height: 290px; width: 800px; #wrapper #middel h1 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #5F7935; padding: 0px; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 0px; #wrapper #middel H2 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-weight: bold; color: #5F7935; #wrapper #middel a { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000; text-decoration: none; margin: 0px; padding: 0px; #wrapper #middel a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #5f7935; text-decoration: none; margin: 0px; padding: 0px; #wrapper #middel p { font-family: Arial, Helvetica, sans-serif; font-size: 10px; font-style: normal; line-height: 14px; color: #000; margin: 0px; padding: 0px;

34 PROCES / CSS / STYLES.CSS #footer { background-image: url(img/trae.jpg); float: left; height: 23px; width: 800px; padding-top: 7px; #wrapper #footer p { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; text-align: center; margin: 0px; padding: 0px; #wrapper #middel #left { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-top: 20px; margin-left: 20px; #wrapper #middel #leftdyr { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-left: 20px; #wrapper #middel #right { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; margin-top: 20px; #wrapper #middel #rightdyr { padding: 7px; height: 180px; width: 165px; border: 3px solid #C7CC9F; float: left; #wrapper #middel #top { height: 20px; width: 220px; margin-top: 0px; margin-bottom: 0px; margin-left: 375px; padding-top: 0px; #wrapper #middel #txt { float: left; height: 250px; width: 350px; margin-top: 20px; margin-right: 10px; margin-left: 10px; padding-right: 10px; padding-left: 10px; overflow:auto; scrollbar-base-color:#ffffff; scrollbar-arrow-color:#5f7935; Scrollbar-darkshadow-color: #5F7935; Scrollbar-Shadow-Color: #FFF; #wrapper #middel #txtdyr { float: left; height: 250px; width: 350px; margin-right: 10px; margin-left: 10px; padding-right: 10px; padding-left: 10px; overflow:auto; scrollbar-base-color:#ffffff; scrollbar-arrow-color:#5f7935; Scrollbar-darkshadow-color: #5F7935; Scrollbar-Shadow-Color: #FFF; #wrapper #middel #top a { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000; text-decoration: none; padding-right: 20px; margin: 0px; padding-top: 0px;

35 PROCES / CSS / STYLES.CSS #wrapper #middel #top a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #5F7935; text-decoration: none; margin-top: 0px; padding-top: 0px; #wrapper #middel h3 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 14px; font-weight: bold; color: #000; margin: 0px; padding: 0px; text-align: left; #wrapper #middel #txtdyr li { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 14px; color: #000; padding-top: 0px; text-align: left; list-style-position: outside; #wrapper #middel #txt li { font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height: 14px; color: #000; padding-top: 0px; text-align: left; list-style-position: outside; #wrapper #middel #txtdyr ul { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; #wrapper #middel #txt ul { padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 10px; margin-top: 0px; margin-bottom: 0px; margin-left: 5px; #wrapper #footer a { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #FFF; text-decoration: none; margin-left: 3px; #wrapper #footer a:hover { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #C7CC9F; text-decoration: none; margin-left: 3px;

36 PROCES / TEST / FIREFOX OG EXPLORER Her er sitet testet i explorer. Sitet fungere fint, og man kan se at jeg selv har defineret den farvede scrollbar. Her er sitet testet i firefox. Sitet fungere fint, men her kan man ikke se den defination, jeg har lavet på den farvede scrollbar.