ManualNVU 2015

Manual NVU 2 Secundaria
Prof. Julio Moreno Garca
Pgina 1
1.
RECONOCIENDO AL NVU
1.1. POR QU NVU?
NVU es un editor de pginas Web WYSIWYG (What-You-See-Is-What-You-Get)
multiplataforma basado en Mozilla Composer, pero de ejecucin independiente. Aade
caractersticas nuevas como soporte integrado de CSS y mejor gestin del soporte FTP
para actualizacin de los ficheros.
Este editor facilita el desarrollo de pginas Web, gracias a las
diferentes visualizaciones disponibles en su interfaz (cdigo
fuente, ventana WYSIWYG, visin con tags de HTML realzados),
entre los cuales es posible cambiar mediante un sistema de
pestaas.
NVU est disponible para Linux, Mac OS X y Microsoft Windows,
aunque puede compilarse para cualquier plataforma con el
Netscape Portable Runtime. Mozilla Composer est todava en
desarrollo como parte de la suite Mozilla para otras plataformas.
Hay una versin porttil de NVU que puede ser transportada y usada directamente desde
una memoria USB sin necesidad de instalarse en el computador.
1.2. INSTALACIN
La instalacin debe hacerse siempre desde la pgina Web del programa:
http://www.nvu.com ya que estn saliendo versiones continuamente y el hacerlo desde
una recopilacin no nos asegura que instalemos la ltima versin. Una vez que abrimos
un navegador y tecleamos su direccin, en la parte superior de la pantalla encontraremos
enlaces para descargas segn el sistema operativo y el idioma que seleccionaremos.
Los pasos a seguir para la instalacin son muy sencillos e intuitivos.
Pgina 2
2.
INICIAMOS NVU
Para arrancar NVU podemos hacer dos cosas:
Hacer doble clic sobre el icono de acceso directo que nos crea en el escritorio.
bien pinchar en el botn
de Windows 8 y buscar dentro de los App.
En la ventana de trabajo de NVU nos encontramos los siguientes elementos:
Barra de Titulo: A la izquierda de esta barra aparece el ttulo de la pgina Web que estamos
editando y el nombre del archivo en caso de que ya lo hayamos guardado con anterioridad
. A la derecha los botones de control de la ventana minimizar,
maximizar/restaurar y cerrar.
Barra de Mens: Con los mens Archivo, Ver, Insertar, Formato, Tabla, Herramientas,
Ayuda. A travs de estos mens podemos acceder a todas las opciones del programa.
Barra de Redaccin, Herramienta Estndar o de Botones: En ella aparecen botones con
las opciones de uso ms habitual que se encuentran en la barra de men. A travs de estos
botones accedemos ms rpidamente a estas opciones.
Barras de Formato o Herramientas para Edicin de Textos: Con botones que nos
permiten acceder a opciones ms bsicas de formato de texto y prrafos. Estas son similares
a las de cualquier procesador de textos. Bajo esta tenemos otra barra con ms opciones de
formatos y adems de otras relacionadas con el formato aplicando estilos y las capas.
Barra de herramientas para edicin de estilo: permite manejar los estilos css a
aplicar a los diferentes elementos de la pgina.
Pgina 3
Ventana administracin sitios Web y Archivos:

Esta situada a la izquierda y en ella configuraremos
nuestros sitios Web, para poder acceder de forma
rpida a sus distintas pginas Web. A travs de ella
tambin podremos publicar en Internet nuestras
Webs y editar directamente las paginas ya
publicadas sin necesidad de tenerlas guardadas en
nuestro disco local.
Sus componentes son:
Permite filtrar la lista de archivos que se
visualizarn en el rbol o detalle del sitio, esto es
muy til cuando nuestro sitio es muy grande y slo
queremos ver un tipo de archivo en particular.
Pulsando este botn aparecer el cuadro de
dilogo que nos permitir administrar los sitios. A
continuacin, lo veremos con mayor detalle.
Botn de refrescar, nos permite refrescar el rbol
del sitio, este botn nos ayuda cuando hemos
agregado archivos a nuestro sitio desde afuera de
NVU; por ejemplo, utilizando el explorador de
archivos y queremos que el cambio se refleje en
NVU.
Nos permite crear una nueva carpeta dentro de
nuestro sitio.
Nos permite renombrar cualquier
archivo dentro de nuestro sitio.
carpeta
Nos
permite
eliminar
archivo de nuestro sitio.
carpeta
cualquier
Editando Sitios
Ahora, crearemos nuestro primer sitio, para lo cual, daremos clic al botn Edit del
administrador, nos aparecer el siguiente dilogo:
Pgina 4
Lo primero que debemos definir es el nombre de nuestro site esto lo hacemos ingresando la
informacin en el texto Site Name, la cual es obligatoria. A continuacin, se visualizan 3
secciones cada una con un propsito especfico.
Publishing Sites
Permite apreciar los sites actuales con los que estamos

trabajando, solamente tenemos nuestro site NVU. A continuacin
3 botones para crear un nuevo site New Site, establecer como
site por defecto Set as Default y para eliminar el site Remove
site, algo a tener en cuenta es que al remover el site este no se
elimina fsicamente, solamente se borra de NVU.
Web Site Information Como indica en la pantalla, ah es donde debemos ingresar la
direccin http, direccin de Internet o URL de nuestro site. Un
ejemplo:
http://www.google.com.pe. Para el desarrollo lo
podemos dejar en blanco ya que esa informacin se coordina
junto a un ISP o proveedor de servicios de Internet, quien es el
que finalmente alojar y har posible que nuestra pgina sea
accedida desde cualquier lugar va Internet.
Publishing Server
Ah debemos colocar la informacin del servidor donde
publicaremos nuestra pgina web. Eso se realiza mediante una
direccin FTP, que no es ms que un directorio en algn servidor
remoto. Esta direccin tambin nos la proporciona el ISP as
como el usuario y password, tenemos la opcin de guardar el
password para no tener que recordarlo posteriormente. Para el
desarrollo publicaremos de manera local, o sea usando una
carpeta dentro de nuestra PC, para ello damos clic al botn
Select Directory y seleccionamos una carpeta.
Ventana de rea de Edicin o Espacio de Trabajo: En esta rea es donde diseramos y

