EDITOR DE PGINAS WEB KOMPOZER (4 ESO)

1) INSTALACIN
2) CREAR LA ESTRUCTURA DE CARPETAS
3) ABRIR EL PROGRAMA
4) GUARDAR LA PGINA WEB
5) CERRAR EL PROGRAMA
6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER
7) COMPLETAR LA INFORMACIN SOBRE LA PGINA
8) CONOCER EL CDIGO HTML
9) PONER UN COLOR DE FONDO
10) PONER UNA IMAGEN DE FONDO
11) DESCARGAR FONDOS DE INTERNET
12) ESCRIBIR TEXTO
13) VER LA PGINA WEB EN EL NAVEGADOR
14) INSERTAR IMGENES
15) ALIGERAR EL PESO DE LAS IMGENES
16) INSERTAR RTULOS FONTWORK
17) INSERTAR RTULOS FONTWORK SOBRE UNA IMAGEN
18) INSERTAR UNA BARRA HORIZONTAL
19) ENLACES INTERNOS
20) ENLACES EXTERNOS
21) USO DE LISTAS NUMERADAS O VIETAS
22) INSERTAR UNA TABLA
23) CREAR UNA TABLA DE IMGENES EN MINIATURA (Thumbnails)
24) INSERTAR UN ARCHIVO DE VDEO
25) INSERTAR VDEOS DE INTERNET
26) INSERTAR ANIMACIONES FLASH
27) ALINEAR UN OBJETO (vdeos, animaciones flash, etc).
28) SONIDO DE FONDO PARA LA PGINA WEB
29) FAVICON PARA LA PGINA WEB
30) ALOJAMIENTO DE LAS PGINAS EN UN SERVIDOR WEB

1) INSTALACIN
- Kompozer es un editor grfico de HTML de tipo WYSIWIG (What You See Is What
You Get "lo que ves es lo que obtienes").
- Esta basado en Nvu que fue la continuacin de Mozilla Composer.
- Podemos descargar el paquete debian (.deb) con la ltima versin estable desde la web
http://kompozer.net. Tambin hay que descargar el paquete de idiomas.
- Nosotros usamos una versin ejecutable desde una carpeta, que ya viene en espaol.
- Tambin puede descargarse la versin para Windows y el paquete de idiomas. Para
cambiar el idioma, abrir el programa > ir a men Tools > Extensions > Install > seleccionar el
archivo kpz-langpack-esES.xpi > Abrir > Install Now > cerrar la ventana y el programa >
abrir el programa y comprobar que est en espaol.
2) CREAR LA ESTRUCTURA DE CARPETAS
- En la carpeta personal crear la carpeta sitiosweb.
- Dentro de ella, crear la carpeta con el nombre del tema tratado en el sitio. En esta
carpeta guardaremos las pginas web del sitio. La pgina web debe llamarse index.html y si el
sitio web contiene varias pginas, ste debe ser el nombre de la pgina principal.
- Dentro de la carpeta anterior, crear las carpetas archivos e imagenes_originales. En
la carpeta archivos guardaremos las imgenes aligeradas, vdeos, pdf, archivos de sonido, etc.
En la carpeta imagenes_originales guardaremos las imgenes descargadas.
3) ABRIR EL PROGRAMA
- Situar la carpeta kompozer dentro de la Carpeta personal y renombrarla para ponerla
oculta (.kompozer).
- Editar los mens de Aplicaciones para crear el enlace hacia el programa, dentro del
grupo de Internet.
- Abrir el programa desde el men Aplicaciones > Internet > Kompozer.
- Cerrar el consejo.
- La primera vez, cerrar la columna lateral izquierda "Administrador de sitios".
4) GUARDAR LA PGINA WEB
- Ir a men Archivo > Guardar como > teclear lo que queramos que aparezca en la
barra de ttulos de la pgina web > Aceptar > elegir la carpeta de destino > teclear el nombre
del archivo, que debe ser index.html, manteniendo la extensin html. Si el sitio tiene varias
pginas, la primera pgina debe llamarse index.html > Aceptar.
- Los nombres de los archivos de un sitio web no deben superar los 8 caracteres, las
letras deben ser minsculas sin y no deben tener espacios, acentos, puntos u otros signos de
puntuacin.
5) CERRAR EL PROGRAMA
- Clic sobre la equis de la esquina superior derecha.
6) ABRIR EL ARCHIVO HTML DESDE EL KOMPOZER
- Abrir el Kompozer.
- Ir a men Archivo > Abrir archivo o le damos al botn Abrir.
- Elegir el archivo html que estar en la carpeta que habamos creado > Abrir.
7) COMPLETAR LA INFORMACIN SOBRE LA PGINA
- Men Formato > Ttulo y propiedades de la pgina > comprobar como est relleno
el ttulo que sale en la barra de ttulos. Completar el nombre del Autor y una breve

