GRAFISK WORKFLOW GRAFISK WORKFLOW

Transkript

1

2 Opgaven At lave en ny hjemmeside til tekniske skolers sportslege. Den gamle var rodet og uoveskuelig. Det vigtigste var at rydde op, samt holde en rød tråd til logo og indbydelsen. Afsender Lærerne på Aarhus Tech Modtager Lærere på en masse andre tekniske skoler Mål At skabe en overskuelig og let sside, for deltagerne, samt at holde den røde tråd for genkendelighed. Kvalitetsvurdering Jeg har lavet sitet sammen med Henriette. Hun stod for opsætning af drop down menuen, samt nedtællings cirklen. Jeg stod for knapperne (sportsgrenene) samt at få dem linket til de respektive sider. Resten samarbejdede vi om. Det har været en spændende process, og jeg har lært enormt meget om html (mit kendskab inden denne opgave, var minimalt) Det var lidt forvirrende at arbejde på den måde at man hele tiden fik nye ting der skulle på sitet, samt alle de mennesker der skulle komme med korrektur rettelser, men det var en spændende og helt sikkert lærerig process. Udfordringer Fik løbende materiale om sportsgrenene, samt en masse rettelser undervejs, da var mange om at korrektur rette De grafiske designparametre Komposition Bredden på 000px gør at de fleste vil kunne se hele siden på deres skærm uden at skulle scrolle til siden, da det vil være uhensigtsmæssigt. Typografi font-family: Arial, Helvetica, sans-serif, da det er let læseligt til web Stil og stemning Stilen er sat udrfra indbydelse og logo som var lavet på forhånd, for at give genkendelighed for brugeren Arbejdsprocess Brief hos kunden Brainstorm udfra briefs Ide fremlægges for kunden Ide godkendes Arbejdsprocessen påbegyndes Ping-ponger undervejs med kunden om rettelser Får løbende tekst og billeder til at komme på sitet Programvalg Dreamweaver Photoshop Illustrator

3 Skitser og ideudvikling Sportslege websitet fra sidste år som vi skulle langt væk fra Skitser AARHUS TECH AUGUST SPORTSLEGE 0 VELKOMMEN Vi glæder os til at byde velkommen til en god weekend med kollegialt samvær på tværs af skolerne både på idrætsbanen og måske især udenfor. Vi håber på mange spændende konkurrencer afviklet i en god sportslig ånd, og at alle lever op til at det vigtigste er at deltage og ikke at vinde. Det endelige program og øvrige informationer vil fremover være at finde på Her kan du også læse reglerne for de nævnte discipliner. TID OG STED Den august 0 AARHUS TECH Halmstadgade Århus N OVERNATNING Overnatning vil ske i klasselokaler. Der vil være begrænset mulighed for at overnatte i telt/campingvogn på skolens udendørsarealer. Ønsker skolen at medbringe et partytelt, bedes dette anføres på tilmeldingen. FORPLEJNING Grill-buffet fredag fra kl Pris kr. 65,- pr. person. Morgenmad lørdag og søndag. Pris kr. 50,- pr. person pr. dag. FROKOST LØRDAG Der vil være mulighed for køb i vogne på området. FESTMIDDAG Lørdag egne drikkevarer må ikke medbringes. Pris kr. 95,- pr. deltager inkl. en halv flaske vin. Der sælges øl, vand, vin, spiritus m.m. KONTAKTPERSONER Lena Møller Tlf / lm@aarhustech.dk Inger Broholm Tlf / ikb@aarhustech.dk Tilmeldingsfrist. maj 0 Deltagerbetaling kr. 60,- pr. person. VEL MØDT Indbydelsen med logo, som der er taget udgangspunkt i

4 Layout i Photoshop Logo og Knapper i Illustrator Logoet jeg havde lavet til den udsendte pdf, brugte vi i samme stil på sitet Inspireret af den udsendte pdf til Sportslegene, som deltagerne havde fået. For at holde en genkendelig rød tråd. De første knapper jeg lavede til program siderne Lavede dem om, da det gjorde siden for tung

5 Flowchart index Nyheder Informationen Program Resultater Galleri Om Sportslege Sponsorer Kontakt Fodbold Fodbold Forplejning Rundbold Rundbold Aftenfest dk Badminton Badminton Barpriser Petanque Petanque Overnatning Beachvolley Beachvolley Parkering Løb Løb Oversigtskort Bowling Bowling 04 Usportslig Usportslig

6 Skelet Template 50px 50px 00px 000px 750px 0px Wrapper: B:000px, højden flexibel Header: B:000px x H:00px, fast med img på forsiden og Sportslege farven på de resterende sider. Logo box: B:50px x H:50px, ligger fast ovenpå header. Ligger 00px fra toppen af wrapper. Container: B:750px, flexibel højde, men minimum H:6px. Footer: B:000px x H:00px, fast i bunden med kontaktinformationer. Countdown: radius på 70px, ligger ovenpå footer. Menu:B:750px x H:0px, med dropdown funktion minimum 6px 70px 00px

