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

Kapitel 45d - Dreamweaver MX
Svensk version - Övning 4

1. Istället för att välja en färg som bakgrund kan man välja en bild. Man väljer då en liten bild som fungerar som en tapet både lodrät och vågrät. Om man klickar på Ändra på menyraden och sedan på Sidegenskaper så kan man bläddra sig fram till en bild som man gör till en bakgrundsbild. Bakgrundsbilder kan man skapa själv eller så kan man hämta dem på Internet. Jag har sammanställt en särskild sida med länkar till webbplatser från vilka man kan hämta bilder.

2. Gå nu till Netscapes "The Background Sampler" och hämta där en bild och spara den i din mapp bilder. Börja genom att  klicka på bilden med höger musknapp (I Macintosh genom att hålla musknappen nere en stund över bilden) för att sedan välja att spara bilden. Ta gärna en diskret och ljus bild. Till facit valde jag den som kallas paper/greenwhite_paper.gif  När jag sparade den döpte jag om den till green.gif 

3. Byt nu i Sidegenskaper bakgrunden på filen ingang.htm till bilden som du nyss sparade.

Ändra teckensnitt

1. Stanna kvar på ingångssidan och klicka med höger musknapp på  länkarna till höger om bilden och välj Teckensnitt. Du kan också nå Teckensnitt genom att klicka på Text på menyraden och sedan på Teckensnitt eller så kan du ändra teckensnittet överst i egenskaper. Eftersom det kan vara så att en användare som kommer till din sida inte har det teckensnitt som du har valt så har Dreamweaver som standard lagt in alternativ när man väljer teckensnitt. Man kan också själv göra en egen lista och lägga in den så att man kan använda den i Dreamweaver när man väljer att gå till Teckensnitt.
   
2. Välj nu att ändra teckensnitt på ingångssidans alla texter och länkar. Välj först Redigera och sedan Markera allt. Välj nu att ändra teckensnitt till Verdana, Arial, Helvetica, sans-serif. Endast texterna ändras. Om du vill ändra också när det gäller länkarna så måste du markera dessa istället. Välj emellertid att ångra tillämpa teckensnitt. Vi ska strax testa en annan metod för att hålla kontroll på alla teckensnitt på alla sidor.
   
3. Ett sätt att ändra storleken på en text är att ändra Storlek i egenskaper. Ett annat är att klicka med höger musknapp och sedan välja storlek. Ett tredje sätt är att välja Text och sedan storlek. Man kan också ändra storleken genom att göra om en text till en rubrik. Texten blir då ett eget stycke.

Stycke

1. Dubbelklicka på filen sp.htm i platsen IT-skolan. Markera första stycket under syfte. I egenskaper ser du nu att det till höger om Formatera står Stycke. Markera nu enbart en del av detta stycke. Det blir ingen förändring när det gäller egenskaper. Det innebär att om du gör förändringar så gör du dem för hela stycket även om inte hela stycket är markerat.
   
   
2. Vi ska nu se hur HTML-koden ser ut när man har ett stycke. Klicka på bilden <> längst upp till vänster i dokumentfönstret. Du ser då att stycket börjar med <p> och slutar med </p>. Gå tillbaka till designläget.
   
   

3. Se till att en del av stycket är markerat. Testa nu med att klicka på Centreringsknappen långt till höger i egenskaper. Du ser nu att hela stycket blir centrerat. Undersök hur HTML-koden har förändrats. <p> har nu förändrat till <p align="center">. Ångra testjusteringen dvs centreringen du gjorde. Testa nu med att göra ett litet indrag eller flera när det gäller stycket genom att klicka på Indrags-knappen längst till höger på andra raden i egenskaper. Man kan ta bort ett indrag genom att klicka på knapppen bredvid som pekar åt vänster. Kontrollera att det fungerar och ångra dig igen.

4. Ofta gör man formateringar av stycken. Du kan du ändra på en hel del i egenskaper för ett stycke. Om du inte vill formatera för stycket utan bara för en del av stycket så måste du i egenskaper ändra till inget.
   
   Ändra i egenskaper vid Formatera från Stycke till inget. Testa nu igen. En del ändringar kan du göra nu som bara berör den markerade texten medan en del andra inte går att göra enbart för den markerade texten. Det blir trots allt en förändring för hela stycket. Om du t.ex. försöker centrera så blir det i alla fall en centrering av hela stycket.

