http://emac.uv.es/web

Creación de páginas web con editores WYSIWYGCreación de páginas web básicas

Í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/