Els botons estàndard no són molt bonics. La seva aparença difereix segons el navegador i el sistema operatiu. Encaixar aquest botó en un disseny de pàgina existent no és fàcil. Afortunadament, és possible anul·lar la configuració del botó per defecte.
És necessari
- - editor de text "Bloc de notes";
- - editor gràfic Paint.
Instruccions
Pas 1
Creeu dos fitxers. Un d’ells amb l’extensió.htm contindrà l’etiquetatge del document, anomenem-lo index.htm. El segon, amb una extensió.css, contindrà fulls d'estil. Aquest fitxer es denotarà com a style.css. Escriviu el marcador HTML estàndard al fitxer d'índex. A la capçalera del document, incloeu el fitxer amb les taules com a línia.
Pas 2
Creeu un botó amb paràmetres predeterminats. Obriu el fitxer de disseny de pàgina a l'editor de text "Bloc de notes". A la secció cos del document html, escriviu la línia. Deseu el fitxer. Ara podeu obrir-lo en un navegador i avaluar-ne el resultat. La mida del botó depèn de la longitud de la línia de text.
Pas 3
Abans de canviar el color del botó, heu de fixar-ne les dimensions geomètriques. Per fer-ho, obriu el fitxer style.css al Bloc de notes. Escriviu la línia.button {width: 175px; alçada: 55 px; }. Deseu els canvis. Obriu el fitxer index.htm. Afegiu un atribut de classe a la línia que descriu el botó. Com a resultat, hauria de ser així:;. Deseu el fitxer i obriu-lo en un navegador. El botó ha augmentat de mida.
Pas 4
Amb l’editor gràfic Paint, prepareu un mapa de bits per al fons del botó. Les seves dimensions haurien de ser de 175x55 píxels. Canvieu la mida del llenç. Per fer-ho, agafeu l'extrem inferior dret del llenç amb el cursor del ratolí. Sense deixar anar el ratolí, canvieu la mida fins que sigui necessari. La mida actual del llenç es pot veure a la barra d'estat a la part inferior de l'aplicació. Feu el farciment del color desitjat. Deseu la imatge al fitxer button.png.
Pas 5
Obriu stile.css en un editor de text. Afegiu el fons de la línia: url (button.png); a la classe de botons. Com a resultat, el contingut del fitxer hauria de ser així:.button {width: 175px; alçada: 55 px; url (button.png);}.