7 Skelet øvrige sider 90px 0px 75px 70px minimum 6px 80px minimum 6px 85px minimum 6px 85px 00px 70px #left gælder for følgende sider: index.html program.html resultater.html om_sportslege.html kontakt.html fodbold.html + fodbold-resultater.html rundbold.html + rundbold-resultater.html beachvolley.html + beachvolley-resultater.html loeb.html + loeb-resultater.html petanque.html + petanque-resultater.html usportslig.html + usportslig-resultater.html badminton.html + badminton-resultater.html bowling.html + bowling-resultater.html forplejning.html parkering.html barpriser.html aftenfest-loerdag.html overnatning.html oversigtskort.html sportslege04.html #right gælder for følgende sider: nyheder.html information.html galleri.html sponsorer.html oversigtskort.html

8 Storyboard generelt Elementer Logo.png Menu Menu - drop down 4 Footer 5 Countdown Actions 4 5 Logo.png - Linker til index.html Menu: Nyheder - Linker til Nyheder.html Informationen - Linker til Informationen.html Program- Linker til Program.html Resultater - Linker til Resultater.html Galleri - Linker til Galleri.html Om Sportslege - Linker til Om Sportslege.html Sponsorer - Linker til Sponsorer.html Kontakt - Linker til Kontakt.html Menu - drop down - Linker til det samme som der er på de pågældende undersider

9 Storyboard for index.html og nyheder.html #Header - header.jpg #header -background-color: rgba (0,59,8,) #Left #content - nyheder.jpg #right - hop.png #center

10 Storyboard for program.html og resultater.html program.html #left - Fodbold.jpg- Linker til fodbold.html Badminton.png - Linker til badminton.html Beachvolley.jpg - Linker til beachvolley.html Bowling.png - Linker til bowling.html #right - Rundbold.jpg - Linker til rundbold.html Petanque.png - Linker til petanque.html Loeb.png - Linker til loeb.html Usportslig.png - Linker til usportslige.html resultater.html a#fodbold:hover Hover-knap for alle sportsgrene #left - Fodbold - Linker til fodbold-resultater.html Badminton - Linker til badminton-resultater.html Beachvolley - Linker til beachvolley-resultater.html Bowling - Linker til bowling-resultater.html #right - Rundbold - Linker til rundbold-resultater.html Petanque - Linker til petanque-resultater.html Løb - Linker til loeb-resultater.html Den Usportslige - Linker til usportslige-resultater.html a#fodbold:hover Hover-knap for alle sportsgrene

11 Storyboard for program.html og resultater.html #left - Forplejning.jpg - Linker til forplejning.html Barpriser.jpg - Linker til barpriser.html Parkering.jpg - Linker til parkering.html a#forplejning:hover Hover-knap for alle kategorier #content - Galleri #right - Aftenfest.jpg - Linker til aftenfest-loerdag.html Overnatning.jpg - Linker til overnatning.html Oversigtskort.jpg - Linker til oversigtskort.html

12 Storyboard for program.html og resultater.html #content - info.jpg #left #center

