La creació de menús és probablement un dels punts principals en el desenvolupament de llocs i programes. A més, una bona elaboració i un disseny lògic d’aquest menú és la cara d’un lloc o de qualsevol programa. Per exemple, prenem Microsoft i el sistema operatiu Windows 7. Després del llançament de Windows 7, Microsoft va escoltar moltes crítiques que no eren afalagadores per si mateixes. Hi ha hagut moltes crítiques, però els elements de menú situats de manera més incòmoda sovint. Llegiu detingudament aquest tutorial sobre com crear un menú desplegable horitzontal amb CSS i Expression Web. Els estils d’etiquetes canviaran per crear el menú
Instruccions
Pas 1
Aneu a Gestiona estils i feu clic al botó Nou estil. Poseu el nom Selector ul li al nou estil que acabeu de crear. Recordeu també que el nou estil s’ha de definir al fitxer desplegable.css.
Pas 2
Per estirar un menú horitzontal, heu de dir als elements del menú que serà horitzontal. A continuació, heu de determinar l’amplada de cada element del menú i eliminar tots els punts innecessaris davant de tots els elements de la llista.
Pas 3
Per a l'alineació horitzontal, aneu a Disseny i configureu l'atribut de visualització en línia. Establiu l'atribut float a l'esquerra. Feu clic al botó Aplica. Tots els elements de la llista s’han d’establir en una línia. Per tal que no es superposin, heu de fer el següent: definiu el valor de posició de l'atribut ample a 150 px. Ara comproveu-ho. Tots els elements de la llista haurien de tenir la mateixa mida.
Pas 4
Ara hem d’intentar eliminar els punts que hi ha davant dels elements de la llista. Per fer-ho, aneu a Llista i configureu l'atribut list-style –type a cap.
Pas 5
Feu clic a D'acord per acceptar tots els canvis.
Pas 6
Per ajustar la mida de la lletra a l’estil ulli, heu de fer el següent. A Gestiona estils, feu clic amb el botó dret a l'estil ulli que heu de seleccionar Modificar estil. S'obrirà el quadre de diàleg familiar per afegir o canviar atributs. Aneu a la categoria Font i configureu l'atribut font-family a Arial, Helvetica, sans-serif. A continuació, aneu a l’atribut font-size i configureu-lo a 0.9em. Després d'això, configureu l'atribut text-transform i configureu el valor en majúscules.
Pas 7
L'alçada dels elements del menú creat es pot ajustar a la categoria Posició. Establiu l'atribut d'alçada a 30 px.
Pas 8
A continuació, heu de desar el fitxer menu.html. Per fer-ho, Expression Web obrirà la finestra Guardar fitxers incrustats necessària per desar el fitxer. Deseu al fitxer desplegable.css. Feu clic a D'acord per desar.
Pas 9
Ara comproveu el vostre resultat. Per seguretat, és millor provar-lo en diferents navegadors. Per comprovar el resultat obtingut al navegador per defecte, heu de prémer la tecla F12 del teclat.
