Composición de páginas web

Creación de páginas web con
editores WYSIWYG
Creación de páginas web básicas
http://emac.uv.es/web
Índice
Introducción
Interfaz de usuario
Creación y sincronización de sitios web
Edición de documentos
Inserción de elementos HTML
Manejo de hojas de estilo
Composición de páginas web
Introducción
Los programas de edición del tipo WYSIWYG (what
you see is what you get):
Permiten diseñar de manera gráfica la apariencia de la
página web.
Ayudan a escribir el código HTML al introducir
automáticamente las etiquetas de los distintos elementos
HTML.
Permiten gestionar un sitio web de varias páginas y
sincronizar el sitio con el servidor mediante FTP u otro
protocolo.
Introducción
BlueGriffon
Programa de autoría web de código libre:
http://bluegriffon.org
Características:
Edición de páginas WYSIWYG
Gestión de sitios web vía FTP
Creación de código HTML
Asistente para hojas de estilos
Soporte para tablas y formularios
BlueGriffon: interfaz de usuario
BlueGriffon: edición HTML
Kompozer tiene 4 vistas distintas de edición web:
Normal: interfaz WYSIWYG de edición
HTML tag: interfaz WYSIWYG en la que además se
muestran las etiquetas de cada elemento HTML
Source: edición del código fuente HTML
Preview: previsualización del documento HTML tal como
se vería en un navegador
BlueGriffon: edición 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 página 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: inserción de
contenido
En la vista normal, podemos introducir texto en la
página web como si estuvieramos en una aplicación
de procesado de texto.
El texto introducido se separa automáticamente en
párrafos (elemento <p>) por cada retorno de carro.
Podemos seleccionar parte del texto para darle un
estilo seleccionándolo en la barra de herramientas o
en el menú de Formato.
BlueGriffon: inserción de
contenido
Podemos insertar elementos HTML seleccionándolos
en la barra de insertar o en el menú Insertar:
Enlaces
Imágenes
Tablas
Capas (elemento <div>)
etc.
Ejercicio 2
Crea una nueva página web en tu sitio, con las
siguientes características:
Define el título “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 párrafos de texto y alguna imagen en la
columna principal
Crea una lista con enlaces a las otras páginas web de tu sitio
BlueGriffon: hojas de estilo
BlueGriffon posee un editor de
estilos que ayuda en la creación
de reglas.
Permite definir reglas sobre
etiquetas, reglas o elementos
únicos (mediante su id).
Ejercicio 3
Sobre la página creada en el ejercicio anterior, aplica
distintas reglas de estilo a sus elementos:
Convierte un párrafo 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 párrafo de
texto, desplazada arriba y a la derecha del comienzo del
párrafo
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
Composición de páginas web
Con elementos <div> y estilos se pueden componer
páginas web complejas sin necesidad de tablas:
http://emac.uv.es/web/ejemplo10/
Composición de páginas web
Se puede empezar por una plantilla vacía 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 página 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/