Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Mi primera web

Aprender a hacer una sencilla web paso a paso partiendo de cero.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 24

Visitas el mes pasado: 31

logo

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




7. Plantilla (II)

7.2. Estilo

Paso 19

logo miweb

Unificar estilos por defecto

En el paso anterior hemos creado el archivo HTML para la plantilla de nuestra web. En esta página haremos el archivo CSS que se corresponde con esta plantilla.

Este archivo lo hemos llamado plantilla.html. en él tenemos una línea que enlaza con el archivo CSS. Esta linea es:

<link rel="stylesheet" type="text/css" href="general.css" />

Nos referimos aquí al archivo general.css el cual crearemos en esta página.

Para ello abrimos el editor de texto y creamos un nuevo archivo en blanco (en HTML-Kit, pulsamos en archivo / Nuevo ... y en el cuadro elegimos en la pestaña "General", el elemento "Blank Text File").

Una vez hemos abierto el nuevo archivo empezamos a escribir en él. Ponemos en principio un comentario con una descripción del archivo. Insertamos la siguiente línea:

/*Estilo general y de secciones comunes para Mi Propia Web.*/

Lo siguiente que haremos será unificar los estilos por defecto de los distintos navegadores, para que la página se vea igual en todos. Es lo que se llama resetear la página. Lo indicamos primero mediante un comentario:

/*estilo inicial reset*/

Para luego escribir la regla CSS que hace que unifiquemos los estilos, en ella empleamos el selector universal:

* { margin: 0 auto; padding: 0; text-align: center; font-family: verdana, tahoma, arial; }

Eliminamos los márgenes tanto internos (padding) como externos (margin) de los elementos, y ponemos por defecto los textos centrados, y con un estilo de letra (verdana, tahoma, o arial) que se adapta mejor a la pantalla del ordenador.

Escribimos también la siguiente línea para eliminar el subrayado que tienen los enlaces por defecto:

a { text-decoration:none; }

Con lo hecho hasta ahora habremos escrito en el nuevo archivo las siguientes líneas:

/*Estilo general y de secciones comunes para Mi Propia Web.*/
/*estilo inicial reset*/
* { margin: 0 auto; padding: 0; text-align: center; font-family: verdana, tahoma, arial; }
a { text-decoration:none; }

Ahora guardamos el archivo con un nuevo nombre. Pulsamos en "Archivo / Salvar como" (o Guardar Como), y al guardarlo le ponemos el nombre general.css. Asegúrate de que todos los archivos, (plantilla.html y general.css) estén guardados en la misma carpeta, que es la carpeta raíz de nuestra web.

Si abres ahora el archivo plantilla.html con el navegador verás que todos los elementos están centrados, y ha cambiado el tipo de letra. Por lo demás, es muy parecido al que teníamos.


Estilo de cabecera

Pondemos ahora el estilo de la cabecera para la plantilla de nuestra web. Este será casi igual que el que tenemos para la cabecera de la primera página. Para ello abrimos el archivo general.css con el editor de textos y añadimos las siguientes líneas:

*estilo para la cabecera*/
#cabecera { background-color: silver; padding: 20px 10px; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
#cabecera h1 { color: blue; font-size: 40px; font-family: arial;}
#cabecera h2 { color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }

Hemos puesto al principio un comentario para indicar que creamos el estilo de la cabecera. Por lo demás el estilo es casi igual al de la página de inicio. El estilo general para la sección es el mismo, es decir, el mismo color de fondo (background-color:, silver), y los mismos márgenes internos.

La imagen tiene el mismo estilo que en la página de inicio, es decir, posición flotante (float) a la izquierda, y mismo tamaño y márgenes.

