Cómo centrar un diseño de página con los márgenes de las css en dreamweaver
Dreamweaver le permite centrar su diseño utilizando CSS márgenes. Muchos diseños de páginas web están centradas en la página por lo que parecen flotar entre los lados de la ventana del navegador sin importar lo ancho o estrecho se convierte en la ventana. Esto ayuda a crear la ilusión de que el diseño de la página llena, incluso si la ventana del navegador es mucho más ancho que el diseño de la página.
Video: 17. Tutorial CSS: Márgenes
La mayoría de los diseños de página web creada con CSS lograr este efecto mediante la creación de una etiqueta que rodea a todo el contenido de la página y luego aplicar un estilo a la etiqueta que incluye una regla de estilo que se centra esa etiqueta. A medida que descubre en las siguientes instrucciones paso a paso, creando un estilo para centrar una 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 la etiqueta que centra su diseño, y nombrarlo #envoltura o #envase.
Video: Tutorial HTML/CSS: Centrar una pagina web de una forma sencilla
Si la página no está ya configurado con una etiqueta alrededor de todo su contenido, he aquí un consejo para añadir uno. En primer clic y arrastre para seleccionar todo el texto, imágenes y otros contenidos en la página. A continuación, seleccione Insertar → Objetos de diseño → Etiqueta Div. 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 una etiqueta alrededor de todo el contenido de su página, y ya está listo para los pasos que siguen.
Para centrar un diseño de página completa, asegúrese de que una etiqueta rodea la totalidad del contenido de la página, y siga los siguientes pasos:
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.
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 ningún nombre, escriba el nombre que desee en el campo vacío. Puede nombrar el estilo que te gusta nada, pero asegúrese de introducir un punto antes del nombre si crea un estilo de clase, o un signo # para un estilo de identificación.
En el panel Propiedades, especifique el ancho, los márgenes y otros ajustes de formato que desea definir.
La anchura de la etiqueta de contenedor se establece en 980 píxeles. Aquí está el truco para centrar una etiqueta como esta: Establecer los márgenes izquierdo y derecho a Auto. De esta manera, un navegador añade automáticamente una cantidad igual de espacio de margen a cada lado de la etiqueta, el centrado de manera efectiva en la página.
Seleccione el ID que rodea todo el contenido de la página.
Para asegurarse de que ha seleccionado la etiqueta de la derecha, 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 que aparece a la izquierda más alejada en el Selector rápido de etiquetas en la parte inferior del espacio de trabajo.
Con la 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 etiqueta se cambia a 980 píxeles de ancho y la etiqueta y todo su contenido se centra en la página.
Video: tutorial html y css | propiededades background y como ajustar el fondo al navegador
No todas las funciones de Dreamweaver funcionan cuando se pone a la vista en vivo. Aunque Vista en vivo es una gran 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 de visualización en vivo hace que muchas de las herramientas de edición de Dreamweaver inutilizable. Si, por ejemplo, el inspector de propiedades aparece atenuado cuando desee utilizarlo, asegúrese de que el botón no está seleccionado en vivo.