Animatie si efecte speciale

Paginilor si elementelor de pagina li se pot aplica efecte speciale si efecte de tranzitie, pentru a face site-ul Web cat mai atragator. Astfel, paginilor li se pot aplica efecte de tranzitie care sa se declanseze la intrarea sau iesire din pagina, la intrarea sau iesire din site. De asemenea paginilor li se pot asocia diferite fundale sonore, care sa se redea de un numar fix de ori sau cat timp pagina este afisata. Elementelor de pagina li se pot aplica efecte de animatie, care in principiu depind de tipul elementului. Astfel unui text i se poate aplica o formatare diferita care sa se aplice cand indicatorul mouse-ului trece peste el, sau cand se incarca pagina.

Animatie si efecte speciale de pagina

Setarea fundalului sonor pentru o pagina

Puteti seta fundalul sonor pentru o pagina. Cand vizitatorul site-ului deschide, este redat sunetul. Fundalul sonor poate fi continuu sau repetat de un numar specificat de ori.

Pentru a stabili fundalul sonor al unei pagini se procedeaza astfel:

1.       In modul de afisare Page, se executa clic-dreapta pe pagina si din meniul contextual se selecteaza optiunea Page Properties. Apare caseta de dialog Page Properties (vezi fig. 1).

2.       In caseta Location a paginii General din caseta de dialog Page Properties, se tasteaza fisierul de sunet pe care vreti sa-l redati sau se executa clic pe butonul Browse pentru a localiza fisierul.

3.       Pentru redarea continua a sunetului, selectati caseta de validare Forever.

4.       Pentru redarea sunetului de un numar fix de ori, se deselecteaza caseta de validare Forever, daca este selectata, si se stabileste numarul de repetari folosind caseta de modificare Loop.

Animarea unui element de pagina

Puteti aplica efecte de animatie Dynamic HTML (DHTML) asupra oricarui element de pe pagina - text, paragrafe, imagini, butoane, marchere etc - si sa legati efectul de declansarea unui evenimet, cum ar fi executarea unui clic, indicarea cu mouse-ul, incarcarea unei pagini etc. De exemplu, puteti crea o animatie care face ca textul sa intre in zbor din dreapta cand pagina este incarcata.

Pentru a aplica animatie DHTML unui element de pagina se procedeaza astfel:

1.         Se selecteaza elementul de pagina ce va fi animat, se deschide meniul Format si se selecteaza optiunea Dynamic HTML Effects. Pe ecran se afiseaza bara instrumentelor DHTML Effects (vezi figura 2).

2.         In caseta combinata On se stabileste evenimentul care va declansa animatia astfel:

• Click Animatia incepe cand vizitatorul executa un clic pe elementul de pagina.
• Double click Animatia incepe cand vizitatorul executa un dublu-clic pe elementul de pagina.
• Mouse over Animatia incepe cand vizitatorul plaseaza indicatorul mouse-ului peste elementul de pagina.
• Page load Animatia incepe cand pagina este incarcata in browserul vizitatorului site-ului.

3.         In caseta combinata Apply, selectati tipul efectului de animatie care vreti sa se produca:

• Pentru a aplica o animatie care deplaseaza elementul de pagina selectati una dintre optiunile Fly out, Fly in, Drop in by word, Elastic sau una dintre celelalte animatii ale miscarii.
• Pentru a aplica o animatie care schimba aspectul elementului de pagina, cum ar fi o culoare a fontului sau un efect de chenar, selectati optiunea Formatting.
• Daca ati selectat o imagine, pentru a aplica o animatie care schimba imaginea cu alta diferita, selectati optiunea Swap picture.

4.         In caseta combinata Choose Settings, alegeti setarile pentru efectul selectat:

