5.- Crear páginas web con Nvu

Transcripción

1 5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas de botones permite incluir listas, tablas, imágenes, enlaces a otras páginas, colores, y estilos de fuente. Mientras se crea el documento se puede ver como se visualizará en la web, se puede compartir el documento con otros usuarios, etc. a.- Creación de una página web Para crear una página web pulsar sobre el icono New en la barra de herramientas de composición. Para abrir una página ya existente ir a: Archivo Abrir archivo. Para abrir una página de la web ir a: Archivo Abrir dirección e introducir la URL correspondiente: Para abrir una página abierta recientemente ir a: Archivo Páginas recientes. b.-guardar y navegar una página web Un documento Nvu puede guardarse en formato HTML o formato sólo texto. Si se guarda como HTML (Archivo Guardar como...) se preserva el formato del documento, como estilos del texto, imágenes, etc. Si se guarda el documento como sólo texto (Archivo Guardar y cambiar codificación de caracteres) se eliminan todas las etiquetas HTML pero se preserva el texto del documento. Activar la opción exportar a texto. Figura 10. Nvu: guardar y cambiar codificación Juan Antonio Bravo Beato página 8 de 28 totales jabbeato@gmail.com

2 Formatear párrafos, cabeceras y listas Para formatear un párrafo: c.- Formatear páginas web Creación páginas web Nvu 1. Pulsar en el punto de inserción donde se quiere que comience el formato o seleccionar el texto a formatear. 2. Ir a:menú Formato Párrafo: Texto del cuerpo: aplica el estilo predeterminado del texto regular, sin afectar al espacio anterior y posterior al texto. Párrafo:Inserta una etiqueta de párrafo. El párrafo incluye margen superior e inferior. Cabecera1- Cabecera6: formatea el párrafo como una cabecera. Cabecera1 es el nivel más alto de cabecera y Cabecera6 es el nivel más bajo. Dirección: se puede utilizar firma en la página web, que indica el autor de la página y la persona de contacto para más información. Preformato: se suele utilizar para elementos del tipo código, columnas de datos y mensajes de correo que se quieren visualizar con una fuente de ancho determinado. Para una lista de ítemes: 1. Pulsar en el punto de inserción sin la línea de texto que se quiere formatear. 2. Ir a:menú Formato Lista 3. Escoger el estilo Lista Viñetas: cada ítem tiene una viñeta (punto). Existe un botón asignado a esta funcionalidad en la Barra de herramientas de formato. Números: cada ítem tiene un número. Existe un botón asignado a esta funcionalidad en la Barra de herramientas de formato. Término y Definición: ambos estilos juntos crean una apariencia de estilo glosario. Para definición de tags y palabras. De forma similar se puede asignar y/o cambiar atributos como el color, estilo y fuente del texto, buscar y reemplazar texto, insertar líneas horizontales y establecer sus propiedades, etc. Insertar caracteres especiales Para insertar caracteres especiales como acentos, copyright y caracteres de moneda: 1. Pulsar en el punto de inserción donde se quiere que aparezca el carácter. 2. Ir a:menú Insertar Caracteres y símbolos y aparece la siguiente caja de diálogo: Figura Insertar caracteres Juan Antonio Bravo Beato página 9 de 28 totales jabbeato@gmail.com

