Dreamweaver CS3- Semana 4

Creación de botones 

• 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

• Nuestra página debe contener cambios guardados, es decir, ya debe contener nuestro encabezado

• Como primer paso realizaremos nuestra base para poder crear nuestros botones, para eso, haremos uso de tablas, Seleccionaremos nuestra celda (cuerpo de la página) que es la celda que se encuentra abajo de nuestro encabezado, una vez seleccionada, insertaremos una tabla de 1 fila y dos columnas. 

• La primera columna de esta tabla será la base de nuestros botones, para poderla identificar le pondremos un color de fondo a esta celda, ejemplo: 

• Como siguiente paso configuraremos la anchura de nuestra celda, lo primero es seleccionar la celda donde irán nuestros botones, después en la parte inferior en la barra de propiedades modificaremos su anchura, en la opción "An" colocaremos la cantidad de 230 y notaremos como se reduce la anchura de nuestra celda. Ejemplo: 

• Para maximizar nuestra tabla, que nos abarque todo el ancho del cuerpo de la página, lo haremos es seleccionar nuestra celda, después en la parte superior de nuestra barra de propiedades se mostrará la codificación que lleva esta tabla, seleccionaremos el código <table>, se debe seleccionar toda nuestra tabla

• Nos iremos a la Vista Código, y se nos mostrará el código fuente que lleva nuestra tabla. Modificaremos nuestro código agregando la altura, en este caso con código HTML que sería con el código height, el dremweaver nos ayuda a colocar dichos códigos automáticamente, seleccionamos el código y agregamos "100%" 

• Una vez hecho el cambio en nuestro código fuente, volveremos a la Vista Diseño y para ver los cambios hechos en nuestra tabla, nos iremos a la vista previa con el navegador de Internet Explore, nos debe quedar de la siguiente manera: 

NOTA: Nos aparecerá dentro de nuestro navegador una advertencia, la cual nos dice que no permitirá ejecutar nuestra página web, daremos clic en la opción "Permitir contenido bloqueado" para que se pueda visualizar nuestros cambios en dicho navegador  

• Dentro de esta celda, haremos las celdas para cada botón, insertaremos una tabla de 7 filas y una columna, para distinguir donde irán nuestros botones, cambiaremos el color de nuestras filas, solo insertaremos 4 botones para lo cual nuestras filas deben quedar de la siguiente manera: 

En las celdas de color rojo, estarán nuestros botones

• Para hacer los botones de forma sencilla, se pueden realizar en Power Point con formas y texto, o bien Photoshop a como realizamos nuestro encabezado. Descargar todos los botones: 

NOTA: Al hacer los botones, se deben realizar dos modelos, esto es para colocar una imagen de sustitución en cada botón

BOTON 1

BOTON 2

BOTON 3

BOTON 4

BOTON 5

BOTON 6

BOTON 7

BOTON 8

• Una vez hecha las celdas para nuestros botones, y descargado nuestros botones, nos iremos a nuestra ficha Común> Imagen> Imagen de sustitución 

• En la siguiente ventana, modificaremos lo siguiente:

Nombre de la imagen: Colocar el nombre de "boton 1"

Imagen Original: Daremos clic en examinar y buscaremos el boton con el nombre "BOTON1"

Imagen de Sustitución: Daremos clic en examinar y buscaremos el boton con el nombre de "BOTON 5"

Los demás datos los dejaremos tal cual están y como paso siguiente daremos clic en ACEPTAR

• Para insertar los demás botones realizaremos el mismo paso anterior, un botón en cada celda (los botones deben de ir en las celdas de color rojo).

Imagen original: BOTON 2 - Imagen de sustitución: BOTON 6

Imagen original: BOTON 3 - Imagen de sustitución: BOTON 7

Imagen original: BOTON 4 - Imagen de sustitución: BOTON 8

• Para ver los cambios realizados nos iremos a la vista previa con el navegador de Internet Explore, no olvides guardar los cambios, nos debe quedar de la siguiente manera: 

NOTA: Nos aparecerá dentro de nuestro navegador una advertencia, la cual nos dice que no permitirá ejecutar nuestra página web, daremos clic en la opción "Permitir contenido bloqueado" para que se pueda visualizar nuestros cambios en dicho navegador  

Crear plantillas 

• Como primer paso modificaremos nuestro título de nuestra página base, para eso nos iremos a la parte superior de nuestra área de trabajo en la opción título modificaremos el nombre por "Tecnología en tus manos"

• También modificaremos nuestro pie de página, en los pies de página de un sitio web siempre se coloca el nombre por quien fue creada la página y algunos datos personales, en este caso pondré los siguientes datos 

Nombre: "Esta página fue creada por: Valeria de Jesús Cupido Méndez"

Correo electrónico: vcupidom.cejsm@gmail.com

INSTITUTO JUSTO SIERRA MÉNDEZ 

ESPECIALIDAD EN INFORMÁTICA  

NOTA: Pueden copiar estos datos, pegar en dreamweaver y modificarlos 