• Daca in pasul 3 ati aplicat animatia Fly out, selectati directia sau tipul de deplasare, cum ar fi de sus, din stanga etc.
• Daca in pasul 3 ati aplicat animatia Formatting, selectati Choose font pentru a modifica stilul fontului, culoarea, efectele sau spatierea caracterelor; sau selectati optiunea Choose border pentru a modifica chenarul sau umbrirea.
• Daca ati selectat o imagine si efectul Swap picture in pasul 3, selectati optiunea Choose picture si apoi selectati imaginea de schimb pentru evenimentul din pasul 2.

Adaugarea efectelor de font asupra unei hiperlegaturi

Puteti adauga efecte la hiperlegaturi, astfel incat atunci cand vizitatorul pozitioneaza indicatorul mouse-ului peste hiperlegatura, aceasta sa-si modifice fontul. De exemplu, puteti seta ca hiperlegatura sa se schimba la un font mai mare, aldin si rosu cand indicatorul mouse-ului este plasat pe hiperlegatura.

Aceste efecte sunt setate pentru intreaga pagina, nu doar pentru hiperlegatura selectata.

Pentru a aplica efecte de font asupra hiperlegaturilor procedati astfel:

1.         In modul de afisare Page, executati clic-dreapta pe pagina si din meniul contextual selectati optiunea Page Properties

2.         In caseta de dialog Page Properties, care se afiseaza pe ecran, selectati pagina Background (vezi figura 3).

3.         In zona Formatting, selectati caseta de validare Enable hyperlink rollover effects.

4.         Executati clic pe butonul Rollover Style. Pe ecran se afiseaza caseta de dialog Font (vezi fig. 4)

5.         In caseta de dialog Font stabiliti caracteristicile fontului pentru hiperlegaturile de pe pagina curenta.

Crearea unei efect de tranzitie pentru o pagina

Puteti crea efecte speciale care sunt afisate cand vizitatorul intra sau paraseste site-ul vostru sau cand afiseaza sau paraseste o pagina anumita. Aceste efecte se numesc efecte de tranzitie. Aplicand efecte de tranzitie in mod consistent si judicios, puteti crea prezentari stil diapozitive cu aspect profesional.

Pentru a aplica efecte de tranzitie se procedeaza astfel:

1.         In modul de afisare Page, se deschide pagina careia i se va aplica un efect de tranzitie.

2.         Din meniul Format se selecteaza optiunea Page Transition. Pe ecran se afiseaza caseta de dialog Page Transition (vezi fig. 5).

3.         In caseta combinata Event, se selecteaza evenimentul care va declansa efectul de tranzitie. Sunt disponibile urmatoarele optiuni:

          Page Enter Efectul este declansat cand vizitatorul examineaza pagina pentru prima data.

          Page Exit Efectul se declanseaza cand vizitatorul paraseste pagina

          Site Enter Efectul se produce cand vizitatorul intra in site-ul web.

          Site Exit Efectul se declanseaza cand vizitatorul paraseste site-ul web.

4.         In lista Transition effect, se selecteaza tipul de efect de tranzitie ce se va folosi cand se intra sau se iese din pagina.

5.         In caseta de text Duration, se tasteaza durata, in secunde, cat vreti sa dureze efectul (adica, viteza cu care se executa tranzitia).

6.         Se executa clic pe OK, pentru reveni in pagina.

7.         Se salveaza pagina.

Sugestie: Cel mai bun procedeu de a alege un efect de tranzitie este crearea unuia, salvarea paginii si previzualizarea ei intr-un browser.

Marcarea elementelor animate pe pagina Normal din vederea Page

Cand sunteti in editarea unei pagini in modul Normal al vederii Page, puteti activa marcarea elementelor care folosesc animatii sau efecte Dynamic HTML (DHTML). Puteti astfel sa va dati seama de la prima privire ce elemente de pe pagina folosesc animatii sau efecte DHTML.

Pentru a activa marcarea elementelor cu efecte sau animatii DHTML se executa urmatoarele operatii:

1.         In meniul View se indica optiunea Toolbars si se selecteaza bara DHTML Effects, daca aceasta nu este deja afisata.