3 3. Seleccionar un tipo de caracter especial. Si se seleccionan las opciones acento sobre mayúscula o acento sobre minúscula, habrá que seleccionar en las listas desplegables en la parte inferior de la caja de diálogo, sobre qué letra se quiere que aparezca el acento. Elegir símbolos comunes para insertar caracteres especiales como símbolos de copyright o fracciones. 4. De la lista desplegable seleccionar el caracter a insertar. 5. Pulsar sobre el botón Insertar. Insertar elementos HTML y atributos Si se conoce como se trabaja con código HTML, se pueden insertar marcas adicionales, atributos de estilo y JavaScript en la página. Para trabajar con código HTML utilizar uno de los siguientes métodos: Situarse en el punto en el que se quiere insertar código HTML, o seleccionar el texto que se quiere editar, abrir el menú Insertar y escojer HTML. Aparece un cuadro de diálogo para insertar código HTML, insertar el texto y las marcas correspondientes y pulsar en el botón Insertar. Seleccionar un elemento, como una tabla, imagen, enlace o línea horizontal. Pulsar dos veces sobre el elemento cuya caja de diálogo de propiedades asociadas se quiere abrir. Pulsar sobre Propiedades avanzadas para abrir el editor de propiedades avanzadas. Figura 12. Propiedades de la tabla Abrir el menú Ver y elegir fuente HTML o elegir la solapa correspondiente a Source en la barra de herramientas de solapas de navegación. Juan Antonio Bravo Beato página 10 de 28 totales jabbeato@gmail.com

4 Utilizar el editor de propiedades avanzadas Creación páginas web Nvu Para añadir atributos HTML y JavaScript para objetos como tablas, imágenes o líneas horizontales, se puede utilizar el editor de propiedades avanzadas. Este editor tiene tres solapas y cada una de ellas lista las propiedades actuales del objeto seleccionado: Atributos HTML: visualiza o añade atributos HTML. Estilo en línea: pulsar en esta solapa para ver o introducir propiedades CSS a través del atributo estilo. Eventos JavaScript: pulsar en esta solapa para introducir eventos JavaScript. Figura 13. Nvu: editor de propiedades avanzadas Validación de HTML Antes de subir un documento al servidor web (publicar) es una buena práctica chequear los documentos HTML para asegurarse de que cumplen los estandares web. Nvu proporciona una forma de comprobar que el documento HTML es conforme al estandar HTML W3C, chequeando la sintaxis HTML del documento para que cumpla con el estándar HTML Hay que estar conectado a Internet para utilizar esta característica. Para validar la sintaxis de documentos HTML: 1. Ir a: Menú Herramientas Validar HTML. Antes de proceder Nvu comprueba si se han guardado los cambios. Juan Antonio Bravo Beato página 11 de 28 totales jabbeato@gmail.com

5 Figura 14. Validar HTML Creación páginas web Nvu 2. Nvu abrirá otra ventana con los resultados de la validación. d.- Utilizando estilos CSS Los estilos en cascada CSS pueden ser utilizados de tres formas: 1. Utilizando estilos en línea. 2. Utilizando hojas de estilo internas. 3. Utilizando hojas de estilo externas. Nvu tiene un editor de hojas de estilo en cascada, llamada CaScadeS y que puede ser utlizado para generar hojas de estilo internas y externas. Para ello ir a: Herramientas Editor CSS. CaScadeS muestra dos formas de edición: 1. Modo principiante: permite crear reglas asociadas a determinados elementos. 2. Modo experto: permite crear reglas sin ningún tipo de restricción. Crear hojas de estilo con Nvu Utilizando CaScadeS se pueden crear hojas de estilo internas y externas. Para crear una hoja de estilo interna: 1. Pulsar en el botón Style. Opcionalmente rellenar los campos Lista de medios y Título. 2. Pulsar en Crear hoja de estilo. Para crear una hoja de estilo externa: 1. Pulsar en el botón Link. Rellenar los campos correspondientes a URL y se genera un nuevo archivo en el sistema de archivos local. Opcionalmente rellenar los campos Lista de medios y Título. 2. Marcar la opción «Crear hoja de estilo alternativa» para crear una hoja alternativa de otra. Crear reglas para las hojas de estilo Después de crear una o más hojas de estilo para un documento html, pueden crearse reglas para cada hoja de estilo individual. Para utilizar una hoja de estilo particular para crear o modificar reglas pulsar sobre ella en el panel izquierdo. El panel derecho mostrará los detalles de la hoja de estilo en la solapa General. Para crear nuevas reglas: 1. Pulsar en el botón Regla en el panel de la izquierda. Juan Antonio Bravo Beato página 12 de 28 totales jabbeato@gmail.com

