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. Cortar diseño en Photoshop

2. Reproducir diseño en Dreamweaver

3. Insertar región editable

4. Salvar plantilla

5. 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.