PDF de programación - Kompozer - Algunas opciones avanzadas: CSS, plantillas...

KOMPOZER

Algunas opciones avanzadas: CSS, plantillas...

Estilos CSS
• Hemos visto que cada página, e incluso cada párrafo de una página,

puede tener un formato propio y diferente del resto

• Sin embargo, en una web es importante tener un diseño homogéneo,

y que todas las páginas y elementos tengan un mismo formato.

• Imaginemos que todos los encabezados de nivel 1 (h1) de una web
queremos que sean con letra Arial 20 puntos color azul. ¿Cómo lo
hacemos?
• Tendríamos que ir a cada uno, seleccionarlo y cambiarle el formato

• Para poder definir estilos de forma común para todos los elementos
de una web y no tener que ir cambiándolos uno a uno, se usan las
hojas de estilo CSS (Cascade Style Sheets)

• De esta forma, en un documento CSS definiremos el estilo que

queremos que tengan los encabezados, párrafos, enlaces, etc de
nuestra web, y luego las páginas que hagamos compartirán todas
ese formato.

• Además, si queremos cambiar algún formato, basta con modificar el

documento CSS, y todas las páginas se actualizarán
automáticamente

Crear páginas CSS en Kompozer
• Para crear un documento CSS para nuestra web,
pulsamos el botón de CSS de la barra de herramientas
superior.
• Nos pedirá que guardemos el documento actual si no lo hemos

hecho

• En el panel que aparece, pulsamos en la flecha del menú
superior izquierdo y elegimos Linked stylesheet, para
crear una página CSS externa independiente
• También podríamos crear una Internal stylesheet, pero esto sólo
nos serviría para una página, no para todas las de nuestra web

Crear páginas CSS con Kompozer

Crear páginas CSS en Kompozer
• En el panel que aparece a la

derecha, hacemos clic en
Create stylesheet

• Después, hacemos clic de

nuevo en el nombre de la hoja
(panel izquierdo, donde pone
internal stylesheet)

• En el panel que aparecerá en la
parte derecha, hacemos clic en
Export stylesheet and switch
to exported version. Nos
pedirá que le pongamos un
nombre al archivo
• Lo normal es llamarlo estilos.css o
algo así, y guardarlo en la misma
carpeta que el resto de la web

Añadir estilos a la hoja CSS
• Ahora que ya tenemos la hoja CSS creada, para añadirle
los estilos vamos de nuevo a la flecha del menú superior
izquierdo, y elegimos la opción Style Rule. En la parte
derecha aparecerá un panel para elegir distintos tipos de
reglas de estilo a añadir

Estilos CSS a etiquetas
• Para aplicar el mismo estilo a todos los elementos de un
tipo (por ejemplo, a todos los párrafos, o a todos los
encabezados de nivel 1):
• Elegimos la opción style applied to all elements of type en la lista

de opciones de Style Rule

• En la lista inferior, elegimos el tipo de elemento sobre el que

queremos aplicar el estilo (body para estilos generales de toda la
página, p para párrafos, h1 para encabezados de nivel 1, etc.)

• Pulsamos en el botón de Create Rule y aparecerá un panel para

configurar ese estilo

Estilos CSS a etiquetas (II)

Estilos CSS a etiquetas (III)
• Aparecerá un nuevo panel donde, para elemento
seleccionado podemos cambiar:
• El tipo de letra, color, efectos, etc en Text
• El color de fondo en Background
• El tipo de bordes en Borders
• Los márgenes y posición en Box
• … etc.

• Si vamos pulsando en Style Rule en el menú superior
izquierdo, y creando nuevas reglas, iremos añadiendo
nuevos estilos de esta misma forma a nuestra hoja CSS

Estilos CSS a etiquetas (IV)

Estilos CSS personalizados
• Podemos también crear estilos para ciertos elementos
concretos de una página:
• Por ejemplo, que ciertos párrafos (pero no todos) tengan un

determinado tipo de letra, o color de texto.

• Para ello, en el panel donde elegimos el tipo de regla
(después de pulsar en Style Rule en el menú superior
izquierdo), elegimos style applied to all elements of class
y en el cuadro inferior le ponemos el nombre que
queramos, precedido de un punto (por ejemplo .prueba)

Aplicar los estilos a la página
• Los estilos se van guardando en el documento CSS a
medida que los vamos añadiendo o modificando.
• Cuando hayamos terminado, si queremos aplicarlos a la
página HTML que estamos escribiendo:
• Los estilos generales (sobre párrafos, h1, h2, etc) se aplican

directamente al elegir ese tipo de texto en el panel superior

• Los estilos personalizados (por ejemplo, .prueba), se aplican

seleccionando primero el texto donde aplicarlos, y después
eligiendo el estilo personalizado de la lista que hay a la derecha de
los tipos generales

Nuevas páginas con mismo CSS

• Si queremos crear nuevas páginas que utilicen la misma hoja de estilos
CSS:
• Creamos la página con New
• Pulsamos la herramienta de CSS (nos pedirá que guardemos la nueva página con su

nombre antes de continuar)

• En el panel de CSS, elegimos Linked stylesheet del menú superior izquierdo, y en el

