Om opgaven:For et halvt år siden overtog nogle bekendte værtshuset Midt-skiws i Skive. De havde derfor brug for en ny hjemmeside, som kunne fungere som et online informationssted og visitkort for deres forretning.

Hjemmesideproduktion har ikke fyldt meget under min uddan-nelse, så jeg har set det som en god og lærerig udfordring at producere denne side.

Da den eksisterende hjemmeside (www.midtskiws.dk), der tilhører de gamle ejere, ikke afspejler hvordan stedet er nu var det vigtigt at få lavet et godt design som kan vise engagementet fra de nye ejere. Det er blevet til en enkel, men funktionel hjem-meside, som opflyder de krav og ønsker de havde til siden fra start.

Afsender:Værtshuset Midtskiws. Et værtshus som ejerne genåbnede i januar 2011. De tilbyder kunderne hyggelige omgivelse, musik- og sportsevent og drikkevarer m.m. til rimelige priser.

De bygger deres image op omkring hyggelige omgivelser og deres mange arrangementer.

Modtager:Alle der ønsker at vide noget mere om Midtskiws og hvad de har af arrangementer for tiden.

Deres kundesegment er M/K i alderen 18-80+, der nyder en øl eller flere i hyggelige omgivelser med plads til hver eneklt.

Programmer:Web: DreamweaverBilledbehandling: Photoshop

Kvalitetsvurdering:Overordnet er jeg godt tilfreds med det færdige resultat, jeg havde min tvivl om hvorvidt jeg var i stand til at klare opgaven pga. min manglende erfaring med at producere hjemmesider. Dertil kommer, at det har været en sej proces at få materiale til opgaven fra kunden, da de har travlt med forretningen.

Men efter færdiggørelsen af hjemmesiden har jeg fået mod på at arbejde videre med det også i fremtiden, dog med lidt mere struktur i hele processen.

Jeg ville oprindelig gerne have haft flere billeder på siden, men det har ikke været muligt at skaffe nogen fra kunden. Lige-ledes virker formularfeltet ikke, da jeg pt. ikke har den fornødne kunnen endnu til at få denne funktion til at virke.

Jeg er specielt glad for billedslider funktionen i toppen, der fungere via et javascript, som jeg lærte at implementere via en tutorial og filer fra internettet*. Det giver liv til siden og det giver Midtskiws en mulighed for at sætte fokus på aktuelle tilbud og lignende.

Cathrine Laulund

workflow

* http://cssglobe.com/post/5780/easy-slider-17-numeric-navigation-jquery-slider.

Flowchart:Denne hjemmeside skal fungere som online informationssted og visitkort.

Derfor har jeg, i samarbejde med kunden, valgt at siden skal indeholde en index/velkomstside med en kort præsentation af stedet og 4 undersider med priser, events, information om privatfester og en kontaktformular.

Index/velkomstside

Priser Events Privatfest Kontakt

FB-link

E-mail

#wrapper #aabningstid background-color: #E1E1E1float: rightheight: 158pxwidth: 300pxmargin-top: 14px

#wrapper #kalenderbackground-color: #485059float: leftheight: 158pxwidth: 300pxmargin-bottom: 10px

#wrapper #footer background-color: #730217height: 30pxwidth: 900pxfloat: left

Body#top #imgtop width: 900px height: 130pxmargin-right/left: auto

#wrapper #img_slidewidth: 900px height: 200px

#wrapper #box_venstre background-color: #ccd3d9float: leftheight: 316px / width: 600pxmargin-top: 14pxmargin-bottom: 10px

#wrapper #aabningstid Se info nedenfor

#wrapper #kalender Se info nedenfor

#wrapper Width: 900pxheight:570pxclear: bothmargin-right/left: auto

#top #menu height: 30px / width: 900px

#topbackground-color: #730217height: 160pxwidth: 100%

#wrapper #footer Se info nedenfor

Siden opbygning:Jeg startede med at nulstille min margin og padding i min body, sådan at alt indhold starter i øverste venstre hjørne, bodyen fik desuden bag-grundsfarven #F4F4F4.

Cathrine Laulund

workflow

Sidens opbygning:Top:Her er #imgtop placeret, hvori logoet ligger, det er fra Photoshop gemt til web. Det fungerer som et link til index-siden som jeg definerede til at float left, højde og bredde som logoet og en left margin på 20 px., så den rykkede lidt ind. Heri har jeg også skrevet teksten i toppen, den er stylet med et

.

Som det næste ligger menuen med en højde på 30 px og bredde på 900 px. og baggrundsfarven #730217.

Som det næste definerede jeg ul’en magen til samt: list-style-type: none

I ul’en ligger ul li og ul li a, jeg ville gerne have at menupunktet skal være hvid når man er på en side. Derfor definerede jeg en ul li .selected.

Sidens opbygning:Wrapper:Wrapperen er sat til en bredde på 900px, højde 570px og clear: both, margin-right/left: auto.

Som det allerførste i wrapperen placerede jeg #wrapper #img_slide, B:900px/H:200px, som indeholder billederne der glider forbi i toppen hele tiden.

