34. Abrir HTML con Capas DIV

<< 33. Capas DIV PA                     35. Iframes >>

http://cursodw.papelyweb.com/34_Abrir_HTML_DIV/Nuevo_DIV.html

Seguimos en siguiente paso a paso para volver a crear la estructura de nuestra web apoyándonos en los documentos Html con capas DIV que nos ofrece DW por defecto.

papel y web

01. Abrir Nuevo documento

Vamos a Archivo / Nuevo, seleccionamos Página en blanco, en tipo de Página seleccionamos HTML y en este grupo seleccionamos 2 columnas fijas, barra lateral izquierda, encabezado y pie.

En el menú Diseño CSS seleccionamos crear nuevo archivo, y guardamos el archivo twoColFixLtHdr.css dentro de ..Mi_Sitio / CSS, y después abrir el documento HTML que guardamos como Nuevo_DIV.html dentro de una carpeta que creamos en Mi_Sitio que llamamos 34_Abrir_HTML_DIV

papel y web

02. Insertar cabecera

En el div.header eliminamos el logo y lo cambiamos por ..Mi_Sitio / 13_Boceto_Plantilla / imagenes / Cabecera.png

Pasamos ahora al panel de Estilos CSS y dentro de twoColFixLtHdr.css hacemos doble clic en .header para cambiar los parámetros de Cuadro a 1024 x 150 px.

papel y web

03. div.container a 1024 px.

En el panes de Estilos CSS abrimos .container y en Cuadro le damos la medida de 1024 px de ancho. Cambiamos el titulo del documento a Abrir HTML con capas DIV

papel y web

04. Incluir pie

Vamos a div.footer borramos el texto y arrastramos  ..Mi_Sitio / 13_Boceto_Plantilla / imagenes / Pie.png

Abrimos .footer en el panel de Estilos CSS para darle la medida de 1024 x 25 px en Cuadro y le dejamos los valores de Padding a 0 (cero). Aprovechamos para quitarle el fondo.

papel y web

05. div.content a 844 px

Como hemos ampliado el div.container de 960 px a 1024 px, ampliamos ahora el div.content en 64 px que se los sumamos a los 780 que tiene en origen, por lo que tenemos que dar un valor de 844 px de ancho. Aprovechamos para cambiar el fondo a div.content

papel y web

06. Adjuntar Hojas de estilo CSS

Adjuntamos ..Mi_Sitio / CSS / Mis_Hojas_estilo.css y formateamos los textos del documento.

papel y web

07. Barra de navegación

Utilizamos los botones de la barra de navegación para enlazar con index.html, curriculum.html y galeria.html, eliminamos el cuarto elemento.

Después hacemos prácticas modificando los parámetros de las hojas de estilo css dentro de twoColFixLtHdr.css

 

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.