TUTORIAL DE DREAMWEAVER CS4

Marbella Rodrguez Salcedo

MEN DEL TUTORIAL

Entorno de trabajo Configurando el entorno de trabajo Pantalla de bienvenida Diferentes barras de dreamweaver

ENTORNO DE DREAMWEAVER CS4

CONFIGURANDO LA INTERFAZ DE DREAMWEAVER CS4

Para personalizar la interfaz de trabajo y tener a la mano nuestros archivos de nuestra web hacemos lo siguiente: 1) En el men Ventana elegimos la opcin Diseo de espacio de trabajo. 2) Existen diferentes vistas (Clsico, Programador, Diseador, etc) seleccionamos la vista Clsico.

Probamos entre las distintas vistas disponibles para ver sus diferencias.

PANTALLA DE BIENVENIDA.
Abrir elementos recientes: Enlista los doctos abiertos recientemente. Crear Nuevo: Enlista el tipo de pginas que Dw puede generar Elementos destacados

Generamos un nuevo archivo html. Pgina en blanco HTML Crear

BARRA INSERTAR
Contiene Iconos que representan los elementos que podemos agregar a nuestra pgina Web. Esta dividida por categoras que se dividen en fichas (Diseo, Formularios, Datos, Texto, etc)

INSPECTOR DE PROPIEDADES
Se encuentra en el inferior de la ventana. Aqu se encuentran las opciones del texto, fuente, tamao, posicin, color, etc.

Es versatil, p.e. si agregamos una tabla este cambia sus propiedades por las de la tabla para poder ajustar el tamao, ancho del borde, etc.
Si se llega a cerrar hacemos lo siguiente: Ventana Propiedades

BARRA DE DOCUMENTO.

Tiene varios mens

Descargar archivos del servidor

Tiene diferentes vistas

Ttulo de la pgina Visualizar en un explorador

LOS PANELES.
Contiene informacin sobre acciones que ejecutamos en nuestra pgina. Mediante las flechas podemos acceder a cada propiedad de ellos

CREANDO UN SITIO DE DREAMWEAVER

Para crear un sitio de dreamweaver hacemos lo siguiente: En la pantalla de bienvenida elegimos la opcin Sitio de Dreamweaver. Se abre un cuadro de dialogo donde elegimos la pestaa de Avanzadas asignamos un nombre y elegimos la carpeta de raz local que es donde guardaremos todos los archivos del sitio y tambin se elige la carpeta donde se alojaran todas las imgenes de la pgina. Podemos activar o desactivar el cach. Finalmente podemos ver nuestro sitio creado en el panel de Archivos (lado derecho).

1) 2)

3)

1 2 3

CREANDO UN DOCUMENTO.

Existen las siguientes formas de crear un nuevo archivo:

1) En el panel de Archivo hacemos clic derecho sobre la carpeta en la cual lo vamos a crear y seleccionamos Nuevo archivo y escribimos el nombre del archivo. Para abrirlo damos doble clic sobre el.

2) Desde la pantalla de bienvenida Crear Nuevo HTML

3) Desde Archivo Nuevo Pgina en blanco HTML

AGREGAR IMGENES

Para insertar imgenes a nuestra pgina debemos hacer lo siguiente: 1) Debemos agregar las imgenes a la carpeta images, podemos hacerlo de forma manual. Y las podremos visualizar de esta forma: 2) Arrastramos la imagen deseada hacia nuestro nuevo

documento y nos aparece un recuadro en donde podemos

insertar un texto alternativo (cuando no se abre la imagen

podemos saber de que se trataba) y aceptamos.

3) Y as agregamos la imagen a nuestro documento.

ACTIVIDAD
Navega en internet, recopila imagenes de un tema en especifico y descargalas en tu pc. Empieza la organizacion de tu pagina creando una carpeta denomida imagenes (Recuerda que tienes que guardarla aparte en tu usb para seguir trabajando con ellas posteriormente). Tiempo estimado 15 mins.

