Tutorial 2: Creación de páginas web con Compozer

Transcripción

1 Tutorial 2: Creación de páginas web con Compozer Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar siete procedimientos: Crear páginas simples Imágenes Formatos de texto Propiedades de página Tablas Hipervínculos Listas 1- Crear páginas simples Desde Nestcape, abre el programa Composser: Se abre una página en blanco, como la siguiente: 1

2 Desde Archivo también se puede abrir un documento anteriormente elaborado, como por ejemplo la plantilla de WebQuest. 2

3 Te recomendamos que, antes de iniciar cualquier cambio, guardes el archivo en la carpeta miwebquest. Es conveniente que al archivo que debe abrirse en primer lugar lo denomines index.htm o index.html. Cada vez que crees un nuevo archivo, debes hacer lo mismo. Al Guardar, te pedirá un título para tu página: 2- Formatos de texto Una vez escrito un texto, puedes modificar las propiedades de su formato. Selecciona el texto haciendo clic a un lado del mismo, y arrastrando el cursor hasta que todo él se ilumine. Después, selecciona Formato y alguna de sus opciones: Fuente, Estilo del texto, Color, Párrafo (para alienarlo), Lista, etc. Seleccionamos el estilo de texto: 3

4 También podrás realizar cambios en el formato desde la barra de formato: Con Texto del cuerpo podemos elegir el tipo de letra, como Encabezado 2, etc.: El recuadro siguiente sirve para seleccionar los colores del texto: Al pinchar en él, se abre una paleta de color: 4

5 Estos dos iconos sirven para disminuir o aumentar el tamaño de la fuente Los siguientes dan formato de negrita, cursiva o subrayado: Y los cinco últimos sirven para desplazar el párrafo hacia la izquierda o derecha; alinear a izquierda, centro, derecha o justificar el párrafo: 3- Tablas La utilidad tabla se puede emplear también para ordenar los elementos de una página, como textos, títulos, imágenes, etc. Ten en cuenta que la forma en la que otra persona verá tu página web no es igual necesariamente a como tú la ves al diseñarla (depende de la configuración de la pantalla, entre otros factores). Por eso es conveniente configurar una página web ubicando en casillas de una tabla sin bordes los distintos elementos. Para insertar una tabla, pon el cursor en el lugar en el que quieras ubicar la tabla. Selecciona Tabla>Insertar tabla, o bien el icono Tabla: 5

6 Podemos seleccionar algunos atributos, como el número de filas y columnas, dónde se alinearán, si tendrán borde o no (tamaño de borde cero equivale a una tabla sin bordes), el espaciado de las celdas, etc. También podemos seleccionar en pixel o en porcentaje el ancho de la tabla. Para ello, con el cursor dentro de la tabla, pinchamos el botón derecho del ratón: Desde Tabla también se pueden unir celdas. Otra posibilidad es insertar una tabla dentro de otra ("tablas anidadas"), para obtener distintas disposiciones. Para eso, insertaríamos una nueva tabla dentro de la otra: 6

7 Una vez insertada la tabla podemos modificar muchas de sus propiedades. Para ello, con el cursor dentro de la tabla, se puede pinchar en el botón derecho del ratón, para abrir el siguiente menú contextual: En Propiedades de tabla, podemos cambiar su color de fondo: 7

8 Lo mismo sucede con las celdas: 8

9 4- Listas Para crear listas se puede partir de los elementos de un párrafo que ya esté escrito. En este caso, se selecciona con el cursor todos los elementos de la futura lista, y luego se elige Formato>Lista Podemos seleccionar listas con viñetas de varios tipos, o listas numeradas. También puede comenzar por insertarse primero una lista, y luego añadir los elementos, separados por una línea, y seleccionar para crear listas el icono de lista o de lista numerada: 5- Imágenes Desde la opción de Insertar se puede seleccionar un conjunto de recursos, como línea horizontal, símbolos, imágenes, etc. 9

10 Si seleccionamos Imagen, se abre el siguiente menú: Podemos encontrar la imagen en nuestro ordenador, seleccionando "Seleccionar archivo": Desde el botón Examinar se puede localizar en las distintas carpetas la imagen deseada. El mismo procedimiento se puede aplicar a los vídeos: 10

11 6- Propiedades de página Abrimos Formato>Título y propiedades de la página: 11

12 En el menú que se abre, indicamos el título, autor y descripción: Es preciso poner un título a la página (aparecerá en la barra de navegación cuando el archivo se abra en Internet). En Colores y fondo de la página podemos fijar dichos atributos, así como una imagen de fondo de la página Desde Seleccionar archivo, podemos elegir la imagen de nuestro ordenador. 12

13 7- Hipervínculos Un hipervínculo es un enlace a una parte del documento, a otro documento o archivo, o a un correo electrónico. El hipervínculo o enlace se puede disponer a partir de un texto o de una imagen. En primer lugar, se selecciona el texto o la imagen en los que se ubicará el hipervínculo. Después, se selecciona Insertar>Enlace: Podemos seleccionar un archivo. En todo caso, si hipervinculamos dos páginas entre sí (por ejemplo, la página index.htm y la página proceso.htm, conviene que crees vínculos de una a la otra y de la segunda a la primera, para crear un circuito de navegación completo. Para implementar un hipervínculo interno, hay que seguir los siguientes pasos: 1- Crear un marcador (el lugar de dentro de la página al que queremos acceder desde el hipervínculo). Seleccionamos Insertar>Anclaje con nombre: 2- Seleccionamos el texto del hipervínculo, e Insertar>Enlace. Desde la pestaña Enlazar la dirección, seleccionamos uno de los anclajes con nombre que habíamos creado: 13

14 1. Si insertamos una imagen en página web, ésta se archiva por defecto en una carpeta que se llamará igual que el nombre del archivo. También ser archivarán archivos auxiliares, que es necesario subir a Internet junto con la página para que se vea en su totalidad. 2. Conviene no poner nombres de archivos con tildes o eñes. 3. Es conveniente llamar al archivo que sirve de portada index.htm o bien index.html 4. Conviene subdividir una página demasiado larga en otras más pequeñas: cuando se acumula demasiada información, corremos el peligro de que el usuario no lea toda. Si es posible, cada archivo debe ocupar aproximadamente una pantalla de ordenador: es mejor crear páginas hipervinculadas que se comuniquen entre sí unas con otras directamente (es decir, que desde cualquier página se pueda pasar a otra del conjunto que componen nuestra web) 14