12
Diseño de Páginas Web con NVU + ¿Qué es NVU? + Entorno de NVU + Creación del sitio + Propiedades de página + Textos + Imágenes + Links + Tablas + Otros + Publicación

Man web 004_diseño_de_páginas_web_con_nvu

Embed Size (px)

Citation preview

Page 1: Man web 004_diseño_de_páginas_web_con_nvu

Diseño de Páginas Web con NVU

+ ¿Qué es NVU? + Entorno de NVU + Creación del sitio + Propiedades de página + Textos + Imágenes + Links + Tablas + Otros + Publicación

Page 2: Man web 004_diseño_de_páginas_web_con_nvu

¿Qué es NVU?

NVU: es un editor de páginas web libre y gratuito. Es una aplicación ideal para los usuarios menos experimentados debido a su facilidad de uso, ya que no requiere saber HTML.

Características:

Multiplataforma: Windows, Mac, etc.

Gestor de archivos FTP integrado.

Soporte para formularios, tablas, plantillas de diseño, etc.

Permite introducir HTM manualmente.

Page 3: Man web 004_diseño_de_páginas_web_con_nvu

Entorno de NVU

1.- Barra de título: Aparece el nombre de la página, así como la carpeta donde se almacena.

2.- Barra de menús: Aquí se encuentran agrupadas todas las funcionalidades que ofrece NVU.

3.- Barra de redacción: Aquí aparecen los botones de uso más habitual.

4.- Barra de formato: permite aplicar las opciones más básicas de formato de texto y párrafos.

5.-Ventana administración sitios web: Permite configurar nuestra web, publicarla y editarla.

6.- Área donde editaremos nuestra Web.

7.- Barra de modo de edición: Podemos escoger: «Normal», «Etiquetas HTML, «Código Fuente» y «Vista Preliminar».

8.- Proporciona información sobre la etiqueta en la que nos encontramos.

Page 4: Man web 004_diseño_de_páginas_web_con_nvu

Creación del sitio Local: un sitio local es un conjunto de páginas web que no han sido publicadas. (Están solo en

nuestro ordenador).

Remoto: un sitio remoto es un conjunto de páginas que ya se encuentran en internet. Una vez configurado el sitio de publicación podremos publicar nuestras páginas en Internet fácilmente, y modificar las que ya fueron publicadas, sin necesidad de tenerlas almacenadas en nuestro ordenador.

Para configurar un sitio remoto, dentro de la ventana de «Administrador de sitios NVI» seleccionamos «Editar sitios».

En esta ventana introduciremos el nombre del sitio, la dirección del sitio y los datos de nuestra cuenta FTP, usuario y contraseña.

Page 5: Man web 004_diseño_de_páginas_web_con_nvu

Propiedades de página

Para poder configurar la página vamos a la barra de menús: Formato > Título y propiedades de página.

Ene esta ventana podemos configurar opciones como el título, autor,

especificar si se trata de una plantilla a usar en futuras páginas, etc.

Podemos configurar también el fondo y los colores que se

utilizarán en la página, para ello vamos a Formato > Colores

y fondo de la página.

Page 6: Man web 004_diseño_de_páginas_web_con_nvu

Textos

NVU permite que la inserción de textos sea similar a la de un editor de textos, evitando que tengamos que dar un tratamiento especial a caracteres especiales (como la «ñ»), cosa con la que deberemos tener cuidado desde HTML.

También podemos insertar otros caracteres especiales o símbolos no disponibles a través del

teclado, desde el menú Insertar y escogiendo la opción Caracteres y Símbolos.

Podemos aplicar formato al texto desde la barra de formato o bien desde el menú Formato (aquí tendremos todas las opciones disponibles).

Page 7: Man web 004_diseño_de_páginas_web_con_nvu

Imágenes

Para insertar una imagen, primero debemos situar el cursos donde queramos que se inserte la imagen, después vamos a menú Insertar > Imagen.

El cuadro que aparece, podremos seleccionar la ubicación del archivo, el tamaño de la imagen, el espaciado, etc. Además podremos hacer que la imagen sea un enlace a otra página web.

Page 8: Man web 004_diseño_de_páginas_web_con_nvu

Links

Links: son enlaces a otras páginas que nos permiten navegar por la web. Para insertar un vínculo lo ideal es seleccionar primero el texto o imagen que actuara como enlace y posteriormente ir a menú Insertar > Enlace.

En la ventana que nos aparece debemos seleccionar la

página que queremos enlazar en caso de que se trate

de una pagina perteneciente a nuestro sitio web.

Otra posibilidad es realizar enlaces a una ubicación o posición determinada de la misma pagina que contiene el enlace. Para ello debemos definir un punto de anclaje (menú Insertar > Enlace Interno) que indicará la posición a la que nos llevará el enlace. Después introduciremos el enlace de la misma forma que hemos explicado antes, pero en vez de escoger un archivo distinto, escogemos el nombre que pusimos al punto de anclaje.

Page 9: Man web 004_diseño_de_páginas_web_con_nvu

Tablas

Las tablas son muy utilizadas en las páginas web para maquetar textos y presentar datos de forma tabulada. En una celda se puede introducir imágenes, textos e incluso otras tablas.

Para insertar una tabla vamos al menú Insertar > Tabla. Nos aparecerá un cuadro con 3 pestañas:

Rápido: Permite definir una tabla de manera rápida.

Preciso: Permite definir una tabla con más opciones que la anterior (anchura, borde, etc).

Celda: Permite establecer la alineación de cada celda, el especiado entre celdas, etc.

Una vez insertada podremos combinar y dividir celdas (seleccionar celdas, y después hacer clic en Tabla > Unir celdas seleccionadas), así como aplicarle el formato que más nos convenga, para esto, seleccionamos la tabla a modificar, y vamos al menú Tabla > Propiedades de la tabla, donde podremos cambiar el color de fondo, el espaciado, la alineación, etc.

Page 10: Man web 004_diseño_de_páginas_web_con_nvu

Otros

Los formularios son métodos por los cuales los visitantes de una web pueden enviar datos a su autos vía email. Para insertar un formulario vamos al menú Insertar > Formulario y seleccionamos la opción que más se ajuste a

nuestras necesidades.

Los frames permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página distinta. Para crear una página con frames, tendremos que hacerlo desde el modo código, tecleando sentencias HTML, ya que el programa no trabaja con frames.

Las capas son bloques con contenido HTML que pueden posicionarse de manera dinámica. Para crear una capa primero seleccionamos el objeto que queremos incluir en esta y pulsamos el botón:

Page 11: Man web 004_diseño_de_páginas_web_con_nvu

Publicación

Una vez configurado el sitio de publicación, podremos publicar páginas en Internet y editar las ya publicadas. Para ello es, recomendable que previamente se visualice la ventana del Administrador de sitios (Menu Ver – Mostrar Ocultar – Administrador de sitios).

Publicar es similar a guardar las páginas en el disco duro, solo que se guardaran en un servidor, el que configuramos en el administrador de sitios. Seleccionando el menú Archivo > Publicar colocaremos las pagina en Internet.

Desde el Administrador de sitios también podremos modificar las páginas ya publicadas en Internet, basta con seleccionar el archivo que queremos modificar. Una vez modificada, volveremos a publicarla para que aparezca con los cambios realizados.

Page 12: Man web 004_diseño_de_páginas_web_con_nvu