Kom igång med FrontPage 2003

Kom igång med FrontPage 2003 Skolorna i Kristianstads kommun har inte gemensam licens som med vissa övriga Microsoft-program utan licens måste köpas för varje dator som det ska installeras på. Din tekniker hjälper dej! Skapad av Anette Berg Uppdaterad för FP 2003 av Barbro Nilsson 2004-01-17. BUF Kristianstad

Innan du börjar! Tyvärr fungerar inte Front Page-skapade sidor i alla webbläsare. För att få det att funka i så många som möjligt måste man göra några inställningar. OBS! Detta måste göras på varje dator Du sitter vid! Hemma som i skolan... Gör så här: Välj Verktyg - Sidor (Sidalternativ) - och fliken Redigering (se bild) Vid Webbläsare så välj "Både Internet Explorer och Navigator" Vid Webbläsarversion välj "4.0 och senare" eller "5.0 och senare". Om du väljer 5.0 fungerar det INTE i Netscape 4.5 som vi vet att en del använder i våra skolor. 1

Att börja Klicka på Frontpageikonen program. på skrivbordet eller öppna FrontPage via Start och Alla När FrontPage öppnats hittar du menyer och verktygsfält högst upp. En del känner du igen från Word. Under dem visas ev olika fält : Mapplista, Webbplats, en ny sida och/eller Åtgärdsfönstret. (vilka fält som visas beror på vilka inställningar som gjorda i programmet) Mapplista - detta är din web, alltså alla mappar och bilder som du använder och htmsidor som du skapat. Detta kallas roten. Under rubriken Visa kan du välja om du vill att Mapplistan ska visas eller inte. I mappen Images kan du lägga bildfiler som används på sidan. För att en bild ska få rätt adress måste den finnas i webbplatsen. Det kan vara direkt under roten eller i någon mapp. I mappen _private kan man förvara filer som man inte vill visa men som ändå ligger på webben. Ny sida (ny_sida_1.htm): I nederkanten av ett dokument som du arbetar med finns fyra flikar: Design (redigeringsläge), Dela (du kan se både Design-läge och html-koden), Kod (html-kod) och Förhandsgranskning Åtgärdsfönstret finns längst till höger. Under rubriken Visa kan du välja om du vill att Åtgärdsfönstret ska visas eller inte. Skapa och spara en ny sida. Klicka på Arkiv - Nytt och därefter Tom sida i Åtgärdsfönstret eller på Spara sidan genom att klicka på Arkiv och Spara som Döp sidan till index (i rutan filnamn). Startsidan på en webbplats ska heta index.htm. Alla sidor på internet måste ha filnamnet.htm eller.html. Viktigt! Namn på mappar och filer får aldrig innehålla: mellanslag, å, ä, ö, tecken som punkt, kommatecken, frågetecken, utropstecken mm. Se till att index.htm sparas ner i en mapp i Din hemkatalog. Mappen kan du ha döpt till t.ex hemsida. Spara OBS! Börja ALLTID med att spara den tomma sidan så att Du bestämmer var det du skapar ska hamna! Tänk på att ge sidan ett namn som syns på webben så att den inte heter "ny sida" när någon gör ett bokmärke till sidan. Gör så här: Välj Arkiv - Egenskaper och fönstret nedan öppnas. Vid Rubrik så skriv vad du vill att det ska stå överst i det blå fältet på din webbsida. ( Se bild nästa sida) 2

Planera Planeringen är A och O. Det man missat i den får man ofta extra mycket jobb med. Enklast är att göra en skiss på papper... Fundera på: - vem ska sidan rikta sej till? Elever? Föräldrar? Kollegor? - vilken info ska sidan ha? Allmän info? Daglig? Vecko? - hur snabb ska den vara? Stora bilder eller många bilder /sida = tar lång tid med modem - ska det finnas många undersidor? Skillnad i mappstrukturen - ska vi ha många bilder med? Storleken är viktig! - ska eleverna vara delaktiga? Varför inte? - hur ofta ska sidan uppdateras? Dagligen? Veckovis? Månadvis? Rita! Gör ett rutmönster, fundera i "tabeller". Diskutera med en kompis! Lyssna av.. 3

