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

Kapitel 45c - Dreamweaver 3
Svensk version - Övning 3

I varje kapitel finns det både information och uppgifter. Det du bara skall läsa är med vanlig text medan det du ska göra är i fetstil.

1. Bakgrunden på dina 2 sidor är olika. Rubrikerna på sidorna har olika färg. En av rubrikerna är markerad med en bild under. Du ska nu göra det hela lite mer enhetligt. Ändra så att bakgrunden blir vit på alla sidor, så att huvudrubriken inte har någon särskild färg och så att det under varje rubrik överst på en sida finns en Vågrät linje och ingen färgad bild. När man vill ta bort en färg och gå tillbaka till standardfärgen (som vanligtvis visas som svart färg) så klickar man på textfärgsrutan. I det fönster som då visas finns det längst upp till höger en ikon med ett snett rött streck. Klicka på dena ikon för att ändra till standardfärgen.

2. Du skall nu göra nästa sida på ett lite snabbare sätt. Öppna filen si.htm i Dreamweaver och spara sedan om den som sp.htm men i mappen program. Ändra sedan ordet institutionen till programmet både i huvudrubriken på sidan (heading) och i titeln. Med titel (title) menar jag i fortsättningen det som kallas Rubrik i i dokumentverktygsfältet och det som kallas Rubrik överst om du väljer Ändra på menyraden och sedan Sidegenskaper. Fungerar länken längst ner till ingångssidan? Den länkar ju både när det gäller si.htm och sp.htm uppåt från en fil i en undermapp till en fil i huvudmappen och den ser därför likadan ut.

3. Innehållet i tabellen på programsidan passar inte. På den här sidan skulle du kanske i verkligheten lägga upp länkar till olika styrdokument och dessutom berätta om hur programmet fungerar just på din skola. I övningen skall du istället öva lite på en sida med lite mer text. Vi skall lägga upp ett styrdokument direkt på sidan. Om du nu använder en pappersversion av den här övningen så öppna nu övningen i en webbläsare. Klicka på länken som leder dig till filen sh.htm och spara denna fil med samma namn i mappen program.

4. Dubbelklicka i platsen IT-skolan på filen sh.htm. Välj Redigera och sedan Markera allt. Kopiera nu. Du kan kopiera på tre sätt: Det första sättet är genom att klicka på Redigera för att sedan välja Kopiera. Det andra sättet är att hålla Ctrl nedtryckt samtidigt som du trycker på C-tangenten. (Detta förfaringssätt förkortas Ctrl+C.) Det tredje sättet är att klicka med höger musknapp någonstans i den markerade texten och sedan väljer du Kopiera.
   
   Dubbelklicka nu på platsen IT-skolan på filen sp.htm för att du ska kunna arbeta med sidan. Ta bort tabellen på den här sidan genom att markera den och sedan trycker du på Delete-tangenten. Klistra sedan in det du kopierade mellan de två vågräta linjerna. Klistra in kan man göra på tre sätt som liknar de sätt som nämndes för kopiering. Snabbkommandot för att klistra in är Ctrl+V.

Länkar inom samma sida - Namngivet ankare

1. Nu har du i filen sp.htm ett dokument huvudsakligen om A-kursen i samhällskunskap. Du skall nu öva dig i att göra länkar till platser på samma sida. Du börjar med att ge namn åt några olika platser på sidan. Klicka till vänster om rubriken Syfte och klicka sedan på Infoga på menyraden. Välj sedan Namngivet ankare. Som ankarnamn väljer du syfte. Gör sedan samma sak när det gäller rubriken Mål. Som ankarnamn väljer du mal. Gör sedan samma sak när det gäller rubrikerna Efter genomgången... och Betygskriterier. Välj ankarnamnen efter och betyg.

2. Nu skall du göra länkar till dessa 4 platser. Klicka på Enter några gånger efter den vägräta linjen under rubriken och lägg in en tabell med en kolumn och två rader där. Välj bredden 50 %, kant=3, cellutfyllnad=3 och cellmellanrum=3.

3. I översta cellen skriver du Länkar till rubrikerna i dokumentet nedan. Markera texten och klicka på B i egenskaper för att få fetstil. I den understa cellen skriver du in orden Syfte, Mål, Efter genomgången kurs skall eleven, Betygskriterier på fyra olika rader. Gör ingen lista utan välj en radbrytning efter varje rubriktext genom att hålla nere Shift-tangenten och trycka på Enter.
   
