Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Operaciones Kompozer 4eso
Operaciones Kompozer 4eso
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
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
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).
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.
- 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.