Liljedalsdata Steg 5 Mac Sida 1
Steg 5
Webbsidor
One.com File manager Web editor LibreOffice Mac OS X
Juni –17 Liljedalsdata.se
Liljedalsdata Steg 5 Mac Sida 2
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 3 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 4 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.
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.
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 5 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 6 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 7 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 8 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 9 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 10 Ä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 11 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 12 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 13 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 14
Testa länken i nätet
Starta Safari
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 URL- adressen.
Lektion i svenska
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 15 Spara som larinst.html i Hårddisk/Användare /Jan/Dokument/LOWSvlekt
Skapa länkar
Ö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 16 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 17 Skapa undersida 3 på nivå 2
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.
Skapa länkar
Ö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 18 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 19
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 20 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 21 Vi säljer:
Tshirt Keps Tennisskor
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.
