Datorer, Internet
och sökning
en kurs av Tommy Maltell
Kapitel 45f - Dreamweaver MX
Svensk version - Övning
6
Ändra
lite
- Vi ska börja med
att ändra lite. Öppna filen si.htm och ta bort den undre tomma
raden i den nedersta tabellen. Ändra texten Jämförelsetal
för större kommuner till
storlek 3. Markera cellerna som inte är huvudceller dvs de med
enbart siffror. Ändra sedan i egenskapspaletten Vågr.
till Höger. Gör texten under den nedersta vågräta
linjen kursiv. Ändra storleken till Inget. Texten Uppgifterna
i tabellen nedan är hämtade från Skolverkets webbplats
ska vara kursiv och med
storleken 2.
- Öppna sedan filerna
sp.htm och ingang.htm. Gör texterna under de nedersta vågräta
linjerna på båda sidorna kursiva. Ändra storleken till
Inget.
Cascading Style Sheets
(CSS) - En CSS-mall
i en särskild fil
- Du ska nu testa en modern
metod för att ange teckensnitt mm för alla sidor på
hela webbplatsen. Metoden kallas CSS. Jag ska underlätta lite första
gången. Jag har gjort en liten fil vid namn itskolan.css.
Klicka på länken till filen som jag har gjort med höger
musknapp och välj sedan att spara filen just i din mapp skolan.
- Öppna filen ingang.htm.
Klicka på Fönster i menyraden och sedan på CSS-format.
Klicka sedan på ikonen längst till vänster av de fyra
ikonerna längst ned till höger (Koppla formatmall). Klick
på Länk och bläddra dig sedan fram till filen itskolan.css.
Klicka på OK. Gör likadant med filerna sp.htm och si.htm.
Undersök nu hur sidorna ser ut.
- Undersök nu i
HTML-koden längst upp på någon av sidorna. Det gör
du genom att klicka på <> längst ner till höger
i arbetsytan. Du ser då att det överst någonstans mellan
<head> och </head> står: <link href="../itskolan.css
rel="stylesheet" type="text/css">. Man skulle
alltså egentligen ha kunnat skriva dit de här koderna själv
när man hänvisar till en sådn här extern CSS-formatmall
som ligger i en egen fil.
-
Dubbelklicka
i platsen IT-skolan på filen itskolan.css. (Du kan också
se hela innehållet i filen i programmet Anteckningar.) Nu kan
du se vad filen innebär. När det gäller sex olika typer
av texter så har jag talat om olika saker som ska gälla
för dem i alla dokumenten på webbplatsen. Inställningarna
gäller om inget annat är specificerat i denna filen eller
på din sida.
- Följande har jag
bestämt:
- För texter
på hela sidan dvs BODY skall gälla teckensnittet Verdana
i första hand och om använder saknar detta på sin
dator i andra hand Geneva, i tredje hand Arial, i fjärde hand
Helvetica och i femte hand sans-serif. Dessutom skall teckenstorleken
vara 10 pt vilket motsvar storlek 2.
- När det gäller
Rubrik 1 (H1) på ingångssidan
skall ha färgen bestå av Röd=144, Grön=144
och Blå=93 dvs den hexadecimala koden ska vara #90905D.
När det gäller rubrikerna på de två andra
sidorna så är dessa inte av storleken Rubrik 2 eftersom
de inte skulle fungera som ett stycke. Där fick jag ett problem
som kan komplicera i framtiden. Eftersom det var de enda texterna
med fetstil så bestämde jag att all text med fetstil
också skall ha samma färg. Huvudrubrikerna i en av tabellerna
räknas ej som att ha fetstil. De är istället definierade
som huvudrubriker i tabellen och sådana har alltid fet stil.
Testa med att lägga in fetstil på någon annan text.
Då får texten samma färg som rubrikerna. Ångra
dig sedan.
- Texterna i tabeller
(TABLE) och listor (LI) skall ha samma teckensnitt som när
det gäller BODY samt 9pt vilket motsvarar storlek 1,5.
- Texter med kursiv
stil skall ha samma teckensnitt som de andra texterna samt 8pt vilket
motsvarar storlek 1. Det gäller texterna längst ned på
sidorna. Du ändrade ju ovan alla dessa till kursiv stil. Däremot
har texten Uppgifterna
i tabellen nedan är hämtade från Skolverkets webbplats
som också är
kursiv storleken 2.
Vår egen begäran om storleken 2 bryter alltså CSS-filens
instruktioner. Man kan alltså på flera ställen
göra egna formateringar som bryter CSS-filens instruktioner
men om man gör det alltför mycket så finns det ju
ingen anledning att använda en CSS-fil. Fördelen med en
sådan är att alla filerna ändras genom att man gör
en liten ändring i CSS-filen. Din nästa uppgift blir att
testa detta genom att ändra i CSS-filen.
- Stanna kvar dit du kom
när du i platsen IT-skolan dubbelklickade på filen itskolan.css
eller gör nu om denna klickning. Klicka till höger
i CSS-formatfönstret (Om det inte syns så ta fram detta genom
att klicka på Fönster på menyraden och sedan på
CSS-format.) på någon av de 6 HTML-koderna som är formaterade.
Klicka sedan på tredje ikonen från vänster av de fyra
ikonerna längst ned till höger (Redigera formatmall). Gör
några ändringar, klicka på OK och undersök sedan
resultatet. Sedan ångrar du dig. Tag sedan ytterligare någon
av de 6 HTML-koderna och ändra på CSS-filen. Kontrollera
resultatet och ångra dig sedan igen. (Om du inte ångrar
ändringar som du har gjort och som du tycker gör att allt
blir mycket snyggare så blir det svårt för dig att
jämföra med facit senare.)
- Vi har bara testat en
liten del av CSS. Man behöver inte ha en separat fil för hela
webbplatsen även om det normalt sett är det mest effektiva.
Man kan använda CSS också på en sida eller på
en del av en sida. Mer kommer senare i kursen. Om du genast vill veta
mer så kan du t.ex. läsa mer på svenska om CSS i IDGs
webStudios kurs om stilmallar (CSS). World Wide Web consortium erbjuder
naturligtvis också mycket information samt originaldokumenten
om CSS. Det finns ett särskilt program som man kan hämta
på Internet vid namn TopStyle
Lite som är lätt att använda för att skapa CSS-filer.
Topstyle PRO (som man
måste betala för) kan integreras
med Dreamweaver MX. Hos Tucows
kan man hitta ännu fler CSS-program.
Observera att man måste ha en modern webbläsare för
att CSS skall fungera. Tyvärr fungerar de två standarder
som finns för CSS (CSS1 och CSS2) olika i olika webbläsare
och även i olika program för att göra webbsidor och när
du använder CSS så bör du testa noggrannare än
vanligt vad som fungerar. Internet Explorer brukar klara av betydligt
mer än Netscape. Även Netscape 6.1 klarar inte flera av CSS-koderna.
Med hjälp av TopStyle kan man utförligt se vad som fungerar
i olika versioner av webbläsarna.
Redigera i en CSS-fil
- Markera huvudmappen
skolan i platen IT-skolan. Klicka på Arkiv, Ny fil. Ge
filen namnet datasalen.htm. Dubbelklicka på filnamnet i
platsen IT-skolan för att öppna filen. Undersök nu HTML-koden
genom att klicka på <> längst ner till höger
i arbetsytan. Du ser då att det inte finns några koder för
CSS. Lägg in dessa genom att göra som ovan dvs klicka på
Fönster i menyraden och sedan på CSS-format. Klicka sedan
på ikonen längst till vänster av de fyra ikonerna längst
ned till höger (Koppla formatmall). Klicka på Länk och
bläddra dig sedan fram till filen itskolan.css. Klicka på
OK. Undersök nu att koderna finns där.
- Man måste alltså
ange i varje dokument att man vill att CSS-filen skall användas.
Det finns olika sätt att slippa göra det. Ett sådant
är att man varje gång när man gör en ny sida använder
sig av en mall där koderna för CSS redan finns inlagda. Mallar
kan också användas för en hel del annat. Mallar tas
upp senare i kursen. Om man tidigare redan har gjort
många sidor som man nu vill koppla till en formatmall
så redovisas längre ned ett tips på hur man
kan göra.
- I filen datasalen skriver
du nu texten Schema för datasalen. Gör om till Rubrik 1 och
observera att CSS-mallen fungerar. Välj också att ange samma
text som Titel.
Du tänker nu centrera rubriken men så kommer du på
att du istället kanske skall ändra i CSS-mallen så att
alla huvudrubriker blir centrerade. Om någon sedan inte skall
vara det så kan man välja att ändra det på den
speciella sidan. Egna ändringar på sidan går ju före
CSS-mallens instruktioner. Rubrik 1 på ingångssidan är
ju redan centrerad men det spelar ju ingen roll att både CSS-mallen
och formateringarna av texten anger samma sak.
- Dubbelklicka nu på
filen itskolan.css på platsen IT-skolan. Markera H1 i CSS-formatfönstret
och klicka på Redigera formatmalls-ikonen. Under Kategori
Block ändrar du nu till Textjustering: centrerat.
- Det går också
att skriva koderna direkt i filen om man känner till dem. Spara
filen. Dreamweaver visar nu rubrik 1 i filen datasalen.htm som
centrerad. Det är dock inte säkert att det fungerar i alla
webbläsare. Internet Explorer brukar inte vara något problem
när det gäller CSS men Netscape kan ha problem med CSS. När
jag testade med filen datasalen.htm i Netscape 4.7 så fungerade
centreringen men inte H1 (Rubrik 1) i sig dvs texten blev
ej stor. I Netscape 6.1 fungerade allt.
- Om man vill göra en ny formatmall från början så
kan man klicka på Arkiv på menyraden och sedan på
Nytt. I fliken Allmänt klickar man på Kategori:
CSS-formatmallar. Man har då ett flertal färdiga CSS-mallar
att välja på som man sedan kan ändra på själv.
[Tips för
dig som har många tidigare sidor som du vill koppla till en formatmall:
Koppla först en av
sidorna i en mapp till en formatmall. Kontrollera därefter bland
html-koderna hur koderna ser ut. Kanske ser koderna ut så här:
<link href="../itskolan.css rel="stylesheet" type="text/css">
Alla sidorna i samma mapp har samma länk men filerna i andra mappar
kan ha andra relativa sökvägar till CSS-mallen. Därför
kan man inte utan vidare ändra i alla filer på en gång.
Att lägga in en formatmall i varje mapp är inte så lämpligt
eftersom ju meningen med en CSS-mall är att man bara ska ha en fil
att ändra i för att ändra formateringen för flertalet
andra filer. Om man lägger CSS-mallen i huvudmappen blir det enklast
för då har alla undermappar på samma hierarikiska nivå
samma sökväg och man kan ändra på dessa på
en gång.
Koderna fär CSS-kopplingen ligger alltid mellan koderna <head>
och </head>. Man kan alltså t.ex. ersätta sluttaggen
</head> med
<link href="../itskolan.css rel="stylesheet" type="text/css">
</head>
Allt behöver ej stå på samma rad.
För att göra denna ändring så markerar man först
i Plats-fönstrer de filer som ska kopplas till CSS-mallen. Sedan
klickar man på Redigera på menyraden och sedan på Sök
och ersätt. Ändra till Sök efter källkod.
Till höge därom skriver du </head> och under
där det står Ersätt med skriver du <link
href="../itskolan.css rel="stylesheet" type="text/css">
</head>
I kapitel
11 finns en övning som tillämpar ovannämnda tips. ]
Utforma med CSS-format
- Pröva Dreamweavers egna övningar
En ytterligare övning
finner du bland Dreamweavers hjälpinformation. Klicka nu på
Hjälp och sedan på Självstudier. På
andra raden till vänster klickar du på Självstudier
och sedan på "Utforma med CSS-format (Cascading Style Sheets)".
Här finner du ytterligare en övning i att använda CSS.
Gör övningen. Du får då lära dig mer om hur
man kan göra i Dreamweaver när det gäller CSS.
Sortera en tabell
- Lägg nu in en tabell
med 4 rader och 3 kolumner i filen datasalen.htm under rubriken.
Tabellen skall ha samma formateringar som den översta tabellen
i filen si.htm. Du funderar nu kanske om man även för
tabellerna skulle lägga in CSS-koder så att alla tabeller
ser likadana ut. Det är en bra idé men vi bryr oss inte
om detta nu.
- Istället går
du till filen si.htm och markerar hela den översta tabellen.
Kopiera den och klistra sedan in den i filen datasalen.htm under
rubriken. Se till att tabellen blir centrerad. Du ser att formateringarna
följde med. En rad saknas dock. Lägg till denna rad genom
att markera en cell i den understa raden och sedan dubbelklicka. Du
väljer sedan Tabell, Infoga rader eller kolumner. Välj
2 rader och nedanför. Ta sedan bort all text. Tag också bort
formateringen att det finns en lista i cellen på andra raden längst
till höger genom att i egenskapspaletten klicka på Numrerad
lista-knappen. Ändra för den vänstra kolumen i egenskapspaletten
vid Vågr. till Höger. Ändra också
för hela tabellen Cellutfyllnad till 4, cellmellanrum till 0 och
Kant till 1. Ta bort talet 70 (%) för bredden så att bredden
anpassas till innehållet. Lägg sedan in följande data:
| Tid |
Klass |
Ämne |
| 8 |
Sp1c |
Matematik |
| 9 |
Nv1b |
Biologi |
| 10 |
Hp1a |
Kemi |
- Du skall nu sortera
i tabellen. Klicka någonstans i tabellen. Klicka sedan i menyraden
på Kommandon och välj Sortera tabell. Använd hela tiden
enbart den översta sorteringen. Sortera nu i följande ordning:
- Sortering efter
kolumn 2, alfabetiskt, stigande
- Sortering efter
kolumn 3, alfabetiskt, stigande
- Sortering efter
kolumn 1, numeriskt, stigande
- Lägg in en vågrät
linje under tabellen och kopiera sedan det som står under den
nedersta vågräta linjen i filen si.htm till
motsvarande plats i filen datasalen.htm. Se
till att den inkopierade texten blir centrerad och ändra till rätt
datum.
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
2005-10-06
av
tommy.maltell@pb.edu.jonkoping.se
Länkar:
Kursens ingångssida - Skolornas
portal
©
2002, 2003 Tommy Maltell |