Dreamweaver - CS3

Lección 33: La pestaña de Diseño (1)

33/58 Lecciones 

Etiqueta Div

El primer botón encontramos en la izquierda en la pestaña “Diseño” en la barra de herramientas “Insertar”, se encuentra el botón de “Insetar Etiqueta Div”.

Déjame explicar primero lo que es una etiqueta Div y qué puede hacer por nosotros.

Una etiqueta Div se usa para la división, el cual significa una “parte”.
Podemos usar etiquetas Div para dividir nuestras páginas entre muchas partes.
Una etiqueta div puede ser de cualquier tamaño que quieras y puedes aplicarla a casi todo, texto, gráficas, tablas, otras etiquetas div, etc.
Sólo puedes tener una etiqueta div en una línea.

Doy un ejemplo:
Quiero dividir mi página en tres partes, una parte para el título, una parte para el contenido y otra parte para el pié de página.

Para añadir una etiqueta Div a tu página, primero coloca el curso en el punto donde deseas tenerla.

En la barra de herramientas “Insertar”, escoge la pestaña “Diseño” y haz click en el botón “Insertar Etiqueta Div”.

En la ventana de diálogo “Insertar Etiqueta Div”, escoge “A insertar en punto” en la caja superior, y en la caja ID, le das un nombre, no importa cual, y haz click en el botón “Nuevo Estilo CSS”.
No tienes que hacerlo después, pero el problema es que éstas etiquetas Div, no pueden ser guardadas por el contrario.
Haz click en Aceptar.

En la siguiente ventana, la caja “tipo selector” y caja “Selector” están completamente listas y en la sección “Define en”, determinamos donde quieres añadir ésta línea en el archivo de regla CSS en el documento donde estás trabajando o crear un archivo de hoja nueva de estilo para guardar.
Haz tu decisión y haz click en el botón Aceptar.


En la “Definición Regla Css”, puedes especificar las configuraciones para cada categoría que quieras.
Con esto lo hemos visto varias veces, entonces sabes como hacerlo.
La única cosa que puedo decirte es que cuando quieras la etiqueta Div al centro, y con ésto quiero decir cuando quieras ver el contenido de tu página centrada en el navegador, dependiendo del tamaño del monitor del visitante, das la siguiente configuración en “Cuadro”.
Haz click cuando termines.

Repita cada etiqueta Div que quieras insertar en tu página.
Como puedes ver en la imagen de abajo, tengo añadido un total de tres.
Uno para el encabezado, uno para el contenido y uno para el pié de página.
He proveído un color diferente y ancho diferente para ellos, entonces claramente puedes ver las diferentes etiquetas div.

Déjanos ahora ver nuestra página en el navegador, verás que dependiendo del tamaño de la pantalla, las distintas etiquetas Div, estarán desplegadas en el centro.

Increíble! Has completado Lección 33 INICIAR EL PROXIMO LECCIÓN