Descripcin sobre el tema de la pgina web > Aceptar.

- Observar que desde aqu podemos cambiar el juego de caracteres de la pgina
(charset).
8) CONOCER EL CDIGO HTML
- En la parte inferior, clic sobre la pestaa Cdigo fuente. Observar la estructura de la
pgina: Doctype y html que agrupa a head y body.
- Observar como en la parte head aparece el charset, el ttulo (title), y las etiquetas meta
con el autor y descripcin que hemos puesto antes.
9) PONER UN COLOR DE FONDO
- Darle al botn de los 2 rectngulos de colores.

El primer rectngulo es para el

color del texto y el segundo para el color del fondo, as que le damos a ste.
- Elegir el color que queramos, el nuevo color debe ocupar el cuadrado inferior, si no es
as hacer clic sobre la barra de color horizontal, conviene usar algn color predefinido ya que
ser visible de igual forma en todos los navegadores > Aceptar.
10) PONER UNA IMAGEN DE FONDO
- Guardar la imagen que queramos poner de fondo, en la carpeta archivos, que
habamos creado dentro de la carpeta del sitio.
- Men Formato > Colores y fondo de la pgina > Usar colores personalizados >
Imagen de fondo > en la carpeta, elegir la imagen > Aceptar.
- Observar que si la imagen es ms pequea que el tamao de la pgina, se repetir hasta
ocuparla por completo (mosaico).
11) DESCARGAR FONDOS DE INTERNET
- Entrar en la pgina www.areas.net/colorvivo > apartado Fondos > clic sobre el
nmero de fondo > clic derecho > Ver imagen de fondo > clic derecho > Guardar imagen
como > elegir la carpeta de destino (archivos) > Guardar.
12) ESCRIBIR TEXTO
- El color del texto se selecciona con el botn de los 2 rectngulos
haciendo clic
sobre el rectngulo superior.
- El tipo de letra se selecciona desde el men Formato > Tipo de letra. Es
conveniente elegir una letra de tipo sans-serif (sin tacn) como la Arial. Otra alternativa es
utilizar el men desplegable que est a la izquierda de los botones de formato de texto
- El tamao de las letras primero lo elegimos desde el men Formato > Tamao.
Escribimos una letra y luego podemos afinar el tamao dndole a los botones de aumento
o reduccin
de tamao.
- La letra negrita la tenemos con el botn
El subrayado lo conseguimos con el botn

. La letra cursiva con el botn

- Dependiendo de la jerarqua del texto a escribir, podemos conseguir un formato de

texto automtico al utilizar el men desplegable

- La alineacin del texto se hace con los botones correspondientes de izquierda,

