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

Kapitel 25f - Dreamweaver 3
Svensk version - Övning 6

Ändra lite
  1. 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.

  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

  1. 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.

  2. Öppna filen ingang.htm. Klicka på Fönster i menyraden och sedan på CSS-format. Klicka sedan på den mellersta av de tre ikonerna längst ned till höger (Öppna formatmall). Klick på Länk och bläddra dig sedan fram till filen itskolan.css. Klicka på OK. Klicka sedan i nästa fönster på Klart. Gör likadant med filerna sp.htm och si.htm. Undersök nu hur sidorna ser ut.

  3. 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 rel="stylesheet" href="../itskolan.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.

  4. 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. När du klickar på någon av dem så ser du vad som gäller. Inställningarna gäller om inget annat är specificerat i denna filen eller på din sida.

  5. Följande har jag bestämt:

    1. 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.
    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.
    3. Texterma i tabeller (TABLE) och listor (LI) skall ha samma teckensnitt som när det gäller BODY samt 9pt vilket motsvarar storlek 1,5.
    4. 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å är 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.

     

  6. 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 på någon av de 6 HTML-koderna som är formaterade och välj Redigera. 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.)

  7. Vi har bara testat en liten del av CSS. Man behöver inte ha en separat fil för hela webbplatsen även om det är 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 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 och 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.

Redigera i en CSS-fil

  1. 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å den mellersta av de tre ikonerna längst ned till höger (Öppna formatmall). Klick på Länk och bläddra dig sedan fram till filen itskolan.css. Klicka på OK. Klicka sedan i nästa fönster på Klart. 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.

  2. 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. För att kunna göra det klickar du t.ex. på Ändra på menyraden och därefter på Sidegenskaper.

    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.

  3. Dubbelklicka nu på filen itskolan.css på platsen IT-skolan. Markera H1 och klicka på Redigera. Det går inte att hitta någon möjlighet att lägga in centrering. Standarden CSS1 kom först men redan den 12 maj 1998 kom rekommendationerna för CSS2 som är en mer omfattande standard. Du kan ange alla CSS1-egenskaper med Dreamweaver men en del möjligheter saknas.

  4. Öppna nu istället filen itskolan.css i programmet Anteckningar. Klicka på Start längst ned i vänstra hörnet av bildrutan och sedan på Program, Tillbehör, Anteckningar. Välj Öppna och ändra vid filformat till Alla filer. Bläddra fram till filen itskolan.css och öppna den. Nu lägger du till texten text-align : center ; på en egen rad under texten color : #90905D; men ovanför raden med det avslutande }. 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.

  5. 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.

Sortera en tabell

  1. 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

  2. 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:
    1. Sortering efter kolumn 2, alfabetiskt, stigande
    2. Sortering efter kolumn 3, alfabetiskt, stigande
    3. Sortering efter kolumn 1, numeriskt, stigande

     

  3. 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

  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 01-10-17 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida - Skolornas portal

©  2001 Tommy Maltell