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.

Presentación del tema: "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."— Transcripción de la presentación:

1 PLANTILLAS Tutorial de práctica

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

3 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

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

5 Recordatorio  Cortar en PS  OJO: no deben quedar “sectores” o “Slices” grises, si aparecen significa que el cortado esta mal hecho.

6 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

7 Recordatorio  Insertar región editable La región editable deberá estar en la parte expandible que definimos antes

8 Recordatorio 2. Salvar la plantilla

9 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

10 Recordatorio  Salvar la plantilla

11 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

12 Recordatorio  Crear archivo desde la plantilla: (nuevo/página desde plantilla/archivo.dwt)

13 ESTILOS CSS Tutorial de práctica

14 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

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

16 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)

17 Recordatorio  Damos click derecho y buscamos el menú de los estilos CSS

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

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