2.         In bara instrumentelor DHTML Effects, se executa clic pe butonul Highlight DHTML Effects (). Elementele ce au efecte DHTML sunt incadrate intr-un chenar cu culoare de fond bleu (vezi fig. 6).

Sugestii: Pentru a vizualiza rapid detalii despre un efect aplicat unui element, indicati elementul si intr-un chenar cu fond galben apare efectul aplicat.

Mesaje defilante

Un mesaj defilant (in engleza, marquee) afiseaza un text care se deplaseaza de la stanga spre dreapta sau invers.

Crearea unui mesaj defilant

Pentru a crea un mesaj defilant se procedeaza astfel:

1.         In modul de afisare Page, se plaseaza cursorul unde se va crea mesajul defilant sau se selecteaza textul care va fi afisat in mesajul defilant.

2.         In meniul Insert se indica optiunea Component si se selecteaza comanda Marquee. Pe ecran se va afisa caseta de dialog Marquee Properties (vezi fig. 7).

3.         In caseta de text Text, tastati linia de text ce va forma mesajul defilant. Daca in pasul 1 ati selectat un text, caseta Text va contine textul selectat.

4.         Folosind optiunile din zona Direction se specifica directia de defilare spre stanga (optiunea Left) sau spre dreapta (optiunea Right).

5.         Controalele din sectiunea Speed se folosesc astfel:

          In caseta de modificare valorica Delay se stabileste timpul de intarziere pana cand textul incepe sa defileze.

          In caseta de modificare valorica Amount se stabileste incrementul, in pixeli, de deplasare al textului.

6.         Controalele din sectiunea Behavior se folosesc astfel:

          Scroll Textul defileaza de-a latul ecranului in directia specificata.

          Slide Textul "aluneca" de la punctul de start la marginea opusa a ferestrei. Cand se intalneste sfarsitul zonei definite pentru mesajul defilant, textul se ramane pe ecran.

          Alternate Determina ca textul defilant sa alterneze cele doua efecte.

7.         Controalele din sectiunea Align with text se utilizeaza pentru a specifica alinierea mesajului defilant cu textul inconjurator.

8.         Controalele din sectiunea Size se folosesc pentru a specifica latimea (Width) si inaltimea (Height) zonei alocate textului defilant. Valorile pot fi exprimante in pixeli (optiunile In pixels) sau in procente din dimensiunea ferestrei (optiunea In percent).

9.         Controalele din sectiunea Repeat se folosesc pentru a stabili de cate ori se va repeta mesajul defilant. Daca se selecteaza caseta de validare Continuously, mesajul va defila continuu. Pentru ca repetarea sa se produca de un numar fix de ori, caseta de validare Continuously trebuie sa fie deselectata iar in caseta de modificare valorica times se precizeaza numarul de repetari.

10.     Pentru a stabili o culoare de fond zonei maesajului defilant se foloseste caseta combinata Background color.

11.     Cand s-au stabilit toate caracteristicile mesajului defilant, se executa clic pe OK pentru a reveni in pagina.

Sugestie: Puteti scoate in relief You can emphasize your marquee by formatting the font of the text displayed in the marquee. You can select a custom font or use a different font color, as in the following example:

Banner ad

Create a banner ad

Un banner ad este asemanator unui panou totativ de pe o o pagina Web. Acesta afiseaza o secventa cronometrata de imagini folosind un efect de tranzitie intre imagini. O posibila utilizarea a acestui element este plasarea de publicitate pe pagini.

Pentru a crea un banner ad se procedeaza astfel:

1.         In modul de afisare Page, se plaseaza cursorul in locul unde se doreste crearea unui banner ad.

2.         In meniul Insert, se indica optiunea Component si apoi se selecteaza comanda Banner Ad Manager. Pe ecran se afiseaza caseta de dialog Banner Ad Manager Properties (vezi fig. 8).

3.         Folosind casetele de text Width si Height se stabileste marimea zonei asociate unui banner ad.

