Apuntes de informática

Toda página web necesita un estilo, a ser posible que sea propio y original, y para ello utilizo "Cascading Style Sheets", a partir de ahora CSS.

No voy a explicar lo que es CSS, ni tampoco tengo intención de hacer un tutorial de CSS, ya que en internet existe mucha información al respecto, pero lo que si haré es dejaros una lista con lo necesario:

• ¿Qué es CSS? (Wikipedia)
• Introducción a CSS
• CSS Avanzado

Por supuesto, si estas aquí porque quieres aprender CSS, ni se te ocurra coger los 3 enlaces anteriores y empollartelos, simplemente bájate los dos libros enlazados, leete un poco el de introducción y cuando tengas una ligera idea de la estructura del CSS vuelve aquí que empezamos ya.

Primer paso - Elegir un estilo

Hacer una plantilla web desde 0 es algo que no recomiendo a nadie, ya que la estructura de una web, si estas empezando, no vas a conseguir hacerla ni de coña, te liarás con los div, con los position y con otros elementos que son "raros", así que lo primero que deberías hacer es encontrar una plantilla que te guste, y para eso te recomiendo esta web de plantillas css.
Tienen cientos de ellas, casi todas con la misma estructura html, y son muy limpias.

Por supuesto, cuando acabes de editar el CSS de tu web el resultado tiene que ser bastante distinto al original, por ejemplo, para mi web de ganar dinero utilicé Solutions y como podrás observar, el resultado difiere "un poco" del original.

Segundo paso - Editar la estructura del HTML

Pero... ¿No se suponía que estábamos con CSS, que pinta aquí el HTML?

Muy sencillo, las plantillas de freecsstemplates son muy buenas, pero tienen un pequeño defecto que no me gusta, y esque los menús se estructuran como listas, y la verdad, aunque sea un poco más engorroso, estructurarlos con divs da más libertad.

Si no tienes ni idea de HTML, te recomiendo otros enlaces

• ¿Que es HTML?
• Introducción a XHTML

El arreglo es fácil y para ello utilizaremos un editor de texto sencillo, Bloc de notas, Gedit, Kate o lo que tengas en tu ordenador.

Abre el editor y con el editor abre el fichero index.html de tu plantilla, y tienes que buscar el div con id="sidebar".
Sidebar es el id que identifica los menús en columnas de freecsstemplates.

Como verás, la estructura es a base de listas desordenadas (<ul>), y lo que queremos es que esté con cajas (<div>), así que sustituye los <li></li> que diferencian cada elemento por <div class="sidebaritem"></div> consevando el contenido de cada elemento, y por supuesto, borra los <ul></ul> (todo dentro del <div id="sidebar"></div>)

Ejemplo:

Se convierte en:

Pero, para perfeccionarlo ya del todo, y dejarnos una puerta para futuras ediciones, organiza el contenido dentro de cada sidebaritem:

Seguramente los nombres de las clases no sean los mejores, puedes poner tu los que quieras, pero recuerda después que has puesto otros.

Continuará...