Aquest wikiHow us ensenya a utilitzar Adobe Dreamweaver per crear un quadre desplegable per a una pàgina web. Els quadres desplegables són menús que es "desplegen" quan es fa clic a un element de la vostra pàgina web, presentant més opcions en el procés.
Passos
Pas 1. Obriu un projecte de Dreamweaver
Feu doble clic al fitxer del projecte per fer-ho. Si voleu crear un nou projecte de Dreamweaver, obriu Dreamweaver i feu clic a Dossier, feu clic a Novetati seguiu les indicacions que apareixen a la pantalla.
Pas 2. Creeu una llista ordenada
Per crear un menú desplegable, heu de tenir com a mínim un element de pics. Podeu crear un punt vi desactivant CSS (feu clic a Veure element del menú, seleccioneu Representació d’estilsi feu clic a Estils de visualització si està marcat), fent clic a la ubicació on voleu afegir el punt, fent clic a la icona del punt vinyet a la part inferior de la finestra i escrivint el nom del punt. Després hauríeu de tornar a activar CSS abans de continuar.
- El nom del punt aquí servirà com a activador del menú desplegable (per exemple, el botó sobre el qual es passa el ratolí o toca per obrir el menú desplegable).
- Omet aquest pas si ja tens un element de llista que vols convertir en un menú desplegable.
Pas 3. Determineu el nom de la vostra llista
Feu clic a Codi i assegureu-vos que esteu a la pestanya Codi font i desplaceu-vos cap avall fins al codi de la llista ordenada (estarà entre un"
"etiqueta i un"
"tag) i cerqueu l'etiqueta" "a la part superior"
tag. La paraula entre cometes és el nom de la vostra llista.
-
Si no veieu cap nom, inseriu l'etiqueta (on el nom fa referència al vostre nom preferit de la llista) directament a sobre de
etiqueta.
Pas 4. Traieu els punts de bala
Feu clic a la icona per assegurar-vos que esteu al lloc correcte Disseny i feu clic a la pestanya Dissenyador CSS a l'extrem superior dret de la finestra i feu el següent:
- Feu clic a + a la dreta de l'encapçalament "Selectors".
- Escriviu #name ul on "nom" sigui el nom de la vostra llista.
- Premeu ↵ Retorn dues vegades.
- Desplaceu-vos cap avall i feu clic llista-estil-tipus al tauler de la part inferior del fitxer Dissenyador CSS fitxa.
- Feu clic a cap al menú emergent resultant.
Pas 5. Canvieu la llista ordenada perquè es mostri horitzontalment
Per fer-ho:
- Feu clic a + a la dreta de l'encapçalament "Selectors".
- Escriviu #name li on "nom" sigui el nom de la vostra llista.
- Cerqueu el títol "flotant" al tauler de la part inferior del fitxer Dissenyador CSS fitxa.
- Feu clic a Esquerra feu clic immediatament a la dreta de l'encapçalament "flotant".
Pas 6. Afegiu una etiqueta activa a la vostra llista
Feu clic a + botó a la dreta de "Selectors", a continuació, escriviu #name a (on "name" és el nom de la vostra llista) i premeu ↵ Retorn dues vegades.
Pas 7. Afegiu un color de fons
Seleccioneu el fitxer #nom a si és necessari, feu clic a la pestanya "Color de fons" en forma de caixa a la part superior de la pàgina Dissenyador CSS, seleccioneu el tauler color de fons i seleccioneu el color de fons que voleu utilitzar.
Aquest és el color que utilitzaran els elements de la llista desplegable
Pas 8. Feu que els elements de la llista utilitzin el format de "bloc"
Aquest format garanteix que quan algú faci clic o toqui un element de la llista, pugui obrir-lo seleccionant una mica per sobre o per sota d’ell en lloc d’haver de seleccionar amb precisió el text:
- Assegureu-vos que el vostre #nom a l'element està seleccionat al fitxer Dissenyador CSS fitxa.
- Desplaceu-vos cap avall fins a l'encapçalament "mostrar" al tauler.
- Feu clic a l'extrem dret de l'encapçalament "pantalla" i, a continuació, feu clic a bloc al menú resultant.
Pas 9. Afegiu farciment si cal
Si observeu que els elements de la llista estan encallats l'un contra l'altre, podeu col·locar un espai entre ells fent el següent:
- Assegureu-vos que el vostre #nom a l'element està seleccionat al fitxer Dissenyador CSS fitxa.
- Desplaceu-vos cap avall fins a l'encapçalament "farcit" al tauler.
- Canvieu els camps de text "px" superior i inferior per llegir almenys 5.
- Canvieu els camps de text "px" esquerra i dreta per llegir com a mínim 10.
Pas 10. Creeu un color per sobre
Aquest és el color que apareixerà quan passeu el cursor del ratolí sobre un element del menú desplegable:
- Feu clic a + a la dreta de l'encapçalament "Selectors".
- Escriviu #nave a: hover (on "nom" és el nom de la vostra llista) i premeu ↵ Retorn dues vegades.
- Feu clic a la pestanya "Color de fons".
- Seleccioneu color de fons i, a continuació, seleccioneu un color més clar del que heu utilitzat per al color de fons.
Pas 11. Desactiveu CSS
Feu clic a Veure element del menú, seleccioneu Representació d’estilsi feu clic a Estils de visualització a la finestra emergent.
Si el fitxer Estils de visualització l'opció està en gris, feu clic a qualsevol lloc del document Dreamweaver i torneu-ho a provar.
Pas 12. Creeu el contingut del menú desplegable
Podeu fer-ho afegint subpunts a sota del punt que voleu utilitzar com a botó del menú desplegable:
- Feu clic a la dreta de l'element de la llista que voleu convertir en un menú desplegable i premeu ↵ Retorn.
- Premeu Tabulador ↹.
- Escriviu el nom del primer element del menú desplegable i premeu ↵ Retorn.
- Escriviu el nom del menú desplegable següent i, a continuació, premeu ↵ Retorn i repeteixi segons sigui necessari.
Pas 13. Lligueu el contingut del menú desplegable a un element de vinyeta
Per fer-ho:
- Feu clic a + al costat de "Selectors", escriviu #name ul ul i premeu ↵ Retorn dues vegades.
- Desplaceu-vos cap avall i feu clic visualitzaciói, a continuació, feu clic a cap al menú emergent.
- Cerqueu i feu clic posiciói, a continuació, feu clic a absolut al menú emergent.
Pas 14. Creeu el menú desplegable per si mateix
Haureu d'afegir un altre selector per fer-ho:
- Feu clic a + al costat de "Selectors", a continuació, escriviu #name ul li: hover> ul i premeu ↵ Retorn dues vegades.
- Cerqueu i feu clic visualitzaciói, a continuació, feu clic a bloc al menú emergent resultant.
Pas 15. Feu que el contingut del menú desplegable es mostri verticalment
Per defecte, el contingut del menú desplegable es mostrarà en una barra horitzontal, però podeu forçar-los a una columna vertical fent el següent:
- Feu clic a + al costat de "Selectors", escriviu #name ul ul li i premeu ↵ Retorn dues vegades.
- Cerqueu el títol "flotant".
- Feu clic a "cap" () opció a la dreta de l'encapçalament "flotant".
Pas 16. Deseu el vostre projecte
Premeu Ctrl + S (Windows) o ⌘ Ordre + S (Mac) per fer-ho.
