-
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