Guia sobre Kompozer

Como utilizar la Herramienta Kompozer

• CREAR UN SITIO WEB

1. Abre Kompozer.

2. Elige Ver > Mostrar/Ocultar > Administrador de sitios o bien pulsa directamente la tecla de función<F9>

3. En el panel Administrador de sitios pulsa en el botón Editar sitios.

4. En el cuadro Configuración de publicación introduce “MiSitio” en el cuadro de texto Nombre de sitio y pulsa el botón Seleccionar directorio para apuntar a la carpeta miweb. Clic en el botón Aceptar.

5. En el Administrador de sitios ahora se muestra la rama MiSitio. Pulsa sobre el icono “+” para desplegar su contenido. Se muestra una estructura de árbol con las carpetas y archivos que contiene.

6. En la parte superior derecha del Administrador se dispone de botones que permiten:

1) Recargar. Permite recargar o actualizar el listado de archivos y carpetas. Es útil cuando se añaden elementos utilizando el explorador de archivos de Windows o bien cuando se crea una página HTML nueva.
2) Nueva carpeta. Para crear una nueva carpeta dentro de la carpeta seleccionada en el árbol del Administrador de sitios.
3) Cambiar nombre. Facilita la modificación de nombre del archivo o carpeta seleccionado.
4) Eliminar. Elimina el archivo o carpeta seleccionada.

7. Utiliza estos botones para crear las carpetas de la imagen que falten: audios, css, descargas, pdf,plantillas, scripts, swf y videos.

8. A continuación vamos a crear la página index.htm de nuestro sitio web. Para ello seguiremos el procedimiento habitual: Archivo > Nuevo.

9. Escribe «Mi página principal», selecciona el texto y elige como formato Título 1.

10. Pulsa la tecla <enter> para situarte en la siguiente línea y pulsa en el botón Viñetas de la barra de herramientas de Formato.

11. Escribe «Federico García Lorca», selecciona el texto y pulsa en el botón Enlace.

12. En el cuadro de diálogo Propiedades del enlace haz clic en el botón Elegir archivo … y localiza la páginalorca.html situada en la carpeta miweb. Clic en Aceptar.

13. Repite los pasos 11 y 12 para crear los enlaces al resto de páginas :

• Demografía: poblacion.html
• Escribe tu cuento: escribe.html
• Glosario: glosario.html

14. Selecciona Archivo > Guardar como.

15. Introduce el título: Mi página principal para guardar la página index.htm en la carpeta miweb.

16. Para probar su funcionamiento pulsa en el botón Navegar.

• UTILIZAR TABLAS

Las tablas no solo son útiles para mostrar listas de datos, son también un elemento primordial para diseñar las páginas Web, o sea, para colocar con cierta libertad los elementos que forman la página Web.

Las tablas nos permiten organizar y distribuir los espacios de una manera óptima. Por ejemplo no permite poner el texto en columnas como en los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen. En el momento en que queremos mostrar páginas Web atractivas y fáciles de leer nos veremos en la necesidad de utilizar las tablas.

1.- Descripción de las tablas.

2.- Crear tablas.

3.- Definir la tabla

1. DESCRIPCIÓN DE LAS TABLAS:

Una tabla podemos describirla como un conjunto de espacios organizados en filas y columnas. La intersección de las filas se llaman celdas. Una cuadrícula es una tabla, en cuyas celdas podemos poner cualquier elemento HTML: desde texto hasta imágenes.

Algunos atributos propios de las tablas son

– Alto y ancho (height y width): pueden medirse en pixels o en porcentaje del elemento contenedor (width= «100%» indica que ocupa el ancho del elemento en el que está colocada.

– Border: Anchura del borde que rodea a la tabla. Si es 0 el borde no se ve

– Cellpadding: relleno, margen del contenido de cada celda. Se mide en pixels.

– Cellspacing (espaciado): espacio entre las celdas. Se mide en pixels.

2.- CREAR TABLAS:

Crear una tabla en KompoZer consiste en insertar el correspondiente elemento HTML, para lo cual tienes tres posibilidades:

Usar el botón tabla de la barra de botones

Usar el menú Insertar y opción tabla

Usar el menú Tabla con la opción insertar

3.- DEFINIR LA TABLA:

Al insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las características de la tabla. En él encontramos tres pestañas:

a) La primera de ellas es Rápido, es la opción por defecto y nos permite dimensionar la tabla de manera gráfica. Para ello desplazamos el cursor con el ratón por la cuadrícula. Una vez tengamos la distribución que nos interesa, hacemos clic y tendremos la tabla insertada en la página.