editaremos nuestras pginas. Es nuestro espacio de trabajo. Cada pgina que estemos
editando se mostrara en esta rea, pudiendo cambiar de una a otra mediante las pestaas
que se muestran en la parte superior con el titulo de cada pgina. Tambin podemos mostrar
las reglas en esta rea, que nos ayudaran a dimensionar diversos objetos.
Pgina 5
Barra de modo de edicin: Aparecen cuatro pestaas con las que podremos cambiar el
modo de edicin:
Normal (o modo WYSIWYG): es la vista por defecto, nos permite ver como va
quedando la pgina conforme la diseemos
Etiquetas HTML o Tags: muestra de forma esquemtica las etiquetas utilizadas
Cdigo Fuente (Source): vista que nos permite tener acceso al cdigo HTML de la
pgina
Vista Preliminar (Preview): nos permite ver la pgina de cmo se vera la pgina en el
navegador
Barra de estado: Proporciona informacin como la relativa a dentro de que etiqueta nos
encontramos. Adems a travs de ella podemos seleccionar etiquetas con sus contenidos
para realizar acciones sobre ellos como dar formatos, eliminar, etc.
Pgina 6
3.
CERRAMOS NVU
Como cualquier otra aplicacin NVU se puede cerrar de varias formas:
Haciendo clic sobre el aspa que aparece en la parte superior derecha
de la ventana de la caja herramientas.
Desplegando el men Archivo de la caja de herramientas y eligiendo
la opcin Salir.
Pulsando la combinacin de teclas Ctrl + Q o pulsando las teclas
Alt+F4.
4.
ALGUNOS CONCEPTOS BSICOS

4.1. LA WORLD WIDE WEB Y LAS PGINAS WEB
La World Wide Web (WWW) es un servicio grfico de Internet que proporciona una red
de documentos interactivos. Fue inventada por un laboratorio suizo, el CERN, en 1991.
Es el servicio de Internet con mayor xito y que crece con ms rapidez. Su xito se debe
a la facilidad de uso, a la capacidad de presentar
informacin diversa, actualizada y proveniente de cualquier
punto del planeta y a la sencillez con la que es posible crear
y publicar documentos en este sistema.
Las pginas Web son los documentos bsicos de la World Wide Web. Estn basadas en
la tecnologa hipermedia, que integra las posibilidades de los multimedia y del
hipertexto, con lo que se puede navegar en un mar de informacin textual, grfica y
sonora. Un sitio Web es, simplemente, una coleccin de pginas enlazadas que
contienen informacin relacionada.
5.
CUESTIONES PRELIMINARES
Cuando se disee una Web, con objeto de evitar problemas con los nombres de los archivos,
es muy importante que los que cree (tanto pginas html, imgenes, carpetas,...) cumplan los
siguientes requisitos:
Utilizar una sola palabra como nombre de un archivo.
Que no tenga ms de 8 caracteres.
Que no tenga vocales con tildes, ni maysculas, ni ees ni espacios en blanco. Cabe
recordar que hasta hace poco no se podan emplear dichos caracteres en las URL.
Tenga en cuenta que todos los servidores no tienen el mismo sistema operativo (de hecho
son una minora los que tienen un sistema operativo Windows). Por tanto, es importante, para
evitar problemas con los nombres de archivo cuando queramos subirlos al servidor, que se
tengan en cuenta las reglas descritas anteriormente. De lo contrario, puede ocurrir que
nuestra Web funcione perfectamente en nuestro equipo y en el servidor no.
6.
DISEO DE NUESTRA WEB

Es necesario que antes de que nos lancemos a hacer pginas dediquemos algn tiempo a
planificar y disear nuestra Web, para posteriormente no estar continuamente reordenando
pginas y cambiando archivos de lugar (sera como comenzar a hacer una casa sin unos
planos que nos guas en la construccin).
Pgina 7
Comencemos por preguntarnos qu secciones tendr nuestra Web, nmero de pginas, la

organizacin de las mismas, los mecanismos que permitirn la exploracin del Web, etc.
Las etapas que se desarrollan en esta fase de diseo son las
siguientes:
Fragmentacin de los contenidos en bloques de informacin.
Consiste decidir qu va en cada pgina del Web.
Definicin de las relaciones entre los bloques de informacin
(construccin de una estructura jerrquica). Una vez que se ha
establecido qu debe ir en cada pgina, es necesario
determinar las relaciones que existen entre las pginas en
trminos jerrquicos.
Creacin de un sistema de navegacin.
El sistema de navegacin de una Web es el conjunto de elementos que permiten explorar
las pginas. Los elementos bsicos del sistema son los hipervnculos; las conexiones que
stos crean constituyen autnticas rutas de exploracin, caminos o atajos.
El objetivo de esta etapa no es crear los hipervnculos sino
planear las rutas de exploracin de los contenidos, decidir
cul ser el punto de partida que se desea dar al usuario del
Web y cules los puntos de llegada; dnde situar las
bifurcaciones de los recorridos; qu herramientas de
navegacin se proporcionarn, etc., de forma que las
conexiones entre las pginas deben permitir la exploracin
de la totalidad el Web de forma lgica y transparente.
6.1. CUESTIONES A TENER EN CUENTA
Facilidad de navegacin
Un factor importante es la forma de presentar la informacin. Hay que tener en cuenta
que a medida que la cantidad de pginas de una Web aumenta, es cada vez ms difcil
para las visitas encontrar lo que necesitan. La mejor forma de ofrecer la informacin es
organizarla en reas definidas, permitiendo as que la navegacin sea muy intuitiva. Si las
visitas necesitan emplear mucho tiempo para encontrar la pgina buscada, es casi
seguro que no se va a regresar posteriormente.
Cuidado con el tamao de las pginas
Es realmente frustrante, cuando visitamos una Web, tener que esperar mucho tiempo
para que la pgina sea completamente mostrada en pantalla. Las pginas compuestas de
texto, grficos y elementos multimedia generan una impresin agradable; sin embargo
son ms lentas para mostrarse al visitante.
Pruebe sus pginas antes de publicarlas
Recuerde siempre que los visitantes de una Web no tienen por qu tener el mismo
sistema operativo (Windows 3.X, Windows 98, NT, XP, OS/2, MacOS, UNIX, Linux, etc.),
que pueden utilizar cualquier navegador disponible en el mercado (Internet Explorer,
Mozilla, etc.), con diferentes tipos de resolucin de pantalla (600 x 800, 1024 x 768 etc.)
Pgina 8
Estas diferencias pueden hacer que sus diseos sean idneos para un visitante particular
y que sean psimos para otros; en general, se recomienda probar su Web en la mayor
cantidad de condiciones posibles.
7.
CREACIN DE UNA WEB

