Informática 4º ESO Apuntes de BlueGriffon
{ }
1
Informática 4º ESO Apuntes de BlueGriffon
Índice
1. UNA PÁGINA WEB SENCILLA......................................................................... 3
2. PROPIEDADES DE LA PÁGINA....................................................................... 4
3. COLORES EN UNA PÁGINA WEB................................................................... 5
4. LÍNEAS HORIZONTALES................................................................................ 6
5. AÑADIR UNA IMAGEN.................................................................................... 7
6. USAR ENLACES................................................................................................ 8
7. INSERTAR TABLAS........................................................................................ 10
8. TRABAJAR CON FORMULARIOS.................................................................. 13
{ }
2
Informática 4º ESO Apuntes de BlueGriffon
1. UNA PÁGINA WEB SENCILLA
Para crear una página nueva:
(a) Después de acceder al programa BlueGriffon, elige el mandato Nuevo del menú Archivo. Se muestra
la imagen mostrada a continuación.
(b) En primer lugar, crea una carpeta en tu pen de trabajo en la que guardarás toda la información de tu
página web; asigna a esta carpeta el nombre MiPaginaWeb (así, sin tilde). El siguiente paso es guardar la
página; para ello, elige Guardar como... del menú Archivo y, en el cuadro de diálogo que aparece,
escribe: Página principal. Se muestra, entonces, otro cuadro de diálogo para que guardes tu página
web; hazlo en la citada carpeta con el nombre index.
(c) Escribe, en la zona en blanco, el texto: Esta es mi primera página web.
(d) Haz clic en el botón Vista previa en un navegador -la bola del mundo- para que observes cómo
quedaría tu obra maestra en Internet. Al hacerlo, aparece el cuadro de diálogo mostrado en la siguiente
página. Sigue los siguientes pasos:
• Haz clic en el botón Elegir.
• Ejecuta la secuencia: C: > Archivos de programa > Mozilla Firefox > firefox.
• Elige Aceptar.
Aparece, entonces, tu página web tal como se mostraría en el navegador.
{ }
3
Informática 4º ESO Apuntes de BlueGriffon
2. PROPIEDADES DE LA PÁGINA
Los motores de búsqueda utilizan la información que encuentran en las páginas web para agregarlas a sus
bases de datos de indexación y de esta forma ofrecer la página como resultado de sus búsquedas. Esta
información se puede introducir en nuestra página web siguiendo estos pasos:
{ }
4
Informática 4º ESO Apuntes de BlueGriffon
(a) Selecciona la pestaña que contiene la página para la que quieres establecer las propiedades.
(b) Elige la opción Propiedades de página del menú Formato. Aparece el cuadro de diálogo de la página
anterior.
(c) Lleva a cabo las modificaciones indicadas a continuación.
• En el cuadro Autor escribe tu nombre y tus apellidos.
• En el cuadro Descripción escribe: Prácticas de Informática 4º ESO.
• En el cuadro Palabras clave introduce: informática, 4eso, ...
• Selecciona el español como Idioma del texto.
• Elige Aceptar.
3. COLORES EN UNA PÁGINA WEB
El fondo de la página es de gran importancia si queremos conseguir resultados visuales adecuados, por lo
que es imprescindible realizar una buena selección de los colores que se quiere utilizar. Para establecer los
colores del primer plano y del fondo:
(a) Haz clic en los botones situados en el centro de la pantalla sobre la pestaña de la página,
respectivamente.
(b) Elige el color deseado en la paleta que aparece.
Existe un procedimiento alternativo al uso de estos botones. Sigue los siguientes pasos:
(a) Selecciona la etiqueta <body>, situada en el ángulo inferior izquierdo de la ventana.
(b) Haz clic en el icono Establecer estilos CSS de la barra de herramientas y despliega la barra Colores. Se
muestra las siguientes opciones:
(c) En la lista Aplicar estilos a: selecciona todos los elementos del mismo tipo ...
(d) Haz clic en el botón Color de fondo.
(e) Elige el color deseado en la paleta que aparece.
{ }
5
Informática 4º ESO Apuntes de BlueGriffon
(f) Selecciona la etiqueta <p>, situada en el ángulo inferior izquierdo de la ventana.
(g) Repite los pasos (b) a (e) y utiliza ahora el botón Primer plano.
4. LÍNEAS HORIZONTALES
Se puede separar las diferentes secciones del texto mediante la introducción de líneas horizontales. Para
ello:
(a) Selecciona la pestaña adecuada.
(b) Sitúa el cursor donde quieras introducir la línea horizontal.
(c) Elige el mandato Barra horizontal del menú Insertar. Se muestra entonces el siguiente cuadro de
diálogo.
(d) Completa el cuadro con los parámetros que desees.
✔Actividad 1
(a) Abre el archivo INDEX, contenido en tu pen de trabajo.
(b) Establece para el fondo, mediante la etiqueta <body>, el color #ccffff y para el primer plano,
mediante la etiqueta <p>, el color #330099.
(c) Coloca el puntero del ratón dentro de la frase que contiene tu página y elige Encabezado 1 en la lista
desplegable que está debajo de la barra de herramientas, a la izquierda. Vamos a modificar ahora el
estilo de este elemento (del tipo <h1>). Haz clic en el icono Establecer estilos CSS de la barra de
herramientas y lleva a cabo las siguientes modificaciones:
• Familia de fuentes: Arial, Helvética, …
• Tamaño: 24 pt.
• Alineación: centrada.
• Color: #cc0000.
(a) Debajo de este texto inserta una línea horizontal de 80% de tamaño, alineación centrada y color
#999999.
(b) Debajo de la línea horizontal escribe: Parece que esto funciona. Tiene que tener el color que has
{ }
6
Informática 4º ESO Apuntes de BlueGriffon
establecido en el apartado (b).
(c) Guarda el archivo con el mismo nombre. Observa cómo se vería en el navegador.
5. AÑADIR UNA IMAGEN
En primer lugar, crea dentro de la carpeta MiPaginaWeb otra carpeta de nombre Imagenes. En ella
guardarás todas las imágenes que quieras utilizar en tu página. En segundo lugar, sigue el siguiente
procedimiento para obtener algunas imágenes:
(a) Accede a la página: recursostic.educacion.es/bancoimagenes/web/.
(b) Haz clic en Colecciones.
(c) En la categoría Ciencias de la Naturaleza busca flores silvestres. Se muestran seis imágenes.
(d) Haz clic con el botón derecho en la primera y, en el menú contextual, elige Guardar como... Sigue los
pasos adecuados para guardarla en la carpeta correspondiente.
(e) Haz lo mismo con las demás imágenes.
Para insertar una imagen:
(a) Coloca el cursor en el punto donde quieras que aparezca la imagen.
(b) Elige el mandato Imagen del menú Insertar. Aparece el cuadro de diálogo anterior.
(c) Haz clic en el icono que se encuentra a la derecha de la zona Ubicación de la imagen y busca la
imagen que quieres añadir en la carpeta Imagenes. La casilla La URL es relativa a la ubicación de la
página debe estar marcada.
(d) Escribe una descripción de la imagen en el cuadro Texto alternativo o marca la casilla Permitir un
texto alternativo vacío.
(e) Elige Aceptar. La imagen se incluye en la página.
{ }
7
Informática 4º ESO Apuntes de BlueGriffon
✔Actividad 2
(a) Abre el archivo INDEX, contenido en tu pen de trabajo.
(b) Inserta una imagen de tu carpeta Imagenes, la que quieras, debajo del último texto. Asígnale la
alineación centrada.
(c) Inserta dos imágenes más, con alineaciones izquierda y derecha, respectivamente.
(d) Guarda el archivo con el mismo nombre.
6. USAR ENLACES
Los hipervínculos son enlaces a archivos guardados junto a la página web, a otras partes de la misma
página, a otras páginas web o a direcciones de correo.
Los hipervínculos pueden estar asociados a texto, imágenes, iconos, etc y se sigue el mismo procedimiento
en todos los casos. Para crear un enlace o hipervínculo:
(a) Selecciona el elemento (texto, imagen, icono, etc) al que quieres asignar un enlace.
(b) Elige una de estas opciones:
• Selecciona el mandato Enlace del menú Insertar.
• Haz clic con el botón derecho sobre el elemento y, en el menú contextual, elige Insertar o editar un
enlace.
• Selecciona el icono en forma de cadena de la barra de herramientas.
Aparece el siguiente cuadro de diálogo:
{ }
8
Informática 4º ESO Apuntes de BlueGriffon
(a) En el cuadro Destino, mediante el icono de la carpeta, selecciona la página web deseada.
(b) Mar
Crear cuenta
Comentarios de: Apuntes de BlueGriffon (0)
No hay comentarios