centrado, derecha o justificado
- Cuando pegamos un texto procedente de una pgina web puede interesarnos eliminar
los enlaces que tenga, para ello se selecciona el texto y vamos a men Formato > Elimina
enlaces internos y Eliminar enlaces.
- Si el cursor no aparece en la zona que queramos, ir a la pestaa Cdigo fuente y poner
un salto de lnea <br> despus de la ltima capa.
13) VER LA PGINA WEB EN EL NAVEGADOR
- No es recomendable usar la pestaa inferior Vista preliminar, porque a veces no se
corresponde con la visualizacin en el navegador.
- Otra opcin es darle al botn
. A veces se bloquea el navegador.
- Lo mejor es abrir el archivo html haciendo doble clic sobre l. Una vez abierto el
navegador, lo minimizamos para seguir trabajando con el Kompozer.
- Cuando modifiquemos la pgina desde el Kompozer, le damos al botn Guardar y
luego maximizamos el navegador, dndole al botn de Recargar la pgina o teclear F5.
14) INSERTAR IMGENES
- Antes de insertar una imagen debemos guardar el archivo del Kompozer.
- Guardar las imgenes dentro de la carpeta imagenes_originales, que est en la carpeta
del sitio.
- Le damos al botn
> hacemos clic sobre el botn de la carpeta para elegir el
archivo de la imagen > Abrir > rellenar el espacio de Titulo emergente, que ser lo que
aparezca al pasar el ratn por la imagen > rellenar el espacio de Texto alternativo, que es lo
que aparece antes de que se descargue la imagen > Aceptar.
- Por defecto el programa considera a la imagen como un carcter, por ello si queremos
escribir a la izquierda o la derecha de la misma hacemos doble clic sobre la imagen > pestaa
Apariencia > en Alinear el texto con la imagen podemos elegir Fluir por la izquierda o
Fluir por la derecha > Aceptar.
- Para centrar la imagen, colocarla a la izquierda o a la derecha de la pgina, le damos a
los mismos botones de alineacin de texto, pero el texto no debe estar alineado con la imagen
como Fluir por la izquierda o Fluir por la derecha.
15) ALIGERAR EL PESO DE LAS IMGENES
- Si vamos a insertar la imagen en el Kompozer con su mismo tamao o la aumentamos
con clic y arrastre sobre los marcadores, antes de insertarla, debemos aligerarla reduciendo su
calidad con el programa gThumb. Se explica ms adelante.
- No debemos disminuir el tamao de las imgenes desde el Kompozer sino con el
programa gThumb, de esta forma reducimos el peso de la imagen al disminuir su tamao
(escalado) y su calidad (ponerla en 60).
- Con el Kompozer, insertar la imagen en el sitio que queramos. La imagen debe estar
en la carpeta imagenes_originales. Ajustar el tamao de la imagen con clic y arrastre.
- Doble clic sobre la imagen > pestaa Dimensiones > tomar nota de la Anchura y
Altura de la imagen.
- Borrar la imagen del Kompozer.
- Clic derecho sobre la imagen > Abrir con "Visor de imgenes (gThumb)". Ir a men

Herramientas > Escalar imgenes > poner el ancho y alto anotados > botn Escala > fijar la
calidad en 60 > Aceptar > ponerle un nuevo nombre > Aceptar.
- Cortar la imagen escalada para pegarla en la carpeta archivos.
- Volver al Kompozer e insertar la imagen escalada de la carpeta archivos, en el sitio
deseado.
16) INSERTAR RTULOS FONTWORK
- Abrir el programa de Dibujo de OpenOffice (Draw).
Ir a men Formato > Pgina > pestaa Pgina.
Poner la pgina de un tamao igual al del rtulo, por ejemplo Ancho de 25 cm y Altura
de 5 cm. Poner los Mrgenes a 0 cm. En la pestaa Fondo establecer el color, que podr ser
igual que el color de fondo del Kompozer, en este caso el color debe tener el mismo cdigo.
Tambin podemos elegir, como fondo del rtulo, un Mapa de bits, que es una imagen
que tambin podemos utilizar como fondo de la web en el Kompozer (ver carpeta
recursos_web/fondos/openoffice).
PARA TODO TIPO DE RTULOS (2D Y 3D):
Clic sobre el botn Fontwork
en la barra de herramientas de dibujo.
Elegir un modelo > Aceptar.
Doble clic sobre el letrero > borrar las letras negras Fontwork y escribir el nuevo rtulo
> clic fuera del rtulo.
Borrar el rtulo: lo seleccionamos y le damos a la tecla [Supr].
Relleno del frente: para cambiar el tipo de relleno hacer clic sobre los botones de la
parte superior derecha.
Sombra: para ponerle sombra, hacer clic derecho sobre el rtulo > rea > pestaa
Sombra > marcar la casilla, elegir la separacin y el color de la sombra.
Otras variaciones: al seleccionar el rtulo aparece una barra de herramientas flotante
(Fontwork).

