Creacin de pginas web con

editores WYSIWYG
Creacin de pginas web bsicas

http://emac.uv.es/web

ndice
Introduccin
Interfaz de usuario
Creacin y sincronizacin de sitios web
Edicin de documentos
Insercin de elementos HTML
Manejo de hojas de estilo
Composicin de pginas web

Introduccin
Los programas de edicin del tipo WYSIWYG (what
you see is what you get):
Permiten disear de manera grfica la apariencia de la
pgina web.
Ayudan a escribir el cdigo HTML al introducir
automticamente las etiquetas de los distintos elementos
HTML.
Permiten gestionar un sitio web de varias pginas y
sincronizar el sitio con el servidor mediante FTP u otro
protocolo.

Introduccin

BlueGriffon
Programa de autora web de cdigo libre:
http://bluegriffon.org

Caractersticas:
Edicin de pginas WYSIWYG
Gestin de sitios web va FTP
Creacin de cdigo HTML
Asistente para hojas de estilos
Soporte para tablas y formularios

BlueGriffon: interfaz de usuario

BlueGriffon: edicin HTML

Kompozer tiene 4 vistas distintas de edicin web:
Normal: interfaz WYSIWYG de edicin
HTML tag: interfaz WYSIWYG en la que adems se
muestran las etiquetas de cada elemento HTML
Source: edicin del cdigo fuente HTML
Preview: previsualizacin del documento HTML tal como
se vera en un navegador

BlueGriffon: edicin HTML

BlueGriffon: manejo de sitios

web
Hay un plugin de BlueGriffon para mantener
sincronizado nuestro sitio web local con el servidor
por FTP

http://
www.bluegriffon.com/
index.php?pages/FireFTP

Ejercicio 1
Crea un nuevo sitio web en BlueGriffon:
Ponle como nombre curso web
Utiliza el asistente para crear una pgina en HTML5 con
1 columna de texto principal y una columna lateral.
Guarda tu sitio web en la carpeta D:/curso web
Sincroniza esta carpeta con el servidor por FTP
Visualiza tu sitio web

BlueGriffon: insercin de
contenido
En la vista normal, podemos introducir texto en la
pgina web como si estuvieramos en una aplicacin
de procesado de texto.
El texto introducido se separa automticamente en
prrafos (elemento <p>) por cada retorno de carro.
Podemos seleccionar parte del texto para darle un
estilo seleccionndolo en la barra de herramientas o
en el men de Formato.

BlueGriffon: insercin de
contenido
Podemos insertar elementos HTML seleccionndolos
en la barra de insertar o en el men Insertar:
Enlaces
Imgenes
Tablas
Capas (elemento <div>)
etc.

Ejercicio 2
Crea una nueva pgina web en tu sitio, con las
siguientes caractersticas:
Define el ttulo ejercicio final del curso
Define un color y una imagen de fondo
Define una fuente por defecto
Crea un texto de encabezado h1
Inserta tres o cuatro prrafos de texto y alguna imagen en la
columna principal
Crea una lista con enlaces a las otras pginas web de tu sitio

BlueGriffon: hojas de estilo

BlueGriffon posee un editor de
estilos que ayuda en la creacin
de reglas.
Permite definir reglas sobre
etiquetas, reglas o elementos
nicos (mediante su id).

Ejercicio 3
Sobre la pgina creada en el ejercicio anterior, aplica
distintas reglas de estilo a sus elementos:
Convierte un prrafo a la clase izquierda y ponlo en una
caja flotante a izquierda
Define un estilo para el encabezado
Convierte la lista de enlaces en un men horizontal
Inserta una imagen como fondo del primer prrafo de
texto, desplazada arriba y a la derecha del comienzo del
prrafo

Editores web
Existen otros editores WYSIGYG:
Gratuitos:
Kompozer:

http://kompozer.net

Aptana Studio: http://www.aptana.com

SeaMonkey:

http://www.seamonkey-project.org/

Comerciales:
Adobe Dreamweaver: http://www.adobe.com/es/products/

dreamweaver.html

Composicin de pginas web

Con elementos <div> y estilos se pueden componer
pginas web complejas sin necesidad de tablas:

http://emac.uv.es/web/ejemplo10/

Composicin de pginas web

Se puede empezar por una plantilla vaca en HTML y
CSS con contenedores de texto:
http://csslayoutgenerator.com/
http://www.free-css.com/
http://www.oswd.org/
http://opensourcetemplates.org/
http://csstinderbox.raykonline.com/

Alojamiento web
Una vez creada la pgina web, hay que alojarla en un
servidor para que sea accesible desde Internet.
Opciones gratuitas:
Alojamiento web de la UV:
http://www.uv.es/siuv/cas/zinternet/publicacioweb.htm

Alojamiento en Dropbox:
https://www.dropbox.com/