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/