Lo primero que tenemos que hacer es abrir el programa tal y como se ha explicado en el
manual.
Una vez que iniciamos el programa, ya tenemos en la ventana del mismo una pgina Web en
blanco sobre la cual podemos trabajar. No obstante, antes de comenzar con la confeccin de
nuestras pginas, vamos a crear un sitio Web en nuestro ordenador para almacenar en l
todas las pginas que hagamos y los archivos que contengan (imgenes, objetos asociados,
etc.).
Para ello, desplegamos el men Archivo, seleccionamos Nuevo y, en la ventana que se

abre, la opcin Un documento vaco.
Podemos crear cuando deseemos una pgina utilizando la opcin Nuevo del men Archivo
tal y como aparece en la figura anterior. No obstante, conviene recordar que cuando se
arranca el programa tenemos en pantalla una pgina Web en blanco sobre la que hay que
comenzar a trabajar. Cuando acabemos nuestro trabajo sobre cualquier pgina creada,
seleccionamos la opcin Guardar del Men Archivo (o pulsar Ctrl + G o el icono disquete de
la barra de herramientas), con lo que podremos ponerle un nombre a dicha pgina y escoger
la carpeta donde queremos guardarla.
Pgina 9
7.1. ESTRUCTURA DE DIRECTORIOS

Si nuestra Web va a contener un pequeo nmero de pginas y pocas imgenes,
podemos almacenar todos los archivos en una nica carpeta que constituir nuestro sitio
Web. No obstante, si nuestra pretensin es que nuestra Web vaya creciendo en un
futuro, debemos crear una estructura de carpetas para poder localizar una pgina en
concreto. Establecer esta estructura (denominado tambin mapeado del sitio Web) es
esencial para la planificacin de una Web con pretensiones de crecimiento.
7.2. MODOS DE EDICIN CON NVU
Como la mayora de las interfaces de aplicaciones estndar, NVU est diseado con una
barra de navegacin estndar en la parte superior, que incluye comandos genricos de
gestin de ficheros, as como herramientas especficas para editar y modificar pginas. Y
como la mayora de las aplicaciones estndar, hay una barra de estado en la parte
inferior que proporciona informacin de utilidad.
Una vez que su Web est abierto en la interfaz del programa, puede editar su Web de
diversos modos.
Modo de edicin normal: en este modo se muestra la pgina como un WYSIWYG (lo
que ves es lo que obtienes), permitiendo una edicin normal, insertando texto,
imgenes, tablas, etc. Se ve la apariencia final de la pgina, pero las zonas y los
objetos estn recuadrados para facilitar su manipulacin. Los objetos dinmicos no se
ven.
Etiquetas HTML: en esta vista, se muestran las etiquetas del lenguaje HTML en
fondo amarillo, viendo la estructura de la pgina de una manera visual.
Pgina 10
Cdigo fuente HTML: en esta vista se puede editar directamente el cdigo HTML de
la pgina en texto plano.
Vista previa: vista previa de la pgina prcticamente igual a como se ver en el

navegador. Desde esta vista tambin puede editarse el texto y el formato de los
objetos.
En cualquiera de estos modos se puede editar el contenido de la pgina. Mediante las

solapas ubicadas en la zona inferior, se puede cambiar fcilmente de un modo a otro
Pgina 11
ACTIVIDAD 1
Completa las definiciones de los siguientes trminos:
HTML
HTTP
FTP
WWW
URL
Resuelve las siguientes preguntas:

1. Por qu es importante saber HTML aparte de NVU?
2. Cul es la principal ventaja de utilizar un editor visual como NVU?
Pgina 12
3. Cules son las vistas que nos proporciona el entorno de trabajo de NVU? Descrbelas
brevemente
4. Cmo es el procedimiento para crear un SITE dentro de NVU?
5. Menciona qu otros editores visuales, para crear pginas web, existen en el mercado
actualmente
6. Menciona las caractersticas que se deben considerar para colocar nombres a las pginas web
Pgina 13
1.
ELEMENTOS BSICOS DE UNA PGINA WEB

Independientemente del programa que se use para la creacin de pginas Web, stas
pueden contener los mismos elementos, por ejemplo:
Texto: esttico o en movimiento.

Imgenes: fijas o animadas.
Sonidos.
Secuencias de vdeo.
1.1. TEXTO
El texto, componente fundamental de las pginas Web, lo generamos teclendolo
(aunque tambin se puede copiar desde cualquier otro programa y pegarlo).
Hay una serie de reglas que debemos tener en cuenta con respecto al texto:
o
o
Su objetivo principal es la legibilidad

En las pginas Web hay que reservar el subrayado exclusivamente para los enlaces.
En general, la cursiva es el formato apropiado para titulares y funciona bien para
enfatizar. Cuando quiera destacar una palabra, emplee negrita o cursiva. El uso
abusivo de demasiados estilos produce un efecto estrambtico. Reserve los tipos de
negrita y letra grande para los titulares, los cuales deben destacar sobre el resto de la
pgina.
Por otra parte, si empleamos una fuente que el navegante de nuestra pgina no tiene
en su equipo no la ver exactamente como la hemos diseado. Cada carcter, en
cualquier fuente, consta de una letra, un nmero o un smbolo junto con una cierta
cantidad de espacio blanco alrededor. Las fuentes proporcionales y de ancho fijo
difieren en la cantidad de espacio que ocupa cada carcter. Las proporcionales se
denominan as porque cada carcter tiene un ancho diferente y, por lo tanto, emplea
una cantidad de espacio proporcional a su tamao. La cantidad de espacio que una
palabra ocupa en una lnea depende de qu letras contiene, no de cuntas letras
contiene.
Para organizar el texto en pantalla es preferible utilizar tablas y prescindir del uso de
tabuladores y sangras. Tampoco debe abusarse de la utilizacin de vietas. La forma
de trabajar con tablas y vietas es muy similar que con cualquier procesador de
textos.
Pgina 14
EJEMPLO: Abra una pgina creada previamente, si no la tiene abierta. Al igual que
cualquier programa, NVU memoriza las ltimas pginas abiertas en el Men Archivo,
opcin Pginas recientes.
Cuando tenga la pgina abierta escriba: Cmo insertar un texto (como cabecera)
Tipo de letra: Helvetiva, Arial.
Tamao: 37 pto. Para esto, en la barra de herramientas utilizamos el botn de
Aumenta el tamao de la letra
Negrita y cursiva.
Justificacin: Centrada (esto se puede hacer en la barra de herramientas).