Separacin entre letras

Minsculas con igual altura que las maysculas
Contorno de las letras
SLO PARA RTULOS 2D:
Borde: para cambiar el tipo de lnea, grosor y color del borde, hacer clic sobre los
botones de la parte superior izquierda.
De 2D a 3D: un rtulo 2D podemos convertirlo a 3D si, una vez seleccionado, le damos
al botn

SLO PARA RTULOS 3D:

Los rtulos 3D tienen dos barras de herramientas flotantes: Fontwork y Configuracin
3D.

Color de la profundidad
Direccin de iluminacin
ngulo de la perspectiva
Profundidad
Giros de 5 cada vez que le demos a los botones
- Para que el rtulo quede centrado, hacer clic derecho sobre el rtulo > Alineacin >
Centrado (en vertical y horizontal).
- Sin tener el rtulo seleccionado, ir a men Archivo > Exportar > como carpeta de
destino elegir archivos, dentro de la carpeta del sitio web > teclear el nombre del archivo > en
Formato de archivo, elegir JPEG > Exportar > Calidad 60 > Aceptar.
- Cerrar OpenOffice Draw sin guardar el archivo.
- La imagen exportada se inserta en el Kompozer y se centra.
17) INSERTAR RTULOS FONTWORK SOBRE UNA IMAGEN
- Abrir el programa de Dibujo de OpenOffice (Draw).
Ir a men Formato > Pgina > pestaa Pgina.
Poner la pgina de un tamao igual al del rtulo, por ejemplo Ancho de 25 cm y Altura
de 5 cm. Poner los Mrgenes a 0 cm
- Insertar la imagen aligerada y modificar su tamao con clic derecho sobre la imagen >
Posicin y tamao (debe tener el mismo Ancho y Altura que la pgina). Arrastrar la imagen
para que coincida con la pgina.
- Crear el rtulo Fontwork encima de la imagen.
- Para que el rtulo quede centrado, hacer clic derecho sobre rtulo > Alineacin >
Centrado (en vertical y horizontal).
- Men Archivo > Exportar > como carpeta de destino elegir archivos, dentro de la
carpeta del sitio web > teclear el nombre del archivo > en Formato de archivo, elegir JPEG >
Exportar > Calidad 60 > Aceptar.
- Cerrar OpenOffice Draw sin guardar el archivo.
- La imagen exportada se inserta en el Kompozer y se centra.
18) INSERTAR UNA BARRA HORIZONTAL
- Men Insertar > Lnea horizontal. Desde el cdigo podemos modificar el ancho
(width) y la altura (height).
- Otra posibilidad consiste en insertar una barra que tengamos como imagen. Podemos
descargarla de la pgina www.areas.net/colorvivo > apartado Barras.
19) ENLACES INTERNOS
- Situamos el cursor en el punto que sea el destino del enlace > le damos al botn

