Datorer, Internet
och sökning
en kurs av Tommy Maltell
Kapitel 25d - Dreamweaver 3
Svensk version - Övning
4
Bakgrundsbilder
-
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.
-
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
- Byt nu i Sidegenskaper
bakgrunden på filen ingang.htm till bilden som du nyss sparade.
Ändra teckensnitt
- 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.
Du kan också ändra teckensnittet överst i egenskapspaletten.
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.
- 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.
- Ett sätt att ändra
storleken på en text är att ändra Storlek i egenskapspaletten.
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
- Dubbelklicka på
filen sp.htm i platsen IT-skolan. Markera första
stycket under syfte. I egenskapspaletten 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 egenskapspaletten.
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.
- Vi ska nu se hur HTML-koden
ser ut när man har ett stycke. Klicka på bilden <>
längst ner till höger i fönstret för arbetsytan.
Du ser då att stycket börjar med <p> och slutar
med </p>. Stäng fönstret med HTML-koden genom
att klicka på x längst upp till höger.
-
Se till att den av
stycket är markerad. Testa nu med att klicka på Centreringsknappen
långt till höger i egenskapspaletten. 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 egenskapspaletten. 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.
-
Ofta gör man
formateringar av stycken. Du kan du ändra på en hel
del i egenskapspaletten 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 egenskapspaletten ändra till inget.
Ändra i egenskapspaletten 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.
- 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.
Egenskapspaletten för
en bild
- Markera
(i filen ingang.htm) bilden på huset. Du skall nu undersöka
vad du kan se i egenskapspaletten när det gäller en bild.
Om egenskapspaletten inte syns så kan du klicka med höger
musknapp på bilden för att sedan välja Egenskaper.
- 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.
- Nederst
i egenskapspaletten 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.
- Man
kan längst ned i egenskapspaletten 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.
- 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
- 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.
- 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 egenskapspaletten, 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
- Undersök hur alla sidorna
ser ut och jämför med facit.
-
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
©
2001 Tommy Maltell
|