View
226
Download
0
Category
Preview:
Citation preview
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
8/18/2019 sesion5 Blue griffon
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
8/18/2019 sesion5 Blue griffon
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.
8/18/2019 sesion5 Blue griffon
4/19
Introducción
8/18/2019 sesion5 Blue griffon
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/
8/18/2019 sesion5 Blue griffon
6/19
BlueGriffon: interfaz de usuario
8/18/2019 sesion5 Blue griffon
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/18/2019 sesion5 Blue griffon
8/19
BlueGriffon: edición HTML
8/18/2019 sesion5 Blue griffon
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
8/18/2019 sesion5 Blue griffon
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
8/18/2019 sesion5 Blue griffon
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.
8/18/2019 sesion5 Blue griffon
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.
8/18/2019 sesion5 Blue griffon
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
8/18/2019 sesion5 Blue griffon
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).
8/18/2019 sesion5 Blue griffon
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
8/18/2019 sesion5 Blue griffon
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/
8/18/2019 sesion5 Blue griffon
17/19
Composición de páginas web
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/
8/18/2019 sesion5 Blue griffon
18/19
Composición de páginas web
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/
8/18/2019 sesion5 Blue griffon
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.htmRecommended