14. Introducción a etiquetas Div y estilos CSS

<< 13. Creación de la plantilla en PSD                                 15. De Photoshop a Dreamweaver >>

En el siguiente tutorial vamos a iniciarnos en el uso de las etiquetas div  (<div>) y las hojas de estilo en cascada (CSS) para maquetar paginas web.

Veremos como los contenidos de la página web se manejan con HTML . Y su apariencia como es la forma, el color, el tamaño, su posición, etc, se manejan con las hojas de estilo en cascada o CSS.

Esto significa que estaremos separando el diseño del contenido. Esta técnica nos permite cambiar elementos del diseño sin que afecten al contenido.

Las etiquetas <div> definen cajas en la página web. A estas cajas definidas con la etiqueta <div> les asignaremos sus propiedades por medio de las hojas de estilo CSS. La forma de definir una caja en el HTML de la página web es que este dentro de las etiquetas <div> </div>.

Dentro de los archivos .CSS aplicaremos los estilos de los elementos de la página web, a través de las reglas que definimos para cada elemento.

Las reglas tienen la siguiente estructura:

selector {
propiedad: valor;
}
Donde selector es elemento al que aplicaremos la regla. Propiedad será la propiedad el elemento al que queremos aplicarle un valor.

papel y web

01. Analizar la estructura de nuestro diseño

Sabiendo que los navegadores leen esta estructura de cajas que contienen cajas o algún tipo de contenido, debemos hacer un ejercicio de abstracción para saber como pasar el diseño que tenemos en Photoshop a Html, ayudándonos con Dreamweaver.

En nuestro ejemplo veremos que esta estructura es la que hicimos cuando bocetamos la página, que coincide con el diseño final en Photoshop y que pretendemos que sea igual a la que interpreten los navegadores al leer el código HTML.

papel y web

02. Estructura de cajas con <div>

Veamos todo lo descrito anteriormente de una manera práctica, para lo cual vamos a Sitio_Final / 14_Intro_DIV_CSS / TXT / 01_Estructura_DIV.txt abrimos el documento, copiamos el texto que encontramos y pegamos en el código de una nueva página HTML en blanco. 

Hacemos un guardar como…, creamos una nueva carpeta 14_Intro_DIV_CSS dentro de Mi_Sitio para guardar el documento que llamamos Intro_DIV_CSS.html 

Comprobamos como el código ha creado las cajas gracias a las etiquetas <div>

papel y web

03. Estilos CSS

Copiamos los textos de Sitio_Final / 14_Intro_DIV_CSS / TXT / 02_CSS_Estructura.txt

Abrimos ahora un documento nuevo CSS y pegamos los textos que cambiaran la apariencia de los elementos que hemos configurado con las etiquetas <div>. Guardamos el documento como Estilos.css dentro de Mi_Sitio  / 14_Intro_DIV_CSS /

papel y web

04. Enlazar_HTML_CSS

Copiamos los textos de Sitio_Final / 14_Intro_DIV_CSS / TXT / 03_Enlazar_HTML_CSS.txt  

Abrimos ahora el documento Intro_DIV_CSS.html y pegamos los textos en el código para enlazar con las hojas de estilo CSS. Comprobamos como cambia la estructura de las cajas que hemos creado con las etiquetas <div> con los parámetros que hemos marcado en las reglas del documento Estilos.css

papel y web

05. Formatear texto con CSS

Veamos ahora como dar formato al texto con las reglas CSS. Copiamos los textos de Sitio_Final / 14_Intro_DIV_CSS / TXT / 04_CSS_Textos.txt  

Abrimos el documento Estilos.css y pegamos el texto copiado. Pasamos ahora al documento Intro_DIV_CSS.html para comprobar como ha cambiado el formato de los textos con las etiquetas de párrafo <p> y <h3>.

Con todo esto vemos como dividir el diseño del contenido y poder modificar los parámetros del diseño sin afectar al contenido.

 

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.