Páginas web ::: Mi primera página Diseño de materiales multimedia. Web Mi primera página

Transcripción

1 Mi primera página

2 Mi primera página El propósito de este actividad es diseñar tu primera página con Kompozer. El tema elegido es una breve pincelada del poeta Federico García Lorca. En este documento se utilizarán: encabezado, texto, imagen y un enlace a una página externa Organización en carpetas 1. Vamos crear una carpeta de nombre miweb. Si utilizas Windows se propone crear esta carpeta en el raíz de tu disco duro utilizando el explorador de archivos. Selecciona Inicio > Mi PC y haz doble clic en la unidad Disco local C: para abrirla. Clic derecho sobre un espacio del explorador y elige Nuevo > Carpeta. Introduce el nombre de la nueva carpeta: miweb. Doble para situarte dentro de esta carpeta. Repite el paso anterior para crear una subcarpeta con el nombre images dentro de miweb. Si utilizas Ubuntu Linux se propone crear esta carpeta dentro de la carpeta personal del usuario. 1.1 Desde el escritorio elige Lugares > Carpeta personal. Se abre el explorador de archivos mostrando el contenido de la carpeta /home/<usuario>/ 1.2 Clic derecho sobre un espacio del explorador y elige Crear una carpeta. Introduce el nombre de la nueva carpeta: miweb. Doble para situarte dentro de esta carpeta. 1.3 Repite el paso anterior para crear una subcarpeta con el nombre images dentro de miweb.

3 25 2 Extrae a la carpeta miweb el contenido del archivo comprimido que se adjunta: lorca.zip. Como resultado de la extracción encontrarás dos archivos: una imagen (lorca.gif) y un archivo de texto (lorca.txt). 3 Arrastra el icono de la imagen para soltarlo dentro de la subcarpeta images. De esta forma este archivo se mueve para situarse dentro ella. En lo sucesivo la carpeta images contendrá todas las imágenes que se integren en las páginas web creadas Iniciar un documento nuevo en Kompozer 4 Inicia el programa Kompozer haciendo doble clic sobre el correspondiente icono situado en el escritorio. 5 Minimiza esta ventana y utiliza el explorador de archivos para abrir (doble clic) el archivo de texto lorca.txt. Se abrirá el Bloc de Notas mostrando su contenido. 6 Selecciona Edición > Seleccionar todo para seleccionar el texto completo que contiene este archivo y a continuación elige Edición > Copiar para copiarlo al portapapeles de Windows. Cierra la ventana del Bloc de Notas

4 26 7 En la barra de tareas de windows pulsa en el botón correspondiente de Kompozer para maximizar la ventana de este programa. 8 Clic sobre el nuevo documento HTML que estamos editando y en la barra de menús selecciona Editar > Pegar. De esta forma podrás disponer del texto de la página sin necesidad de teclearlo. 9 Antes de continuar conviene guardar el archivo en la carpeta miweb que hemos creado. Para ello pulsa en el botón Guardar o bien elige Archivo > Guardar. 10 En el cuadro de diálogo Título de la página introduce su título y haz clic en el botón Aceptar. 11 Se muestra el cuadro de diálogo Guardar página como donde debes desplegar la lista Guardar en para localizar la carpeta miweb. En la casilla Nombre introduce el nombre del archivo: lorca.

5 27 12 Clic en el botón Guardar 13 Título. Pulsa y arrastra para seleccionar la primera línea de texto: Federico García Lorca. En la barra de Formato despliega el cuadro de estilos de párrafo y elige Título 1. Si deseas regresar al estilo normal, marca el texto que desees y selecciona en esta lista: Texto del cuerpo. Nota: Es muy recomendable utilizar las distintas opciones de formato de esta lista para destacar frases y párrafos Insertar una imagen 14 Clic debajo del título anterior y pulsa la tecla <enter> para definir el punto donde se insertará la imagen. En la barra de Redacción pulsa en el botón Imagen. 15 Se muestra el cuadro de diálogo Propiedades de imagen. Pulsa en el botón Elegir archivo para localizar el archivo que contiene la imagen.

6 28 16 Despliega la lista Buscar en: para abrir la carpeta miweb\images donde hemos situado anteriormente el archivo lorca.jpg. Clic sobre este archivo y pulsa en el botón Abrir. 17 Al regresar de nuevo al panel Propiedades de imagen conviene introducir el Texto alternativo. En este caso teclea Federico García Lorca. Se trata de un texto descriptivo que contribuye a la accesibilidad de nuestra página y que se mostrará cuando el usuario sitúe el ratón sobre ella.

7 29 18 Observa que en la casilla Ubicación de la imagen se indica la ruta relativa para localizar la imagen desde la página actual: images/lorca.jpg. Para terminar clic en el botón Aceptar Insertar un hipervínculo 19 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. Como habrás podido comprobar es una enlace a Google que ya incluye los términos de búsqueda relativos al autor que nos ocupa: 20 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. 21 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.

8 Guardar un documento web 22 Clic en el botón Guardar 23 Minimiza la ventana de Kompozer para situarte en la carpeta miweb. Doble clic sobre el archivo lorca.html creado para ver su aspecto con el navegador web instalado por defecto. Otra opción es pulsar en el botón Navegar que se muestra en la barra de Redacción de Kompozer. No obstante esta opción sólo funciona si tienes configurado en tu equipo Mozilla Firefox como navegador por defecto. 24 No olvides eliminar el archivo lorca.txt una vez que has terminado. 25 Si es necesario abrir el archivo selecciona Archivo > Abrir.