Dreamweaver CS3 - INSTITUTOJSM Semana 3

Crear imagen de encabezado 

Para crear una imagen de encabezado profesionalmente utilizaremos el programa Photoshop, y para esto seguiremos los siguientes pasos:

1. Descargar la imagen de logo que utilizaremos, en este caso descargar la imagen del blog. Es la imagen siguiente:

2. Abrir el programa Photoshop

3. Crearemos el área de nuestro encabezado el cual debe coincidir con los datos de altura y anchura de nuestro encabezado en Dreamweaver

En el programa Photoshop nos iremos a Archivo>Nuevo… 

Nos aparecerá la siguiente ventana, en la cual editaremos los datos, de forma que queden como lo muestra la pantalla

Una vez configurados los datos, damos clic en OK 

Lo que obtuvimos es un área rectangular que coincide con nuestro encabezado de Dreamweaver

4. Estableceremos un color de fondo a nuestra área, para eso seleccionaremos nuestra herramienta llamada Relleno, damos clic derecho y escogemos la opción Herramienta de Pintura 

 Para predeterminar un color en especial damos clic en la configuración de color frontal y escogemos el color de nuestro agrado, y damos clic en OK

Y como paso siguiente daremos un clic sobre el rectángulo, para rellenar del color deseado nuestro encabezado 

5. El segundo elemento que tendrá nuestro encabezado será la imagen (la que descargamos del blog), para esto nos iremos al menú Archivo>Abrir>Seleccionar la imagen donde la guardamos>Abrir

6. Como paso siguiente, visualizaremos nuestras dos elementos en ventanas distintas. Nuestros dos elementos son los siguientes:  el rectángulo que es nuestra área de encabezado y nuestra imagen 

Para poder visualizarla en ventanas distintas, daremos clic derecho en nuestro primer elemento, nos aparecerá un menú, el cual daremos clic en la opción Mover a una nueva ventana, y este mismo procedimiento realizarlo con el segundo elemento.

Como resultado obtendremos los elementos en diferentes ventanas a como se muestra en la siguiente imagen:

7.  Seleccionamos nuestra herramienta Mover, seguidamente arrastramos nuestra imagen a la área de encabezado, que es nuestro primer elemento, nos debe quedar como la siguiente imagen: 

8.  Cerramos nuestra imagen, dando un clic en el botón cerrar de la ventana de nuestro segundo elemento (imagen).

Quedando únicamente la ventana de nuestros dos elementos combinados, que son el área rectangular de nuestro encabezado y la imagen, ajustamos nuestra ventana al modo que se nos haga mejor visible para trabajar 

9. Para poder darle un tamaño a nuestra imagen, seleccionamos nuevamente la herramienta mover, damos un clic en la imagen y después en nuestro teclado oprimimos la combinación de teclas Ctrl + T para que nos de la opción de ajustar tamaño a nuestra imagen, ajustamos de manera que quede como la siguiente imagen y tecleamos la tecla ENTER:  

IMPORTANTE: Cuando usemos la combinación de teclas Ctrl + T, después de haberla usado, para finalizar hay que teclear la tecla ENTER, si no se teclea ENTER nuestro objeto seleccionado volverá a su formato de origen y no hará ningún cambio. 

10. Insertaremos nuestro tercer elemento que es el texto, para esto daremos clic en la Herramienta Texto, y sobre una de las áreas de nuestro encabezado daremos clic para agregar el texto

Antes de escribir el texto modificaremos el tamaño, tipo, color y efectos del texto

Tamaño: 34pt

Tipo: Lucida Handwriting

Color: Amarillo

Texto Centrado

Escribimos nuestro texto: Tecnología en tus manos

11. Para poder mover nuestro texto, utilizaremos nuestra herramienta mover, dando un clic sobre el texto y moviendo de manera deseada

12.Seleccionamos nuevamente la herramienta texto y damos un clic en nuestro texto escrito. Para darle un efecto, sombrearemos todo el texto como, seguidamente daremos clic en texto deformado> Estilo: Bandera

Configuramos nuestro efecto a nuestro agrado, y después damos clic en OK

13. Para darle otro efecto al texto nos iremos a la capa de texto, daremos clic derecho>opciones de fusión

En la parte de Estilos seleccionaremos Resplandor exterior, cambiaremos el color, la opacidad, modo de fusión y extensión, como lo muestra la siguiente imagen: 

