Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

Creacin de pginas Web con Adobe Photoshop y Dreamweaver

En la clase anterior se presento la interfaz de Dreamweaver y algunas de sus funciones. En este tutorial vamos a crear una pgina principal haciendo uso de Photoshop y Dreamweaver. 1. Crea el siguiente diseo en Photoshop (o bien otro diseo si lo quieres ms profesional) El nuevo archivo se cre con las siguientes caractersticas:

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 1

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

La idea es tener diseada la plantilla en Photoshop, te propongo este sencillo diseo para fines de explicacin. Como puedes observar en la parte superior tenemos un banner, a la izquierda un espacio para los botones y a la derecha un espacio ms grande para cargar los vnculos de los botones. 2. Ahora vamos a dividir el diseo en sectores, para ello toma la herramienta sector:

Selecciona la parte superior (el banner) con esa herramienta para crear un sector Pgina 2

ELABORADO POR: Lic. Henry F. Palma Vivas

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

De igual forma crea otro sector, este ser la parte izquierda (el espacio de los botones)

Y otro ms en la parte derecha (donde cargaran los vnculos)

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 3

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

Entonces tendremos tres sectores:

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 4

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

3. Ahora vamos a guardar este archivo como una pagina web (Archivo Guardar para Web y dispositivos)

En la proxima ventana selecciona la pestaa Original y luego presiona Guardar

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 5

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

Busca la ruta donde vas a guardar, dale como nombre INDEX, configura las opciones como se ven en la imagen y presiona Guardar

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 6

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

Si te aparece la siguiente ventana presiona OK

Listo, ahora solo debes abrirla en Dreamweaver y editar los vinculos.

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 7

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

En Dreamweaver ve al menu Archivo- Abrir- Busca el archivo que guardamos (INDEX) y presiona Abrir

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 8

Universidad Nacional Autnoma de Nicaragua CUR- MATAGALPA

En la proxima clase veremos como trabajar esta plantilla.

ELABORADO POR: Lic. Henry F. Palma Vivas

Pgina 9