Taller Investigación

1. Pasos para abrir una página nueva en Kompozer
2. Pasos para guardar una página en Kompozer
3. Pasos para abrir una página existente en Kompozer
4. Pasos para insertar una imagen en Kompozer 
5. Pasos para colocar un color de fondo a la página en Kompozer 
6. Pasos para introducir textos en Kompozer
7. Pasos para dar formato a los textos en Kompozer como (Cambiar tipo de letra, Colocar tamañode letra, Colocar color de letra)
8. Pasos para hacer una vista previa de la página realizada en Kompoz

SOLUCIÓN:
1. Es práctica habitual disponer de una copia íntegra del sitio web en el equipo local. Esta se suele guardar en una carpeta del disco duro. Cuando se realizan actualizaciones de su contenido se suben los archivos oportunos utilizando un programa cliente de FTP.

A continuación se detalla el procedimiento para convertir la carpeta miweb en un sitio web local utilizando Kompozer.

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.

2.si es primera vez que lo guardamos tenemos varias opciones:

1.Pulsar sobre el botón guardar.

2. menú archivo>guardar

3. control + S

En cualquier de los casos, en la ventana que se abre buscamos y abrimos la carpeta donde se va a guardar escribimos en nombre: nombre_nuevo_archivo.html, y pulsamos el botón guardar.

 3.Si se trata de un archivo  almacenado en nuestro ordenador, tenemos varias posibilidades:

1.pulsar sobre el botón abrir.

2.menú Archivo>abrir archivo

3.Control + O (letra O de Open)

4....para añadir una imagen de fondo en celdas, párrafos, etc.

Usa el editor CSS para crear una regla de estilo que seleccione el elemento deseado (td en el caso de celdas de tabla, p para párrafos, etc.). Una vez creada la regla, ve a la pestaña Fondo y elige allí, en el campo Imagen, la ruta a un archivo de fondo, preferiblemente en formato PNG o JPEG. La regla de estilo CSS quedará así:

p {
  background-image: (ruta/al/archivo.jpg);
}

...para añadir una imagen con un enlace que se abra en otra ventana

Sigue estos pasos:

1. Crea la imagen con su enlace mediante el diálogo de la opción de menú Insertar → Imagen...
2. Una vez de nuevo en la pantalla principal, haz clic una vez en la imagen.
3. Fíjate en la barra de estado de KompoZer, donde se ve la ruta de etiquetas hasta la imagen (<img>). Justo a su izquierda debes ver una etiqueta de enlace (<a>). Haz clic en esa etiqueta en la barra de estado.
4. Ahora, ve a la opción de menú Formato → Propiedades de enlace.
5. Se abrirá el diálogo de propiedades del enlace, donde ya puedes escoger que se abra en una ventana nueva.

Además de esa manera, hay otras dos formas de hacerlo:

• Haz clic con el botón derecho sobre la etiqueta de enlace <a> en la barra de estado y escoge Propiedades avanzadas. En ese diálogo, selecciona del desplegable de la izquierda "target" y en el de la derecha "_blank".
• Pasa a la vista de código fuente y escribe ahí, dentro de la etiqueta <a href="..."> del enlace que quieres que se abra en otra ventana e incluye en ella la propiedad target="_blank".

5.Si observamos con atención el documento que nos creó The Masher, observamos que el recuadro central, en el que aparece el listado de ejercicios, ya aparece con un ligero sombreado gris. Nosotros podemos modificar los colores con Kompozer a nuestro gusto. Vamos a cambiar el color del fondo y también vamos a cambiar el color del título.

Para cambiar el color de fondo de la página seleccionaremos el icono hoja de estilos CSS: 

En la ventana de estilos seleccionamos 'body' y luego pulsamos sobre la pestaña Fondo.

Dentro de la pestaña Fondo pulsaremos sobre la caja de colores.

En ella seleccionaremos un color de fondo. No debe ser un color sólido muy fuerte porque tapará el texto.

Ahora vamos a cambiar el color del título. Para ello lo seleccionamos con el cursor y seleccionamos en el menú superior Formato > Color del texto...

Ahí seleccionamos un color diferente del que tenía, con el mejor encaje posible sobre el fondo, y aceptamos.

6.La forma de escribir el texto, utilizar el teclado, etc. es la misma que con cualquier editor de texto.
Es importante saber en qué elemento estamos escribiendo. Normalmente lo haremos dentro de párrafos y encabezados, incluso en divisiones. Esto podemos seleccionarlo en el primer desplegable de la barra de herramientas. En otras ocasiones, utilizaremos otros elementos como listas o tablas. Recuerda, que siempre puedes saber en qué etiqueta estamos mirándolo en la barra de estado.
Nota: En este curso crearemos páginas XHTML Estrict, que no permiten escribir directamente sobre el cuerpo del documento, hay que utilizar párrafos.
A la hora de escribir dentro de un párrafo, cuando pulsemos la tecla Intro crearemos un salto de línea. Esto se debe a que cerramos el párrafo y comenzamos uno nuevo, porque así lo hemos elegido en las opciones. Si lo que queremos es crear un salto dentro del párrafo, lo que equivaldría a una etiqueta html del tipo <br />, tenemos que mantener pulsada la tecla Mayúsculas (Shift) mientras pulsamos Intro.

7.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.También con los demás botones de la barra de textos.

8. Le damos clic al archivo guardado.