¿Cómo hacer diseños en la Web

Páginas web diseños dependen de una combinación de HTML utilizado para el contenido y la estructura y Cascading Style Sheets utilizados para el posicionamiento y la decoración. Al dar formato a su contenido en secciones usando etiquetas "div", puede agregar código CSS que se dirige a las partes y les dice dónde se debe mostrar en la página. Páginas Web suelen utilizar los diseños que comienzan con un encabezado, contenido y lugar de la barra lateral en las columnas intermedias y finales con un pie de página. Flotadores pueden colocar columnas a la izquierda oa la derecha. 

ESQUEMAS

Escribe el código HTML

Abra el Bloc de notas en el escritorio y guardar el archivo en blanco como un archivo HTML. Agregue este código para empezar a crear su página Web:

! DOCTYPE HTML

HTML

cabeza

TítuloTítulo de su página web / title

/ Head

cuerpo

/ Cuerpo

/ Html

Añadir cabecera, columnas y secciones de pie con el cuerpo de su código HTML:

div id = "contenedor"

div id = "header"

/ Div

div id = "contenido"

div id = "main"

/ Div

div id = "sidebar"

/ Div

/ Div

div id = "pie de página"

/ Div

/ Div

Envuelva un div contenedor alrededor de todo el código de la página tal como se muestra. El ejemplo de código anterior crea un encabezado en la parte superior, una fila media y un pie de página. Dentro de la fila central son dos secciones, una para el contenido principal y otro para la barra lateral. Utilice el atributo "ID" en sus etiquetas "div" para ayudar a orientar las secciones en CSS.

Añada su texto, imágenes y otro contenido entre sus etiquetas apropiadas. Coloca los títulos entre etiquetas de título, que van desde "h1" para los más grandes y "h6" para los más pequeños. Utilice etiquetas de "UL" para listar los enlaces en la barra lateral:

ul

lia href = "page.html" Link 1/a/li

lia href = "another_page.html" Link 2/a/li

/ Ul

Ir a la cabecera de su código HTML y agregar etiquetas "estilo" después de la etiqueta "title":

Tipo style = "text / css"

/ Estilo

Agregue el código CSS entre las etiquetas "estilo".

Escriba el código CSS

Escriba su regla de estilo para el contenedor de la página:

# Container {

Ancho: 960px;

margin: 0 auto;

}

Cambiar el número de píxeles en el ancho para adaptarse a sus necesidades. Los valores de margen le dicen al navegador para centrar su diseño en el navegador.

Añadir el relleno y los márgenes según sea necesario:

# Header {

padding: 20px;

margin-bottom: 20px;

}

Relleno añade espacio dentro de la cabecera, mientras que el margen se suma el espacio debajo de la cabecera. Agregue cualquier color, de fondo o de la fuente de estilos para la cabecera dentro de las llaves.

Establezca las propiedades "float" para sus dos columnas centrales "ancho" y:

# Main {

float: left;

anchura: 80%;

}

# Sidebar {

float: right;

anchura: 20%;

}

Cambie los valores de "flotar" por cada div cuando se quiere desplazar la barra lateral en el lado izquierdo del contenido. Tenga cuidado al establecer el relleno o los márgenes de estas columnas porque romperá la disposición en muchos casos. Añadir el relleno y los márgenes de los distintos elementos que van dentro de cada columna, como párrafos y encabezados.

Borrar las carrozas en el código que los estilos de su pie de página:

# Footer {

claro: ambos;

}

Este código se coloca el pie por debajo de las dos columnas. Añadir estilos para el pie de página según sea necesario.

Consejos y advertencias

Utilice el formato "# idName nombre de etiqueta" cuando desea escribir reglas de estilo para las etiquetas específicas dentro de cualquier div.