4.         Pentru fiecare imagine pe care vreti sa o afisati in panou, se executa clic pe butonul Add si apoi se selecteaza imaginea dorita. Toate imaginile adaugate si ordinea in care ele vor fi afisate sunt prezentate in lista Picture to display.

5.         Pentru a schimba secventa de afisare a imaginilor, selectati URL-ul imaginii respective si apoi executati clic pe butonul Move Up (pentru a o muta cu o pozitie in sus) sau pe butonul Move Down (pentru a o muta cu o pozitie in jos).

6.         In caseta combinata Transition, selectati efectul care vreti sa fie folosit la tranzitia imaginilor.

7.         Pentru a crea o hiperlegatura din banner ad, in caseta de text Link to, se tasteaza URL-ul paginii dorite sau se executa clic pe butonul Browse pentru a localiza pagina sau fisierul destinatie.

8.         Dupa ce s-au stabilit proprietatile, se executa clic pe OK. Se salveaza pagina.

Butoane hover

Create a hover button

Creating a hover button is an easy way to add animation to your web without any scripting. Like any other button, a hover button contains a hyperlink to another page or file. However, when a site visitor clicks or points to a hover button, the button can also glow, display a custom picture, or play a sound effect.

1.         In Page view, position the insertion point where you want to create a hover button.

2.         On the Insert menu, point to Component, and then click Hover Button.

3.         In the Button text box, type the text label for the hover button. Leave this box blank if you want to use a custom picture that already contains a text label.

4.         In the Link to box, type the URL of the page or file you want to display when the hover button is clicked. Or, click Browse to locate the page or file.

Tips

         You can set a picture for a hover button or set a picture for a hover effect on a hover button.

         You can set properties for a hover button to adjust the text label, font size and characters, or type of special effects.

         You can add a sound effect to a hover button to play a sound effect when a site visitor clicks or points to the hover button.

         To preview the hover button as it will appear when a site visitor browses to the page on the World Wide Web, click the Preview tab, or click Preview in Browser on the File menu.

Set properties for a hover button

You can modify the text label, default hyperlink, effects, colors, and size of a hover button.

In Page view, right-click the hover button you want to modify, and then click Hover Button Properties on the shortcut menu:

• To set the text label, type the label you want to use in the Button text box. If you type a long label, adjust the Width of the hover button to accommodate the long label.
• To set the default hyperlink, in the Link to box, type the URL to the page or file you want to display when a site visitor clicks the hover button. Or, click Browse to locate the page or file.
• To set the color of the button when it is initially displayed on the page, select the color you want to use in the Button color box.

Note    If you click Custom and select a picture to use for the hover button, modifying the button color has no effect.

• To set the background color of the button, select a background color for the hover button in the Background color box. The background color can't be made transparent; however, you can match its background color to the page's background color.
• To set the hover effect, in the Effect box, select the visual effect that will be displayed when a site visitor points to the button.
• To set the color of the hover effect, select the color for the hover effect in the Effect color box.
• To set the size of the hover button, modify the settings in the Width and Height boxes, in pixels.

Tips

• If you use a custom picture for the hover button, or if the button text is lengthy, set the width and height of the button to match the width and height of the picture or button text.
• You can also set a picture for a hover button or set a picture for a hover effect on a hover button.
• You can add a sound effect to a hover button to play a sound effect when a visitor clicks or points to the hover button.

Set a picture for a hover button

You can use a picture as the background of a hover button.

1.         In Page view, right-click the hover button, and then click Hover Button Properties on the shortcut menu.

2.         Click Custom.

3.         In the Button box, type the URL to the picture you want to use as the background for the hover button, and then click OK. Or, click Browse to locate the picture.

4.         In the Width and Height boxes, type the width and height of the picture in pixels, and then click OK. The size of the hover button must match the size of the picture.

Tip   You can also set a picture for a hover effect on a hover button. When a site visitor points to the hover button, the picture for the hover effect is displayed.

Set a picture for a hover effect on a hover button

