PLANTILLAS
Tutorial de práctica
Plantillas en DW
Las plantillas son archivos que estandarizan la forma en que se
ven los sitios web, de esta manera podremos tener el mismo
layout dentro del sitio web de una manera más sencilla.
Plantillas en DW
1.
2.
3.
4.
5.
Cortar diseño en Photoshop
Reproducir diseño en Dreamweaver
Insertar región editable
Salvar plantilla
Crear nuevas páginas a partir de la plantilla
Recordatorio

Identificar áreas grandes y específicas del diseño, tomando en
cuenta aquellas que cubren todo el campo de trabajo y aquellas que pueden ser
expandibles.



Trazar líneas guías, cuidando que queden en los lugares exactos
Cortar y revisar los cortes, que todos estén correctos
No se olviden de crear un sitio nuevo en DW cada vez que
trabajen con un sitio nuevo.
Recordatorio

Cortar en PS

OJO: no deben quedar “sectores” o “Slices” grises, si aparecen
significa que el cortado esta mal hecho.
Recordatorio

Reproducir diseño en DW
No se les olvide identificar la parte del diseño que será expandible con el
contenido que le insertemos al sitio
Recordatorio

Insertar región editable
La región editable deberá estar en la parte expandible que definimos antes
Recordatorio
2.
Salvar la plantilla
Recordatorio

Recuerden qué:

La plantilla creará un nuevo
folder llamado Templates.

A partir de este archivo
crearemos los nuevos archivos del
sitio web, ya no duplicaremos el
archivo “plantilla.dwt” porque
esto creará errores en el sitio.

Deben de cerrar los archivos al
trabajar con plantillas y
viceversa.

Si en algún momento los archivos
pierden el enlace con la plantilla
pueden aplicar la plantilla de
nuevo al archivo con el riesgo de
perder lo trabajado.

Salven, salven, salven el trabajo
Recordatorio

Salvar la plantilla
Recordatorio

Recuerden qué:

La plantilla creará un nuevo
folder llamado Templates.

A partir de este archivo
crearemos los nuevos archivos del
sitio web, ya no duplicaremos el
archivo “plantilla.dwt” porque
esto creará errores en el sitio.

Deben de cerrar los archivos al
trabajar con plantillas y
viceversa.

Si en algún momento los archivos
pierden el enlace con la plantilla
pueden aplicar la plantilla de
nuevo al archivo con el riesgo de
perder lo trabajado.

Salven, salven, salven el trabajo
Recordatorio

Crear archivo desde la plantilla: (nuevo/página desde
plantilla/archivo.dwt)
ESTILOS CSS
Tutorial de práctica
Estilos CSS
Una vez tienen la plantilla creada es más fácil estilizar un
elemento específico por medio de los estilos usando los 2
tipos de selectores: los TAGS (como TD, TR, P, A) y las clases que
nosotros nombraremos para los elementos
Para aplicar los estilos deberemos:



Identificar el selector
Dar click derecho/EstilosCSS/crear nuevo estilo a partir de un archivo
(solo la primera vez)
Crear el estilo que necesitemos
Recordatorio

Identificar áreas grandes y específicas del diseño, tomando en
cuenta aquellas que cubren todo el campo de trabajo y aquellas que pueden ser
expandibles.



Trazar líneas guías, cuidando que queden en los lugares exactos
Cortar y revisar los cortes, que todos estén correctos
No se olviden de crear un sitio nuevo en DW cada vez que
trabajen con un sitio nuevo.
Recordatorio

Identificar el selector: de acuerdo a lo que querramos estilizar los
títulos, los fondos de las letras, las tablas, etc.

Es muy importante tener claro si es TAG o Clase (class)
Recordatorio

Damos click derecho y buscamos el menú de los estilos CSS
Recordatorio

Indicamos el selector
que vamos a ocupar
según el tipo y si es el
primer estilizado
hacemos un nuevo
archivo, si ya tenemos
una hoja de estilos
(archivo CSS) entonces lo
seleccionamos.
Recordatorio

Damos el estilo que deseamos según el selector, en este caso
se trata del tag h1 que se refiere a los titulares de la
página.
Descargar

Clase 3