Sitoo Web

 

Produktlista med informationsmenyn

För att skapa en produktlista med text, bild och rullning kan du följa nedanstående instruktion. Notera att detta är en ganska avancerad beskrivning där du kommer att använda flera av Sitoo Webs dynamiska funktioner. Fördelen är att du lätt kan hålla den uppdaterad.

Innehåll

A) Skapa en trädstruktur för produkter

1. Högerklicka på sidan "Produkter" (eller motsvarande) och välj "Lägg till mapp".

Lägg till mapp under

2. Döp mappen till "Produktcontainer" eller liknande och kryssa ur rutan "Inkluderat i menyer".

Lägg till produktcontainer

3. Högerklicka på mappen "Produktcontainer" och välj "Lägg till sida".

4. Döp sidan till "Produkt 1" (detta är ett exempel) och välj en layout som passar.

5. Upprepa steg 4-5 för "Produkt 2".

6. Högerklicka på sidan "Produkt 1" och välj "Egenskaper" > "Inställningar".

Välj

7. Under "Primär bild", välj den bild du vill visa för den här produkten.

Välj bild för produkten

8. Välj fliken "Info" och skriv en text du vill skall synas i menyn som beskriver produkten i fältet "Beskrivning".

Beskrivningstext för produkt

9. Upprepa steg 7-9 för "Produkt 2".

Du har nu skapat två produkter som kommer att kunna visas.

B) Skapa en bildeffekt som kan visa sidornas respektive primärbilder

1. Välj "Verktyg" > "Redigera dynamiska bilder (GRE)".

Redigera dynamiska bilder (GRE)...

2. Klicka på "Lägg till".

3. Döp denna till "Primär bild" och markera att skapa ny.

4. Klicka på knappen "Redigera".

Inmatningsbild för Primär Bild

5. Du kommer nu att få upp en dialog. Till vänster har du ett vitt fält med en mapp. Detta är dina lager. Under denna har du ett antal små knappar för att lägga till olika lagertyper. Klicka på knappen näst längst till vänster.

6. Nu har du fått in lagret "Inmatningsbild". Längst ned till vänster i inställningarna har du knappen "Byt bild". Klicka där.

7. Sätt denna till "Använd sidans primära bild".

Använd sidans primära bild

8. Klicka på ikonen av mappen i trädet med lager.

9. Ställ in önskad storlek som du vill att bilderna skall ha. I detta exempel använder vi storleken 60x60px (pixlar = bildpunkter).

Ange storleken för bilderna

Typ av dynamisk bild: Menyknapp

10. Högerklicka på mappen i lagerträdet och välj "Typ av bildeffekt" > "Menyknapp".

11. Klicka "OK" för att spara bildeffekten.

C) Infoga menyn som bygger alla produkter

1. Placera musmarkören där på sidan där du vill infoga produktlistan.

2. Välj "Meny" > "Informationsmeny".

Infoga en informationsmeny

3. Menyn kommer nu att infogas med standardinställningar. Dubbelklicka på den.

4. Du får nu upp inställningarna för informationsmenyn. Sätt "Maxantal" till samma eller högre antal än vad du har produkter.

5. Sätt "Genereringstyp" till "Vertikal".

6. Sätt "Textvisningsalternativ" till "Titel, beskrivning, datum".

Egenskaper för informationsmeny

7. Klicka på knappen "Menyalternativ".

8. Klicka på "Välj" invid "Sidor underordnade en vald sida".

9. Välj mappen "Produktcontainer" och klicka "OK".

Fyll menyn med produkter

10. Välj fliken "Utseende på menyknappar".

11. Välj "Primär bild".

Använd sidans primära bild som produktikon

12. Klicka "OK" tills alla dialoger är stängda.

13. Spara sidan.

Du kommer nu att kunna se sidan bygga upp alla produkter. I exemplet nedan har vi även under "Egenskaper för meny" ställt in formatmallar för "Titel" och "Länk".

Produktlista med Informationsmeny i Sitoo Web

Sammanfattning

  • För att lägga till en produkt, skapa ett nytt dokument under "Produktcontainer".
  • För att ändra en produkts bild, högerklicka på den och välj "Egenskaper" > "Inställningar". Ändra sedan "Primär sidbild".
  • För att inaktivera en produkt (så att den inte visas i listan), högerklicka på den i trädet och kryssa ur "Inkluderat i menyer". Gör det motsatta för att aktivera den igen.
  • För att redigera storleken på bilden eller liknande, redigera bildeffekten "Primär Bild" under "Verktyg" > "Redigera dynamiska bilder (GRE)".
  • För att ändra/uppdatera bildtexten, högerklicka på sidan och välj "Egenskaper". Där kan du ändra texten under "Beskrivning".