Mappar och filer för webbsidor

Mappar och filer för webbsidor I de4a dokument illustreras det hur du kan arbeta med mappar och filer, då du skapar webbsidor och ska publicera dem för uppgi=erna. Det visas också hur du skickar in redovisningar i uppgi=erna. Först beskrivs hur du allmänt bör organisera mapparna och filerna och hur du bör göra i laboraconer och uppgi= 1. Sedan beskrivs hur du kan lägga upp det för uppgi= 2 och framåt. Linnéuniversitetet 1ME101 Webbdesign 15hp senast uppdaterad 2014-08- 23 1

Organisering av mappar Då du arbetar med övningar och uppgi=er har du först filerna på din egen dator, för a4 lä4 kunna testa, medan webbsidorna utvecklas. Du ska sedan publicera webbsidorna i Web Publishing i FirstClass. Då måste strukturen med mappar vara likadan, för a4 länkar och referenser Cll bilder ska fungera. Jag rekommenderar därför a4 du skapar en mapp på din egen dator och i den skapar en sådan struktur som du sedan ska ha i Web Publishing i FirstClass. På din egen dator skapar du alltså en mapp som motsvarar Web Publishing. Du kan kalla den vad du vill jag har här valt a4 kalla den webbsidor. I den mappen skapar du sedan en annan mapp som motsvarar den lösenordsskyddade mapp i Web Publishing som du skapade i laboracon 1. Här är det vikcgt a4 mappen har samma namn i Web Publishing som på din dator. Jag kallar den här dold. 2

Filer i mapparna Det som sedan ska ligga i den öppna delen (utan lösenordsskydd) i Web Publishing lägger du direkt i mappen webbsidor på din dator och det som ska vara lösenordsskydat lägger du i mappen dold. Jag har nedan lagt in e4 html- dokument och två bildfiler direkt i mappen webbsidor och e4 annat html- dokument och bildfil i mappen dold. Strukturen kan också visas på nedanastående sä4: 3

Publicera i Web Publishing i FirstClass Öppna Web Publishing i FirstClass. Öppna också mappen webbsidor på din dator och lägg dess fönster incll fönstret för Web Publishing, så a4 du enkelt kommer åt båda fönstren. Fly4a över de filer som finns i webbsidor, genom a4 markera dem och dra dem Cll symbolen för Web Publishing. Släpp filerna då symbolen är markerad. Fönster i FirstClass Fönster för mapp på din dator Filerna hamnar i den vänstra kolumnen 4

Publicera filer i mappen dold Klicka på mappen dold (i FirstClass), så a4 den öppnas. Innehållet i mappen visas i den högra kolumnen, och Cll a4 börja med är det tomt. Dra filerna från mappen dold på din dator Cll FirstClass. AnCngen drar du dem Cll symbolen dold i den vänstra kolumnen eller Cll den undre rutan i den högra kolumnen. Fönster i FirstClass Fönster för mapp på din dator Filerna hamnar i den högra kolumnen. Filnamnen ligger Cll höger, så om du scrollar Cll höger eller gör fönstret större, så syns de. 5

Om det inte fungerar a4 dra filerna Om det inte fungerar a4 dra filerna från fönstret på din dator Cll fönstret i FirstClass, så kan du istället göra på följande sä4. Filer direkt i Web Publishing Öppna mappen Web Publishing och klicka på den lilla symbolen för Web Publishing. Välj sedan kommandot Ladda upp i Arkiv- menyn och peka ut den fil du vill ladda upp. Filer i en mapp (t.ex. mappen dold) Klicka på mappen för a4 öppna den. Välj sedan kommandot Ladda upp i Arkiv- menyn och peka ut den fil du vill ladda upp. 6

Byta ut en fil Vill du byta ut en fil i FirstClass, måste du först ta bort den gamla filen. Du kan ta bort en fil, genom a4 högerklicka på den och välja kommandot Ta bort. Om filen ligger i en mapp (t.ex. dold), så försvinner den omedelbart. Ligger filen i den vänstra halvan av fönstret, dvs direkt i Web Publishing, så markeras den med en liten soptunna. Filen är dock bor4agen och visas inte längre ifall du stänger och sedan öppnar fönstret igen. Du kan också ta bort en fil genom a4 först klicka på den, för a4 markera den, och sedan trycka på tangenten Delete eller backsteg. Men om du klickar på en fil i den vänstra halvan av fönstret dyker det först upp e4 fönster för nedladdning av filen. Där klickar du då bara på Avbryt, så kan du sedan ta bort filen. Då du tagit bort den gamla filen, kan du sedan lägga upp nya filer, på samma sä4 som visats i föregående bilder. 7

Ti4a på filerna i webbläsaren Öppna webbläsaren och skriv in url Cll webbsidan i adressfältet. Till sidan i den öppna delen blir det h4p://www.fc.lnu.se/~anvid/ anvid är di4 eget användarid Cll FirstClass. Om filen heter index.htm, så räcker det med ovanstående adress. Annars tas också filnamnet med i slutet av url:en, t.ex. h4p://www.fc.lnu.se/~anvid/abc.htm Till sidan i mappen dold blir url:en h4p://www.fc.lnu.se/~anvid/dold/sida.htm Om behörigheten för mappen dold är korrekt inställd (enligt laboracon 1), lägger servern sedan in Login i url:en och du får en inloggningsruta, där du skriver in dina inloggningskoder för a4 få fram sidan. Har du dock redan gjort det Cdigare, så är du redan inloggad och kommer direkt Cll sidan. Du är sedan inloggad Clls du avslutar webbläsaren. 8

RelaCva adresser i länkar Om du skapar en länk mellan sidorna inom webbplatsen, använder du en relacv adress istället för den fullständiga url:en. I en länk från index.htm Cll sida.htm i mappen dold blir adressen dold/sida.htm 9

