Manual för visionutv.net Redigera

Transkript

1 Manual för visionutv.net Redigera Version 2.0 Visionutveckling 2004

2 Innehåll: 1 Om Redigera Bakgrund Hur Redigera är uppbyggt Vad är? 4 2 Inloggning 6 3 Nyheter i Redigera Funktionsknappar Språk-funktion Statistik 7 4 Huvudfunktioner Sida Nyhet Bilder Statistik 11 5 Extra funktioner Språk Pop-up Bildsida 14 6 Utökad html Formatering av text Länkar Listor Tabeller 17 Visionutveckling

3 1 Om Redigera Redigera är till för dig som har en webbsida och vill kunna uppdatera den när det passar dig, snabbt, enkelt och kostnadseffektivt. Den här lathunden har vi tagit fram för att du lättare ska kunna hitta alla funktioner i början när du inte är van. 1.1 Bakgrund När vi för några år sedan började producera webbsidor åt kunder märkte vi ett behov av att kunna uppdatera texter och bilder utan att behöva blanda in en webbdesigner varje gång. Eftersom vi har turen att ha duktiga programmerare i huset togs det fram en prototyp som via en webbsida kan hantera information i en databas. Funktionerna utökades och på den vägen är det. 1.2 Hur Redigera är uppbyggt Redigera är uppbyggt som en webbsida med tre olika ramar. På en webbsida fungerar ramar så att man kan klicka på en länk i en del av webbsidan och ändå ha kvar en annan del av sidan. Knapprad Startsidan Sidstruktur När du gör en ändring i texterna, laddar upp en bild eller ny sida, så skickas informationen till en databas. När en besökare går in på din webbsida, hämtas denna information på nytt varje gång och kan därför alltid se de senaste uppdateringarna du sparat i Redigera Sidstruktur På ramen längst till vänster finns en lista på samtliga webbsidor du har på din egen sida. Alla dessa är länkade till redigeringssidan som du kommer till när du klickar på dem. Ikoner som kan visas framför eller efter en sida: - Huvudsida - Undersidor - Sida med fler än ett språk Visionutveckling

4 1.2.2 Knappar På den översta ramen finns knappar för de olika huvudfunktionerna, håll muspekaren över för att få upp fler val. (Innehåll varierar beroende på version av Redigera.) Startsida På startsidan visas information om de sidor och nyheter som inte är publicerade, samt alla nyheter som är aktuella. Under Opublicerade nyheter finns en lista över alla nyheter som är inlagda men inte publicerade, oavsett datum. För att publicera eller redigera dessa klickar man på den nyhet man vill ändra och kommer då till redigeringsläget. Under Opublicerade sidor finns en lista på de sidor som inte är upplagda men inte publicerade. För att redigera och publicera klickar man på den sida man vill ändra. Under Aktuella nyheter finns en lista med de nyheter som är aktuella och publicerade. För att redigera eller ta bort en aktuell nyhet, klicka på den och gör dina ändringar. När nyhetens tom-datum är passerat flyttas nyheten automatiskt till Arkiverade nyheter, som du når från startsidan. 1.3 Vad är? Huvudsida En huvudsida är en sida som är överst i hierarkin, dvs. på den översta nivån. Exempel på sådana kan vara Om Företaget, Kontakt, Startsida mm Undersida En undersida är en sida som ligger i nivån under en huvudsida eller en annan undersida. Exempel på relation mellan undersida och huvudsida kan vara: Visionutveckling

5 Insekter (Huvudsida) Fjärilar (Undersida) Fläckiga (Undersida) osv Länk En länk är en text (eller bild) som är klickbar och som vid klick öppnar en ny sida med information. En länk kan öppna en sida inom webbplatsen eller öppna en extern sida, t ex Meta-taggar Meta-tagg kallar man de ord och koder som används för att hjälpa sökmotorerna för att indexera din sida. Sidtitel är den text som syns överst på sidan (denna kan du inte själv ändra om din sida använder ramar). Keywords ska bestå av ca 20 ord som är relaterade med innehållet på sidan. Osynliga för en vanlig besökare. Description ska vara en beskrivning på ca 2 meningar (max 100 ord) som beskriver innehållet på sidan. Osynlig för en vanlig besökare. Visionutveckling

6 2 Inloggning För att logga in i Redigera skriver du nedanstående adress i adressfältet i webbläsaren: Du loggar in med ditt tilldelade användarnamn och lösenord. Var extra noggrann med små och stora bokstäver. Glöm inte att logga ut om du använder en publik dator. Om du klickar i rutan framför Låt min inloggning vara beständig, så behöver du inte logga in nästa gång utan kommer då direkt till Redigera. Visionutveckling

