PDF de programación - Guia5 Parte1 BlueGriffon

UNIVERSIDAD DE EL SALVADOR

FACULTAD DE INGENIERIA Y ARQUITECTURA

ESCUELA DE INGENIERIA DE SISTEMAS INFORMATICOS
MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS

Ciclo II – 2012



GUIA DE LABORATORIO 05

En este material de apoyo se desarrolla una aplicación que permita explicar algunos
elementos fundamentales en el diseño de una página web; utilizando la herramienta
BlueGriffon v 1.5.1. BlueGriffon es una aplicación intuitiva que proporciona a los
autores Web una
interfaz de usuario sencilla que permite crear sitios web
atractivos utilizando la técnica WYSIWYG que significa: What You See Is What You Get
(en inglés, "lo que ves es lo que obtienes")..

Desarrolle esta guía y guarde todos los archivos en la carpeta Prac06 dentro de su carnet

PRIMERA PARTE
Creación de Páginas Web y subida de archivos en sitio gratuito.


I-Elementos de BlueGriffon



1. Abra la carpeta BlueGriffon 1.5.1 Portable, la cual puede estar comprimida en

.zip o .rar, en tal caso descomprímala. Y podrá ver la siguiente estructura de
archivos:


Para abrir el programa de doble clic en bluegriffon.exe, tal como lo muestra la
figura.



Al abrirlo aparecerá la siguiente pantalla, de no ser así, entre al menú de

Archivo, y seleccione nuevo:

B

C

F
E

D



A

Área de trabajo: Es la pagina que se esta diseñando, esta puede verse en tipo diseño,
en código o ambas opciones (dividir).

A. Selector de Vistas: Da la posibilidad de cambiar de vista de Diseño a ver su

Código Fuente y viceversa.

B. Barra de Menú: Barra que contiene los elementos de menú desplegables a los

cuales se puede accesar.

C. Barras de Herramientas: Muestra las diferentes herramientas de acceso

rápido que podemos utilizar.

D. TAG(etiqueta) o elemento Xhtml5 en la cual se encuentra el cursor

actualmente.



II- Crear Pagina Web Principal

1. Debemos escribir sobre el Área de Trabajo la siguiente oración: “Bienvenidos/as



a la página de : ”, luego seleccione el texto y presione el botón
la etiqueta negrita (strong) como lo muestra la siguiente figura:

para poner

2. Ahora Digitaremos “MANEJO DE SOFTWARE PARA MICROCOMPUTADORAS”.

Y “Área de Botones” y sombrearemos la frase MANEJO DE SOFTWARE PARA
MICROCOMPUTADORAS



y sobre la barra de herramientas, cambiamos la opción de Párrafo a
Encabezado 1 .



Debe quedar como la siguiente figura:

3. Si deseamos centrarlo basta con dar clic en

. Ahora cambiaremos el color

de letra a color azul, para ello utilizaremos las Propiedades de Estilo.
Damos clic en la opcion “Paneles” de la barra de menu y luego seleccionamos
“Propiedades de estilo”.

Aparecerá el Panel de Propiedades de estilo. Adecue sus ventanas para que se
vea se la siguiente manera:



Ahora seleccione el texto y en el Panel de Propiedades de estilo despliegue la
sección “Colores”, luego de clic en “Primer plano”:



Seleccione el color azul y de clic en aceptar. El programa le pedira introducir un Id (*)
unico, puede ingresar por ejemplo el nombre “h1azul”.

Podra observar el siguiente cambio:



4. Para conseguir un aspecto más atractivo de la página Web o de todas las

páginas Web de un sitio, podemos cambiarles sus propiedades. En este caso
colocaremos un color de fondo a la página que se está diseñando. Para ello
debemos dirigirnos a la etiqueta “body”, dando clic en la parte inferior
izquierda de la ventana, como muestra la figura:

Luego, en el panel de “Propiedades de estilo”
damos clic, dentro de la seccion “Colores”, a la opcion “Color de fondo”:

Seleecionamos el color gris y nuevamente nos pedira ingresar un Id unico, e
ingresamos el texto “fondopagina”. Al hacer estos cambios la pagina se vera
como se muestra en la siguiente imagen.



(*) El atributo id especifica un identificador único para un elemento HTML (el valordebe ser único dentro del
documento HTML). El atributo id es el más utilizado para apuntar a un estilo en una hoja de estilo y JavaScript (a
través del DOM HTML) para manipular el elemento con el ID específico.

5. Procedemos a guardar la página, le recomendamos lo haga en su carpeta de

practica6(carnet\prac06). Para ello debemos dar clic sobre el icono Guardar
. Como es la primera vez que guardamos y no hemos introducido un título a la
página nos aparecerá la siguiente ventana:



Introducimos el título de la página “LabBG” este se mostrará en la barra de
título de nuestro navegador, damos clic en aceptar.

Ahora buscamos la ubicación de nuestra carpeta y le colocamos el nombre de
“PaginaPrincipal” como lo muestra la siguiente figura:
tm



Cierre brue grifón y busque su archivo, si aparece como el que se muestra en la
figura, significa que no ha tomado la extensión html correctamente, por lo cual

deberá ser renombrado dicho archivo a PaginaPrincipal.html

Antes

Cambio



Posteriormente veremos el archivo en formato correcto(reconocido que puede
abrirse con mozilla u otro programa que maneje html)



Vuelva a entrar a blue grifón


Seleccione un archivo



Presione clic en aceptar.

6. Tratando de mejorar el diseño de la página principal; se deberá agregar un



texto dinámico que muestre: “Programa de la Asignatura”, para ello
utilizaremos marquesina (etiqueta marquee), al
mismo tiempo conoceremos como ingresar
código de forma manual.

Damos clic en donde queremos que aparezca la
marquesina(debajo de texto “MANEJO…..”),
Luego presione clic en menú “Insertar”, luego en
“Código HTM”:



Luego en la ventana que aparece digitaremos el siguiente código:

<marquee>Programa de la Asignatura</marquee><br></br>

Al dar clic en Aceptar podrá ver el texto en su área de trabajo:



Si se desea cambiar el estilo de la marquesina, debemos ubicarnos en el tag de
marquesina para el cambio de las propiedades de estilo.



Asi mismo daremos un nuevo tamaño al texto, y en el panel de
“Propiedades de Estilo” desplegamos la seccion “General” y en “Tamaño” el
que se llama:
Muy grande (xx/large).

Puede ponerle a ese id el nombre formatomarquesina.



Puede tambien cambiar el color(a verde) como lo hizo en el nombre de la
asignatura.



Debera quedar de la siguiente forma:



7. Ahora procederemos a visualizar nuestro diseño realizado en el navegador



web. Damos en clic en el siguiente icono:



Luego nos pedirá que seleccionemos el navegador de nuestra preferencia para
poder realizar esta acción. Damos clic en Elegir, nos dirigimos a Equipo, luego
seleccionamos Disco C:/, Archivos de Programa (puede variar a Archivos de
Programa x86), Mozilla Firefox y estando en ese directorio seleccionamos:
firefox.exe y luego damos clic en Aceptar.



Con eso aparecerá nuestra página web inicial como se verá en un navegador

Como vera la marquesina no es más que un texto que se va moviendo en
nuestra página web dependiendo de las opciones que hayamos configurado.