You can set a picture for a hover effect on a hover button. When a site visitor points to the hover button, the picture is displayed.

1.         In Page view, right-click the hover button, and then click Hover Button Properties on the shortcut menu.

2.         Click Custom.

3.         In the On hover box, type the URL to the picture you want to use for the hover effect on the hover button, and then click OK. Or, click Browse to locate the picture.

4.         In the Width and Height boxes, type the width and height of the picture in pixels, and then click OK. The size of the hover button must match the size of the picture you use for the hover effect.

Tip   You can also set a picture for a hover button.

Add a sound effect to a hover button

Use this procedure to add a sound effect to a hover button that you've already created. When a site visitor browsing your page clicks or points to the hover button, the sound effect is played.

1.         In Page view, right-click the hover button you want to modify, and then click Hover Button Properties on the shortcut menu.

2.         Click Custom.

3.         In the Play sound area, select the action and the sound effect:

o        To play the sound effect when a site visitor clicks the hover button, type the URL of the sound effect in the On click box. Or, click Browse to locate the sound effect.

o        To play the sound effect when a site visitor points to the hover button, type the URL of the sound effect in the On hover box. Or, click Browse to locate the sound effect.

Butoane hover

Creare unui buton hover

Crearea unu buton hover este o metoda usoara de adaugare a unei animatii la pagina web fara scripturi. Ca oricare alt buton, un buton hover contine un hyperlink la o alta pagina sau fisier. Cu toate acestea, atunci cand un vizitator da click sau pune mouse-ul deasupra butonului hover, acesta poate sa straluceasca, sa afiseze o imagine anume, sau sa deruleze un efect sonor.

5.         In Page view, pozitionati punctul de insertie unde doriti sa creati butonul hover.

6.         In meniul Insert, mergeti in Component, si dati click pe Hover Button.

7.         In casuta pentru text a butonului, scrieti eticheta text pentru butonul hover. Lasati aceasta casuta libera in cazul in care vreti sa folositi o imagine care are deja o eticheta text.

8.         In Link to box, scrieti URL-ul paginii sau fisierului pe care doriti sa-l afisati cand pe butonul hover este dat click. Sau, dati click pe Browse pentru a localiza pagina sau fisierul.

Sfaturi:

         Puteti sa setati o imagine pentru un buton hover sau sa setati o imagine pentru un efect hover intr-un buton hover.

         Puteti sa setati proprietatile unu buton hover pentru a ajusta eticheta text, marimea fontului si caracterele, sau tipul de efect special.

         Puteti sa adaugati un efect sonor unu buton hover pentru a derula un sunet cand un vizitator da click sau pune pointer-ul deasupra butonului hover.

         Pentru a vedea cum o sa vada un vizitator butonul hover atunci cand acceseaza pagina de web pe Worl Wide Web (www), dati click pe tab-ul Preview, sau dati click pe Preview din Browser in meniul File.

Setarea proprietatilor unui buton hover

Puteti modifica eticheta text, hyperlink-ul, efectele, culorile, si marimea butonului hover.

In Page view, dati click dreapta pe butonul hover pe care doriti sa-l modificati si apoi dati click pe Hover Button Properties in meniu:

• Pentru a seta eticheta text, scrieti eticheta pe care doriti sa o folositi in casuta text a Butonului. Daca scrieti o eticheta lunga, ajustati latimea (Width) butonului Hover pentru a acomoda eticheta lunga.
• Pentru a seta hyperlink-ul default, in Link to box, scrieti URL-ul catre pagina sau fisierul pe care doriti sa-l afisati atunci cand un vizitator da click pe buton hover. Sau dati click pe Browse pentru a localiza pagina sau fisierul.
• Pentru a seta culoarea butonului afisat initial pe pagina, selectati culoarea dorita din casuta Button color.

Nota    Daca selectati o imagine pentru a fi folosita cu butonul hover, modificarea culorii butonului nu va avea vre-un efect.