Tabeller Använd alltid tabell. Varför? Då vet man att det man lagt på hemsidan visas ungefär som man tänkt sig. Helt säker kan man aldrig vara eftersom det är webbläsaren (t.ex. Explorer) hos den som tittar som avgör hur det ser ut. Men med tabeller blir det ganska nära det man själv ser när man gjort färdigt. Innan du skapar tabellen ska du ha tänkt hur många celler du ska ha och hur de ska vara placerade. Klar? OK, börja med att klicka på eller välj Tabell - Infoga - Tabell. Tryck och dra så det ser ut så här: När du markerat 4 rutor, 2 x 2, släpper du musen. Tabellen med fyra celler är skapad. Hela tabellen eller enskild cell går att formatera, färglägga, skriva i, eller placera bild i. Om du klickar med höger musknapp i tabellen och väljer Tabellegenskaper visas denna ruta (Om du bara vill ändra i en cell väljer du Cellegenskaper istället.): Här kan du formatera tabellen efter eget önskemål. Testa vad som händer när du ändrar. Klicka på Verkställ så ser du förändringen utan att stänga fönstret. 4

För att se hur det kommer att se ut när det är färdigt, klicka på fliken Förhandsgranskning längst ner. När du vill göra ändringar återgår du till Design-läge Vill du inte att tabellen ska synas? Välj storlek 0 på kantlinjer. (Titta gärna på andra sidor på nätet så ser du att de flesta är uppbyggda i tabeller) Om du vill att det ska bli "mer luft" i tabellen så skriv in t.ex 3 vid cellutfyllnad. Här ser du överst: normal i mitten: med 3 i cellutfyllnad och nederst: 3 vid cellavstånd häst katt hund häst katt hund häst katt hund Att få större mellanrum: Genom att markera 2 celler och högerklicka välj: sammanfoga celler så får man större utrymmen. Översta tabellen är original. Undre är ändrad på olika sätt. OBS! När man väl börjat så är det svårt att få tillbaks det eller göra ändringar efteråt. Börja uppe i vänstra hörnet /vänstra sidan och gå mot höger/nedåt. Om du ska infoga rader/tabeller i en befintlig tabell så kan man enkelt högerklicka i tabellen och får då in rader/kolumner men vill man styra bättre t.ex om man vill ha raden ovan/under markering så välj Tabell - Infoga - Rader/Kolumner 5

Skriva Nu börjar vi med arbetet med sidan. Vi kommer att gå igenom hur man: Skapar tabeller Skriver text Lägger till bilder Infogar en bakgrund Skapar länkar Detta är de grundläggande momenten för att skapa en hemsida men Frontpage innehåller många finesser för den som vill mer. Du kan justera bilder och text på samma sätt som i Word. Testa att t.ex. centrera, högerjustera, ändra storlek och färg. Att tänka på: Typsnitt Storlek Exempel: På nätet är det enklare att läsa utan serifer. Använd t.ex Arial, Tahoma, Verdana eller Comic Sans. (Times New Roman är med serifer men funkar också.) Alla datorer har inte samma typsnitt så använder du ett ovanligt så ser det inte kul ut hos den som saknar det. Inte för litet, det är svårt att läsa då! Arial 8 Arial 10 Arial 12 Tahoma 8 Tahoma 10 Tahoma 12 Verdana 8 Verdana 10 Verdana 12 Comic Sans 8 Comic Sans 10 Comic Sans 12 Times New Roman 8 Times New Roman 8 Times New Roman 8 Bakgrund på sidan Klicka med höger musknapp någonstans på sidan Välj Sidegenskaper Välj fliken Formatering Nu kan du välja mellan att använda en bild som bakgrund (Klicka på Bläddra för att hitta bilden) eller ge bakgrunden en färg. Testa! Om du vill ha en bild som bakgrund så titta i Photoshop Elements-manualen. 6

Skapa länkar Länk till befintlig sida på din sajt. Markera den text som ska länkas. Klicka därefter på ikonen Infoga hyperlänk.leta upp sidan du vill länka till och dubbelklicka på filen. Sökvägen till filen hamnar då i adressfältet, se bild Se till att du är i rätt mapp. Har du flera sidor öppna så finns sidorna lättillgängliga när du får upp fönstret för att välja väg. Ex: Här ser du att flera fönster är öppna. Länk till webbsida på internet Markera den text som ska länkas. Klicka därefter på ikonen Infoga hyperlänk. I adressrutan skriver du in sidans URL. Är det Google du hänvisar till skriver du http://www.google.com (Se vid adress). Du kan också kopiera adressen på Internet och klistra in den i fältet för adress. 7

E-maillänk För att göra en e-postlänk gör som tidigare, markera texten, klicka på länkknappen och rutan längst ner för E-postadress. I rutan som kommer upp fyller du i din e-postadress. Lägg märke till att det står mailto: före din adress. Testa dina länkar i Förhandsgranska eller Explorer (Kom ihåg att uppdatera om du använder Explorer) 8

