Lic. José Huapaya – Esp. Informática y Computo – UNIV.

SIMÓN BOLIVAR

PAGINA WEB DE MARCOS EN DREAMWEAVER

CREAR PAGINA DE MARCOS CON DREAMWEAVER

1. Crear una estructura de carpetas como se indica:

2. Configurar un sitio Web:

3. Indicar el nombre del proyecto y la carpeta principal del proyecto:

4. Seleccionar Crear Nuevo- HTML

Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

5. Dejar la configuración como aparece:

6. Realizar:

Saldrá la siguiente ventana en la

cual haremos un clic en aceptar

7. Visualizaremos en vista diseño una pantalla dividida en tres regiones

Cada región es una página
web, por lo tanto
procederemos a guardar cada
región como una página web
cada una.

8. Ejemplo de cómo guardar cada una de las páginas de marco; primero sitúo el
cursor del mouse en la región superior, luego a menú archivo-guardar marco
como:

Y lo guardo con el nombre de titulo_banner

Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

9. Lo mismo haremos con las otras dos páginas:

Me sitúo en la región izquierda, luego Menú Archivo – guardar marco como
Y lo guardo con el Nombre de enlaces_botonera
Me sitúo en la región derecha, luego Menú Archivo – guardar marco como
Y lo guardo con el Nombre de principal_contenido

En la carpeta proyecto web, se

debería visualizar así:

10. Por ultimo faltaría guardar las paginas como un todo, es decir como una
página web de marcos para enlazar las demás páginas con sus respectivos
elementos: Nos vamos a menú: Archivo –Guardar todo

Guardaremos por
convención
internacional con el
nombre de
index.html, ya que
de esa manera es
como se reconoce
la página web
dentro de un
servidor o hosting

La página web Index.html, se

habrá guardado y lo que haremos
es agregar el siguiente texto en
cada región

Luego, procederemos a colocar

un título: Mi primera página web

Además en la región izquierda

las palabras enlace1, enlace2,
etc., que pueden ser de tipo texto
o de tipo imagen como botones.

Por ultimo en la región derecha se

colocara el texto enlace1 y un
texto de bienvenida
Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

11. Luego presionaremos la tecla de funciones F12

Aquí presionaremos el
botón aceptar para verlo
desde cualquier
navegador de internet
(por defecto el
predeterminado de tu
computadora)

12. Luego de cerrar el navegador crearemos las demás páginas web, llamadas
enlace2.html, enlace3.html y enlace4.html (menú archivo nuevo – HTML -
crear), luego escribimos el título de la página como por ejemplo Enlace2 y lo
guardamos con menú archivo –guardar como

13. Y por último en esta sesión, nos dedicaremos a vincular cada enlace con las
páginas web creadas.

Ejemplo, seleccionamos la palabra ENLACE2 (lo sombreamos), luego vamos

a menú –insertar hipervínculo
En la opción Vinculo nos
vamos al icono de la
carpetita seleccionamos
la página web
enlace2.html

Y en la opción Destino,
seleccionamos la opción
mainFrame

Lo mismo haremos con la palabra ENLACE3 y ENLACE4, no olvidar que en

ENLACE1 vincularemos con la página web principal_contenido.html
Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

TRABAJAR CON TABLAS EN DREAMWEAVER

Se va a utilizar Tablas para ordenar nuestra información

Menu – Insertar – Tabla
Indicaremos la cantidad de filas y columna

Para ello en nuestro ejemplo, colocaremos una tabla de 1 fila por 2 columnas
en la región superior donde se encuentra el titulo

Logo Nombre de la empresa

Lo mismo haremos en la región izquierda, colocaremos una tabla de 6 filas

por una columna

Y colocaremos los enlaces que necesitemos

Nota: quitar o añadir bordes a una tabla, combinar celdas de una tabla
Modificar la página principal de Bienvenida (región derecha)
Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Colocar como título bienvenidos:

Insertar la siguiente tabla:

Nombre video:
Descripción:

Insertar un enlace a un Video de YouTube

Ingresar a : www.youtube.com

Buscar el video de promperu y hacer clic derecho una vez que está en modo
miniatura YouTube

Seleccionar la opción copiar código de inserción

Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Luego me situare en la tabla del lado derecho, voy a la ficha código y

presionar las teclas CTRL+V (pegara el código), volver a modo diseño y
presionar LA TECLA de función F12

Aparecerá de esta manera:

<iframe width="640" height="360"
src="http://www.youtube.com/embed/MBtfidpnEmU?feature=player_detailpag
e" frameborder="0" allowfullscreen></iframe>

Y se verá así:

Nos mostrara esta ventana y se verá el cambio.

parte de color plomo
indicando que el video
ya ha sido enlazado
pasando a modo
diseño:
Luego presionar F12-
aceptar lo que indica la
Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Insertar Botones: en la tabla de la Pagina Enlaces

En este lugar o Región de Marco
de Dreamweaver, cambiaremos
los textos por botones que
crearemos usando photoshop:

Lo primero que haremos dentro de esta área es imprimir pantalla para capturar las
dimensiones del tamaño que tendrá cada botón,

Abrimos photoshop_

Menu archivo –nuevo

En esta ventana hacemos un cli ok,

y en el espacio de trabajo en
blanco, presionamos Ctrl + v para
pegar el área capturada
Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Seleccionamos la
herramienta lupa y
ampliamos la
visualización, para saber
exactamente el tamaño
de las filas de la tabla

Luego con la herramienta marco rectangular, seleccionamos

Presionamos ctrl+c para capturar y copiar las dimensiones

Nos vamos a menú – archivo –nuevo – ok

Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Bien ahora, Que tenemos el tamaño de nuestro botón, le podemos dar un efecto
degradado y agregarle un texto

Ahora, seleccionaremos la H. Texto y procedemos a agregar un texto:

Y guardaremos el botón en la sub carpeta imagen de nuestra carpeta principal

Proyecto web:

Haremos lo mismo con los demás botones, editando solo el texto que ira en cada
botón.

Sugerencia: el nombre de cada botón será de acuerdo a los enlaces que vinculara,
ejemplo

botonInicio, botonContactenos, botónTours, etc

Lic. José Huapaya – Esp. Informática y Computo – UNIV. SIMÓN BOLIVAR

Luego insertaremos cada botón en la celda correspondiente: