Præsentationsportfolio for Hovedforløb 2. Hjemmeside til Jelly Belly Danmark

Transkript

1 Præsentationsportfolio for Hovedforløb 2 Hjemmeside til Jelly Belly Danmark

2 Opgaven Jeg skal lave en ny og mere nutidig hjemmeside til Jelly Belly Danmark. Jelly Belly er nogle amerikanske slikbønner som er populære i hele verden. Dette er en selvvalgt opgave og jeg har derfor meget frie hænder. Se hjemmesiden på: jellybelly.danweb.com Arbejdsgang Indhold og udseende af hjemmesiden planlægges. Udfra storyboard og skelet med pixelmål, udarbejdes hjemmesiden i programmet Dreamweaver CS5. Indexsiden har et unikt udseende, men alle andre indholdssider har samme grundopbygning og laves derfor med en Template. I Dreamweaver arbejder jeg med Classic arbejdsbord og har det splittet op, så jeg har både Code og Design imens jeg arbejder. Herefter uploader jeg alt html, php, css, og jquery til Joomla (cms-program), hvor det tilpasses, så det bliver nemt at redigere fremover, både for mig og for kunden selv. Jeg tjekker løbende i de forskellige browsere hvordan hjemmesiden ser ud, så jeg er sikker på, at det ser ordentligt ud. Test i forskellige browsere (Usability) Det er vigtigt at teste hjemmesiden i de forskellige browsere der findes, for at sikre sig, at alle brugere, kan anvende hjemmesiden, uanset hviklen browser de har. - Testet i Firefox, Safari, Internet Explorer, Google Crome: virker i alle browsere. Kvalitetsvurdering Produktionen og arbejdsprocessen af hjemmesiden er gået godt. Det blev planlagt godt fra starten, med flowchart, layout, storyboard og skelet, så det forløb planmæssigt. Hjemmesiden er blevet lavet, så den er nem, flot og enkel at navigere rundt i. Den er optimeret med meta beskrivelser og metanøgleord. Desværre har kunden ikke taget hjemmesiden i brug, fordi de overvejer at stoppe som den danske leverandør af Jelly Belly. Men de syntes at den er rigtig flot og meget bedre end den gamle side. ( Procesbeskrivelse - Planlægning og inspirationssøgning - Hjemmesidens struktur laves med flowchart. - Valg af layout, komposition og modulopbygning. - Hjemmesidens udseende og opbygning laves med Storyboard og Skelet (alle pixelmål fastsættes). - Kodning og opbygning af hjemmesiden i Dreamweaver. - Forbindelse til danweb.com s ftp server. - Upload til jellybelly.daweb.com (uofficiel arbejdsside) og tilpasning til Joomla. - Korrekturlæsning - tekst, billeder, navigation, knapper mm. - Publicering til

3 Inspirationssøgning Jelly Belly hjemmesider fra andre lande: jellybelly.com Den originale side er fyldt med mange elementer og er ikke helt nem at få overblik over, når man besøger siden første gang. Dog er det hovedinspirationen hvor man kan være sikker på at få det nyeste inden for Jelly Belly jellybelly.de Sjove små ikoner. Sjov idé at det hele er Jelly Belly formet. Kan dog godt skræmme nogle brugere, som ikke vil kunne finde rundt i JB universet. jellybelly.com.au God bannerstørrelse, også slideshow. Meget enkel side. jellybelly-uk.com Fungerer godt med et stort slideshow banner i toppen, men er meget dominerende i forhold til de andre elementer. jellybelly.cl Denne opbygning og baggrund er brugt på flere JB sider fra forskellige lande. Det fungerer fint men er lidt kedeligt at se på. Menuen er stor og virker lidt klodset. jellybelly.se Skiller sig meget ud fra andre JB sider og skaber en form for ny identitet for JB. Har en anden version af logo og der er skruet helt op for den røde farve, hvor andre JB sider er mere blålige og forskelligfarvede. Skiller sig for meget ud. Andre slik-hjemmesider: jellybelly-uk.com Fungerer godt med et stort slideshow banner i toppen, men er meget dominerende i forhold til de andre elementer. darrelllea.com Den udstråler sin helt egen stil og er ikke til at tage fejl af. Man kommer nærmest på en rejse med produktet. zapsweets.co.uk Sjov idé med toppen! wondermade.com God opbygning med logo placeret centralt. Mindmap om Jelly Belly wonka.com En meget eventyrlig hjemmeside med amerikansk slik. Får tankerne og fantasien i gang.

4 Flowchart - Struktur på nuværende hjemmeside: jellybelly.dk Forside Om Jelly Belly Smag og menu Sjove sager Forhandlere Presse Kontakt bestil jelly belly familien goelitz smagsvarianter klog for sjov presseklip bliv forhandler cykelhold menuer art galleri jens & co. nye varianter månedens menu historie festmenuer produkter smag og menu sjov og ballade Flowchart - Struktur på kommende hjemmeside: jellybelly.dk Forside Om Jelly Belly Smag og menu Sjove sager Presse Kontakt nye varianter familien goelitz smagsvarianter klog for sjov Forhandlere menuer menuer art galleri Bliv forhandler sjov og ballade månedens menu jens & co. bestil jelly belly festmenuer historie cykelhold

5 Layout - håndskitser Med inspiration fra de andre hjemmesider laves nyt design. Håndtegnede skitser med de første ideer til layout. De skitser som er markerede, er dem der hovedsageligt er brugt til videreudviklingen af det endelige layout. Layout til forsiden Layout til indhold Layout til indhold Layout til indhold Layout til indhold Layout til indhold Layout til indhold Layout til indhold

6 Layout - forside Med layout fra håndskitserne laves et grafisk layout Layout - Indholdssider Indholdssiderne skal være ens, i opbygning for at skabe sammenhæng og dynamik i hele siden.

7 Skelet - forside Definition af alle pixelmål på forsiden x variabel x 30 variabel x 30 variabel x 30 variabel x 30 variabel x 30 variabel x 30 variabel x x x 45 Sidebar tekst - 18pt 657 x variabel 245 x 200 Sidebar tekst - 18pt 165 x x x variabel x 30 variabel x 30 variabel x 30 variabel x 30 variabel x 30 variabel x x x x x x x x x x x x x x x x Skelet - Indhold Definition af alle pixelmål på infholdssiderne

8 Storyboard Oversigt over indholdet på hver enkelt side Forsiden Forsiden Vejledning til at forstå storyboardet (heading 1) Alt tekst markeret med rød er h1 overskrifter (heading 2) Alt tekst markeret med grøn er h2 overskrifter (paragraph) Alt tekst markeret med blå er p brødtekst Dette symbol er en henvisning til hvor man kan finde alt tekstindhold og billeder til den pågældende side. Storyboardet kan variere i forhold til det endelige resultat. Det er en rettesnor til en stabil arbejdsgang og et ensformigt og stabilt udtryk på alle siderne. FORSIDE OM JELLY BELLY SMAG OG MENU jelly_belly_logo.png SJOVE SAGER PRODUKTER PRESSE KONTAKT slide_cykelhold.jpg slide_produkter.jpg slide_kinagrannis.jpg slide_menuer.jpg slide_historie.jpg slide_art.jpg TEKST front_varianter.jpg front_menu.jpg front_sjov.jpg Nye varianter: mere farve mere sjov Sammensæt din egen Jelly Belly bean menu Sjov og ballade med Jelly Beans front_netshop.jpg front_historie.jpg front_cykel.jpg Bestil Jelly Belly på netshoppen (p) Læs om Jelly Belly s historie her (p) Føl Jelly Belly s eget cykelhold (p) (p) Om Jelly Belly Tekst fra gamle/ nuværende side: Smag og menu slide_om.jpg slide_smagsvarianter.jpg FØDT SAMMEN MED STJERNERNE side_produkter.png SMAG DIG FREM TIL DIN FAVORIT Om Jelly Belly Smagsvarianter Jelly Belly kommer til verden Jelly Belly er navnet på de verdensberømte jelly beans. De er amerikanere, udviklet og født side om side med skuespillere og stjerner i Los Angeles et stenkast fra Hollywood. Jelly Belly kom til verden i det samme år som Liz Taylor indgik sit syvende ægteskab. En begivenhed, som skabte tilskuere, men ikke desto mindre tiltrak en talentfuld amerikansk slikdistributør sig mere opmærksomhed dette år, da han sammen med slikproducenten Goelitz, præsenterede verden for Jelly Belly beans. Jelly Belly beans er ikke som de andre, men er derimod noget for sig selv. Og lige sådan skal du spise dem hver for sig selv og en ad gangen. Smag og behag er individuelt, så det bestemmer du selvfølgelig selv. Men hvis du spiser én ad gangen, får du bedst den ægte Jelly Belly smag frem. Original Individuel smag blaabaer.jpg tyggegummi.jpg popcorn.jpg netmelon.jpg cappucino.jpg individuel_smag1.jpg Blåbær Tyggegummi Popcorn Netmelon Cappucino Fra den spæde begyndelse blev otte smagsvarianter sendt på markedet: kirsebær, citron lime, vanille soda, grøn æble, root beer, vindrue, lakrids og mandarin. Alle med hver sin individuelle og helt naturlige smag. I dag er der mere end 50 smagsvarianter, men de otte oprindelige er stadigt de mest populære Jelly Belly beans. (p) blaabaer.jpg tyggegummi.jpg popcorn.jpg netmelon.jpg cappucino.jpg individuel_smag2.jpg Blåbær Tyggegummi Popcorn Netmelon Cappucino Sours blaabaer.jpg tyggegummi.jpg popcorn.jpg netmelon.jpg cappucino.jpg side_kontrol.png Blåbær Tyggegummi Popcorn Netmelon Cappucino Osv.

9 Storyboard Oversigt over indholdet på hver enkelt side Sjove sager Ny side med nyt indhold slide_klog.jpg slide_produkter.jpg KINA GRANNIS - "IN YOUR ARMS" EN VERDEN AF JELLY BELLY BEANS Sjove sager Se musikvideoen med Kina Grannis, "In your arms": På denne side præsenterer vi dig for en verden af Jelly Belly beans, hvor du finder alt lige fra assorterede poser til gaveæsker med forskellige smagsvarianter samt sjovt merchandise. Der kommer løbende nye smagsvarianter og spændende produkter, som du finder her på siden. Heading 2 hello_kitty.jpg Heading 2 Paragraph. Sam, sit, quatam am, nim esequodiae Youtube film med Kina Grannis: omnis acilique eturi dionsequia si quaero officient qui te volorit lant, nus. Ut haribusdae. Cae volupta spellaccabo. Et aut voluptu sandanda quam sam nulla sim que pra sollenis desed que nonet et, cuptam rem eaquis des es alit, sition reicilibus. (p) cycling_team.jpg Jelly Bellys eget cykelhold Det er ikke alle slikproducenter som kan prale med at have deres eget cykelhold, men det kan Jelly Belly. Se mere her» Heading 2 Heading 2 Heading 2 pinterest.jpg Jelly Belly på Pinterest Følg Jelly Belly på Pinterest her» Se de nyeste billeder og få en masse inspiration. Presse Kontakt slide_om.jpg slide_map.jpg JELLY BELLY ER POPULÆRT SLIK THE ORIGINAL GOURMET JELLY BEAN side_produkter.png Presse Kontakt Her på siden finder du artikler og sjove historier fra dagblade og magasiner. Du er velkommen til at kontakte os for yderligere information: Klik på ikonet for at åbne pdf-filen: berlingske.pdf Jens & Co Aps Virkelyst 2-4 Gjellerup 7400 Herning Tel Fax Mail info@jensogco.dk - Denne adresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den Send os en besked: (mail/contact form) side_kontrol.png

10 Storyboard Oversigt over indholdet på hver enkelt side Familien Goelitz Menuer slide_historie.jpg slide_menuer.jpg GOELITZ BLIVER TIL JELLY BELLY LAV DIN EGEN JELLY BELLY BEAN MENU Historien om familien Goelitz Menuer Europæiske forfædre Jelly Belly beans blev rige og berømte i L.A som så mange andre kendte. Men det er ingen hemmelighed, at slikbønnerne har europæiske rødder, som kan føres tilbage til Goelitzbrødrene. I midten af 1800-tallet besluttede to brødre ved navn Goelitz at emigrere til Amerika. De var unge, håbefulde og jagtede succes. Første skridt på deres vej hed Belleville og bestod i en lille slik- og isbutik, som den ene passede butikken, mens den anden red rundt i omegnen og solgte slik. Siden gik det stærkt... Det er ikke noget problem, hvis du er kræsen, når menuen står på Jelly Belly beans. Du blander bare smagsvarianterne sammen, så får du hurtigt et helt måltid slik. Mud Pie chokoladebudding.jpg chokoladebudding.jpg cappucino.jpg jordnoed.jpg kage.jpg side_opskrifter.jpg Goelitz bliver til Jelly Belly De to brødre blev til familier og slikbutikken blev til slikfabrikken. En ny Goelitz-generation kom til, og det gjorde en ny type slik også. Og på trods af nogle hårde perioder i Amerika, depressionen og verdenskrigene, overlevede virksomheden. I dag arbejder den 4.generation af Goelitz-brødrene fortsat med at udvikle og producere slik, Familiens største succes er slikbønnerne, som de kalder Jelly Belly = Chokoladebudding x 2 Capuccino Jordnøddesmør Mud Pie Pineapple Salsa mango.jpg pineapple.jpg chili_mango.jpg pineapple_salsa.jpg side_jb_art.jpg goelitz.jpg + + = Mango Pineapple Chili Mango Pineapple Salsa Osv. Månedens menu Festmenuer slide_menuer.jpg slide_festmenuer.jpg SLIP FANTASIEN LØS JELLY BELLY TIL ENHVER ANLEDNING Månedens menu Festmenuer Er du kreativ? Og synes du, det er sjovt at skabe noget lige efter din smag? Så er månedens menu måske en sjov lille konkurrence for dig. Slip fantasien løs og sammensæt din helt egen Jelly Belly bean menu og send eller den til os. Så kårer vores smagsdommere hver måned en ny menu. Vinderopskriften kommer på menuen her på siden! Der er mange måder at holde fest på - nogle mere festlige end andre! Suppe, steg og is eller kanel og peber eller jordbær, chokolade og champagne. Det er ikke altid sjovest at tænke traditionelt. Eller er det? Jens & Co. Virkelyst 2-4 Gjellerup 7400 Herning Tlf Fax Mail info@jensogco.dk Denne adresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den Kontaktpersoner: Jens Peder Damgaard Jens Martin Hagelskjær bryllup.jpg birthday.jpg Sæt Jelly Belly på bryllupsmenuen Køb Jelly Belly beans f.eks. i røde, lyserøde og hvide nuancer Pynt bryllupskagen med jelly beans Lav små poser og fyld dem med jelly beans i stedet for ris Dekorer små flasker eller glas men Jelly Belly beans Fyld små skåle med jelly beans og hav dem stående i cocktailbaren Giv brudeparret en af de mange gaveæsker fra Jelly Belly Sig tillykke med Jelly Belly Sig tillykke til 25-års fødselaren med Jelly Belly beans med kanelsmag Sig tillykke til 30-års fødselaren med Jelly Belly beans med lakridssmag eller med en tyrkisk peber menu (lakrids+chili+chili) Sig tillykke med en Jelly Belly beans gaveæske Månedens menu 1 stk. kokos + 1 stk. lakrids + 1 stk. jordbær daiquiri = lakridskonfekt Månedens menu er indsendt af: Lauritz Lundorff Poder, 6 år Gyldenstensvej Bogense student.jpg Server Jelly Belly beans på studenterbesøget Server forskellige Jelly Belly menuer f.eks. Tequila Sunrise, Chokoladeovertrukket jordbær, Happy Hour, Mud Pie Server studenterkagn med Jelly Belly beans Server en snack med røde og hvide Jelly Belly beans og kom f.eks. skumfiduser, chokolade eller andet slik i. Server Jelly Belly i forskellige farver og lav sjove cocktails til

11 Storyboard Oversigt over indholdet på hver enkelt side Klog for sjov Art galleri slide_klog.jpg slide_art.jpg RUNDT OM JORDEN MED JELLY BELLY KUNST MED JELLY BELLY Klog for sjov Art Galleri holly.jpg Skuespillere spiser Jelly Belly beans Jelly Belly er født under en heldig stjerne og lige fra den spæde begyndelse blev Jelly Belly taget godt i mod i hjembyen Hollywood. De unge, smukke skuespillere kunne ikke stå for den lille slikbønne med den store smag. Og inden nogen nåede at se sig omkring, blev Jelly Belly beans til en berømt spise hos mange af de store stjerner. I dag spiser Mel Gibson, Demi Moore og Larry King blandt andet Jelly Belly beans. Jelly Belly beans er slik for stjerner og slik for sjov, men det er også kunst. I Jelly Belly Art galleri kan du se portrætter af kendisser. Billederne er i klassisk mosaik stil og lavet af Jelly Belly beans. Det kan kaldes slikkunst! Ny kunst: harry_potter.jpg beatles.jpg crown_jewels.jpg regan1_s.jpg Ronald Reagan vild med Jelly Belly Det er ikke bare en god historie, men rent faktisk var Jelly Belly beans grunden til, at Ronald Reagan stoppede med at ryge. Det har han i hvert fald selv udtalt. Han var så vild med at spise Jelly Belly beans, at han stoppede med at ryge helt uden nikotintyggegummi - og uden at Jelly Belly blev nødt til at udvikle en Jelly Belly cigaretmenu. Harry Potter The Beatles - Let it Bean Kronjuvelerne jorden.jpg Præsidentens favoritsmag Ronald Reagan kom til magten i Og i den forbindelse blev der udviklet en Jelly Belly bean med blåbærsmag, som præsidenten fejrede sin indsættelsesfest med. Der blev spist omkring 40 millioner Jelly Belly beans på dagen (omtrent lige så mange som han havde fået stemmer ved valget). Det er også helt almindeligt kendt, at Ronald Reagan ikke startede et møde eller traf en beslutning uden at byde kollegaerne på jelly beans. En ægte fan af Jelly Belly beans kan man sagtens sige uden at fornærme den tidligere præsident. Og det er måske grunden til, at Jelly Belly lavede et jelly beans portræt af ham. You can tell a lot about a fellow's character by his way of eating jelly beans. citat Ronald Reagan Berømte mennesker osv. osv Forhandlere Bliv forhandler slide_jb.jpg slide_forhandler.jpg ALTID LIGE VED HÅNDEN SKAL DU VÆRE FORHANDLER? Her kan du købe Bliv forhandler DANMARK 7-Eleven kæden CoffeeBeansOnline.eu Baggeskærvej 23, 7400 Herning Den Gamle Købmandsgaard Vestergade 3, 5300 Kerteminde osv. side_jb_art.jpg Løber dine tænder i vand, når du hører om slikbønner, der findes i lige den smag, du ønsker? Så er det måske noget for dig at blive forhandler af Jelly Belly! Kontakt os med det samme og lad os få en uforpligtende snak. Jens & Co. ApS Virkelyst 2-4 Gjellerup 7400 Herning Tlf Fax info@jensogco.dkdenne adresse bliver beskyttet mod spambots, du skal have Javascript aktiveret for at se den side_jb_art.jpg side_opskrifter.jpg Kontaktpersoner: Jens Peder Damgaard Jens Martin Hagelskjær side_opskrifter.jpg

12 Storyboard Oversigt over indholdet på hver enkelt side Jens & Co. slide_jens.jpg ANDERLEDES DAGLIGVARER FRA HELE VERDEN Jens & Co. Jens Peder Damgaard er manden bag den trendspottende virksomhed Jens & Co., der distribuerer anderledes dagligvarer fra hele verden. Det kan godt være, at Jens Peder Damgaard er en sindig jyde med begge ben plantet midt på jyske hede, men når det handler om, hvad der er hot i New York, Tokyo og Paris, går det bestemt ikke langsomt for vestjyden - tværtimod. Jens Peder har konstant fingeren på pulsen og til tider går det så stærkt, at det kan være svært at følge med for den midtjyske virksomhed. En skør, skør verden... I 2000 slog Jens & Co. for første gang dørene op til et helt nyt univers fyldt med trendy dagligvarer. Målsætningen var at gøre tingene på en helt anden måde, end man traditionelt plejede at gøre i dagligvarebranchen. Til at starte med satsede Jens & Co. primært på at distribuere amerikanske produkter, men siden hen har virksomheden udvidet sortimentet, og satser i dag på at sælge anderledes dagligvarer fra hele verden. side_jb_art.jpg side_opskrifter.jpg

13 Produktion Forsiden - HTML og CSS laves til forsiden Ting som bør nævnes ved forsiden: - De seks billeder med tekst er sat i en tabel og på den måde 0% centreret på siden. - I footeren er Facebook blevet indlejret med en iframe. Indholdssiderne HTML og CSS laves til en template som bruges til alle andre sider Ting som bør nævnes ved template siden: - Menuen er lavet med en Unordered List - Slideshowet er lavet med jquery. - Logoet er et baggrundsbillede i en div, men stadigvæk muligt at klikke på, så man kommer til forsiden. - Områder som er gjort redigerbare, Editable regions: Slideshowet, Selve indholdet (left-content), højre sidebar (right-content) - Alt andet på siden skal ikke kunne redigeres. Specielt ved andre sider Kontakt-siden: - Her er lavet en kontaktformular Galleri-siden: - Opsætning med tabeller, så det er nemt for andre at tilføje eller fjerne billeder og tekst. Produkt-siden - Opsætning med tabeller, så det er nemt for andre at tilføje eller fjerne produktbilleder og tekst. Sjove sager-siden - You Tube film med Kina Grannis er en iframe Her er koden til mail formularen <form action= =contact&event=submit name= contact id= chronoform_contact method= post class= Chronoform hasvalidation > <div class= ccms_form_element cfdiv_text id= navn1_container_ div style= > <input type= text name= navn onblur= if(this.value== ) this.value= Navn* onfocus= if(this.value== Navn* )this. value= ; value= Navn* maxlength= 200 size= 30 class= title= /> <div class= clear > <div id= error-message-navn > <div class= ccms_form_element cfdiv_text id= adresse1_con tainer_div style= > <input type= text name= adresse onblur= if(this.value== ) this.value= Adresse onfocus= if(this.value== Adresse )this. value= ; value= Adresse maxlength= 200 size= 30 class= title= /> <div class= clear ><div id= error-message-adresse ></ div> <div class= ccms_form_element cfdiv_text id= postnrby1_con tainer_div style= > <input type= text name= postnr onblur= if(this.value== ) this.value= Postnr/by onfocus= if(this.value== Postnr/by ) this.value= ; value= Postnr/by maxlength= 200 size= 30 class= title= /> <div class= clear ><div id= error-message-postnrby ></ div> <div class= ccms_form_element cfdiv_text id= telefon1_con tainer_div style= > <input type= text name= telefon onblur= if(this.value== ) this.value= Telefon onfocus= if(this.value== Telefon )this. value= ; value= Telefon maxlength= 200 size= 30 class= title= /> <div class= clear ><div id= error-message-telefon ></ div> <div class= ccms_form_element cfdiv_text id= 1_container_ div style= > <input type= text name= onblur= if(this.value== ) this.value= onfocus= if(this.value== )this. value= ; value= maxlength= 200 size= 30 class= title= /> <div class= clear ><div id= error-message- > <div class= ccms_form_element cfdiv_textarea id= besked1_con tainer_div style= > <label>besked:*</label> <div class= clear > <textarea cols= 45 rows= 12 class= title= name= besk ed ></textarea> <div class= clear > <div id= error-message-besked > <div class= ccms_form_element cfdiv_submit id= submit1_con tainer_div style= text-align:left ><input name= submit class= value= Submit type= submit /> <div class= clear > <div id= error-message-submit > Forbindelse til ftp-server Der oprettes forbindelse til serveren. De nødvendige filer i forhold til Joomla uploades og egen html, css, jquery, php*, billeder og andre filer uploades også. Herefter kan der arbejdes med hjemmesiden effektivt i Joomla. * php er den kode som fortæller hvilke dele af siderne der skal være redigerbare i Joomla Dette FTP program hedder Cyberduck

14 Produktion - html og php kode Ikke alt kode bliver vist her, men nogle udsnit. HTML - Hypertext Markup Language PHP - Hypertext Preprocessor PHP er et objekt-orienteret server-side programmeringssprog anvendt til udvikling af dynamiske webapplikationer og websteder <!DOCTYPE HTML> <meta http-equiv= Content-Type content= text/html; charset=utf-8 > <head> <title>jelly Belly Danmark</title><!--sidens titel --> <!--styles til slideshow tema --> <link rel= stylesheet href= slider/themes/default/default.css type= text/css media= screen /> <link rel= stylesheet href= slider/slider.css type= text/css media= screen /> <link rel= stylesheet href= style.css type= text/css media= screen /> <!--slideshow javascript - jquery --> <script type= text/javascript src= slider/scripts/jquery min.js ></script> <script type= text/javascript src= slider/jquery.nivo.slider.js ></script> <script type= text/javascript > $(window).load(function() { $( #slider ).nivoslider(); ); </script> </head> <body> <a href= / id= logo ></a> <!--Logo i toppen af siden --> <div id= menu ><!--menubar start --> <ul><!--unordered list start --> <li><a href= index.html >FORSIDE</a></li> <!--list item --> <li><a href= pages/om_jb.html >OM JELLY BELLY</a> <ul> <li><a href= pages/historie.html >Familien Goelitz</a></li> </ul> </li> <li><a href= pages/smagsvarianter.html >SMAG OG MENU</a> <ul> <li><a href= pages/smagsvarianter.html >Smagsvarianter</a></li> <li><a href= pages/menuer.html >Menuer</a></li> <li><a href= pages/month_menu.html >Månedens menu</a></li> <li><a href= pages/festmenuer.html >Festmenuer</a></li> </ul> </li> <li><a href= pages/sjove_sager.html >SJOVE SAGER</a> <ul> <li><a href= pages/klog.html >Klog for sjov</a></li> <li><a href= pages/art_galleri.html >Art galleri</a></li> </ul> </li> <li><a href= pages/produkter.html >PRODUKTER</a></li> <li><a href= pages/presse.html >PRESSE</a></li> <li><a href= pages/kontakt.html >KONTAKT</a> <ul> <li><a href= pages/forhandler.html >Forhandlere</a></li> <li><a href= pages/bliv_forhandler.html >Bliv forhandler</a></li> <li><a href= pages/jensogco.html >Jens & Co.</a></li> </ul> </li> </ul> <!--unordered list slut --> <!--menu slut --> <div id= front_wrapper > <!--front-wrapper starter --> <!--her bruges tabel for at centrere elementerne--> <table width= 0% border= 0 cellspacing= 0 cellpadding= 0 > <tr> <td> <a href= pages/smagsvarianter.html ><img src= images/ front_varianter.jpg width= 281 height= 168 alt= Nye varianter: mere farve, mere sjov title= Nye varianter: mere farve, mere sjov ></a> <p>nye varianter: mere farve, mere sjov</p> </td> <td> <a href= pages/menuer.html ><img src= images/front_menu.jpg width= 281 height= 168 alt= Sammensæt din egen Jelly Belly bean menu title= Sammensæt din egen Jelly Belly bean menu ></a> <p>sammensæt din egen Jelly Belly bean menu</p> </td> <td> <a href= target= _blank ><img src= images/front_netshop.jpg width= 281 height= 168 alt= Bestil Jelly Belly på Netshoppen title= Bestil Jelly Belly på Netshoppen ></a> <p>bestil Jelly Belly på Netshoppen</p> </td> </tr> <tr> <td> <a href= pages/historie.html ><img src= images/front_historie.jpg width= 281 height= 168 alt= Læs om Jelly Belly s historie her title= Læs om Jelly Belly s historie her ></a> <p>læs om Jelly Belly s historie her</p> </td> <td> <a href= target= _blank ><img src= images/ front_cykel.jpg width= 281 height= 168 alt= Følg Jelly Belly s eget cykel hold title= Følg Jelly Belly s eget cykelhold ></a> <p>følg Jelly Belly s eget cykelhold</p> </td> <td> <a href= pages/sjove_sager.html ><img src= images/front_sjov.jpg width= 281 height= 168 alt= Sjov og ballade med Jelly Beans title= Sjov og ballade med Jelly Beans ></a> <p>sjov og ballade med Jelly Beans</p> </td> </tr> </table><!--tabel slutter --> <!--front-wrapper slutter --> <div style= clear:both; > <?php defined( _JEXEC ) or die; <head> <?php $languages = JLanguageHelper::getLanguages(); foreach($languages as $item) { echo <link href= SERVER_NAME ]. /.$item->sef. / rel= alternate hreflang=.$item->lang_code. >. \n ;?> <jdoc:include type= head /> <meta name= viewport content= width=device-width, initial-scale=1.0 > <link rel= apple-touch-icon href= <?php echo $this->baseurl?>/templates/<?php echo $this->template?>/apple-touch-icon.png > </head> <link rel= stylesheet href= <?php echo $this->baseurl?>/templates/<?php echo $this- >template?>/css/style.css > <script> var _gaq=[[ _setaccount, <?php echo $analytics;?> ],[ _trackpageview ]]; (function(d,t){var g=d.createelement(t),s=d.getelementsbytagname(t)[0];g. async=1; g.src=( https: ==location.protocol? //ssl : //www )+.google-analytics.com/ ga.js ; s.parentnode.insertbefore(g,s)(document, script )); </script> <!-- TemplateBeginEditable name= head --> <!-- TemplateEndEditable --> <body class= <?php echo $homepage?> > <?php?> <a href= / id= logo ></a> <div id= menu ><!--menubar --> <jdoc:include type= modules name= nav style= none /> <!--menu slut --> <div id= wrapper ><!--wrapper starter --> <div style= clear:both; > </body> </html> <!--Frontpage slideshow starter --> <!-- TemplateBeginEditable name= slider --> <div id= slideshow > <jdoc:include type= modules name= slideshow style= none /> <!--Frontpage slideshow slutter --> <!-- TemplateEndEditable --> <?php if($active->home == 1){?> <div id= front_wrapper > <jdoc:include type= component /> <?php else {?> <div id= content_wrapper > <!--front-wrapper starter --> <!-- TemplateBeginEditable name= Content --> <div id= left_content > <jdoc:include type= component /> <!-- TemplateEndEditable --> <!-- TemplateBeginEditable name= Right content --> <div id= right_content > <jdoc:include type= modules name= right style= none /> <!-- TemplateEndEditable --> <!--content-wrapper slutter --> <!--wrapper slutter --> <div id= footer > <div id= fb_footer > <iframe src= // com%2fjellybellydanmark&width=9&height=258&colorscheme=light&show_f ces=true&header=false&stream=false&show_border=false scrolling= no frameborder= 0 style= border:none; overflow:hidden; width:9px; height:150px; allowtransparency= true ></iframe> <p>jens & Co Aps Virkelyst 2-4, Gjellerup, 7400 Herning Tel Fax </p> <jdoc:include type= modules name= debug /> <script src= <?php echo $this->baseurl?>/templates/<?php echo $this->template?>/js/ plugins.js ></script> <!--[if lt IE 7 ]> <script src= <?php echo $this->baseurl?>/templates/<?php echo $this->template?>/js/ libs/dd_belatedpng.js ></script> <script> DD_belatedPNG.fix( img,.png_bg );</script> <![endif]--> Det lille ikon i indlæsningsfeltet, er et favicon. Det er 16x16 px og dets filnavn og endelse er favicon.ico. Det skal uploades i Root folderen. Herfra finder den selv ud af resten. <!--wrapper slutter --> </body> </html>

15 Produktion - css styles /*====================*/ /*=== Reset Styles ===*/ /*====================*/ * { outline: none; CSS reset html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:0%; font-family:inherit; p { margin: 0; padding: 0; color: #000; font-size: 14px; font-family: Arial, Helvetica, sans-serif; h1 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 35px; font-weight: bold; h2 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: bold; h3 { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: bold; body { line-height:1; color:black; font:14px/1.6 Arial, Helvetica, sans-serif; color:#333; background-image: url(../images/bg_tr.png); background-repeat: repeat-x; background-color: #dcecf6; table { border-collapse:separate; border-spacing:0; caption, th, td { font-weight:normal; blockquote:before, blockquote:after, q:before, q:after { content: ; blockquote, q { quotes: ; /* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; /*===================*/ /*=== Main Styles ===*/ /*===================*/ a, a:visited { color:#09f; text-decoration:none; a:hover, a:active { color:#09f; text-decoration:none; #dev7link { position:absolute; top:0; left:50px; background:url(../images/dev7logo.png) no-repeat; width:60px; height:67px; border:0; display:block; text-indent:-9999px; #wrapper { width: 980px; margin-top: 0px; margin-left: auto; margin-right: auto; background-color:#fff; border-radius: 11px 11px 0 0; webkit-border-radius: 11px 11px 0px 0px; moz-border-radius: 11px 11px 0px 0px; box-shadow: 0px px px 5px rgba(000, 000, 000, 0.3); webkit-box-shadow: 0px px px 5px rgba(000,000,000,.3); moz-box-shadow: 0px px px 5px rgba(000,000,000,.3);.slider-wrapper { width: 0%; margin-top: 2px; #logo { width: 293px; height: 137px; margin-left:auto; margin-right: auto; margin-top: 30px; background-image:url(../images/jelly_belly_logo.png); background-repeat:no-repeat; display: block; #menu { margin-left: auto; margin-right: auto; width: 980px; height: 36px; margin-top: px; margin-bottom:0px; #menu ul { /* menu på liste - unordered list */ padding: 0px; list-style: none; margin: 0px; padding: 0px; z-index: 99; position: relative; #menu ul li { /* menu på liste - list item */ width: 130px; height: 36px; margin-right: 8px; display: inline; /* sætter menu på linje */ /*background-color: rgba(255, 255, 255, 0.5);*/ position: relative; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; text-align: center; #menu ul li a { /* menu på liste - list item link */ font-family:verdana, Geneva, sans-serif; font-size: 14px; color: #fff; /*background-image: url(../background.jpg);*/ /*border: solid 1px #F60;*/ display: block; /* sørger for at hele feltet er klikbart */ margin: 0px; padding: 6px 2px 0 2px; text-align: center; height: 25px; #menu ul li:hover a { /* menu på liste - list item link hover */ background-color: rgba(255, 255, 255, 0.7); color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; font-weight: 500; #menu ul li a:active { /* menu på liste - list item link hover */ background-color: rgba(255, 255, 255, 0.7); color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; font-weight: 500; #menu ul ul{ position: absolute; /* vigtig - sørger for at dropdown menuen bliver placeret ovenpå, så den ikke forstyrrer andet indhold på siden*/ display: none; #menu ul li:hover ul{ display: block; #menu ul ul li { margin-top: 2px; #menu ul ul li a { background-color: rgba(255, 255, 255, 0.7); margin-top: 3px; color: #000; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; #menu ul li ul a:hover { display: block; color: #09F; border-radius: 5px; webkit-border-radius: 5px; moz-border-radius: 5px; #front_wrapper { width: 920px; height: auto; float:left; padding: 38px 30px 0px 30px; border-top: solid 1px #CCC; position: relative; #content_wrapper { width: 970px; padding: 38px 0px 0px px; border-top: solid 1px #CCC; position: relative;.front_box_left { width: 293px; height: 261px; margin-left:20px;.front_box_right { width: 293px; height: 261px; float: right; margin-right:20px;.img_box { width: 281px; height: 168px; background-color:#fc3; border: 5px solid #8ec1de; border-radius: px;.img_box img { border-radius: 6px; webkit-border-radius: 6px; moz-border-radius: 6px;.front_text { width: 283px; height: 61px; padding: 0 5px 0 5px; margin-top: px; #left_content { width: 597px; height: auto; padding-left: 20px; padding-right: 40px;.left_product_text { width: 587px; height: 200px; margin-left: 30px; margin: 5px 0 px 0; padding-bottom: px; border-bottom: solid 1px #000;.left_product_img { width: 245px; height: 200px; margin-right: 13px;.menutekst { font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold;.gallery { width: 160px; float:left; margin-right: 15px; margin-left: 15px; vertical-align: bottom; #right_content { width: 195px; min-height: 400px; padding: 25px 25px 25px 25px; position: relative; float:right; margin-top: -88px; margin-right: 30px; background-color: #8ec1de; z-index: 99; border-radius: 15px; webkit-border-radius: 15px; moz-border-radius: 15px; border: solid 5px #fff; height: 627px;.right_img { width: 195px; height: 121px; margin-bottom: px;.klog { width: auto; height: auto; margin-right: px; #footer { background-image: url(../images/); background-repeat:no-repeat; padding-top: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0px; width: 54px; height: 389px; text-align: center; #fb_footer { width: 9px; height: 180px; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-bottom-style: solid; border-top-color: #333; border-bottom-color: #333; /*====================*/ /*=== Other Styles ===*/ /*====================*/.clear { clear:both;.wk-slideshow img,.wk-gallery img,.spotlight img, a[datalightbox] img { border-radius: px px 0 0; webkit-border-radius: px px 0 0; moz-border-radius: px px 0 0;.wk-slideshow.caption,.wk-slideshow.caption a { color: #c61f26; font-size: 24px; font-weight: 800; margin:0;.wk-slideshow.caption { background: rgba(255,255,255,0.7); padding: 7px px 5px 35px;.wk-slideshow-default > div:hover.next,.wk-slideshow-default > div:hover.prev { background-image:url(/images/buttons.png); width: 30px; height:30px;.wk-slideshow-default > div:hover.next { background-position: right center;.wk-slideshow-default > div:hover.prev { background-position: left center;.chronoform a { visibility:hidden; /*====================*/ /*=== Other Styles ===*/ /*====================*/.clear { clear:both;.wk-slideshow img,.wk-gallery img,.spotlight img, a[datalightbox] img { border-radius: px px 0 0; webkit-border-radius: px px 0 0; moz-border-radius: px px 0 0;.wk-slideshow.caption,.wk-slideshow.caption a { color: #c61f26; font-size: 24px; font-weight: 800; margin:0;.wk-slideshow.caption { background: rgba(255,255,255,0.7); padding: 7px px 5px 35px;.wk-slideshow-default > div:hover.next,.wk-slideshow-default > div:hover.prev { background-image:url(/images/buttons.png); width: 30px; height:30px;.wk-slideshow-default > div:hover.next { background-position: right center;.wk-slideshow-default > div:hover.prev { background-position: left center;.chronoform a { visibility:hidden;