13 CSS regler * { margin: 0px; padding: 0px; border: none; } html { overflow-y: scroll; } body { font-family: Arial, Helvetica, sans-serif; font-size: px; color: #000; } p { margin-bottom: px; } h { font-size: 0px; color: rgba(0,59,8,); margin-bottom: 5px; text-transform: uppercase; } h { font-size: 6px; margin-bottom: 5px; padding-bottom: px; } a { font-size: px; font-weight: bold; color: rgba(0,59,8,); text-decoration: none; } #wrapper { height: 700px; width: 000px; position: relative; top: 0px; margin: 0px auto; } #header { height: 00px; width: 000px; position: absolute; top: 0px; left: 0px; background-color: rgba(0,59,8,); } #logo { height: 50px; width: 50px; position: relative; top: px; left: 0px; } #menu { width: 750px; float: left; position: absolute; top: 00px; left: 50px; } #content { float: left; min-height: 6px; width: 750px; position: relative; top: -0px; left: 50px; padding: 0px 0 50px; border-top: solid px #000; } #left { width: 90px; margin: 0 80px 0 70px; float: left; } #right { width: 0px; float: left; } #center { width: 75px; float: left; margin: 0 85px; } #footer { width: 000px; height: 75px; float: left; position: relative; top: -0px; background: rgba(0,59,8,); } #fodbold, #rundbold, #badminton, #petanque, #beachvolley, #loeb, #usportslig, #forplejning, #aftenfest, #barpriser, #overnatning, #parkering, #oversigtskort, #bowling { width: 0px; height: 0px; display: block; float: left; } #white { width: 90px; height: 90px; background: rgba(55,55,55,); border-radius: 45px; position: relative; left: 860px; top: -45px; } #countdown { width: 70px; height: 70px; background: rgba(0,0,0,); border-radius: 5px; position: relative; top: 0px; left: 0px; }.topleftspace { margin-top: 0px; margin-left: 0px; }.topspace { margin-top: 0px; }.leftspace { margin-left: 0px; }.bottomspace { margin-bottom: 0px; } a:hover { color: rgba(0,59,8,); } h.leftspace { margin-bottom: 5px; } h.bottomspace { margin: 0 0 5px; } /* program- og resultatbilleder */ #content li { float: left; list-style: none; } #content li a { display: block; } a#fodbold { background: url(../img/program/fodbold.jpg) norepeat; } a#fodbold:hover { background: url(../img/program/fodbold-hover. jpg) no-repeat; a#rundbold { background: url(../img/program/rundbold.jpg) norepeat; } a#rundbold:hover {

14 background: url(../img/program/rundbold-hover. jpg) no-repeat; -webkit-transition: 0.5s;} a#badminton { background: url(../img/program/badminton.png) no-repeat; } a#badminton:hover { background: url(../img/program/badminton-hover. png) no-repeat; a#petanque { background: url(../img/program/petanque.png) no-repeat; } a#petanque:hover { background: url(../img/program/petanque-hover. png) no-repeat; a#beachvolley { background: url(../img/program/beachvolley.jpg) no-repeat; } a#beachvolley:hover { background: url(../img/program/beachvolley-hover.jpg) no-repeat; a#loeb { background: url(../img/program/loeb.png) norepeat; } a#loeb:hover { background: url(../img/program/loeb-hover.png) no-repeat; a#usportslig { background: url(../img/program/usportslig.png) no-repeat; } a#usportslig:hover { background: url(../img/program/usportslig-hover. png) no-repeat; a#bowling { background: url(../img/program/bowling.png) norepeat; } a#bowling:hover { background: url(../img/program/bowling-hover. png) no-repeat; /* program- og resultatbilleder slut */ /* om sportslege billeder */ a#forplejning { background: url(../img/om_sportslege/forplejning. jpg) no-repeat; } a#forplejning:hover { background: url(../img/om_sportslege/forplejninghover.jpg) no-repeat; a#aftenfest { background: url(../img/om_sportslege/aftenfest. jpg) no-repeat; } a#aftenfest:hover { background: url(../img/om_sportslege/aftenfesthover.jpg) no-repeat; a#barpriser { background: url(../img/om_sportslege/barpriser. jpg) no-repeat; } a#barpriser:hover { background: url(../img/om_sportslege/barpriserhover.jpg) no-repeat; a#overnatning { background: url(../img/om_sportslege/overnatning.jpg) no-repeat; } a#overnatning:hover { background: url(../img/om_sportslege/overnatning-hover.jpg) no-repeat; a#parkering { background: url(../img/om_sportslege/parkering. jpg) no-repeat; } a#parkering:hover { background: url(../img/om_sportslege/parkeringhover.jpg) no-repeat; a#oversigtskort { background: url(../img/om_sportslege/oversigtskort.jpg) no-repeat; } a#oversigtskort:hover { background: url(../img/om_sportslege/oversigtskort-hover.jpg) no-repeat; /* om sportslege billede */ #left ul li { list-style: none; float: left; display: block; width: 00%; margin: 0 0 0px; } #left li ul li { float: left; display: block; margin: 7px 0 0 0px; width: 97%; } /*style the main menu*/.mymenu { margin:0; padding:0; }.mymenu li { list-style:none; float:left; }.mymenu li a { display:block; height: 4px; padding: 8px 0px 8px 0; width: auto; text-transform: uppercase; color: rgba(0,0,0,); }.mymenu li a.last { padding: 8px 0; }.mymenu li a:hover { color: rgba(0,59,8,); } /*style the sub menu*/.mymenu li ul { position:absolute; visibility:hidden; margin:0; padding:0; z-index: 600; }.mymenu li ul li { display:inline; float:none; }.mymenu li ul li a {

15 background-color: rgba(0,0,0,); color: rgba(0,59,8,); width:auto; padding: 8px; margin-left: -8px; }.mymenu li ul li a:hover { color: rgba(55,55,55,); } /*countdown style*/.ended { background: #c09b; }.styled div { display: inline-block; position: relative; left: 5px; top: px; font-size: 5px; font-weight: bold; line-height: ; text-align: center; color: #FFF;} /* IE7 inline-block hack */ *+html.styled div{ display: inline; zoom: ;}.styled div:first-child { margin-left: 0; }.styled div span { display: block; /* [disabled]border-top: px solid #cecece; */ padding: px; font-size: px; font-weight: normal; text-transform: uppercase; text-align: left; }

16 Opsætnings eksempler fra Dreamweaver program.html template.dwt