Hjemmesider i ElevIntra Lav hjemmesider med eleverne Version: August 2012
Indholdsfortegnelse Hjemmesider i ElevIntra...4 Fordele i ElevIntras hjemmesideeditor...4 Ulemper i ElevIntras hjemmesideeditor...4 Hvad er en hjemmeside og hvorfor lave storyboard?...5 Gode råd...6 Storyboard...6 Billeder...6 Tekst...6 Kom godt i gang...7 Log på ElevIntra og opret en hjemmeside...7 Indsæt billede...9 Opret flere sider...11 Linke mellem siderne...11 Billeder som link...13 Links kan også være links til andre sider på nettet...13 Offentliggør en hjemmeside...14 Avancerede funktioner...16 Avancerede link-muligheder...16 Integrer flash på hjemmesiden...16 Embed video på websiden Youtube.com, Break.com m.fl...18 Side [3] af [20]
Hjemmesider i ElevIntra Vil man gerne arbejde med hjemmesider i undervisningen, kan ElevIntra være et godt sted at starte. I ElevIntra kan eleverne på en let måde lære nogle af grundideerne bag hjemmesider, bl.a. opbygning af sidestruktur, layout m.m. Fordele i ElevIntras hjemmesideeditor Der er en række fordele ved at anvende mulighederne i ElevIntra: Ingen ekstra programmer skal købes Enkel tilgang minder om andre arbejdsgange i systemet Hurtigt at arbejde med Stor sikkerhed. Intet bliver offentligt, før læreren godkender det Ingen brug for køb af hjemmesidenavne, domæner m.m. Internettet er stort og giver store muligheder! Ulemper i ElevIntras hjemmesideeditor Vil man gerne arbejde intensivt med hjemmesider f.eks. programmeret i flash, kommer ElevIntra til kort. Til gengæld vil man også få brug for tilkøb af hjemmesideadresser m.m. Gør det ikke sværere end nødvendigt! Side [4] af [20]
Hvad er en hjemmeside og hvorfor lave storyboard? En hjemmeside er en række af sider, der har en indbyrdes sammenhæng. Sammenhængen afgøres af de kæder (links), som forfatteren (her eleven) lægger ind. Et eksempel på en opbygning (storyboard) kunne være: Konkurrencer STARTSIDE Min hest Om heste Araberheste Billeder Kasserne er sider, dvs. der i dette projekt skal oprettes 6 sider. Pilene angiver mulighederne fra den enkelte side. Således kan man fra Start-siden vælge 4 andre sider. Pilene angiver ligeledes hvor man fra en side kan springe hen. Vi anbefaler at eleven laver et storyboard (en tegning over struktur og indhold). Det giver eleven overblik og giver læreren mulighed for på et meget tidligt tidspunkt at stille spørgsmål til opbygning og indhold. Figuren her er lavet i OpenOffice-tegning, der har nogle fine redskaber til at lave pile etc. på en meget nem måde!!...hjemmesider er også for piger! Side [5] af [20]
Gode råd Der er mange faldgruber, når man arbejder med hjemmesider men også mange gevinster! Det er for eleverne ekstremt motiverende at lave hjemmesider, som også farmor kan se. En af de store tidsrøvere kan være tid det tager lang tid at finde billeder, at skrive tekst osv. osv. Et godt forarbejde er alfa og omega! Storyboard Senere kigger vi lidt på en mulig opbygning af storyboard. Anbefaling Sørg for, at eleverne laver et storyboard (kort, præcist) inden de kaster sig over tasterne. Dette giver eleven overblik, muliggør et solidt forarbejde og gør projektet enkelt at overskue for læreren. Billeder Elever kan bruge uanede mængder af tid på at finde de rigtige billeder faktisk kan al tiden gå med at surfe efter det helt rigtige billede af den helt rigtige hest!! Anbefaling Sørg for, at de relevante billeder er til rådighed i ElevIntra. Upload billederne til systemet, så eleverne kun kan vælge mellem de af læreren bestemte billeder! Tekst Tekster kan med held skrives på forhånd i et tekstbehandlingsprogram og blot kopieres ind på websiderne. Dermed har man også en sikkerhedskopi af teksterne, hvis noget skulle gå galt! Anbefaling Skriv i tekstbehandling. Stavekontroller inden teksten puttes ind på hjemmesiden. Husk det nu: Godt forarbejde sikrer et godt produkt! Side [6] af [20]
Kom godt i gang I det følgende vil vi oprette en hjemmeside, som det ser ud fra elevens synsvinkel. Til slut vil vi vise, hvordan læreren godkender hjemmesiden og dermed offentliggør den på skolens hjemmesider m.m. Log på ElevIntra og opret en hjemmeside Eleven logger sig på ElevIntra. Herefter vælges Vi anbefaler på det kraftigste, at der laves en selvstændig mappe til hvert hjemmesideprojekt eleven opretter! 1. Lav en mappe til projektet ved at klikke på 2. Opret en mappe her test 3. Nu er mappen klar Side [7] af [20]
4. Åbn mappen ved at klikke på den 5. Nu skal første side i hjemmesidestrukturen oprettes. Klik på Det er meget vigtigt, at første side kaldes index! Index betyder på nettet altid første side i projektet! Siden får automatisk efternavnet htm, der skal man altså ikke tænke på! 6. Klik på Næste> og det er tid til at putte indhold på siden. Editoren fungerer meget a la et almindeligt tekstbehandlingsprogram. Der kan indsættes billeder med Der kan indsættes symboler med Teksten formateres med Side [8] af [20]
Indsæt billede Klik på knappen Find dit billede og du er klar til at sende billedet til serveren. Side [9] af [20]
Side [10] af [20]
Så er billedet indsat på siden! Opret flere sider NB! Siderne skal oprettes, før man kan linke til dem. På dansk: Opret de ønskede sider først og lav så strukturen bagefter! Vi opretter i dette projekt i alt 3 sider: Linke mellem siderne Når man klikker på en knap eller lignende på en hjemmeside, er der tale om et link. Vi vil lave links mellem de 3 sider, så man kan bevæge sig på følgende måde: Index Bemærk: Siderne kan navngives frit, der må dog ikke anvendes mellemrum og specialtegn, ligesom æ, ø og å skal undgås. Side2 Præcise navne gør det nemmere at overskue sit projekt!! Side3 Side [11] af [20]
1. Rediger siden index ved at klikke på I eksemplet vil vi lave et link på en tekst. 2. Marker den del af teksten, der skal være klikbar 3. Klik på link-knappen 4. Indtast som vist her bemærk hvordan man bruger sidenavnene efterfulgt af.htm!! 5. Nu er linket etableret! For at rette et link, følges punkt 2 til 4 igen! 6. Test ved at klikke på index - og derefter på den nu aktive tekst! (udsnit af indholdet på index-siden) Side [12] af [20]
Billeder som link Man kan også bruge indsatte billeder, indsatte specialtegn eller smileys som knapper! F.eks. 2. Klik her 1. Marker 3. UDFYLD! Links kan også være links til andre sider på nettet Det er også muligt at linke til f.eks. emu.dk eller andre relevante sider på nettet. Arbejdsgangen er den samme: Vælg objekt (tekst, billede, symbol...) Lav et link Udfyld f.eks. som vist her: Side [13] af [20]
Offentliggør en hjemmeside Inden hjemmesiden bliver offentlig tilgængelig, skal den godkendes af læreren. 1. Log på ElevIntra som lærer i den pågældende klasse. 2. Vælg 3. Vælg nu den rigtige klasse og den rigtige elev: 4. Klik på knappen Udgiv mappe ud for den mappe, der skal offentliggøres 5. Svar bekræftende på Side [14] af [20]
Når hjemmesiden på denne måde er offentliggjort, vil man kunne finde den på skolens hjemmeside, oftest under Aktiviteter : Hvad? Er det ikke sværere at lave hjemmesider?? Side [15] af [20]
Avancerede funktioner I det følgende går vi lidt dybere og viser nogle mere avancerede muligheder. Disse tiltag kan gøre hjemmesider flottere og mere spændende, men er absolut ikke et krav!! Avancerede link-muligheder Når man laver links, kan man indstille en masse omkring den måde, hvorpå linket åbnes: Integrer flash på hjemmesiden Mange steder kan man på nettet finde flotte flash-objekter eller man kan lave dem selv i f.eks. Mediator eller Xara Webstyle 3. Filerne indsættes på siden med knappen Filerne skal være af typen.swf Side [16] af [20]
Bemærk muligheden for at bestemme bredde og højde Arrhhhh, nu bliver det vist lidt langhåret! Side [17] af [20]
Embed video på websiden Youtube.com, Break.com m.fl. Med den nye editor er det blevet muligt at indlejre video fra f.eks. YouTube.com uden at elever/lærere ledes over på selve YouTube-hjemmesiden! Fremgangsmåden er meget enkel: 1. Find den ønskede video på YouTube.com f.eks. om jonglering: Læg mærke til Embed -linket 2. Kopier teksten i Embed -linket i eksemplet: <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/urraqi2jve"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/urr-aqi2jve" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object> Vælg at redigere websiden Side [18] af [20]
3. Vælg nu at indsætte embed-kode via Side [19] af [20]