> tecleamos el nombre (no debemos usar maysculas, acentos, espacios, ni signos de
puntuacin) > Aceptar. Observar como aparece un ancla.
- Seleccionar el texto o imagen que vaya a ser el enlace > le damos al botn
> clic sobre la flechita hacia abajo > elegir el destino del enlace interno >
Aceptar.
20) ENLACES EXTERNOS
- Seleccionar el texto o imagen que vaya a ser el enlace > le damos al botn
> en Ubicacin del enlace escribir la direccin completa de la pgina web
(http://) > Aceptar.
- Si el enlace es a un archivo o pagina web de nuestro sitio, le damos al botn de la
carpeta y elegimos el archivo > Aceptar.
- Si el enlace es un correo electrnico, tecleamos la direccin del mismo > marcamos la
casilla Lo anterior es una direccin de correo electrnico > Aceptar.
- Por defecto los enlaces se abren en la misma pestaa que la pgina, por tanto para
volver a ella debemos darle al botn Atrs del navegador. Si queremos que el enlace se abra en
una nueva pestaa slo tenemos que hacer clic sobre la casilla que lo indica, en este caso, una
vez abierto el enlace, para volver a nuestra pgina le damos al botn Cerrar del navegador.
- Si queremos cambiar los colores que vienen por defecto para los enlaces, ir a men
Formato > Colores y fondo de la pgina > Usar colores personalizados > darle a los
botones de los colores de los enlaces.
21) USO DE LISTAS NUMERADAS O VIETAS
- Antes de escribir la lista numerada
o con vietas
le damos al botn
correspondiente.
- Cuando hayamos terminado con la lista, le damos otra vez al mismo botn.
- Para descender un nivel le damos a la tecla del [Tabulador].
- Para aumentar un nivel le damos a la tecla del [May] + [Tabulador].
22) INSERTAR UNA TABLA
- Clic sobre el botn
> pestaa Preciso > poner el nmero de Filas y Columnas,
en el Anchura poner 100 % pxeles. El ancho de las celdas se adapta al contenido.
- Tabla de igual ancho de columna: multiplicar el ancho de la columna mayor por el
nmero de columnas, este nmero ser la anchura total de la tabla. Para que la tabla alcance
este ancho total, debemos arrastrar el primer marcador de la derecha hasta que el ancho de la
primera columna de la derecha sumado al ancho de las restantes columnas, nos d el ancho
total de la tabla.
Por ltimo arrastramos los restantes marcadores empezando por el segundo de la
derecha, hasta conseguir que todas las columnas tengan la misma anchura que la columna
mayor.
- Situacin de la tabla: clic sobre una celda de la tabla > clic sobre el botn
> pestaa Tabla > en el apartado Alineacin de la tabla, elegir uno.
- Ancho de los bordes: clic sobre una celda de la tabla > clic sobre el botn
> pestaa Tabla > poner los pxeles para el Borde, Espaciado y Relleno.
- Color de toda la tabla: clic sobre una celda de la tabla > clic sobre el botn

> pestaa Tabla > clic sobre Color de fondo para elegirlo.
Otra alternativa es con clic derecho sobre la tabla > Color de fondo de la tabla o celda.
Si luego ponemos un color para las celdas, el color de la tabla quedar para el borde y el
espaciado.
- Color de las celdas: seleccionar las celdas con clic y arrastre o haciendo clic sobre
ellas manteniendo pulsada la tecla [Ctrl] > clic sobre el rectngulo inferior
> elegir el color > Aceptar.
Otra alternativa es con clic derecho sobre la tabla > Color de fondo de la tabla o celda.
- Alinear el contenido dentro de las celdas: seleccionar las celdas > darle a los
botones de alineacin de texto
- Unir celdas: seleccionar las celdas > clic derecho Unir celdas seleccionadas.
- Borrado de tabla, filas, columnas o celdas seleccionadas: clic derecho > Eliminar
tabla > elegir la opcin que queramos.
23) CREAR UNA TABLA DE IMGENES EN MINIATURA (Thumbnails)
- Insertar una tabla. En cada celda insertar una imagen > en la pestaa Dimensiones de
la imagen, fijar el ancho que debe tener la miniatura, que ser igual para todas > en la pestaa
Apariencia, en el apartado Alinear el texto con la imagen, elegir En el centro.
- Crear un enlace desde cada miniatura hacia las imgenes aligeradas que estn en la
carpeta archivos. NO marcar la casilla Mostrar el borde alrededor de la imagen con enlace.
- Alinear la tabla en el centro o a la derecha.
- Podemos aadir color a las celdas y a la tabla (borde).
24) INSERTAR UN ARCHIVO DE VDEO
En el body, insertar, por ejemplo el siguiente cdigo:
<embed src="archivos/avion.flv" height="300" width="400" autostart="true"
loop="false"/>
Donde avion.flv es el nombre del vdeo de ejemplo, que est dentro de la carpeta
archivos. Height es la altura y width el ancho.
Para ver los vdeos es necesario tener instalado el mozilla-mplayer.
25) INSERTAR VDEOS DE INTERNET
En el body, pegar el cdigo que hemos copiado de la web donde est alojado el vdeo.
En alguna pginas como youtube, podemos personalizar el cdigo variando el tamao
del vdeo, el color de los controles de reproduccin, el borde y si queremos que aparezcan
vdeos relacionados.
Si la pgina no permite personalizar el cdigo, podemos variar su tamao segn el
nmero que pongamos para el ancho (width) y la altura (height).
26) INSERTAR ANIMACIONES FLASH
En el body, insertar, por ejemplo el siguiente cdigo:
<embed src="archivos/engranajes.swf" quality="high"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash" height="500"
width="450">
Donde engranajes.swf es la animacin que est dentro de la carpeta archivos. Height es
la altura y width el ancho.