5. Testa nu med att ändra storleken för den markerade texten till t.ex. 5. Det gick väl bra. Ångra dig och testa sedan med att ändra till fetstil genom att klicka på B. Ångra dig nu men använd inte Redigera - Ångra utan klicka bara på B igen. Gör likadant med kursiv stil dvs klicka på I och sedan en gång till på I. Testa också med att ändra textfärgen. Undersök om det fungerar och ångra dig igen.

Egenskaper för en bild

1. Markera  (i filen ingang.htm) bilden på huset. Du skall nu undersöka vad du kan se i egenskaper när det gäller en bild. (Om egenskaper inte syns så kan du klicka med höger musknapp på bilden för att sedan välja Egenskaper.)
   
   
2. Längst till vänster ser man en miniatyr av bilden och hur stor bilden är. De bildformat som vanligvis förekommer är jpg, gif eller png. Var bilden finns och vilket bildformat den har kan man se till höger om källa. Man kan också se hur bred (B) bilden är och hur hög (H). Man kan vid Justera välja olika sätt att placera bilden. Oftast väljer man dock att istället placera bilden genom att lägga den i en cell i en tabell och då kan man justera bildens placering med hjälp av olika inställningar för cellerna och tabellen.
   
   
3. Nederst i egenskaper kan man ange L-mellanr. dvs man kan ange att bilden skall ha ett tomt utrymme vertikalt dvs uppåt och nedåt och V-mellanr. dvs att att bilden skall ha ett tomt utrymme horisontellt dvs åt vänster och höger. När det gäller en cell i en tabell kan man få ett liknande avstånd genom att ange cellutfyllnad och cellmellanrum. Det gäller ju att bilden inte kommer för nära en annan bild eller en text. Situationen avgör vilken av ovannämnda möjligheter som är bäst. Testa med att lägga in värdet 10 först för L-mellanr. och sedan för V-mellanr. när det gäller huset på ingångssidan. Tag sedan bort värdena igen. Gå sedan till sidorna si.htm och sp.htm och lägg in värdet 5 när det gäller V-mellanr. för den lilla bilden vid rubriken. Låt detta värde bli kvar.
   
   
4. Man kan längst ned i egenskaper ange olika värden för att tala om huruvida bilden skall ha en kant eller ej och hur bred kanten skall vara. Förvalt är att ingen kant visas. Man kan också dela upp bilden och göra olika delar av bilden klickbara med länkar till olika sidor. Ett exempel är en karta där man klickar på olika länder. Hur man gör redovisas längre fram i kursen.
   
   
5. Tidgare så hade du bilden rainbow.gif under rubriken på ingångssidan. Du tog emellertid bort denna bild för att istället lägga in en vågrät linje. Tag nu bort den vågräta linjen genom att markera den och sedan trycker du på Delete-knappen på tangentbordet. Du skall strax lägga in bilden igen men vi ska göra det på ett annorlunda sätt.

Visa på din sida en bild som ligger på en annan plats på Internet

1. Man måste inte på sin webbsida visa en bild som ligger under den egna lokala webbplatsen. Bilder kan hämtas dit från Internet men man kan också på den egna sidan visa bilder som egentligen finns på en annan dator på Internet. Visningen fungerar givetvis endast när man är uppkopplad till Internet. Bilden rainbow.gif kan ju hämtas från Stanford University.
   
   
2. Den direkta webbadressen till bilden är:
   http://www-sccm.stanford.edu/gifs/line.rainbow.gif
   Klicka på länken dit och kopiera sedan själva adressen. Välj nu Infoga på menyraden och sedan Bild. Till höger om URL klistrar du in adressen.
   Nu syns ej bilden på arbetsytan i Dreamweaver. Dreamweaver kan, som du kan se i egenskaper, ha lagt in en bredd och en höjd på bilden som inte stämmer. Tag bort dessa uppgifter. För att se sidan med bilden klickar du nu på  Arkiv på menyraden och väljer sedan Förhandsgranska i webbläsaren.

Kontrollera i facit och gå vidare

1. Undersök hur alla sidorna ser ut och jämför med facit.
   
2. Fortsätt sedan med nästa övning.

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