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

Kapitel 45g - Dreamweaver MX
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. I fliken Allmänt väljer du Kategori: Ramuppsättningar. Välj sedan Fast toppram. Klicka sedan på Skapa. Filen öppnas i dokumentfönstret och till höger visas fönstret (paletten) Ramar. (Detta fönster öppnar man annars genom att klicka på Fönster på menyraden och sedan på Andra och därefter på Ramar.)

3. Hela ramuppsättningen skall nu vara och är troligtvis markerad dvs det är en svart ram runt hela sidan i fönstret ramar till höger. Om det inte är så kan du först klicka någonstans i fönstret Ramar (rampaletten) och sedan på framset i kodväljaren längst ned till vänster under dokumentfönstret. Man kan också för att markera hela ramuppsättningen klicka längst ut i kanten av ramuppsättningen i fönstret Ramar.

4. Klicka på Arkiv, Spara ramuppsättning som. Välj att spara filen som first.htm i huvudmappen skolan. Den översta ramen kallas topFrame och den understa mainFrame. Klicka nu i översta ramen i dokumentfönstret. Ramnamnet topFrame visas nu i rampaletten. Välj nu Arkiv och spara som links.htm i huvudmappen skolan.
   
   
5. Klicka nu i den understa ramen mainFrame och välj Arkiv, Öppna i ram och välj sedan ingang.htm.
   
6. 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 egenskaper 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.
   
7. Markera hela ramuppsättningen. Ändra i egenskaper 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.

    

8. Välj att ge Kantbredd värdet 0. Ändra titeln till IT-skolan presenterad med hjälp av ramar. Stäng fönstren genom att välja OK.

9. 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.

10. 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å ikonen Koppla formatmall. Klicka på Länk och bläddra dig sedan fram till filen itskolan.css. Klicka på OK.
    
    
11. Välj nu Förhandsgranska i webbläsare. Det går inte i webbläsaren att med musen flytta på ramen mellan sidorna. Markera hela ramuppsättningen. Klicka längst upp i vänstra hörnet på arbetsytan på <> för att 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.
    
    
12. 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.
    
    
13. 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.
14. Ä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.
   
2. Du kan läsa mer om ramar genom att klicka på Hjälp-knappen längst upp till höger på menyraden. Klicka sedan på Använda Dreamweaver. I fliken Innehåll väljer du först Utforma sidlayouten och sedan på Använda ramar. Klicka sedan på intressanta rubriker och läs informationen.

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.

Bildjustering och klickbara bilder - Pröva Dreamweavers egna övningar

En övning finner du bland Dreamweavers hjälpinformation. Klicka alltså nu på Hjälp och sedan på Självstudier. På andra raden till vänster klickar du på Självstudier och sedan på "Bildjustering och klickbara bilder". Här finner du först en liten övning i att justera bilder och sedan en övning i att skapa en klickbar bild. Gör övningen om du känner dig osäker inom området klickbara bilder.

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

©  2002, 2003 Tommy Maltell