• Pentru a seta culoarea de fundal a butonului, selectati culoarea dorita in casuta Background color. Culoarea de fundal nu poate fi facuta transparenta; dar puteti sa potriviti aceasta culoare cu culoare de fundal a paginii.
• Pentru a seta efectul hover, in casuta Effect, selectati efectul vizual dorit pentru afisare in momentul in care un vizitator aduce pointer-ul deasupra butonului.
• Pentru a seta culoare efectului hover, selectati culoare dorita in casuta Effect color.
• Pentru a seta marimea butonului hover, modificati setarile in sectiunile Width si Height a casutei in pixeli.

Sfaturi:

• Daca folositi o imagine pentru butonul hover sau daca textul butonului este lung, setati inaltimea (Height) si latimea (Width) butonului pentru a se potrivi cu inaltimea si latimea imaginii sau textului.
• Puteti de altfel seta o imagine pentru un buton hover sau seta o imagine pentru un efect hover a unui buton hover.
• Puteti adauga un efect sonor unui buton hover pentru a derula un sunet cand vizitatorul da click sau aduce pointer-ul deasupra butonului hover.

Setarea unei imagini unui buton hover

Puteti folosi o imagine drept fundal pentru un buton hover.

5.         In Page view, dati click dreapta pe butonul hover, si apoi dati click pe Hover Button Properties in meniu.

6.         Dati click pe Custom.

7.         In Button box, scrieti URL-ul imagini pe care doriti sa o folositi ca fundal pentru butonul hover si apoi dati click pe OK. Sau dati click pe Browse pentru a localiza imaginea.

8.         In casutele pentru inaltime (Height) si latime (Width) scrieti inaltimea si latimea dorita a pozei in pixeli, si apoi dati click pe OK. Marimea butonului hover trebuie sa se potriveasca cu marimea imaginii.

Sfat:   Puteti de altfel si seta o imagine pentru un efect hover intr-un buton hover. Cand un vizitator al site-ului muta pointer-ul deasupra butonului hover, imaginea pentru efectul hover este afisata.

Setarea unei imagini pentru un efect hover intr-un buton hover

Puteti seta o imagine pentru un efect hover intr-un buton hover. Cand un vizitator al site-ului muta pointer-ul deasupra butonului hover, imaginea pentru efectul hover este afisata.

5.         In Page view, dati click dreapta pe butonul hover, si apoi dati click pe Hover Button Properties in meniu.

6.         Dati click pe Custom.

7.         In casuta On hover, scrieti URL-ul catre imaginea pe care doriti sa o folositi pentru efectul hover din butonul hover, si apoi dati click pe OK. Sau dati click pe Browse pentru a localiza imaginea.

8.         In casutele pentru inaltime (Height) si latime (Width) scrieti inaltimea si latimea dorita a pozei in pixeli, si apoi dati click pe OK. Marimea butonului hover trebuie sa se potriveasca cu marimea imaginii.

Sfat   Puteti de altfel si seta o imagine pentru butonul hover.

Adaugati un efect sonor butonului hover

Utilizati aceasta procedura pentru a adauga un efect sonor unui buton hover pe care l-ati creat deja. Cand un vizitator al site-ului da click sau muta pointer-ul deasupra butonului hover efectul sonor este derulat.

4.         In Page view, dati click dreapta pe butonul hover, si apoi dati click pe Hover Button Properties in meniu.

5.         Dati click pe Custom.

6.         In zona Play sound, selectati actiunea si efectul sonor:

o        Pentru a derula efectul sonor dorit cand un vizitator al site-ului da click pe butonul hover, scrieti URL-ul efectului sonor in casuta On click. Sau dati click pe Browse pentru a localiza efectul sonor dorit.

o        Pentru a derula efectul sonor dorit cand un vizitator al site-ului muta pointer-ul deasupra butonului hover, scrieti URL-ul efectului sonor in casuta On hover. Sau dati click pe Browse pentru a localiza efectul sonor dorit.