L5

AVSNITT 5 - Snygga till hemsidan (grafik,ramar,ljud,mm)

Syfte: Nu skall din sida bli lite modernare är det tänkt, lite ljud och någon animering bör du efter det här avsnittet ha på din sida. Om du även som överkurs vill göra om din sida till en med ramar, så är det upp till dig - tänkt då bara på att "Mappsidan" måste heta index.htm.

Innehåll

5:1 Introduktion

5:2 Frames(Ramar)

5:2:1 - Frameset - tillägg

5:2:2 - Frame - tillägg

5:2:3 - Länkar och frames

5:3 - Ljud

5:3:1 - Länkljud

5:3:2 - Bakgrundsljud

5:4 - Grafik/Animeringar

5:1 - Introduktion

Vi gör som vanligt att du kopierar hem (l5.zip) till ditt C:\HTML\kurs1 -bibliotek och (bild5.zip) till C:\hemsida\image

5:1 - Frames(Ramar)

Med frames kan du dela upp sidan i olika rutor som kan laddas och förändras på olika sätt, oberoende av varandra. Som närmaste exempel så har du ju just den här kursen som består av tre olika ramar.Enklast kan man säja att en ramsida består av de ramar du ser plus en mapp för sidorna som du inte ser. Så rent schematiskt så ser den här kursens sida ut:

En mappsida h_index.htm, och nedanstående sidor.

Nedanstående kod kan du hitta genom att titta på View/Document source

<html>

<head>

<title>Att göra en hemsida</title>

</head>
(-Med början uppe i det vänstra övre hörnet så lägger jag ut
 hur många kolumner sidan skall ha.
-Det är ju två kolumner varav den första skall vara 19% av sidan
 och den andra ha resten *)
<frameset cols="19%,*" border="0" >
(Jag talar om vilken sida som skall ligga i ramen längst till vänster
dvs h_inneh.htm)
<frame src="h_inneh.htm" name="H_Inneh" >
(Den andra kolumnen den högra, skall ju även delas in i två rader
varav den första skall vara 13% och den andra resten * av sidan)
<frameset rows="13%,*" >
(Jag talar sedan om vilka sidor som skall vara på den översta raden
dvs h_top.htm respektive den nedersta dvs h_main.htm)
	<frame src="h_top.htm" name="H_Top" >
        <frame src="h_main.htm" name="H_Main">
(Här talar jag om att ramsättningen med raderna är slut med /frameset)
</frameset>
(Nedanstående är för browsrar som inte klarar av att hantera ramar)
<noframes>
    <body bgcolor="#FFFFFF">
    </body>
    </noframes>
(Här talar jag om att ramsättningen med kolumnerna är slut med /frameset)
</frameset>


</html>

Som du ser ovan läggs hela frame-definitionen i en FRAMESET-container. Tilläggen i FRAMESET bestämmer hur stora de två framesen skall vara. I det här fallet säger vi att vårt frameset skall bestå av två frames i kolumner (COLS). Bredden på den första framen skall vara 30% av hela framesetets bredd. Den andra framen får använda resten av det tillgängliga utrymmet (*). All övrig information om framesen lägger vi innanför FRAMESET-taggen, i FRAME-taggarna. Den första framen (som specifiserades till 30% bredd) skall innehålla html-filen a.html och den andra html-filen b.html.

För att göra mer avancerade framesets kan vi nesta frameset-taggarna. Här är ett exempel på en utökning av exemplet ovan. Igentligen är vi ju nästan tillbaka till vår kurssida igen, men jag tyckte det behövdes ett lite tydligare exempel

<FRAMESET COLS="50%,*">

 <FRAME SRC="a.html">

 <FRAMESET ROWS="*,50">

  <FRAME SRC="c.html">

  <FRAME SRC="d.html">

 </FRAMESET>

</FRAMESET>

Nu har vi bytt ut höger-framen mot ett nytt FRAMESET som består av två rader; den nedre är 50 bildpunkter hög och innehåller html-filen d.html, den övre upptar resten av det tillgängliga utrymmet och innehåller html-filen c.html.

Ett annat sätt att nesta framesets är att låta en av de inlänkade html-filerna innehålla ett eget frameset. I exemplen ovan kunde vi ha gjort en fil med namnet b.html och i den lagt <FRAMESET ROWS="*,50">-avsnittet.

5:2:1 - Frameset - tillägg

ROWS="n[,n ... n]"
COLS="n[,n ... n]": Bestämmer om framesetet skall bestå av rader eller kolumner. Observera att du anger ROWS eller COLS. Efter ROWS eller COLS anger du ett värde per rad eller kolumn, som anger hur hög/bred denna skall vara. Du kan ange höjden/bredden i bildpunkter (n), höjden/bredden i procent (n%) eller en stjärna (*) - som tilldelar allt tillgängligt utrymme till raden/kolumnen. Ta en titt på exemplet ovan...
BORDER=n: Detta tillägg kontrollerar tjockleken på listerna mellan framesen. Skriv BORDER=0 för att ta bort dessa helt. Tyvärr använder Netscape och Microsoft idag olika kommandon för denna funktion, BORDER är Netscapes variant - Microsofts heter FRAMEBORDER. För att ta bort listerna helt i både MSIE och NN, lägg till detta i FRAMESET: BORDER=0 FRAMEBORDER=0 FRAMESPACING=0

