Brogårdsgymnasiet

Gymnasieskolan i Kristinehamn
Brogårdsgymnasiet
Jimmy Pettersson och Matti Engström Svensson
Hemsida för Åkes nya Elmuseum
Projektarbete 100 poäng (PA 1201)
Läsåret 2010/2011
Handledare: Anders Andersson
Innehållsförteckning
INNEHÅLLSFÖRTECKNING ................................................................................................................... 2
SAMMANFATTNING ................................................................ ERROR! BOOKMARK NOT DEFINED.
1. INLEDNING .............................................................................................................................................. 3
BAKGRUND ................................................................................................................................................. 3
SYFTE .......................................................................................................................................................... 3
METOD ........................................................................................................................................................ 3
2. HEMSIDAN ............................................................................................................................................... 3
UPPBYGGNAD.............................................................................................................................................. 4
3. DISKUSSION ............................................................................................................................................ 6
4. KÄLLFÖRTECKNING ........................................................................................................................... 6
TEXTKÄLLOR .............................................................................................................................................. 6
BILDKÄLLOR ............................................................................................................................................... 6
BILAGA ........................................................................................ ERROR! BOOKMARK NOT DEFINED.
Projektarbete
2
Brogårdsgymnasiet
1. Inledning
Bakgrund
Båda är intresserade av webbdesign och när Anders Andersson framförde förslaget om att
man skulle kunna göra en hemsida till ett företag, tyckte vi att det lät som en bra idé som
passade oss. Vi tog kontakt med läraren som hade framfört idén och snart började vi
planera vårt projekt.
Syfte
Syftet med projektet är att designa samt dokumentera saker från ett museum. Vi skulle
också anpassa hemsidan så att den var enkel att läsa på samt enkel att uppdatera med ny
information.
Metod
Hemsidan skapas med hjälp av HTML kod samt CSS script. Vi försöker att göra
hemsidan så snarlik riktiga hemsidor för museum, och som utgångs mall har vi Historiska
Museet hemsida [1].
2. Hemsidan
Arbetet med hemsidan tog mer tid än vad vi hade räknat med. Den första sidan som vi
gjorde tyckte vår handledare att det skulle bli för svårt att uppdatera med nya artiklar och
med nya menyer. Vi hade också problemet med att hemsidan inte såg lika ut i olika
webbläsare. Vi fick tips om att vi kunde skapa vår sida i Google Sites för att göra
hemsidan enklare. Vi provade Google Site men vi ansåg att hemsidan inte blev som vi
ville så vi gick tillbaka till att knacka kod i Dreamwewer igen. Denna gång byggde vi upp
hemsidan mer som en blogg i utseendet samt gjorde det enklare att uppdatera sidan.
Här ser ni den gamla sidan (till vänster) samt den nya sidan (till höger).
Projektarbete
3
Brogårdsgymnasiet
Uppbyggnad
Första sidan var uppbyggd med hjälp Dreamwewer och bestod huvudsakligen av CSS
script. HTML koden för den sidan användes bara för att lägga upp text på sidan, samt
namn på olika menyer och boxar. Den nya sidan är också byggd med hjälp av
Dreamwewer och består av lite CSS script samt lite HTML så att den är enkel att ändra
både utseendemässigt och enkel att hitta vad man ska ändra i källkoden för de olika
delarna av hemsidan. Här under hittar man de vanliga HTML-koder för den nya
hemsidan.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//SE"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="skript.css" />
<title>Åkes Nya Elmuseum</title>
När en server sänder ut ett dokument till en webbläsare så sänds också en del
kompletterande information i dokument som kallas HTTP-rubriken.Content-Type-fältet i
HTTP-huvudet beskriver vilken typ av dataformat som används. Observera att ContentType-fältet också talar om vilken teckenkodning hemsidan har samt om sidan använder
script och vart script filen är placerad. I fältet finns också sidans namn.
<style type="text/css">
<!-body,td,th {
color: #053F7F;
}
-->
</style>
Här hämtas ett speciellt värde från CSS-filen som till exempel kan göra det enklare att
ändra färgen på sidan, då man inte behöver öppna script filen och leta reda på det
specifika värdet.
</head>
<body>
<div id="page">
<div class="topNaviagationLink"><a href="index.html">Hem</a></div>
<div class="topNaviagationLink"><a href="besok_oss.html">Besök oss</a> </div>
<div class="topNaviagationLink"><ahref="museumet.html">Museumet</a></div>
<div class="topNaviagationLink"><a href="veta_mer.html">Veta mer!</a></div>
</div>
Här finns menylänkarna för sidan som leder dig bort från startsidan.
<div id="mainPicture">
<div class="picture">
<div id="headerTitle"></div>
</div>
</div>
Detta är mainPicture eller som man brukar kalla det för banner för en hemsida just nu
använder vi oss av en bild man kan ochså använad sig av enbart text. Då får man fylla i
text under hederTitle.
Projektarbete
4
Brogårdsgymnasiet
<div class="contentBox">
<div class="innerBox">
<div class="contentTitle">Välkomna!</div>
<div class="contentText">
Här beskrivs vart den specifika texten på sidan ska ligga just nu ligger den i contentBox
som har en innerBox som contentTitle och contentText. contentBoxen är hela den
gråfärga sidan med text. innerBoxen är den specifika box som texten ligger i och där
finns textens titel i contentTitle som i detta fall är Välkomna! då detta är start sidan.
<p><br />Åkes Nya Elmusseum ligger i den mellanstora staden Kristinehamn i
Värmland. Åke drev museet fram tills han dog vintern 2009. Han har också betytt mycket
för elens utveckling här. </p> <br />
<p>År 1951 kom han till Kristinehamn och började jobba hos C O Nilssons Elektriska
där han hade hand om försäljningen av Elektrolux produkter. 1954 Startade han och en
kompanjon Elektra Kristinehamn AB, som var en traditionell elektrisk byrå med affär och
installationsverksamhet. År 1960 startade han ännu ett företag som fick namnet
Hushållsapparatservice AB. Som framgår var affärsidén att serva de elektriska apparater
och maskiner som de tidigare sålt. År 1964 övertog hans kompanjon Elektra
Kristinehamn AB. </p> <br />
<p>Åke och hans fru Ingrid startade samtidigt affären Elmodul med specialinriktning på
elapparater och maskiner för kök och tvättstugor. Elmodu var en av de första affärerna,
som i sina lokaler byggde upp demonstrationskök och tvättstugor. Senare känt som
Elkedjan som Åke och Ingrid drev fram tills 1985 då företaget såldes. Båda företagen
finns kvar än idag.
</p>
</div>
Över här kommer texten från contentText som är själva artikeln på sidan.
<div class="contentTitle"></div>
<div class="contentText"><p><br /></p></div>
</div>
Här är en extra box där man kan skriva en artikel som kommer direct under den första
artikeln.
</div>
Vid denna div slutar contentBoxen och övergår till en footer istället.
<div id="footer"><a href="">Copyright © 2010 Jimmy Pettersson & Matti Engström
Svensson. All Rights Reserved.</a> </div>
Här i foorern finner man copyright.
</body>
</html>
Här stängs bodyn samt html koden för hemsidan.
Projektarbete
5
Brogårdsgymnasiet
3. Diskussion
4. Källförteckning
[1] Historiska Museet,http://www.historiska.se/ grund mall för hemsidans utseende
Textkällor
1. Gamla halmstads årsbok 2006, ”mitt liv i elbranschen” av Åke Johansson
Bildkällor
1. Vår egen hemsida
2. Vår egen hemsida
Projektarbete
6
Brogårdsgymnasiet