4. Markera nu i tabellen ordet Syfte. Klicka sedan på menyraden på Infoga och sedan på Hyperlänk. I fönstret som nu visas kan du till höger om ordet länk bläddra dig fram till lämplig länk. Välj #syfte. Gör likadant när det gäller de tre övriga raderna i tabellen. Vid länkar på samma sida skall alltså tecknet # alltid finnas omedelbart före (utan mellanslag) det ankarnamn som du väljer.
   
5. Gör följande ändringar i tabellen: Justera skall vara centrerat. Ta bort 50 framför % så att innehållet helt avgör hur stor tabellen blir. Lägg in samma bakgrundsfärger för tabellen och för den översta raden som i tabellen i filen si.htm. Ett sätt är att kopiera färgkoden i den ena filens egenskaper och att sedan klistra in den i den andra filens egenskaper.
   
6. Ändra i Egenskaper för den översta cellen genom att klicka i en bock i rutan till höger om Huvud och lägg in en Vågrät linje mellan tabellen och rubriken Samhällskunskap.
   
7. Undersök om länkarna fungerar genom att välja Arkiv och Förhandsgranska i webbläsaren.

8. Vi har ingen länk från ingångssidan till Samhällsvetenskapliga programmets sida. Det bör vi ha. Öppna ingångssidan i Dreamweaver. Gör en tabell under den vågräta linjen under rubriken med 1 rad och 2 kolumner. Välj kant=0 och bredd = 70% samt cellutfyllnad=4 och cellmellanrum=4. Ändra i egenskaper Justera till centrerat. Flytta bilden på herrgården/skolan till vänstra cellen. Detta gör du  genom att hålla ned vänster musknapp ovanför bilden och dra sedan bilden till den vänstra cellen. Dra länken till den andra cellen. Lägg dig efter denna länk och klicka på Enter för nytt stycke. Lägg där in en länk till det Samhällsvetenskapliga programmet.

9. Om man inte väljer någon bredd från början så blir cellerna för små och det blir jobbigt att hitta rätt med musen om man flyttar något dit. Ta nu bort procenttalet för bredden så att tabellen anpassas efter innehållet. Pga bilden så blir det bra att länkarna till höger om bilden ligger i mitten vertikalt sett.

Länk till en speciell plats på en annan sida

1. Som övning skall du nu göra en länk från ingångssidan till en plats på Samhällsvetenskapliga programmets sida. Eftersom vi redan har en länk till den sidan kan vi kopiera den vi redan har och sedan ändra lite. Lägg dig efter den länk du redan har och klicka på Enter så att du får ett nytt stycke. Markera sedan länken och dra den med vänster musknapp ned till nästa stycke. Innan du släpper musknappen håller du ner Ctrl-knappen. Du ser nu ett +-tecken vilket betyder att det kommer att bli en kopiering om du släpper musknappen medan du håller Ctrl-knappen nere.
   
   
2. Markera nu den nedersta länken som du just skapade och titta i egenskaper. Vid Länk står det program/sp.htm. Du skall nu lägga till #betyg omedelbart därefter (utan mellanslag) så att länken kommer att bli program/sp.htm#betyg. Ändra texten i länken genom att skriva om den till "Betygskriterier för  A-kursen i samhällskunskap". För att cellen ej skall bli för stor gör du en radbrytning precis före A-kursen genom att hålla nere Shift-tangenten och under tiden trycka på Enter-tangenten
   
   Ta bort eventuellt onödiga rader (stycken utan innehåll) mellan tabellen och den vågräta linjen.

Ändra storleken på en bild

