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

Kapitel 24d - FrontPage 2000 - svensk version

Övning 4

I de tre första övningarna har du lärt dig grunderna när det gäller att skapa webbsidor med FrontPage. Du går nu vidare samtidigt som du repeterar de mest grundläggande funktionerna.

1. Öppna Samhällsvetenskapliga institutionens sida dvs filen so.htm

2. Funktionerna kan fås fram på många olika sätt. Vi skall nu mestadels använda oss av vad vi kan se med hjälp av höger musknapp.

3. Sidegenskaper. Var du än klickar på sidan med höger musknapp   (t.ex. på bilden eller i tabellen eller utanför dessa) så kan man sedan alltid välja Sidegenskaper. Under Arkiv på menyraden kan man också hitta Egenskaper (som leder till samma fönster och ) som du nu alltså väljer att gå till. Det finns i det fönster som visas 5 flikar Allmänt, Bakgrund, Marginaler, Eget och Språk. Vi skall nu gå igenom vad dessa flikar innehåller.

   1. Allmänt.

      1. Plats. Här ser man var någonstans på din dator eller på ditt nätverk som filen är sparad. I den här rutan gör man aldrig själv några ändringar.

      2. Rubrik (Title). Här är det viktigt att du skriver in något kort som är vettigt och upplysande om vad sidan i huvudsak innehåller. Sidrubriken (Title) är det  som syns längst upp i webbläsaren och när man gör ett bokmärke i Netscape eller en favorit i Internet Explorer.

   2. Bakgrund.

      1. Här kan man välja en annan färg som bakgrund. Du har ju redan valt gul bakgrundsfärg här. Om man väljer en mörkare bakgrundsfärg så måste man tänka på att också färgerna för Text, Hyperlänk, Använd Hyperlänk och Aktiv Hyperlänk ska synas bra på sidan och att man därför troligen måste ändra på färgen för någon av dessa.

      2. 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 i den lilla rutan framför Bakgrundsbild så får man möjlighet att välja en bild om man klickar på Bläddra. 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 

      3. Byt nu bakgrunden på filen ingang.htm till bilden som du nyss sparade. Under fliken Bakgrund i fönstret Sidegenskaper sätter du en bock framför Bakgrundsbild. Välj sedan genom att först klicka på Bläddra den fil som du nyss sparade.

4. 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å Format på menyraden och sedan på Teckensnitt. Du kan ju också ändra teckensnitt i andra rutan från vänster direkt på Verktygsfältet Formatering.

   1. Välj nu Teckensnitt. Välj att ändra Teckensnitt till Arial och Storlek till 2 (10pt). Ändra sedan för texten och länken nedanför Vågrät linje  Teckensnitt till Arial och Storlek till 1 (8pt).

   2. Längst ner till vänster på sidan finns det 3 flikar. Hittills har du hela tiden sett innehållet på fliken Normal. Klicka på fliken HTML för att se hur HTML-koderna ser ut. Arial fungerar bra i pc-världen men förekommer normalt sett inte i Macintoshdatorer. Vi måste ange ett typsnitt (t.ex. Helvetica) som liknar Arial och som normalt fungerar på en Macintoshdator. Leta rätt på de ställen där det står <font face="Arial" size="2"> och lägg till Helvetica så att det istället står <font face="Arial,Helvetica" size="2">.  Du kan göra denna ändring också när du är  i fliken  Normal. Markera då först texten som ska ändras och gå sedan till Teckensnittsfönstret och skriv själv in Arial,Helvetica i rutan under Teckensnitt. Ändra på liknande sätt på alla andra ställen där det står Arial på något av de 2 sätt som beskrivs ovan. 
      
      Det går att lägga in alternativa teckensnitt också när man ser innehållet på fliken Normal. Klicka på höger musknapp, välj Teckensnitt och skriv de tre teckensnitten överst till vänster med ett kommatecken efter det första och andra teckensnittet. 

   3. Ett sätt att ändra storleken på en text är att ändra Storlek i Teckensnittsfönstret eller att ändra i tredje rutan från vänster på  Verktygsfältet Formatering. 
      
      Man kan också göra om en text till en rubrik. Texten blir då ett eget stycke. Markera nu rubriken och ändra också för denna till Arial med alternativet Helvetica.

5. Stycke. Längst till vänster på Verktygsfältet Formatera kan man se ett styckes status och till höger om knapparna markerade F, K, U på samma fält kan man se om styckets justering är vänster, centrera, höger eller i det här fallet inte har någon inställning alls (standard). Man kan få samma information genom att markera ett stycke t.ex. en rubrik och sedan klickar på höger musknapp för att sedan välja Stycke. Man kan också klicka på Format på menyraden för att därefter välja Stycke. 
   
   Markera rubriken och klicka på höger musknapp och välj Stycke och  undersök inställningarna. Gör sedan samma sak med länkarna och texten under den vågräta linjen. Om man någon gång inte riktigt har klart för sig var ett stycke börjar och slutar så kan man klicka på HTML längst ner till vänster på bildskärmen och titta i koderna. Ett stycke börjar alltid med <p> och slutar med </p>. Ofta finns det ett s.k. attribut i den första taggen t.ex. ser det ut så här <p align="center"> om stycket  är centrerat.