AGREGAR TEXTO

Para insertar texto a nuestra pgina debemos hacer lo siguiente: 1) Trabajamos en la vista Diseo y escribimos el texto que deseamos publicar. 2) Para darle formato al texto nos vamos a Formato y ah aparecen una lista de propiedades que podemos modificar en nuestro texto.

3) Si modificamos el color aparece un cuadro de dialogo

en donde podemos determinar una etiqueta para personalizar ese estilo del texto y despus aplicarlo en futuros textos del mismo tipo.

ETIQUETAS META

Sirven para que los motores de bsqueda (Google) encuentren nuestra pgina en internet. Para insertarlas hacemos lo siguiente:

1) Vamos al men Insertar HTML Etiquetas Head Palabras Clave

Tambin podemos agregar una descripcin para nuestra pgina.

Agregamos palabras clave ej. Restaurant, gastronoma, hotel, bar, agencia y aceptamos.

Separadas por comas

HIPERVNCULOS
1)

Enlaces bsicos : Seleccionar el texto que deseamos convertir en hipervnculo.

2) En el selector de propiedades buscamos el campo vnculo y seleccionamos el botn del lado derecho que es una carpeta. 3) Ah buscaremos el archivo que vamos a Vincular, ya sean archivos u otras pginas. 4) Para probar los vnculos se hace desde

vista previa (F12) y damos clic sobre el rea marcada.


1)

Enlaces externos
Seleccionar el texto que deseamos convertir en hipervnculo.

2) En el selector de propiedades buscamos el campo vnculo y escribimos el url de la pgina que queremos vincular. En este ejemplo utilizamos facebook. www.facebook.com 3) Para probar los vnculos se hace desde vista previa (F12) y damos clic sobre el rea marcada.

ANCLAJES
Anclajes: Son vnculos que nos trasladan de un lado a otro dentro de la misma pgina.

Revisa el video proporcionado y realiza un ejemplo sencillo de un anclaje

Enlace a un correo. Revisar video proporcionado Enlace a un archivo. Revisar video proporcionado Enlace a una imagen. Revisar video proporcionado

DAR FORMATO AL TEXTO.

1)

Cmo editamos el formato de etiquetas?

Seleccionamos el ttulo y en el inspector de

propiedades en el men emergente elegimos

Encabezado 1. Si nos vamos a la vista Cdigo

vemos que el texto esta dentro de la etiqueta h1.

Nota: Los textos que estn dentro de la etiqueta h1, tendrn el formato del encabezado 1.

Si queremos modificar el formato del encabezado, seleccionamos el texto con el formato de encabezado y vamos al panel Estilos CSS ah seleccionamos el icono de Nueva Regla CSS y nos aparece el siguiente cuadro de dialogo.

Elegimos como tipo de selector la Etiqueta y con esto se reconfigura una etiqueta ya existente le damos h1 y aceptamos nos aparece un cuadro de dialogo en donde podemos elegir las propiedades de la Etiqueta como fuente( familia, tamao, color,etc) y se cambian el titulo a las nuevas propiedades

Si queremos hacer ms reglas hacemos los mismos pasos, solo hay que indicar si son prrafos, ttulos, subttulos, etc

LISTAS DE FUENTES.

Aprenderemos a aplicar diferentes tipos de fuentes

Seleccionamos el texto que vamos a editar en el inpector de propiedades elegimos el tipo de fuente que utilizaremos, ojo: Debe estar activada la casilla CSS y no la de HTML.

1)

2) Escribimos el nombre que le daremos a la nueva clase, en este caso R1. Resultado

Tiene 3 fuentes o ms porque si el explorador no encuentra en el explorador del usuario una fuente ocupara la siguiente o la ultima

COMO CREAR UNA NUEVA LISTA DE FUENTES.

1)