Validering och kontrollera a4 sidorna fungerar Valideringslänk I uppgi= 1 ska du validera HTML- koden på dina sidor. Det gör du på det sä4 som beskrivs i laboracon 2. På sidorna i den öppna delen (dvs de som ligger direkt i Web Publishing) ska du också lägga in en länk Cll validatorn, så som det beskrivs i laboracon 2. Då du sedan publicerat dina sidor i FirstClass, öppnar du dem i webbläsaren och kontrollerar a4 valideringslänken fungerar. Adressen i webbläsarens adressfält måste börja med h@p och inte h4ps, om det ska fungera. På sidorna i den dolda mappen har du ingen valideringslänk, e=ersom validatorn inte kan komma åt filerna där (validatorn kan ju inte lösenordet). Men validera sidorna från din dator, innan du publicerar dem, så a4 du är säker på a4 koden är korrekt. De4a gör du i alla uppgiaer i kursen. VikCgt Kontrollera a@ allcng fungerar Då du publicerat sidorna, öppnar du dem i webbläsaren och kontrollerar a4 allcng fungerar, så a4 alla bilder visas och länkarna fungerar. 10

Redovisning av uppgi= 1 Namn och url i listan i FirstClass Öppna kursmappen i FirstClass och undermappen för den gemensamma webbsidan. Där öppnar du filen Home Page. I listan i Home Page lägger du in di4 namn och url Cll startsidan (dvs den sida som du har direkt i Web Publishing). Har du kallat den filen index.htm, så blir det t.ex. (se bild 8 i de4a dokument) Kalle Kanin, h4p://www.fc.lnu.se/~anvid/ Stäng sedan fönstret genom a4 klicka på Spara- knappen högst upp Cll vänster. Gå sedan Cll kursens webbplats och ta fram sidan "Studentsidor". Kontrollera a4 di4 namn och url kommit in och a4 länken fungerar. 11

Redovisning av uppgi= 2 uppgi= 6 Mappar för uppgi=erna I uppgi= 2 och de följande uppgi=erna ska du skapa flera webbsidor. Dessa ska du lägga i den lösenordskyddade mappen. Jag rekommenderar a4 du där lägger in en ny mapp för varje ny uppgi=. Så då skapar du det också så på din dator. Dessa två dokument är det du eventuellt la upp i uppgi= 1 Lägg inte in något blanktecken mellan uppgi= och siffran i mapparnas namn, utan skriv ihop det som e4 ord. 12

Redovisning av uppgi= 2 uppgi= 6 Mappen för webbsidorna Alla filer som hör Cll webbsidorna för uppgi= 2, lägger du i mappen uppgio2. Är det många webbsidor, kan det vara bra a4 organisera olika avdelningar av webbplatsen i olika mappar. I uppgi=en blir det dock inte så väldigt många sidor, så du kan ha alla html- dokument direkt i mappen. Däremot kan det vara bra a4 ha en separat undermapp för bilder. Så följande är e4 förslag på hur du organiserar det i mappen. Jag rekommenderar a4 du kallar startsidan index.htm. De andra sidorna ger du olika namn, som beskriver innehåll eller funkcon, t.ex. kontakt.htm. Undvik åäö och blanktecken i filnamnen! 13

Redovisning av uppgi= 2 uppgi= 6 Publicera mappen Öppna Web Publishing i FirstClass och klicka på mappen dold, så a4 dess innehåll visas i högra halvan av fönstret. Ta fram fönstret för dina webbsidor på din dator. Sedan kan du dra hela mappen för uppgi=en Cll FirstClass. Fönster i FirstClass Fönster för mapp på din dator Mappen hamnar i den övre halvan av fönstret. Om du dubbelklickar på den, öppnas den i e4 ny4 fönster och du ser innehållet. 14

Redovisning av uppgi= 2 uppgi= 6 Kontrollera a4 det fungerar Öppna i webbläsaren Om du kallat startsidan index.htm, blir url:en h4p://www.fc.lnu.se/~anvid/dold/uppgi=2/ Gå igenom hela webbplatsen och kontrollera a4 bilder visas, a4 länkar fungerar och a4 sidorna ser ut som de ska. Vill du byta ut en fil, öppnar du mappen för uppgi=en och tar bort filen (se bild 7 i de4a dokument). Sedan kan du dra över en ny fil Cll fönstret. 15

Redovisning av uppgi= 2 uppgi= 6 Länk på startsidan i din porpolio På startsidan i din porpolio som du skapade i uppgi= 1, ska du lägga in en länk Cll startsidan för uppgi=2, så a4 vi enkelt kan komma dit, då redovisningen ska granskas. Det är alltså den fil som du har som startsida direkt i Web Publishing som ska uppdateras. Det gör du genom a4 först uppdatera sidan på din dator. Sedan tar du bort den gamla sidan i Web Publishing och lägger in den nya uppdaterade sidan. 16

Redovisning av uppgi= 2 uppgi= 6 Rapport I uppgi= 2 och framåt ska du också skriva en rapport. Vad som ska finnas med i rapporten står i uppgi=sbeskrivningen. Rapporten ska endast bestå av text och skickas in i e4 meddelande i mappen för uppgi=srapporten i FirstClass. 2. Öppna mappen för uppgi=ens rapport 1. Öppna kursmappen i FirstClass 3. Skapa e4 ny4 meddelande 5. Klicka på Sänd- knappen och kontrollera a4 di4 meddelande kom in i listan i mappen. 4. Skriv in Ctel i rutan ärende och klistra in rapportens text i meddelanderutan. Kontrollera a4 texten ser OK ut. Justera den annars. Rapporten får inte innehålla några bilder och meddelandet får inte ha några bilagor. 17