BORDERCOLOR="FFFFFF" eller färgnamnet "Red" osv

Styr färgen på ramarna

5:2:2- Frame - tillägg

SRC="URL": SRC bestämmer vad framen skall innehålla, och kan peka på vad som helst. Fungerar precis som en vanlig länk.
NAME="namn": Med NAME-tillägget sätter du ett namn på en frame. Detta är speciellt viktigt när du vill länka från en frame till en annan. (se Länkar och frames nedan)
NORESIZE: Med NORESIZE i FRAME-taggen kan man inte ändra storleken på framen genom att dra i dess borders.
MARGINWIDTH=n
MARGINHEIGHT=n: Antalet bildpunkter mellan framens kant och dess innehåll. Motsvarar tabellernas CELLPADDING.
SCROLLING=[yes|no|auto]: Rull-listernas vara eller inte vara. Normalt är dessa i läge auto - de visas bara om de behövs. Här kan du alltså stänga av dem helt eller se till att de är synliga hela tiden.

5:2:3- Länkar och frames

Om du vill länka från en länk till annan - dvs att en klickning på en länk i en frame skall påverka innehållet i en annan frame - så måste du använda TARGET-tillägget.
<A HREF="URL" TARGET="NAME"></A>
Som target skriver du namnet (NAME) på den frame du vill att länkningen skall visas i.
Ett sätt att enkelt styra alla länkar på sidan till en viss frame är att lägga in <BASE TARGET="NAME"> högst upp på sidan.

Magiska namn
Det finns några speciella target-namn som har specialfunktioner:

_blank öppnar ett nytt fönster för länken.
_self öppnar länken i samma frame som du klickar i.
_parent öppnar länken i överliggande frameset.
_top öppnar länken i hela fönstret och tar bort alla framesets.
_new öppnar ett nytt fönster

Om du vill göra mer avancerade manipulationer av innehållet i dina frames så måste du använda Javascript.

gör det!

a) Med hjälp av ovanstående bör du nu kunna göra en mall sida(or) , som du kan utgå ifrån, då du vill ha en sida med ramar. Vill du ha en sida som ser ut ungefär som den här kursen, med en innehåll-sida, en topp-sida och en huvudsida - så kan du ju enklast bara gå in under View/ Document Source och kopiera koden. Kopiera över koden till Notepad och spara den som C:\HTML\mallar\ram_mall.htm. Nu har du ju en av dina 4 sidor klar .....

5:3 - Ljud/Video

5:3 Ljud/Video

Ljud och eventuellt video kan tillföra din hemsida nya dimentioner. I dag har i princip alla datorer multimediamöjligheter, så varför inte utnyttja det. Tänk bara på att smaken är som baken...

5:3:1 - Länkljud

Det går att länka till ljud och videosnuttar på din hemsida. Användaren kan ibland behöva sk.plug-ins, eller tilläggsprogram till sin browser för att kunna nyttja. Speciellt gäller det för video, som det finns många olika system/spelare för.

Om du klickar på Ljud nedan så hör du filen Msremind.wav
Ljud.

Länken ser ut som vanligt <a href="Msremind.wav">Ljud.</a> På motsvarande sätt gör du om du vill spela en video, som ofta är i mpeg - format. Länken kan då se ut <a href="Video.mpeg">Video.</a>

Det går givetvis till på motsvarande sätt om du vill länka ljud/video från en bild istället för en text.

5:3:2- Bakgrundsljud

Här skiljer sig tyvärr Netscape och Internet Explorer åt. För Internet Explorer så ser taggen ut så här,
<BGSOUND SRC="musik.mid">. Tillåtna format i IE är .waw, .au samt .mid. Du kan lägga in ljudet som en loop eller oändligt. Lägg till LOOP=antal eller INFINITE innanför taggen.

I Netscape ska koden vara <EMBED src="musik.mid" width=145 height=60> Format på ljudfilen ska vara .mid.

Som exempel på en fullständig tag, du har kanske hört på LSK länksida att musik spelas i bakgrunden.

För både IE och Netscape bör du skriva

gör det!

Insändningsuppgift 5:3:2 ) Jag skulle nu vilja att du på din egen hemsida och då på den sida som heter links.htm lägger in bakgrundsljud. Var du får mid -filen ifrån spelar mig ingen roll - det finns massor ute på Internet.När du har lagt in ljud så mailar du till mig!

5:4 - Grafik/Animeringar

Du hittar massor av animeringar av olika slag ute på Internet, de vanligaste är nog sk. Gif-animeringar, som du kan se ett exempel på nedan. Obs! Hittar du en animering eller bild du vill ha ute på nätet, så är det bara att använda HM och spara som..

Det finns speciella program som det är lätt att göra animeringar i - det är bara ut och leta!

gör det!

a) Leta reda på en animering som föreställer att du är under arbete med din sida och lägg in den på din hemsida