panel que aparece a la derecha, elegimos Choose File y elegimos el archivo CSS que
ya hemos creado antes.

• Ya podemos usar esos estilos del CSS en la nueva página.

• En caso de que no funcione este método, hay otras dos alternativas:

• Copiar y pegar el archivo HTML que ya tenemos con CSS con otro nombre, y editarlo
• Ir a la pestaña Source del primer archivo HTML y copiar y pegar esta línea del primer

archivo a su lugar correspondiente del segundo archivo:
<link rel="stylesheet" href="fich.css" type="text/css">

Nuevas páginas con mismo CSS

Uso de plantillas
• Hemos comentado antes que todas las páginas de una
misma web deben tener un formato uniforme.
• Es más: si visitamos alguna web (por ejemplo, la de la
universidad o la del instituto), vemos que todas las
páginas tienen unas partes en común: el título en la parte
superior, los menús arriba o a la izquierda...
• Para hacer esto, podemos copiar y pegar esas partes en
todas las páginas de la web
• Pero... si necesitamos hacer algún cambio, como añadir algún

menú más, o cambiar colores, tendremos que cambiarlo en
TODAS LAS PÁGINAS de la web

• Para evitar esto, algunos editores web permiten utilizar
plantillas.

Uso de plantillas (II)
• Las plantillas son una especie de "copia maestra" de las
páginas web, con todo el contenido común que van a
tener todas ellas (logos, cabeceras, menús, estilos
CSS...)
• Una vez tenemos la plantilla definida, podemos crear
todas las páginas a partir de esa plantilla y añadir en cada
página su contenido propio
• Las plantillas se componen de partes fijas (que no se
podrán cambiar en ninguna página) y de partes editables
(donde pondremos la parte propia de cada página)
• Si necesitamos hacer algún cambio en la zona común,
cambiando la plantilla se actualiza automáticamente en
todas las páginas.
• Esto último funciona bien en Dreamweaver, pero no en Kompozer

Crear plantillas en Kompozer
• Para crear una plantilla, vamos a la

flecha que hay junto al icono de
New y elegimos More options..., o
bien vamos al menú File>New

• En el panel que aparecerá,

elegimos crear una plantilla en
blanco (blank template)

• La guardamos SIN TITULO

(porque es sólo una plantilla) y con
el nombre de archivo que
queramos.

• Las plantillas de Kompozer tienen

extensión .mzt

Crear plantillas en Kompozer (II)
• Una vez creada la plantilla, debemos especificar qué zonas son

editables (es decir, pueden cambiar para cada página) y cuáles fijas

• Se recomienda dejar 3 o 4 líneas en blanco (con intros) en la

plantilla, antes de definir las zonas editables.

• Para añadir zonas editables en la plantilla, nos colocamos en la

línea o sección donde queramos colocarla, y vamos al menú Insert
> Template > Insert editable area
• Nos pedirá que le pongamos un nombre al área, para

diferenciarla de otras que podamos poner en otras secciones.
Podemos seguir una misma nomenclatura para todas (por
ejemplo, area1, area2, area3...).

Utilizar plantillas en páginas
• Una vez guardada la plantilla, para crear páginas a partir de
esa plantilla:
• Vamos a File > New (o a la opción More options... dentro del icono de

New), y elegimos A new document based on a template, eligiendo luego
el archivo de plantilla que hayamos guardado previamente.

• Modificamos las zonas editables con el contenido que
queramos, y luego guardamos el documento desde el menú
File > Save as, con el nombre que queramos, pero con
extensión HTML (por ejemplo, pagina1.html)
• También podemos hacer que cualquier página se convierta en
plantilla (o deje de serlo) yendo a Format > Page Title and
Properties y marcando o desmarcando la casilla This page is
a template

Gestión de un sitio web
• Una web se compone de una o varias páginas HTML, con sus
respectivos recursos (imágenes, hoja de estilos CSS, etc). Esto
forma una estructura de archivos, a veces agrupados en carpetas.
• Para hacerla pública, se debe contratar un alojamiento en alguna

empresa de Internet. Se trata de empresas que, o bien gratuitamente
o con una cuota mensual, nos permiten tener nuestras páginas en su
servidor, para poderlas visitar desde cualquier parte.

• También necesitaremos un nombre de dominio, que es el que

escribiremos en el navegador para poder cargar la página.
Normalmente la empresa donde alojamos la web nos da el dominio.
• Si es un alojamiento gratuito, normalmente el nombre de dominio

no podemos controlarlo demasiado, y es un poco largo

• Si es de pago, normalmente podemos comprar un dominio

.com, .es, .net o algo similar (por ejemplo: mipagina.com)

Gestión de un sitio web (II)
• Una vez tengamos el alojamiento y el dominio, deberemos subir
nuestra web al servidor, respetando la estructura de carpetas y
subcarpetas que tenga.

• Es importante seguir algunas normas cuando pongamos nombre a

los archivos y carpetas:
• No poner acentos, eñes ni símbolos extraños (sólo letras, números y

barras bajas _

• No usar mayúsculas ni espacios

• De lo contrario, puede que algunos navegadores no puedan cargar

bien algunas páginas al no reconocer el nombre del archivo

• Ejemplos de nombres vál