MENU DISEÑO PASO A PASO EN

DREAMWEAVER

INSTRUCTOR: HILDA FREYRE CORDOVA

DISEÑO WEB DREAMWEAVER
 Página | 1
PASO 1
Primero vamos a configurar el ancho del contenedor de la pagina principal que le haz dado el
nombre de index

A Dar clic sobre el

borde de la
pagina

Menú Ventana –
Estilos, clic en
TODO

C Selecciona el
estilo
CONTAINER

Digite el valor de
D 1100px puede
ser otro valor
que Ud. desee

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

PASO 2

 Diseñando el Menú
 Crear una tabla para colocar el menú
 Coloco cursor
 Menú Insertar tabla
Página | 2

Selecciona la tabla
dando un clic

Coloca el cursor dentro de la tabla

Panel Propiedades
alinear - CENTRO

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

  Coloca el cursor en la tabla

Página | 3

B
Selecciona
horizontal clic en
ACEPTAR

Aparece así

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 CLIC en esta zona
turquesa e ir al C
Panel Propiedades

Página | 4

CLIC en
ELEMENTO1

E
CLIC en EL MENOS
PARA ELIMINAR
LOS SUBNIVELES

ASI QUEDA

Coloca el cursor en
ELEMENTO 3.1

F CLIC EN EL MENOS
PARA ELIMINAR
LOS SUBNIVELES

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 G

Página | 5

CLIC EN ESTA
PARTE LUEGO CLIC
EN MENOS PARA
ELIMINAR

ASI QUEDARA

PASO 3
Diseñando el menú Principal

 Ubica tu cursor en la primera sección del MENU, en texto digita: QUIENES

SOMOS, este lo vamos a vincular con la página index.html con la página
principal de nuestro sitio web.

Digita el menú
A
QUIENES SOMOS

CLIC EN
ESTA
CARPETA

Aparece ventana para seleccionar archivo index.html

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 Página | 6

Selecciona el
archivo index

Quedara así

PASO 4
Diseñando las otros links del menú

 Te ubicas en Elemento2 en la sección que corresponde a texto digita CURSOS

en vinculo digitaras cursos.html

De similar forma para las otras opciones del menú

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

Para el menú de INSTRUCTORES

Página | 7

PARA EL MENU DE TUTORIALES

Como queremos adicionar otro menú DE CONTACTENOS

A CLIC EN EL BOTON
MAS + PARA
AÑADIR UN MENU

 Añadido el elemento en texto digitas CONTACTENOS

 Vincula con contactenos.html

Así se visualizara:

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 Página | 8

PASO 4
Cambiando el color de la sección head personalizar el estilo

 Cambiando el color de la sección del menú (head)

 Ir a la ventana estilos, ubicarse en header
 Ir al Menú Ventana – ESTILOS, CLIC EN TODO, LUEGO SELECCIONA HEADER

A CLIC EN EL
BOTON TODO

Luego selecciona
HEADER
B

Selecciona color
Selecciona en color blanco
para cambiarlo

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

PASO 5
Configurando los colores del MENU

Página | 9

UBICATE EN EL ESTILO
SPRYMENUBARHORIZONTAL AL DAR CLIC SE
EXPANDE ASI

Selecciona
UL.MENUBARHORIZONTALli
Luego en width(ancho) digita la
medida de 9.5 em PUEDES
CAMBIARLO A 11 em SI
DESEAS MAS AMPLIO

Así aparecerá:

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 Página | 10

Asi quedara

 Cambiando los colores del menú cuando carga y cuando se coloca el puntero del mouse
 Cuando carga la página este con el color rojo del libro

Asi quedara

Asi quedara

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 Página | 11

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA

 Página | 12

MENU DISEÑO PASO A PASO EN DREAMWEAVER INSTRUCTOR: HILDA FREYRE CORDOVA