Ponga como fondo de pgina cualquier color que contraste con el color de letra que
seleccione (por ejemplo: amarillo claro).
Luego escriba Estoy realizando un taller de NVU y esto es lo primero que escribo.
Resulta prcticamente igual que hacerlo con el procesador de textos. De hecho, una
opcin podra ser seleccionar este trozo de texto, copiarlo en el portapapeles y pegarlo en
NVU.
Posteriormente, copie ese trozo que ha escrito y pguelo un poco ms abajo. El segundo
prrafo lo justificamos (por defecto la alineacin de los prrafos en NVU es a la
izquierda).
Cuando lo hayamos hecho, presione en la pestaa Vista previa (nos sirve esta pestaa
para comprobar cmo se vera nuestra pgina en un navegador) previa de la parte
inferior de la ventana y comprobar la alineacin de los dos prrafos (ver figura de abajo)
Pgina 15
1.2. SANGRADO DE PRRAFOS

Para sangrar prrafos puede utilizar la tecla Tab de su teclado (al igual que ocurre con el
procesador de textos), o el botn Sangrar texto
de la barra de herramientas.
Tambin podemos tabular artificialmente un prrafo mediante espacios sin salto. Es,
como su nombre indica, un espacio que no produce. Para ser ms especfico, los
espacios simples que se obtienen con la barra espaciadora no son considerados
esenciales por la mayora de los navegadores; si coloca un puado de espacios en
blanco, uno tras otro, para intentar dar formato a un texto, en algunos navegadores slo
se mostrar un espacio.
2.
INSERTAR IMGENES
Para insertar una imagen en el documento seleccionar la opcin de men Insertar >>
Imagen, o de la barra de herramientas el icono
dilogo, con diversas solapas:
y se mostrar la siguiente caja de
Ubicacin: se indica de dnde tomar la imagen, pulsando en el botn Elegir archivo, se

