Liljedalsdata Steg 5 Mac Sida 1
Steg 5
Webbsidor
One.com File manager Web editor LibreOffice Mac OS X
Juli –18 Liljedalsdata.se
Liljedalsdata Steg 5 Mac Sida 2
Inledning
Förkunskaper Steg 1, 2, 3 och 4.
Operativsystem HighSierra 10.13.6
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 one.comadress i adresslistan sist i häftet. Anteckna din egen e-postadress på rad 2.
Kopiera också svlekt.mov till /Dokument/Diverse/Filmer 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.
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.
Skapa följande mappar:
Liljedalsdata Steg 5 Mac Sida 3 /Dokument/Diverse
/Dokument/Start /Dokument/LOWLink /Dokument/LOWStina /Dokument/LOWSvlekt /Dokument/LOWBild /Dokument/LOWKompass
Rensa dessa mappar om du vill göra om kursen flera gånger
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.
Beställ billigaste alternativet 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.
Liljedalsdata Steg 5 Mac Sida 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.
Webbsidor
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. En texteditor ger en text utan styrtecken. För att inte blanda in för många program använder vi textredigeraren viket inte ger ett perfekt
resultat.
Använda ordbehandlingsprogram (LibreOffice Writer) som utvecklingsverktyg.
Använda Web editor hos one.com som utvecklingsverktyg.
Skapa ett html-dokument i Textredigeraren
StartaTextredigeraren.
Skriv::
<! DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Klicka Arkiv/Spara och spara som htmlmall.rtf i \Dokument\Start Klicka Arkiv/Nytt
Markera texten i htmlmall och klistra in den i ditt tomma dokument Komplettera så att ditt nya dokument ser ut så här:
Liljedalsdata Steg 5 Mac Sida 5 <! DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Välkommen</p>
<//body>
</html>
Klicka Arkiv/Spara och spara som startsida.rtf i \Dokument\Start Kontrollera din hårddisk.
Du ser innehållet i en mapp genom att markera den.
Kopiera dokumentet till ditt webbhotell
Starta Safari.
Klicka Safari/Rensa all historik/Rensa historik Gå in på one.com
Du kan skapa en icon för URL-adressen genom att dra iconen framför adressen till skrivbordet och släppa
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.
Liljedalsdata Steg 5 Mac Sida 6 Klicka <Ladda upp>.
Dubbelklicka på startsida.rtf
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.
Klicka File/New/HTMLdokument
Skriv Välkommen och spara dokumentet som index.html genom att välja File/Spara som filtyp html i skärmens underkant. Spara i / Dokument/Start.
Klicka Save as HTML format Kontrollera hårddisken.
Logga in till One.com, starta File manager.
Rensa File manager
Klicka <Ladda upp> och dubbelklicka på index.html
Liljedalsdata Steg 5 Mac Sida 8 Klicka Redigera
Du ser nu att dokumentet förvandlats till HTML-kod.
Du kan hitta Välkommen på rad 11.
Ä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
Liljedalsdata Steg 5 Mac Sida 9 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.
Det spelar ingen roll om du använder index.htm eller index.html
Webbsidor i Libre office writer
PDF-filer
Om ett dokument som är skrivet i LOW ska läggas ut på nätet väljer man ofta att förvandla .odt-filen till en pdf-fil därför att alla kanske inte kan läsa en .odt-fil och dels för att texten inte ska kunna ändras.
Du sparar som en pdf-fil genom att trycka på pdf-knappen (fjärde knappen i skärmens överkant)
Det spelar ingen roll om sidan heter .htm eller .html
Webbsida med länk
Starta LibreOffice Writer
Klicka File/New/HTLM dokument och gör dokumentet:
Startsida
Undersida 1 Undersida 2 Undersida 3
Klicka File/save as och spara som HTML Dokument med namnet startsida.htm i mappen /Dokument/LOWLink
Undersidor
Klicka File/Nytt/Textdokument
Skapa de tre undersidorna och spara dessa som pdf-filer i Dokument/LOWLink genom att klicka pdfknappen.
Detta är undersida 1 Detta är undersida 2
Liljedalsdata Steg 5 Mac Sida 10 Detta är undersida 3
Kontrollera att du har startsida.htm, undersida1.pdf, undersida2.pdf och undersida3.pdf i mappen /Dokument/LOWLink.
Skapa länkar Starta LOW Klicka File/Open
Öppna startsida.html i Dokumnet/LOWLink Markera Undersida 1
Klicka Insert/Link
Kontrollera att Internet är markerat
Skriv som URL motsvarande http://studyit.company/undersida1.pdf
Markera texten, högerklicka och välj kopiera så att du kan använda kopian senare.
Kontrollera att Text är Undersida 1 Klicka Apply och Close
Fortsätt med Undersida 2 och Undersida 3 Du kan nu använda den kopierade texten
Liljedalsdata Steg 5 Mac Sida 11 Klicka File/Save och stäng
Klicka Use html Starta Safari Rensa historik File manager
Gå in på one.com och file manager Radera alla filer
Ladda upp filen startsida.rtf i LOWLink och döp om den till index.htm Ladda upp de tre pdf-filerna.
Logout från one.com
Testa webbsidan med de tre länkarna genom att gå in på URL-adressen.
Stinas stickade kläder
Starta LOW
Klicka File/New/HTLM Dokument och skapa dokumentet
Liljedalsdata Steg 5 Mac Sida 12 Klicka File save och spara dokumentet som index.html i
/Dokument/LOWStina
Klicka File/New/Textdokument och skapa dokumentet:
Spara som undersida1.pdf i samma mapp Klicka bort varningen
Skapa länk Öppna index,html
Markera Verksamhet och öppettider Klicka Insert/ Link
Ange http://studyit.company/undersida1.pdf som URL och kontrollera att Text är Verksamhet och öppettider.
Klicka Apply och Close
Klicka File/Save och Use HTML
Liljedalsdata Steg 5 Mac Sida 13
Testa länken i nätet
Starta Safari och rensa historik
Gå in på One.com och rensa File Manager
Klicka <Ladda upp fil> och ladda upp index.html och undersida1.pdf
Logga ut och kontrollera att länken fungerar på nätet när du använder URL- adressen.
Lektion i svenska
Kontrollera att du har filen svlekt.mov tillgänglig. Filen finns där du hittade detta kurshäfte.
Skapa dokumnent
Starta LibreOfficeW, klicka file/new/htmldokument och skapa dokumentet..
Klicka File/Save as och spara som index.html i /Dokument/LOWSvlekt Klicka File/New/Textdokument och skapa dokumentet
Liljedalsdata Steg 5 Mac Sida 14 Spara som undersida1.pdf i /Dokument/LOWSvlekt
Skapa länkar
Öppna index.html
Markera Lärarinstruktion Klicka Insert/Link
Kontrollera att Internet är markerat.
Skriv http://studyit.company/undersida1.pdf som target och kontrollera att det står Lärarinstruktion som text.
Klicka Apply och Close Markera Video
Klicka Insert/Link
Skriv http://studyit.company/svlekt.mov som URL och kontrollera att det står Video som text.
Klicka Apply och Close Klicka File/Save
Liljedalsdata Steg 5 Mac Sida 15
Testa med hjälp av URL-adressen
Starta Safari och rensa historik
Ladda upp index.html, undersida1.pdf 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ärarinstruktion ska du kunna skriva ut instruktionen med File/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
Start LOW och klicka File/New/HTML och skapa dokumentet.
Skapa rutnät med hjälp av tabellsymbolen som finns på en knapp mitt i övre raden. Markera 3x3 rutor.
Datum Aktivitet Ansvarig
4 april Vårfest Lars Svensson
5 Maj Vårtävling Peter Larsson
Klicka File/Save och spara som index.html i /Dokument/OKKompassen Skapa undersida1
Klicka File/New/Textdokument
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
Klicka PDF-knappen och spara som undersida1.pdf i /Dokument/LOWKompassen
Liljedalsdata Steg 5 Mac Sida 16 Skapa undersida 2
Vårtävling
Vårtävlingen äger rum i skogen runt Tallsjön 2 maj Första start kl. 8.00
Anmälan till Peter Larsson senast 28 april
Spara som undersida2.pdf i Dokument/LOWKompassen Klicka bort varningen
Skapa länkar
Öppna index.html
Markera 4 april och klicka Insert/Link
Skriv http://studyit.company/undersida1.pdf som URL Kontrollera att 4 april är Text
Click Apply and Close
Gör på samma sätt med Vårfest och Leif Svensson Markera 5 maj ock klicka Link till undersida2.pdfl Gör på samma sätt med vårtävling och Peter Larsson Klicka File/ Save
Klicka HTML
Testa webbsidan med URL-adressen Starta Safari och rensa historik
Gå in på One.com och rensa File manager Ladda upp filerna och testa med URL-adressen
Webbsida med bilder
Starta LOW
Klicka File/New/HTMLdokument
Liljedalsdata Steg 5 Mac Sida 17 Skapa dokumentet
Spara som index.html i /Dokument/LOWBild Skapa dokumentet
Starta LOW
Klicka File/New/Textdokument
Bilden är från norra delen av Vänern Båten är en havsfidra av 1973 års modell
Spara som undersida1.pdf i /Dokument/LOWBild Skapa länkar
Öppna index.html Markera fotot Klicka Insert/Link
Skriv som Target motsvarande http://studyit.company/undersida1.pdf Klicka Apply/Close
Starta Safari och rensa historik
Gå in på One.com och rensa File manager
Liljedalsdata Steg 5 Mac Sida 18 Ladda upp filerna och testa med URL-adressen
När du markerar fotot visas beskrivningen av plats och båt.
Skapa webbsidor med hjälp av Hemsideprogram/Web editor
Logga in på 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.
Liljedalsdata Steg 5 Mac Sida 19 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.
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.
Liljedalsdata Steg 5 Mac Sida 20 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:
Vi säljer:
Tshirt Keps Tennisskor
Liljedalsdata Steg 5 Mac Sida 21 Markera alla 4 raderna
Välj storlek 20, fetstil B.
Klicka <Spara> och <Visa>
Klicka <Publich> och klicka <Publich> i dialogrutan
Undersida Tshirt
Klicka sidor och kugghjul till höger om start.
Välj + kalla sidan Tshirt
Liljedalsdata Steg 5 Mac Sida 22 Markera textområdet och radera med papperskorg.
Klicka Komponenter
Dra Textverktyget till området eller dubbelklicka och gör rektangeln bredare.-
Klicka <Redigera>
Skriv.
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.
Undersida Keps
Klicka Sidor och kugghjul till höger om Start.
Klicka + kalla sidan Keps.
Liljedalsdata Steg 5 Mac Sida 23 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
Undersida Tennisskor
Klicka Sidor och kugghjul till höger om start Klicka +
Kalla sidan Tennisskor.
Liljedalsdata Steg 5 Mac Sida 24 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 25 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 26 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 27 Ö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 28 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 29 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 30 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 31 Komplettera.
I nedre delen av skärmen kan du skriva ditt namn eller lägga in en logga som kommer att avsluta dina mail.
Mailprogrammet på One.com
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 32 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 33 Detta mailprogram är bra om du inte har så avancerade behov. Om du behöver ett mer
avancerat program Beskrives Thunderbird i steg 4.