27) ALINEAR UN OBJETO (vdeos, animaciones flash, etc).

- Debemos teclear lo siguiente, antes del cdigo del vdeo o animacin flash:
<div style="text-align: center;"> para alineacin centrada.
<div style="text-align: right;"> para alineacin derecha.
Debemos teclear lo siguiente, despus del cdigo del vdeo o animacin flash:
</div>
- Si con el cdigo anterior no se consigue el centrado, probar con:
<center> y </center> despus del cdigo.
28) SONIDO DE FONDO PARA LA PGINA WEB
- En la parte inferior le damos a la pestaa Cdigo fuente.
- Antes de la etiqueta </body> teclear lo siguiente:
<embed src="archivos/musica.mp3" loop="true" autostart="true"
controls="smallconsole" height="1" width="1">
- Suponemos que el archivo de msica se llama musica.mp3 y est dentro de la carpeta
archivos.
- Con loop="true" indicamos que la msica sonar en bucle.
- Darle a la pestaa inferior Normal y al botn Guardar.
29) FAVICON PARA LA PGINA WEB
- El favicon es el logo que aparece junto a la direccin de la pgina, en la pestaa del
navegador o en la lista de marcadores.
Para que el favicon pueda verse en Internet Explorer debe ser un archivo ico, que es
un tipo de bitmap propietario de Microsoft.
Con Firefox podemos usar otros formatos, como gif, png o jpg.
El diseo podemos hacerlo con el programa KiconEdit, guardndolo dentro de la
carpeta archivos con un formato png de 32 x 32 pxeles.
- En la parte inferior le damos a la pestaa Cdigo fuente.
- En el cdigo html teclear lo siguiente en la lnea anterior a </head>:
<link rel=shortcut icon href=archivos/nombre del favicon con su extensin/>
- Darle a la pestaa inferior Normal y al botn Guardar.
- Con Internet Explorer, para ver el favicon hace falta poner la pgina dentro de las
favoritas y acceder a ella por este men.
30) ALOJAMIENTO DE LAS PGINAS EN UN SERVIDOR WEB
- Ir a la pgina web www.freewebhostingarea.com
- Teclear la direccin que vaya a tener nuestro sitio web y elegir un dominio en el men
desplegable. Darle al botn PROCEED.
- Rellenar el formulario: teclear la contrasea (password) 2 veces. Marcar la casilla
inferior y darle al botn Continue. Si no vemos este botn, pasar a pantalla completa con
[F11].
- Cuando sale la pantalla Welcome indica que hemos terminado el registro. Debemos
guardar esta pgina web como PDF, para ello ir a men Archivo > Imprimir > Imprimir a un
archivo > como Formato de salida, elegir PDF > elegir el nombre del archivo, manteniendo
la extensin PDF > Imprimir. El archivo PDF se guardar en la Carpeta personal.
Debemos tomar nota del servidor FTP, el login (username) y password.
- Para subir nuestros archivos al servidor, hacer clic sobre el enlace del servidor (la
direccin del servidor termina en /ftp).
- Teclear los datos en la ventana del servidor. Elegir el lenguaje y hacer clic sobre el
botn Iniciar.

- Clic sobre el botn Subir archivo.

- Clic sobre el botn Examinar y elegir el archivo a subir. Esto debemos hacerlo para
cada archivo que queramos subir.
- Darle al botn
- Clic sobre

para volver a ver los archivos que hay en el servidor.

- Las carpetas no podemos subirlas al servidor sino que tenemos que crearlas. Para ello
le damos al botn Nuevo archivo > teclear el nombre de la carpeta > darle al botn
> clic sobre
para comprobar que se ha creado la carpeta.
- Para subir los archivos a la carpeta entramos dentro de la carpeta y subimos los
archivos.