Cum se creează schimbarea butoanelor și efectelor dinamice - html layout

Hai să vorbim despre modul în care puteți face paginile site-ului Web mai "live". Vom vorbi despre abilitățile care vă permit să adăugați efecte diferite elementelor paginii. Aceasta, de exemplu, poate fi evidențiată, deplasând un element sau schimbând fontul când mutați indicatorul mouse-ului peste el, deschideți pagina și alte evenimente.

În programul FrontPage există o serie de componente gata făcute care pot fi plasate pe pagină și ajustate în modul necesar pentru a juca diverse efecte dinamice. Să ne familiarizăm cu butonul de animație și bannerul de marketing.

Ca și butonul din meniul de navigare, butonul de animație conține o legătură către o altă pagină sau fișier. Dar, în plus față de funcția principală - saltul pe link - când faceți clic sau în timp ce plasați cursorul mouse-ului, butonul de animație poate schimba culoarea, arată schița pentru tine.

Cum se face un buton de animație

Pentru a face butonul de animație, în modul de editare a paginii, selectați comanda meniu Insert - Buton interactiv. Butonul Interactiv Butoane apare pe ecran.

Asigurați-vă butonul de animație, de asemenea, poate insera un dialog componenta WEB site-ul (Insert Web Component), componente pentru selectarea efecte dinamice (Dynamic Effects) pentru a efectua buton interactiv (buton interactiv).

În caseta de introducere a textului, specificați textul care va fi afișat pe buton.

Selectând fila Font, puteți selecta suplimentar fontul pentru textul butonului, iar în fila Imagine puteți modifica dimensiunea și culoarea butonului.

Faceți clic pe OK. Un buton de animație va fi introdus pe pagină.

Pentru a verifica funcționarea butonului, salvați pagina și porniți browserul.

Cum se face un buton de animație cu sunet

Modificați aspectul butonului atunci când plasați cursorul indicatorul mouse-ului peste acesta și redați simultan fișierul de sunet.

În modul de editare al paginii tour1.htm, faceți clic pe butonul pe care l-am făcut pentru al selecta.

Selectați comanda de meniu Format - Comportament (Format - Comportamente). Panoul de activități "Comportamente" apare pe ecran.

Ștergeți acțiunea care se efectuează când mutați indicatorul mouse-ului peste buton.

Faceți clic cu butonul din dreapta pe cel de-al treilea scenariu din lista de scripturi pe etichete și selectați Ștergeți din meniul contextual care apare. Scriptul va fi eliminat din listă.

Indicați faptul că, la pasul anterior, faceți clic pe mouse în coloana Acțiuni, nu pe Acțiuni.

În panoul de activități, faceți clic pe butonul Inserați. Pe afișaj apare meniul.

Meniul Inserare afișează acțiunile probabile atunci când apare o acțiune, pe care o vom menționa un pic mai târziu.

Selectați comanda de meniu Swap Image. Se va afișa caseta de dialog Schimbare imagine.

Acum sună butonul.

În panoul de activități, faceți clic pe butonul Inserați și selectați acțiunea Redare sunet din meniu. Dialogul Redare sunet va apărea pe ecran.

Trebuie să schimbăm evenimentul la care va fi redat fișierul audio.

Treceți cu mouse-ul peste evenimentul onclick în scriptul recent creat și faceți clic pe butonul care apare în partea dreaptă a câmpului ca o săgeată. Pe ecran va apărea un meniu pop-up pentru a selecta acțiunea.

În meniul pentru selectarea unei acțiuni, selectați opțiunea onmouseover (când plasați cursorul indicatorul mouse-ului). Evenimentul pentru redarea sunetului va fi schimbat.

Apăsați combinația de taste Ctrl + F1 pentru a ascunde panoul de activități.

Pentru a verifica funcționarea butonului, salvați pagina și porniți browserul.

Ce alte efecte puteți adăuga la rahat

În HTML există un set suplimentar de comenzi și caracteristici care vă permit să adăugați efecte speciale elementelor de pagină și să le asociați aspectul cu anumite evenimente. Astfel de efecte se numesc efecte dinamice sau efecte DHTML (Dynamic HTML).

În modul de editare, faceți clic pe primul paragraf din text pe o pagină și apoi tour2.htm alege din meniul programului de comanda View - Toolbars - DHTML Effects (View - Toolbars - DHTML Effects). Pe bara de instrumente DHTML Effects (DHTML Effects) vor fi afișate pentru opțiunea de efecte dinamice.

În lista pop-up este On (Pornit) în efectele bara de instrumente DHTML (DHTML Effects) precizează evenimentul care va determina apariția efectului, de exemplu, mouseover (mouse-ul peste).

Alte variante de evenimente: clic, dublu clic, încărcare pagină - lista se bazează pe tipul elementului selectat. Efectele dinamice nu pot fi aplicate textului care face parte din listă.

În lista Aplicați, selectați unul dintre efecte, de exemplu Formatare, dacă ați selectat anterior evenimentul Mouse over.

Setul de efecte depinde de elementul selectat și de acțiunea selectată. Pentru a hover (mouse-ul peste) în textul acestei poate fi Format (Formatare), cu alte cuvinte, schimbarea fontului, culoarea textului, cadrul de ieșire și similare pentru pagina Descărcări (încărcare a paginii), acesta poate fi o varietate de opțiuni de apariția sau dispariția textului dintr-o pagină.

În lista derulantă Alegeți setările, setați caracteristicile efectului selectat, de exemplu selectați Alegeți fontul pentru efectul Formatare.

Setul de caracteristici depinde de elementul și efectul selectat. De exemplu, pentru efectul de a dispărea dintr-o pagină, aceasta poate fi direcția de mișcare.

Dacă selectați opțiunea Alegeți fontul, caseta de dialog Font va apărea pe ecran. Specificați în el ce tip de text va fi afișat atunci când apare această acțiune, apoi faceți clic pe OK.

Cu excepția textului, efectele DHTML pot fi folosite pentru desene, butoane și alte elemente ale paginii. Experimentați cu diferite efecte, încercați să alegeți diferite acțiuni și opțiuni. Pentru un element de pagină, puteți seta mai multe efecte dinamice simultan, dacă nu se contrazic reciproc. Pentru a șterge un efect, utilizați butonul Eliminați efectul din bara de instrumente pentru opțiunea de efecte.

Dacă pagina conține o cantitate mare de text și alte părți, este convenabil să selectați elemente cu efecte DHTML, astfel încât să fie mai ușor să le găsiți în timpul designului paginii.

Închideți bara de instrumente Efecte DHTML selectând Vizualizare - Bare de instrumente - Efecte DHTML.

Când utilizați efecte speciale, trebuie să rețineți că nu toate browserele sunt capabile să le afișeze corect. Dacă vizați o vizită generală la site-ul Web, este imperios necesar de a inspecta funcționarea corectă a tuturor efectelor utilizate în mai multe browsere vserasprostranennyh Internet Explorer. Opera și Netscape.

Informații suplimentare despre acest subiect

Instrucțiuni detaliate despre modul de transferare a valorii unui buton dintr-un formular

Articole similare