Cómo centrar un diseño de página con márgenes CSS en Dreamweaver

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo centrar un diseño de página con márgenes CSS en Dreamweaver

Libro Relacionado

Por Janine Warner

Dreamweaver le permite centrar su diseño utilizando márgenes CSS. Muchos diseños de páginas web están centrados en la página, por lo que parecen flotar entre los lados de la ventana del navegador sin importar lo ancha o estrecha que se vuelva la ventana. Esto ayuda a crear la ilusión de que el diseño llena la página, incluso si la ventana del navegador es mucho más ancha que el diseño de la página.

La mayoría de los diseños de páginas web creados con CSS logran este efecto creando una

etiqueta que rodea todo el contenido de la página y luego aplicando un estilo a esa

etiqueta
que incluye una regla de estilo que centra esa

etiqueta
. Como descubrirá en las siguientes instrucciones paso a paso, crear un estilo para centrar una

etiqueta
no es tan obvio como podría imaginar, pero es fácil de implementar.

La práctica común es usar un estilo de identificación para la

etiqueta que centra su diseño, y nombrarla #wrapper o #contenedor.

Si su página no está ya configurada con una

etiqueta alrededor de todo su contenido, aquí tiene un consejo para añadir una. Primero haga clic y arrastre para seleccionar todo el texto, las imágenes y el resto del contenido de la página. A continuación, elija Insert→Layout Objects→Div Etiqueta. En el cuadro de diálogo Insertar etiqueta Div, asegúrese de que la opción Envolver alrededor de la selección esté seleccionada en la lista desplegable Insertar.

Deje el resto de los campos en blanco y haga clic en Aceptar para agregar una

etiqueta alrededor de todo el contenido de su página, y estará listo para los pasos siguientes.

Para centrar un diseño de página completo, asegúrese de que una

etiqueta rodea todo el contenido de la página y siga estos pasos:

  1. Dependiendo de lo que haya en la página, se añadirá al panel de selectores un nuevo nombre de estilo o un campo en blanco en el que podrá introducir un nombre de estilo.
  2. Haga doble clic para seleccionar el nombre que Dreamweaver añadió al panel y cambiarlo por el nombre que desee para su nuevo estilo, o haga clic para seleccionar el campo en blanco e introduzca un nombre. Puede nombrar el estilo como desee, pero asegúrese de introducir un punto antes del nombre si crea un estilo de clase, o un signo # para un estilo ID.
  3. En el panel Propiedades, especifique el ancho, los márgenes y cualquier otra configuración de formato que desee definir, el ancho del contenedor <div> tag es de 980 píxeles. Este es el truco para centrar una etiqueta <div> de esta manera: Establezca los márgenes izquierdo y derecho en Auto. De esta manera, un navegador añade automáticamente una cantidad igual de espacio de margen a cada lado de la etiqueta <div>, centrándola efectivamente en la página.
  4. Para asegurarse de que ha seleccionado la etiqueta <div> correcta, haga clic para colocar el cursor en cualquier lugar de la parte principal de la página y, a continuación, haga clic en la etiqueta <div> que aparece en el extremo izquierdo del selector rápido de etiquetas, en la parte inferior del espacio de trabajo.
  5. Con la etiqueta <div> seleccionada, seleccione el nombre del estilo que ha creado en la lista desplegable ID en el inspector de propiedades Las reglas de estilo que definió cuando creó el estilo se aplican automáticamente a la etiqueta <div>. En este ejemplo, el resultado es que el tamaño de la etiqueta <div> cambia a 980 píxeles de ancho y la etiqueta <div> y todo su contenido se centran en la página.

No todas las funciones funcionan cuando Dreamweaver está configurado para la visualización en vivo. Aunque la vista en vivo es una excelente manera de previsualizar cómo se verán los diseños de su página en la mayoría de los navegadores web modernos, el uso de la función de vista en vivo hace que muchas de las herramientas de edición de Dreamweaver sean inutilizables. Si, por ejemplo, el inspector de propiedades aparece atenuado cuando desea utilizarlo, asegúrese de que el botón Vivo no esté seleccionado.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *