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

Kapitel 45b - Dreamweaver MX
Svensk version - Övning 2

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.

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. Se till att du är i expanderat läge dvs du ser bara din ev. Internetplats till vänster och din lokala plats till höger. 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. I mitten av dokumentverkytgsfältet ändrar du nu rubriken (title) till "Samhällsvetenskapliga institutionen" t.ex. genom att kopiera en del av texten på sidan för att sedan klistra in den till höger om Rubrik:.

4. Klicka på Enter, och skriv "Våra bästa länkar". Gör denna text till en rubrik av graden "Rubrik 3".
   
5. På Samhällsvetenskapliga institutionen vill man gärna ha några länkar till platser som man ofta går till. Du kan hitta sådana platser från Skolornas portal. För att underlätta ditt arbete har jag emellertid redan valt ut tre platser till vilka jag också har gjort länkar:
   
   1. Mölndals Stadsbibl - Samhällsv.
   2. Sv. Yahoo - Samhällsv.
   3. Elections around the world
   
   
6. 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å sedan 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. 
   
7. 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) i Egenskaper 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 ändra bakgrundsfärgen til vit färg dvs Röd 255, Grön 255 och Blå 255. (Den hexadecimala koden är #FFFFFF). Ändra genom att från menyraden först välja Ändra, Sidegenskaper. (Du kan också klicka med höger musknapp någonstans i dokumentfönstret för att sedan välja Sidegenskaper.) Sedan ändrar du vid texten Bakgrund.

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. Du kan ångra flera steg som du har gjort i tur och ordning. Om du klickar på Fönster, Andra, Historia så kan du sedan se att allt finns registrerat som har skett under arbetets gång.

4. Vi skall nu flytta listan inklusive rubriken till centrum på ett annat sätt för att listan 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 Infogapanelen. Välj sedan 1 rad och 1 kolumn, kant = 0 och vid bredd ändrar du så att det inte står något. I fönstret 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. Du 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 Egenskaper ska kunna se tabellegenskaperna 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> i kodväljaren längst ned till vänster i dokumentfönstret. Eftersom du precis har skapat tabellen så är det förmodligen redan en tjock ram runt tabellen. Om du inte ser 4 rader i Egenskaper så klicka på pilen längst ned till höger i Egenskaper så att fler egenskaper för tabellen blir synliga. I Egenskaper ändrar du nu vid Justera till Centrerat. Klicka på den lilla rutan till höger om Bakgrundsfärg för att ge tabellen en egen bakgrundsfärg. Klicka sedan på globen och välj värdet 223 för alla tre färgerna.

5. Flytta nu rubriken "Våra bästa länkar" 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. Klicka i vänstra kanten på cellen längst upp till vänster så att en svart pil visar sig som pekar åt hoöger ch då är alla tre cellerna i raden markerade. (Du kan istället markera cellen längst upp till vänster genom att klicka i den. Du ser nu att i Egenskaper ändras Tabell-ID till Cell. Håll vänster musknapp nere och dra sedan markören så att alla cellerna i tabellen blir markerade.) I 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 i Egenskaper). Då försvinner 1:an. Spara och förhandsgranska sedan i webbläsaren. Om den numrerade listan i celen har ändrats till en punktad lista så ändrar du nu genom att markera listan och sedan klicka på ikonen för numrerad lista i Egenskaper.
   
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 Egenskaper klickar du nu i rutan till höger om Tabellhuvud 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 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 tabells 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.

Rita tabeller och celler - Pröva Dreamweavers egna övningar

Om man på Infogapanelen byter flik från Vanlig till Layout så kan man rita en tabell eller en enskild cell i en tabell. Mer information och också en särskild ö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å "Utforma sidlayouter med hjälp av tabeller". Här finner du först en liten genomgång av hur man skapar en tabell och ändrar i en tabell i standardvyn. Denna övning är delvis en repetition av det som du har lärt dig när det gäller tabeller i den här övningen men du får också lära dig en del som kommer i senare kapitel i den här kursen. Sedan följer en övning i att utforma en sida i layoutvyn. Båda dessa övningar innehåller viktiga moment som man kan ha mycket nytta av. Avvik därför gärna en stund från min övning och gör Dreamweavers ovan nämnda övningar när det gäller tabeller.

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 i Egenskaper 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. 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.

Sidegenskaper när man använder tabeller eller bilder

Man brukar ju klicka med höger musknapp någonstans i dokumentfönstret för att sedan kunna välja Sidegenskaper. Detta fungerar ej om det finns en tabell eller en bild just där man klickar. Klicka därför utanför tabellen eller bilden. Det går ju också att klicka på Ändra på menyraden och därefter på Sidegenskaper.

Kontrollera i facit och gå vidare

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

    

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