Menyknapp

Sitoo Web har en mycket kraftfull grafikmotor (GRE) som kan skapa och applicera dynamiska bildeffekter såsom automatisk vattenmärkning, menyknappar med mouse-over effekt, intelligent storleksjustering med mera. Denna instruktion visar hur du skapar en tonad, grafisk menyknapp i Sitoo Web med hjälp av GRE-motorn. Så här kommer slutresultet att se ut på en sida som heter "Välkommen" (dock utan mouse-over effekten):

Innehåll

A) Definiera vilka färger du vill använda i knappen. Vi skall i denna instruktion ange fyra färger, två fasta och två relativa.

1. Välj "Redigera" > "Egenskaper för projekt" > "Palett".

2. Ifall du har färgen "Meny - bakgrund" eller motsvarande, markera den och klicka på "Redigera", annars, klicka på "Lägg till". Döp denna till "Menybakgrund" och markera "Fast" färg.

3. Klicka på rutan med vit/grå-markerade rutor för att definiera färg.

4. Klicka på "Mer".

5. Ange färgen "E2E2E2" i fältet markerat med en hash (#).

6. Klicka "OK" på båda de öppna dialogerna för att återgå till paletten.

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

8. Döp denna till "Meny - bakgrund 2" (vi skall göra en tonad knapp).

9. Markera "Relativ" och därefter färgen "Meny - bakgrund".

10. Klicka på rutan "Färg".

11. Klicka på "Mer".

12. Ange färgen "ECECEC" i fältet markerat med en hash (#).

13. Klicka "OK" på båda öppna dialogerna för att återgå till paletten.

14. Klicka på "Lägg till" på nytt.

15. Döp denna till "Meny - rand", markera att den skall vara "Fast" och sätt "Färg" till "0A0070" under "Mer".

16. Klicka "OK" två gånger för att återgå till färgpaletten.

17. Ange ytterligare en färg som du döper till "Meny - rand vald" och sätter till relativ under "Meny - rand".

18. Klicka på rutan "Färg" > "Mer" och ange färgen "5D55C8".

19. Klicka "OK" på alla öppna dialoger, inklusive färgpaletten.

Vi har nu definierat utgångsfärger för knapparna. Senare skall vi titta på hur dessa kan anpassas och menyn uppdateras automatiskt. Nu till att:

B) Skapa menyknappen:

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

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

3. Döp denna till "Min menyknapp" (detta namn kommer att användas som referens i instruktionen nedan).

4. Låt markeringen stå kvar på "Skapa ny" och klicka på "OK".

5. Dubbelklicka på ikonen av knappen, eller klicka på knappen "Redigera".

6. Du får nu upp redigeringsdialogen för bildeffekten. Högerklicka på mappen till vänster "Min menyknapp" och välj "Typ av dynamisk bild (GRE)" > "Menyknapp".

7. Mappen ligger i lagerträdet. I denna nya effekt finns just nu dock endast ett lager. Under lagerträdet finns ett antal ikoner för att infoga nya lager. Dessa är (fr.v) "Bild från hårddisk eller filserver", "Inmatningsbild", "Textlager", "Färglager" och "Grupp" (mapp). Klicka på knappen för "Färglager" (fyra från vänster).

8. Högerklicka på lagret och välj "Byt namn".

9. Ändra namnet till "Gradient".

10. Sätt "Typ" till "Vertikal gradient".

11. Klicka på "Toppen".

12. Färgdialogen som dyker upp känner du igen från steg A. Istället för "Mer" här, klicka istället på ikonen "Meny - bakgrund" bland palettfärgerna.

13. Klicka på "Botten".

14. Klicka på ikonen "Meny - bakgrund 2".

15. Klicka på ikonen för färglager igen (det kommer att täcka gradienten; detta ordnar vi alldeles strax).

16. Högerklicka på lagret och välj "Byt namn".

17. Ändra namnet till "Rand - normal".

18. Sätt "Färg" till "Meny - rand".

19. Sätt "Placering" till "Vänster".

20. Sätt "Bredd" till 7 bildpunkter.

21. Sätt "Höjd" till 30 bildpunkter.

22. Kryssa i rutan "Visa avancerade inställningar" längst nere till vänster.

23. Kryssa ur "Muspekning" och "Vald" under "Knapplägen" så att endast "Normal" är ibockad. Detta är i vilka lägen i menyn som lagret kommer att visas. "Normal" är menyns startläge. "Muspekning" aktiveras när musen förs över knappen och "Vald" motsvarar när besökaren står på sidan som knappen pekar på.

24. Klicka på ikonen för färglager igen (den kommer att dölja de tidigare lagren; detta ordnar vi alldeles strax).

25. Högerklicka på det nya lagret och välj "Byt namn".

26. Ändra namnet till "Rand - vald".

27. Gå till fliken "Färg".

28. Sätt "Färg" till "Meny - rand vald".

29. Sätt "Placering" till "Vänster".

30. Sätt "Bredd" till 7 bildpunkter.

31. Sätt "Höjd" till 30 bildpunkter.

32. Gå till fliken "Avancerade inställningar".

33. Kryssa ur "Normal" under "Knapplägen" (allting kommer att försvinna, men det är endast visningen; ingen risk för oro).

34. Klicka på knappen för textlager (tredje från vänster).

35. Välj fliken "Exempeltext" och sätt "Text" till "Inmatningstext 1" (detta betyder i detta fallet att texten på knappen kommer att ersättas med namnet på sidan den visar).

36. Sätt "Typsnitt" till "Verdana" och storleken till 11 punkter.

37. Sätt "Placering" till "Vänster".

38. Sätt "Marginaler" till 20 bildpunkter vänster.

39. Markera mappen "Min menyknapp".

40. Sätt "Slutlig storlek" till 150 bildpunkter bredd och 23 bildpunkter höjd.

41. Klicka "OK".

42. Klicka på "Stäng".

Du har nu skapat en egen menyknapp att använda i en grafisk menykomponent.

C) Överkurs: gör om menyknappen till en menybakgrund som fylls hela vägen

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

2. Markera (men redigera inte) knappen "Min menyknapp".

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

4. Markera "Kopiera existerande" där nu "Min menyknapp" är förvald och döp denna till "Min menyknapp - utfyllnadsbild".

5. Klicka på "Redigera".

6. Högerklicka på mappen "Min menyknapp" och välj "Typ av dynamisk bild (GRE)" > "Texteffekt".

7. Markera lagret "Rand - normal" och klicka sedan på ikonen med papperskorgen till höger bland lagerknapparna precis under trädet för att ta bort lagret.

8. Upprepa steg 7 för lagret "Rand - vald".

9. Upprepa steg 7 för lagret "Inmatningstext 1".

10. Klicka "OK" och sedan "Stäng" för att stänga alla öppna dialoger.

11. Redigera layouten eller sidan som innehåller menyn.

12. Dubbelklicka på menykomponenten.

13. I fältet "Utfyllnadsbild", klicka på "Välj".

14. Klicka på knappen "Välj" > "Välj texteffekt".

15. Välj "Min menyknapp - utfyllnadsbild" och klicka på "Välj".

16. Klicka "OK" på alla öppna dialoger och spara sidan eller layouten.

Utrymmena runt logotypen kommer nu att fyllas med den silverfärgade gradienten.