Tutorial dreamweaver (Menu basico)

14
Prof. Eleazar Hernández

Transcript of Tutorial dreamweaver (Menu basico)

Page 1: Tutorial dreamweaver (Menu basico)

Prof. Eleazar Hernández

Page 2: Tutorial dreamweaver (Menu basico)

1. Ya dentro del programa clic en HTML

2. Se abrirá esta ventana

3. Trabajaremos en modo diseñador

Page 3: Tutorial dreamweaver (Menu basico)

4. Iniciaremos colocando un color de fondo a nuestra pagina clic en el botón Propiedades de pagina

5. saldrá estaventana clic encolor de fondoseleccionamosel color quedeseamos yluego clic enaceptar y listo.

Page 4: Tutorial dreamweaver (Menu basico)

6. Ahora insertaremos una tabla que será la base para toda nuestra web, clic en menú insertar, luego clic en tabla

7. Y configuramos nuestra tabla filas: 7, Columnas: 3 Ancho: 1024 Pixeles, luego clic en aceptar.

Nos quedara de esta forma.

Page 5: Tutorial dreamweaver (Menu basico)

8. Combinaremos celdas, Clic izquierdo en medio de la celda y arrastramos hacia la derecha y soltamos el clic

9. Abajo en la venta esta la barra de propiedades ahí le daremos clic en combinar celdas.

Quedara de la siguiente manera

Page 6: Tutorial dreamweaver (Menu basico)

10. Repetimos los pasos 7 y 8 en las celdas correspondientes para que le quede con el diseño siguiente

11. Insertaremos otra tabla para realizar el menú con sus respectivos links, clic en la celda

12. Repetimos el paso 6

13. Configuramos de la siguiente forma, Filas: 5 Columnas: 1, Ancho 150 Pixeles y clic en aceptar

Page 7: Tutorial dreamweaver (Menu basico)

Quedara de esta forma.

14. Escribimos lo siguiente en la tabla de menú.

15. Guardaremos nuestra pagina, clic en menú archivo y clic en guardar como.

Lo guardamos con el nombre de index, dentro de una carpeta.

Page 8: Tutorial dreamweaver (Menu basico)

16. Dentro de la carpeta donde guardamos nuestro index, le sacamos 4 copias

17. Les cambiamos nombres y les colocamos los siguientes.

18. Ahora procedemos abrir todos los documentos creados, para eso clic en menú archivo, luego clic en abrir.

Page 9: Tutorial dreamweaver (Menu basico)

19. Seleccionamos todos los archivos y le damos clic en abrir.

Y se abrirán las pestañas siguientes

Page 10: Tutorial dreamweaver (Menu basico)

Luego le damos clic cada una de las pestañas para personalizarlas y se repiten los pasos 4 y 5 pero con diferentes colores para que les quede de la siguiente manera.

Cada pagina tiene que quedar con diferentes colores

20. Luego de haber personalizado cada uno regresamos a nuestra pagina index que esta en color azul para realizar el menú

Page 11: Tutorial dreamweaver (Menu basico)

21. Seleccionamos la palabra inicio

22. Le damos clic en la carpetita de la opción vinculo.

23. Le damos clic sobre el archivo index y clic en aceptar

Page 12: Tutorial dreamweaver (Menu basico)

24. Repetimos los pasos 21 (pero seleccionamos la palabra que corresponde), 22 y 23 en cada una de las palabras del menú

Tiene que quedarde esta formaautomáticamentese subrayacuando ya estánlos linksasignados

FIN

Page 13: Tutorial dreamweaver (Menu basico)
Page 14: Tutorial dreamweaver (Menu basico)