Kompozer permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos.
La barra de herramientas de botones permite incluir listas, tablas, imágenes, enlaces a otras páginas, colores, y estilos de fuente. Mientras se crea el documento se puede ver como se visualizará en la web, se puede compartir el documento con otros usuarios,...
Para crear una página web hacer clic sobre el icono en la barra de herramientas de composición.
Para abrir una página ya existente ir a: .
Para abrir una página de la web ir a: e introducir la URL correspondiente: http://www.LliureX.es.
Para abrir una página abierta recientemente ir a: .
Un documento Kompozer puede guardarse en formato HTML o formato solo texto. Si se guarda como HTML () se preserva el formato del documento, como estilos del texto, imágenes, etc. Si se guarda el documento como solo texto () se eliminan todas las etiquetas HTML pero se preserva el texto del documento. Activar la opción exportar a texto.
Formatear párrafos, cabeceras y listas
Para formatear un párrafo:
Hacer clic en el punto de inserción donde se quiere que comience el formato o seleccionar el texto a formatear.
Ir a::
Texto del cuerpo: aplica el estilo por defecto del texto regular, sin afectar al espacio anterior y posterior al texto.
Párrafo: inserta una etiqueta de párrafo. El párrafo incluye margen superior e inferior.
Título1 - Título6: formatea el párrafo como una cabecera. Título1 es el nivel más alto de cabecera y Título6 es el nivel más bajo.
Dirección: se puede utilizar firma en la página web, que indica el autor de la página y la persona de contacto para más información.
Preformato: se suele utilizar para elementos del tipo código, columnas de datos y mensajes de correo que se quieren visualizar con una fuente de ancho determinado.
Contenedor genérico (DIV): permite a los programadores definir estilos o bloques de contenido.
Para una lista de items:
Hacer clic en el punto de inserción sin la línea de texto que se quiere formatear.
Ir a:
Escoger el estilo Lista
No numerada: cada ítem tiene una viñeta (punto). Existe un botón asignado a esta funcionalidad en la Barra de herramientas de formato.
Números: cada ítem tiene un número. Existe un botón asignado a esta funcionalidad en la Barra de herramientas de formato.
Término y Definición: ambos estilos juntos crean una apariencia de estilo glosario. Para definición de tags y palabras.
De forma similar se puede asignar y/o cambiar atributos como el color, estilo y fuente del texto, buscar y reemplazar texto, insertar líneas horizontales y establecer sus propiedades, etc.
Insertar caracteres especiales
Para insertar caracteres especiales como acentos, copyright y caracteres de moneda:
Hacer clic en el punto de inserción donde se quiere que aparezca el carácter.
Ir a: y aparece la siguiente caja de diálogo:
Seleccionar un tipo de carácter especial. Si se seleccionan las opciones acento sobre mayúscula o acento sobre minúscula, habrá que seleccionar en las listas desplegables en la parte inferior de la caja de diálogo, sobre qué letra se quiere que aparezca el acento. Elegir símbolos comunes para insertar caracteres especiales como símbolos de copyright o fracciones.
De la lista desplegable seleccionar el carácter a insertar.
Hacer clic sobre el botón .
Insertar elementos HTML y atributos
Si se conoce como se trabaja con código HTML, se pueden insertar marcas adicionales, atributos de estilo y JavaScript en la página. Para trabajar con código HTML utilizar uno de los siguientes métodos:
Situarse en el punto en el que se quiere insertar código HTML, o seleccionar el texto que se quiere editar, abrir el menú y escoger HTML. Aparece un cuadro de diálogo para insertar código HTML, insertar el texto y las marcas correspondientes y hacer clic en el botón .
Seleccionar un elemento, como una tabla, imagen, enlace o línea horizontal. Hacer doble clic sobre el elemento cuya caja de diálogo de propiedades asociadas se quiere abrir. Hacer clic sobre Propiedades avanzadas para abrir el editor de propiedades avanzadas.
Abrir el menú y elegir fuente HTML o elegir la pestaña correspondiente a Source en la barra de herramientas de pestañas de navegación.
Utilizar el editor de propiedades avanzadas
Para añadir atributos HTML y JavaScript para objetos como tablas, imágenes o líneas horizontales, se puede utilizar el editor de propiedades avanzadas. Este editor tiene tres pestañas y cada una de ellas lista las propiedades actuales del objeto seleccionado:
Atributos HTML: visualiza o añade atributos HTML.
Estilo en línea: hacer clic en esta pestaña para ver o introducir propiedades CSS a través del atributo estilo.
Eventos JavaScript: hacer clic en esta pestaña para introducir eventos JavaScript.
Validación de HTML
Antes de subir un documento al servidor web (publicar) es una buena práctica chequear los documentos HTML para asegurarse de que cumplen los estandares web.
Kompozer proporciona una forma de comprobar que el documento HTML es conforme al estandar HTML W3C, chequeando la sintaxis HTML del documento para que cumpla con el estándar HTML 4.01.
Hay que estar conectado a Internet para utilizar esta característica.
Para validar la sintaxis de documentos HTML:
Los estilos en cascada CSS pueden ser utilizados de tres formas:
Utilizando estilos en línea.
Utilizando hojas de estilo internas.
Utilizando hojas de estilo externas.
Kompozer tiene un editor de hojas de estilo en cascada, llamada CaScadeS y que puede ser utlizado para generar hojas de estilo internas y externas. Para ello ir a: .
Crear hojas de estilo con Kompozer
Utilizando CaScadeS se pueden crear hojas de estilo internas y externas.
Para crear una hoja de estilo interna:
Hacer clic en la lista desplegable y seleccionar la opción . Opcionalmente rellenar los campos Lista de medios y Título.
Hacer clic en Crear hoja de estilo.
Para crear una hoja de estilo externa:
Hacer clic en el botón . Rellenar los campos correspondientes a URL y se genera un nuevo archivo en el sistema de archivos local. Opcionalmente rellenar los campos Lista de medios y Título.
Marcar la opción "Crear hoja de estilo alternativa" para crear una hoja alternativa de otra.
Crear reglas para las hojas de estilo
Después de crear una o más hojas de estilo para un documento html, pueden crearse reglas para cada hoja de estilo individual. Para utilizar una hoja de estilo particular para crear o modificar reglas hacer clic sobre ella en el panel izquierdo. El panel derecho mostrará los detalles de la hoja de estilo en la pestaña . Para crear nuevas reglas:
Hacer clic en el botón en el panel de la izquierda.
El panel de la derecha muestra opciones como el tipo de regla a crear. Elegir uno de ellos: nombre del estilo, estilo aplicado a todo los elementos del tipo, estilo aplicado a todos los elementos que coinciden con el selector siguiente.
Asignar nombre a la regla.
Hacer clic en el botón .
Las reglas pueden ser definidas utilizando las pestañas de estilo (texto, fondo, bordes, caja, listas y aural) en el panel de la derecha. Para ver todas las definiciones de una regla de estilo, realzar la regla en el panel de la izquierda y hacer clic en la pestaña del panel derecho. La pestaña muestra todas las definiciones actualmente aplicadas a la regla.
Para insertar una tabla de manera rápida, seleccionar la opción de menú . Se mostrará una caja de diálogo con varias pestañas para establecer las características de la tabla.
Rápido : para establecer el número de filas y columnas de forma visual con el ratón.
Preciso : aquí se puede indicar, en los campos adecuados, el número de filas y de columnas, así como establecer el ancho total de la tabla en tantos por cien o en píxeles. También se puede indicar el grosor del borde.
Celda : se establecen las características de la celda, como la alineación vertical y horizontal, el espaciado entre celdas.
Botón Edición avanzada: para establecer opciones avanzadas como atributos HTML, eventos de Javascript, estilos, etc.
Una vez creada la tabla, pueden editarse sus propiedades desde la opción de menú . También con el menú contextual, estando situado el cursor dentro de la tabla se pueden establecer las propiedades a nivel de celda.
Otra forma de establecer el ancho y alto de la tabla es haciendo clic y arrastrando sobre los recuadros de control de la tabla, ubicados en las esquinas y los puntos medios.
Si se desea añadir filas o columnas (o incluso celdas), puede hacerse desde la opción de menú , seleccionando la opción deseada.
Fila superior: inserta una fila encima de la fila en que está el cursor.
Fila inferior: inserta una fila debajo de la fila en que está el cursor.
Columna anterior: inserta una columna a la izquierda de la columna en que está el cursor.
Columna posterior: inserta una columna a la derecha de la columna en que está el cursor.
Celda anterior: inserta una celda a la izquierda de la celda en que está el cursor.
Celda posterior: inserta una celda a la derecha de la celda en que está el cursor.
Si se desea eliminar filas o columnas (o incluso celdas), puede hacerse desde la opción de menú , seleccionando la opción deseada.
Tabla: elimina la tabla entera.
Fila : elimina la fila en la que está el cursor.
Columna : elimina la columna en la que está el cursor.
Celda: elimina la celda en la que está el cursor.
Contenido de la celda: elimina el contenido de la celda, pero no la celda en sí.
Si se desea seleccionar filas, columnas, celdas o la tabla entera, puede hacerse desde la opción de menú , seleccionando la opción deseada.
También desde el menú contextual (clic secundario del ratón), estando situado el cursor dentro de la tabla pueden realizarse todas estas acciones.
Unir dos celdas
Para unir dos celdas de una tabla, seleccionar las dos celdas a unir y luego seleccionar la opción de menú . También puede hacerse desde el menú contextual.
Dividir una celda en dos
Para dividir una celda de una tabla en dos, estando situado en la celda, seleccionar la opción de menú . También puede hacerse desde el menú contextual.
Dentro de una celda se pueden introducir diversos contenidos: texto, imágenes o incluso otra tabla. De esta forma pueden anidarse tablas, creando estructuras más complejas.
Para insertar una imagen en el documento seleccionar la opción de menú , se mostrará la siguiente caja de diálogo, con diversas pestañas:
Ubicación: se indica de dónde coger la imagen, pulsando en el botón Elegir archivo, se explora el sistema de archivos para seleccionar la imagen. También se indica el texto alternativo que se mostrará de la imagen y un texto de ayuda cuando se pase el ratón por encima.
Dimensiones: se puede cambiar el tamaño de la imagen.
Apariencia: se establecen las distancias entre la imagen y el texto, así como la alineación del texto alrededor de la imagen.
Enlace : se puede establecer un hipervínculo para la imagen.
Botón Edición avanzada: para establecer opciones avanzadas como atributos HTML, eventos de JavaScript, estilos, etc.
Una vez insertada la imagen, se pueden establecer sus propiedades haciendo doble clic sobre ella, seleccionando la opción de menú o a través del menú contextual.