Colegio de Educación Profesional Técnica del Estado de Tamaulipas

Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA

Mtro. Ernesto Silva Mendoza

Agrupamiento de elementos mediante listas: Menús

MENU VERTICAL

1. Enciende equipo de cómputo, iniciar sesión en Windows

2. Ingresa a Adobe Dreamweaver CC 2018.
a. Dar clin en menú Archivo (File) →Nuevo (New)
b. Seleccionar el tipo de documento HTML5, Escribir en Titulo (Title): Ejemplo de menú vertical.

c. Dar clic en el botón Crear (Create)

d. Dividir la vista en el modo Código-Diseñador,

ó
3. Guardar con el nombre menú-vertical, y continúe con el ejercicio
4. Dentro del body crear la siguiente lista, la cual será utilizada como menú o enlace:

CONALEP\EGAD\APWE02\ESM
 Colegio de Educación Profesional Técnica del Estado de Tamaulipas
Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA
Mtro. Ernesto Silva Mendoza

5. Colocarse el código dentro de la etiqueta head,

después del title y agregue las siguientes mostradas en
la imagen del lado izquierdo:

6. Guardar con el nombre menú-vertical, mostrar

al docente y generar la evidencia respectiva.
7. Abra con el navegador el archivo creado

MENU HORIZONTAL
1. Enciende equipo de cómputo, iniciar sesión en Windows
2. Ingresa a Adobe Dreamweaver CC 2018.
a. Crear una página HTML
b. Dar clin en menú Archivo (File) →Nuevo (New)
c. Seleccionar el tipo de documento HTML5, Escribir en Titulo (Title): Ejemplo de menú horizontal.
3. Lo primero es lo primero: creamos el menú con 1 <div>, 1 <ul> y varios <li>‘s:
4. A continuación, se muestra la transformación de una lista sencilla de enlaces en un menú horizontal de
navegación.
a. Crear una lista que servirá como menú, dentro del body
<div id="menu">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Nosotros</a></li>
<li><a href="#">Alumnos</a></li>
<li><a href="#">Aspirantes</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
b. Insertar dentro del head las etiquetas de estilo (style) CSS, para darle forma al menú que dese a
diseñar, escribir las siguientes etiquetas:
i. Le vamos a dar color y forma a esto. Agregando estilo a #menu:

CONALEP\EGAD\APWE02\ESM
 Colegio de Educación Profesional Técnica del Estado de Tamaulipas
Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA
Mtro. Ernesto Silva Mendoza

#menu ul {
padding: 0px;
margin: 0px;
background-color: #533;
list-style: none;
font-size: 14px;
font-weight: bold;
width: 100%;
height: 30px;
float: left;
}
c. Le damos horizontalidad a través de display: inline;
#menu ul li {
display: inline;
}
d. Aplicamos cambio al color
#menu ul li a:link, #menu ul li a:visited {
background-color: #533;
color: #FFF;
padding: 5px 15px;
float: left;
text-decoration: none;
}
#menu ul li a:hover, #menu ul li a:active{
color: #F30;
background-color: #CCC;
height: 20px;
}
e. Guardar con el nombre menu-horizontal, mostrar al docente y generar la evidencia respectiva.
f. Abra con el navegador el archivo creado.

CONALEP\EGAD\APWE02\ESM
 Colegio de Educación Profesional Técnica del Estado de Tamaulipas
Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA
Mtro. Ernesto Silva Mendoza

MENU DESPLEGABLE
1. Enciende equipo de cómputo, iniciar sesión en Windows
2. Ingresa a Adobe Dreamweaver CC 2018.
a. Crear una página HTML
b. Dar clin en menú Archivo (File) →Nuevo (New)
c. Seleccionar el tipo de documento HTML5, Escribir en Titulo (Title): Ejemplo de menú desplegable.
3. Guardar con el nombre menu-desplegable, y continúe con el ejercicio
4. A continuación, se muestra la transformación de una lista sencilla de enlaces en un menú horizontal de
navegación.
a. Crear una lista que servirá como menú, dentro del body
<div id="header">
<ul class="nav">
<li><a href="">Inicio</a></li>
<li><a href="">Servicios</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="">Otros</a>
<ul>
<li><a href="">Submenu1</a></li>
<li><a href="">Submenu2</a></li>
<li><a href="">Submenu3</a></li>
<li><a href="">Submenu4</a></li>
</ul>
</li>
<li><a href="">Contacto</a></li>
</ul>
</div>

b. Insertar dentro del head las etiquetas de estilo (style) CSS, para darle forma al menú que dese a
diseñar, escribir las siguientes etiquetas:
<style type="text/css">

*{
margin:0px;
padding:0px;
}

#header {
margin:auto;
width:500px;
font-family:Arial, Helvetica, sans-serif;
}

ul, ol {
list-style:none;
}

CONALEP\EGAD\APWE02\ESM
 Colegio de Educación Profesional Técnica del Estado de Tamaulipas
Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA
Mtro. Ernesto Silva Mendoza

.nav > li {
float:left;
}

.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 12px;
display:block;
}

.nav li a:hover {
background-color: #73AB59;
}

.nav li ul {
display:none;
position:absolute;
min-width:140px;
}

.nav li:hover > ul {

display:block;
}

.nav li ul li {
position:relative;
}

.nav li ul li ul {
right:-140px;
top:0px;
}

</style>

5. Guardar con el nombre menú-desplegable, mostrar al docente y generar la evidencia respectiva.

a. Abra con el navegador el archivo creado.

CONALEP\EGAD\APWE02\ESM
 Colegio de Educación Profesional Técnica del Estado de Tamaulipas
Plantel CD. Victoria 172, Carrera: PTB EN EXPRESION GRAFICA
Mtro. Ernesto Silva Mendoza

CONALEP\EGAD\APWE02\ESM