Det er lavet med et javascript – hen-tet fra Internettet. Med dette script kan jeg have billeder kørende på siden, hvilket giver lidt til et ellers statisk look. Fordelen ved denne metode, frem for flash-elementer, er at disse også virker på mobiltelefoner osv., der ikke bruger flash-player. De skal dog have nogle ekstra indstillinger for at siden virker 100% korrekt på en mobil.

Billederne i slideren er poduceret i Photoshop og gemt til web.

#top #imgtop p {font-family: „Times New Roman“, Times, serif;font-size: 80px;color: #FFF;text-decoration: none;top: 0px;right: 0px;float: left;padding: 20px;}

#top #menu ul li {text-align: center;float: left;height: 30px;width: 180px;}

#top #menu ul li a {font-family: Verdana, Geneva, sans-serif;color: #FFF; text-decoration: none; font-size: 9pt; display: block; height: 25px; width: 180px; padding-top: 5px;}

#top #menu ul li .selected{ font-family: Verdana, Geneva, sans-serif; font-size: 9pt; color: #485059; text-decoration: none; background-color: #FFF; display: block; height: 25px; width: 180px; padding-top: 5px;

#wrapper #img_slide { height: 200px; width: 900px;}

#wrapper #slider ul { list-style-type: none; margin: 0px; padding: 0px; height: 200px; width: 900px;}

#wrapper #slider li { overflow: hidden;}

#prevBtn, #nextBtn { display: none; }Css for: image_slide,

ul, li og fjernelse af knapper på scriptet.

Css for: Tekst i toppen og menuen

Cathrine Laulund

workflow

Sidens opbygning:Boks i venstre side:Herefter er boksen i venstre side define-ret, den fungerer som informationsfelt på alle sider, bortset fra kontakt, hvor jeg har indsat en kontaktformular. (forklares nedenfor)

Boksen har følgende indstillinger: H: 316px / B: 600px. Baggrundsfarve #ccd3d9 og floater left. For at give luft over og under til de andre elementer er topmar-gin sat til 14px og bundmargin 10 px.

Teksten er stylet med henholdsvis h1 og

Kontaktboks i venstre side:På kontaktsiden har jeg indsat en formular, så man kan skrive til Midtskiws med spørgsmål og kommentarer. Formularen er stylet med en class med padding-left 20px og padding-top 15px.

Sidens opbygning:Footer:Som afslutning på siden er footeren place-ret. Den er lavet som følger: Baggrundds-farve #730217, højde 30 px, bredde 900px og så floater den left.

Sidens opbygning:Boks i venstre side:

Som næste element er der placeret to ens bokse H: 153px, B: 300px. Den øverste kaldet aabningstider har baggrundsfarven #E1E1E1, den floater right og har en topmargin på 14px, så den flugter med boksen til venstre.

Nederste boks, Kalender, fik baggrundsfarven #485059, floater left skaber luft til footeren med en bundmargin på 10px. I denne boks har jeg placeret et link til deres face-bookside, den linker på en ekstern side og er stylet med en class, der floater right, har en topmargin på 115px, right 5 px., for at der ikke skal komme en kasse/ramme rundt om linket har jeg sat border til 0 alle steder ligesom border style er none på alle sider.

Teksterne i boksene er stylet med henholdsvis h1 og

.

#wrapper #box_venstre h1 {font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-weight: bold;padding-top: 20px;padding-left: 20px;line-height: 18px;}

#wrapper #box_venstre p {font-family: Verdana, Geneva, sans-serif;font-size: 9pt;line-height: 15pt;font-weight: normal;color: #000;padding-top: 10px;padding-right: 15px;padding-left: 20px;padding-bottom: 0px;}

#wrapper #aabningstid h1 {font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-weight: bold;padding-top: 20px;padding-left: 25px;color: #485059;}

#wrapper #aabningstid p {font-family: Verdana, Geneva, sans-serif;font-size: 9pt;font-weight: bold;color: #485059;line-height: 13pt;padding-left: 25px;padding-right: 25px;padding-top: 5px;}

#wrapper #aabningstid h1 {font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-weight: bold;padding-top: 20px;padding-left: 25px;color: #485059;}

#wrapper #kalender h1{font-family: Verdana, Geneva, sans-serif;font-size: 15px;font-weight: bold;padding-top: 10px;padding-left: 25px;color: #FFF;}

#wrapper #kalender p {font-family: Verdana, Geneva, sans-serif;font-size: 9pt;font-weight: normal;color: #FFF;line-height: 11pt;padding-left: 25px;padding-right: 25px;padding-top: 10px;}

Css for: h1 og

i venstre boks. Ens på alle sider.

Css for: h1 og

i bokse i højre side.Ens på alle sider.

Css for: h1 for footer

Cathrine Laulund

workflow

Opload og tjek:Da siden var færdig oploadede jeg filerne til serveren som hoster Midtskiws.

Herefter tjekkede jeg den i Firefox, Safari og Internet Explorer og fandt ingen fejl i nogle af browserne.

Cathrine Laulund

workflow