Datorer, Internet och sökning
en kurs av Tommy Maltell

Kapitel 25g - Dreamweaver 3
Svensk version - Övning 7

Frames - Ramar

  1. Ta i filen ingang.htm bort regnbågsbilden som finns på Internet och lägg dit samma bild som finns i den egna mappen bilder. Ta också i mappen program bort filen sh.htm som vi inte längre behöver.

  2. Att använda frames innebär att man delar in ingångssidan i flera sidor i olika ramar. I en huvudfil finns koder som delar upp huvudsidan i ramar. Webbadressen (URL-adressen) är hela tiden densamma. Det är lätt att göra Frames i Dreamweaver. Markera huvudmappen i platsen IT-skolan och klicka sedan på Arkiv och sedan Nytt. Öppna denna fil och Därefter klickar Fönster och Objekt. Ändra sedan i objektpaletten texten Vanlig till Ramar. Klicka nu på den den vänstra ramen på andra raden dvs knappen Infoga övre ram. Klicka sedan på Fönster och välj sedan att öppna paletten Ramar. Den översta ramen kallas topFrame och den understa mainFrame. Här kan du klicka för att ändra vad som är markerat. Markera hela ramuppsättningen dvs det ska vara en svart ram runt hela sidan. Om det är lite svårt så kan du först klicka någonstans i rampaletten och sedan på framset längst ned till höger på arbetsytan.

  3. Klicka på Arkiv, Spara ramuppsättning som. Välj att spara filen som first.htm i huvudmappen skolan. Klicka nu i översta ramen i arbetsytan. Ramnamnet får nu fetstil i rampaletten. Välj nu Arkiv och spara som links.htm i huvudmappen skolan.

  4. Klicka nu i den understa ramen och välj Arkiv, Öppna i ram och välj sedan ingang.htm.

  5. Klicka på den nya sidan överst. Gör nu i egenskapspaletten tre länkar till de tre sidorna ingang.htm, si.htm och sp.htm. Som Mål i egenskapspaletten anger du hela tiden mainFrame dvs om man klickar på länken så skall den sida som skall visas öppnas i den understa ramen. Mellan texterna gör du ett mellanslag följt av ett minustecken och sedan ett mellanslag igen dvs skriv in så här:
    Ingångssidan - Institutionen - Programmet
     Centrera de tre länkarna.

  6. Markera hela ramuppsättningen. Ändra i egenskapspaletten Kanter till Standard dvs rullningslisten visas vid behov. Om man väljer Ja så visas rullningslisten även om den inte behövs. Om man väljer Nej och t.ex. väljer att visa ingångssidan i ett litet fönster så kan man ej rulla fram texten. Då måste man flytta ramen. Om man i ett sådant fall med mer text än som kan visas som användare varken kan flytta ramen eller rulla fram texten så kan man inte se all information.

  7. Välj att ge Kantbredd värdet 0. Välj sedan på menyraden Ändra, Sidegenskaper och ändra titeln till IT-skolan presenterad med hjälp av ramar. Stäng fönstren genom att välja OK.

  8. Klicka i den översta ramen. Välj sedan på menyraden Ändra, Sidegenskaper och välj samma green.gif som bakgrundsbild till den översta ramen som till ingang.htm. Titeln ändrar du till Länkar till IT-skolans olika webbsidor.

  9. Om markören inte redan är där så klickar du igen i den översta ramen dvs på links.htm. Det finns i denna ännu inte några koder för CSS. Lägg in dessa genom att klicka på Fönster i menyraden och sedan på CSS-format. Klicka sedan på den mellersta av de tre ikonerna längst ned till höger (Öppna formatmall). Klick på Länk och bläddra dig sedan fram till filen itskolan.css. Klicka på OK. Klicka sedan i nästa fönster på Klart.

  10. Välj nu Förhandsgranska i webbläsare. Det går inte med musen att flytta på ramen mellan sidorna. Markera hela ramuppsättningen. Klicka längst ned i högra hörnet på arbetsytan på <> för atta se HTML-koderna. Ändra där genom att ta bort noresize. Kontrollera nu i webbläsaren att det med musen går att flytta på ramen mellan sidorna.

  11. Markera nu hela ramuppsättningen igen. Ändra i egenskapspaletten vid Kanter till Nej. Nu har du tagit bort ramen. Det blir snyggare om allt fungerar men det går ej att flytta ramen vilket ibland kan vara användbart t.ex. om man har en annan storlek när det gäller skrivbordet och om allt som finns i ett fönster ej syns.

  12. Det blir ej så snyggt när sp.htm har en annorlunda bakgrund. Öppna den sidan genom att i Dreamweaver hålla nere Ctrl-knappen samtidigt som du dubbelklickar på länken till Samhällsvetenskapliga programmet. Lägg in samma bakgrundsbild också för denna fil. Ta bort bakgrundsfärgen i tabellen med länkar och bakgrundsfärgen i den översta cellen i denna tabell och ändra för båda tabellerna värdet för Kant till 0. Centrera de två länkarna. Ändra också i filen si.htm så att den får bakgrundsbilden green.gif och ändra Kant till 0 i den översta tabellen med rubriken. Ändra inte på de andra två tabellerna.
  13. Ändra nu först så att ramen visas igen. Markera hela ramuppsättningen. Ändra i egenskapspaletten vid Kanter till Ja.

Länkar i ramar med olika mål

  1. Gör några nya länkar som alla länkar till ingångssidan. Lägg dem till höger om de andra. Döp dem till: Ingång 2 - Ingång 3 - Ingång 4.

    1. Ingång 2 skall leda till att ingångssidan öppnas i samma ram dvs ändra i egenskapspaletten Mål till self.
    2. Ingång 3 skall leda till att ingångssidan öppnas på en hel sida utan frames dvs ändra i egenskapspaletten Mål till top.
    3. Ingång 4 skall leda till att ingångssidan öppnas i ett nytt fönster dvs ändra i egenskapspaletten Mål till blank.

  3. Du kan läsa mer om hur man gör genom att klicka på Hjälp-knappen längst upp till höger på menyraden. Klicka sedan på Använda Dreamweaver och därefter på Innehåll och sedan på Använda ramar. Klicka sedan på intressanta rubriker och läs informationen.

  4. I Skolverkets HTML-kurs kan man också läsa om frames liksom i artikeln Webben otyg, webbens underbara? hos IDG:s webStudio.

Aktiva områden i bilder (Client Side Imagemapping)

Du skall nu göra så att olika delar av en bild länkar till olika sidor.

  1. Öppna ingångssidan i Dreamweaver. Markera bilden. Du kan nu i egenskapspaletten klicka på rektangeln, cirkeln eller polygonet för att sedan markera på bilden ett område att klicka på.

  2. Markera herrgårdsbilden och klicka på rektangeln och markera sedan vänstra halvan av bilden. När du släpper musknappen så får du möjlighet att välja vart länken skall gå. Välj då si.htm. Gör sedan den högra halvan av bilden till en länk till sp.htm.

Kontrollera i facit och gå vidare

  1. Undersök nu om länkarna fungerar och hur alla sidorna ser ut och jämför med facit.

  2. Fortsätt sedan med nästa övning.

Denna sida uppdaterades senast 01-10-17 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

©  2001 Tommy Maltell