body{
background-color: #EEEEEE;
}
#container{
max-width: 800px;
height:auto;
margin: 20px auto;
}
#header{
background-color:white;
padding:inherit;
clear:both;
padding:1%;
}
#sok{
float:right;
}
input{
color: grey;
}
/* brödsmulorna är enligt slutenhetenslag. Man ser att länkarna hör ihop eftersom de är omslutna av en tonplatta*/
#breadbox{
background-color:white; /*bra kontrast mot vit enligt Princip 1, 1:4 urskiljbart, kontrastratio 6.6:1*/
clear:both;
font-family: ”Trebuchet MS”, arial;
font-size: 11px;
color: #000;
padding:5px 0px 0px 10px;
overflow:hidden;
}
#breadbox a{
color:black;
}
#breadbox a:hover{
color:#0b5cb2;
}
#wrapper{
background-color:white;
height:auto;
overflow:hidden;
float:left;
padding:1%;
}
#menu{
background-color:white;
height:100%;
width:25%;
float:inherit;
}
#navbar{
text-decoration:none;
line-height: 150%; /*radavståndet är 150%, rekomenderat, Princip 3, 3:1 läsbart.*/
}
/*länkarna är placerade nära varandra och har samma färg. De uppfyller då både närhetens lag och likhetens lag*/
a.listlankar{
text-decoration:none;
font-family:arial;
font-size: 13px;
color:#61a4b3; /*färgen som Hans använt är ej bra ur kontrastsynpunkt 2.8:1*/
}
a{
color:white;
text-decoration:none;
}
a:hover{
text-decoration:underline;
}
#content{
background-color:white;
height:auto;
width: 70%;
float:left;
margin: inherit;
padding:inherit;
}
h1,h2,h3,h4{
font-family: Georgia, arial;
padding: 0px;
margin-top:2px;
}
h4{
width:100%;
background-color:#0b5cb2;
padding:4px;
color: white;
font-family: arial;
font-weight: normal;
}
.ingress{
font-weight: bold;
font-size: 12px;
}
.publicering{
color:gray;
padding:0px;
margin-top:-20px;
}
/*all text är högerjusterad och har radavstånd 150%. Dessutom är brödtext en sanserif för öka läsbarheten. Princip 3, 3:1*/
p{
font-family: ”Trebuchet MS”, arial;
font-size: 11px;
line-height:150%;
font-weight:normal;
}
.valid{
width:70px;
height:auto;
margin-top:4px;
padding-top:1px;
}
/*Law of symmetri and balance. För att få balans i footern så är texten centrerad*/
#footer{
background-color:#0b5cb2;
clear:both;
padding:1%;
text-align:center;
}
#footer p{
color:white;
font-family: ”Trebuchet MS”, arial;
font-size: 11px;
}
/*http://www.eagleowl.se/tutorials/webdesign/enkelsidacss.html*/
#topmenu{
padding:5px 0px 5px 0px;
clear:both;
height:20px;
background-color:#0b5cb2;
}
#menurad{
width:100%;
padding:0;
margin:0;
list-style-type:none;
font-family: ”Trebuchet MS”, arial;
font-size: 11pt;
color: #fff;
}
.menulink2{
float:right;
margin-right:10px;
text-decoration: none;
}
.menulink{
float:left;
margin-left:10px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang=”sv” xml:lang=”sv”> <!–Denna kod gor det mojligt for en prator att lasa upp info pa webbsidan pa svenska, om man ar synskadad, Princip 3, 3:1, –>
<head>
<meta charset=”UTF-8″>
<title>Agria – Djurförsäkringar</title> <!–en unik och beskrivande titel, Princip 2, 2:4–>
<link rel=”stylesheet” type=”text/css” title=”css” href=”tisdag.css”>
</head>
<body>
<div id=”container”>
<!–Princip 2, 2:3. Sidan innehåller ingen blinkande text eller grafik som kan framkallada karampanfall–>
<div id=”header”>
<!–a-taggen nedan är logotypen som är placerad uppe i vänstra hörnet med tanke på fokalpunkt och var användaren förväntar sig att hitta logotypen. Den är även klickbar och leder till startsidan. alt-attribut har lagts till enligt Princip 1, 1:1, visar text av icke-textbaserat innehåll samt att det är för en eventuell prator. Title har lagts till för att en tooltip ska beskriva bilden om den inte laddas upp tex. Tabindex finns enligt princip 2, 2:1, att all funktion ska vara tillgängligt via tangentbordet, du kan tabba dig fram.–>
<a href=”tisdag.html”><img id=”loggatext” src=”logga.jpg” alt=”Agria Djurförsäkringar” title=”Agria Djurförsäkringar” tabindex=”1″/></a>
<div id=”sok”><!–en sökruta finns väl synlig och strategiskt placerad. Så att användaren enkelt kan söka efter det den letar efter. –>
<input type=”text” value=”vad söker du?” title=”Sök” size=”15″ name=”sok” tabindex=”2″ />
<button type=”button” tabindex=”3″>Sök</button>
</div><!– end sok–>
</div><!– end header–>
<div id=”topmenu”>
<ul id=”menurad”>
<li><a tabindex=”3″ title=”lank” href=”test_tenta.html”>START</a></li>
<li><a tabindex=”4″ title=”lank” href=”test_tenta.html”>OM AGRIA</a></li>
<li><a tabindex=”5″ title=”lank” href=”test_tenta.html”>AKTUELLT</a></li>
<li><a tabindex=”6″ title=”lank” href=”sid2.html”>KONTAKT</a></li>
<li><a tabindex=”7″ title=”lank” href=”http://www.aftonbladet.se/”>VILLKOR</a></li>
</ul> <!– end menurad–>
</div> <!– end topmenu–>
<div id=”breadbox”> <!–brödsmulor, för att användaren ska kunna se var på webbsidan man befinner sig. Enligt princip 2, 2:4–>
<div id=”bread”><span>Här är du nu: </span><a href=”test_tenta.html” title=”hem” tabindex=”3″>Start</a><span> | </span></div>
</div> <!–end bread–>
<div id=”wrapper”>
<div id=”menu”>
<h4>Försäkringsguide smådjur</h4>
<img src=”faglar.jpg” alt=”Smådjur” title=”Smådjur” width=”205″ /> <!–Bilderna som används har tydlig koppling till innehållet och denna följer law of continuation då de tittar framåt eller ner på länkarna–>
<p >Här finns information för dig som funderar på att skaffa smådjur</p><!–allt utseende är placerat i CSS för att få en ren och strukturerad kod –>
<!–Law of proximity + Law of similarity.Länkarna är placerade när varandra för att man ska se att de hör ihop. De ser även likadana ut för att förstärka deras samband. –>
<div id=”navbar”>
<a href=”http://www.w3schools.com/” title=”Våra smådjursförsäkringar” tabindex=”4″>Våra smådjursförsäkringar</a>
<br/>
<a href=”http://www.w3schools.com/” title=”Teckna försäkring smådjur” tabindex=”5″>Teckna försäkring smådjur</a>
<br/>
<a href=”http://www.w3schools.com/” title=”Teckna försäkring papegoja” tabindex=”6″>Teckna försäkring papegoja</a>
<br/>
<a href=”http://www.w3schools.com/” title=”Så fungerar smådjursförsäkringar” tabindex=”7″>Så fungerar smådjursförsäkringar</a>
<br/>
<a href=”http://www.w3schools.com/” title=”Ordlista för krångliga ord” tabindex=”8″>Ordlista för krångliga ord</a>
<br/>
<a href=”http://www.w3schools.com/” title=”Villkor” tabindex=”9″>Villkor</a>
</div><!– end navbar–>
</div><!– end menu–>
<div id=”content”>
<!– Law of proximity. Bilderna ligger tätt intill för att de hör ihop. Närmare varandra än andra objekt.–>
<img src=”flicka.jpg” alt=”Flicka med kanin” title=”Flicka med kanin”/> <!–Law of focalpoint. Tjejen ler och lockar med blicken användarens nyfikenhet att locka till fortsatt läsning–>
<h1>Skötsel av kaniner</h1><!–Hierki. Den vktigaste rubriken tilldelas h1–>
<p>Publicerat: 2010-12-12 16:07</p>
<p>Här kan du läsa om hur du bästa tar hand om din kanin. Läs om miljö, utfodring, sjukdomar. Kaniner är intelligenta, vänliga och tysta husdjur. Det går ganska lätt att träna kaninen att bli rumsren.</p>
<p>Tamkaninen, Oryctolagus cuniculus, härstammar från vilda kaniner i västra Europa och norra Afrika. Den är strikt växtätande, och betar vanligen i skymning eller under natten. Kaninen använder sina klor för att gräva sig hålor för skydd och vila. I det vilda visar kaniner sällan tecken på aggression, utan flyr i stället vid tecken på fara. Kaniner i fångenskap kan däremot uppvisa aggression vid stress eller hot.</p>
<p>Kaniner är intelligenta, vänliga och tysta husdjur. Det går ganska lätt att träna kaninen att bli rumsren. Medellivslängden för kaniner är 7-9 år, med rekord ända upp till 15 år. Följande information är sammanställd för att hjälpa Dig ta bästa möjliga hand om Ditt djur så att kaninen kan få ett långt och friskt liv. Råden är skrivna med dvärkaniner som ”modell”, rasvariationer kan förekomma.</p>
<br/>
<img src=”litenkanin.jpg” alt=”Bild på vädur” title=”Bild på vädur”/>
<h2>Reproduktion hos kaniner</h2>
<p>Kaninhonan blir könsmogen vid 3-9 månaders ålder, hanen vid 3-10 mån ålder. Dräktigheten varar 29-35 dagar (i medeltal 31-32 dagar), och kullen innehåller oftast 4-10 ungar. Avvänjning av ungarna kan påbörjas vid 6-8 veckors ålder. De bör dock inte skiljas helt från mamman förrän vid 8 veckors ålder.</p>
<img src=”kaniner.jpg” alt=”Två kaniner” title=”Två kaniner”/>
</div><!–end content–>
</div><!– end wrapper–>
<div id=”footer”>
<p>
Hitta den information du behöver angående smådjursförsäkringar hos Agria djurförsäkringar.
<br />
Besöksadress: Tunagatan 34, 324 45 Borlänge
<br />
Hjälp att hitta på vår webbsida <a href=’http://www.aftonbladet.se’ tabindex=”10″> Sitemap</a>
<br />
Ansvarig utgivare och Copyright © Moa Fagerlund 2012 |<a href=’http://www.aftonbladet.se’ tabindex=”11″> Kontakt</a><!–Kontakt information i footern för att visa anvndaren att någon ansvarar för sidan och att den hålls uppdaterad –>
</p>
<!–Innehållet är robust och fungerar för olika webbläsare, enligt Princip 4 4:1, validerat och kompatibelt –>
<!–<p>
<a href=”http://jigsaw.w3.org/css-validator/check/referer”>
<img src=”http://jigsaw.w3.org/css-validator/images/vcss-blue” alt=”Valid CSS!”/></a>
</p>–>
</div><!–end footer–>
</div><!–end container–>
</body>
</html> <!–sidan är validerad. Princip 4, 4:1, uppfylls därmed.–>
Actionscript i samma ruta som startsidan:
gjord_btn.addEventListener(MouseEvent.CLICK, byggsten);
function byggsten(event:MouseEvent):void
{
gotoAndStop(”byggsten”);
}
farg_btn.addEventListener(MouseEvent.CLICK, färger);
function färger(event:MouseEvent):void
{
gotoAndStop(”färger”);
}
avsluta_btn.addEventListener(MouseEvent.CLICK, avsluta);
function avsluta(event:MouseEvent):void
{
gotoAndStop(”avsluta”);
}
stopSound_btn.addEventListener(MouseEvent.CLICK, ljud);
function ljud(event:MouseEvent):void
{
SoundMixer.stopAll();
}
url_btn.addEventListener(MouseEvent.CLICK, mer_info);
function mer_info(event: MouseEvent)
{
var front:URLRequest = new URLRequest(”http://sv.wikipedia.org/wiki/Regnb%C3%A5ge”);
navigateToURL(front, ‘_blank’);
}
acstionscript på en av tillbaka-knapparna:
button_1.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame);
function fl_ClickToGoToAndStopAtFrame(event:MouseEvent):void
{
gotoAndStop(”front”);
}
Actionscript på se allt igen-knappen:
igen_btn.addEventListener(MouseEvent.CLICK, upprepaintro);
function upprepaintro(event:MouseEvent):void
{
gotoAndPlay(1);
}
andra actionscriptet är ett stop(); och ligger innan startsidan.
Första actionscriptet:
huvudmenyn_btn.addEventListener(MouseEvent.CLICK, front);
function front(event:MouseEvent):void
{
gotoAndStop(”front”);
}
Vad händer sen
Jag tror nog tyvärr att den här bloggen börjar gå mot sitt slut. Men jag vill inte ge upp den helt, det är ändå min första. Man vet ju aldrig om man vill komma tillbaka till där man började. En dag när bilderna tar slut (fast de ska de väl inte kunna göra) så vill jag kanske skriva här igen…
Dags att sova igen.
Nu är klockan sådär mycket igen. Dagarna går så fort. Idag har vi haft vårt första seminarium i skolan. Det handlade om gruppdynamik och vi fick berätta om oss själva. Inte så farligt som jag hade befarat så jag är nöjd med dagen. Nu ska jag och min lilla sovkompis (kattungen) släcka lampan och sova för i morgon har jag lektion kl 8. Vi ska lära oss Illustrator, spännande.
Flytt.
Nu har helgen passerat och en ny vecka ska snart ta vid. Jag har hunnit med en del den här helgen i alla fall. I fredagsnatt övernattade jag hos mormor och morfar. Konstigt att bara kunna göra det så där. Det var en mysig kväll, vi var hos morbror George och fick grillat, såg när lill-kusinen sprang uppe i skogen med massa andra barn och såg Sverige ta hem segern mot Ungern. Igår var jag i skogen med Petra och lill-kusinen och plockade kantareller. Jag har inte gjort det tidigare så det var svårt att hitta det gula guldet vill jag lova. Men lite fick vi med oss hem och ikväll blev det en kantarellmacka=) Efter skogen hjälpte jag kusin Sara med deras flytt till nya huset. Och större delen av den här dagen har vi flyttstädat gamla huset och bara vilat inför veckan.
Ja just det nu är min första uppgift i skolan skickad. Jag blir lite nervös för det, har jag gjort rätt, är det bra, blir det godkänt? Ja ja det är inte så mycket att fundera på nu.
I morgon är jag också ledig. Vet inte vad jag ska hitta på, funderar på nollningen faktiskt. Ha ha ja ni läste rätt, jag HAR funderat på det. Innan så kanske jag hinner ut en sväng i skogen…
Nu ska jag i vart fall ta och sova. Bredvid ligger Saras och Tobbes lilla kattunge som vi hämta idag. Majken aka Smajken.
På tal om…
På tal om förbipasserande tåg så måste ett monstertåg precis ha åkt förbi för det skakade i väggarna ett bra tag. Men nu har bommarna åkt upp igen och jag kan fortsätta att tänka på feedback:P
En vecka.
Imorgon har jag avklarat min första vecka som dalkulla och som högskolestudent. Än så länge känns det bra även om det i samma stund känns jobbigt. Ja nästan allt är ju nytt och inga rutiner har man fått än heller. Men jag trivs och jag hade glömt hur kul det är att skriva och lära sig nya saker. Dessutom är miljöombytet ganska härligt, ja jag syftar på naturen. Idag när jag och Mitschan körde hem från skolan på motorleden tittade jag på alla berg och gröna skogar som omgav oss (ja, jag tittade på vägen också). Det är vackert här, det är grönt och eftersom jag bor på landet just nu så är allt så lugnt och rofullt. Det är nästan som att åka tillbaka lite i tiden. Förlåt Dalarna men det känns så…
Jag ligger på mitt rum nu och skriver på min uppgift jag fått från skolan. Ja men visst, vi har redan fått en läxa, vi ska skriva max 2 a4 om Johari-fönstret och max 2 a4 om feedback. Det är svårt att komma in i skrivandet men det är som sagt roligt. Medan jag ligger här och skriver så hör jag ibland bommarna gå ner för att tåget är på väg, rätt som det är susar tåget förbi och bommarna slår upp igen. Jag blir lika förvånad varje gång. Ja det är inte av tåget av sig utan det är bara så ovanligt att höra det i vardagen. Det är något nytt.
Ni undrar säkert vad för roliga saker som händer på kvällarna med nollningen och så. Och förlåt David, men jag har inte varit med mycket på det där. Det är inte roligt, inget händer, man går bara runt och hänger känns det som. Kanske blir det bättre men jag hade hoppats på lite tävlingar och sådant. Men jag får vara en torrboll helt enkelt, det finns iaf fler av oss i klassen som tur är…
Nej nu ska jag skriva klart. När jag får mer tid ska jag lägga upp lite bilder på memoarmoa.blogg.se
Mojsan 