Creamos una nueva lista de fuentes que tendr: Verdana, Tahoma, Arial, Times New Roman y Sans Serif. Elegimos Editar lista de fuentes y aceptamos. En el cuadro de dialogo elegimos las fuentes ya mencionadas y las agregamos con el botn delas dos flechitas y finalmente aceptamos.

HACIENDO LISTAS

Existen tres tipos de listas en dreamwaver

Sin ordenar (con vietas)

1) 2) 3)

Seleccionamos el texto Damos click en el botn Lista sin ordenar Se alista el texto con vietas


1) 2) 3)

Lista ordenada (Lista numerada)

Seleccionamos el texto Damos click en el botn Lista ordenada Se alista el texto con nmeros al inicio de cada lnea. Si insertamos un espacio y escribimos otra lnea se agrega un nmero en la lista.

Lista de definicin (Glosario)

1) 2) 3)

Seleccionamos el texto
Vamos al men Formato Lista Lista de definicin Automticamente el texto se ordena en prrafos. Agrega sangras a la lista.

TABLAS:

Revisa los videos referentes al tema Tablas con ellos aprenders a crear una tabla (6.2), trabajar con bordes (6.3), colorear la tabla (6.4), alinear contenido de una tabla (6.5) ordenar el contenido de una tabla (6.6) y anchos de tablas (6.7).

PLANTILLAS EN DREAMWEAVER

Aspectos a considerar:

a) Cada vez que deseamos crear un sitio Web, tenemos que tener en cuenta que las pginas deben seguir un formato uniforme. b) Las plantillas son tiles si desea asegurarse de que todas las pginas del sitio comparten determinadas caractersticas, independientemente de si est creando un nuevo sitio a si est actualizando un sitio existente.

c) Al crear una plantilla, podr indicar qu elementos de la pgina debern permanecer constantes (no editables) y qu elementos podrn modificarse.
d) Permite a travs de la creacin de una sola pgina todo el entorno web, si se requiere hacer un cambio solo se hace en la plantilla y se modifica en todas las paginas relacionadas con la plantilla

Pasos para crear una plantilla

Generamos una pagina que ser nuestra plantilla Archivo Nuevo HTML Creamos la plantilla con una tabla 3Fx1C (Insertar Tabla) y la centramos (seleccionamos y alineamos al centro). Agregamos los siguientes textos en las filas cabecera, botones y contenido

2 1

El siguiente paso es definir que partes van a estar fijas en nuestra pgina, en este caso botones y cabecera estarn fijos. Cmo indicamos que la fila de contenido va a ser una regin editable?
1)

Guardamos nuestro archivo como plantilla Archivo Guardar como plantilla y aparece el siguiente cuadro de dialogo, lo nombramos plantilla y guardamos Y aparece una carpeta llamada Templates que contiene nuestro archivo con la extensin .dwt (dreamweaver template) Ahora agregamos la regin editable Insertar Objetos de plantilla Regin editable y aparece un cuadro de dialogo donde aceptamos y la plantilla se modifica de la siguiente forma. Guardamos y cerramos.

2)

3)

1) Realizamos otras pginas a partir de la platilla creada: Archivo NuevoPgina de plantillas Plantilla que creamos 2) Abre la plantilla y ah podemos notar que nos deja modificar: slo el rea del contenido. 3) Modificamos la plantilla con algn texto y la guardamos con un nombre representativo. 4) Generamos otra pgina siguiendo los pasos del punto 1. Agregamos algn texto y la guardamos con otro nombre. Ya tenemos dos pginas

Nota: Si queremos modificar cabecera o botones lo hacemos directamente en la plantilla, en este caso pondremos los botones como links a las pginas que creamos anteriormente. Guardamos y aparece un cuadro de dialogo y seleccionamos actualizar

Checamos que las dos paginas estn guardadas y la plantilla. Ejecutamos la plantilla (F12). Y queda algo as donde se estn linkeadas las dos paginas.

Fuente: http://www.youtube.com/watch?v=jbP2NEKv49Q