Mappstruktur Sk Enkel struktur för en enkel sida Spara din index-fil i en mapp som heter t.ex hemsida. Just själva mappen publiceras inte. I mappen sparar du bilder och eventuella undersidor. Allt i samma mapp. Ex: Mappen förskola Startsidan är index.htm (Här är också en kopia som kallas indexback.htm) Undersidor är forskolor.htm och kart.htm. Karta.jpg är en bild liksom forskola.jpg Struktur för större sajter Vi tänker så här. Det finns en första sida, en undersida med adresser och sedan finns det en undermapp med undersidor för olika klasser Första sidan är en sida för C-spåret. Mappen kallar vi 6-9c. Första sidan i den heter index.htm. Här lägger vi också en enkel gemensam sida: adress.htm I mappen 6-9c skapar vi också en mapp som vi döper till 6c. I den mappen lägger vi sedan en första sida som heter index.htm. Så här ser det ut. Bilder kan man välja att lägga alla i mappen bilder eller lägga dem i den mapp de tillhör. I mappen 6c kan vi sedan spara elevarbeten osv. Det är smart att spara ner dem i ännu en mapp. Denna struktur kan byggas ut nästan hur mycket som helst och kontroll finns. Vill man kan t.ex en person ha rättighet till 6-9c och en annan till 6c. 9

Planera Bestäm text, bilder och vilka länkar du ska ha med Rita upp hur du vill ha det. Förarbete Börja med att skapa en mapp i din hemkatalog. I denna ska alla filer som tillhör sidan ligga. Mappnamn: å,ä,ö, mellanslag, skiljetecken får ej finnas med. Kombatibilitet Tyvärr fungerar inte Front Page-skapade sidor i alla webbläsare. För att få det att funka i så många som möjligt måste man göra några inställningar. OBS! Detta måste göras på varje dator Du sitter vid! Hemma som i skolan...gör så här: Välj Verktyg - Sidor (Sidalternativ) - och fliken Redigering. I rutan Webbläsare ska det stå Både Internet Explorer och Navigator. I rutan Webbläsarfunktioner ska det stå 4.0 Webbläsare och senare. I rutan Servrar ska det stå Egen Ny sida Skapa en ny tom sida att redigera. Börja med att spara sidan. Välj Arkiv och Spara som och leta upp din mapp i din katalog (H). Spara sedan med jämna mellanrum genom att klicka på Spara-knappen. Förstasidan döps till index. Övriga fritt men aldrig å,ä,ö, mellanslag eller skiljetecken. Tabell Använd alltid tabell. Varför? Då vet man att det man lagt på hemsidan visas ungefär som man tänkt sig. Helt säker kan man aldrig vara eftersom det är webbläsaren (t.ex. Explorer) hos den som tittar som avgör hur det ser ut. Men med tabeller blir det ganska nära det man själv ser när man gjort färdigt. Innan du skapar tabellen ska du ha tänkt hur många celler du ska ha och hur de ska vara placerade. Klar? OK, börja med att klicka på eller välj Tabell - Infoga - Tabell. Text Bild Skriv in texten. Lämpliga format för www kan vara Arial, Tahoma, Verdana, Comic Sans. Ändra teckensnitt, storlek, stil och textfärg. Klicka på bildknappen, välj och bestäm storlek. Bilder får du från digitalkamera, scanner, rita själv, program eller från internet. Tänk på copyrighten. Hämtar bilder från internet gör du genom att högerklicka på bilden och välja Spara bild som... Spara bilden i samma mapp som du har dina hemsidefiler i. Tänk på läsbarheten Bildstorlek:max 20-25 kb om det är flera på en sida. -Använd tabeller för att få sakerna på "rätt" plats. Länk till fil eller webbsida Maillänk Markera ordet eller bilden du vill göra till en länk. Klicka på länkknappen och skriv in adressen till länken som du vill använda. Använd högerknappen eller trycka Ctrl+C för att kopiera en adress på internet och klistra sedan in den i länkrutan genom att trycka Ctrl+V Markera namnet som du vill göra en maillänk till. Klicka på länkknappen och knappen för e-postadress. Skriv in adressen du vill använda. Tänk på "färskvaran"! Vem står för sidan du länkar till? Ta bort en länk: markerar ordet, klicka på länk och knappen Ta bort länk Bakgrund Bläddra I menyn Format ändrar du bakgrund till din sida. Du kan välja en bild eller en färg som bakgrund. För att se hur sidan ser ut på internet kan du klicka på Förhandsgranska i webbläsare Tips -korta enkla filnamn gör det lättare vid ändringar Om ett filnamn ändras måste du ändra på minst två ställen. Dels i namnet men även i alla länkar På varje sida ska finnas -tillbakalänk -sidansvariges namn och e-post -ansvarig utgivare: skolchef (rektor) namn och e-post -skapandedatum och/eller uppdaterad datum Tips! Skapa en text som du kopierar över till övriga sidor 10