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

Kapitel 21d - FrontPage 98

Övning 4

I de tre första övningarna har du lärt dig grunderna när det gäller att skapa webbsidor med FrontPage Editor. 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. Page Properties. 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 Page Properties. Under File på menyraden kan man också hitta Page Propertes som du nu alltså väljer att gå till. Det finns i det fönster som visas 5 flikar General, Background, Margins, Custom och Language. Vi skall nu gå igenom vad dessa flikar innehåller.

   1. General.

      1. Location. 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. Title. Här är det viktigt att du som titel skriver in något kort som är vettigt och upplysande om vad sidan i huvudsak innehåller. Titeln (sidrubriken) ä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. Background.

      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, Hyperlink, Visited Hyperlink och Active Hyperlink 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ätt och vågrätt. Om man klickar i den lilla rutan framför Background Image så får man möjlighet att välja en bild om man klickar på Browse. 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 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 Background i fönstret Page Properties sätter du en bock framför Background Image. Välj sedan genom att först klicka på Browse den fil som du nyss sparade.

4. Font Properties. Stanna kvar på ingångssidan och klicka med höger musknapp på  länkarna till höger om bilden och välj Font Properties. Du kan också nå Font Properties genom att klicka på Edit på menyraden och sedan på Font Properties längst ner. Du kan ju också ändra font i andra rutan från vänster direkt på Format Toolbar (Verktygsfältet Formatera).

   1. Välj nu Font, Font style och Font size. Välj att ändra Font till Arial och Font size till 2 (10pt). Ändra sedan texten och länken nedanför Horizontal line Font till Arial och Font size 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 teckensnitt (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">. Ändra på liknande sätt på alla andra ställen där det står Arial. 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 Font Properties 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 Font size. 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. Paragraph Properties. Längst till vänster på Verktygsfältet Formatera kan man se ett styckes status och på 5:e-7:e knapparna från höger på samma fält kan man se om stycket är vänsterställt, centrerat, högerställt eller i det här fallet inte har någon inställning alls (default). 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 Paragraph Properties. Man kan också klicka på Format på menyraden för att därefter välja Paragraph. Markera rubiken och klicka på höger musknapp och välj Pararagraph Properties och  undersök inställningarna. Gör sedan samma sak med länkarna och texten under den vågräta linjen (Horizontal line). 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. Image Properties. Markera regnbågsbilden under rubriken. Klicka med höger musknapp på bilden och välj Image Properties. Man kan istället klicka Edit på menyraden och sedan välja Image Properties. Nu visas 3 flikar: General Video och Appearance.

   1. General. På fliken General 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.

      1. Image Source och Edit. Filen ingang.htm ligger ju i huvudmappen skolan. Rainbow.gif ligger i undermappen bilder. Om man klickar på Edit-knappen en bit åt höger så startas programbbmet Microsoft Image Composer 1.5. I det här 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 Image Composer (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 ändre webbläsare varför man kanske ännu ett tag så undvika detta format som delvis är att tänkt att framföra allt gif-formatet.
         
         Klicka nu på Edit-knappen en bit åt höger. Då öppnas filen rainbow.gif i Image Composer. Välj att spara filen i i filformatet jpeg med namnet rainbow.jpg  Lägg också denna bilden i din undermapp bilder. Stäng sedan programmet Image Composer och också programmet FrontPage Explorer som troligen också startades när du startade Image Composer.

      2. Type. 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 transparent (en av de 256 möjliga färgerna i gif-formatet är genomskinlig). Man kan också se om bilden är interlaced (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 interlaced. 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 qualilty 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 quality är 75 %.
            
            Du skall nu byta ut bilden mot den jpg-bild som du sparade ovan. Enklast gör det genom att klicka på Browse långt upp på fliken för att därefter välja ranbow.jpg i mappen bilder. Välj OK och välj sedan Image Properties för att se att bilden nu är en jpeg-bild med quality 75 %.

      3. Default Hyperlink. Om man vill göra bilden till 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 Image Properties. 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 bilderna 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. En bit ned bland länkarna hittar man sedan en länk till Stanforduniversitetets bilder. Den direkta URL-adressen är  http://www-cs.stanford.edu/gifs/ Bilden som jag har använt i mitt facit har URL-adressen: http://www-cs.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 Insert på menyraden och sedan Image. Et alternativ är att klicka på Insert Image-knappen (bilden på 2 fjäll) dvs 8:e knappen från höger 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 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å  File på menyraden och väljer sedan  Preview in Browser. Ett alternativ är att klicka på 5:e (Preview in Browser) knappen från vänster på standardverktygsfältet. På knappen finns en bild av ett förstoringsglas.

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

      1. Alignment.

      2. Border Thickness. Här kan man med en siffra ge bilden en ram. Oftast använder man den här funktionen för att skriva 0 när bilden är länk och då får man automatiskt en ram om man inte väljer 0 här. Ändra till 10 för att undersöka hur det ser ut. Ändra sedan  tillbaka till ingenting.

      3. Horizontal spacing. 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 llilla 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. Vertical Spacing. 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 Vertical Spacing för att se vad som händer. Ändra sedan tillbaka till ingenting.

      5. Size. Width och Height. Keep Aspect Ratio. Här kan man ändr storleken på bilden genom att sätta en bock framför Specify Size. Om det finns en bock famför Keep Aspect Ratio så förändras ej prortionerna om man ändrar på storleken. Ta bort denna bock och ändra Bredden (Width) till 600 pixels. Man kan också ange att bredden (width) eller höjden (height) i procent av sidan storlek.Ta bort bocken famför Keep Aspect Ratio och ändra Bredden (Width) till 80 %. Ändra också tabellen ovanför till 80 %. Klicka med höger musknapp på den och välj Table Properties. Ändra sedan vid Specify Size. Ändra också så att tabellens ram ej syns genom att välja Border Size=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 välja Border Size=0. När det gäller regnbågsbilden så väjer du också att höjden skall vara 14 pixels.
         
         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 pixels istället för procent. Glöm inte att ta bort bocken framför Keep Aspect Ratio så att inte höjden ändras. I facit för rubriken Välkommen till IT-skolan valde jag bredden 380 pixels och höjden var ju 14 pixels 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-16 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