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 aplicacin que permita explicar algunos
elementos fundamentales en el diseo de una pgina web; utilizando la herramienta
BlueGriffon v 1.5.1. BlueGriffon es una aplicacin intuitiva que proporciona a los
autores Web una interfaz de usuario sencilla que permite crear sitios web
atractivos utilizando la tcnica WYSIWYG que significa: What You See Is What You Get
(en ingls, "lo que ves es lo que obtienes")..
Desarrolle esta gua y guarde todos los archivos en la carpeta Prac06 dentro de su carnet

PRIMERA PARTE
Creacin de Pginas 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 descomprmala. 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

A
D

rea de trabajo: Es la pagina que se esta diseando, esta puede verse en tipo diseo,
en cdigo o ambas opciones (dividir).

A. Selector de Vistas: Da la posibilidad de cambiar de vista de Diseo a ver su

Cdigo 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
rpido 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 oracin: Bienvenidos/as
a la pgina de : , luego seleccione el texto y presione el botn para poner
la etiqueta negrita (strong) como lo muestra la siguiente figura:

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 opcin de Prrafo 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

seccin 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 ms atractivo de la pgina Web o de todas las

pginas Web de un sitio, podemos cambiarles sus propiedades. En este caso
colocaremos un color de fondo a la pgina que se est diseando. 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 ms utilizado para apuntar a un estilo en una hoja de estilo y JavaScript (a
travs del DOM HTML) para manipular el elemento con el ID especfico.

5. Procedemos a guardar la pgina, 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 ttulo a la
pgina nos aparecer la siguiente ventana:
Introducimos el ttulo de la pgina LabBG este se mostrar en la barra de
ttulo de nuestro navegador, damos clic en aceptar.

Ahora buscamos la ubicacin de nuestra carpeta y le colocamos el nombre de

PaginaPrincipal como lo muestra la siguiente figura:
tm

Cierre brue grifn y busque su archivo, si aparece como el que se muestra en la

figura, significa que no ha tomado la extensin 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 grifn

Seleccione un archivo
 Presione clic en aceptar.

6. Tratando de mejorar el diseo de la pgina principal; se deber agregar un

texto dinmico que muestre: Programa de la Asignatura, para ello
utilizaremos marquesina (etiqueta marquee), al
mismo tiempo conoceremos como ingresar
cdigo de forma manual.

Damos clic en donde queremos que aparezca la

marquesina(debajo de texto MANEJO..),
Luego presione clic en men Insertar, luego en
Cdigo HTM:
Luego en la ventana que aparece digitaremos el siguiente cdigo:
<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 tamao al texto, y en el panel de
Propiedades de Estilo desplegamos la seccion General y en Tamao 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 diseo 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 accin. 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 pgina web inicial como se ver en un navegador

Como vera la marquesina no es ms que un texto que se va moviendo en

nuestra pgina web dependiendo de las opciones que hayamos configurado.