Introducción al diseño web y utilización de la herramienta Kompozer

1. DISEÑO WEB
Informática 4º ESO

2. ¿Qué es una página web?
Una página web es un documento
que puede contener texto,
enlaces, imágenes, elementos
multimedia, etc. Está adaptada
para la World Wide Web (www) y
se accede a ella mediante un
navegador.
Existen varios navegadores, algunos de los más usados son Mozilla
FireFox ,Internet Explorer y Chrome.

3. ¿Cómo se crea una página web?
Para crear las páginas web existe un lenguaje que se llama:
HTML (HyperText Markup Language)
Las páginas web se pueden crear mediante un sencillo editor de texto, como el bloc
de notas, usando HTML.
También existen varios programas que permiten crear contenido web sin conocer
HTML, como por ejemplo Kompozer.

4. Kompozer
Kompozer es un programa sencillo para realizar páginas web en vista diseño, lo que
facilita la vida para usuarios con poca experiencia y que no quieren trabajar con el
lenguaje HTML, ya que permite editar las páginas sin conocimientos técnicos,
directamente como si estuviésemos trabajando en un programa de procesamiento de
textos.
Para descargarlo, podemos
acceder directamente
a su página:
http://kompozer.net/

5. Kompozer – pantalla de inicio
La primera pantalla que se muestra cuando abrimos el programa es como la que se
vemos en la imagen.
Como podemos observar, consta de
varias barras en la parte superior
(menú, botones y formato), una barra
de estado en la parte inferior, el
explorador de sitios en la parte
izquierda y el área de edición junto
con los posibles modos de edición.

6. Kompozer – barra de menú
La primera barra que encontramos es la de
menú, donde aparecen las cabeceras de los
distintos menús desplegables que aparecen
al hacer clic sobre ellas.
Como en la mayoría de programas de
Windows, su disposición es: Archivo,
Edición, Ver, Insertar, Formato, Tabla,
Herramientas, Ayuda. Estas opciones
pueden repetirse en la barra de botones y
también pueden ser accesibles mediante
una combinación de teclas.

7. Kompozer – barra de botones (1)
La siguiente barra es la de botones, que contiene las operaciones más usadas:
 Nuevo: La utilizaremos para crear un documento o página nueva, abrirá a su vez, un
cuadro de diálogo donde deberemos señalar algunas opciones.
 Abrir: Nos abre una página ya creada y guardada previamente.
 Guardar: Guarda la página que estamos creando en ese momento. Se abre primero
un cuadro de diálogo donde deberemos ponerle un nombre si no lo tiene.
 Publicar: Este botón hará que la página se guarde en el servidor de internet desde
el cual será vista por los navegantes.

8. Kompozer – barra de botones (y 2)
 Deshacer/Rehacer: Deshace la última acción o vuelve a hacer la última acción
deshecha.
 Enlace interno: Como su nombre indica, sirve para crear enlaces dentro de la propia
página.
 Enlace: Esta opción permite crear enlaces a otras páginas.
 Imagen: Abre la ventana de propiedades de la imagen para permitir localizar el
archivo que la contiene e insertarla en el documento.
 Tabla: Abre la ventana insertar tabla, donde elegiremos el número de filas y
columnas que tendrá nuestra tabla.
 Formulario: Abrirá la ventana propiedades del formulario.

9. Kompozer – barra de formato (1)
La tercera barra es la de formato, a la que se le suele dar mucho uso. Sus elementos
más destacables de izquierda a derecha son:
 Formato de párrafo: Es un menú desplegable donde se muestran los distintos
formatos que podremos dar a los párrafos del documento.
 Fuente o tipo de letra: También como menú desplegable nos presenta el tipo de
letra que estamos utilizando.
 Color: Nos permite cambiar el color del texto para resaltar alguna palabra o
párrafo.

10. Kompozer – barra de formato (y 2)
 Tamaño: Permite ampliar o reducir el tamaño del texto.
 Negrita (B), Cursiva (I) y Subrayado (U): Son estilos de presentación de las fuentes
para resaltar o destacar determinadas palabras.
 Listas: Permite la creación de listas jerarquizadas, utilizando números o viñetas.
 Justificación: Alinea el texto a izquierda, centro, derecha, o lo "justifica", o sea,
distribuye por igual entre los dos márgenes, derecho e izquierdo.
 Sangrías: Definen los límites izquierdo y derecho.

11. Kompozer – modos de edición (1)
 Modo de edición normal: en este
modo se muestra la página como
un documento de word,
permitiendo una edición normal,
insertando texto, imágenes, tablas,
etc. Se ve la apariencia final de la
página, pero las zonas y los objetos
están recuadrados para facilitar su
manipulación. Los objetos
dinámicos no se ven.
En la parte principal de la pantalla, encontramos el área de edición, bajo la cual se
muestran los modos de edición, que nos van a permitir modificar la página de
diferentes formas e ir variando, si queremos, entre ellos.

12. Kompozer – modos de edición (2)
 Etiquetas HTML: en esta vista, se
muestran las etiquetas del lenguaje
HTML en fondo amarillo y la
estructura de la página de forma
visual.
En la parte principal de la pantalla, encontramos el área de edición, bajo la cual se
muestran los modos de edición, que nos van a permitir modificar la página de
diferentes formas e ir variando, si queremos, entre ellos.

13. Kompozer – modos de edición (3)
 Código fuente HTML: en esta vista
se puede editar directamente el
código HTML de la página en texto
plano.
En la parte principal de la pantalla, encontramos el área de edición, bajo la cual se
muestran los modos de edición, que nos van a permitir modificar la página de
diferentes formas e ir variando, si queremos, entre ellos.

14. Kompozer – modos de edición (y 4)
 Vista preliminar: vista previa de la
página prácticamente igual a como
se verá en el navegador. Desde
esta vista también puede editarse el
texto y el formato de los objetos.
En la parte principal de la pantalla, encontramos el área de edición, bajo la cual se
muestran los modos de edición, que nos van a permitir modificar la página de
diferentes formas e ir variando, si queremos, entre ellos.

15. Kompozer – Vídeo demostrativo
A continuación, vamos a ver un vídeo
en el que se muestra cómo utilizar esta
herramienta…