Cómo modificar los diseños de CSS 3

Vale la pena probar algunos de los diseños de CSS3 para ver lo que quiere hacer con ellos antes de empezar a crear un proyecto de producción. Copiar el código fuente del ejemplo en el sitio Dynamic Drive y colocarlo en archivos como se espera para usarlo.

Video: Curso Básico de CSS - 12. Tablas

A los efectos de este ejemplo, se crea un archivo HTML 5 con el siguiente contenido obtenido a partir de un código HTML que se muestra con el ejemplo. (Puede encontrar el código completo para este ejemplo en la carpeta Capítulo 07 de la código descargable como TwoColumnLayout.HTML.)

CSS diseño fijo # 2.1- (fijo-fijo)CSS diseño fijo # 2.1- (fijo-fijo)
840px
Columna contenido:640px
Columna izquierda: 200px
Pie de página

El ejemplo añade espacio en blanco para el código proporcionado en el sitio Dynamic Drive a los efectos de hacer más fácil la lectura y también para mostrar cómo se crea la estructura mediante el

las etiquetas. Usted debe hacer lo mismo con cualquier código se obtiene desde el sitio. Usted quiere estar seguro de que usted entiende cómo funciona el diseño antes de comenzar a realizar cualquier modificación necesaria.

El ejemplo se quitan los guiones Dynamic Drive, ya que no los necesita para llenar las secciones con contenido aleatorio. Sin embargo, no añadir notas que muestran el número de píxeles utilizados de forma predeterminada para cada una de las secciones (el ejemplo Dynamic Drive solamente señala el tamaño de la columna fija izquierda).

Si modifica el CSS para este sitio, también debe cambiar las notas que cree acerca de los tamaños de las columnas fijas.

El ejemplo también utiliza un archivo CSS externo. Note la adición de una etiqueta en el . El CSS para el archivo externo es igual a la del

body {margin: 0-padding: 0-line-height: 1.5em-} b {font-size: 110% -} em {color: rojo -} # maincontainer {width: 840px; / * Ancho del contenedor principal * / margin: 0 auto / * Centro de contenedores en la página * /} # topsection {background: # EAEAEA-height: 90px; / * Altura de la sección superior * /} # topsection h1 {margin: 0-padding-top: 15px;} # contentwrapper {float: left; anchura: 100% -} # contentcolumn {margin-left: 200 píxeles; / * Conjunto margen izquierdo a LeftColumnWidth * /} # leftcolumn {float: left; ancho: 200px; / * Ancho de la columna izquierda * / margin-left: -840px; / * Conjunto margen izquierdo de - (MainContainerWidth) * / background: # C8FC98 -} # pie de página {clear: left; width: 100% -Antecedentes: negro-color: # FFF-text-align: center-padding: 0- 4 píxeles .} {#footer un color: # FFFF80 -} innertube {margin: 10px; / * Los márgenes para DIV interior dentro de cada columna (para proporcionar el acolchado) * / margin-top: 0-}

En este punto, se puede cargar la página para empezar a pensar acerca de lo que desea modificar. Aquí está la página tal como aparece sin modificaciones después de copiarlo desde el sitio y separar el código HTML de la CSS.

La primera opción que usted quiere cambiar es los colores utilizados para los distintos objetos. Por supuesto, los colores tienen que coincidir con el esquema de color para su sitio. Las plantillas utilizan representaciones de color hexadecimales. Debe modificar para que coincidan con los utilizados por otras plantillas en su sitio (si es necesario).

Las plantillas que se basan en la anchura de las columnas fijas pueden requerir ajustar para trabajar con el resto de su sitio. Para cambiar el ancho total de la página, modifica la propiedad ancho del estilo #maincontainer. La anchura panel izquierdo es controlado por la propiedad anchura del estilo #leftcolumn.

El tamaño panel de contenido es la diferencia entre la anchura estilo #maincontainer y la anchura estilo #leftcolumn. Dynamic Drive tiende a utilizar nomenclatura coherente, por lo que un diseño que utiliza la columna de la derecha para enlaces tendría un estilo #rightcolumn que modifique para cambiar el ancho de esa columna.

Si cambia el tamaño de las #leftcolumn o #rightcolumn estilos, a continuación, también hay que cambiar la propiedad margin-left del estilo #contentcolumn de igualar.

La altura de la sección superior sólo 90 píxeles. Esto podría causar un problema cuando se trabaja con un encabezado más grande. Cambie la propiedad altura del estilo #topsection para que sea compatible con otras cabeceras en su sitio.

Del mismo modo, el pie de página carece de una altura real, por lo que es posible que tenga que modificar mediante la adición de una propiedad de altura al estilo #footer para asegurar que cada página de su sitio se ve la misma.

Estas plantillas también se basan tanto en el (Negrita) y (énfasis) etiquetas. Aunque ambas etiquetas todavía están soportados por HTML 5, hay una fuerte advertencia con el etiqueta para usarlo sólo como un último recurso.

Si planea uso a largo plazo de estas plantillas, sería una buena idea para sustituir el entradas de las etiquetas con el o etiquetas, o mejor aún, simplemente evitar el uso de la y etiquetas completamente a favor de formato CSS.

Estas etiquetas son las sobras de días antes de CSS hizo posible añadir diversas formas de énfasis y las negritas utilizando las propiedades de estilo de fuente y la fuente de peso. El ejemplo muestra las etiquetas intactas, pero la recomendación es para eliminarlos y utilizar otros tipos de formato en su lugar.