58 besökare, 1 medlem och 2 Studenter är online nu
Loopia

Dreamweaver

Go To URL

klicka här för att se exemplet »

 

Med hjälp av javascript gör du webbsidorna mer dynamiska och interaktiva. Javascripten utför vissa uppgifter och kan aktiveras på olika sätt. Vanligt är att de aktiveras automatiskt när sidan laddas i webbläsaren eller genom klickning på en text eller objekt. Javascripten utförs av webbläsaren och har begränsat stöd i vissa äldre webbläsare. Dreamweaver MX har ett tjugotal färdiga javascript som är anpassade för att passa de flesta webbläsare och fler script finns att hämta på Macromedia Exchange ».

I det här exemplet används Behaviors (javascript) i ett Frameset för att öppna två sidor i varsin ram En undermeny öppnas samtidigt som en ny sida visas i huvudramen. Åtgärden som används är Go To URL som gör det möjligt att öppna en ny sida i det aktuella fönstret eller i en specifierad ram vilket ju är särskilt användbart just för undermenyer.

I övningsexemplet nedan har vi använt oss av tre ramar där den översta ramen visar samma innehåll hela tiden medan innehållet i de två undre ramarna byts ut samtidigt med ett enda klick:

klicka här för att se exemplet »

 

Exemplet nedan förutsätter att du redan har ett Frameset med färdiga dokument som du kan länka med Go To URL.

TIPS! Om du använt ramnamnen top, blank, self eller parent kan det orsaka problem i vissa webbläsare då de är defaultvärden vid länkning i frameset. Använd dina egna namn på ramar när du ska använda dig av Go To URL.

Innan du börjar ser du till att hela ditt Frameset är öppet (dvs alla Ramar visas). Om du inte har ramen öppen kan du inte välja den som mål för länken i dialogrutan för Go To URL...

  1. Javascript kan utföras utan att objekten är länkade med <A HREF> men du bör ändå tilldela området som ska länkas en sk "dummy-länk" för att texten ska få det rätta "länkutseendet" (blå och understruken text).

    Markera den text, bild (eller imagemap) som skall länkas och tilldela det markerade området länkegenskaper i Properties-paletten genom att skriva en brädgård # som länk:


  2. Välj fliken "Behaviors" (åtgärder) under fönstret "Design" (om paletten inte syns väljer du menyn "Fönster/Åtgärder"" (Window/Behavior). Klicka på plustecknet (+) och välj "Go To URL":


  3. I dialogrutan väljer du vilka dokument som skall visas och i vilken ram. I rutan "Open In" visas alla namn på alla ramar som finns i det aktuella framesetet såväl som huvudfönstret (Main Window). (Om det inte finns några ramar/frames öppna kommer "Main Window" att vara det enda alternativet).

    Markera namnet på den ram/frame som du vill ska byta innehåll (i exemplet nedan är namnet på ramen "under"). Sidan som ska öppnas i den valda ramen väljer du med knappen "Browse" (Bläddra) men du kan även skriva in hela sökvägen och filnamnet direkt i fältet:



    Fortsätt på samma sätt att välja nästa ram som skall byta innehåll samt vilket vilket html-dokument som ska visas. OBS! Detta gör du direkt utan att lämna menyn med OK! Tänk på att du har ett objekt markerat och det är vad som skall hända med detta objekt du bestämmer nu. Om två olika dokument ska ut måste du här bestämma i vilka två ramar de ska öppnas samtidigt. Vid de ramar du redan valt visas en asterisk *:



    Länka till alla dokument som ska öppnas om innan du lämnar dialogrutan med OK.

    Dreamweavers Behavior genererar ett javascript som du ser i källkoden inom <HEAD>:



    Det länkade området omges av javascriptkod som anger vilken fil som ska öppnas och i vilken ram filen ska öppnas:



    Testa nu din första länk i webbläsaren! (F12)

  4. Markera nästa text, bild (eller imagemap) som skall länkas och gör om samma procedur som ovan. (För att länka undermenyn som i vårt exempel använder du inte Behaviors utan gör en vanlig länk).

TIPS! Om du vill ta bort en Behavior markerar du bara det länkade objektet och tar bort länken (CTRL+SHIFT+L). En varning visas då som innebär att all javascript-kod som hör till länken samtidigt tas bort:

Om du behöver ändra på en Behavior kan du göra det i källkoden eller genom att markera det länkade objektet och dubbelklicka på den valda åtgärden i paletten Behaviors:

Dialogrutan för den valda åtgärden visas och du kan göra dina ändringar.

klicka här för att se vårt färdiga exempel »

 

Ändra utlösare (Trigger)

Den funktion som startar javascriptet kallas för Utlösare (Trigger). Beroende på vilka versioner av webbläsare du valt kan du välja mellan ett antal olika utlösare. Ändra till valet 4.0 and Later Browser (om det inte redan är valt). Detta ger fler alternativ att välja mellan. Vi har valt onClick (default). Det betyder att när man klickar på länken/bilden/knappen så kommer man vidare - detta är det vanligaste alternativet. Annars kan man pröva att använda onDblClick (dubbelklick) eller tex onMouseOver (händelsen utförs när man för muspekaren över ett objekt).

OBS! Tänk på att "vanliga" länkar använder metoden onClick och risken finns att du förvillar dina besökare om du ändrar beteendet för länkarna!

Du kan välja händelser för Muspekare eller Tangenttryckning. Generellt gäller att det finns flera lägen i en Mushändelse:
Muspekaren flyttas över ett område och lämnar sedan området; onMouseOver och onMouseOut.
Användaren klickar med Muspekaren håller intryckt och släpper sedan knappen; onClick, onMouseDown och onMouseUp (eller dubbelklickar; onDblClick).