Steg 5 Webbsidor One.com File manager Web editor Windows 7/8 Dec 14 Liljedalsdata.se Liljedalsdata Steg 5 W78 Sida 1
Inledning Förkunskaper Steg 1, 2, 3 och 4. Innan du är mogen för att lägga ut en sida på nätet finns mycket att fundera över. Om de personer du vänder dig till vet var de ska hitta sidan och den bara är till för att lämna information eller samla in information är din uppgift inte särkilt svår. Om du däremot vänder dig till okända personer som du vill ska hitta din sida med hjälp av ett sökord och en sökmotor står du inför en betydligt svårare uppgift. Steg 6 behandlar det problemet medan denna kurs bara tar upp hur du ska producera din sida. För att kunna skaffa plats på ett webbhotell måste du ha en epostadress. Det kan t.ex. vara en gmailadress. Den kallas kontaktadress i adresslistan sist i häftet. Anteckna din egen e-postadress på rad 2. Kursen utgår från att du skaffar dig en plats (en domän) på ett webbhotell och betalar för den tid du behöver för kursen eller lånar en plats som innehåller filer. Kostnaden hos one.com, som användes här, är 300:- som en engångskostnad plus 12:- per månad. Om du behöver platsen i framtiden måste du välja namn för din domän med omsorg. Om du funderar på att starta ett företag som heter cykelexperten kanske du väljer att kalla din domän cykelexperten.se eller som i denna kurs liljedalsdata.se. Det är inte säkert att du får det namn du har tänkt dig. Det kan finnas någon annan som valt namnet tidigare. När du fått ett domännamn kan du också få epostadresser med anknytning till namnet t.ex. info@cykelexperten.se. Namnet på min domän är liljedalsdata.se som jag använder. Jag har också en arbetsdomän studyit.eu som visas i kursen. Du kommer förmodligen att ha samma domän i båda fallen. Anteckna ditt domännamn på rad 4 och 6. För att logga in till din domän använder du kontaktadressen + ett påhittat lösenord. Rad 7. Den här kursen visar hur du kan ge information och hur du, under vissa förutsättningar, kan få information från en användare. Kursen är också en bra grund om du har höga krav på din webbplats t.ex. om du ska starta en webbutik eller om du vill att information från en användare automatiskt ska sparas i ett register i din dator. Liljedalsdata Steg 5 W78 Sida 2
Kursen handlar om att hantera datorer och program. Innehållet i texter och bilder är ointressant. Ingen finslipning har skett. Det blir ditt problem när du börjar jobba med din egen verksamhet. Börja med att undersöka startsidan och olika länkar till Liljedalsdata.se. Gör mappen C:\Användare\Lisa\Mina dokument\webbsidor Kopiera videoomsvlekt.avi från Liljedalsdata.se/Hämta kurshäfte och video steg 4-6 till mappen Webbsidor på din dator.. Den adress till en webbsida som man skriver i rutan överst när man kommit in i webbläsaren kallas URL-adress. Boka plats på ett webbhotell Starta Internet Explorer och gå in på one.com Beställ billigaste alternativet 15:- per månad (5 GB lagringsutrymme brukar räcka) och att du vill ha adressen/domänen liljedalsdata.se. Denna adress finns på rad 3 i adresslistan. Anteckna din egen domänadress på rad 4. Du får faktura via din e-post. (Rad 2) Du kan inte använda din plats innan du betalat fakturan. Vi antar nu att du fått klart med din plats och vi använder den nu för att fortsätta. Liljedalsdata Steg 5 W78 Sida 3
Webbsidor i HTML För att skapa en sida i grundform använder man ett program som är skrivet i HTML-kod. Klicka Start/Alla Program/Tillbehör/Anteckningar eller sök Anteckningar och fäst till aktivitetsfältet. Anteckningar är en s.k. texteditor/ordbehandlare som producerar rena textfiler, vilket innebär att det inte finns styrtecken som det finns i en wordfil Skriv: <HTML> <H1>Välkommen</H1> </HTML> När man skriver HTML-kod skriver man kommandon inom s.k. taggar. Här startar vi med en tagg som talar om att här kommer HTML-kod. Därefter kommer en tagg som talar om att Här kommer en rubrik. Därefter avslutas Rubriken. Därefter avslutas HTML-koden. Spara nu detta i C:\Användare\Lisa\Mina Dokument\Webbsidor som startsida. Stäng Anteckningar och starta utforskaren. Liljedalsdata Steg 5 W78 Sida 4
För att få samma utseende på skärmen som här ska du kontrollera att du har inställningen Detaljerad lista om du klickar på knappen Flera alternativ längst till höger. Klicka Ordna/ Mapp och sökalternativ/visning och ta bort bocken framför Dölj filnamnstillägg för kända filtyper. Klicka <Använd i alla mappar> Klicka OK. I Windows 8 klickar du Visa och ser till att Detaljerad lista och Filtyp är markerade. Du ska nu kunna konstatera att startsida fått namnet startsida.txt. Kopiera webbsidan till ditt webbhotell Starta Internet Explorer. Gå in på one.com Klicka på Kontrollpanelen och logga in med kontaktadress + påhittat lösenord (rad 7). Klicka på File manager. Liljedalsdata Steg 5 W78 Sida 5
I skärmens överkant kan du välja mellan File manager, Web editor och webhotellets övriga alternativ. Nollställning av File manager och Web editor Gå in på File manager Radera alla filer genom att markera en fil och klicka radera tills alla filer är raderade. Gå in på Web editor och radera alla sidor Liljedalsdata Steg 5 W78 Sida 6
När alla sidor är raderade ska Web editor se ut så här. Klicka <Ladda upp > Leta upp startsida.txt och dubbelklicka på filen Du kan tänka att du nu hamnat i webbhotellets utforskare Markera filen och döp om den till index.html Logga ut från File manager. Du har nu konstaterat att webbhotellets utforskare fungerar ungefär som utforskaren på din egen dator. Du ser vilka filer som finns, du kan ta bort filer och ändra namn på filer. Logga ut längst upp på sidan. Kontrollera webbsidan via URL-adressen Gå in på http:/studyit.eu (din adress som finns på rad 4 adresslistan) Liljedalsdata Steg 5 W78 Sida 7
Ändra din webbsida Kontrollera att texten Välkommen visas. Den fil på webbhotellet som har namnet index.html ska vara skriven i HTML och visas när någon går in på URL-adressen. Gå in på One.com och logga in på Kontrollpanelen. Starta File manager, markera index.html och klicka redigera. Ändra sidan så att texten blir: Välkommen till min hemsida. Liljedalsdata Steg 5 W78 Sida 8
Klicka Spara. Logga ut från one.com och gå in via URL-adressen motsvarande Liljedalsdata.se. (Rad 4) Kontrollera att sidan är ändrad. Det är möjligt att ändringen inte sker omedelbart. Detta beror på att webbläsarens cacheminne inte hinner med. Du kan försöka med <Ctrl>+F5, vänta en stund eller gå in på http://letsguide.it/browser/wide/cache Sammanfattning För att kunna lägga ut en webbsida på ett webbhotell kan du skapa du sidan i HTML-kod på din egen dator. Du kopierar sidan till ditt webbhotell. Du kan kopiera med hjälp av Kontrollpanelen/File Manager hos One.com. Du ser till att startsidan har namnet index.html. Du kan ändra namn på filer, ta bort filer och ändra utseende på en sida med hjälp av Kontrollpanelen/File Manager. När du anger URL-adressen till din domän i Internet Explorer visas den sida som heter index.html. Detta gäller alla datorer över hela världen. Liljedalsdata Steg 5 W78 Sida 9
Webbsidor i Word Stinas stickade kläder Nollställ File manager och Web editor. Starta Word och gör dokumentet Spara som stinas.docx i C:\Användare\Lisa\Mina dokument \Webbsidor Klicka Spara som, välj filtyp Webbsida och spara också som stinas.htm Liljedalsdata Steg 5 W78 Sida 10
Skapa länkar Testa länkar Gör dokumentet och spara som stinabesk.docx i C:\Användare\Lisa\Mina dokument \Webbsidor Klicka Spara som, välj filtyp Webbsida och spara också som stinabesk.htm Öppna stinas.docx klicka Spara som och spara igen som stinas.htm. Skriv över den gamla filen. Markera Verksamhet och öppettider Klicka Infoga/Hyperlänk Leta upp stinabesk.htm och dubbelklicka på filen Klicka Spara och Stäng Öppna stinas.htm Klicka på Verksamhet och öppettider. Du ska nu få upp beskrivningen Kopiera till File manager Logga in på One.com och fortsätt till File manager Liljedalsdata Steg 5 W78 Sida 11
Kopiera stinas.htm och stinabesk.htm till File manager. Markera stinas.htm och klicka Redigera. Du kan bara ha en fil markerad när du ska Redigera eller Döpa om en fil i File manager. Du ser nu att även stinas.htm är ett program skrivet i HTML. Stäng redigering Ändra namn på stinas.htm till index.html Logga ut Testa Webbsidorna med URL-adressen och kontrollera att beskrivningen dyker upp när du klickar på Verksamhet och öppettider. OK Kompassen program 2014 Starta Word och gör dokumentet OK Kompassen program 2014 Datum Aktivitet Ansvarig 4 april Vårfest Johan Svensson 25 april Vårtävling Jens Aronsson 3 september Höstfest Johan Svensson 29 september Hösttävling Jens Aronsson Klicka Tabell och välj 3 kolumner och 5 rader Spara dokumentet som program2014.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som och välj filtyp Webbsida och spara som program2014.htm i samma mapp. Klicka Nytt Liljedalsdata Steg 5 W78 Sida 12
Skriv dokumentet i Word och spara som vårfest.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som och välj filtyp Webbsida och spara som vårfest.htm i samma mapp. Klicka Nytt Skriv dokumentet i Word och spara som vårtävling.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som och välj filtyp Webbsida och spara som vårtävling.htm i samma mapp. Liljedalsdata Steg 5 W78 Sida 13
Klicka Nytt Skriv dokumentet i Word och spara som höstfest.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som och välj filtyp Webbsida och spara som höstfest.htm i samma mapp. Klicka Nytt Skriv dokumentet i Word och spara som hösttävling.docx i C:\Användare\Lisa\Mina dokument\webbsidor Liljedalsdata Steg 5 W78 Sida 14
Klicka Spara som och välj filtyp Webbsida och spara som hösttävling.htm i samma mapp. Klicka Nytt Skapa länkar till programmet Testa länkarna Öppna program2014.docx Klicka Spara som och välj filtyp websida. Spara också som program2014.htm och ersätt filen. Markera raden med Vårfest, ett ord i taget och skapa tre länkar genom att klicka Infoga/Hyperlänk till Vårfest.htm. Markera raden med Vårtävling, ett ord i taget och skapa tre länkar genom att klicka Infoga/Hyperlänk till Vårtävling.htm. Markera raden med Höstfest, ett ord i taget och skapa tre länkar genom att klicka Infoga/Hyperlänk till Höstfest.htm. Markera raden med Hösttävling, ett ord i taget och skapa tre länkar genom att klicka Infoga/Hyperlänk till Hösttävling.htm. Klicka Officeknappen Spara och stäng Öppna program2014.htm Testa så att ett klick på raderna visar beskrivningen av arrangemanget. Kopiera webbplatsen till File manager Logga in till One.com Nollställ File manager och Web editor Gå in på File manager och kopiera samtliga 5.htm-filer till webbhotellet. Döp om program2014.htm till index.html Logga ut Testa så att webbplatsen fungerar när du går in på URL-adressen. Liljedalsdata Steg 5 W78 Sida 15
Bilder på en webbsida Starta Utforskaren och radera samtliga filer i C:\Användare\Mina dokument\lisa\webbsidor. Starta Word och gör följande dokument Snart är sommaren här Vi har kanonpriser på båtfärger under vecka 14 Välkommen in till färgspecialisten Spara dokumentet som reklam.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som och spara också som reklam.htm i samma mapp Klicka Nytt Skapa följande dokument: Bilden är tagen i nordvästra hörnet av Vänern Båten är en Havsfidra av 1973 års modell. Liljedalsdata Steg 5 W78 Sida 16
Skapa länkar Testa länkar Spara som reklambesk.docx i C:\Användare\Lisa\Mina dokument\webbsidor. Klicka Spara som och spara också som reklambesk.htm i samma mapp Öppna reklam.docx Klicka Spara som och välj filtyp webbsida. Spara som reklam.htm och ersätt filen. Markera bilden och klicka Infoga/Hyperlänk till reklambesk.htm Klicka Officeknappen Spara och Stäng Öppna reklam.htm Testa så att ett klick på bilden visar båtbeskrivningen Kopiera webbplatsen till File manager Öppna utforskaren Förutom reklam.htm och reklambesk.htm har nu mappen reklam-filer skapats. Om du nu öppnar den kan du konstatera att det finns 5 filer i mappen. Du kommer inte kunna kopiera mappen till File manager utan du måste kopiera de 5 filerna. Logga in till One.com och File manager. Kopiera de 7 filerna som finns i C:\Användare\Lisa\Mina dokument\webbsidor till File manager. Skapa en ny tom mapp reklam-filer genom att klicka <Skapa> Mapp i skärmens överkant. Kalla mappen reklam-filer Liljedalsdata Steg 5 W78 Sida 17
Markera den första av filerna som ska ligga i mappen. Klicka Flytta Makera mappen reklam-filer och klicka <Flytta objektet till den här mappen> Återgå till rooten geom att klicka på domännamnet i skärmens överkant. Fortsätt så att filerna som låg i mappen på din dator finns i mappen i File manager. Liljedalsdata Steg 5 W78 Sida 18
Ändra namn på reklam.htm till index.html Testa webbplatsen med hjälp av URL-adressen Svensklektion Starta utforskaren och radera filerna i mappen Webbsidor Nollställ File manager och Web editor. Starta Word och gör följande dokument. Spara som svenska.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som, välj filtyp websida och spara också som svenska.htm Klicka Nytt och gör följande dokument. Kurshäfte videolektion Du behöver Debut video capture och en dator Spara som häftesv.docx i C:\Användare\Lisa\Mina dokument\webbsidor Klicka Spara som, välj filtyp websida och spara också som häftesv.htm Liljedalsdata Steg 5 W78 Sida 19
Skapa länkar Testa länkar Öppna svenska.docx och spara som svenska.htm. skriv över den gamla filen. Markera Kurshäfte och klicka Infoga/Hyperlänk. Dubbelklicka på häftesv.htm Markera Video Klicka Infoga/Hyperlänk och dubbelklicka på videoomsvlekt.avi Klicka Spara och Stäng Öppna svenska.htm Klicka Kurshäfte Kurshäftet ska nu dyka upp Som användare kan du högerklicka på Kurshäfte och spara det på din egen dator. Klicka Video Windows media player ska nu starta och en video som visar hur man kan göra en svensklektion visas. Kopiera webbplatse till File manager Logga in på One.com Nollställ File manager och Web editor Kopiera htm-filerna och videoomsvenska.avi till File manager Det tar ca 3 min att kopiera videon. Du ser förloppet på skärmen Ändra namn på svenska.htm till index.html Logga ut från One.com Testa webbplatsen med hjälp av URL-adressen Liljedalsdata Steg 5 W78 Sida 20
Webbsidor i Web editor Startsida Logga in på One.com Se till att File manager och Web editor är nollställda. Välj tomma mallar Dubbelklicka på den första mallen Ge sidan namnet Start. Här ska du nu designa sidan Start I sidans överkant finns nu knapparna <Redigera sida> och <Redigera mall> Det som finns på flera sidor på webbplatsen är mall och det som är specifikt för en sida är sida. Liljedalsdata Steg 5 W78 Sida 21
Se till att <Redigera mall> är markerad Markera den övre delen av sidan. Radera det som finns i mallen genom att klicka papperskorgen. Klicka Komponenter och dra textverktyget till den övre delen. Bredda rektangeln så att den täcker övre delen av sidan. Klicka gröna knappen <Text> Klicka <Redigera> Skriv KLÄDBUTIKEN och markera texten Liljedalsdata Steg 5 W78 Sida 22
Centrera texten med hjälp av knappen Centrera till vänster. Välj storlek 80, fetstil (B) och färg röd genom att klicka Textfärg <ABC> och klicka på en lämplig färg. Om du får fram färgade områden behöver du inte fundera på det. Dessa kommer inte att synas. Klicka <Redigera sida> överst på skärmen Radera det som finns under strecket genom att markera rektanglar och klicka papperskorgen. Obs att raden längst ned hör till mallen. Klicka Komponenter Dra Textverktyget till området under strecket och bredda rektangeln över sidans bredd. Klicka gröna Textknappen och Redigera Skriv: Vi säljer: Tshirt Keps Tennisskor Liljedalsdata Steg 5 W78 Sida 23
Undersida Tshirt Markera alla 4 raderna Välj storlek 20, fetstil B och textfärg svart genom att dra markeringen längst ned Klicka <Spara> Klicka <Publicera> och klicka <Publicera> i dialogrutan Klicka sidor och lilla triangen till höger om start. Välj Lägg till undersida Kalla sidan Tshirt Liljedalsdata Steg 5 W78 Sida 24
Markera textdelen under strecket och radera genom att klicka på papperskorgen. Klicka Komponenter Dra Textverktyget till området och bredda rektangeln Klicka gröna Textknappen och <Redigera> Skriv. Undersida Keps Tshirten finns i vitt och violett Storlekar S, M, L och XL Markera båda textraderna Välj storlek 20 Klicka Textfärg och välj en svart färg genom att dra strecket till svart. Klicka <Spara> Klicka <Publicera> och klicka <Publicera> i dialogrutan. Klicka Sidor och på den lilla triangeln til höger om Start. Klicka Lägg till undersida och kalla sidan Keps Liljedalsdata Steg 5 W78 Sida 25
Undersida Tennisskor Markera textdelen och radera genom att klicka på papperskorgen. Klicka Komponenter Dra Textverktyget till textområdet och bredda rektangeln Klicka gröna Textknappen och <Redigera> Skriv. Kepsen finns i rött och svart Storlekar S, M, L och XL Markera raderna Välj storlek 20 och fetstil B Välj Textfärg svart Klicka <Spara> Klicka <Publicera> och <Publicera> i dialogrutan Klicka Sidor och triangel till höger om Start Välj Lägg till undersida Liljedalsdata Steg 5 W78 Sida 26
Kalla sidan Tennisskor Markera textdelen och radera genom att klicka på papperskorgen. Klicka Komponenter Dra Textverktyget till textområdet och bredda rektangeln Klicka Textknappen och <Redigera> Skriv. Tennisskor finns i vitt Storlekar 38-45 Markera de båda raderna Välj storlek 20 Klicka Textfärg och markera svart färg. Klicka <Spara> Klicka <Publicera> och <Publicera> i dialogrutan. Logga ut och testa webbplatsen KLÄDBUTIKEN från URL-adressen. Du ska kunna hoppa mellan sidorna genom att klicka på sidans namn. En startsida med dokument, bilder och bildspel Radera filerna i C:\Användare\Lisa\Mina dokument\webbsidor Nollställ File manager och Web editor Starta Word och skapa följande dokument Liljedalsdata Steg 5 W78 Sida 27
Spara dokummentet som Midsommar.docx i C:\Användare\Lisa\Mina dokument\webbsidor Se till att du har 4 foton på din dator som du kan hämta. Logga in på One.com och starta web editor. Välj Tomma mallar och dubbelklicka på den första Skapa sidan Start klicka <Redigera mall> och radera texten i det övre området. Klicka komponenter och dra textverktyget till det övre området. Bredda rektangeln. Klicka textknappen, redigera och skriv Midsommarfirande. Markera texten välj centrera, storlek 60 fetstil B och textfärg grön. Klicka <Redigera sidan> och ta bort det som finns under strecket. Obs sista raden som hör till mallen. Klicka komponenter, välj dokumentverktyget och dra det till området under strecket. Liljedalsdata Steg 5 W78 Sida 28
Klicka <Ladda upp filer från dator> Klicka <Välj filer från dator>. Du ska nu komma in på din egen dator. Om du misslyckas försök att klicka på knappens underkant Dubbelklicka på midsommar.docx Klicka Ladda upp Klicka Förhandsgranska och bredda rutan för dokumentet Klicka komponenter och dra bildverktyget till området under dokumentet. Klicka <Ladda upp filer från dator> Klicka <Välj filer på din dator> Leta upp en av bilderna och dubbelklicka på den. Klicka <Ladda upp> Liljedalsdata Steg 5 W78 Sida 29
Öka storleken så att det ser bra ut Klicka komponenter och dra verktyget bildspel till området under bilden. Klicka <Ladda upp filer från dator> Klicka <Välj filer på din dator> Dubbelklicka på de återstående bilderna och klicka <Koppla>. Klicka <Ladda upp filer från dator> Markera alla Liljedalsdata Steg 5 W78 Sida 30
Klicka <Infoga bilder> Bildspelet ska nu fungera Markera bildspelet och rätta till storleken. Klicka <Spara> Klicka <Publicera> och <Publicera> i dialogrutan. Logga ut och kontrollera din webbsida med URL-adressen. Liljedalsdata Steg 5 W78 Sida 31
FTP-program Om du har många eller stora filer som ska kopieras till File manager kanske du behöver ett FTP-program. Gå in på Google och sök på filezilla. Ladda ned programmet. Du får ett mail och kan bestämma dig för ett lösenord. Du får också uppgift om ett portnummer. Logga in till din domän och starta Filezillla. Liljedalsdata Steg 5 W78 Sida 32
Ange host motsvarande ftp.liljedalsdata.se, Username motsvarande Liljedalsdata.se, ditt lösenord och ditt portnummer. Klicka <Quickconnect> Nu ska de filer du har i File manager dyka upp till höger och din dator till vänster. Markerade filer på din dator kopieras till File manager. Skaffa en epostadress i anslutning till din domän Som nämnts tidigare kan du alltså skaffa en epostadress i anslutning till din domän t.ex. info@cykelexperten.se. Gå in på One.com. Logga in till kontrollpanelen. Klicka Mail administration. Liljedalsdata Steg 5 W78 Sida 33
Klicka Ny mailadress Ange första delen av den epostadress du vill ha och hitta på lösenord för din epostadress. Logga ut. Anteckna e-postadressen och lösenord på rad 10 i adresslistan. Liljedalsdata Steg 5 W78 Sida 34
För att installera adressen i Thunderbird kan du använda Steg 4 eller en guide som du kan hitta på supportavdelningen hos one.com. Du ska nu få ett mail. Testa med att skicka ett mail till din egen adress. Avsluta Internet Explorer. Hur användaren kan lämna information Att samla in information från olika användare är en viktig användning av internet. Om du t.ex.vill att turister ska kunna boka stuga via nätet kan du ordna detta på ett ganska enkelt sätt som vi nu ska testa. Om du vill ha en mera avancerad form av bokningar kan du t.ex. anlita ett webbhotell som stödjer access och lägga ut formulär och register på webbhotellet. Steg 9, 10 och special 2. Klicka Alla program/tillbehör/anteckningar eller ikonen i aktivitetsfältet.. Starta Anteckningar och skriv in följande HTML-kod. Du kan ändra storleken på texten genom att klicka Redigera /Tecken eller Format/Tecken. Du kan tjäna tid på att kopiera en programsnutt på samma sätt som i Word. Du måste kunna använda ett epostprogram för att läsa mail som kommer till e-postadressen och programmet måste finnas på den domän och websida som anges på 6:e raden. Denna HTML-kod gäller för e-postadress som du fått genom one.com och som är installerad i Thunderbird (Steg 4). Liljedalsdata Steg 5 W78 Sida 35
Spara koden som stugbokning i C:\Användare\Lisa\Mina Dokument\Webbsidor. Starta One.com. Logga in på Kontrollpanelen/File Manager. Kopiera stugbokning.txt till File manager. Ändra namn från stugbokning.txt till index.html. Kontrollera via din URL-adress Liljedalsdata Steg 5 W78 Sida 36
Antag att du är turist och vill boka en stuga. Gå in på motsvarande liljedalsdata.se Kontrollera att din webbplats fungerar Logga in på din domän rad 4. Mata in uppgifter enligt bilden. Klicka Skicka Liljedalsdata Steg 5 W78 Sida 37
Kontrollera att du får ett mail med uppgifterna. Liljedalsdata Steg 5 W78 Sida 38