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

Kapitel 25b - Dreamweaver 3
Svensk version - Övning 2

Länkar

Vi har nu gjort vår första webbsida men än så länge innehåller vår webbplats väldigt lite information. Det är inte lämpligt att vi lämnar all vår information på förstasidan (ingångssidan). Istället kommer det mesta av informationen att läggas i andra filer och från ingångssidan gör vi länkar till dessa sidor.

1. Om den inte redan är öppen så öppna nu webbplatsen IT-skolan. Markera sedan mappen institut och klicka på Arkiv och sedan Ny fil. Ge filen namnet so.htm. Klicka sedan på filen så att du kan börja skriva i den.

2. Skriv överst "Välkommen till Samhällsvetenskapliga institutionen". Gör denna text till en rubrik av näst högsta ordningen (Rubrik 2). Centrera ej rubriken.

3. Gå till sidegenskaper. Ändra nu titeln bland sidegenskaper till "Samhällsvetenskapliga institutionen".

4. På Samhällsvetenskapliga institutionen vill man gärna ha några länkar till platser som man ofta går till. Du kan gå till  IT-enhetens portal med länkar till sådana platser. Gör inte det nu. För att underlätta ditt arbete har jag redan valt ut tre platser:

   1. Mölndals Stadsbibl - Samhällsv.
   2. Sv. Yahoo - Samhällsv.

   3. Elections around the world

5. Om du arbetar med en pappersversion av den här sidan så måste du nu gå till den här sidan på Internet. Gå först till den första av de tre platserna ovan genom att ovan helt enkelt klicka på länken dit. När du kommer fram så kopierar du URL-adressen genom att t.ex. först klicka till höger om adressen så att hela adressen blir markerad. Därefter kopierar du t.ex. genom att  i adressfältet klicka på höger musknapp och sedan välja kopiera. Därefter går du tillbaka till Dreamweaver. 

6. Klicka på Enter, och skriv "Våra bästa länkar". Gör detta till en rubrik av graden "Rubrik 3". Gå till nästa rad och skriv där "Mölndals Stadsbibliotek - Samhällsv." . Markera hela texten. I paletten Egenskaper klistrar du nu in adressen du kopierade i rutan till höger om Länk. Spara sedan om sidan genom att välja Arkiv och sedan Spara.

Listor

1. Markera texten som nu blivit en länk (Den borde vara markerad och nu blå och understruken). Klicka på "Numrerad lista"-knappen (knappen med siffrorna 1,2,3) och du har skapat en numrerad lista med den första länken som första punkt. Markera nu endast utrymmet till höger om länken och klicka på Enter. Du har nu skapat en ny punkt på listan. Lägg in de två andra länkarna på samma sätt som punkt 2 och 3 på listan. Punkterna på listan får ett litet indrag från vänsterkanten. För att få vanlig text under listan så lägger du markören strax efter den 3:e länken och sedan klickar du två gånger på Enter. Gör så.

