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

Dreamweaver le permite centrar el diseño utilizando márgenes CSS. Muchos diseños de páginas web se centran en la página por lo que parecen flotar entre los lados de la ventana del navegador, no importa qué tan amplia o estrechar la ventana se vuelve. Esto ayuda a crear la ilusión de que el diseño se llena la página, incluso si la ventana del navegador es mucho más amplio que el diseño de la página.

La mayoría de los diseños de páginas web creadas con CSS lograr este efecto mediante la creación de un

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

etiqueta que incluye una regla de estilo que se centra en que

etiqueta. A medida que descubre en las siguientes instrucciones paso a paso, creando un estilo para centrar un

etiqueta no es tan evidente como se puede imaginar, pero es fácil de implementar.

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

etiqueta que centra su diseño, y lo nombra #wrapper o #container.

Si la página no está configurado con una

etiqueta alrededor de todo su contenido, aquí está un consejo para agregar uno. Primero clic y arrastre para seleccionar todo el texto, imágenes y otros contenidos de la página. A continuación, elija Insertar-Disposición objetos-Div Tag. En el cuadro de diálogo Insertar etiqueta Div, asegúrese de que la envoltura alrededor de la opción de selección se selecciona de la lista desplegable Insertar.

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

etiquetar alrededor de todo el contenido de la página, y ya está listo para los pasos siguientes.

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

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

1. Haga clic en el signo más en el panel de selectores CSS Diseñador.

   Dependiendo de lo que está en la página, un nuevo nombre de estilo o un campo en blanco donde se puede introducir un nombre de estilo se añade al panel de selectores.

2. Haga doble clic para seleccionar el nombre que Dreamweaver añade al panel y cambiarlo por el nombre que desea para su nuevo estilo, o haga clic para seleccionar el campo en blanco e introduzca un nombre.

   Si no se añade nombre, escriba el nombre que desee en el campo vacío. Usted puede nombrar a la nada el estilo que te gusta, pero asegúrese de entrar en un período antes del nombre si crea un estilo de clase, o un signo # para un estilo de identificación.

3. En el panel Propiedades, especifique el ancho, los márgenes y otros ajustes de formato que desee definir.

   El ancho para el contenedor

   etiqueta se establece en 980 píxeles. Aquí está el truco para centrar un
   etiqueta de la siguiente manera: Establecer 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, efectivamente centrándola en la página.
   

4. Seleccione la ID que rodea a todo el contenido de la página.

   Para asegurarse de que ha seleccionado la derecha

   etiqueta, haga clic para colocar el cursor en cualquier lugar de la parte principal de la página y, a continuación, haga clic en el
   etiqueta que figura a la izquierda más alejada en el Selector rápido de etiquetas en la parte inferior del espacio de trabajo.

5. Con el

   etiqueta seleccionada, seleccione el nombre del estilo que ha creado en la lista desplegable ID del inspector de propiedades.

   Las reglas de estilo que ha definido al crear el estilo se aplican automáticamente a la

   etiqueta. En este ejemplo, el resultado es que el tamaño de la
   la etiqueta se cambia a 980 píxeles de ancho y la
   etiqueta y todos sus contenidos están centrados en la página.

No todas las funciones funcionan cuando Dreamweaver se establece en la vista en vivo. Aunque Vista en vivo es una magnífica manera de ver cómo sus diseños de página se verá en la mayoría de los navegadores web modernos, el uso de la función Vista en vivo hace que muchas de las herramientas de edición de Dreamweaver inutilizable. Si, por ejemplo, el inspector de propiedades aparece atenuada cuando desee utilizarlo, asegúrese de que está seleccionado el botón Live.