6 2. El panel de la derecha muestra opciones como el tipo de regla a crear. Elegir uno de ellos: nombre del estilo, estilo aplicado a todo los elementos del tipo, estilo aplicado a todos los elementos que coinciden con el selector siguiente. 3. Asignar nombre a la regla. 4. Pulsar en el botón Crear regla de estilo. Las reglas pueden ser definidas utilizando las solapas de estilo (texto, fondo, borde, box y aural) en el panel de la derecha. Para ver todas las definiciones de una regla de estilo, realzar la regla en el panel de la izquierda y pulsar en la solapa General del panel derecho. La solapa General muestra todas las definiciones actualmente aplicadas a la regla. e.- Insertar una tabla Para insertar una tabla de manera rápida, seleccionar la opción de menú Insert Table. Se mostrará una caja de diálogo con varias solapas para establecer las características de la tabla. Figura 15. Nvu: insertar tabla Rápido : para establecer el número de filas y columnas de forma visual con el ratón. Preciso : aquí se puede indicar, en los campos adecuados, el número de filas y de columnas, así como establecer el ancho total de la tabla en tantos por cien o en pixels. También se puede indicar el grosor del borde. Celda : se establecen las características de la celda, como la alineación vertical y horizontal, el espaciado entre celdas. Botón Edición avanzada: para establecer opciones avanzadas como atributos HTML, eventos de Javascript, estilos, etc. Una vez creada la tabla, pueden editarse sus propiedades desde la opción de menú Tabla Propiedades de la tabla. También con el menú contextual, estando situado el cursor dentro de la tabla se pueden establecer las propiedades a nivel de celda. Figura 16. Nvu: propiedades de la tabla Juan Antonio Bravo Beato página 13 de 28 totales jabbeato@gmail.com

7 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. Si se desea añadir filas o columnas (o incluso celdas), puede hacerse desde la opción de menú Tabla Insertar, seleccionando la opción 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. Column posterior: inserta una columna a la derecha de la columna en que está el cursor. Cell anterior: inserta una celda a la izquierda de la celda en que está el cursor. Cell 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 opción de menú Tabla Borrar, seleccionando la opción 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 opción de menú Tabla Seleccionar, seleccionando la opción deseada. También desde el menú contextual (pulsación con el botón secundario del ratón), estando situado el cursor dentro de la tabla pueden realizarse todas estas acciones. Unir dos celdas Juan Antonio Bravo Beato página 14 de 28 totales jabbeato@gmail.com

8 Para unir dos celdas de una tabla, seleccionar las dos celdas a unir y luego seleccionar la opción de menú Tabla Unir celdas. También puede hacerse desde el menú contextual. Dividir una celda en dos Para dividir una celda de una tabla en dos, estando situado en la celda, seleccionar la opción de menú Tabla Dividir celda. También puede hacerse desde el menú contextual. Dentro de una celda se pueden introducir diversos contenidos: texto, imágenes o incluso otra tabla. De esta forma pueden anidarse tablas, creando estructuras más complejas. f.- Insertar una imagen Para insertar una imagen en el documento seleccionar la opción de menú Insertar Imagen, se mostrará la siguiente caja de diálogo, con diversas solapas: Figura Nvu: insertar imagen Ubicación: se indica de dónde tomar la imagen, pulsando en el botón Elegir archivo, se explora el sistema de archivos para seleccionar la imagen. También se indica el texto alternativo que se mostrará de la imagen y un texto de ayuda cuando se pase el ratón por encima. Dimensiones: se puede cambiar el tamaño de la imagen. Apariencia: se establecen las distancias entre la imagen y el texto, así como la alineación del texto alrededor de la imagen. Enlace : se puede establecer un hipervínculo para la imagen. Juan Antonio Bravo Beato página 15 de 28 totales jabbeato@gmail.com

9 Botón Edición 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 pulsación sobre ella, seleccionando la opción de menú Formato Propiedades de la imágen o a través del menú contextual. Juan Antonio Bravo Beato página 16 de 28 totales jabbeato@gmail.com