TEORÍA: HOJAS DE ESTILOS
Una hoja de estilos o CSS es un conjunto de reglas, características y aspecto comunes a un conjunto de páginas web. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido. Además, hay creadores de hojas de estilos que ofrecen su obra de forma gratuita:
De estos sitios se descarga un archivo que, tras descomprimirlo, crea una carpeta que debemos respetar íntegramente, con un archivo html de modelo, la subcarpeta images y los archivos de los estilos css. Todo el contenido de la web deberá ser guardado en su sitio dentro de esa carpeta. Abriremos la página modelo con Kompozer y la iremos guardaremos con otros nombres. Después se editará cada una escribiendo el texto deseado en lugar del que viene de ejemplo e insertando imágenes con el mismo tamaño que las que vienen.
A veces sólo vienen los archivos de los estilos. En ese caso, aunque poco frecuente, se debe ligar la página creada con el estilo. Para ello se pulsa en Herramientas > Editor CSS (o en el icono correspondiente
), y se abre una ventana en la que se selecciona <link> (enlazar), y se vuelve a abrir otra en la que se indica dónde está la hoja de estilos:
A continuación se introduce el contenido deseado, escribiendo donde se quiera y modificando imágenes, enlaces,...
PRÁCTICA
En esta unidad vamos a necesitar una carpeta que contenga todo el material del sitio web. Después la comprimiremos íntegramente para tener un único archivo; por ello, es fundamental tener una estructura muy bien organizada. Así que:
1. Descarga una plantilla CSS.
2. Descomprime el archivo zip y comprueba que se ha creado una carpeta, dentro de la cual hay otra, llamada images. En ella guardarás las imágenes libres que estimes necesarias. Puede que tengas que retocar alguna con el GIMP.
3. Con Kompozer, abre el archivo modelo y guárdalo (Archivo > Guardar como) con el nombre index.html
4. Vuelve a guardar el archivo con el nombre segunda.html
5. Ahora tienes dos páginas que deberás llenar de contenido. Elige libremente sobre qué tratarán.
6. Las imágenes que uses deben cumplir con su licencia de publicación (procura que sean Creative Commons), y deben estar guardadas en la carpeta images.
7. Recuerda la conveniencia de que los nombres de todos los archivos de una página tengan un MÁXIMO DE OCHO LETRAS, Y NO TENGAN ACENTOS, ESPACIOS, GUIONES, BARRAS, etc.
8. Con los archivos ya guardados, comprueba que se ve y funciona todo bien.
9. Comprime la carpeta entera con el programa compresor (7zip en Windows)
10. Envía el archivo resultante al profesor.
Puedes utilizar el buscador Google para buscar información e imágenes. Pero todo debe tener licencia de uso Creative Commons o ser de dominio público. Además, ten cuidado con el proceso de Copiar y Pegar que, muchísimas veces, nos delata.
Los alojadores de materiales libres más completos que te pueden servir son:
Wikipedia (sin comentarios)
CC Search (fotografías, vídeo y música)
Open Clipart (imágenes vectoriales editables)
Recuerda que algunos modelos de hojas de estilos no valen. Prueba que funcionan bien.
En este enlace tienes un ejemplo de cómo queda una página realizada con estilos en cascada.