Dreamweaver Plantillas En este ejercicio veremos el uso de plantillas en Dreamweaver, a la vez que repasamos algunos conceptos anteriores.

Para comenzar crearemos un sitio nuevo llamado ejercicios (dreamweaver/sitio/nuevo sitio) y completaremos los diferentes pasos para crearlo. Para lo cual crearemos una carpeta llamada ejercicios y dentro de ella otra llamada imagenes. En el panel de creacin de sitios definiremos estas carpetas para el sitio y las imgenes. Una vez hecho esto estamos en condiciones de comenzar el ejercicio.

Para comenzar crearemos un archivo nuevo. Tambin podemos trabajar sobre un archivo existente pero para este ejercicio armaremos un archivo nuevo. Para el archivo definiremos las propiedades de la pagina.

Una vez definidas las propiedades de la pagina procederemos a crear la estructura base que conformar la plantilla. Para esto vamos a utilizar una tabla de 5 filas y 1 columna, con un ancho de 800 px, header none, como se observa en la imagen.

El resultado debe ser similar al que se observa en la imagen.

El paso siguiente ser modificar las propiedades de la tabla para aportar el aspecto deseado.
Texto: cuerpo 24 color #333333 Texto: cuerpo 10 color #CCCCCC

Color fondo celda #66FFCC

Color fondo celda #003366

40 px alto 25 px alto

25 px alto

El paso siguiente ser incorporar el menu en la segunda fila de la tabla. Para esto colocamos el cursor en esta celda e insertamos una nueva tabla, 1 fila y 5 columnas. Dentro de cada columna iremos insertando texto para los items del menu como se aprecia a continuacin. No alteraremos el ancho de las celdas, en el caso de querer hacerlo podemos definir un ancho del 20% para cada una.

Una vez establecida la estructura base vamos a guardar la plantilla. Para esto vamos a Archivo/Guardar como plantilla. Aparece un panel como el que observamos a la derecha. Seleccionamos el sitio Ejercicios que creamos anteriormente, le damos el nombre plantilla1 y hacemos click en Guardar. El paso siguiente ser definir que zonas de la plantilla sern editables y cuales permanecern inalterables.

Para esto vamos a colocar el cursor en la cuarta fila de la tabla y seleccionamos mediante las etiquetas (TD) la fila completa (haciendo click y apretando control obtenemos el mismo resultado) y mediante el men Insertar/Objetos de plantilla/ Regin editable, hacemos la zona edtiable. Al hacer esto vamos al panel siguiente en donde definiremos nombre, en este caso contenido y aceptamos.

Una vez hecho esto veremos como aparece un recuadro con el nombre que hemos definido para la region editable, como podemos ver a la derecha. Una vez hecho esto guardamos el archivo, ya estamos en condiciones de aplicar nuestra plantilla a las pginas. Para continuar crearemos un archivo nuevo, seleccionaremos Plantilla en las dos solapas que se nos presentan en la parte superior del panel, seleccionamos el Sitio Ejercicios de la primera columna, seleccionamos plantilla1, nos mostrar la vista previa a la derecha. Aceptamos y estamos en condiciones de continuar.

Nos encontraremos con el archivo que editamos con anterioridad pero si nos posamos sobre las regiones que no definimos como editables veremos que el cursor cambia su aspecto por un signo de prohibido, lo cual nos indica que no podemos alterar estas zonas. Para continuar el ejercicio editaremos la zona editable para ir creando las direfentes pginas. Para esto posamos el cursor sobre la zona editable Contenidos y all dentro insertamos una tabla. 3 Filas, 1 Columna, 100%, header none. Una vez que insertamos la tabla editaremos el formato para cambiar colores y dimensiones de las celdas como observamos abajo. Primero deberemos dividir la tercera fila en 3 columnas, como se observa en la imagen.

150 px alto

color fondo #0099FF

200 px alto

color fondo #999999

20 px ancho

Una vez completada la edicin de la tabla, podemos guardar la pagina y pasar a crear y editar la siguiente pagina. Para esto veremos otro metodo de aplicar una plantilla a una pagina. Creamos un archivo nuevo (Archivo / nuevo), vamos al panel activos y seleccionamos el icono de plantillas, nos mostrar las plantillas disponibles (plantilla1) con el icono de drewmweaver. Seleccionamos la plantilla que creamos y hacemos click en el botn aplicar del panel. Vern como se aplica la plantilla creada. Procederemos igual que en la plantilla anterior a editar la zona contenidos para generar el diseo de nuestra pagina. Para esto vamos a insertar una tabla de 1 fila y 3 columnas, con color de fondo #999999 con un alto de 300 pixels como observamos en la imagen de abajo.

Marcador de imagen

20 px ancho

Una vez finalizada la edicin del contenido, agregado el marcador de imagen y la incoporacin de un titlo H1, un titulo H2 y un texto simulado, guardamos la pagina y damos por concludo el ejercicio.