b) Preciso en esta pestaña podremos escribir directamente el número de filas y columnas de que constará nuestra tabla.

– Filas: escribimos el número de filas que tendrá nuestra tabla.

– Columnas: lo mismo, pero para el valor de las columnas.

– Anchura: ancho de la tabla. Puede ir en píxeles, o en el porcentaje del espacio que ocupará la tabla dentro del elemento donde se encuentre insertada.

– Borde: Grosor en píxeles que tendrá la línea que forma el borde de la tabla, si queremos que sea «invisible» , daremos al borde el valor cero.

c) Celda, en ella podemos añadir más detalles a los elementos que vayan en el interior de las celdas de nuestra tabla:

– Alineación Horizontal: indicaremos si irán sin alineación, alineados a la izquierda, al centro, o a la derecha, según elijamos del menú desplegable.

– Alineación Vertical, que puede ser, sin alinear, arriba, al centro, o abajo, según el valor que elijamos del menú desplegable.

– Marcando el apartado Ajustar, permitiremos que el texto introducido en la celda ocupe varias líneas, si deseamos que todo el texto se muestre en una sola línea, marcaremos No ajustar .

– En el apartado Espacio entre las celdas introduciremos el valor en píxeles que queremos haya entre las celdas.

– En el apartado Relleno de las celdas, el valor en píxeles que habrá entre los bordes de la celda y su contenido.

• INSERTAR MULTIMEDIA

Para insertar vídeo
Usa la nueva etiqueta <video>. Ve a Insertar → HTML… y escribe directamente el código HTML, que tiene más o menos este aspecto:

<video src=»archivo.webm» autoplay>
Tu navegador no implementa el elemento video.
</audio>
Donde «archivo.webm» es un archivo de vídeo. El estándar del W3C no establece ni recomienda ningún formato determinado sobre otro y, por tanto, ningún navegador está obligado a implementar un formato común. Cuando vayas a incluir vídeos usando esta etiqueta tendrás que probar su compatibilidad con diversos navegadores y plataformas. Los navegadores basados en Gecko, el motor de representación web de Mozilla, así como otros navegadores populares como Google Chrome, implementan el formato contenedor WebM, y dentro de este el códec de vídeo VP8 y el de audio Vorbis.
Se muestra una barra de progreso de vídeo con algunos controles básicos; si el navegador no implementa la etiqueta, se muestra el contenido de la etiqueta, lo que puede usarse para advertir al visitante, como en el ejemplo. También es posible aprovechar el contenido interno de la etiqueta para introducir un objeto Flash alternativo, o invocar un applet de Java que reproduzca el vídeo en formato WebM.

• INSERTA CÓDIGO HTML 

1.-Para ello crea un documento nuevo, y escribe lo que aparece en la siguiente figura.
Guarda el archivo en la carpeta “Documents\web\Web Asturias” de tu pendrive con el nombre
“videos.html”. Pulsa sobre el botón “Recargar” del “Administrador de sitios” para que
aparezca este archivo.

2.- Ahora escoge un vídeo en Youtube. Pulsa sobre el botón “Compartir” y luego sobre
el botón “Insertar” que aparece más abajo. Copia el código HTML que aparece más abajo,
para pegarlo en el editor de Kompozer.

3.- No se puede pegar directamente este código en el editor, sino que tendremos que ir
previamente al menú “Insertar/HTML”.

Aparece un cuadro de diálogo para que copiemos el código HTML. Cuando lo hayas
copiado pulsa el botón “Insertar”.