2. Ge huvudrubriken längst upp på sidan en annan färg genom att markera den och klicka sedan klicka på textfärgknappen i paletten Egenskaper. Välj Röd 255, Grön 128 och Blå 0. Klicka på OK-knappen. Välj sedan att inte ändra den vita bakgrundsfärgen (Vit färg är detsamma som Röd 255, Grön 255 och Blå 255. Den hexadecimala koden är #FFFFFF). Du kan kontrollera att bakgrundsfärgen är vit genom att först klicka med höger musknapp någonstans för att sedan välja Sidegenskaper.

3. Hur skulle det se ut om listan inklusive dess rubrik centrerades. Markera länklistan och dess rubrik och klicka sedan på Center-knappen. Vad hände med länklistan? Listan blir ej rak från vänsterkanten på listan. Som tur är finns möjlighet att ångra sig. Klicka på Redigera och sedan på Ångra Textjustering. Man kan ångra flera steg som du har gjort i tur och ordning. I paletten Historia, som du hittar genom att klicka på Fönster längst upp, finnns allt registrerat som har skett under arbetets gång. Vi återkommer senare i kursen till denna palett.

4. Vi skall nu flytta listan inklusive rubriken till centrum på ett annat sätt för att  lista ska bli rak från vänsterkanten. Gå nu till raden under listan utan att vara kvar i listan. Lägg markören i slutet av sista raden på listan och tryck på Enter. Då placeras markören efter siffran för nästa rad (här 4). Tryck nu på Enter igen. Då lämnar du listan och du befinner dig under densamma.

Tabeller

1. Klicka på överst på Infoga och välj sedan tabell. Du kan istället klicka på Infoga tabell-knappen i paletten Objekt. Välj sedan 1 rad och 1 kolumn, kant = 0 och vid bredd ändrar du så att det inte står något. I paletten Egenskaper ändrar du vid Justera till Centrerat. Dra nu listan och dess rubrik och släpp den i tabellens enda cell.

2. Spara och välj sedan att titta på sidan i din webbläsare. Du lyckades att få listan centrerad med rak vänsterkant. Du ångrar dig emellertid för du ska göra om sidan. Välj därför Redigera, Ånga Dra och släpp. Markera sedan den lilla tabellen och klicka på Delete-knappen för att ta bort den.

3. Vi ska göra en ny tabell. Tabeller kan användas för att placera texter och bilder på olika platser på en sida. Se till att du har markören under listan. Lägg där in en ny tabell med 3 rader och 3 kolumner. Välj Kant (djupet på ramen) = 0, Bredd = 70 %, Cellutfyllnad (avståndet från cellens innehåll till kanten av cellen) = 4 och Cellmellanrum (avståndet mellan cellerna) = 7.

4. För att markera tabellen så att man i Paletten Egenskaper ska kunna se tabellen så klickar man strax utanför tabellen. Då blir det en tjock ram runt hela tabellen. Man kan också klicka i tabellen och sedan på <table> längst ned till vänster i arbetsytan. Eftersom du precis har skapat tabellen så är det förmodligen redan en tjock ram runt tabellen. Klicka på pilen längst ned till höger i Paletten Egenskaper så att fler Egenskaper för tabellen blir synliga. Längst ned till vänster så står om du har kommit rätt Tabellnamn. I Paletten Egenskaper ändrar du nu vid Justera till Centrerat. Klicka på den lilla rutan till höger om det understa Bakg för att ge tabellen en egen bakgrundsfärg. Klicka sedan på paletten och välj värdet 223 för alla tre färgerna.

5. Flytta nu rubriken till listan till den översta högra cellen och listan på 3 rader till den andra cellen till höger och med Delete-knappen tar du bort onödiga rader så att tabellen hamnar direkt under rubriken. Cellerna har nu blivit olika stora och de anpassar sig efter innehållet i cellerna. Du vill emellertid att alla cellerna oavsett innehållet skall vara lika stora.
   
   
6. Markera cellen längst upp till vänster genom att klicka i den. Du ser nu att i paletten Egenskaper ändras Tabellnamn till Cell. Håll vänster musknapp nere och dra sedan markören så att alla cellerna i tabellen blir markerade. I Paletten Egenskaper ändras nu Cell till Rad. Specificera nu bredden för alla cellerna genom att till höger om B skriva 33%. Tryck sedan på Enter. Nu blir varje cell lika stor oavsett innehållet. (Om ett ord är extra långt så kan dock dess kolumn bli extra stor.) Formateringen att det finns en lista i den vanliga texten utanför tabellen finns fortfarande kvar och den visas genom en 1:a. Sätt markören efter 1:an och klicka på "Numrerad lista"-knappen (knappen med siffrorna 1,2,3 på formatverktygsfältet). Då försvinner 1:an. Spara och förhandsgranska sedan i webbläsaren.
   
   

7. Markera nu den översta raden. Det kan man göra på flera sätt. Man kan klicka till vänster om den översta raden när man ser en tjock pil mot höger, man kan klicka i första cellen och sedan hålla ned vänster musknapp och dra markören över alla cellerna i raden eller så kan man klicka i en cell i raden och sedan klicka på <tr> länst ned till vänster i arbetsytan. I nedersta delen av Paletten Egenskaper klickar du nu i rutan till höger om Huvud så att det blir en bock i denna ruta. Texten i raden blev nu i fetstil och centrerad i cellen. I den översta raden till vänster skriver du "Lärare" och i den mittersta cellen överst "Salar". Också desa ord blir centrerade och i fetstil.

8. Skriv läraren Alf Albrektssons namn i cellen till vänster på andra raden och håll sedan nere Shift-knappen samtidigt som du trycker på Enter. Då skapar du en radbrytning istället för ett nytt stycke som man får om man bara trycker på Enter. Skriv Östen Ölunds namn på andra raden. Ange på samma sätt de två salarna 101 och 999 på var sin rad i mittersta cellen på andra raden. Standard(förvalt)-inställningen är att i en cell hamnar texten (eller bilden) till vänster horisontellt och i mitten vertikalt. Ändra nu så att innehållet i andra radens celler börjar längst upp genom att markera alla cellerna. Ändra sedan nederst i Paletten Egenskaper vid Lodrätt från Standard till Överst.

Slå samman celler

1. Du ska nu testa hur det blir om du lägger själva rubriken på hela sidan överst i tabellen. Klicka någonstans i den översta raden i tabellen med höger musknapp. Välj Tabell och sedan Infoga rader eller kolumner. Välj sedan 1 rad och ovanför. När den nya raden finns så markerar du alla 3 cellerna i den. Klicka sedan längst ned i paletten Egenskaper på knappen: "Slå samman markerade celler genom utvidgning" nedanför ordet Rad. Nu är det bara en cell och du drar slutligen huvudrubriken dit. Formateringen som  Rubrik 2 försvinner (men egenskapen att det är en huvud-cell finns med fetstil och centrering ärvdes från raden nedanför vid skapandet av raden). Du kan om du vill göra en ny formatering.

2. Du ångrar dig emellertid. Du vill ha rubriken utanför cellen och du ångrar de tre senaste åtgärderna (Dra och släpp, Slå samman celler och Infoga tabellrader). Sedan centrerar vi istället huvudrubriken och tar bort den understa tabellraden som vi inte använder. Markera raden och klicka på höger musknapp. Välj Tabell och sedan Ta bort rad.
   
   
3. Markera alla cellerna i översta raden. Välj sedan i Paletten Egenskaper följande färger: Röd 255, Grön 128 och Blå 0.
   
   
4. En rad i en cell blir som standard så hög som innehållet i den högsta cellen kräver. Ibland blir den högsta cellen högre än vad som behövs för innehållet. Vanligen beror detta på att det i cellen oavsiktligt har lagts till ett stycke utan innehåll i slutet eller början av cellen. Ett sådant tomt innehåll tas lämpligen bort med hjälp av Delete-knappen på tangentbordet precis som när man tar bort ett oavsiktligt lagt onödigt stycke på sidan utanför tabellen.
   
   Det är inte alltid som en tabels utseende justeras automatiskt i Dreamweaver när man har ändrat på innehållet i en tabell t.ex. när man har tagit bort texter. Då kan man få en justering om man klickar på <table> längst ned till vänster i arbetsytan.
   
   Om det inte går att ändra när en cell är högre än vad den behöver vara så kan det bero på att det av någon anledning har lagts in en  specificering av höjden av tabellen eller cellen. Sådant upptäcker man dock lätt i Paletten Egenskaper.

Relativa länkar

1. Lägg in en Vågrät linje under tabellen och kopiera innehållet längst ner från ingångssidan så att det står likadant längst ner på den här sidan. Centrera den nedersta texten och ändra eventuellt till rätt datum.

2. Vi har inte gjort några länkar så att vi från ingångssidan kan gå till Samhällsvetenskapliga institutionens sida och sedan tillbaka. Det ska vi göra nu. Gå till ett nytt stycke längst ner på sidan med hjälp av Enter och skriv där "Tillbaka till ingångssidan". Se till att teckenstorleken är lika stor som raden ovanför. Markera hela texten och klicka sedan i Paletten Egenskaper på Mappen till höger om Länk och bläddra fram till filen ingang.htm i mappen skolan. Kontrollera att länken ser ut så här: ../ingang.htm

3. Du har nu gjort en relativ länk dvs länken står i relation till den sida som den länkar till. Sidor med sådana relativa länkar till de egna sidorna på samma lokala webbplats kan man flytta till en annan plats t.ex. till en webbserver på Internet och alla länkarna fungerar fortfarande. Alla html-filer och alla bilder måste ligga på den lokala webbplatsen i huvudmappen eller i undermappar till denna eller på Internet. Om man försöker länka till en fil eller lägga in en bild som finns utanför den lokala webbplatsen så får man frågan om man vill kopiera över filen eller bilden till den lokala webbplatsen. Svara alltid ja på en sådan fråga. Om du svarar nej så blir länken en absolut länk som börjar med ordet file. Länken kommer ej att fungera när du förflyttar sidorna på din lokala webbplats till en webbserver på Internet. (Även absoluta länkar där sökvägen börjar med C elller H fungerar givetvis ej när du lägger upp sidan på Internet.) Om filen eller bilden ligger på Internet och där har en fast webbadress så fungerar dock länken och bilden. Det innebär att man på sin sida kan visa bilder som egentligen finns på flera andra webbservar på Internet. Mer om detta kommer senare i kursen.

4. Så här ska fungerande länkar se ut:
   en länk till en fil i samma mapp - endast filnamnet
   en länk till en fil i en underliggande mapp - mappnamnet/filnamnet
   en länk till en fil i en mapp uppåt i hierarkin - ../filnamnet
   en länk till en fil i en annan mapp som har samma huvudmapp - ../mappnamnet/filnamnet
   
   Filen ingang.htm ligger i en mapp upp som ligger ett steg uppåt i hierarkin dvs länken ska vara ../ingang.htm och det stämmer ju.

5. Öppna filen ingang.htm i Dreamweaver och gör en länk med namnet "Samhällsvetenskapliga institutionen" under bilden på huset. Ändra så att det till höger om både Formatera och Storlek står Inget och så att länken blir centrerad på sidan under bilden på huset.

6. Samhällsvetenskapliga institutionens sida ligger i den underliggande mappen institut jämfört med ingang.htm. Kontrollera att länken ser ut så här: institut/so.htm

7. Välj att kontrollera i webbläsaren att länkarna fungerar åt båda hållen.

Den lokala webbplatsen ändrar automatiskt länkar

1. En av fördelarna med att arbeta med en lokal webbplats är att om man flyttar en fil inom webbplatsen eller byter namn på denna så kan man få alla länkarna till denna sida ändrade i alla andra filer. Du skall nu testa detta. Stäng eventuellt öppna fönster med arbetsytor när det gäller filerna ingang.htm och so.htm. Gå till Platsen IT-skolan. Om du inte har fönstret öppet så öppna det genom att klicka på Plats överst i menyraden och sedan på Öppna plats och IT-skolan. Dubbelklicka på mappen institut om den inte är öppen så att du kan se filen so.htm. Markera nu filen so.htm och klicka sedan på Arkiv i menyraden och välj där Ändra namn. Ändra namnet till si.htm. Tryck på Enter och på en fråga svarar du att du vill uppdatera alla länkar. Kontrollera sedan att länken från ingångssidan har ändrats och att den fungerar.

Kontrollera i facit och gå vidare

1. Välj nu att titta på sidorna och jämför med facit 2.
   
   

2. Fortsätt nu med övning 3.

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

Länkar:
Kursens ingångssida - Skolornas portal

©  2001 Tommy Maltell