Ikon Menyalternativ Funktion och beskrivning Sök och ersätt text i arbetsfältet. Ramformatering

Transkript

1

2 Innehåll Redigeringsverktyget... 3 Hantera bilder... 5 Infoga pdf-fil... 5 Lägg till mall... 6 Infoga YouTube-klipp... 6 Infoga länk... 7 Infoga tabell... 8 Kodupprensning CSS-klass Egna anteckningar:

3 Redigeringsverktyget Ikon Menyalternativ Funktion och beskrivning Sök och ersätt Sök och ersätt text i arbetsfältet Anpassa till fönster Växla till helskärmsvy Kodupprensning Städa bort överflödig kod Klipp ut Klipp ut markering Kopiera Kopiera markering Klistra in Klistra in i arbetsfältet Klistra in ren text Klistra in vanlig oformaterad text i arbetsfältet Klistra in från Word Klistra in från Word och rensa bort överflödig formatering Klistra in som HTML Klistra in som HTML Radera Ta bort markerat objekt Radera allt Radera hela sidan (kan enkelt ångras) Ångra Ångra din senaste åtgärd Gör om Gör om tidigare ångrad åtgärd Specialtecken Infoga specialtecken från lista Ramformatering Ändra utseende på en ram Infoga lager Infoga ett lager Infoga gruppbox Infoga en gruppbox på önskad position för att gruppera objekt Infoga bild Infoga bild från bildgalleriet; ladda upp bilder Hantera bilder Ladda upp, infoga eller ta bort bild, tillåter dig att ändra egenskaper Infoga Flash Infoga en Flash-animation; tillåter dig att ändra egenskaper Infoga Media Infoga ett Windows Media-objekt; tillåter dig att ändra egenskaper Filarkiv Infoga en länk till ett uppladdat dokument på servern: PDF, Flash-film (se avsnittet infoga Flash i manualen), DOC, ZIP m.m. Lägg till mall Välj en eller flera sidor att klistra in på din sida Klistra in YouTube Embed-kod Lägg in ett YouTube-klipp på din hemsida genom att bädda in koden Infoga linje Infoga horisontell linje Infoga länk Infoga länk Radera länk Ta bort länken från markerat område Infoga ankare Infoga ett ankare för att länka till ett stycke i texten på din hemsida Infoga bildkarta Infoga en bild med markerade områden med klickbara länkar Absolut positionering Designa text, bilder, tabeller m.m. med valfri placering Skicka framåt Placera markerat innehåll framför 3

4 Skicka bakåt Placera markerat innehåll bakom Synliga stödlinjer för tabell Visa/dölj stödlinjer för tabeller (stödlinjer gör redigeringen enklare) Hjälp Visa den här sidan Infoga tabell Infoga tabell Infoga rad ovan Infoga tabellrad ovanför markerad tabellrad Infoga rad nedan Infoga tabellrad nedanför markerad tabellrad Radera rad Ta bort den markerade tabellraden Infoga kolumn till vänster Infoga kolumn till vänster om den markerade cellen Infoga kolumn till höger Infoga kolumn till höger om den markerade cellen Radera kolumn Ta bort den markerade kolumnen Infoga cell Infoga cell i den markerade raden Radera cell Ta bort den markerade cellen Sammanfoga med cell till höger Slå ihop markerad cell med den närmast till höger Sammanfoga med cell nedan Slå ihop markerad cell med den nedanför Horisontell delning Dela en cell till kolumner Vertikal delning Dela en cell till rader Radbrytning Radbrytning utan att skapa nytt stycke Fetstil Gör markerad text fet Kursiv Gör markerad text kursiv Understruken Stryk under markerad text Vänsterjustera Justera markering till vänster Centrera Justera markering till mitten Högerjustera Justera markering till höger Marginaljustera Justera markering till marginalerna Ingen styckejustering Ingen styckejustering på markeringen Ta bort formatering Ta bort formatering på markerad text Textfärg Ändra färg på text till önskad färg Infoga nummerlista Infoga en numrerad lista Infoga punktlista Infoga en punktlista Gör indrag på text Öka indraget på markerat innehåll Minska indrag på text Minska indraget på markerat innehåll Nedsänkt Ändra markerad text till nedsänkt text Upphöjd Ändra markerad text till upphöjd text Överstruken text Gör markerad text överstruken Versaler Konvertera markerad text till versaler Gemener Konvertera markerad text till gemener CSS-klasser Formatera text med hjälp av förinställda stilmallar, färger, bildramar m.m. Formatering Välj olika textformatering, rubrik m.m. Zoom Förstora eller förminska innehållet i redigeringsverktyget 4

