Steg 5 Webbsidor One.com File manager Web editor LibreOffice Mac OS X Juni 17 Liljedalsdata.se Liljedalsdata Steg 5 Mac 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. I denna kurs motsvaras den av lisaandersson@studyit.eu Denna adress finns på rad 1 i adresslistan sist i detta häfte. Anteckna din egen e-postadress på rad 2. Kopiera också svlekt.mov till Hårddisk/Användare/Lisa/Dokument från sidan där du hämtat adresslistan. Se också till att du har 4 foton på din dator. 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. Den här kursen visar hur du kan ge information och hur du, under vissa förutsättningar, kan få in 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. Den adress till en webbsida som man skriver i rutan överst när man kommit in i webbläsaren kallas URL-adress. Liljedalsdata Steg 5 Mac Sida 2
Om du lånar en webbplats som innehåller filer måste du hålla ordning på vilka dessa är så att du inte ändrar dessa. Du måste också se till att ingen av dessa filer heter index.html. Du behöver gratisprogrammet Notepad för Mac. Gå in på appstore och installera programmet. I kursen förekommer lite HTML-kodning Skapa följande mappar: Hårddisk/Användare/Jan/Dokument/Notepad Hårddisk/Användare/Jan/Dokument/Start Hårddisk/Användare/Jan/Dokument/LOWLink Hårddisk/Användare/Jan/Dokument/LOWStina Hårddisk/Användare/Jan/Dokument/LOWSvlekt Hårddisk/Användare/Jan/Dokument/LOWBild Hårddisk/Användare/Jan/Dokument/LOWKomp Boka plats på ett webbhotell Starta Safari och gå in på one.com Om du använder min länk http://one.me/svafzbyg när du beställer ditt abonnemang får du 50 kr rabatt och jag får 50 kr för att kunna behålla denna utbildning gratis. Liljedalsdata Steg 5 Mac Sida 3
Webbsidor Beställ billigaste alternativet 12:- per månad (5 GB lagringsutrymme brukar räcka) och att du vill ha adressen/domänen motsvarande liljedalsdata.se. Denna adress finns på rad 3 i adresslistan sist i häftet. Anteckna din egen domänadress på rad 4. Du får faktura, lösenord och andra uppgifter via din e-post. 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. Den här kursen är ett försök att kombinera program så att man kan använda Mac och LibreOffice för produktion av olika webbsidor. Vi kommer att testa tre olika sätt att producera webbsidor: Skapa ett htlm-dokument genom att skriva htlm-kod med hjälp av en texteditor. Använda ordbehandlingsprogram (Word, OpenOffice writer) som utvecklingsverktyg. Använda Web editor hos one.com som utvecklingsverktyg. Skapa ett html-dokument i Notepad Starta Notepad. Notepad är en s.k. texteditor som ger en text utan styrtecken och kan bl.a. användas för att skriva programkod. Skriv:: <! DOCTYPE html> <html> <head> </head> <body> </body> </html> Spara texten i Hårddisk\Användare\Lisa\Dokument/Notepad som htmlmall.txt Liljedalsdata Steg 5 Mac Sida 4
Duplicera mallen och kalla kopian startsida.txt Komplettera så att ditt första htmldokument ser ut så här: <! DOCTYPE html> <html> <head> </head> <body> <p>välkommen</p> <//body> </html> Spara som startsida.txt i Hårddisk\Användare\Lisa\Dokument/Start Kontrollera din hårddisk. Du ser innehållet i en mapp genom att markera den. Kopiera dokumentet till ditt webbhotell Varje gång du ska starta ett nytt projekt måste du rensa webbläsaren Safari, File manager och i vissa fall Web editor på ditt webbhotell. Starta Safari. Klicka Safari/Rensa historik/rensa historik Liljedalsdata Steg 5 Mac Sida 5
Gå in på one.com Klicka på Kontrollpanelen och logga in med ditt domännamn (rad 4) och lösenord som du fått från One.com. Om du nu kommit in till kontrollpanelen vet du att lösenordet fungerar. Klicka Hemsideprogram/Web editor och kontrollera att inga påbörjade projekt finns. När alla sidor är raderade ska Web editor se ut så här. Liljedalsdata Steg 5 Mac Sida 6
Klicka File manager och kontrollera att inga filer finns. Gör denna kontroll varje gång du börjar ett nytt projekt. Klicka <Ladda upp>. Dubbelklicka på startsida.txt Du kan tänka att du nu hamnat i webbhotellets utforskare I skärmens överkant kan du navigera mellan meny, File manager och Hemsideprogram/Web editor. Som du ser kan du döpa om, kopiera, radera, flytta och redigera filer. Vissa kommandon fungerar bara om en enda fil är markerad Ändra namn på startsida.txt till index.html. Logga ut från one.com och ange domänadressen som URL-adress. Rad 4 i adresslistan. Resultatet är inte perfekt men detta visar grundstrukturen för ett html-dokument. Liljedalsdata Steg 5 Mac Sida 7
När du eller någon användare anger URL-addressen till din domän visas alltså den fil på ditt webbhotell som heter index.html. Filen måste innehålla HTML-kod. Skapa ett html-dokument i LibreOffice Writer Rensa Safari och File manager Starta LibreOffice writer. Skriv Välkommen och spara dokumentet som index.html genom att välja filtyp html i skärmens underkant. Spara i Hårddisk/Användare/Jan/ Dokument/Start. Klicka <Use HTML format> Kontrollera hårddisken. Liljedalsdata Steg 5 Mac Sida 8
Logga in till One.com, starta File manager. Klicka <Ladda upp> och dubbelklicka på index.html Klicka Redigera Du ser nu att dokumentet förvandlats till HTML-kod. Du kan hitta Välkommen på rad 15. Liljedalsdata Steg 5 Mac Sida 9
Ändra så att det står Välkommen till min hemsida i stället. Klicka Spara, stäng Redigering och logga ut. Kontrollera sidan med URL-adressen Du har nu konstaterat att webbhotellets utforskare fungerar ungefär som kartan över hårddisken på din egen dator. Du ser vilka filer som finns, du kan ta bort filer och ändra namn på filer. När du sparade startsidan som webbsida förvandlade LibreOffice dokumentet till HTML-kod. Förutsättningen för att en sida ska vara läsbar för en webbläsare är att sidan är skriven i HTML. Om du har kunskaper i HTML kan du skriva en sida direkt i din dator och därefter transportera den till ett webbhotell. Webbsida med länkar Rensa Safari och File manager Skapa dokument Starta LibreOffice Writer och skapa dokumentet: Liljedalsdata Steg 5 Mac Sida 10
Första sidan Länk till andra sidan Klicka så att du får filtyp html och spara dokumentet som index.html i Hårddisk/Användare/Jan/Dokument/LOWLink. Klicka <Use HTML-format> Klicka File/New Skapa också dokumentet: Andra sidan Klicka så att du får filtyp html och spara dokumentet som andra sidan.html i Hårddisk/Användare/Jan/DokumentLOWLink. Skapa länk Öppna index.html i LibreOffice Writer Markera Länk till andra sidan. Klicka Insert/Link Se till att ikonen Internet är markerad Skriv in http://studyit.company/andra sidan.html som URL Kontrollera att det står Länk till andra sidan i fältet för Text Liljedalsdata Steg 5 Mac Sida 11
Klicka Apply Klicka Close Spara och Stäng Testa länken på nätet. Starta safari och gå in på One.com och File manager Ladda upp index.html och andra sidan.html Logga ut och testa länken med URL-adressen. Stinas stickade kläder Rensa Safari och File manager Skapa dokumentet i LibreOffice Writer Spara dokumentet som index.html i Hårddisk/Användare/Dokument/LOWStina Skapa också dokumentet: Liljedalsdata Steg 5 Mac Sida 12
Spara som stinabesk.html i samma mapp Klicka <USE HTML-format> Skapa länk Öppna index,html Markera Verksamhet och öppettider Klicka Insert/ Link Ange http://studyit.company/stinabesk.html som URL och kontrollera att Text är Verksamhet och öppettider. Klicka Apply och Close Klicka Spara Liljedalsdata Steg 5 Mac Sida 13
Testa länken i nätet Starta Safari Lektion i svenska Gå in på One.com och logga in till Webb File Manager Klicka <Ladda upp fil> och ladda upp index.html och stinabesk.html. Logga ut och kontrollera att länken fungerar på nätet när du använder URLadressen. Rensa Safari och File manager Kontrollera att du har filen svlekt.mov till gänglig. Filen finns där du hittade detta kurshäfte. Skapa dokumnent Starta LibreOffice och skapa dokumentet.. Spara som index.html i Hårddisk/Användare/Jan/Dokument/LOWSvlekt Klicka <Use HTML-format> Skapa dokumentet Liljedalsdata Steg 5 Mac Sida 14
Skapa länkar Spara som larinst.html i Hårddisk/Användare /Jan/Dokument/LOWSvlekt Öppna index.html Markera Lärarinstruktion Klicka Insert/Link Kontrollera att Dokument är markerat Skriv http://studyit.company/larinst.html som target och kontrollera att det står Lärarinstruktion som text. Klicka Apply Klicka Close Markera Video Klicka Insert/Link Kontrollera att Internet är markerat. Skriv http://studyit.company/svlekt.mov som URL och kontrollera att det står Video som text. Klicka Apply Liljedalsdata Steg 5 Mac Sida 15
Klicka Close Klicka Spara Testa med hjälp av URL-adressen Starta Safari och gå in på One.com och File Manager Ladda upp index.html, larinst.html och svlekt.mov. När du laddar upp videon tar det en stund men du ser hur uppladdningen sker. Logga ut och kolla med URL-adressen När du klickar på Läraristruktion ska du kunna skriva ut instruktionen med Arkiv/Skriv ut. När du klickar på Video ska Quick time player starta och en video visas. En användare kan spara videon på sin hårddisk Program för OK Kompassen Skapa dokumentet. Skapa rutnät med hjälp av tabellsymbolen som finns på en knapp mitt i övre raden. Klicka more options och välj 3 kolumner och 3 rader. Datum Aktivitet Ansvarig 4 april Vårfest Lars Svensson 5 Maj Vårtävling Peter Larsson Spara som index.html i Hårddisk/Användare/Jan/Dokument/OK Komp Klicka <Use HTLM-format> Skapa undersida 2 på nivå 2 Vårfest Vårfesten äger rum i klubbstugan vid Tallsjön 4 april kl 20.00 Ta med mat och något att dricka Anmäla till Lars Svensson före 2 april Spara som undersida2.html i Hårddisk/Användare/Jan/OK Komp Liljedalsdata Steg 5 Mac Sida 16
Skapa undersida 3 på nivå 2 Skapa länkar Vårtävling Vårtävlingen äger rum i skogen runt Tallsjön 2 maj Första start kl. 8.00 Anmäla till Peter Larsson senast 28 april Spara som undersida3.html i Hårddisk/Användare/Jan/OK Komp Klicka <Use HTLM-format> och stäng. Öppna index.html Markera 4 april och klicka Insert/Hyperlink Skriv http://studyit.company/undersida2.html som URL Kontrollera att 4 april är Text Klicka Apply Klicka Close Gör på samma sätt med Vårfest och Leif Svensson Markera 5 maj ock klicka Link till undersida3.html Gör på samma sätt med vårtävling och Peter Larsson Klicka File Save Testa webbsidan med URL-adressen Webbsida med bilder Rensa Safari och File Manager Skapa dokumentet Liljedalsdata Steg 5 Mac Sida 17
Spara som index.html i Hårddisk/Användare/ Jan/Dokument/LOWBild Klicka <Use HTML-form> Som du ser sparas fotot som en särskild fil på hårddisken Skapa dokumentet Bilden är från norra delen av Vänern Båten är en havsfidra av 1973 års modell Spara som undersida2.html i Hårddisk/Användare/ Jan/Dokument/LOWBild Skapa länkar Öppna index.html Klicka <Use HTML- format> Markera fotot Klicka Insert/Link Skriv som Target motsvarande http://studyit.company/undersida2.html Klicka iconen foto för ar att läsa in det. Kontrollera med URL-adressen När du markerar fotot visas beskrivningen av plats och båt. Liljedalsdata Steg 5 Mac Sida 18
Skapa webbsidor med hjälp av Hemsideprogram/Web editor Logga inpå one.com Kontrollera att File manager är tomt. Starta Hemsideprogram/Web editor. Startpositionen Web editor är ett antal mallar. Leta upp den här mallen. Det som gäller flera sidor är mall och det som gäller en sida är sida. Se till att redigera sida är markerat. Klicka SHARP AND CREATIVE och radera texten genom att klicka papperskorg. Gör på samma sätt med vad som finns över fotot. Kontrollera att redigera mall är markerat. Radera PROFILE och det stora fotot. Klicka Spara. Klicka sidor och kugghjulet till höger om sidan Home och därefter plustecknet och skapa sidan Start. Radera alla sidor utom sidan Start genom att klicka kugghjulet + papperskorg. Liljedalsdata Steg 5 Mac Sida 19
Gör sidan start till startsida genom att klicka kugghjulet/ikonen med i och markera Gör den här sidan till startsida. Klicka Spara. Klicka Komponenter och dra textvektyget till övre delen av sidan eller dubbelklicka på textverktyget. Gör rektankeln bredare. Klicka <Redigera> Skriv KLÄDBUTIKEN och markera texten. Centrera texten med knappen Centrera till vänster. Välj storlek 80 fet text och färg röd genom att klicka Textfärg <ABC>och dra strecket upåtför att få en lämplig färg i rektangeln. Klicka på den färg du vill ha. Klicka redigera sida i skärmens överkant. Klicka Komponenter. Dra textverktyget till området under rubriken eller dubbelklicka på textverktyget och gör rektangeln bredare. Klicka Redigera och skriv: Liljedalsdata Steg 5 Mac Sida 20
Vi säljer: Tshirt Keps Tennisskor Undersida Tshirt Markera alla 4 raderna Välj storlek 20, fetstil B. Klicka <Spara> och <Visa> Klicka <Publich> och klicka <Publich> i dialogrutan Klicka sidor och kugghjul till höger om start. Välj + kalla sidan Tshirt Liljedalsdata Steg 5 Mac Sida 21
Markera textområdet och radera med papperskorg. Klicka Komponenter Dra Textverktyget till området eller dubbelklicka och gör rektangeln bredare.- Klicka <Redigera> Skriv. Undersida Keps Tshirten finns i vitt och rött. Storlekar S, M, L och XL Markera båda raderna Vålj storlek 20 och fetstil. Klicka <Spara> och <Visa> Klicka <Publich> och <Publich> i dialogrutan. Klicka Sidor och kugghjul till höger om Start. Klicka + kalla sidan Keps. Liljedalsdata Steg 5 Mac Sida 22
Undersida Tennisskor Markera texten och radera med papperskorgen. Klicka Komponenter. Dra Textverktyget till textområdet och gör rektangeln bredare. Klicka <Redigera> Skriv:. Kepsen finns i rött och svart Storlekar S, M, L and XL Markera raderna. Välj storlek 20 och fetstil Klicka <Save> and <Show> Klicka <Publich> och <Publich> i dialogrutan Klicka Sidor och kugghjul till höger om start Klicka + Kalla sidan Tennisskor. Liljedalsdata Steg 5 Mac Sida 23
Markera textområdet och radera genom att klicka papperskorg. Klicka Komponenter Dra Textverktyget till textområdet och bredda rektangeln. Klicka <Redigera> Skriv. Tennisskor finns i vitt. Storlekar 38-45 Mark båda raderna Välj storlek 20 och fetstil. Klicka <Save> och <Show> Klicka <Publich> och <Publich> i dialogrutan. Logga ut och testa webbplatsen KLÄDBUTIKEN med URL-adressen. Du ska nu kunna hoppa mellan sidorna genom att klicka på namnet på varje sida. En startsida med dokument, bilder och bildspel Radera filerna i Hårddisk/Användare/Jan/Dokument/LOWBild Skapa dokumentet. Liljedalsdata Steg 5 Mac Sida 24
Spara dokumentet som Midsommar.odt i mappen Hårddisk/Användare /Jan/ Dokument/LOWBild Kontrollers att du har 4 foton i datorn som du kan nå. Du kan hämta foton där du hämtade detta häfte. Logga in till One.com och kolla att Safari, file manager and web editor är rensade. Starta Web Editor Leta upp samma mallen somk tidigare och rensa den. Skapa sidan Start Radera alla andra sidor och gör Start till startsida. Radera allt på startsidan. Klicka komponenter och dra textverktyget till övre området. Bredda området. Klicka Redigera och skriv Midsommarfirande. Markera texten, välj centrerad storlek 60, fetstil och grön färg. Klicka Komponenter och välj dokumentverktyg. Liljedalsdata Steg 5 Mac Sida 25
Klicka <Upload files>/< From computer> Du ska nu se din dator. Dubbelklicka på midsommar.odt Klicka Save. Gör fönstret för dokumentet bredare. Klicka Komponenter och dra bildverktyget till området under dokumentet. Klicka <Upload files>/<from computer> Leta upp en av bilderna och dubbelklicka på den. Klicka Save. Liljedalsdata Steg 5 Mac Sida 26
Öka storleken tills bilden är ok.. Klicka komponenter och dra verktyget slide show till området nedanför bilden. Klicka <Upload files>/<from computer> Dubbelklicka på alla bilderna. Markera alla Liljedalsdata Steg 5 Mac Sida 27
Förhoppningsvis fungerar bildspelet nu Markera bildspelet och justera storleken. Klicka <Save> Klicka <Publich> och <Publich> i dialogrutan. Klicka Show Logga ut och kontrollera med URL-adressen. FTP-program Om du har många eller stora filer som du vill kopiera till File manager kanske du behöver ett FTP-program. Gå in på google och sök på filezilla. Ladda ned programmet. Logga in till din domän och leta upp SSH&FTP. Liljedalsdata Steg 5 Mac Sida 28
Kontrollera att På är markerat för STP-administration. Notera portens nummer. Välj passord till din domän. Du kan använda samma passord varje gång du vill använda File Zilla men du måste skicka ett mail med <Send> i rutan FTP-administration varje gång. Starta File Zilla Skriv värd motsvarande ftp.liljedalsdata.se. Användarnamn motsvarande Liljedalsdata.se, ditt passord och nummer på porten. Liljedalsdata Steg 5 Mac Sida 29
Klicka <Quickconnekt. Din dator är till vänster ochfile manager till höger. Markera filer på din dator, högerklicka och klicka högerpil. Skapa mailadress knuten till din domän Du kan skapa en mailadress som är knuten till din domän t.ex. info@cykelexperten.se Gå in på One.com och logga in till kontrolllpanelen. Klicka Mail adminnistration Klicka Ny mailadfress Skriv första delen av mailadressen som du vill ha och hitta på et lösenord. Logga ut Skriv adressen och lösenordet på rad 6 i adresslistan. Klicka Spara Liljedalsdata Steg 5 Mac Sida 30
Komplettera. Mailprogrammet på One.com I nedre delen av skärmen kan du skriva ditt namn eller lägga in en logga som kommer att avsluta dina mail. Du måste logga ut från kontrollpanelen och logga in till Webbmail för att komma till mailprogrammet Observera att det är din mailadress och lösenordet du bestämt när du skapade mailadressen som du skall använda. (Rad 6) Liljedalsdata Steg 5 Mac Sida 31
Du använder oftast Inkorgen som startpunkt. Här kan du se mail som du fått skriva och skicka mail. Klicka <Skriv mail och testa med att skicka till dig själv. Som du ser kommer signturen som du skrivit att skrivas ut. Klicka Send När mailet som du skickat har kommit kan du se vad det innehåller. Liljedalsdata Steg 5 Mac Sida 32
Detta mailprogram är bra om du inte har så avancerade behov. Om du behöver ett mer avancerat program Beskrives Thunderbird i steg 4. Liljedalsdata Steg 5 Mac Sida 33