Para los títulos hemos cambiado los selectores, de manera que se especifica que estén dentro de la cabecera (#cabecera h1 y #cabecera h2 y hemos suprimido la propiedad text-align: center, ya que ésta viene dada en el estilo por defecto que hemos puesto. El resto de propiedades son las mismas que para la cabecera de la página de inicio.

Cerramos y guardamos el archivo general.css y comprobamos cómo tenemos la página de plantilla hasta ahora. Esta quedará como la del siguiente enlace:

Vemos que la cabecera ya ha tomado el estilo que queremos, vamos ahora con las siguientes secciones.

Estilo para barra de navegación

El estilo que pondremos en la barra de navegación de la plantilla es el mismo que tenemos en la barra de navegación de la página de inicio. Sin embargo las reglas CSS que pondremos en esta sección no son exacamente las mismas que en la página de inicio.

Abrimos de nuevo el archivo general.css con el editor de textos, y le añadimos al final del mismo las siguientes líneas:

/*estilo para barra de navegación*/
#navegacion { background-color: purple; padding: 5px 0px; }
#navegacion .menu { width: 25%; float: left;  }
#navegacion .menu a { margin: 0px 50px; color: white; font-weight: bold; font-size: 18px;  }
#navegacion .menu a:hover { color: yellow; }
.vacio { clear: both; }

Conservamos el estilo general de la sección, es decir, el color púrpura del fondo (background-color, purple;) y los mismos márgenes.

Ponemos todos los elementos de la barra, aquí indicados con la clase "menu", en la misma línea. Para ello los posicionamos en flotante (float-left), y reducimos su anchura (width: 25%;), para que quepan todos en la misma línea.

Indicamos el estilo general para los enlaces de la barra de navagación. El margen, el color, y tamaño y grosor de letra. Estas dos últimas propiedades no las habíamos puesto en la página de inicio, ya que las tomaban del estilo que habíamos dado a los enlaces de forma general.

Después ponemos los cambios en el estilo para los enlaces cuando les pasamos el ratón por encima (pseudoclase :hover). Sólo les variaremos el color.

Por último la clase .vacio hace que los elementos anteriores, posicionados de forma flotante, queden dentro del elemento que los contiene, al obligar al elemento vacío, el cual no es flotante, a posicionrse debajo de ellos.

Estilo para el pie de página

Para completar la plantilla, pondremos también en el archivo general.css el estilo para el pie de página. Éste será el mismo que parala página de inicio, ya que el pie de página es el mismo. Por lo tanto, con el archivo abierto en el editor de textos, añadiremos al final del mismo las siguientes líneas:

/*estilo para pie de página*/
#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }
#pie .col_pie { float: left; width: 33%; }
#pie .col_pie h4 { text-align: left; font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }
#pie .col_pie p { text-align: left; margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Las propiedades y cambios que hemos hecho en el pie de página, son los mismos que para la página de inicio. Lo único que hemos cambiado son los selectores, los cuales indican los elementos a los que se aplican los cambios de una manera más específica. Al poner delante de todos ellos la palabra #pie, se indica que sólo se aplicarán los cambios si estos elementos están incluidos en el pie de página.

Los elementos de texto, además los hemos alineado a la derecha (text-align: left; ), ya que si dejamos el estilo inicial por defecto se verían centrados.

Tras escribir las líneas anteriores, cerramos y guardamos el archivo general.css. Para comprobar los resultados, abrimos con el navegador el archivo plantilla.html, el cual debe quedar como en el siguiente enlace:

Se muestra en esta página la cabecera, la barra de navegación y el pie de página, los cuales son los elementos comunes que aparecerán en todas las páginas de nuestra web. Es precisamente ésto lo que queríamos, ya que a partir de aquí para crear una nueva página, abriremos este archivo y lo guardamos con un nuevo nombre. Después insertamos la parte que es distinta en cada página.

Archivo de estilo completo

Dejamos aquí el código completo del archivo general.css, que hemos creado en esta página. Este debe ser el siguiente:

/*Estilo general y de secciones comunes para Mi Propia Web.*/
/*estilo inicial reset*/
* { margin: 0 auto; padding: 0; text-align: center; font-family: verdana, tahoma, arial; }
a { text-decoration: none; }
/*estilo para la cabecera*/
#cabecera { background-color: silver; padding: 20px 10px; }
#cabecera img { float: left; width: 100px; margin-left: 50px; }
#cabecera h1 { color: blue; font-size: 40px; font-family: arial;}
#cabecera h2 { color: maroon; font-size: 30px; font-family: tahoma, verdana, arial; }
/*estilo para barra de navegación*/
#navegacion { background-color: purple; padding: 5px 0px; }
#navegacion .menu { width: 25%; float: left;  }
#navegacion .menu a { margin: 0px 50px; color: white; font-weight: bold; font-size: 18px;  }
#navegacion .menu a:hover { color: yellow; }
.vacio { clear: both; }
/*estilo para pie de página*/
#pie { background-color: #ffe4c4; margin-top: 20px; padding: 10px 0px; }
#pie .col_pie { float: left; width: 33%; }
#pie .col_pie h4 { text-align: left; font-size: 1.2em; color: maroon; padding-left: 3em; font-family: arial; }
#pie .col_pie p { text-align: left; margin: 5px; padding-left: 3em; font-size: 0.8em; color: black; }

Con esto completamos la plantilla para crear el resto de páginas de nuestra web.




En el siguiente tema haremos la segunda página de nuestra web, en la que aprenderemos a hacer listas

Listas




Mi primera web

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com