7 3 Nyheter i Redigera 2.0 I Redigera 2.0 har en hel del arbete gjorts för att göra arbetet med att administrera en webbsida enklare. 3.1 Funktionsknappar För att underlätta administreringen av innehållet på webbsidan, har vi tagit fram ett antal knappar med användbara funktioner som du kan använda istället för att skriva html-kod. Med hjälp av knapparna kan du: Klicka på knappen för att göra radbrytning Lägga in externa länkar till andra webbsidor Länka in uppladdade dokument 3.2 Språk-funktion Istället för att sköta flera webbplatser på olika språk har vi tagit fram en funktion som gör att du kan administrera alla era webbplaster på samma grundstruktur men med olika innehåll. 3.3 Statistik I Redigera kan man nu få ut statistik om hur många som besökt webbsidan, vilka sidor som är mest populära, hur besökarna är spridda på dygnet och mycket mer. Visionutveckling

8 4 Huvudfunktioner Till huvudfunktioner räknas de funktioner som är standard i varje implementering av Redigera och som är nödvändiga för enkel redigering. 4.1 Sida En sida innehåller information som finns på varje webbsida och innehåller i Redigera fyra delar; Innehåll, Placering, Meta-taggar och Publicering. Innehåll Denna del innehåller fält som är synliga för besökare på webbsidan. I fältet Rubrik meny fyller du i texten som ska fungera som länkad text i menyn. I fältet Rubrik fyller du i rubriken/överskriften och i fältet Text skriver du din text. Använd gärna knapparna intill: - Radbrytning - Lägger in en extern länk (t ex - Länkar till ett dokument För att lägga in en bild, klicka på knappen Hämta bild och välj den bild du vill placera. (Du måste ha laddat upp bilden innan, se avsnitt 3.3.) Placering Här väljer du under vilken sida du vill placera din sida, om den ska vara en bildsida samt vilken nivå den ska ha. Visionutveckling

9 Meta-taggar Här kan du ändra dina meta-taggar för varje sida. Publicering Här kan du fylla i datum, författare och om sidan skall publiceras senare Ny sida 1. För att göra en ny sida klickar du på knappen Nytt i den övre knappraden, välj Sida. 2. Fyll i all information och klicka på Spara Redigera sida 1. Klicka på sidan i sidstrukturen till vänster. Redigeringssidan kommer då att öppna sig i mitten av sidan. 2. Gör ändringarna och klicka på Spara Redigera annat språk Om din sida har stöd för funktionen flera språk, så kan du använda följande funktion: En sida med ett annat språk måste ha en sida med grundspråket* att utgå från. För att göra en motsvarande sida med något annat språk gör så här: 1. Klicka på knappen Funktioner och välj Språk. Lägg till ett nytt språk. 2. Gå in på sidan som du vill ha en motsvarighet till på ett annat språk. 3. Välj språk i rull-menyn överst på sidan, fyll i informationen och klicka på Spara. * Det språk som automatiskt används på alla sidor Ta bort sida 1. Välj sidan i menyträdet till vänster. 2. Klicka på knappen Radera. 3. Du får en förfrågan om du är säker på att du vill radera informationen, klicka på ja. Om sidan har undersidor får du ta bort dessa först. Visionutveckling

10 4.2 Nyhet Nyheter är tillfällig information som inte ligger i nivåer som sidor, utan vars publicering styrs av datum. I vissa fall kan bilder infogas i nyheten. När du ska publicera en nyhet är det viktigt att fylla i till- och från datum. Det gör du enklast genom att klicka på pilen bredvid rutan. Då får du upp en box där du klickar på det datum som är aktuellt Ny nyhet 1. Klicka på knappen Nytt och välj Nyhet. 2. Fyll i all information. 3. Fyll i det datum nyheten ska publiceras Gäller fr.o.m. och fyll i det datum du vill att nyheten skall tas bort T.o.m.. Obs! Om du fyller i ett fr.om.-datum framåt i tiden och klickar i Publiceras ej så kommer nyheten inte att publiceras förrän du själv publicerar den, trots att datumet passerats Redigera nyhet 1. Gå till Startsidan och välj en nyhet i listan under Aktuella nyheter eller välj en i listan under Ej publicerade nyheter. 2. Gör dina ändringar och klicka på Spara. Visionutveckling

11 4.2.3 Ta bort nyhet 1. Gå till Startsidan och välj en nyhet i listan under Aktuella nyheter eller välj en i listan under Ej publicerade nyheter. 2. Klicka på knappen Radera. Du får då frågan om du är säker på att du vill radera informationen, klicka på ja. 4.3 Bilder En bild som ska publiceras på webben inte behöver ha högre upplösning än 72 pixlar per tum (samma som en skärm har). Ju högre upplösning och storlek, desto längre tid tar det för bilden att visas Ladda upp bilder och dokument Gå in knappen Ladda upp i knappraden överst. Klicka på knappen Bläddra och leta upp bilden från din dator, cd-skiva eller dyl. Klicka på Spara. Gå till den sidan där du vill placera bilden, klicka på Hämta bild, välj bilden och klicka på Spara Lägga in en bild i en text Du kan, istället för att använda Bild-fältet, lägga in en bild direkt i en text. Du måste dock alltid ladda upp bilden först. Skriv såhär: <img src= img/[filnamn] > Om vill ha en bild som heter blomma.jpg skriver du alltså: <img src= img/blomma.jpg > 4.4 Statistik Översikt Under sidan Översikt kan du se totalt antal träffar på sidan, samt totalt antal unika träffar. Antalet unika träffar anger hur många olika besökare som besökt sidan. Visionutveckling

12 Dygnsstatistik Här hittar man även ett diagram över träffar på webbsidan under 24 tim. Man kan välja att visa staplar från webbplatsens första dag (Alltid), sedan 1 månad tillbaka, sedan 1 vecka tillbaka, och sedan igår. Håll muspekaren över stapeln för att se hur många träffar webbplatsen hade under respektive timme Sidstatistik Här visas de mest besökta sidorna i fallande ordning. Man kan välja att visa de populäraste sidorna från webbplatsens första dag (Alltid), sedan 1 månad tillbaka, sedan 1 vecka tillbaka, och sedan igår. Nyheter markeras med en *. Klicka på rubriken för att se de unika besökarna till varje sida, och hur många gånger varje enskild besökare varit inne på den aktuella sidan. Klickar du på ip-adressen kan du se den exakta tidpunkten för varje besök. Visionutveckling

13 5 Extra funktioner Det finns en del funktioner som inte är standard i Redigera och dessa förklaras nedan. 5.1 Språk Om du själv vill hantera vilka språk din webbsida ska ha, så gör du det enkelt genom att klicka på Funktioner och Språk. Där kan du ta bort och lägga till språk Lägg till språk Under rubriken Lägg till nytt språk, skriv namnet på det språket du vill lägga in. Klicka på Spara Radera språk Under rubriken Upplagda språk, klicka för det språket du vill ta bort, klicka på knappen Radera. Om det finns sidor som är upplagda under det aktuella språket så måste dessa tas bort först. 5.2 Pop-up Pop-upfunktionen är ett fönster som öppnar sig varje gång man går in på din webbsida om man har funktionen aktiverad. Se exemplet här intill: Innehållet i rutan måste alltid vara en bild. För att få en bild att hamna i popup-fönstret döper du den till popup[filnamn].[filtyp], ex. popupnr01.jpg. Ladda sedan upp den som en vanlig bild via Ladda upp. Bilden kommer automatiskt att hamna i fönstret. Vill man ha flera bilder som varieras automatiskt, laddar man upp fler bilder, ex. popupnr2.jpg. För att byta ut en bild laddar man bara upp en bild med samma namn, så byts den automatiskt ut. Visionutveckling

14 För att aktivera funktionen gör du såhär: 1. Ladda upp bilden. 2. Välj vilken storlek du vill ha på fönstret. (Snyggast blir det om fönstret och bilden har samma storlek) 3. Välj en passande titel på pop-upen. 4. Kryssa i Aktivera funktion och klicka på Spara. 5.3 Bildsida En bildsida är en sida där du samlar flera bilder och där du också har möjlighet att lägga in en bildtext under varje bild samt en sk alt-text. För att göra en bildsida gör du på samma sätt som när du gör en vanlig ny sida; 1. Gör en ny sida, kryssa för rutan intill Bildsida. Spara. 2. Du kan välja att ladda upp dina bilder innan du fortsätter eller efter. 3. Gör nu en undersida för varje bild du har. Klicka i bildsida även på dessa. Fyll i text och rubrik, och skriv in vilken bild i Bild-fältet. Spara. Du kan nu ändra och redigera dessa sidor precis som vanliga sidor, med denna skillnaden: Rubrik = Valfri text Rubrik = Alt-text Text = Bildtext Visionutveckling

15 6 Utökad html Ibland vill man kunna göra ändringar och justeringar utöver det vanliga och då kan använda sig av dessa enklare html-koder. Fler finner du i Redigera, under Hjälp. 6.1 Formatering av text Radbrytning För att göra en radbrytning i en text skriver du <br> i texten. Vill man ha ett större mellanrum mellan två stycken kan man skriva in två st, <br><br> Exempel: Text på rad 1<br> Text på rad 2<br><br> Text på rad 3<br> Resultat: Text på rad 1 Text på rad 2 Text på rad Fet och kursiv stil på text För att göra en text fet skriver man <b>"texten man vill göra fet"</b>. Resultat: "Texten man vill göra fet" En liknande tagg är <i>, den använder man när man skall göra en text kursiv. Ex. <i>"texten man vill göra kursiv"</i>. Resultat: "Texten man vill göra kursiv" Storlek på text För att ändra typsnittets storlek skriver man ex. <font size="2">"texten man vill ange typsnitt och storlek på"</font> Färg på text För att ändra färg på texten skriver man en sk font-tagg, ex: <font color="red">"texten man vill ändra färg på"</font> Resultat: "Texten man vill ändra färg på" Exempel på fler färger du kan använda på samma sätt: aqua blue grey lime navy purple silver white black fuchsia green maroon olive red teal yellow Visionutveckling

16 6.2 Länkar Externa länkar För att göra en länk till en annan webbsida krävs att man har den fullständiga adressen till sidan, t.ex. Det enklaste sättet att göra en länk till en annan webbsida är att klicka på knappen: Då öppnas ett nytt fönster, där finns två fält som du ska fylla i med texten som skall vara klickbar samt adressen till webbsidan. Klicka på Lägg till. Det går också bra att skriva koden för en länk direkt i Text-rutan och koden för en länk till t.ex. Visionutvecklings hemsida ser ut så här: <a href=" här så kommer du till Visionutvecklings hemsida!</a> Vill man att sidan skall öppnas i ett nytt fönster, måste man lägga till följande i länk-taggen. <a href=" target="_blank">klicka här så kommer du till Visionutvecklings hemsida!</a> E-postlänk På en webbsida kan man länka till en e-postadress, och när besökaren klickar på länken startas automatiskt e-postprogrammet på besökarens dator, och den adressen man angett i länken hamnar direkt i Till-fältet. Så här kan koden se ut för detta: <a href="mailto:namn@epostadress.se">skicka e-post!</a> Denna funktion kan t.ex vara lämplig att ha på en kontakt-sida där man har e-postadresser till anställda eller liknande. 6.3 Listor För att göra en lista i en text kan man skriva följande: <ul> <li>punkt ett i listan</li> <li>punkt två i listan</li> <li>punkt tre i listan</li> </ul> Resultat: Punkt ett i listan Punkt två i listan Punkt tre i listan Visionutveckling

17 6.4 Tabeller Här nedan ser du en enkel bild över hur en tabell är uppbyggd. <table> En tabell börjar alltid med <table>. Inom tecknet < och > skriver man hur man vill att tabellen ska se ut. Tex. <table border="0" cellspacing="1" cellpadding="2"> Border - höjden på kanten. Ex border= 1 cellspacing - mellanrummet mellan cellerna. Ex cellspacing= 1 cellpadding - mellanrummet mellan insidan på cellväggen och innehållet i cellen. T ex cellpadding= 1 bgcolor - bakgrundsfärgen på tabellen. Ex bgcolor= white width - tabellens bredd. Anges i antal pixlar. Ex width= 1 height - tabellens höjd. Anges i antal pixlar. Ex height= 1 När en tabell är slut, skriver man alltid </table> <tr> Varje ny rad i en tabell anger man genom att skriva <tr>. När man gör en ny rad måste man först avsluta raden genom att skriva </tr>. Därefter anger man att ny rad börjar, dvs <tr>. Visionutveckling

18 <td> Man anger att man gör en cell genom att skriva <td>, och avslutar med att skriva </td>. Mellan dessa två taggar skriver man i den text eller bild man vill ha i cellen. T ex: <table border="1" cellpadding="1" cellspacing="1"> <tr> <td>min text</td> <td>min bild</td> </tr> </table> min text min bild bgcolor - bakgrundsfärgen på cellen. width - cellens bredd. Anges i antal pixlar. height - cellens höjd. Anges i antal pixlar T ex: <table border="1" cellpadding="1" cellspacing="1"> <tr> <td width="50">min text</td> <td width="100" bgcolor="green">min bild</td> </tr> </table> min text min bild Visionutveckling