Í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.
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: 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: 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/
Top Related