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


Kapitel 21b -  FrontPage 98

Övning 2

Vi har nu gjort vår första webbsida men än så länge innehåller vår webbplats väldigt lite information. Det är inte lämpligt att vi lämnar all vår information på förstasidan. Istället kommer det mesta av informationen att läggas i andra filer och från ingångssidan gör vi länkar till dessa sidor.

  1. Välj i FrontPage att skapa en ny sida genom att klicka på File och sedan på New. Man kan nu välja bland flertalet olika mallar för att underlätta arbetet. Vi kan också använda delar av den ingångssida som vi har gjort i övning 1 för att arbetet skall gå snabbare. Eftersom du troligen behöver repetera så  väljer vi dock Normal Page.

  2. Skriv överst "Välkommen till Samhällsvetenskapliga institutionen". Gör denna text till en rubrik av näst högsta ordningen (Heading 2). Centrera ej rubriken.

  3. Spara nu filen under namnet so.htm i mappen institut. Vilken titel fick dokumentet? Titeln blir densamma som rubriken om man inte ändar själv. Ändra nu till enbart "Samhällsvetenskapliga institutionen".

  4. På Samhällsvetenskapliga institutionen vill man gärna ha några länkar till platser som man ofta går till. Du kan gå till  IT-pedagogens sida med länkar till sådana platser. För att underlätta ditt arbete har jag redan valt ut tre platser:

    1. Mölndals Stadsbibliotek - Samhälls- och rättsvetenskap
    2. Svenska Yahoo - Samhällsvetenskap och humaniora
    3. The Electoral Web Sites - Kalender över val och valresultat

  5. Gå först till den första platsen. När du kommer fram så kopierar du URL-adressen genom att t.ex. först klicka till höger om adressen så att hela adressen blir markerad. Därefter kopierar du t.ex. genom att  i adressfältet klicka på höger musknapp och sedan välja kopiera. Därefter går du tillbaka till FrontPage. Klicka på Enter, och skriv "Våra bästa länkar". Gör detta till en rubrik av graden "Heading 3". Gå till nästa rad och skriv där "Mölndals Stadsbibliotek - Samhälls- och rättsvetenskap)" . Markera hela texten och klicka sedan på "Create or Edit Hyperlink"-knappen (7:e knappen från höger på standardverktygsfältet). Ta bort det som står i fältet till höger om URL:. Klicka med höger musknapp i detta fält och välj sedan Klistra in. Klicka sedan på OK.

  6. Markera texten som nu blivit en länk (Den borde vara markerad och nu blå och understruken). Klicka på "Numbered List"-knappen (4:e knappen från höger på formatverktygsfältet) och du har skapat en numrerad lista med den första länken som första punkt. Markera nu endast utrymmet till höger om länken och klicka på Enter. Du har nu skapat en ny punkt på listan. Lägg in de två andra länkarna på samma sätt som punkt 2 och 3 på listan. Punkterna på listan får ett litet indrag från vänsterkanten.

  7. Ge huvudrubriken en annan färg genom att markera den och sedan klicka på "Text Color"-knappen (8:e knappen från höger på formatverktygsfältet). Välj en valfri färg. I facit har jag valt en brun färg.
    Välj samma gula bakgrundsfärg som på ingångssidan.

  8. Den länklista som du har nu är kompakt på det sättet att nästa punkt på listan kommer på nästa rad. Hur skulle det se ut om rubriken inklusive dess rubrik centrerades. Markera länklistan och dess rubrik och klicka sedan på Center-knappen (6:e knappen från höger på statusverktygsfältet). Vad hände med länklistan? För det första så blir listan ej rak från vänsterkanten på listan. För det andra blir listan mindre kompakt pga att det i HTML-koderna läggs in en kod för nytt stycke när man väljer centrering. Markera listan inklusive rubrik igen och klicka på Align left-knappen. Allt läggs nu tillbaka till vänster men listan förblir mindre kompakt. Det beror på att det fortfarande finns en kod för nytt stycke men nu kombinerat med vänster istället för center. Som tur är finns Undo (Ångra)-knappen och du kan ångra flera steg som du har gjort i tur och ordning. Klicka därför på Undo-knappen 2 gånger. Du är nu tillbaka till situationen innan du började på punkt 8.

  9. Vi skall nu flytta listan inklusive rubriken till centrum på ett annat sätt och listan blir då rak från vänsterkanten och listan blir fortfarande kompakt. Gå nu till raden under listan utan att vara kvar i listan. Om du har markören i slutet av sista raden på listan och klickar Enter så placeras markören efter siffran för nästa rad. Om du då klickar på Enter igen så lämnar du listan och du befinner dig under densamma.

  10. Klicka på Insert Table-knappen (9:e knappen från höger på standardverktygsfältet) och håll musknappen nere. Du kan nu dra ut tabellen snett nedåt åt höger och det antal  blå rutor som visas innan du släpper musknappen anger det antal celler som du skapar. Du ska nu emellertid bara välja en cell dvs en blå ruta. När du har skapat cellen så markerar du länklistan inklusive rubriken och drar allt med musknappen till cellen. Sedan klickar du med höger musknapp någonstans i cellen. Välj Table Properties och därefter gör du 3 ändringar.

    1. Ändra Layout Alignment från Default till Center
    2. Ändra Border size till 0 (Ramen kommer nu ej att synas)
    3. Ta bort bocken framför Specify Width

  11. Välj nu att titta på sidan i din webbläsare. Vi lyckades att få listan centrerad så som vi hade tänkt oss, men kanske hade det varit bättre att istället göra lite spalter uppifrån på den här sidan. Det hade vi kunnat åstadkomma med en av mallarna innan vi gjorde sidan. Vi kan dock åstadkomma detta själva med hjälp av en ny tabell. Tabeller kan användas för att placera texter och bilder på olika platser på en sida. Klicka nu på Enter 2 gånger under tabellen och lägg där in en ny tabell med 3 rader och 3 kolumner. Flytta sedan rubriken på listan till den översta högra cellen och listan till den andra cellen till höger. Ta sedan bort den första tabellen.

  12. Markera alla cellerna i hela tabellen och klicka sedan på höger musknapp för att kunna välja Cell Properties. Välj sedan Specify Width 33%. Ev finns redan dessa inställningar som förvalda.

  13. Klicka nu på cellen med rubriktexten med höger musknapp och välj Cell Properties. Klicka sedan så att det blir en bock framför Header Cell och klicka därefter på OK. Texten blev nu i fetstil och centrerad i cellen. I den översta raden till vänster skriver du "Lärare" och i den mittersta cellen överst "Salar". Gör också dessa celler till Header Celler. Du kan markera båda två samtidigt för att sedan ändra en inställning för båda samtidigt.

  14. Skriv läraren Alf Albrektssons namn i cellen till vänster på andra raden och håll sedan nere Shift-knappen samtidigt som du trycker på Enter. Då skapar du en radbrytning istället för ett nytt stycke som man får om man bara trycker på Enter. Skriv Östen Ölunds namn på andra raden. Ange på samma sätt de två salarna 101 och 999 på var sin rad i mittersta cellen på andra raden. Default(Förvalt)-inställningen är att i en cell hamnar texten (eller bilden) till vänster horisontellt och i mitten vertikalt. Ändra nu så att innehållet i andra radens celler börjar längst upp genom att markera alla cellerna. Därefter klickar du på höger musknapp och väljer Cell properties. Därefter ändrar du Vertical Alignment till top.

  15. Du ska nu testa hur det blir om du lägger själva rubriken på hela sidan överst i tabellen. Klicka någonstans i den översta raden i tabellen och klicka sedan på Table på menyraden. Välj Insert Rows or Columns och ändra till Above selection och se till att det blir 1 ny rad. När den nya raden finns så markerar du den t.ex. genom att föra musen från vänster och klicka när du ser den svarta pilen. Klicka sedan med höger musknapp på de markerade cellerna och välj Merge cells. Nu är det bara en cell och du drar slutligen rubriken dit. Formateringen som  Heading 2 försvinner när du fllyttar den. Du kan om du vill göra en sådan formatering igen där texten nu finns.

  16. Du ångrar dig emellertid. Du vill ha rubriken utanför cellen och vi klickar på ångerknappen flera gånge så att också den nya översta raden försvinner. Sedan centrerar vi istället rubriken och tar bort den understa tabellraden som vi inte använder. Klicka på den från vänster tills du ser den svarta pilen. Markera och klicka på höger musknapp för att sedan välja Delete cells.

  17. Klicka nu någonstans i tabellen med höger musknapp och välj Table Properties. I det fönster som visas nu kan man ändra på många inställningar. Testa gärna med att ändra olika värden för att se vad som händer. Gör sedan följande slutliga ändringar:

    1. Ändra Alignment till center
    2. Ändra Border size (djupet på ramen) till 0
    3. Ändra Cell Padding (avståndet från cellens innehåll till kanten av cellen) till 4
    4. Ändra Cell Spacing (avståndet mellan cellerna) till 7
    5. Väljn bakgrundsfärg lime (Det går också att lägga in en bild som bakgrund)
    6. Ändrar Specify Width till 70%

  18. Markera alla cellerna i översta raden och klicka sedan på höger musknapp för att kunna välja Cell Properties. Välj sedan vit bakgrundsfärg för alla cellerna.

  19. Lägg in en Horizontal line under tabellen och kopiera innehållet längst ner från ingångssidan så att det står likadant längst ner på den här sidan. Centrera den nedersta texten och ändra eventuellt till rätt datum.

  20. Vi har inte gjort några länkar så att vi från ingångssidan kan gå till Samhällsvetenskapliga institutionens sida och sedan tillbaka. Det ska vi göra nu. Gå till ett nytt stycke längst ner på sidan med hjälp av Enter och skriv där "Tillbaka till ingångssidan". Se till att teckenstorleken är lika stor som raden ovanför. Klicka på "Create or Edit Hyperlink-knappen (7:e knappen från höger på standardverktygsfältet). Klicka sedan på knappen med ett förstoringsglas i nedre högra hörnet. Leta sedan rätt på och välj filen ingang.htm.

    Viktigt påpekande!
    Det är väldigt viktigt att man gör länkarna till andra egna sidor genom att klicka på knappen med förstoringsglaset såsom nämns ovan när man använder FrontPage98 utan att använda FrontPage Explorer såsom vi gör här i kursen. Då blir nämligen länkarna relativa dvs länkarna står i relation till de övriga sidorna. Sidor med sådana relativa länkar till de egna sidorna i samma huvudmapp kan man flytta till en annan plats t.ex. till en webbserver på Internet och alla länkarna fungerar fortfarande.

    Ordet file eller bokstäverna C eller H ingår aldrig i relativa länkar. Om man markerar en text som man har gjort till en länk och om man sedan kontrollerar hur länken ser ut genom att klicka på "Create or Edit Hyperlink-knappen (7:e knappen från höger på standardverktygsfältet) så ska det se ut som följer till höger om URL:
    en länk till en fil i samma mapp - endast filnamnet
    en länk till en fil i en underliggande mapp - mappnamnet/filnamnet
    en länk till en fil i en mapp uppåt i hierarkin - ../filnamnet
    en länk till en fil i en annan mapp som har samma huvudmapp - ../mappnamnet/filnamnet

    Om du är osäker hur länkarna ska se ut så kontrollera i facit. En kontroll som man kan  göra för att se att man har gjort rätt är att flytta hela huvudmappen från en nätverksenhet till en hårddisk eller en diskett eller tvärtom. Om länkarna fortfarande fungerar så har man förmodligen gjort rätt.

    Alla bilder måste ligga i huvudmappen eller i undermappar till denna eller på Internet. Vid en sådan kontrollflyttning som nämns ovan kontrollerar man också att alla bilderna fungerar dvs att de ligger unde huvudmappen eller på Internet.

  21. Öppna filen ingang.htm i FrontPage och gör en länk med namnet "Samhällsvetenskapliga institutionen" under bilden på huset.

  22. Välj nu att titta på sidorna och jämför med facit 2.

  23. Fortsätt nu med övning 3.


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