Lektion 12

Dreamweaver
Dynamisk html och javascript

I Dreamweaver kan man skapa dynamiska, databaserade webbprogram med olika serverspråk, tex ASP, CFML och PHP. Men det ligger utanför denna kurs.

De enda dynamiska egenskaper vi skall använda är Javascript och Dynamisk html, DHTML.
DHTML är ett ganska diffust begrepp. Enklast kan det beskrivas som en utveckling av traditionell html som endast kan skapa statiska sidor där det enda dynamiska består av hyperlänkar du kan klicka på. Inget annat kan hända på en statisk htmlsida. Vi har redan bekantat oss lite med javascript och sett att sidorna kan bli mer dynamiska genom dessa script.
Dynamisk html och javascript används ofta tillsammans.

Begreppet är ganska luddig, som du nog märkt. Det är heller inget begrepp som World Wide Web Consortium , W3C har godkänt. Vi fördjupar oss därför inte mer i detta utan övergår till att rent konkret se vad det i praktiken kan innebära.

Att göra skikt (skikt är en annan metod att designa en hemsida med än med tabeller)synliga eller osynliga är en dynamisk egenskap. Rulla över namnen nedan och se vad som händer på kartan

Sjukhuset Gerdahallen

Spar ner kartan och den animerade gifbilden till vänster genom att klicka med höger musknapp och välja "spara som"

Gör en enkel tabell med två kolumner. Använd "infoga paletten"
I den ena kolumnen lägger du kartan genom att klicka på bildobjekt i infogapaletten.

Ditt skikt och din bild bör se ut som till vänster. Själva skiktet kan du storleksförändra genom att dra i ett hörn. Ändra så det bara är något större än själva bilden. Både skikt och bild kan förflyttas genom att klicka och dra i den lilla vita "lådan" uppe till vänster i skiktet.

Klicka på F12, sidan kommer då att öppnas upp i en webläsare. Det är inte säkert att bilden ligger exakt där du vill ha den, du får då korrigera genom att flytta hela skiktet.

Klicka nu i den tomma kolumnen och skriv ett ord, skriv bla bla, vi skall nu bara skapa funktionen "visa - dölj skikt"

Markera"blabla".

I övre menyn väljer du Fönster > Beteende > Visa -Dölj skikt.

Utan din medverkan har det skikt du skapat döpts till "Layer1". Markerar Layer1 och klicka på "Visa".

I beteendepaletten (se nedan) står det nu "onMouseOver". Du har alltså gjort en funktion att skiktet med bilden skall bli synligt om man rullar över ordet du markerade.

Du kan klicka på den lilla pilen till höger för att se en mängd olika händelser, men ändra inte till något annat än "onMouseOver"

Markera "blabla" igen, Klicka på + till vänster i händelsepaletten och välj visa -dölj skikt en gång till. Denna gång väljer du Dölj.

Nu inträffar det egendomliga att du får två onMouseOver händelser, som du ser i händelsepaletten, se nedan.

För att lista ut vilken av dem som döljer skiktet måste du dubbelklicka på "visa-dölj skikt under åtgärd. När du väl listat ut vilken, enkelklickar du på den, se nedan. Det dyker då upp en liten pil mellan händelse och åtgärd och där väljer du då onMouseOut.

Lägg till ett nytt ord under Blabla och gör ett nytt skikt som visas och döljs på samma sätt fast på annan plats på kartan. (Detta skikt kommer automatiskt att döpas till "Layer2")

Nu återstår den svåra biten: Hur får vi skikten att vara osynliga från början?

Det saknas en händelse i händelsepaletten som vi skulle behöva, det är en händelse som några av er använde i Javasciptövningen (Bildspelet med fade- in effekten). onLoad händelsen får vi själv lägga in.

Markera ordet blabla och öppna upp källkoden och kopiera hela onMouseOut händelsen.
onMouseOut="MM_showHideLayers('Layer1','','hide')"
Klistra in det efter "Body" i bodytaggen och byt ut onMouseOut mot onLoad

Sedan blir det invecklat, vi skall ju sätta igång två funktioner i onLoad händelsen, både Layer1 och Layer2 skall bli osynliga när sidan laddas in.
För enkelhetens skull kopierar du denna sidas onLoadfunktion, (se bodytaggen)

Slutligen använder du Egenskapspaletten och skapar vanliga länkar från dina båda ord. Länkarna kan gå vart som helst, detta är ju bara en övning där funktionerna var det viktigaste, inte innehållet.

Uppgift:
Du skall nu tillämpa ovanstående teknik med en annan karta eller annan bild (Det behöver alltså inte vara en karta) och lägga ut på din sida 7. Det skall vara minst tre fungerande länkar.