5 Hantera bilder Om du vill ta bort eller byta namn på bilderna gör du det via Hantera bilder i redigeringsläget av sidorna. Här kan du också ladda upp nya bilder som inte behöver skalas om. Vill du skala om dina bilder använder du Bilduppladdning. Infoga pdf-fil För att lägga in en pdf på din e-handel/produktmodul måste du först ladda upp filen till NopCommerce. Klicka på knappen Filarkiv och Upload Files. Markera den fil du vill ladda upp och välj öppna. Precis som med länkar väljer du själv om du vill att en text, bild eller symbol ska vara klickbar för att öppna pdf-filen. I fältet Titel kan du skriva en text som blir länkad till pdf-en. Klicka på infoga för att lägga in filen på sidan. Vill du istället länka en bild till pdf-en behöver du först lägga in bilden i redigeringsfältet och markera den, innan du klickar på filarkiv. 5

6 Lägg till mall Ett smidigt sätt att få samma struktur på sina produkter är att använda mallar. För att använda en mall klickar du på knappen Lägg till mall. Filbanken öppnas och du kan då klicka på en mall för att infoga den på din produkt. En mall kan till exempel innehålla tabeller med olika kolumner för till exempel information, beskrivning, specifikationer eller bruksanvisning med rubriker, bilder, pdf-er med mera. Du kan sedan enkelt lägga in den information som saknas. Infoga YouTube-klipp Med funktionen Klistra in YouTube Embed-kod kan du lägga in ett YouTube-klipp på din e-handel/produktmodul. Sök upp ditt klipp på YouTube och kopiera den kod som finns i anslutning till klippet som kallas gammal inbäddningskod. Den visas när du klickat på Bädda in. Klistra sedan in koden i NopCommerce i fältet för Klistra in YouTube Embed-kod här och välj Lägg till. Storleken på klippet kan du välja under egenskaper innan du valt Lägg till. 6

7 Infoga länk Länkar används för att skapa ett lätt sätt att ta sig mellan webbsidor och interna sidor. Länkar är det du klickar på när du vill byta sida på Internet. Det finns interna länkar och externa länkar. Interna länkar leder till en annan plats på din hemsida och externa länkar leder till en annan Internetsida. Klicka på ikonen Infoga länk. Skriv eller kopiera och klistra in en adress till en annan Internetsida i Url-raden. Tänk på att markera ett alternativ i rullgardinsmenyn Mål så att länken inte orsakar att besökaren lämnar din hemsida. Nytt fönster är ett bra alternativ. Om du inte har markerat något innan du klickar på Infoga länk skriver redigeringsverktyget ut länkadressen vid markörens position. 7

8 Infoga tabell Ett mycket bra sätt att hantera innehållet på sina webbsidor är att använda sig av tabeller. Nästan alla sidor är skapade med hjälp av en tabell för att hålla bilder, texter, länkar, filer och avdelande linjer på plats i jämna rader. Om du vill infoga en ny tabell ställer du dig med markören där du vill ha tabellen, klickar på ikonen Infoga tabell och väljer utseende på tabellen. Du kan med hjälp av ikonerna, som visas nedan, dela, ta bort, sammanfoga, redigera, lägga till nya celler, rader och kolumner. Tabellexempel: Ofta är det enklare att skapa en ny tabell i en befintlig tabell om du till exempel vill lägga in en punktlista med olika tjänster eller samarbetspartners, istället för att lägga till fler kolumner då det påverkar hela tabellens utseende. Tabellen i redigeringsverktyget ovan är ett exempel på hur en sida kan vara strukturerad i kolumner med hjälp av tabeller. 8

9 Tabellen består av celler och varje cell, som kallas för td, kan ha en egenskap som redigeras genom att välja <td> och egenskaper. Där kan du justera bredden, höjden, ge cellen en css-klass och ändra uppställning på innehållet i cellen. 9

10 Kodupprensning Kodupprensning är ett mycket användbart verktyg när man vill ta bort onödig kodinformation i sitt dokument. Klicka på städarikonen om du vill städa hela ditt dokument. Om vill städa endast en del av din text markerar du först den delen av texten du vill städa och klickar sedan på ikonen. Tänk på att kodstädning kan förändra utseendet på dokumentinnehållet och går inte att ändra. Spara därför gärna innan du städar. Ta bort alla HTML-taggar tar bort all HTML-kod, endast ren text kommer att vara kvar. Ta bort överflödiga Word-taggar använder du om du har klistrat in ett stycke direkt från Word. Rensa upp stilmallen tar bort alla Style Sheetformateringar. Rensa upp <font>-taggar rensar bort alla <font>formateringar. Rensa upp <span>-taggar rensar bort alla <span>formateringar. CSS-klass Här hittar du de fördefinierade stilarna som din e-handel/produktmoduls webbdesigner har ansett stämma överens med utseendet på din hemsida. Det här alternativet använder du bland annat om du vill ha en färgad text eller en ram runt en bild. 10

11 Egna anteckningar: 11