Para modificar el tamaño, color, tipo y ajuste de texto, podemos hacerlo desde la barra de propiedades 

• Generaremos un margen a nuestro cuerpo de pagina, para eso como primer paso, daremos clic en nuestra celda donde será nuestro cuerpo de la página, notaremos que nuestro cursor se encuentra predeterminado en la parte de en medio de nuestra celda, modificaremos esta alineación desde la barra de propiedades, en la opción "Alineamiento vertical del contenido de la celda" (Vert) y la cambiaremos a la opción "Superior"

• Insertaremos una tabla de 3 filas y una sola columna
  
• Reduciremos el ancho de las filas 1 y 3, desde la barra de propiedades, en la opción "An" colocaremos 60 y nos debe quedar de la siguiente manera: 

• En la parte central es donde pondremos el contenido de nuestra página, como esta página nos servirá de base para las demás páginas, no colocaremos ningún contenido, para eso solo colocaremos textos de referencias los cuales podrán modificarse al momento de guardar nuestro archivo como plantilla.
• Para insertar un texto de referencia, primero escribiremos en la parte central el texto "Escribe aquí tu texto...", seleccionamos el texto (sombrear), al menú Insertar> Objetos de plantilla> Región editable , o bien utilizar la combinación de teclas Ctrl+Alt+V, en la siguiente ventana que nos aparecerá damos clic en Aceptar, y la ventana que nos aparece como siguiente solo cambiaremos el nombre a "Región Editable" y clic en Aceptar 

 De la misma manera pondremos nuestros botones editables, repitiendo el paso anterior con cada uno de nuestros botones y en nombre colocar "Boton editable"

• Ahora Guardaremos nuestro archivo, nos iremos al menú Archivo> Guardar como plantilla 

• En la ventana que nos aparece, es para guardar la plantilla en nuestro sitio local, lo primero que nos pide es escoger el sitio con el que estamos trabajando y en la parte inferior nos pide un nombre el cual pondremos como "Plantilla 1" y clic en Guardar

• Nos aparece una ventana para actualizar vínculos y damos clic en "si"

• Como paso siguiente cerramos nuestra página de dreamweaver
• Volvemos abrir dreamweaver y nos iremos al menú Archivo> Nuevo > Página de Plantilla> Seleccionamos nuestra plantilla que creamos "Plantilla 1" y damos clic en Crear, nos aparecerá nuestra plantilla en nuestra área de trabajo 

• Para crear nuestra primera página de inicio, modificaremos nuestro contenido, en la Región editable podemos modificarlo poniendo un texto y una imagen, esto ya es a creatividad de cada uno en este caso yo solo pondré un texto de ejemplo, quedaría de la siguiente manera: 

• Para guardar los cambios nos iremos a vista previa en el navegador Internet Explorer y nos aparecerá la ventana de Guardar cambios, en esta caso modificaremos el nombre del documento y le pondremos INICIO (nombre del primer botón), y despues clic en Guardar (se debe guardar en la carpeta de "Páginas", de esta manera tendremos dos páginas creadas a partir de esta plantilla base. 

• Y de la misma manera con nuestra plantilla base, iremos haciendo nuestras demás páginas para nuestros botones, repetiremos nuestro procedimiento anterior, comenzando desde cerrar dreamweaver y abrir la "plantilla 1", iremos modificando el texto de nuestras páginas de manera que cada página concuerde con el título del botón y no olvides guardar cambios y cambiar el nombre de las páginas con el nombre del botón correspondiente 

• Una vez creada nuestras páginas para cada botón pasaremos a vincularlas con sus botones correspondiente, para esto abriremos nuestra página base en dreamweaver la de nombre "index", paso siguiente seleccionaremos nuestro primer botón que es INICIO, nos iremos a la barra de propiedades y en la opción Vínculo daremos clic en la carpeta que se encuentra alado y buscaremos la página de nombre INICIO, y ya hemos vinculado nuestra página. 

• De esta manera haremos con todos nuestros botones de nuestra página index, vincularemos todos nuestros botones con su página correspondiente, al vincular todos los botones de nuestra página index, nos pasaremos a la nuestro panel de Archivos y seleccionaremos nuestra siguiente página que es la de nombre INICIO, la cual haremos lo mismo para vincular los botones de esta página, de la misma manera se harán con las demás páginas hasta que todas las páginas contengan sus botones vinculados, al finalizar nos iremos nuevamente a la página de base "index" daremos clic en vista previa en el navegador Internet Explorer y notaremos los cambios en nuestra página  

Para el examen teórico vendrán preguntas parecidas al examen diagnostico que realizamos la clase anterior y algunas más del tema que veremos la clase de mañana 

La calificación del examen será divido en dos partes 

Teórico: 30%

Práctico: 70%

Estudien los temas anteriores y pongan en practica todo lo que hemos realizado en clases, ÉXITO mañana ! No les deseo suerte porque suerte es para los que no estudian !!! :)