14. Selecciono la herramienta mover nuevamente, damos un clic en el texto y después en nuestro teclado oprimimos la combinación de teclas Ctrl + T para que nos de la opción de ajustar tamaño a nuestra texto, extendemos de manera que quede como la siguiente imagen y tecleamos la tecla ENTER: 

IMPORTANTE: debemos dejar un espacio al final de nuestro margen de encabezado, este espacio no debe contener ni texto ni imagen

15. Como ultimo paso dividiremos nuestro encabezado en 6 partes, utilizaremos la herramienta sectores y después se realizan recuadros de trazos, quedando como la siguiente imagen: 

El encabezado debe tener 6 sectores, el ultimo sector debe estar vacío, es decir sin elementos, primero guardaremos nuestro encabezado como formato Photoshop, para esto nos iremos al menú Archivo>Guardar como … >colocamos un nombre "encabezado" y buscamos nuestra carpeta en la que vamos a guardar, esta carpeta debe ser la que se encuentra en nuestras carpetas de sitio web, la que de nombre imágenes > Guardar

Se nos aparecerá una ventana de opciones de formato, simplemente damos OK. 

Después guardaremos nuestro encabezado como formato JPEG, nos iremos al menú Archivo>Guardar para web y dispositivos>escogemos el tipo de formato JPEG> Guardar 

Colocamos un nombre abreviado: «enc» y buscamos la carpeta imágenes de nuestras carpetas de sitio web y clic en Guardar

  

 Se nos aparecerá una ventana como la siguiente y simplemente damos clic en OK

Colocar imágenes de encabezado en Dreamweaver

1. Recordemos que como primer paso, es administrar nuestro sitio, en el que vamos a trabajar.

Sitio> Administrar sitios…> Escogemos el sitio que creamos anteriormente> Listo

Como ya nosotros hemos creado una pagina básica de html, nos iremos a nuestro panel de Archivos, buscaremos nuestra página web local que se encuentra dentro de la carpeta páginas con el nombre de index, damos doble clic sobre ella o bien tecleamos la tecla ENTER

Daremos un clic en la celda donde será nuestro encabezado, después insertaremos una tabla dentro de ella, la cual debe tener 1 fila y 6 columnas, quedando de la siguiente manera:   

Como paso siguiente, insertaremos nuestras imágenes de encabezado en cada una de las celdas creadas

1. Daremos un clic en la primera celda, después nos iremos a nuestra etiqueta Común, seleccionaremos la opción Insertar imagen, buscamos la primera imagen que se encuentra dentro de nuestra carpeta de sitio web con nombre Imágenes y damos clic en Aceptar 

2. Se nos aparecerá una venta de atributos a la que simplemente daremos clic en Aceptar 

Nos quedará de la siguiente manera:

Repetimos el paso anterior con las demás celdas, de manera que queden las seis imágenes en cada celda. IMPORTANTE: Deben seleccionar celda por celda, no cometer el error de colocar las imágenes todas juntas en una sola celda. La forma correcta en la que debe quedar es la siguiente:

Para quitar los espacios que quedan en nuestras imágenes, se hará de la siguiente manera:

1. Seleccionamos nuestra primera imagen y observamos en nuestra barra de propiedades el ancho que tiene esta imagen, por ejemplo la siguiente imagen me muestra que su Ancho es de 227

2. Seleccionamos la celda que esta al costado de esta imagen, que es la celda que marca un espacio vacío, esta celda no contiene un ancho, lo que nosotros haremos es colocar el mismo ancho de la imagen de alado a este espacio para que mi imagen abarque ese espacio vacío y tecleo la tecla ENTER. Nos debe quedar de la siguiente manera: 

Repetimos el paso anterior con cada imagen, observando su ancho y colocando en la celda vacía del costado de cada una el ancho que lo contiene, haremos esto con todas, menos con la ultima imagen. Quedando de la siguiente manera: 

NOTA: Si hacemos este mismo paso para la ultima imagen, lo que sucederá es que todas las imágenes volverán a separarse, para evitar esto, duplicaremos mejor nuestra ultima imagen en el espacio vacío.

1. Seleccionamos nuestra ultima imagen, y en la barra de propiedades buscamos la opción Origen, seleccionamos el texto y damos clic derecho y copiar, para después pegarlo en el origen de la celda vacía 

Nos quedará de la siguiente manera:

Para verificar que nuestro encabezado este cubriendo todos los márgenes y se vea correctamente, daremos clic en el visualizador de Internet Explorer para verificar, no olviden guardar cambios, nuestra página se debe ver de la siguiente manera: