Manual för webbredaktörer Februari 2013 1
Innehåll Organisation och innehåll på webben sid 3 Att komma igång sid 4 Skapa en sida sid 6 Redigera sidan sid 7 Publiceringsdatum Spalter på sidan Verktygslådan Långa texter Menyer sid 14 Sökning av sidor och menyer sid 17 Bilder sid 19 Filmer sid 22 Länkar sid 23 Formulär sid 27 Skapa formulär Innehåll i formuläret (flervalslistor, radioknappar, etc) Dolda fält Formulär med kopia till avsändaren sid 41 2
Organisation och innehåll Information om PS Gemensamma aktiviteter, internationella och riksnyheter Kontaktuppgifter förbundet Förbund Administrerar centrala sidor Övergripande behörighet Regionala nyheter och aktiviteter Kontaktuppgifter länsförening Administrerar länets sidor Behörighet för läns- och lokalförening Lokala nyheter och aktiviteter Kontaktuppgifter till lokalförening Länsförening Lokalförening Administrerar lokala sidor Behörighet för läns- och lokalförening 3
Att komma igång Registrera dig som ny användare: www.parkinsonforbundet.se/admin/register Adress till nya webben: www.parkinsonforbundet.se Adress till administrationsverktyget: www.parkinsonforbundet.se/admin/ Meddela kansliet namnet på den nya redaktören. OBS! Användarnamn och lösenord är personliga! 4
Tips! Ha två webbfönster öppna samtidigt. Administrationssidan i det ena och den riktiga sidan i den andra. När du gjort en ändring laddar du bara om sidan för att se hur det blev. 5
Skapa en sida Du skapar en helt ny sida genom att klicka på Ny sida. Fyll i sidtitel, eventuella sökord och sidbeskrivning. Sidtiteln kommer att visas överst på den nya sidan. Bestäm var sidan ska ligga genom att välja en undermeny eller skapa en ny undermeny. (Du kan bara ha en sida per undermeny. Övriga sidor ska sparas med Ingen meny.) Välj publiceringstid. Klicka på Spara sida 6
Redigerasidan Använd Sök/ändra sida i menyn till vänster och leta reda på sidan du vill ändra. Klicka på Redigera på sidan du vill ändra. Sidans innehåll visas i formuläret, gör de ändringar du vill göra och klicka sedan på knappen spara ändring. Kopiera en sida Om du vill använda en befintlig sida som mall för en ny sida gör du som ovan (ändra en befintlig sida) men sedan klickar du på Spara som ny / copy as a new webpage i stället för Spara ändring. 7
Publiceringsdatum Publicera från Anger vid vilken tid och dag som sidan börjar visas på webben. Till Anger vid vilken tid och dag som sidan upphör att visas på webben. 8
Spalter på sidan Två eller tre spalter Du kan välja dela in din sida i två eller tre spalter av olika bredd. Spalt 1, Spalt 2 och Högerspalt är fälten som du fyller med innehåll (rubriker, text, bilder etc.). Om du ändrar antal spalter Tänk på att om du lagt in innehåll i tre spalter och sedan byter till två spalter, är det Spalt 2 som döljs. Om du ändå vill att innehållet i Spalt 2 ska synas, väljer du återigen tre spalter, klipper ut innehållet och lägger in det på det nya stället (i Spalt 1 eller Högerspalten ). 9
Verktygslådan Här hittar du verktyg för att formatera din text, lägga in bilder, filmer, länkar och skapa formulär. Inbäddning av kod t.ex till filmer Här väljer du storlek på text Raderar formatering i inklippt text Med den här knappen maximerar du fönstret Lägg in bilder Fetstil Skapa länkar Dessa knappar används för att skapa formulär 10
Långa texter Längre texter går enklare att skriva och redigera i ett ordbehandlingsprogram, t ex MS Word. Om du vill göra ändringar i en text som redan ligger på webben börjar du med att kopiera texten i administrationsgränssnittet. Sedan klistrar du in den i ordbehandlaren. Gör ändringarna, kopiera den ändrade texten och klistra in den i administrationsgränssnittet igen. Om gammal/fel formatering finns kvar använd radergummit i verktygslådan. Eller klistra in texten i ex vis Word Pad, kopiera den och klistra in på nytt. 11
Tips! Använd gärna tangent-kommandon när du kopierar, klistrar in, klipper ut, etc. ctrl +a ctrl + c ctrl+ v ctrl+ x ctrl+ z Markera allt Kopiera Klistra in Klipp ut Ångra 12
Fler tips! Samma rubrik Underlätta för användaren genom att ha samma rubrik på sidan som i menyn och i länkar till sidan. Då vet man att man hamnat rätt. Pdf-filer Om du lägger in en länk till en pdf-fil, lägg till information om att det är en pdf fil och gärna även storlek på filen. Se exempel här intill. Undvik kursiv stil det är svårläst på skärm understrukna ord det kan uppfattas som en länk VERSALER de ger sämre läsbarhet än gemener och så verkar det som om du skriker. 13
Menyer Huvudmenyer Innehållet på webbplatsen är sorterat i olika avdelningar. På administrationssidorna kallas de för menyer. 1. Huvudmenyer ex: Om Parkinsons sjukdom, Butiken, Nyheter, Länsföreningar 2. Menyer ex: Stockholm, Skaraborg, Skåne Menyer Undermenyer 3. Undermenyer ex: Båstad, Lund, Trelleborg 14
Skapa en undermeny Du skapar en undermeny genom att lägga till den när du skapar eller ändrar en sida. Sidan blir entrésida för undermenyn. Du kan bara ha en sida per undermeny. Övriga sidor ska sparas med Ingen meny. Exempel: En sida som heter Aktiviteter är entrésida och ska ha det som vald undermeny. Alla andra sidor som handlar om de olika aktiviteterna ska ha Ingen meny valt. OBS! Om du avpublicerar sidan, försvinner undermenyn (om du inte har en annan sida med samma undermeny). 15
Sortera undermenyerna När du skapat en undermeny får den automatiskt sorteringen 0. Vilket betyder att den hamnar överst bland undermenyerna. För att byta plats Välj Sök/ändra (under)menyer och sedan vilken undermeny du vill flytta på. Under sortering skriver du in valfri siffra för att ange placering. Klicka på Uppdatera information. Undermenyer med högre siffra hamnar längre ner i sorteringen, och de med lägre siffra hamnar högre upp. Tips! Lämna utrymme mellan siffrorna så att du har plats att lägga in nya undermenyer mellan befintliga undermenyer. Ex vis: 50, 60, 70 16
Sökning av sidor och menyer Söka en sida Klicka på sök/ändra sida och sök via fritextsökning eller bland undermenyerna. Klicka på Sök. Väljer du Ingen meny får du upp alla sidor som inte har en meny. Om du inte gör något val (och klickar på Sök ) får du upp en lista med samtliga sidor. Fritextsökning Sök bland undermenyerna Söka en undermeny Klicka på sök/ändra (under)menyer. Välj undermeny och ändra namn, ändra sorteringsordning eller ta bort undermenyn. 17
Träfflista Sidans namn Här ser man sidans plats i strukturen. Huvudmeny Meny Undermeny 18
Lägga in bilder Innan du publicerar Kolla att du har rätt att använda bilden! Kolla att personerna på fotot tycker att det är OK att vara med. Foton och illustrationer bör vara sparade i jpg-format. Gör så här Sätt markören där du vill lägga in bilden och klicka på symbolen för bilder. Klicka på knappen Bläddra på server. Välj den bild du vill använda. Om bilden inte finns på servern kan du ladda upp den. Klicka på Bläddra och sök sedan upp bilden på din dator. Klicka på bilden och Öppna. Sedan kan du hämta bilden och lägga in på webbsidan. 19
Bilder: Placering, format och fotografens namn Välj hur du vill ha bilden placerad på sidan i rullgardinsmenyn under Justering. Om du väljer justering kommer texten att flöda vid sidan om bilden, till höger eller till vänster. Ta bort siffrorna som anger bredd och höjd, så blir bilden anpassad i storlek när den visas, oavsett plattform. Fotografens namn lägger du in genom att klicka på fliken Avancerad och skriva in ex. vis: Foto: NN, Illustration: NN under rubriken Titel 20
Anpassa bilden För att ändra storlek Klicka på bilden. Håll ned shift-tangenten och placera markören i ett hörn och dra ut/in till lämplig storlek. 21
Bädda in streamade filmer I Vimeo och på Youtube väljer du Bädda in, Embed media eller liknande Kopiera den inbäddade koden Den ser ut ungefär så här: <iframe width="560" height="315" src="http://www.youtube.com/embed/p8_qx81fqeq" frameborder="0" allowfullscreen></iframe> Och klistra in den i dialogrutan som dyker upp när du klickar på Embed media -knappen. Videon visas inte i admin-läge (bara en tom ruta), men den syns när du förhandsvisar sidan. 22
Länkar Länka till en nygjord sida Kopiera url:en från förhandsvisningen av sidan. Lägg in länken med länkverktyget. Här lägger du in url:entill den sida du vill länka till. Länka till en e-postadress Använd länkverktyget och ange länktyp e-post. Länka till en pdf-fil Klicka på den blå knappen bläddra på server och ladda upp på samma sätt som en bild (se sid 19). Tips! Skriv gärna mer information i länktexten än bara Läs mer. För att lägga in symbolen:»(tryck Alt + 0187) 23
Utförlig beskrivning av länkning till en sida. Låt oss anta att du har gjort en sida ( Nya sidan ) och nu vill göra en länk till den, från en annan sida. För att kunna göra länken behöver du den nya sidans url(adress). Den hittar du i webbläsarens adressfönster. Gör så här: Markera och kopiera url:en
Gå nu till den sidan där du vill lägga in länken Gör så här: 1. Skriv den text du vill ha 2. Markera texten 3. Klicka på länksymbolen 4. Klistra in länken till din nya sida i fältet URL 5. Klicka på OK
Glöm inte att spara!
Formulär: verktyg Den här knappen används för att skapa Kryssrutor Radio-knappar Är till för att få användaren att välja ett enda alternativ. Viktigt att samma text finns i fältet Namn på de olika radioknappar som hör ihop. Värdet ska vara olika och motsvara den text som du skriver bredvid knappen. Textfält för korta uppgifter på en rad Namnär fältets namn som bör beskriva fältets uppgift. Värde kan oftast vara tomt annars blir det den text som redan är ifylld i fältet. Med Teckenbredd anges hur många tecken fältet ska vara brett/långt, Max antal teckenbegränsar antal tecken som maximalt får fyllas i. Textruta för längre texter Namnär fältets namn som bör beskriva fältets uppgift. Värde kan oftast vara tomt annars blir det den text som redan är infylld i fältet. Kolumnbestämmer antal tecken som rutan ska vara bred, rader motsvara antal rader som textrutan ska vara hög. Den här knappen används för att skapa Formuläret Knapp för att återställa/sända Flervalslista drop-down Beroende på inställningarna kan du antingen erbjuda besökarna att välja ett eller flera alternativ. Namn är här fältets namn som bör beskriva Flervalslistans uppgift. Storlekär antal rader som syns samtidigt (oftast vill man bara visa en rad) Värde- värdet av det valda alternativet. Detta alternativ skickas. Befintliga val (bör nog heta alternativ) Text är synliga texten (etiketten) på ett alternativet, Värde är tillhörande värdet av alternativet som skickas. Precis som vid kryssrutor och radioknappar kan man alltså visa en text på webben men skicka en annan (tillhörande) kod/text i formuläret. Ex: visa "måndag" som alternativ men i stället skicka "dag 1. 27
Formulär Formulär används vid ex vis medlemsansökan och för att anmäla sig till evenemang. Formulär skapar du med den streckade rektangeln i verktygslådan. (Se sid 10) Fyll i följande uppgifter: 1. Namn formulärets namn (ex vis: Anmälan till Yoga-kurs) 2. Funktion är svarssidans adress. Ska vara mejlform.php 3. Kodning ska vara multipart/form-data 4. Mål Nytt fönster innebär att Tack för anmälan -sidan öppnas i ett nytt fönster. Anges inget, öppnas den i samma sida. 5. Metod POST Klicka på OK. 28
Ändra i ett formulär Om du vill göra en ändring i någon del av ditt formulär: Peka på den del (knapp, fält, ruta, lista) du vill ändra Högerklicka Välj Egenskaper för formlär eller Egenskaper för Textfält (eller vad det nu är för något som du vill ändra). I Firefox finns en bugg som gör det svårt att öppna och ändra i flervalslistor, radioknappar och kryssrutor. Använd därför hellre Chrome eller Explorer när du gör formulär. 29
Formulärinnehåll Här är ett exempel på hur formulärverktygen kan användas. KRYSSRUTA RADIOKNAPPAR På de följande sidorna ser du hur du gör för att skapa formuläret. FLERVALSLISTA KNAPPAR FÖR ATT SKICKA OCH RENSA 30
Kryssruta Namnbeskriver fältets uppgift. I det här fallet att användaren vill anmäla sig till kursen. Du kan också låta kryssrutan vara ikryssad från början. När du sparat egenskaperna ska du skriva in informationen i formuläret. 31
Textfält och textruta Textfält för korta uppgifter på en rad Namnär fältets namn som bör beskriva fältets uppgift. Värde kan oftast vara tomt annars blir det den text som redan är ifylld i fältet. Med Teckenbredd anges hur många tecken fältet ska vara brett/långt,max antal teckenbegränsar antal tecken som maximalt får fyllas i. Textruta för längre texter Namnär fältets namn som bör beskriva fältets uppgift. Värde kan oftast vara tomt annars blir det den text som redan är infylld i fältet. Kolumnbestämmer antal tecken som rutan ska vara bred, radermotsvarar antal rader som textrutan ska vara hög. 32
Flervalslista (I) Flervalslista/drop-downlista används för att ge användaren möjlighet att välja ett eller flera alternativ. Namn beskriver flervalslistans uppgift. Storlekär antal rader som syns samtidigt i listan (oftast vill man bara visa en rad) Värde-värdet av det valda alternativet.detta alternativ skickas. Text är synliga texten på alternativet Värdeär det tillhörande värdet på alternativet, det som skickas. Precis som vid kryssrutor och radioknappar kan man alltså visa en text på webben men skicka en annan (tillhörande) kod/text i formuläret. Ex: visa "måndag" som alternativ men i stället skicka "dag 1. 33
Flervalslista (II) Lägga in alternativ i listan Skriv in ett alternativ, exempelvis Parkinson Stockholm i textfältet och i värdefältet, och klicka på Lägg till. Byta plats på alternativen Om du vill visa alternativen i en viss ordning kan du byta plats på dem genom att markera ett alternativ i taget och flytta upp eller ner med knapparna Uppoch Ner. Tillåta flera val Om användaren ska kunna välja fler än ett alternativ, kryssar du i rutan Tillåt flerval. Markera som valt värde Vill man att ett alternativ ska vara förvalt markerar man det i listan och klickar på Markera som valt värde 34
Radioknappar Radioknappar använder du får att få användaren att ange ett enda alternativ. För att få radioknapparna att hänga ihop ska du ha samma Namnpå alla knapparna. Värdet ska naturligtvis vara olika för varje knapp (ex: förmiddag, eftermiddag). När du lagt information om knappen klicka på OK och skriv sedan in i klartext vad den avser! (= Det som användaren ser) Du kan låta ett av alternativen vara förvalt genom att klicka i rutan Vald. 35
Knapp sänd/återställ Du kan välja mellan två typer av knappar. Återställ tar bort ifylld text. För att dölja raden Skicka i anmälningsmejlet skriver du in submit i namnfältet på knappen. Text (värde) är den text som står i själva knappen. Skicka den andra typen av knapp skickar iväg innehållet i formuläret. 36
Formulär dolda fält (I) För att formuläret ska fungera ska du också skapa några dolda fält: 1. Länk till svarssidan ( Tack för din anmälan ) 2. Mottagaradress för mejlet 3. Texten i ämnesraden i mejlet 4. Avsändare 5. Obligatoriska uppgifter (ej nödvändigt) Dolt fält 1. Länk till svarssidan Placera pekaren i ramen för formuläret och välj Dolt fält i verktygslådan. Fyll i Namn: redirect Värde: (länk till din svarssida) Klicka på OK 37
Formulär dolda fält (II) 2. Mottagaradress/-er Placera pekaren i ramen för formuläret och välj Dolt fält i verktygslådan. Fyll i Namn: recipient Värde: (en eller flera e-postadresser, separerade med komma-tecken) 3. Text i ämnesraden Placera pekaren i ramen för formuläret och välj Dolt fält i verktygslådan. Fyll i Namn: subject Värde: (Text i ämnesraden på mejlet) 38
Formulär dolda fält (III) 4. Avsändare Är alltså den avsändare som står i mejlet med själva anmälan. Placera pekaren i ramen för formuläret och välj Dolt fält i verktygslådan. Fyll i Namn: email Värde: no-reply@parkinsonforbundet.se eller svara.inte@parkinsonforbundet.se Dessa mejladresser är fiktiva och är bara till för att visa mejlprogrammet att det finns en avsändare. 39
Formulär dolda fält (IV) 5. Obligatoriska fält Obligatoriska fält är fält som avsändaren måste fylla i för att kunna skicka formuläret. Placera pekaren i ramen för formuläret och välj Dolt fält i verktygslådan. Fyll i Namn: require Värde: Namnen på de fält som ska vara obligatoriska. Om det är flera stycken skiljs de åt med komma-tecken. OBS! Alla dolda fält ska ligga ovanför Skicka -knappen. 40
Formulär med kopia till avsändaren I Ibland vill man att avsändaren (den som fyller i formuläret) ska få en kopia av anmälan till sin mejladress och en sida att skriva ut. Då gör du så här. Egenskaper för formulär 1. Namn (lämnas tomt) 2. Funktion (lämnas tomt) 3. Id mejlform 4. Kodning multipart/form-data 4. Mål <ej angivet> 5. Metod POST Klicka på OK. 41
Formulär med kopia till avsändaren II Du ska också lägga in ett dolt fält: 1. Namn: kopia 2. Värde: email Som hänvisar till textfältetdär avsändaren ska skriva in sin mejladress. 1. Namn: email 42
Formulär med kopia till avsändaren III Om du vill lägga in en informationstext i mejlet (till avsändaren) använder du ett dolt fält. Du behöver inte ha någon svarssida. När avsändaren är klar kommer hon till en sida som visar alla ifyllda uppgifter och som går att skriva ut. OBS! Alla dolda fält ska ligga ovanför Skicka -knappen. 43