6. Bildegenskaper. Markera  (i filen ingang.htm) regnbågsbilden under rubriken. Klicka med höger musknapp på bilden och välj Bildegenskaper. Man kan istället markera bilden och klicka på Format på menyraden och sedan välja Egenskaper. Nu visas 3 flikar: Allmänt, Videoklipp och Utseende.

   1. Allmänt. På fliken Allmänt kan man se var bildfilen finns i förhållande till den webbsida på vilken bilden visas och i förhållande till den mapp som webbsidan ligger i (enligt samma system som för relativa länkar).

      1. Bildkälla och Redigera. Filen ingang.htm ligger ju i huvudmappen skolan. Rainbow.gif ligger i undermappen bilder. Om man i fliken Allmänt klickar på Redigera-knappen en bit åt höger så startas eventuella ett bildbehandlingsprogram. Om man klickar på redigera och sedan får ett meddelande: "Ingen bildredigerare har konfigurerats." så betyder det vanligen att inget bildbehandlingsprogram har installerats. Den bildredigerare som är tänkt att användas med FrontPage 2000 är programmet Photo Draw. När det gäller FrontPage 98  är det programmet  Microsoft Image Composer 1.5. I ett bildbehandlingsprogrammet kan man bearbeta bilder och skapa nya bilder. Ett viktigt användningsområde är att man i programmet kan spara om (konvertera) filen i ett annat bildformat. Om man t.ex. har skannat en bild till något av de vanliga bildformaten tif eller bmp så kan man öppna bilden i bildbehandlingsprogrammet (som också kan startas som man normalt startar ett program) och sedan spara om den i formaten som kan visas på en webbsida dvs.  jpg, gif eller png. Png-bilder  kan inte visas i äldre webbläsare varför man kanske ännu ett tag bör undvika detta format som delvis är att tänkt att ersätta gif-formatet.
         
         Bmp-filer kan ses i Internet Explorer men sådana filer är alldeles för stora och kan ej ses i Netscape. De bör absolut konverteras.
         
         Klicka nu på Redigera-knappen en bit åt höger. Då öppnas i bästa fall filen rainbow.gif i ett bildbehandlingsprogram. Om det finns något sådant väljer du nu att spara filen i i filformatet jpeg (jpg) med namnet rainbow.jpg  Lägg också denna bilden i din undermapp bilder. Stäng sedan bildbehandlingsprogrammet. Om inget bildbehandlingsprogram startas så starta ett som du känner till på vanligt sätt och gör konverteringen där. Om det inte finns något bildbehandlingsprogram så hoppa över den här övningen.

      2. Typ. Bilden är vanligen en de två  typerna gif eller jpeg.

         1. Gif. Om bilden är av typen gif så kan man se om bilden är genomskinlig (en av de 256 möjliga färgerna i gif-formatet är genomskinlig). Man kan också se om bilden är sammankopplad (Istället för att bilden sakta växer fram i webbläsaren visas bilden i sin helhet. I början är bilden väldigt suddig. Bildkvaliteten ökar  i omgångar.). Sätt en bock framför sammankopplad. Du kommer dock när det gäller den här lilla bilden troligen inte att märka någon skillnad. En gif-bild kan också vara rörlig.

         2. Jpeg (jpg). En jpeg-bild kan till skillnad från en gif-bild visa flertalet färger (16777216 färger). I en jpeg-bild är en del information om bilden förstörd. Om man förstör lite så blir Kvalitet högre men filstorleken större. Det är ju viktigt för att hämtandet inte skall bli för långsamt att bilder som publiceras på Internet är så små som möjligt när det gäller filstorleken. Vanligast är att kvalitet är 75 %.
            
            Du skall nu byta ut bilden mot den jpg-bild som du sparade ovan. Enklast gör det genom att klicka på Bläddra långt upp på fliken för att därefter välja ranbow.jpg i mappen bilder. Välj OK och välj sedan Bildegenskaper för att se att bilden nu är en jpeg-bild med kvalitet 75 %.
            
            Om du inte lyckades med konverteringen så kan du istället klicka på bilden herrgard.jpg med höger musknapp för att sedan välja Bildegenskaper. Kontrollera att den här bilden är en jpeg-bild med kvalitet 75 %.

         3. Png. Det framgår om bilden är en png-fil. 

      3. Standardhyperlänk. Om en bild är en länk så kan man här se vart länken går. Gå till  Samhällsvetenskapliga institutionens sida och markera den lilla bilden längst upp till vänster. Klicka med höger musknapp på bilden och välj Bildegenskaper. Nu kan du se vart bilden länkar ( ../ingang.htm). De två punkterna betyder att länken går till en fil (ingang.htm) i huvudmappen ovanför mappen institut i vilken sidan so.htm ligger.

      4. Visa bilder på andra datorer. Man måste inte på sin webbsida visa en bild som ligger under den egna huvudmappen. 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.
         
         Du hittar till Stanfords bilder genom att från min ingångssida som IT-pedagog välja rubriken F - Bilder, ljud mm. Sedan väljer du Fler platser med bilder, animeringar. Långt ned till vänster hittar man sedan en länk till Stanfords bilder. Den direkta webbadressen är  http://www-sccm.stanford.edu/gifs/. Bilden som jag har använt i mitt facit har URL-adressen: http://www-sccm.stanford.edu/gifs/line.rainbow.gif
         Kopiera den senaste nämnda URL-adressen. Var kvar på Samhällsvetenskapliga institutionens sida. Markera där regnbågsbilden och tryck sedan Delete-knappen på tangentbordet. Välj nu Infoga på menyraden och sedan Bild, Från fil. Et alternativ är att klicka på Infoga bild från fil- knappen på standardverktygsfältet. 
         
         2 fönster visas nu. Det översta används om man vill visa bilder i din egen mapp. Klicka på Avbryt i detta fönster och klistra sedan in den adress som du nyss kopierade till höger om Adress (URL ):  (t.ex. genom att klicka där med höger musknapp för att sedan välja Klistra in). Nu syns ej bilden i Normal(WYSIWYG)fliken i Frontpage. För att se sidan klickar du nu på  Arkiv på menyraden och väljer sedan  Förhandsgranska i webbläsaren. Ett alternativ är att klicka på  knappen med ett förstoringsglas  på standardverktygsfältet. 

   2. Utseende. Vi hoppar över fliken Video och väljer istället fliken Utseende. Gå nu till Samhällsvetenskapliga programmets sida. Markera där regnbågsbilden, klicka på höger musknapp och välj Bildegenskaper. Välj sedan fliken Utseende.

      1. Layout Justering.

      2. Tjocklek på kantlinjer. Här kan man med en siffra ge bilden en ram. Oftast använder man den här funktionen för att ange ett positivt tal för att visa att bilden är en länk och 0 då man trots att det finns en länk inte vill visa en ram som man inte tycker blir så snygg . Ändra till 10 för att undersöka hur det ser ut. Ändra sedan  tillbaka till ingenting.

      3. Vågrätt avstånd. Här kan man ange att ett utrymme åt båda hållen horisontellt skall reserveras så att inte andra bilder eller text kan placeras där. Övergå tillfälligt till den lilla bilden längst upp till vänster och ändra till 5 för att rubriken skall börja en liten bit till höger om bilden. Gör samma ändringar när det gäller Samhällsvetenskapliga programmets lilla bild. Behåll dessa båda inställningar.

      4. Lodrätt avstånd. Här kan man ange att ett utrymme åt båda hållen vertikalt skall  reserveras så att inte andra bilder eller text kan placeras där. Gå tillbaka till Samhällsvetenskapliga institutionen och regnbågsbilden där och testa med att ändra till 50 vad gäller Lodrätt avstånd för att se vad som händer. Ändra sedan tillbaka till ingenting.

      5. Storlek. Bredd och höjd. Behåll bildförhållande. Här kan man ändra storleken på bilden genom att sätta en bock framför Ange storlek. Om det finns en bock framför Behåll bildförhållande så förändras ej proportionerna om man ändrar på storleken. Ta bort denna bock och ändra Bredden  till 600 pixlar. Man kan också ange att bredden eller höjden  i procent av sidans storlek. Ta bort bocken framför Behåll bildförhållande och ändra Bredden till 80 %. Ändra också tabellen ovanför till 80 %. Klicka med höger musknapp på den och välj Tabellegenskaper. Ändra sedan vid Ange storlek. Ändra också så att tabellens ram ej syns genom att ändra Kantlinjer Storlek till 0.
         
         Ändra också när det gäller Samhällsvetenskapliga programmet så att både tabellen överst och regnbågsbilden får bredden 80 %. Ändra också så att tabellens ram ej syns genom att ändra Kantlinjer Storlek till 0. När det gäller regnbågsbilden så väjer du också att höjden skall vara 14 pixlar.
         
         Välj också när det gäller ingångssidan att göra  regnbågsbilden lika bred som rubriken. Om det skall fungera för olika skrivbordsstorlekar eftersom texten blir olika stor så väljer man pixlar istället för procent. Glöm inte att ta bort bocken framför Behåll bildförhållande så att inte höjden ändras. I facit för rubriken Välkommen till IT-skolan valde jag bredden 380 pixlar och höjden var ju 14 pixlar från början.

7. Undersök hur alla sidorna ser ut och jämför med facit.

8. Fortsätt sedan med nästa övning.

Denna sida uppdaterades senast 00-05-17 av
tommy.maltell@pb.edu.jonkoping.se

Länkar:
Kursens ingångssida
Kapitel:  0 1 2 3a 3b 3c 4 5a 5b 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20a 20b 21a 21b 21c 21d 21e 21f 21g 21h 22a 22b 22c 23 26 30 31 32 33 37   
Skolornas portal

©  1999, 2000 Tommy Maltell