explora el sistema de archivos para seleccionar la imagen. Tambin se indica el texto
alternativo que se mostrar de la imagen y un texto de ayuda cuando se pase el ratn por
encima.
Dimensiones: se puede cambiar el tamao de la imagen.
Apariencia: se establecen las distancias entre la imagen y el texto, as como la alineacin
del texto alrededor de la imagen.
Enlace: se puede establecer un hipervnculo para la imagen.
Botn Edicin avanzada: para establecer opciones avanzadas como atributos HTML,
eventos de JavaScript, estilos, etc.
Una vez insertada la imagen, se pueden establecer sus propiedades haciendo doble
pulsacin sobre ella, o seleccionando la opcin de men Formato >> Propiedades de la
imagen o a travs del men contextual.
Pgina 16
En este ejercicio vamos a aprender a insertar imgenes de varios tipos. Una imagen fija, un
gif animado y una imagen de fondo.
Las imgenes en las pginas Web las colocamos:
Dentro de la pgina y
Como fondo de la misma.
Primero vamos a ver la insercin de imgenes en la pgina y, posteriormente, la eleccin de
imgenes de fondo.
Las imgenes funcionan ms o menos como en un procesador de textos. En las pginas Web
se suelen utilizar los formatos siguientes:
GIF. Para dibujos e imgenes con pocos colores. Este formato nos permite elegir un color
transparente y hacer animaciones.
JPEG o PNG. Para fotos e imgenes que requieren ms calidad. No obstante, no permite
transparencias ni animaciones.
Para incluir imgenes en una pgina de NVU podemos copiarlas en el portapapeles con otro
programa y luego pegarla en la pgina Web que estamos diseando. Cada uno emplear el
mtodo que vea ms cmodo y que le sea ms usual (recordamos que una misma cosa se
puede hacer de varias formas.
Una vez hecho esto, para insertar una imagen en una pgina, procederemos tal y como se ha
comentado al comienzo de este apartado, se muestra a continuacin una pantalla con dos
opciones trabajadas:
La primera ser insertar una imagen desde una carpeta (por ejemplo: imgenes) que hemos
comentado previamente, para lo cual haremos clic en Elegir archivo
En esta pantalla seleccionaremos la imagen que queramos aadir en nuestra Web.
Pgina 17
La segunda ser indicar una direccin url en donde se encuentre la imagen a insertar. Por
ejemplo, buscamos una imagen de la Catedral de Mlaga en el banco de imgenes del,
cuya utilizacin para usos educativos est permitida, evitndonos de camino problemas con
los derechos de autor.
Una vez seleccionada la imagen (la sealada con una flecha en la imagen anterior), hacemos
clic sobre ella con el botn derecho del ratn, desplegndose el men emergente podemos
observar a continuacin y eligiendo la opcin Copiar la ruta de la imagen.
Una vez copiada la ruta de la imagen, volvemos a la ventana de nuestro editor NVU y en el
apartado Ubicacin de la imagen pegamos la ruta de la imagen que queremos insertar, tal
y como observamos a continuacin.
Pgina 18
Completamos igualmente los campos Ttulo emergente (en este caso Catedral de Mlaga)
y Texto alternativo, quedando la imagen insertada en la pgina que estamos creando tal y
como vemos a continuacin.
AVISO: Realizando la insercin de imgenes de esta manera, tenemos el riesgo de que

cuando la imagen deje de estar ubicada en el servidor correspondiente, no aparezca en
nuestra Web pues la ruta de la misma ha cambiado.
IMGENES COMO FONDO DE PGINA

Ahora colocaremos una imagen de fondo de pgina. Para ello hacemos clic sobre la pgina
en Formato >> Colores y fondo de pgina...
Pgina 19
Luego, en el cuadro de dilogo que se nos muestra pinchamos en Imagen de Fondo;

activamos la casilla Imagen de fondo y pinchamos en el botn Elegir archivo....
Si la imagen es ms pequea que la zona de visualizacin de una pgina (como en esta

imagen elegida para el fondo), la repite en forma de mosaico ocupando toda la pantalla.
Por eso las imgenes de fondo siempre hay que seleccionarlas bien para que no dificulten la
lectura del texto.
3. VER NUESTRO TRABAJO

Una vez que hemos creado nuestra pgina, podemos visualizarla desde el programa
navegador (recomendamos Mozilla Firefox). Para esto arrancamos el navegador por
defecto que tengamos en nuestro ordenador desde NVU de varias formas:
1. Seleccionando la opcin Visualizar pgina en el navegador desde el men Archivo
2. Pinchando el botn
situado en la Barra de herramientas.
Tambin se puede abrir desde el navegador seleccionando el archivo de nuestra pgina Web.
Recuerda que el navegado por defecto para NVU es Mozilla FireFox
Hay que tener en cuenta que cada vez que realice modificaciones en su pgina, podr ver
reflejados los cambios en el programa navegador, por lo que se guardar la pgina antes de
Pgina 20
verla. En la metodologa de trabajo para la edicin de pginas Web es importante trabajar

siempre con las dos aplicaciones abiertas: el programa que permite crear las pginas (en
nuestro caso, NVU) y la aplicacin que permite visualizarlas (el navegador).
Pgina 21
1.
TABLAS
Son estructuras que permiten organizar la informacin en la pantalla. Son muy tiles para
combinar texto, imgenes y espacio en blanco en formas que no se pueden llevar a cabo de
otro modo. Por ejemplo, se puede utilizar las tablas para crear columnas de texto, para
integrar texto e imgenes, para crear mrgenes amplios o cuadros laterales,...
Las tablas dentro de las pginas web sirven para 2 propsitos:
1. Presentacin de datos de forma tabulada
2. Definicin y configuracin del layout (disposicin o plan) de una pgina web
2.
INSERTANDO O CREANDO UNA TABLA
Para insertar una tabla de manera rpida, seleccionaremos la opcin de men Insertar >>
Tabla. Se mostrar una caja de dilogo con varias solapas para establecer las caractersticas
de la tabla.
Tambin podemos hacer clic en el icono Tabla
dilogo
mostrndose el mismo cuadro de
Rpido: para establecer el nmero de filas y columnas de forma visual con el ratn.
Preciso: aqu se puede indicar, en los campos adecuados, el nmero de filas y de
columnas, as como establecer el ancho total de la tabla en tantos por cien o en pixels.
Tambin se puede indicar el grosor del borde.
Celda: se establecen las caractersticas de la celda, como la alineacin vertical y
horizontal, el espaciado entre celdas.
Botn Edicin avanzada: para establecer opciones avanzadas como atributos HTML,
eventos de Javascript, estilos, etc.
Pgina 22
Una vez creada la tabla, pueden editarse sus propiedades desde la opcin de men Tabla >>
Propiedades de la tabla. Tambin con el men contextual, estando situado el cursor dentro
de la tabla se pueden establecer las propiedades a nivel de celda, haciendo clic en
Propiedades de celda de tabla.
Otra forma de establecer el ancho y alto de la tabla es pulsando y arrastrando sobre los
recuadros de control de la tabla, ubicados en las esquinas y los puntos medios.
2.1. INSERTAR O ELIMINAR FILAS Y COLUMNAS
Si se desea aadir filas o columnas (o incluso celdas), puede hacerse desde la opcin de
men Tabla >>Insertar, seleccionando la opcin deseada.
Fila superior: inserta una fila encima de la fila en que est el cursor.
Fila inferior: inserta una fila debajo de la fila en que est el cursor.
Columna anterior: inserta una columna a la izquierda de la columna en que est el
cursor.
Columna posterior: inserta una columna a la derecha de la columna en que est el
cursor.
Celda anterior: inserta una celda a la izquierda de la celda en que est el cursor.
Celda posterior: inserta una celda a la derecha de la celda en que est el cursor.
Si se desea eliminar filas o columnas (o incluso celdas), puede hacerse desde la opcin
de men Tabla >> Borrar, seleccionando la opcin deseada.
Tabla: elimina la tabla entera.
Fila: elimina la fila en que est el cursor
Columna: elimina la columna en que est el cursor.
Celda: elimina la celda en que est el cursor.
Contenido de la celda: elimina el contenido de la celda, pero no la celda en s.
Si se desea seleccionar filas, columnas, celdas o la tabla entera, puede hacerse desde la
opcin de men Tabla >> Seleccionar, seleccionando la opcin deseada.
Pgina 23
Tambin desde el men contextual (pulsacin con el botn secundario del ratn), estando
situado el cursor dentro de la tabla pueden realizarse todas estas acciones.
2.2. UNIR DOS CELDAS

Para unir dos celdas de una tabla, seleccionar las dos celdas a unir y luego seleccionar la
opcin de men Tabla >> Unir celdas. Tambin puede hacerse desde el men
contextual.
Pgina 24
AVERIGUA:
Cmo usar en conjunto las etiquetas thead y tfoot junto con tbody? Cules son sus
caractersticas?
Pgina 25
ACTIVIDAD 2
ETIQUETA
HEAD
BODY
ATRIBUTO
TBODY
LAYOUT
CELLPADDING
APPEARANCE
Pgina 26

1. Cul es la estructura bsica de toda pgina web?
2. Qu es una entidad HTML?
3. Para qu sirve la etiqueta tbody ? Descrbela brevemente las etiquetas que la conforman
4. Para qu se emplean las etiquetas DIV y STYLE?
5. Por qu no es conveniente realizar redimensionamiento de imgenes en el navegador de

internet? Sustenta respuesta
6. A qu se denomina fusin de tablas, para que la utilizaras?
7. Qu es el texto alternativo de imgenes?
Pgina 27
HIPERVNCULOS LINKS - VNCULOS

1. LOS ENLACES
Son estructuras que permiten organizar la informacin en la pantalla. Son muy tiles
para combinar texto, imgenes y espacio en blanco en formas que no se pueden
llevar a cabo de otro modo. Se trata de un enlace a: otras pginas de Internet (por
ejemplo,
la
pgina
principal
del
Claretiano
de
Trujillo:
http://www.claretianotrujillo.edu.pe/),
Los enlaces pueden estar asociados a casi cualquier elemento que aparece en una pgina
Web (imagen, vdeo, texto u otro elemento). Antes de crear un enlace, debemos seleccionar el
elemento al que va a estar asociado, y la forma de hacerlo vara segn el elemento de que se
trate:
Si se trata de seleccionar un texto podemos seleccionar: una palabra haciendo doble clic
sobre ella, con tres clics se selecciona un prrafo, varias palabras se seleccionan sealando
la primera y arrastrando el ratn hasta la ltima.
Si se trata de una imagen o un vdeo, bastar con hacer clic sobre el elemento deseado
para seleccionarlo.
Una vez seleccionado el elemento, podemos asociarle un enlace de varias formas:
1. Haciendo clic sobre el icono
que est en la barra de herramientas o
2. Seleccionando la opcin Enlace en el men Insertar o

3. Haciendo clic con el botn derecho del ratn en Crear enlace y aadir la direccin url.
Cualquiera de estas acciones producir un cuadro de dilogo (ver pgina siguiente) para definir
el enlace.
Pgina 28
En el campo correspondiente escribiremos la direccin completa de la pgina Web con la que

est relacionado el enlace (o podemos copiarla de otro lugar y pegarla aqu). En el grfico
vemos que el enlace de la imagen va a ser la pgina del proyecto Linex.org.
Podemos igualmente realizar otras acciones:
Elegir archivo: elegiremos un archivo al que enlazar nuestra imagen o
A una direccin correo electrnico: establece un enlace para enviar correo electrnico.
Notas:
>> Para establecer un enlace entre dos pginas, es conveniente que hayan sido creadas con
anterioridad.
>> Los enlaces los podemos ir viendo en la vista previa. Si queremos verlos en la vista normal,
tenemos que mantener pulsada la tecla control y pulsar sobre el enlace.
>> Hay veces que la vista previa no funciona correctamente; entonces conviene recurrir
directamente al navegador pulsando sobre el icono
EJEMPLO PRCTICO:
Proponemos el siguiente ejemplo:
Establecer un enlace con la Web de EducaVirtual (www.educavirtual.es) desde una de las
imgenes
Establecer un enlace con nuestro correo electrnico en la otra imagen. Para esto ltimo,
cuando hagamos clic en el sobre y vayamos a establecer un enlace en la imagen,
seleccionamos Direccin de correo electrnico. Escribimos la direccin de correo e, incluso,
lo que queremos que aparezca como Asunto del correo.
Cuando se haga clic sobre el enlace establecido en la imagen, el usuario comprobar cmo se
abre su programa cliente de correo, con un mensaje de correo nuevo en el que tendr rellenos
los campos Para (destinatario) y Asunto.
Pgina 29
Despus de las direcciones Web, el tipo de direccin ms comn que usar con un enlace ser
su direccin de correo electrnico, ya que desear recibir opiniones de aquellos que visitan sus
pginas, as como de los problemas que la gente encuentra en su sitio Web.
2. ENLACES INTERNOS O MARCADORES (ENLACES DENTRO DE UN DOCUMENTO)
Los enlaces dentro del mismo documento permiten a los visitantes de una pgina hacer clic y
saltar rpidamente a una parte de la misma. Por ejemplo, se puede crear un ndice al
principio de la pgina y los usuarios pueden hacer clic en un elemento del ndice para ver la
seccin de la misma a la que apunta dicho elemento.
Estos enlaces dentro de la misma pgina se emplean cuando no es demasiado grande. Si es
as, lo usual es distribuir su contenido en varias pginas y establecer enlaces entre ellas (una
pgina gigantesca es ms lenta de cargar que varias pequeas, sobre todo cuando nos
interesa nicamente una parte de su contenido).
EJEMPLO PRCTICO:
En la pgina nueva que vamos a crear haremos dos secciones. El diseo, lo dejamos a
gusto de cada cual:
Formacin acadmica.
Aficiones.
Ahora vamos a poner tres marcadores:
Arriba (en la parte superior de la pgina).
Formacin (justo delante de la seccin Formacin Acadmica).
Aficiones (justo delante del epgrafe Aficiones).
Un marcador es una seal que se crea en la pgina Web
para proporcionar a un enlace un punto de llegada exacto. Es
opcional cuando se crea para enlaces que enlazan dos
pginas distintas y obligatorias cuando se crean enlaces a la
misma pgina (como Ir arriba, para ir desde el final, al
principio de la misma pgina).
Vamos a subir el cursor al principio de la pgina (a la primera
lnea). Una vez tenemos el cursor en el sitio en el que se
quiere crear un marcador, seleccionamos la opcin Enlace
interno el men Insertar.
Pgina 30
Una vez hecho esto, se nos muestra un cuadro de dilogo en

el que debemos escribir un Nombre del enlace interno: y
luego agregarlo a la lista de enlaces internos. En nuestro caso
vamos a escribir como nombre de marcador Arriba.
Pinchamos en el botn Aceptar para validar este marcador
que hemos creado.
Bajamos ahora el cursor hasta situarlo justo delante de la seccin Formacin Acadmica y ah
insertamos un marcador al que llamaremos Formacin. Haremos lo mismo delante de
Aficiones (llamaremos al marcador Aficiones).
Como sabemos, un marcador acta de modo similar a un enlace, por lo que la forma de
trabajar con l es la siguiente:
Para crear un vnculo que apunte a un marcador, deberemos hacer lo mismo que si fusemos
a asociar un enlace. Para ello vamos a seleccionar (en la pgina que estamos elaborando)
las palabras
Formacin acadmica (en la lnea herramientas (o bien activar la opcin cuadro de dialogo.
de currculo) y pulsamos el botn
nos aparece el siguiente cuadro:
de la barra de Enlace del men Insertar). Con esto
Hacemos clic en el desplegable que se nos muestra y aparecern todos los marcadores que
previamente hayamos creado en la pgina. Una vez elegido (en este caso el Marcador
Formacin) pinchamos en el botn Aceptar.
Esto mismo lo hacemos con el marcador Aficiones: seleccionamos el texto Aficiones y
establecemos un enlace al marcador Aficiones.
Al final de la pgina pondremos el texto Ir arriba; lo seleccionaremos y establecemos un
enlace con el marcador Arriba.
Pgina 31
3.
BORRAR Y EDITAR ENLACES

Si necesitamos editar o borrar los enlaces haremos clic sobre l con
el botn derecho del ratn, con lo que aparecer un men flotante,
en el que elegiremos la opcin Propiedades de Enlace...
Para editar o borrar los enlaces tambin podemos hacer doble clic
con el botn izquierdo del ratn sobre el enlace a editar.
FRAMES
Los frames (marcos o cuadros) permiten dividir la ventana en varias ms pequeas, de modo que
en cada una de ellas se carga una pgina html distinta. Las versiones ms antiguas de los
navegadores no tienen implementada esta caracterstica, por lo que no podrn verlos.
Para crear una pgina con frames, tendremos que hacerlo desde el modo cdigo, tecleando
sentencias HTML, ya que Nvu / KompoZer an no est preparado para trabajar con frames. Para
saber cmo se crean frames. Cuando se utilizan frames es muy habitual usar el atributo target en
la etiqueta que define un vnculo (<A>), con este atributo especificaremos en que frame debe
cargarse el destino del vnculo, es decir, la pgina vinculada.
Pgina 32
VIDEO1
La web no solo contiene informacin en forma de texto e imgenes a manera de una gran
biblioteca; es tambin un gran repositorio de material multimedia, siendo lo ms resaltante la
posibilidad de incrustar audio y video en nuestras pginas. Nuevamente NVU no tiene una manera
visual de incrustar audio y video, para ello debemos recurrir al cdigo HTML y especficamente a
la etiqueta OBJECT
ETIQUETA <OBJECT></OBJECT>
Se emplea para utilizar aplicaciones externas desde nuestro navegador y poder ser mostradas en
nuestras pginas web. Uno de los usos ms frecuentes es incrustar o insertar audio o video.
Veamos una porcin de cdigo trabajada:
<object data=.></object>
Cdigo YouTube FORMA MANUAL
<iframe
width="420"
height="315"
frameborder="0" allowfullscreen></iframe>
src="https://www.youtube.com/embed/2UmpodRKi-c"
<object data="https://www.youtube.com/embed/2UmpodRKi-c" frameborder="0" allowfullscreen=""

height="315"></object>
NOTA: los tags marcados de amarillo deben eliminarse cuando se anexa al cdigo OBJECT
y el verde debe ser desplazado al final de la etiqueta
http://www.tuinstitutoonline.es/cursos/kompozer/09multimedia.php
Pgina 33
Como puedes apreciar es muy sencillo, en el atributo DATA indicamos la direccin del archivo de
video que queremos reproducir. Tambin podemos definir el ancho y alto que ocupar nuestro
video con los atributos WIDTH y HEIGHT
Otro ejemplo:
<object
data="https://www.youtube.com/embed/-2VPKWwl5Rw"
allowfullscreen="" height="315" width="560"></object>
frameborder="0"
Cdigo YouTube HACIENDO USO DE LA OPCIN HTML

1. Copiamos el cdigo de Youtube (Insertar Vnculo)
2. Hacemos clic en INSERTAR, opcin HTML y aparecer la siguiente ventana:
3. Pegamos el cdigo y por ltimo clic en Insertar
Pgina 34
4. Grabamos y
5. Nos vamos a nuestro navegador y Visualizaremos la siguiente ventana:
NOTA: si deseamos eliminar algn objeto de nuestro editor NVU lo que hacemos es: Clic
derecho, opcin deshacer (UNDO)
AUDIO
Para ello haremos uso de la etiqueta <AUDIO SRC=...></AUDIO>
Por ejemplo:
<audio src="C:\Users\Usuario\Downloads\juliomoreno.mp3" controls="" autoplay=""></audio>

Y obtendremos como resultado lo siguiente:
Nota: la instruccin &autoplay="1" permite no ejecutar automticamente el audio insertado
Pgina 35
FORMULARIOS
Un formulario es un elemento que permite recoger datos
introducidos por el usuario.
Los formularios se utilizan para conocer las opiniones, dudas, y
otra serie de datos sobre los usuarios, para introducir pedidos a
travs de la red, tienen multitud de aplicaciones.
Un formulario est formado, entre otras cosas, por etiquetas,
campos de texto, mens desplegables y botones.
Creando un Formulario
Para generar un formulario debemos hace clic en INSERTAR opcin Formulario o de lo contario
hacemos clic en el icono
siguiente ventana:
>>
>>
>>
>>
de la barra de herramientas y aparecer la
Definimos el nombre del formulario

Indicamos la direccin del servidor donde sern procesados los datos
Definimos el mtodo el cual ser post o get. Por defecto debe ser post
Una vez llenado los datos hacemos clic en OK y obtendremos la siguiente
ventana de trabajo:
Dentro del recuadro celeste se genera

el formulario, NO FUERA DE L
Pgina 36
Por ejemplo: elaboremos el formulario que se ubica en la parte lateral derecha

1. Ingresamos a la opcin de formulario y lo generamos
2. En algunos casos es bueno crear una tabla pero no
es obligatorio
3. Dentro del recuadro celeste, comenzamos a
completar la informacin:
a. Colocamos un color al formulario (pgina)
b. Escribimos la palabra FORMULARIO y le damos
un tamao y color
c. Escribimos el trmino USUARIO
d. Escribimos login y password y lo complementamos
haciendo uso de la opcin FORM FIELD Text y
Password y nos debera quedar ms o menos as:
e. Ahora trazamos una tabla de 1 x 1 para incluir dentro de ella los Datos Personales. Nombres
y Apellidos son tambin del tipo Text
f. Pasamos a la parte de fecha. Para el da, mes y ao vamos a emplear la opcin Selection
list
Nos debera ir quedando de la siguiente manera:
Pgina 37
g. Avanzamos con Datos del Estudiante el cual tambin maneja un Selection List
h. En la parte de Intereses vamos a emplear nuevamente FORM FIELD Radio Button
i. Para complementar al formulario agregaremos 2 botones: enviar y eliminar (submit y reset)

los cuales estn tambin dentro de FORM FIELD
4. Por ltimo guardamos la informacin y la visualizamos en nuestro navegador
Otros elementos que podemos manejar
Check
Box aparece un pequeo recuadro en
vez de un crculo. La diferencia est en que con sta
opcin puedo seleccionar ms de una alternativa
File
muestra una ventana
para
bsqueda
Button
muestra un botn dentro de nuestro
formulario, es diferente a submit o reset
Pgina 38
Form image nos permite insertar una imagen dentro de

nuestro formulario
Text Area permite colocar un recuadro donde nosotros
podemos escribir informacin solicitada
Define Button define un pequeo botn (submit, reset,
button)
Define Label coloca el texto que seleccionas como una
etiqueta
Define Field Set Properties enmarca el manejo de
propiedades del formulario
Index Search bsqueda indexada
Pgina 39
ACTIVIDAD 3
FRAME
TEXT AREA
LINK
FIELD TYPE
FORMULARIO
SUBMIT
SELECTION LIST
INDEX SEARCH
Pgina 40

1. Para qu sirve la etiqueta Object Data?
2. Para qu sirve la etiqueta A y cul es la funcin de su atributo TARGET?
3. Cules son los diferentes tipos del FIELD TYPE vistos previamente?
4. En un FORM, para qu sirve la propiedad ACTION URL?
5. Para qu sirve la etiqueta Audio Src?
6. Qu diferencia o diferencias hay entre las etiquetas Object y HTML en NVU?
Pgina 41
ACTIVIDAD 4
Desarrolla ste ltimo trabajo el cual lo debers presentar en clase a travs de un
dispositivo (USB). Te recuerdo que la pgina principal, es decir el frame, se debe
denominar index.html. Los ttulos de las pginas deben estar en todas ellas. MUCHA
SUERTE
CREANDO NUESTRA BITCORA PERSONAL
Utilizando el concepto de frames y los ejercicios realizados a lo largo del curso, crea una pgina
como la indicada en la imagen (los contenidos pueden variar).
La pgina deber contener 2 frames en modo de columnas. El de la izquierda conteniendo una

lista de enlaces y el de la derecha mostrando el contenido de los enlaces. Los enlaces que debe
contener son los siguientes:
Mi pgina de inicio (toma como referencia el contenido previo imagen)
Mi galera: Mostrars una galera de imgenes (9 3 x fila), 1 elemento de Scribd, 1 elemento
de Slideshare, 1 elemento de Calameo y 1 elemento de Prezi (maneja una tabla para fijar la
informacin, salvo mejor parecer). Recuerda que debes utilizar los cdigos embed
Mis videos: deber mostrar una galera de por lo menos 4 videos y 2 audios (maneja una tabla
para fijar la informacin, salvo mejor parecer). Recuerda que los videos deben tener una
misma proporcin
Regstrate: Mostrar un formulario (hay una sugerencia pero lo puedes modificar y ampliar
inclusive).
Cuando haces clic en Galera visualizaremos la siguiente imagen (sugerencia)
Pgina 42
Haciendo clic en Videos se mostrar la pgina correspondiente
Y finalmente el formulario:
Ten en cuenta que cada pgina debe tener su propio ttulo, tipos de letra, color, fondos, etc., de
acuerdo a tu creatividad y gustos particulares. Asimismo te hago ver que todas las pginas al
hacer clic automticamente se visualizan en la divisin de la derecha. NO ABRE OTRA PGINA
EN EL NAVEGADOR Ten Cuidado !!!!!!!!!
Pgina 43

ManualNVU 2015

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ManualNVU 2015

Uploaded by

Copyright:

Available Formats

Manual NVU 2 Secundaria

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Los pasos a seguir para la instalacin son muy sencillos e intuitivos.

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

de Windows 8 y buscar dentro de los App.

En la ventana de trabajo de NVU nos encontramos los siguientes elementos:

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Ventana administracin sitios Web y Archivos:

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Permite apreciar los sites actuales con los que estamos

Ventana de rea de Edicin o Espacio de Trabajo: En esta rea es donde diseramos y

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Etiquetas HTML o Tags: muestra de forma esquemtica las etiquetas utilizadas

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

ALGUNOS CONCEPTOS BSICOS

DISEO DE NUESTRA WEB

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Comencemos por preguntarnos qu secciones tendr nuestra Web, nmero de pginas, la

Manual NVU 2 Secundaria

CREACIN DE UNA WEB

Para ello, desplegamos el men Archivo, seleccionamos Nuevo y, en la ventana que se

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

7.1. ESTRUCTURA DE DIRECTORIOS

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Vista previa: vista previa de la pgina prcticamente igual a como se ver en el

En cualquiera de estos modos se puede editar el contenido de la pgina. Mediante las

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Resuelve las siguientes preguntas:

2. Cul es la principal ventaja de utilizar un editor visual como NVU?

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

4. Cmo es el procedimiento para crear un SITE dentro de NVU?

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

ELEMENTOS BSICOS DE UNA PGINA WEB

Texto: esttico o en movimiento.

Su objetivo principal es la legibilidad

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Justificacin: Centrada (esto se puede hacer en la barra de herramientas).

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

1.2. SANGRADO DE PRRAFOS

y se mostrar la siguiente caja de

Ubicacin: se indica de dnde tomar la imagen, pulsando en el botn Elegir archivo, se

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

En esta pantalla seleccionaremos la imagen que queramos aadir en nuestra Web.

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

Prof. Julio Moreno Garca

Manual NVU 2 Secundaria

AVISO: Realizando la insercin de imgenes de esta manera, tenemos el riesgo de que