16. Plantilla

<<  15. De Photoshop a Dreamweaver           17. Plantilla navegación  >>

 

Abrimos el documento Mi_Sitio / 15_PSD_a_DW / PSD_a_DW.html y seguimos los pasos de los siguientes pantallazos para realizar la plantilla (Template):

papel y web

1. Guardar Como Plantilla

Vamos a Archivo Guardar como Plantilla. La llamamos Mi_Plantilla y actualizamos los vínculos. Vemos como DW crea una carpeta Templates en nuestro sitio.

papel y web

2. Región_Editable

Hacemos la región editable seleccionando: <body> <div#envoltorio>  <div#Region_Editable> en Insertar / Objetos de plantilla / Región editable. En la ventana Nueva región editable la llamamos Region_Editable

papel y web

3. Pie Mailto

Seleccionamos la imagen del pie y en Vínculo escribimos mailto:micorreo@electronico.com

papel y web

4. Cabecera

Hacemos una región editable para poder realizar el cambio de cabecera en los documentos que hagamos desde esta plantilla.

Seleccionamos la cabecera en <body> <div#envoltorio>  <div#cabecera> y en Insertar / Objetos de plantilla / Región editable. En la ventana Nueva región editable la llamamos Cabecera_Editable

papel y web

5. Propiedades de la página

Vamos ahora a las propiedades de página. Directamente desde el menú propiedades empezamos cambiando las propiedades de Apariencia (CSS), eligiendo la fuente de página. Para que la página no deje márgenes en el navegador le damos 0 (cero) a todos sus datos.

Seguimos con los Encabezados (CSS), pero antes escribimos en la Region_Editable un texto así:

Párrafo. Para el texto general de nuestra web. El vínculo se ve así

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Y le aplicamos a cada uno su estilo desde el menú propiedades. Pasamos de nuevo a la categoría encabezados del menú propiedades y vamos personalizando en tamaño y color cada uno de los encabezados, dando a aplicar para ver cómo se comportan en nuestro diseño.

Pasamos a personalizar los Vínculos (CSS) combinando tipo de letra, tamaño y color.

Por último en Titulo / Codificación le damos un título a la página, esto es muy importante, debemos siempre dar un título a cada una de nuestras páginas web, ya que los navegadores la muestran y sirve de ayuda al usuario final.

Una vez que salimos de la ventana de las propiedades de página, observamos en el panel Estilos CSS, cómo se han ido creando los diferentes estilos.

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.