1.HISTORIA
KompoZer es un editor de páginas web de código abierto que combina archivos web manejables y de fácil uso del editor de páginas WYSIWYG.
En marzo de 2007 fue comentado en Download.com, que lo consideró una de las mejores alternativas libres a Adobe CS3, y lo comparó favorablemente con Adobe Dreamweaver.
El próximo lanzamiento, KompoZer 0.8, ha sido actualizado a Gecko 1.8.1, y el código está siendo finalizado después de las pruebas. La primera versión pública alfa de KompoZer 0.81 fue publicada el 11 de febrero de 2009 y ofreció una nueva interfaz de usuario.2
Las capacidades WYSIWYG de KompoZer son una de las principales atracciones del software. Adicionalmente, KompoZer permite la edición directa de código así como una opinión de vista dividida de código gráfico.
https://es.wikipedia.org/wiki/KompoZer
2.Generalidades. Propiedades de las páginas
Se configuran las propiedades de de página a través de: Formato→Título y propiedades de página.Se configuran las propiedades de de página a través de: Formato→Título y propiedades de página.
Se abrirá la siguiente ventana: Introducimos en esta ventana el título de la página, nombre del autor, una breve y Descripción. Es recomendable ingresar estos datos ya que algunos buscadores lo usan para indexar la página a su Base de Datos. Podemos indicar si esta página se trata de una plantilla que usaremos en futuros diseños. También, podemos configurar otras propiedades de la página, tales como el fondo y los diferentes colores a utilizar. Para ello, accederemos a: Formato/ Colores y Fondo de página.
. Disponemos de dos opciones para establecer los colores de la página: • Usar Colores predeterminados. • Usar colores personalizados.
Desde aquí podremos, mediante los atributos y sus respectivos valores, aplicar diferentes configuraciones a, mediante HTML, como estilos incrustados (CSS), y eventos javascripts, que se aplicarán por defecto a los diferentes elementos de nuestra web.
http://www.jesusda.com/docs/ebooks/ebook_disenno-web-con-kompozer.pdf
3.Pasos para crear una 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.
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ágina lorca.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.
http://www.ite.educacion.es/formacion/materiales/107/cd/html/html1305.html
4.Las tablas y las celdas
1.- INSERTAR ELEMENTOS EN LA TABLA:
Para insertar una fila en una tabla ya creada, basta con hacer clic con el botón derecho del ratón sobre una celda cualquiera de la fila que hayamos elegido, y en el menú emergente, dentro de la opción Insertar tabla..., marcar la opción Fila superior, o Fila inferior.
2.- ELIMINAR ELEMENTOS DE LA TABLA:
De la misma forma que insertamos filas o columnas o celdas en una tabla podemos eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para borrar tablas y sus elementos es uno de los siguientes:
- Hacemos clic con el botón derecho del ratón en cualquier punto del interior de la tabla y en el menú emergente elegimos la opción Borrar tabla y dentro de ésta, lo que queremos borrar.
- Seleccionar previamente la tabla, y después de desplegar el menú Tabla, elegir la opción Borrar y dentro de ésta, lo que queremos borrar.
3.- COMBINANDO CELDAS DE LA TABLA:
Es posible unir un grupo de celdas contiguas y que éstas compartan su contenido. Por ejemplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de la primera fila. Algo parecido podríamos hacer para ponerle un pie a la tabla. La opción de combinar varias celdas en una sola permite organizar el contenido de la página Web casi en cualquier forma.
El proceso para unir celdas comienza seleccionando varias celdas contiguas, para ello arrastramos el ratón sobre ellas con el botón izquierdo pulsado. A continuación tenemos dos métodos
- Pulsamos con el botón derecho del ratón eligiendo en el menú emergente la opción Unir celdas seleccionadas.
- Desplegamos el menú Tabla y elegimos unir celdas seleccionadas.
Las celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda combinada y seguir una de las habituales caminos:
- Con el botón derecho se despliega el menú y se elige Dividir celda
- Con el menú Tabla se elige la opción Dividir celda
http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/kompozer/tablas/insertar&eliminar&combinar_celdas.htm
5.Hipervínculos
1. Pincha y arrastra sobre el enlace que aparece en la última línea del documento. A continuación elige Editar > Cortar. Esta URL se ha copiado al portapapeles de Windows y se ha eliminado de la ubicación actual.
2. Pulsa y arrastra para seleccionar el texto "Más información" situado al final del documento. A continuación en la barra de Redacción pulsa en el botón Enlace.
3. En el cuadro de diálogo Propiedades del enlace sitúa el cursor en la casilla Ubicación del enlace y pulsa la combinación de teclas Ctrl+V para pegar la URL copiada anteriormente. Para terminar pulsa en el botón Aceptar.
http://www.ite.educacion.es/formacion/materiales/107/cd/html/html0304.html
6.Marcadores
1. La estructura que va a tener nuestro documento se recoge de forma gráfica en la siguiente figura:
2. Ahora vamos a definir los marcadores, es decir, los puntos en la página a dónde se van a dirigir los hipervínculos que se crearán más tarde. En primer lugar vamos a definir un marcador inicial al comienzo de la página. Pulsa y arrastra para seleccionar el texto del título del documento: “Glosario educativo …” y a continuación pulsa en el botón Enlace interno de la barra de herramientas de Redacción.
3.En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Para simplificarlo escribimos: Glosario y pulsamos en el botón Aceptar. Tras esta operación observarás que el texto seleccionado muestra el icono de un ancla sobre fondo amarillo a su izquierda. Esto indica que es un marcador. Nota: Si es necesario eliminar un marcador basta con hacer clic sobre este icono de ancla y luego pulsar la tecla .
4. Ahora vamos a crear el marcador a la primera entrada del glosario. Selecciona el texto “Adaptación curricular” que encabeza su definición (no en la lista de viñetas). Clic en el botón Negrita de la barra de Formato.
5.A continuación pulsa en el botón Enlace interno.
6.En el cuadro de diálogo Propiedades del enlace interno se proporciona un nombre por defecto del marcador creado a partir del texto previamente seleccionado. Es importante que definamos como nombre del marcador un nombre sencillo sin espacios ni caracteres especiales. Clic en el botón Aceptar.
http://www.ite.educacion.es/formacion/materiales/107/cd/html/pdf/html04.pdf
7.Estructura de la web
Árbol
En esta estructura existe una página principal que llamaremos index desde la que se puede llegar a otras páginas de la Web. Estas otras páginas a su vez son un nodo para llegar a otro grupo de páginas. De esta manera llegaremos a tener las páginas agrupadas en niveles, de manera que para llegar desde el primero al último se deben atravesar los intermedios. Es una estructura muy jerarquizada y algo compleja y difícil para navegar. Puede ser útil para estructurar nuestro sitio en canales o grupos de páginas independientes. En cualquier caso no conviene que el número de niveles sea excesivo, nunca más de 3. Piensa que si queremos ir de una página a otra en el mismo nivel en otra rama del árbol, debemos retroceder hasta la raíz para luego alcanzar la página de destino. Esta imagen te aclarará la estructura
Listas
Esta forma de organizar el sitio es totalmente opuesto al anterior. Realmente no existe una página raíz o principal, lo que tenemos es una especie de lista de páginas donde cada una tiene dos vecinas: una a la izquierda y otra a la derecha, excepto las páginas de los extremos. Una variante presentaría las páginas primera y última enlazadas. Esta forma de organizar un sitio es muy parecido a un libro donde cada página sería un capítulo del mismo. Pasamos del primer al último capítulo a través de los intermedios. Es una implementación muy adecuada para manuales o para procesos donde el usuario deba recorrer forzosamente una serie de páginas.
Mixta
Esta estructura aprovecha las ventajas de las dos anteriores. Las páginas están jerarquizadas en niveles, pero dentro de cada nivel se organizan como listas, de forma que podemos recorrer todas las páginas de un mismo nivel sin sin tener que salir de él. En realidad ni el árbol puro ni las listas puros son del todo eficientes, por lo que es habitual mezclar ambas estructuras.
Red
Las páginas del sitio también pueden estar totalmente interconectadas, es decir, desde cada página podemos ir a cualquier otra del sitio. Realmente la interconexión de absolutamente todas las páginas sería un caso extremo. Es una estructura de apariencia algo anárquica en la que hay que cuidar mucho de no dejar enlaces abiertos, es decir, apuntando a una página inexistente. Además debemos evitar que el usuario se pierda en una maraña de enlaces. Por todo esto ello es necesario planificarla muy bien.
http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/kompozer/introduccion/estructura_sitio.htm
8.Los formularios
1. Para crear formularios con KompoZer, abriremos el programa e iremos a la opción Insertar --> Formulario --> Definir formulario.
2. Rellenaremos los datos del Nombre de formulario; en el campo URL de la acción pondremos en principio: http://forms.melodysoft.com ya configuraremos el servicio para que envíe las encuestas que hagamos a los usuarios de nuestra Web a un correo determinado; en método seleccionaremos la opción POST, es decir... Enviar; finalmente, pulsamos Aceptar.
3. Inmediatamente veremos que el programa ha creado un área punteada, como una celda de tabla de color celeste. Esto nos indica que el formulario está creado con el método de recogida de datos que le hemos especificado. Dentro de ese área comenzaremos a colocar los elementos que nos permitirán recopilar los datos que consideremos de interés para nosotros sobre los visitantes a nuestra Web.
4. CAMPO DE TEXTO:
Vamos a insertar un campo en el que el visitante ponga su nombre, para ello:
- Primero hacemos clic con el ratón dentro de ese área punteada en celeste y ponemos la palabra Nombre.
- A continuación, volvemos a la barra de herramientas Insertar --> Formulario --> Campo de Formulario. Rellenaremos la ventana que nos salga con los siguientes datos: elegiremos un campo de texto, lo nombraremos a efectos de poder reconocerlo posteriormente en
5. Nuestro formulario irá adquiriendo esta apariencia.
6. Posteriormente podemos repetir la operación para agregar otro campo que sea apellidos y dirección de email. Repetimos la misma operación anterior y nombramos a cada una según el dato que queramos recopilar.
7.CASILLAS DE VERIFICACIÓN:
Tras estos datos podremos colocar items para que el visitante elija una entre varias opciones o varias a la vez:
En el siguiente ejemplo vamos a insertar la siguiente pregunta ¿Qué te parece la web? y añadiremos los correspondientes items, cada uno con su opción:
- Para conseguir estos items, recurriremos a Insertar --> Formulario --> Campo de Formulario y en el tipo elegiremos casilla de verificación.
8. A cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario, en este caso son opiniones sobre nuestra Web.
De forma que nuestro formulario va adquiriendo esta presencia:
9. ÁREA DE TEXTO:
Para acabar este sencillo formulario podemos colocar un cuadro de texto para que nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le solicitemos. La mecánica para el cuadro de texto sería la siguiente: Insertar --> Formulario --> Área de Texto
10.
BOTONES DE ENVÍO Y RESTABLECIMIENTO:
Finalmente solo quedará insertar los botones que harán posible que el visitante envíe el formulario o limpie la información del mismo por si se arrepiente de enviarlo o por si se equivoca en la consignación de algún dato. Para insertar los botones haremos lo siguiente: Insertar --> Formulario --> Campo de Formulario; seleccionaremos la opción botón de envío y botón de restablecimiento posteriormente, de forma que completemos el formulario. A cada uno de los botones pondremos sus propiedades.
11. El formulario quedará de esta manera:
http://roble.pntic.mec.es/jprp0006/tecnologia/4eso_informatica/kompozer/formularios/crear_formularios.htm
9.Las hojas de estilo
Ya vimos cómo podemos definir un estilo incrustado para el elemento. Vamos a ver ahora como crear y definir una hoja de estilo.
Todo lo referente a la hoja de estilo, se gestiona utilizando el Editor CSS, accesible a través del botón
Crear o adjuntar una hoja de estilo
Desde la ventana del editor, pulsamos sobre el desplegable de arriba a la izquierda, y seleccionamos Elem. enlace, ya que una hoja es eso, un archivo externo que se enlaza.
La zona de la derecha cambiará como se ve en la imagen:
Si ya tenemos creada la hoja, solo tenemos que seleccionarla pulsando en Escoja archivo. Si la hoja aún no existe, basta con introducir el nombre que queramos, para crear una hoja en la misma carpeta que la página. En ambos casos, pulsamos en Crear hoja de estilos. Si no existía aún, el archivo no se creará hasta que no definamos algún estilo. Para cerrar la ventana, pulsamos Aceptar.
Con esto, lo que hemos hecho realmente es incluir en la cabecera de la página la llamada a la hoja de estilo. Puedes comprobarlo en la vista Código fuente.
https://www.aulaclic.es/paginas-web/t_4_4.htm
