sesion5 blue griffon

8/18/2019 sesion5 Blue griffon

1/19

http://emac.uv.es/web

Creación de páginas web con

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


2/19

Índice

Introducción

Interfaz de usuario

Creación y sincronización de sitios webEdición de documentos

Inserción de elementos HTML

Manejo de hojas de estilo

Composición de páginas web


3/19

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 ysincronizar el sitio con el servidor mediante FTP u otro

protocolo.


4/19

Introducción


5/19

BlueGriffon

Programa de autoría web de código libre:

!""#$%%&'()*+,--./0.+*

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

http://kompozer.net/http://kompozer.net/


6/19

BlueGriffon: interfaz de usuario


7/19

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 comose vería en un navegador


8/19

BlueGriffon: edición HTML


9/19

BlueGriffon: manejo de sitiosweb

Hay un plugin de BlueGriffon para mantener

sincronizado nuestro sitio web local con el servidor

por FTP

!""#$%%

&&&'()*+,-.//01'203%

.14+5'#!#6#7,+8%9.-+9:;

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


10/19

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


11/19

BlueGriffon: inserción decontenido

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

) por cada retorno de carro.

Podemos seleccionar parte del texto para darle unestilo seleccionándolo en la barra de herramientas o

en el menú de Formato.


12/19

BlueGriffon: inserción decontenido

Podemos insertar elementos HTML seleccionándolos

en la barra de insertar o en el menú Insertar:

Enlaces

Imágenes

Tablas

Capas (elemento )

etc.


13/19

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 fondoDefine una fuente por defecto

Crea un texto de encabezado h1

Inserta tres o cuatro párrafos de texto y alguna imagen en la

columna principalCrea una lista con enlaces a las otras páginas web de tu sitio


14/19

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).


15/19

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 izquierdaDefine 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 delpárrafo


16/19

Editores web

Existen otros editores WYSIGYG:

Gratuitos:

Kompozer: !""#$%%=03#0>+-'1+"

Aptana Studio:

!""#$%%&&&'7#"717'203

SeaMonkey:

!""#$%%&&&'8+7301=+?@#-0A+2"'0-,%

Comerciales:

Adobe Dreamweaver:

!""#$%%&&&'740(+'203%+8%#-04*2"8% 4-+73&+7B+-'!"3)

http://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.seamonkey-project.org/http://www.seamonkey-project.org/http://www.aptana.com/http://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.adobe.com/es/products/%0Ahttp://www.seamonkey-project.org/http://www.seamonkey-project.org/http://www.aptana.com/http://www.aptana.com/http://kompozer.net/http://kompozer.net/


17/19


Con elementos y estilos se pueden componer

páginas web complejas sin necesidad de tablas:

!""#$%%+372'*B'+8%&+(%+A+3#)0CD%

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


18/19


Se puede empezar por una plantilla vacía en HTML yCSS con contenedores de texto:

!""#$%%122'34.("*)/)+3".+01.5%

!""#$%%6660-+))712201.5%

!""#$%%6660.2680.+*%

!""#$%%.#)/2.(+1)")5#'3")20.+*%

!""#$%%122",/8)+&.90+34:./',/)01.5%

http://opensourcetemplates.org/http://opensourcetemplates.org/http://www.oswd.org/http://www.oswd.org/http://www.free-css.com/http://www.free-css.com/http://csslayoutgenerator.com/http://csslayoutgenerator.com/


19/19

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:

!""#$%%&&&'*B'+8%8.*B%278%>.1"+-1+"%#*().272.0&+('!"3

Alojamiento en Dropbox:

!""#8$%%&&&'4-0#(05'203%
http://www.uv.es/siuv/cas/zinternet/publicacioweb.htmhttp://www.uv.es/siuv/cas/zinternet/publicacioweb.htmhttp://www.uv.es/siuv/cas/zinternet/publicacioweb.htm

sesion5 blue griffon

Documents