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

Kapitel 45e - Dreamweaver MX
Svensk version - Övning 5

1. Samhällsvetenskapliga institutionen vill lägga in en tabell från Skolverket på sin webbsida. Tabellen är en Excelfil vid namn jmf.xls Hämta först filen jmf.xls och spara den som jmf.xls i huvudmappen skolan. (Det kan krångla vid direkt hämtning av Excelfilen. Excelfilen finns dock också som en zippad fil jmf.zip som om den hämtas måste packas upp. Tabellen skall läggas under den andra tabellen under regnbågsbilden. Det går inte att importera en Excelfil direkt i Dreamweaver. Du måste först göra om Excelfilen till en textfil som kan vara separerad på något sätt t.ex. med kommatecken, semikolon eller tabbar. Om du har Excel så kan du göra en sådan fil där.

2. Öppna alltså den hämtade filen i Excel. Välj sedan Arkiv, Spara som. Välj som filformat SKV (semikolonavgränsad). Ge filen namnet jmf.skv. Om du inte har Excel eller om hämtninen av Excelfilen eller zip-filen krånglar så hämta filen jmf.skv. När du hämtar filen så ska du inte först öppna filen i webbläsaren utan du klickar istället med höger musknapp på länken ovan. Sedan völjer du att spara filen i huvudmappen skolan. Gå nu i Dreamweaver till filen si.htm. Gör ett nytt stycke under tabellen och markera platsen därunder. Välj Arkiv, Importera, Tabelldata. Bläddra sedan fram till filen jmf.skv. Välj semikolon som avgränsare, celllutfyllnad=3, cellmellanrum=5 och kant=4. Nu ser du strax den nya tabellen i Dreamweaver. Välj att centrera också denna tabell.

Egenskaper för en tabell

1. Gör följande ändringar i tabellen med hjälp av egenskaper:
   1. Ändra Justera till Centrerat
   2. Välj samma bakgrundsfärg som i den översta tabellen
   3. Välj samma färg på kanten som i översta raden i den övre tabellen
   4. Ange bredd till 100%
      
2. Markera alla cellerna i översta raden och sätt sedan en bock till höger om Huvud i egenskaper. Välj sedan samma bakgrundsfärg för alla cellerna i översta raden som på kanten (och som på den översta raden i den översta tabellen). Markera alla cellerna i vänstra kolumnen och sätt sedan en bock till höger om Huvud i egenskaper. Välj sedan samma bakgrundsfärg som för cellerna i översta raden.
   
3. Klicka med höger musknapp i någon cell i den översta raden och välj sedan Tabell, infoga rader eller kolumner. Välj 1 rad ovanför markeringen. Markera den nya översta raden och klicka på höger musknapp. Välj Tabell, Slå samman celler. I den nya översta cellen skriver du sedan Jämförelsetal för större kommuner. Markera denna text och ändra sedan i egenskaper Storleken till 4 (14pt). Cellerna i den nya raden fick vid skapandet automatiskt samma egenskaper som cellerna i raden som vi utgick ifrån.
   
4. Markera den understa raden i tabellen. Skapa en ny rad nedanför denna. Om det inte finns något i en cell så visas den inte som de andra cellerna. Markera de tre första cellerna till vänster i den nedersta raden i den nedersta tabellen. Klicka  på <> längst upp till vänster i arbetsytan. Då ser du i HTML-koden att i alla cellerna och i alla andra celler som inte innehåller någon text har Dreamweaver vid skapandet lagt in koden &nbsp; Denna kod som kallas non-breaking space kan man t.ex. lägga in med hjälp av ett mellanslag och den behövs i en tom cell för att cellen skall visas på ett snyggt sätt. Ta bort koden i de tre första cellerna från vänster i den nedersta raden. Spara sedan och förhandsgranska i webbläsaren för att se vad som händer. Lägg tillbaka koderna t.ex. genom att använda Redigera, Ångra så att koderna återigen finns i cellerna. Om det inte finns något utrymme mellan tabellerna så skapar du nu ett sådant genom att klicka till höger om den översta tabellen. Tryck sedan på Enter.

Indrag

1. Om man vill göra ett indrag från kanten i en text eller helt enkelt flytta en text en bit åt höger så kan man i ett vanligt ordbehandlingsprogram som t ex Word klicka på mellanslag ett antal gånger istället för att använda funktionen indrag. Så som nämnts tidigare kan man i Dreamweaver "normalt" inte göra flera mellanslag efter varandra. Man kan dock ändra på denna förvaltinställning. Om man vill kunna göra flera mellanslag efter varandra så klickar man först på Redigera på Menyraden, sedan på Inställningar och Allmänt. Sedan klickar man i rutan framför texten Tillåt flera mellanslag efter varandra så att det där blir en bock. Då lägger man i själva verket in flera koder för non-breaking space (&nbsp;) efter varandra.
   
2. Det finns emellertid en särskild kod och en knapp för att göra ett indrag eller för att ta bort ett indrag. Skriv texten Uppgifterna i tabellen nedan är hämtade från Skolverkets webbplats ovanför den nedersta tabellen. Låt texten vara markerad. Klicka sedan på I-knappen i egenskaper så att texten blir kursiv. Klicka sedan på Indrag-knappen längst till höger på andra raden i egenskaper. Du ser att texten flyttas en bit in åt höger dvs. det blir ett indrag. Klicka en gång till på samma knapp och texten flyttas ytterligare ett steg. Klicka återigen på samma knapp och sedan 2 gånger på Minska indrag-knappen som ligger till vänster om Indrag-knappen. Du stannar alltså i läget ett indrag från kanten.

Nästlade listor

1. Gå nu till Samhällsvetenskapliga programmets sida (sp.htm). Du skall nu göra all text under tabellen till en lista med underlistor. Men eftersom det är en övning så ska vi göra övningen lite kortare genom att ta bort all text fr o m Efter genomgången kurs skall eleven. Tag också bort figurerna för namngivna ankare som hör till denna text. Ändra sedan så att all text blir i normal storlek och to bort fetstil där sådan finns.

2. När det t.ex. gäller ordet Samhällskunskap så ändra i egenskaper storleken från +2 till Inget. Ta bort mellanliggande vågräta linjer. Markera Samhällskunskap och klicka sedan på Numrering-knappen (knappen med 1,2,3 i egenskaper). Nu har du gjort Samhällskunskap till första raden i en numrerad lista som numreras med siffrorna 1,2,3 osv. Avmarkera hela texten och gå till slutet av första raden. Klicka på Enter för att få nästa rad. Flytta dit (genom att dra) texten Syfte inklusive symbolen (det namngivna ankaret).

3. Syfte skall dock ligga i en underlista. Markera Syfte och Klicka på Indrag-knappen i egenskaper. Nu ligger Syfte som första rad i en ny underlista. Klicka nu på Listpost-knappen och välj som Stil små bokstäver dvs en a,b,c-lista.

4. Ibland finns en fortsättning på listan nedanför där du just nu skriver. Då kan du ibland när du vill fortsätta enbart gå till den punkt i någon lista som redan finns. Annars klickar du på Enter 3 gånger efter texten vid en post eller 2 gånger vid en tom post om du vill hoppa fram till en nivå högre upp. Detta får man upprepa om man vill gå två nivåer uppåt.
   
5. Gör nu likadant med nästa lite längre text som ska hamna som första rad i en ny underliggande lista. Denna lista skall vara av typen i,ii,iii. Lägg sedan till alla posterna i den sista underlistan.
   
6. Texten SH200 - Samhällskunskap A 90 poäng inrättad 1994-07 SkolFs: 1994:9 skall ligga som punkt 2 på huvudlistan. Fortsätt med det som finns kvar och gör underlistor på samma sätt som nämndes ovan.
   
7. Gå nu till platsen IT-skolan. Markera där huvudmappen överst. Klicka sedan på Arkiv, Kontrollera länkar. Länkkontrollen visar 2 brutna länkar. Det är #efter och #betyg. Om man klickar på filerna till vänster för respektive länk som är bruten så kan man se var länken finns. Det är de två understa av de 4 länkarna i tabellen överst på Samhällsvetenskapliga programmets sida som ju inte längre fungerar eftersom du har tagit bort texten och de namngivna ankare som hörde till. Tag bort dessa båda länkar. Spara. Ta bort ev filer som börjar med TMP på platsen IT-skolan och kontrollera länkarna igen med huvudmappen markerad. Inga fler länkar som inte fungerar kan hittas. Dreamweaver hittar alltså ej att den tredje länken på ingångssidan inte längre fungerar till den tänkta platsen på sidan. Ta också bort denna länk som inte fungerar längre.

Kontrollera i facit och gå vidare

1. Du har hittills inte gjort så mycket när det gäller teckensnittet och storleken på tecknen. I nästa kapitel skall du testa en modern metod för att ange teckensnittet mm för alla sidor på hela webbplatsen. Metoden kallas CSS.
   
2. Undersök hur alla sidorna ser ut och jämför med facit.
   
3. 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