42. Plantilla anidada

<< 41. Fichas Spry                            43. Cabecera Flash >>

http://cursodw.papelyweb.com/42_Plantilla_Anidada/de_plantilla_anidada.html

1/ Abrimos desde Mi_Plantilla 2/ Guardamos como plantilla Mi_Plantilla_Anidada.dwt, 3/ Copiamos los textos de Mi_Sitio / Guiones / 42_Plantilla_Anidada.txt, 4/ Pegar el texto en Mi_plantilla_anidada.html, 5/ Realizar las prácticas.

Plantillas Anidadas

Continuamos viendo algo más sobre las plantillas. Para crear plantillas dentro de plantillas y zonas de la plantilla que se podrán editar o no, según nos interese en un documento que parte desde la plantilla.

papel y web

01. Caja de Texto

Vamos a crear una plantilla dentro de otra, con una estructura de maqueta con dos cajas, una a la izquierda para albergar el texto (<div# caja_texto>), y otra en la parte derecha para incluir imágenes (<div# caja_imagen>)

Caja_texto: Seleccionamos el texto superior, insertamos una capa DIV con un ID: caja_texto, y en la categoría cuadro de la ventana de definición de la regla #caja_text le damos un ancho de 800 px y le situamos a la izquierda de la página, haciéndola flotante (Float) a la izquierda (Left).

papel y web

02. Caja de imagen

Seleccionamos el párrafo que tenemos para insertar una capa DIV con un ID: caja_imagen, y en la categoría cuadro de la ventana de definición de la regla # caja_imagen le damos un ancho de 224 px que es resultado de restar el ancho de la página 1024 px y el ancho de #caja_texto 800 px. Le situamos a la derecha de la página, haciéndola flotante (Float) a la derecha (Right).

papel y web

03. Margen

Para crear un margen entre el texto y la caja de imagen, seleccionamos el texto que tenemos dentro de <div# caja_texto> y crearemos un nuevo DIV con un ID: margen y en la categoría cuadro de la ventana de definición de la regla # margen le decimos que nos de un Padding a la derecha (Right) de 100 px.

papel y web

04. Guardar Mi_plantilla_anidada

Una vez acabado guardamos como Mi_Plantilla_Anidada.dwt

papel y web

05. Regiones editables

Seleccionamos la capa <div# caja_texto> y creamos como región editable Caja_Texto en Insertar / objetos de plantilla / Región editable. Después seleccionamos la capa <div# caja_imagen> para crear la región editable Caja_Imagen

papel y web

06. De Plantilla_anidada

http://cursodw.papelyweb.com/42_Plantilla_Anidada/de_plantilla_anidada.html

1/Abrimos desde Mi_Plantilla_Anidada 2/ Guardamos como de_plantilla_anidada.html dentro de la carpeta 42_Plantilla_Anidada3/ Realizar las prácticas, 4/ Enlazar entre de_plantilla_anidada.html y galeria.html

Arrastramos la imagen 11_Contenidos / imágenes / Duotono_224.jpg, aprovechamos para formatear los textos.

Este es el método para crear una web, según vamos creando diferentes tipos de páginas creamos plantillas y cuando tenemos una buena colección, crear páginas que se basen en las plantillas.

 

Crear las carpetas del curso

C: … / Cursos / Curso_Dreamweaver /  Curso_Final. Contiene los archivos finalizados que vamos a necesitar para completar las prácticas de curso.

C: … / Cursos / Curso_Dreamweaver /  Mi_Sitio. Es donde realizaremos las prácticas.

Si es necesario crea las carpetas que necesites. Es muy importante mantener la estructura de carpetas que recomendamos en estos apuntes, para seguir el curso sin perdidas de tiempo adicionales.

Envia un comentario

Debes ser Conectado Para publicar un comentario.