1. Det hade varit trevligt med en liten bild av skolan på alla sidorna. Den bilden kanske också skulle kunna vara en länk till ingångssidan. Vi skall göra ett försök. Öppna filen si.htm genom att klicka på filen i platsen IT-skolan. Gör en tabell allra längst upp med en rad och två kolumner. Välj kant=1 och bredd = 100% samt cellutfyllnad=2 och cellmellanrum=2. Välj Flytta över rubriken till den högra cellen och lägg in bilden på skolan i den vänstra cellen. Bilden är nu för stor. Markera bilden. I egenskaper ser du att bilden har bredden 200 och höjden 133. Du ska nu ändra så att en mindre variant av bilden visas. Du ska dock behålla proportionerna. Om man ändrar bredden till 75 så bör man ändra höjden till 75·133/200 dvs till 50. Gör denna ändring.
   
   Viktigt påpekande!
   När man har  en stor bild och vill presentera denna som en liten bild så är det sätt som beskrivs ovan och på en del andra platser i kursen inte det bästa om man vill att bilden skall laddas ned snabbt. Om det skiljer mycket när det gäller storleken så är det bättre att man i ett bildbehandlingsprogram från den stora bilden skapar en liten bild i en egen fil. När man arbetar med sidorna så går det dock snabbare att experimentera med olika storlekar om man gör såsom jag beskriver i kursen. Dessutom så kanske du just när du gör den här övningen inte har tillgång till ett program för bildbehandling eller så vet du inte hur du ska använda det. När man har experimenterat färdigt så kan man göra en liten fil för den lilla bilden. Du kan läsa mer om hur man gör längre fram i kursen.

2. Du skall också ändra lite när det gäller tabellen och cellerna. Ta bort procenttalet för bredden när det gäller tabellen. Välj Centrerad vid Justering: blir Centrera. Tills vidare behåller vi ramen runt tabellen.

3. Texten i cellen har nu förlorat sin status som Rubrik 2. Istället för att återge denna status som i sig skapar nytt stycke skall vi ändra på formateringen av texten. Markera rubriktexten och klicka på B för fetstil och ändra i egenskaper storleken till 5 (18 pt). Texten placeras nu (såsom ju är förvalt för vanlig text) i mitten av cellen vertikalt sett vilket nog blir bäst.

En bild som är en länk

1. Du skall nu göra själva den lilla bilden till en länk till ingångssidan. Klicka på bilden och bläddra dig fram till rätt länk i egenskaper.

2. Alla länkar får som standard en färgmarkering. Så länge länken är oanvänd är färgen blå. Därefter blir den som standard lila. Detsamma gäller för bilder som får en liten blå eller lila ram. I Dreamweaver får inte ramen som standard den blå färgen därför att Kant ges som standard värdet 0. Man ser då inte direkt att bilden är en länk. Om man i webbläsaren för markören över bilden så ändras den utseendemässigt från att se ut som en pil till att se ut som en hand. Därmed kan man alltså ändå avgöra om bilden är en länk. Ibland vill man dock att den blå (lila) ram som egentligen är standard visas för bilder som är länkar. Vi skall därför nu lära oss hur man kan ändra så att ramen visas. Markera bilden och ändra i egenskaper värdet för Kant från 0 till ett positivt värde t.ex. 1, 2 eller 3 för att sedan undersöka hur det ser ut i webbläsaren. Ändra därefter tillbaka till värdet 0 igen.

3. Vi  ska skapa samma bild till höger om rubriken till det Samhällsvetenskapliga programmet. Markera därför hela tabellen från vänster med hjälp av den svarta pilen och kopiera den. Klicka sedan t.ex. på Redigera på menyraden och sedan Kopiera. Gå sedan till filen sp.htm sida och ta bort rubriken. Klistra in tabellen och ersätt texten institutionen i rubriken med programmet. Kontrollera när det gäller tabellegenskaper så att det vid Justering blir Centrerat också på den nya platsen.

4. Gör en länk från slutet av Samhällsprogrammets sida till toppen av sidan. Du kan göra såsom du gjorde ovan när det gäller länkarna till rubrikerna. Du kan också bara göra en länk till sidan i sig. En sådan länk leder ju automatiskt till att toppen av sidan visas. Den metoden är faktiskt ofta bättre eftersom den ger lite luft överst. Om man länkar till ett namn för en del av rubriken så kommer man lite långt ner på sidan när man klickar på länken. Gör en länk enbart till sidan.
   
   Lägg en text med en länk till vänster om länken till ingångssidan så här:
    "Till toppen av den här sidan - Tillbaka till ingångssidan"

Kontrollera i facit och gå vidare

1. Kontrollera nu att allt fungerar t.ex. länkarna från ingångssidan till betygskriterierna på Samhällsprogrammets sida liksom bildlänkarna i rubrikerna. Kontrollera sedan mot facit.
   
   
2. Fortsätt nu med övning 4.

Denna sida uppdaterades senast 2005-10-06 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

©  2002, 2003 Tommy Maltell