De s arrollo de Pa gina s Web: K o mpo Zer

Tamaño: px
Comenzar la demostración a partir de la página:

Download "De s arrollo de Pa gina s Web: K o mpo Zer"

Transcripción

1 De s arrollo de Pa gina s Web: K o mpo Zer

2 Índice de contenido INTRODUCCIÓN:...5 Qué es KompoZer?...5 Entorno de trabajo...7 Barra de titulo:...7 Barra de menús:...7 Barra de Redacción:...7 Barras de Formato:...7 Ventana administración sitios web:...8 Ventana de área de edición:...8 Barra de modo de edición:...9 Barra de estado:...9 Barras de menus (Ampliada)...10 Creación de un Sitio Web...14 Configuración de la página...16 Crear una Página Web...16 Guardar una Página Web...17 Vista preliminar en el navegador...17 Propiedades de Página...18 TEXTO...21 Introducción de texto...21 Selección de Texto...22 SELECCIÓN...22 El Portapapeles...22 Otras Operaciones útiles...23 BUSCAR Y REEMPLAZAR...23 DESHACER Y REHACER...24 COMPROBACIÓN ORTOGRÁFICA...24 Formato de Texto...26 Estilo de Párrafo...26 Fuente...26 Negrita, cursiva y Subrayado...27 Tamaño...27 Alineación de Párrafos...27 Sangría de Párrafos...27 Otros elementos...29 Listas...29 Líneas...30 ENLACES...33 Direcciones absolutas y relativas...33 Tipos de Enlaces:...33 Aplicación...35 Enlaces Interno...35 Enlaces Externo...35 Enlaces a Correo Electrónico...35 Enlaces a Archivos:...36

3 ...37 Extra: Otras propiedades del Enlace:...38 Referencia HTML...39 Etiqueta <A> y </A>...39 Atributos de <A>...39 Atributos de <BODY>...39 IMÁGENES...40 Formatos:...40 Formato GIF...40 Formato JPG...40 Formatos PNG...41 Observaciones:...41 Insertar imagen...42 Propiedades de la Imagen:...43 Pestaña Ubicación:...43 Pestaña Dimensiones:...44 Pestaña Apariencia:...44 Pestaña Enlace:...45 Otras opciones:...45 Insertar una imagen como fondo...46 Referencia HTML...49 Etiqueta <IMG>...49 Etiqueta <MAP> y </MAP>...49 Atributo background de BODY...49 Etiqueta Object...49 Etiqueta Dynsrc...50 TABLAS...51 Introducción...51 Descripción de las tablas...51 Crear Tablas...51 Definir la tabla...52 Modificar tablas...55 Propiedades de la tabla...55 Propiedades de la celda...58 Otras Modificaciones...61 Insertar elementos...61 Eliminando elementos...62 Combinando celdas...63 Cuestiones de Diseño...65 Resoluciones de pantalla...65 Extra: Referencia HTML:...67 Etiqueta <TABLE>...67 Atributos de <TABLE>...67 MARCOS...69 Introducción:...69 Referencia html...70 Etiquetas <FRAMESET> y <FRAME>...70 Atributos de <FRAMESET>...71 Atributos de <FRAME>...71 FORMULARIOS...72

4 CAPAS...81 Introducción...81 Referencia HTML...82 Etiquetas DIV y SPAN...82 CSS...85 HOJAS DE ESTILO...85 Introducción...85 REFERENCIA HTML...86 Introducción...86 Terminología empleada en CSS...86 Propiedad...86 Valor...86 Declaración...87 Selector...87 Regla de estilo...87 Hoja de estilo...87 Colocación de las reglas de estilo...87 Usar hojas de estilo en cascada...88 Crear reglas de estilo...90 Extra: estilos capas...92 PUBLICACIÓN DE PÁGINAS WEB...93 Configuración de publicación...93 Publicar nuestra web...95 Consejos a tener en cuenta...97

5 INTRODUCCIÓN: Este tutorial tiene como fin brindar una base de conocimiento a aquellos que buscan una alternativa gratuita y libre para el diseño de una web, sin renunciar por ello a la calidad, ni a la facilidad de otras herramientas pensadas para el mismo fin. Qué es KompoZer? KompoZer es un editor de páginas web WYSIWYG (What you see is what you get - Lo que ves es lo que recibes). Es un derivado de NVU, es decir, una versión no oficial de NVU, el cual ha reparado ciertos errores(bugs) que este presentaba. Komposer está basado en Mozilla Composer pero con ejecución independiente. Su objetivo es facilitar el desarrollo de páginas web, gracias a las distintas formas de visualización disponibles en su interfaz como: código fuente, ventana WYSIWYG, visión con tags de HTML realzados) Presenta características como el soporte integrado de CSS y mejor gestión del soporte FTP para actualización de los ficheros, soporte de marcos, formularios, tablas, pantillas de diseño, etc. Cabe destacar que está disponible para diversas plataformas: Windows, Mac OS, y Linux. La versión sobre la cual trabajaremos en este tutorial, es la , traducida al español por el Proyecto Nave. se sentirán cómodos con la interfaz y opciones de KompoZer. Algunas de las herramientas de KompoZer son: Administrador de sitios FTP: cualquier sitio que el usuario haya especificado en sus Opciones de Publicación, podrá ser navegado en una barra lateral. También permite filtrar y mostrar archivos o solo documentos HTML o imágenes. Nuevos selector de colores: algo más ligado a lo que los usuarios acostumbran a utilizar. Se podrá elegir entre el selector de colores verde, azul y rojo para crear la tonalidad deseada, así como también elegir la saturación de la matiz (hue saturation) y el brillo. En caso de que esto nos resulte incómodo, podremos elegir el color deseado con el mouse. Pestañas: una de las herramientas más conocidas de Mozilla esta disponible para KompoZer facilitando el trabajo y brindándole la posibilidad al usuario de realizar acciones de manera más fluida navegando entre pestañas. Se podrá utilizar la herramienta Deshacer y Rehacer independientemente en cada una de las pestañas.

6 Barras de tareas personalizables: se podrán elegir los botones que aparezcan en nuestras barras y los que no según nuestros gustos y/o necesidades. Como podrás ver, ésta aplicación facilita mucho el desarrollo de sitios web con sus herramientas.

7 ENTORNO DE TRABAJO La ventana principal de KompoZer esta formada por varias barras, a continuación una descripción de cada una de ellas. Barra de titulo: A la izquierda de esta barra aparece el título de la página web que estamos editando o el nombre del archivo que le hayamos asignado. A la derecha los botones de control de la venta minimizar, maximizar/restaurar y cerrar. Barra de menús: Formado por los menús Archivo, Editar, Ver, Insertar, Formato, Tabla, Herramientas, Ayuda. A través de estos menús podemos acceder a todas las opciones del programa. Barra de Redacción: Esta barra está formada por botones con las opciones de uso más habitual que se encuentran en la barra de menú. A través de estos botones accedemos más rápidamente. Por ejemplo los botones: N u e v o, A b rir, G u a r d ar, P u b li c ar, B u s c ar, I m a g e n, e t c. C a b e d e s t a c a r q u e p o d r e m o s m o d ifi c a r d i c h a b a r r a, p a r a a d a p t a rl a a n u e s t r a s n e c e si d a d e s. Barras de Formato: Con botones que nos permiten acceder a opciones más básicas de formato de texto y párrafos. Estas son similares a las de cualquier procesador de textos. Bajo esta tenemos otra barra con más opciones de formatos y además de otras relacionadas con el formato aplicando estilos y las capas.

8 Ventana administración sitios web: Esta barra esta situada a la izquierda y en ella podremos configurar los sitios web, para poder acceder de forma rápida a las distintas páginas web. A través de ella también podremos publicar en Internet Webs y editar directamente las paginas ya publicadas sin necesidad de tenerlas guardadas en nuestro disco local. Ventana de área de edición: Esta es el área principal, en la que podremos diseñar y editar la página web. Es el espacio de trabajo. Cada página que se edite se mostrará en esta área, pudiendo cambiar de una a otra mediante las pestañas que se muestran en la parte superior con el titulo de cada página. También podemos mostrar las reglas en esta área, que nos ayudaran a dimensionar diversos objetos.

9 Barra de modo de edición: En esta barra nos encontraremos cuatro pestañas que permiten cambiar el modo de edición: Normal (o modo Wysiwyg) Etiquetas HTML (muestra de forma esquemática las etiquetas utilizadas) Código Fuente (acceso al código HTML de la página) Vista Preliminar (Como se vería la pagina en el navegador) Barra de estado: Proporciona información como la relativa a dentro de qué etiqueta nos encontramos. Además a través de ella podemos seleccionar de forma facil y rápida las etiquetas con sus contenidos para realizar acciones sobre ellos como dar formatos, eliminar, etc.

10 BARRAS DE MENUS (AMPLIADA MPLIADA) V a m o s a v e rl o m a s a f o n d o: Menú Archivo: Constituye la primera opción del menú principal. En ella podemos contemplar opciones como crear, abrir y guardare imprimir archivos. Menú Editar: Las opciones de edición son estándares en casi todas las herramientas; aquí se pueden localizar las opciones para copiar, pegar, deshacer, rehacer, seleccionar, buscar y reemplazar. Y propiedades de publicación del sitio web.

11 Menú Ver: En esta opción se configuran las barras de herramientas, definiendo qué elementos se desean visualizar en el área de trabajo. También constituye otra vía para desplazarse entre los diversos modos de edición (normal, etiquetas, fuente yvista preliminar), otra opción es la de cambiar el Zoom del escenario. (defecto 100%) Menu Insertar Permite incorporar elementos a la escena, tales como tablas, formularios, imágenes, anclas y enlaces externos. Uno de los puntos primordiales y de gran interés es la inserción de caractéres especiales, los cuales son necesarios dentro de cualquier contenido que requiera un código especial para poder ser visualizado. Los objetos inteligentes de los cuales dispone Kompozer y que pueden ser insertados, no se visualizan en el área de trabajo normal, etiqueta o vista preliminar, sólo hasta que se vea en un explorador se puede tener la seguridad de qué objeto funciona correctamente.

12 Menú Formato Permite cambiar la apariencia de los elementos del documento como: tipografía, tamaño, color, estilo, formato del párrafo, inserción de listas, sangría, color del párrafo, letra y fondo. Menú Tabla Las tablas permiten tener mayor orden en la estructura de contenido bien sea gráfico o textual. Aquí podemos insertar, seleccionar y borrar una tabla, además de unir celdas seleccionadas, y definir el color de fondo de la misma. Menú Herramientas Se utiliza para validar el código generado en HTML, asignar y administrar las contraseñas por trabajo, asignar rutinas JavaScript desde una consola especial, así como para verificar la sintaxis generada. La opción de mayor uso es el Editor de hojas de estilos o CSS (Cascade Style Sheet) que tratan de dar la separación definitiva de la lógica (estructura) y el físico (presentación) del documento

13 Menú Ayuda En esta opción está el enlace a la ayuda en línea desde el sitio oficial de kompozer-nvu

14 CREACIÓN DE UN SITIO WEB KompoZer nos permitirá trabajar directamente sobre el sitio web en Internet, aunque además puede trabajar con archivos en el sistema local. Para mantener organizados todos los archivos, es necesario crear un sitio web. Seleccionar: Menú Editar Configuración de Publicación O sino desde el panel izquierdo de Administrador de sitios (F9), seleccionamos el botón Editar Sitios. En ambos casos aparecerá la siguiente ventana: Ad ministra ción de sitio s web A la izquierda, podemos observar los sitios ya definidos, y a la derecha las propiedades del sitio seleccionado. Para crear un nuevo sitio, primero seleccionamos el botón Nuevo sitio; así, los campos de la derecha se pondrán en blanco para que sean rellenados: Nombre del sitio: Nombre del sitio que se va a crear. Es un texto que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo. Es muy útil para identificarlo.

15 Direc ción H TT P de su pá gina inicial: URL de la página de inicio del sitio web. Por ejemplo, si se tiene una página en geocities, será En caso de que se desee trabajar en el sistema local, la dirección será de tipo file:///c:/documents and Settings/usuario/sitioweb/index.html. Servidor de publicación: información para publicar en el servidor Directorio de publicación: dirección FTP (Protocolo de Transferencia de archivos) de publicación. Esta información nos la suministra el servidor donde se aloja la página. En el caso de Geocities será ftp://ftp.es.geocities.com/. En el caso de que se trabajemos en local, se introducirá una URL local del tipo ile:///c:/documents and Settings/usuario/Directorio o se seleccionamos la carpeta pulsando en el botón Seleccionar directorio. Nombre de usuario Contraseña Para eliminar un sitio, lo seleccionamos en la lista y pulsamos el botón Eliminar sitio. Para establecer un sitio predeterminado, lo seleccionamos en la lista y pulsamos el botón Seleccionar como valor predeterminado. El nombre del sitio se pondrá en negrita indicando que es el predeterminado. Una vez definido el sitio web, en el panel de la izquierda se mostrarán todos los archivos y sub-carpetas existentes. Haciendo doble pulsación sobre un archivo, se abrirá en una solapa nueva de la zona de trabajo. Si se hace pulsación doble sobre una carpeta, se mostrará el contenido de la misma.

16 CONFIGURACIÓN DE LA PÁGINA Crear una Página Web Para crear una página web pulsamos sobre el icono Nuevo en la barra de herramientas de composición. O desde el menú Archivo-> Nuevo Aparecera la siguiente ventana, Podremos seleccionar: un documento en blanco, que bien puede ser un XHTML normal, o un Strict DTD, que es un documento XHTML en el que no soporta etiquetas antiguas y el código debe estar escrito correctamente. Un documento basado en una plantilla. Una plantilla vacia. También, podremos decirle que lo cree en una pestaña, o en una ventana nueva. Para abrir una página ya existente ir a: Archivo Abrir archivo. (Ctrl. + O) Para abrir una página abierta recientemente ir a: Archivo Páginas recientes. Es interesante comentar que mediante la opción abrir dirección web, podremos cargar una web directamente en el programa, observando así su disposición y contenido.

17 Guardar una Página Web Podremos guardar un documento de KompoZer en formato HTML o formato sólo texto. En el caso de guardarlo como HTML (Archivo/ Guardar como...) preservará el formato del documento, como estilos del texto, imágenes, etc. Si guardamos el documento como sólo texto (Archivo/ Guardar) y cambiar codificación de caracteres) eliminaremos todas las etiquetas HTML, pero se preservará el texto del documento. Vista preliminar en el navegador. Si queremos comprobar cómo quedaría nuestra página web en Internet, podemos reproducirla con el navegador que tengamos instalado. Solo hemos de elegir Archivo/ Visualizar Página en el navegador o pulsar la tecla F5.

18 PROPIEDADES DE PÁGINA Se configuran las propiedades de de página a través de: Formato Título y propiedades de página. Se abrirá la siguiente ventana: Introducimos en esta ventana el título de la página, nombre del autor, una breve y Descripción. Es recomendable ingresar estos datos ya que algunos buscadores lo usan para indexar la página a su Base de Datos. Podemos indicar si esta página se trata de una plantilla que usaremos en futuros diseños. Además podremos introducir en el área llamada Internacionalización las opciones referentes al idioma, dirección de escritura (dependiendo del idioma), y el juego de caracteres utilizados en la página. También, podemos configurar otras propiedades de la página, tales como el fondo y los diferentes colores a utilizar. Para ello, accederemos a: Formato/ Colores y Fondo de página.

19 . Disponemos de dos opciones para establecer los colores de la página: Usar Colores predeterminados. Usar colores personalizados. Si elegimos usar Colores predeterminados, los textos, enlaces y el color de fondo de fondo de nuestra página se mostraran con los colores configurados en el navegador. Con Usar colores personalizados, podemos definir el color en que se mostrarán los textos, enlaces y fondo de la página.

20 Si decidimos personalizarlo, como vemos en la imagen, podremos ver una pequeña ventana en modo de muestra para ver el contraste entre los diferentes elementos que hemos configurado. También disponemos de una Edición avanzada: Desde aquí podremos, mediante los atributos y sus respectivos valores, aplicar diferentes configuraciones a <BODY>, mediante HTML, como estilos incrustados (CSS), y eventos javascripts, que se aplicarán por defecto a los diferentes elementos de nuestra web.

21 TEXTO Introducción de texto Como ya hemos visto en el apartado anterior, podemos establecer un formato predeterminado para todo el texto de la página. Pero a continuación, vamos a ver como trabajar directamente con el texto, para personalizar cada apartado. En cuanto a la inserción de textos, esta no tiene ninguna dificultad, ya que es exactamente igual a como cualquier procesador de textos. Cabe aclarar, que en lenguaje HTML, caracteres especiales como vocales acentuadas, eñes, paréntesis, etc. se escriben de una forma especial, utilizando códigos, incluso el espacio en blanco se trata de forma especial. Si trabajamos en el modo de edición normal, Kompozer se encargara de traducir los caracteres especiales que escribamos al modo de código de caracteres en HTML. Podemos seleccionar el tipo de contenido que estamos insertando (parrafos, título, dirección..) mediante la opción Texto del cuerpo, en la Barra de Formato: Así, en el caso de estar escribiendo un texto, y requerir un salto de línea,, solo tendremos que presionar Mayuscula+Enter, y pasaremos así al párrafo siguiente, el cual heredará la personalización aplicada al anterior. En el caso de necesitar introducir Caracteres poco comunes, esos que no se encuentran en el teclado o que requieren código HTML especial, iremos al menú Insertar/Caracteres y Simbolos. En elo cual nos aparecerá una solapa, en la que podremos encontrar según la clasificación de la misma el carácter en cuestión:

22 Selección de Texto. En cuanto a la selección de texto, KompoZer No permite hacer selecciones discontinuas de texto. Los procedimientos más usuales para seleccionar texto, son los siguientes: ARRASTRE Se sitúa el cursor al inicio del bloque de texto y realizamos un arrastre con el botón izquierdo del ratón.. Aclaración: Si un bloque de texto está seleccionado y se pulsa cualquier tecla, ésta sustituye a toda la selección. MAY + POSICIÓN Para seleccionar un bloque de texto situamos el cursor en el inicio del bloque, pulsamos y mantenemos pulsada la tecla MAY, situamos el cursor al final del bloque de texto. SELECCIÓN El Portapapeles. Una palabra: Doble clic sobre la palabra Una línea: Clic en la parte izquierda de la línea, el cursor cambia a flecha. Un párrafo: Nos situamos al comienzo, y sin soltar el botón izquierdo del ratón, lo arrastramos hasta el final del mismo. Las herramientas del Portapapeles se sitúan en el menú Edición, aunque podremos, una vez seleccionado el texto o la posición el cuestión, pulsar el botón derecho, y acceder rapidamente a las siguientes opciones: Copiar. Edición/Copiar. Tecla rápida CONTROL + C Cortar. Edición/Cortar. Tecla rápida CONTROL + X

23 Pegar. Edición/Pegar. Tecla rápida CONTROL + V Pegar sin Formato. Aclaración: El portapapeles no funciona con imágenes copiadas de otras aplicaciones, mas adelante veremos como se deben de insertar las imágenes. Otras Operaciones útiles. BUSCAR Y REEMPLAZAR Este comando nos ayudará a ahorrar tiempo y trabajo: Edición>Buscar y reemplazar. Buscar texto: Podemos buscar en el código fuente o en el texto, dependiendo de la vista seleccionada. Remplazar con: si queremos reemplazar lo buscado por algo debemos indicar el texto en este cuadro de texto. Podemos configurar las opciones de búsqueda:

24 Coincidir mayúsculas y minúsculas. Buscar el todo el documento. Buscar hacia atrás. Una vez configurado el cuadro de diálogo tenemos la posibilidad de buscar o remplazar, uno por uno o todos a la vez. DESHACER Y REHACER Deshacer (Control + Z): seleccionamos Edición>Deshacer o botón de la barra de herramienta Estándar. Rehacer (Control + Y): seleccionamos Edición/Rehacer botón de la barra de herramienta Estándar. COMPROBACIÓN ORTOGRÁFICA Para poder poner en marcha esta utilidad debemos seleccionar Editar/Revisión Ortográfica(Ctrl.+K). Aparecerá el siguiente cuadro de diálogo: Añadir palabra: Incluye la palabra seleccionada a nuestro diccionario personal e impide que KompoZer la reconozca como palabra errónea. Ignorar: Indica al programa que ignore la palabra seleccionada y continúe la búsqueda. Ignorar todo: Omitirá todas las repeticiones de la palabra seleccionada en el documento entero. Reemplazar: Si encontramos la palabra correcta en la lista de sugerencias y queremos cambiarla por la errónea, la seleccionamos y presionamos este botón. Si no encontrásemos ninguna podemos escribir la correcta en el cuadro de texto Reemplazar con.

25 Reemplazar todas: Todas las repeticiones de la palabra en cuestión encontradas en el documento serán reemplazadas por la palabra seleccionada en el cuadro Sugerencias. El programa comprueba el texto usando el diccionario seleccionado en la casilla Idioma. Cabe aclarar que en el caso de no disponer del idioma Español, seleccionaremos dentro de la casilla Idioma, Descargar Mas, y seguiremos las instrucciones que allí aparecerán para conseguir el mismo.

26 FORMATO DE TEXTO Si queremos modificar las características de un texto, o cualquier otro elemento, se aplican desde la barra de Formato o desde menú Formato Si no lo tenemos visible seleccionamos Ver/Mostrar Ocultar/ Barra de Formato Una vez seleccionado un texto el inspector de propiedades muestra este aspecto. En caso de que en la misma no encontremos la opción deseada, dentro del menú Formato, encontraremos las faltantes. Estilo de Párrafo. El texto en HTML está compuesto principalmente por encabezados y párrafos. Para asignar a un párrafo un estilo de párrafo, como hemos comentado anteriormente, seleccionamos el mismo, y, seleccionamos en el campo Texto del Cuerpo, Parrafo, o Encabezado x, dependiendo del tipo. Estilos accesibles desde esta lista: Dirección: Introduce texto entre saltos de línea, no entre etiquetas <p> y </p>, como hará Párrafo. Preformato: estilo de texto que emplea letra mono espaciada, con este estilo se respetan los espacios entre palabras del código HTML, se emplea de una manera rudimentaria para alinear texto. La etiqueta que emplea es <PRE></PRE>. Contenedor Genérico (DIV): Esta opción introduce el texto dentro de una capa, que es un tipo de organización del texto y demas elementos, en el que profundizaremos mas adelante. Fuente La fuente se define con el atributo face de la etiqueta <Font>. KompoZer aplica las fuentes que se encuentran instaladas en el equipo, pero hay que tener en cuenta, que puede que el visitante no posea ese determinado tipo de fuente, por lo que es recomendable que cuidemos este aspecto a la hora de seleccionar alguna de ellas, ya que dependiendo de la fuente seleccionada, el aspecto de nuestra web puede

27 cambiar mucho. Los pasos para aplicar el formato, son los siguientes: 1. Seleccionamos el texto. 2. Desplegamos, en el Inspector de Propiedades, el cuadro de lista desplegable de fuentes o ejecuta el comando Texto>Fuente. 3. Seleccionamos de la lista la fuente deseada. Negrita, cursiva y Subrayado Desde el mismo Inspector de Propiedades podemos aplicar estilo directamente a un texto seleccionado pulsando los iconos correspondientes. Tamaño Al seleccionar Menor o Mayor puede cambiar el tamaño del texto seleccionado usando etiquetas <small> y <big>, respectivamente. Si seleccionamoa Muy pequeño, Pequeño, Medio, Grande, Muy grande y Extragrande cambiará el tamaño del texto seleccionado usando etiquetas <font>. Alineación de Párrafos. Para establecer la alineación del Párrafo: 1. Situamos el cursor en el Párrafo que queremos modificar. 2. Selecciona en el Inspector de Propiedades la alineación que deseamos pulsando su botón correspondiente. Los diferentes códigos que se introducen son: Izquierda: <p align="left">.</p> Centro: <p align="center"></p> Derecha: <p align="right"></p> Justificar: <p align="justify"></p> También se puede acceder desde el menú Texto>Alinear, y seleccionamos la alineación elegida. Sangría de Párrafos.

28 Para modificar la sangría del Párrafo: 1. Situamos el cursor en el párrafo que queremos sangrar. 2. En el Inspector de Propiedades, pulsamos el icono Sangría de texto o Anular la sangría de texto según deseemos.

29 OTROS ELEMENTOS Listas. Utilizaremos primordialmente dos tipos de listas: Listas sin ordenar: También llamadas viñetas. Listas ordenadas: También llamadas numeraciones. Listas de definición: Se utilizan para introducir un termino, seguido de su definición. Es muy util en muchos casos, como, por ejemplo, en el glosario de nuestra web. Para crear una lista nueva. 1. Situamos el cursor en el lugar en el que deseamos añadir la lista y hacemos clic en el botón determinado. 2. Escribimos el texto del elemento de la lista y presiona INTRO para crear otro elemento de la lista. 3. Para terminar la lista, desactivamos el icono de la lista en el inspector de Propiedades. Para crear una lista usando texto existente 1. Seleccionamos una serie de párrafos para convertirlos en una lista. 2. Hacemos clic en el botón específico, y seleccionamos el tipo de lista deseado: Lista sin ordenar, Lista ordenada o Lista de definición. PROPIEDADES DE LA LISTA Una vez realizada una lista se puede modificar. Para modificar una lista situamos el cursor dentro de la misma y seleccionamos Formato>Listas>Propiedades. Aparecerá un menú de dialogo.

30 Tipo de lista : Cambia la representación de los elementos de toda la lista. Estilo de Viñeta : Una vez elegido un tipo de lista podemos seleccionar su estilo: si son viñetas, círculos o cuadrados, y si es una numeración podemos elegir que sea alfabética, en numeración romana, etc. Comenzar en: en el caso de seleccionar una lista de numeración, podremos indicarle el número a partir del cual queremos que empiece a contar. Líneas Las lineas son un elemento muy util para dividir y diferenciar de una forma simple, el contenido de nuestra página. Para insertar una línea horizontal de separación simplemente habrá que seleccionar la opción Insertar>Línea. En el código HTML de la línea se representará como <hr>. Una vez insertada se le pueden modificar las propiedades desde el Inspector de Propiedades. Al seleccionar la regla horizontal nos ofrece estas posibilidades:

31 Desde estos campos podemos determinar: Anchura: el ancho de la regla (en píxeles o en tanto por ciento con respecto al ancho de la pagina) el alto de la regla (en pixeles) si tendrá sombreado o no su alineación en la página También, podremos definirla como predeterminada, para, así, al insertar otra línea en el futuro, que esta posea las mismas propiedades que la anterior. En Edición Avanzada, podremos acceder a una ventana para, así, en caso de conocer los atributos con sus respectivas propiedades, introducirlos mediante el lenguaje HTML. El color. Se puede definir el color para varios elementos de la página: texto, fondo de páginas, tablas y celdas, hipervínculos, bordes de tablas, líneas horizontales, etc. Seleccionar el color. En cualquier momento que tengamos que seleccionar un color en KompoZer lo haremos a través de un botón de este tipo:. Al pulsarlo aparecerá el selector de color:

32 Desde el cuadro de diálogo que se despliega podremos seleccionar un color predefinido, o seleccionarlo cualquiera de la paleta de colores, así como personalizar su tono, saturación y brillo. También, podremos seleccionarlo por su nombre, o por su valor en hexadecimal. Aclaración: Las etiquetas web emplean colores por combinación de ROJO, VERDE y AZUL, el valor máximo para cada color es 255 (FF en hexadecimal), y el valor mínimo 0 (0 en hexadecimal). Ej.: un color codificado así #FF0000 es rojo puro.

33 ENLACES Los vínculos también llamados enlaces, links o hiper-enlaces son los que nos permiten navegar, es decir, ir pasando de una pagina a otra. Se puede usar como enlace un texto o una imagen, el procedimiento es similar en ambos casos. Hay dos formas de introducir una dirección de la página/archivo/etc a enlazar: Direcciones absolutas y relativas Absolutas: Se utilizan para enlazar páginas o archivos de un servidor externo. Una dirección absoluta contiene la URL completa. Son del tipo: Estas direcciones requieren ser comprobadas periodicamente como labor de mantenimiento. Ej: Código: <a href=" Relativas: Para enlazar páginas o archivos pertenecientes al mismo sitio. Les falta alguna de las secciones de la URL. Si el archivo destino no se encuentra dentro de la misma carpeta del sitio web, se le antepone la ruta correspondiente a partir de la ubiación actual. Ej: direccion relativa. Código: <a href="../../index.htm"> Tipos de Enlaces: Interno: Nos lleva a otra parte dentro de la misma página donde se encuentra el enlace. Para ello utilizamos un elemento llamado ancla. Local: Se refiere a algún recurso situado en el mismo servidor que nuestra página (URL relativas) Externo: Se refiere a algún recurso situado en otros servidores diferentes donde se encuentra nuestra página (URL absoluta) De Correo: Cuando se da clic en este tipo de enlaces se abre programa de correo electrónico para enviar un a la dirección que previamente se halla especificado en ese enlace.

34 A Archivos: El recurso señalado es un archivo y al dar clic nos permiten que se abran o se descargen a nuestro ordenador esos archivos.

35 APLICACIÓN Enlaces Interno 1. Situamos el cursor a donde estará dirigido nuestro enlace. Una vez seleccionado, pulsamos el icono Enlace Interno, y le establecemos un nombre que hará de referencia de nuestro enlace. 2. Luego, seleccionamos nuestro futuro link que, como ya hemos mencionado,puede ser el texto o la imagen que servirá de enlace. 3. Elegimos menú Insertar Enlace o pulsamos el botón Enlace 4. En Ubicación del enlace colocamos la URL de la página a la que debe apuntar el enlace. La URL puede ser absoluta (comienza por o relativa, es decir la ruta de un archivo en el propio servidor donde esté alojada la página. En este caso podremos marcar la opción La URL es relativa a la dirección de la página cuando accedamos a las propiedades del enlace. Al pasar el mouse sobre el ancla colocada, aparecerá el nombre que le hemos dado. Para cada destino al que queremos llegar en nuestra página habrá un ancla Enlaces Externo 1. Situamos el cursor donde será el enlace. Por ejemplo seleccionando el texto o imagen que servirá de enlace. 2. Elegimos menú Insertar Enlace o pulsamos el botón Enlace 3. En Ubicación del enlace colocamos la URL de la página a la que debe apuntar el enlace. La URL puede ser absoluta o relativa. Enlaces a Correo Electrónico

36 Al insertar un enlace, simplemente en lugar de escribir la url, escribimos el correo electrónico al cual queremos llegar y marcamos la opción Lo anterior es una dirección de correo electrónico Enlaces a Archivos: Para crear un enlace a un archivo, lo realizamos igual que si fuera a otra página, solo que en vez de seleccionar dicha página, seleccionamos el archivo en cuestión. Estos enlaces no disponen de mayor complejidad. Destino del Enlace: El archivo llamado por un enlace se muestra en una ventana del navegador. Por defecto,

37 esta ventana es la misma en la que estábamos, se sustituye su contenido. Pero es posible determinar cuál va a ser la ventana de destino del enlace. Dentro de las propiedades del enlace, podremos seleccionar entre las siguientes opciones: En la misma ventana, sin marcos (por defecto) En una nueva ventana. En el conjunto de marcos contenedor En el marco actual En este marco:<nombre marco> De momento solo prestaremos atención a los dos primeros, ya que los marcos los estudiaremos en profundidad en otros apartados de este manual.

38 EXTRA: : OTRASO PROPIEDADES DEL ENLACE: Al crear enlaces en su página web a las de otras personas, KompoZer proporciona la posibilidad de incluir información XFN (XHTML Friends Network, Red de Amistad XHTML). XFN es una manera muy sencilla de representar las relaciones humanas usando hiperenlaces. Para añadir información XFN: 1. Pulse con el botón derecho en el enlace al que quiere añadir información XFN. 2. Seleccione Propiedades del enlace. 3. En la ventana de diálogo Propiedades del enlace, pulse en Más propiedades. 4. Seleccione las entradas bajo la sección Amistad (XFN) que quiera añadir como información XFN. 5. Pulse Aceptar. 6. Pulse Guardar para guardar los cambios/adiciones al documento. Nota: algunas propiedades XFN son de tipo radio, es decir, sólo puede pulsar una como máximo, mientras que otras son casillas de verificación, es decir, puede marcar varias simultáneamente.

39 REFERENCIA HTML Etiqueta <A> y </A> Las etiquetas <a> y </a> definen un enlace: el texto o imagen encerrado entre ellas servirá de enlace hacia el destino que marquemos. Ej: Ir a Google Código HTML: <a href=" Enlace a la página de Google</a> El destino es marcado por el modificador href de la etiqueta. Atributos de <A> href="...": Es necesaria. Indica la dirección URL a la que se va a saltar al hacer clic sobre el enlace. name="...": Convierte al contenido de la etiqueta <A> en un destino (llamado marcador o punto de ancla). target="...": Determina el marco o ventana de destino donde se abrirá el archivo enlazado. title="...": Opcionalmente podemos añadir un texto alternativo que se muestra al posicionar el ratón sobre el enlace. Atributos de <BODY> La etiqueta <BODY> puede tener tres modificadores que definen el aspecto de los enlaces de toda la página web: link="...": Determina el color de los enlaces de la página Web vlink="...": Determina el color de los enlaces ya visitados de la página Web alink="...": Determina el color general de los enlaces activos (al hacer click) de la página Web

40 IMÁGENES Formatos: Formato GIF El formato GIF (Graphics Interchange Format), nació en el año 1987 de la mano de Compuserve con objeto de colorear sus imágenes, hasta entonces codificadas en su formato RLE en blanco y negro. La versión original (GIF87a) fue sustituida por la GIF89a. Actualmente existe un problema de licencias que desaconseja su uso en favor del formato PnG. Sus características más importantes son: Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad. Se utiliza principalmente para imágenes de colores planos, o sea, grandes manchas de color homogéneo, sin variación cromática, al modo de los dibujos infantiles. Permite "transparencias", es decir, seleccionando uno de los colores de la imagen éste se vuelve transparente, permitiendo ver a través de él cualquier fondo, o imagen que esté situada detrás. Permite, con el programa adecuado, crear animaciones presentando varias imágenes una tras otra como si de un "dibujo animado" se tratara. Utiliza una paleta de 256 colores como máximo, lo que nos permite elegir entre varios tamaños para un mismo archivo. Formato JPG El formato JPG o JPEG (Joint Photographic Expert Group ), es el más utilizado para la transmisión de fotografías, nació en el año Es un formato muy recomendado para imágenes con una amplia gama de colores y que permite ajustar el grado de compresión y por tanto la calidad de la imagen. Sus características más importantes son: Es un formato de compresión con pérdida: aligera el tamaño final del archivo, pero le resta calidad. Se utiliza principalmente para incluir en la web fotografías con un elevado número de colores (trabaja con un formato de 16 millones de colores). No permite definir colores transparentes. No permite crear animaciones. Con el formato JPG, podemos escoger el grado de compresión, de manera que

41 cuanto mayor sea la compresión mayor es la pérdida de calidad de la imagen. Codifica los colores con 24 bits, por lo que puede manejar una paleta de más de 16 millones de colores, lo que se llama color verdadero. Formatos PNG PNG (Portable Network Graphics) es un formato gráfico basado en un algoritmo de compresión sin pérdida para bitmaps no sujeto a patentes. Este formato fue desarrollado en buena parte para solventar las deficiencias del formato GIF y permite almacenar imágenes con una mayor profundidad de color y otros importantes datos. Sus características principales son: Es un formato de compresión sin pérdidas lo que aligera el tamaño final del archivo, manteniendo su calidad. Soporta formato de color indexado (256 colores) y profundidades de color de 48 bits y escala de grises de 16 bits. Permite colores transparentes y transparencias graduales. No permite crear animaciones, existe un formato relacionado para animaciones, pero está poco extendido: MNG. El usuario puede elegir el formato a usar en la codificación de la imagen: PNG8 (análogo al GIF) o PNG24 (24 bits de color) no es adoptado por todos los navegadores, y aún menos por las versiones antiguas de los mismos. Observaciones: A la vista de todo lo anterior, cuando integremos imágenes en nuestra página deberíamos tener en cuenta lo siguiente: Debemos analizar detalladamente el uso de imágenes en nuestra página. Hemos de fijarnos en su necesidad, resolución, tamaño, formato, etc. El objetivo es lograr que la página se cargue lo más rápidamente posible. El tamaño del archivo de imagen depende de las dimensiones de la imagen y del número de colores que la forman. Para colores puros con no más de 256 colores y gráficos muy simples usaremos el formato GIF o PNG. Para imágenes con más de 256 colores usaremos el formato JPG o PNG24. Usar las imágenes con su tamaño real, evitando que sea el navegador el encargado de reducirlas. No colocar demasiadas imágenes en una misma página. Si necesitamos mostrar

42 un numero elevado de imágenes, lo mejor es usar una versión muy reducida de las mismas (thumbnails o miniaturas) a modo de índice y enlazar con páginas individuales donde se muestre cada imagen por separado. Al diseñar la estructura del sitio utilizar una carpeta para las imágenes muy usadas a lo largo de las diferentes páginas del sitio. Usar el atributo ALT en las imágenes, para facilitar la comprensión del contenido a los usuarios y a los robots usados por los buscadores para indexar nuestra página. Insertar imagen Se pueden insertar imágenes GIF, JPEG, BMP y PNG en una página web. También se pueden utilizar para. Cuando se inserta una imagen, KompoZer guarda la referencia a la imagen en la página. Pasos para insertar una imagen: 1. Hacemos clic en el sitio donde queramos que aparezca la imagen. 2. Hacemos clic en el botón Imagen de la barra de herramientas o abra el menú Insertar y seleccione Imagen. Aparecerá el cuadro de diálogo Propiedades de la imagen. 3. Podemos escribir la ubicación y nombre del archivo de la imagen o hacer clic en Elegir archivo... para buscar un archivo de imagen en el disco duro o en red local. 4. A continuación, KompoZer nos permite escribir el texto alternativo que aparecerá en los navegadores de sólo texto y que aparecerá en los otros navegadores mientras se carga la imagen o cuando la carga de imágenes está deshabilitada. Esta opción, si bien no es obligatoria, si es recomendable.

43 PROPIEDADES DE LA IMAGEN: Una vez que insertamos una imagen en la página, podremos editar sus propiedades y personalizar su diseño, como la altura, anchura, espaciado y alineación del texto. Para editar las propiedades de una imagen seleccionada: 1. Hacemos doble clic en la imagen o la seleccionamos y hacemos clic en el botón Imagen de la barra de herramientas para visualizar el cuadro de diálogo Propiedades de la imagen. Veamos las propiedades de este menú: Pestaña Ubicación: Ubicación de la imagen: aquí escribimos el nombre y ubicación del archivo de la imagen o hacemos click en Elegir archivo... para buscar un archivo de imagen en el disco duro o red local. La URL es relativa a la ruta de la página: si está seleccionado KompoZer convierte la URL a una dirección relativa a la ubicación de la página. Esto es especialmente útil si planeamos copiar las páginas a un servidor web para que otra gente pueda verlas. El uso de URLs relativas permite mantener todos los archivos vinculados en el mismo sitio relativo al resto independientemente de la ruta en el disco duro o servidor web.

44 Al desmarcar esta opción KompoZer convierte la URL a una URL completa o absoluta. Normalmente se utilizan URLs absolutas cuando se vinculan imágenes en otros servidores web (cuando no están almacenadas localmente en el disco duro). Texto alternativo: como hemos mencionado anteriormente, aquí introducimos el texto que se visualizará en lugar de la imagen original, por ejemplo, un título o una breve descripción de la imagen. No usar texto alternativo: seleccionamos esta opción si la imagen no requiere un texto alternativo o no quiere especificar uno. Pestaña Dimensiones: Tamaño real: seleccione esta opción para deshacer cualquier cambio hecho a las dimensiones de la imagen y devolverle a ésta a su tamaño real. Tamaño personalizado: seleccionamos esta opción para especificar una nueva altura y anchura, en píxeles o como porcentaje. Esta configuración no afecta al archivo original de la imagen, sólo a la imagen insertada en la página. Mantener aspecto: marcamos esta opción para mantener las proporciones de las imagenes si las vamos a redimencionar, para que estas no aparezcan deformadas. Si se seleccionamos esta opción sólo snecesitamos cambiar la altura o la anchura, pero no ambas. Pestaña Apariencia: Espaciado: especificamos aquí la cantidad de espacio del contorno de la imagen; el espacio entre la imagen y el texto cercano. También podemos colocar un borde negro sólido en el contorno de la imagen, especificando la anchura en píxeles. Colocamos cero si no quiere borde. Alinear el texto con la imagen: si colocamos la imagen al lado de un texto, seleccionamos esta opción para indicar cómo se desea que se posicione el texto en relación con la imagen. Mapa de imagen: hacemos clic en Eliminar para borrar cualquier configuración de mapa de imagen. Hasta la versión actual, Kompozer no permite realizar el mapeo de imagenes de forma simple, solo mediante los atributos correspondientes.

45 Pestaña Enlace: Introduzca una ubicación de página web: si queremos definir un enlace a la imagen, introducimos la URL de una página remota o local, o seleccionamos un enlace interno o encabezado de la lista desplegable. También, podemos pulsar en Elegir archivo para buscar un archivo de imagen en el disco duro o en la red local. La URL es relativa a la ubicación de la página: si la marcamos, KompoZer convertirá la URL a una relativa a la ubicación de la página. Desmarcar esta casilla provoca que KompoZer convierta la URL a una dirección completa (absoluta). Normalmente se usan URLs absolutas cuando se enlaza a páginas en otros servidores web (no almacenadas localmente en su disco duro). Mostrar borde alrededor de la imagen: si se marca, aparecerá un borde del color elegido para los enlaces en torno a la imagen. Otras opciones: Para aplicar atributos adicionales o eventos JavaScript, hacemos clic en Edición avanzada... para visualizar el editor avanzado de propiedades. Hacemos clic en Aceptar para confirmar los cambios.

46 INSERTAR UNA IMAGEN COMO FONDO Ahora colocaremos una imagen de fondo de página. Para ello pinchamos sobre la página en Formato / Colores y fondo de página. Luego, en el cuadro de diálogo que se nos muestra elegimos la sección de Imagen de Fondo y pinchamos en el botón Elegir archivo. Como hemos visto antes, la primera ventana que se nos abre es en la que aparece nuestra Web. Dentro de la carpeta imágenes seleccionamos el archivo que deseemos

47 tener como fondo de página. En la siguiente ventana se comprueba que el archivo seleccionado se ha tomado de la carpeta imágenes y el archivo responde al nombre de prueba.png; tiene una URL relativa, lo que es preferible a la absoluta; luego se pulsa Aceptar.

48 Si la imagen es más pequeña que la zona de visualización de una página (como en esta imagen elegida para el fondo), la repite en forma de mosaico ocupando toda la pantalla. Por eso las imágenes de fondo siempre hay que seleccionarlas bien para que no dificulten la lectura del texto. Esto mismo que hemos descrito para el fondo de la página sirve para el fondo de una tabla que pongamos en ella.

49 REFERENCIA HTML Etiqueta <IMG> Determina la localización de una imagen. No tiene cierre. Atributos de la etiqueta <IMG>: src ="...": Ruta origen para localizar el archivo de la imagen. (source/fuente). alt="...": Texto alternativo que aparece en lugar de la imagen si el navegador no puede mostrar la imagen. Tambien es mostrado al colocarnos sobre la imagen en un letrero amarillo. width="...": Establece el ancho de la imagen. height="...": Establece el alto de la imagen. border="...": Muestra un marco con el número de pixeles deseado. align="...": Alinea la imagen respecto al texto. Etiqueta <MAP> y </MAP> La etiqueta map permite crear un mapa de imagen con diferentes zonas de manera que, al pulsar sobre ellas, se enlaza a diferentes destinos. Cada mapa de imágenes se determina con un nombre (atributo name="..."). Entre la apertura y el cierre se definen las areas del mapa por medio de la etiqueta <AREA> y </AREA> que tiene a su vez estos atributos: shape="..." : Forma del área de enlace: circular, rectangular, o poligonal. coords="..." : Coordenadas de localización del área en la imagen. href= "..." :Dirección del enlace. Atributo background de BODY Existen dos modificadores de body para definir el fondo de una página: su color (<body bgcolor="#ffffff" >) o una imagen de fondo (<body background="imagenfondo.jpg">). Etiqueta Object Para incluir ficheros no estandar (películas Flash, vídeos o sonido) dentro de una página se utilizan dos etiquetas combinadas, object para Internet Explorer y embed para Netscape.

50 Cada vez más, el vídeo y el sonido son componentes integrales de los sitios Web comerciales. Utilizando sólo etiquetas HTML estándar podemos agregar funcionalidad multimedia atractiva a las páginas Web. Por ejemplo, para incrustar un clip de vídeo en una página Web, podemos utilizar también otro tipo de etiqueta. Etiqueta Dynsrc simplemente el atributo DYNSRC de la etiqueta HTML <IMG>: <IMG DYNSRC="MiVideo.avi" > El clip de vídeo MiVídeo.avi se reproduce después de que el usuario cargue una página Web que contenga esta etiqueta. Con HTML también podemos crear vínculos a gran número de formatos de archivo, incluidos los de Microsoft Office. Para que los usuarios puedan ver estos formatos, deben tener exploradores Web capaces de ver archivos que no sean HTML. Por ejemplo, si sabes que todos los usuarios de una intranet tienen Microsoft(r) Excel y Microsoft(r) Internet Explorer versión 3.0 o posterior, podremos crear vínculos con una hoja de cálculo de Excel desde el sitio Web. Cuando el usuario hace clic en el vínculo, el documento aparece en formato de Excel dentro del explorador Web del usuario. Este es un buen método que puede utilizar para crear sitios Web que compartan y distribuyan documentación; de esta forma ayuda a trabajar eficazmente.

51 TABLAS Introducción Las tablas no solo son útiles para mostrar listas de datos, son también un elemento primordial para maquetar las páginas web, o sea, para colocar con cierta libertad los elementos que forman la página web. Las tablas nos permiten organizar y distribuir los espacios de una manera óptima. Por ejemplo no permite poner el texto en columnas como en los periódicos, prefijar los tamaños ocupados por distintas secciones de la página o poner de una manera sencilla un pie de foto a una imagen. En el momento en que queremos mostrar páginas webs atractivas y fáciles de leer nos veremos en la necesidad de utilizar las tablas. Descripción de las tablas Podemos definir a una tabla como un conjunto de espacios organizados en filas y columnas. La intersección de las filas se llaman celdas. Una cuadrícula es una tabla, en cuyas celdas podemos poner cualquier elemento HTML, desde texto hasta imágenes y otros elementos multimedia. Algunos atributos propios de las tablas son: Alto y ancho (height y width): pueden medirse en pixels o en porcentaje del elemento contenedor (width= "100%" indica que ocupa el ancho del elemento en el que está colocada. Border (borde) : Anchura del borde que rodea a la tabla. Si es 0 el borde no se ve cellpadding (relleno): margen del contenido de cada celda. Se mide en pixels. cellspacing (espaciado): espacio entre las celdas. Se mide en pixels. Crear Tablas

52 Para insertar una tabla mediante KompoZer, tenemos tres posibilidades: Usar el botón tabla de la barra de botones: Usar el menú Insertar y opción Tabla: Usar el menú Tabla con la opción insertar Definir la tabla Al insertar la tabla nos aparece un cuadro de diálogo que nos permite definir las características de la tabla. En él encontramos tres pestañas: La primera de ellas es Rápido, es la opción por defecto y nos permite dimensionar la tabla de manera gráfica. Para ello desplazamos el cursor con el ratón por la cuadrícula. Una vez tengamos la distribución que nos interesa, hacemos clic y tendremos la tabla insertada en la página.

53 Preciso en esta pestaña podremos escribir directamente el número de filas y columnas de que constará nuestra tabla. Filas: escribimos el número de filas que tendrá nuestra tabla. Columnas: lo mismo, pero para el valor de las columnas. Anchura: ancho de la tabla. Podremos colocarlo en píxeles, o en el porcentaje del espacio que ocupará la tabla dentro del elemento donde se encuentre insertada. Borde: Grosor en píxeles que tendrá la línea que forma el borde de la tabla, si queremos que sea "invisible", daremos al borde el valor cero. Celda, en ella podemos añadir más detalles a los elementos que vayan en el interior de las celdas de nuestra tabla: Alineación Horizontal: indicaremos si irán sin alineación, alineados a la izquierda, al centro, o a la derecha, según elijamos del menú desplegable.

54 Alineación Vertical, que puede ser, sin alinear, arriba, al centro, o abajo, según el valor que elijamos del menú desplegable Marcando el apartado Ajustar, permitiremos que el texto introducido en la celda ocupe varias líneas, si deseamos que todo el texto se muestre en una sola línea, marcaremos No ajustar. En el apartado Espacio entre las celdas introduciremos el valor en píxeles que queremos que haya entre las celdas. En el apartado Relleno de las celdas, el valor en píxeles que habrá entre los bordes de la celda y su contenido.

55 Modificar tablas Después de insertar la tabla en nuestra página podemos modificar sus características mediante el cuadro de diálogo "propiedades de tabla". Este cuadro nos permite por una parte modificar las propiedades generales de la tabla y por otra las propiedades de las celdas. Para usarlo la tabla o las celdas han de ser previamente seleccionadas. Seleccionar una tabla o sus elementos es tan sencillo como colocar el cursor dentro de la tabla (hacer click con el botón izquierdo del ratón dentro de la tabla) y a continuación desplegar el menú Tabla y elegir la opción Seleccionar, dentro de ella tenemos todos los elementos de la tabla seleccionables: Tabla, Fila, Columna, Celda, Todas las celdas. También podemos llevar a cabo esta operación pulsando sobre la tabla con el botón derecho del ratón dentro de la tabla. Esto nos ofrecerá la opción Seleccionar Tabla. Propiedades de la tabla Una vez seleccionada la tabla debemos abrir el diálogo de propiedades. Esto se consigue mediante cualquiera de los tres métodos: El botón derecho del ratón El menú Tabla El botón tabla de la barra de menús Cualquiera de estas opciones nos lleva al cuadro de diálogo propiedades de la tabla en el que vemos claramente diferenciados cuatro apartados: el tamaño, los bordes y el interlineado, la alineación, y el color de fondo.

56 En el apartado Tamaño, podemos modificar tanto el número de filas como el de columnas introduciendo los valores en las casillas correspondientes. También es posible modificar la altura y anchura de la tabla, especificando el valor absoluto en píxeles o el valor relativo en tanto por ciento de la ventana donde se mostrará la tabla. El segundo apartado permite modificar el grosor del borde externo de la tabla, del espaciado entre las celdas de la tabla y también el relleno o espacio que hay entre los bordes de la celda y su contenido; todo ello expresado en píxeles. En el tercer grupo modificaremos la alineación de la tabla, que puede ser a la Izquierda, en el Centro, o a la Derecha del elemento o ventana donde tengamos la tabla. También podemos reservar un espacio encima, debajo, a la derecha o a la izquierda de la tabla para posteriormente, una vez cerrada la ventana de propiedades, ponerle un Título a la tabla.

57 El último de los apartados nos permite poner color al fondo de la tabla, para ello pulsamos en el rectángulo y se nos abre la ventana donde elegir el color. Ya hemos aprendido con anterioridad a utilizar este cuadro de dialogo, si aún tienes dudas, te recomendamos volver al primer apartado, en donde se explica su utilización... En nuestro ejemplo la tabla tendría un aspecto como este:

58 Propiedades de la celda De forma similar a como modificamos las propiedades de las tablas podemos modificar las propiedades de celdas individuales. Se usa un cuadro de diálogo parecido al de las propiedades de tabla y al que se accede de manera similar. Picamos con el botón izquierdo sobre la celda que vamos a modificar y luego seguimos uno de los siguientes métodos: El botón derecho del ratón en la celda En el menú Formato: Propiedades de Celda de Tabla El botón tabla de la barra de menús Sea cual sea el método usado llegaremos a un cuadro de diálogo con las propiedades que podemos modificar en la celda seleccionada. El cuadro se parece bastante al usado en propiedades de Tabla. Aquí podemos modificar cinco apartados: La selección, el tamaño, la alineación, el estilo y ajuste, y el color de fondo.

59 En el apartado Selección encontramos un menú desplegable para indicar si las modificaciones que vamos a realizar se van a aplicar sólo a la celda seleccionada, a la fila o a la columna donde a la que pertenece esa celda (como si hubiéramos seleccionado toda la fila o toda la columna) El apartado Tamaño funciona igual que las propiedades de la tabla, pudiendo introducir en altura y anchura los valores de tamaño absoluto en píxeles o relativos en % sobre el tamaño de la tabla. Ojo el alto de la celda afecta a toda la fila y el ancho a toda la columna. La Alineación del contenido nos permite dos opciones: Alineación vertical, en la que el contenido de la celda puede situarse en la parte superior, en el centro, o en la parte inferior de dicha celda. Alineación horizontal, en la que el contenido puede ser situado a la izquierda, en el centro, a la derecha, o justificado por igual a ambos bordes laterales de la tabla. Alineaciones Izquierda Centro Derecha Superior Medio Inferior En cuanto al estilo de celdas tenemos dos posibilidades, celdas normales, que serán la mayoría de las celdas de la tabla, y celdas cabecera (suele aplicarse a la primera fila o la primera columna) cuyo contenido aparecerá en mayor tamaño y en negrita.

60 El apartado Ajuste del texto ofrece dos opciones, una que el texto ocupe en la celda una sola línea, sin importar su longitud, o que ocupe varias líneas dentro de la misma celda de forma automática El último de los apartados corresponde a la posibilidad de cambiar los Colores de fondo de las celdas, ya sea de forma individual, o combinándolo con el apartado selección, hacerlo por filas o por columnas, según el diseño que hayamos pensado para nuestra tabla. Su uso es similar al que hemos visto en propiedades de tabla.

61 OTRAS MODIFICACIONES Una tabla puede modificarse también en cuanto a su definición e incluso en su cuadriculado aspecto, es lo que les da su gran flexibilidad. Así podemos: la insertar y eliminar de tablas, filas, columnas o celdas y la unión o división de celdas. Insertar elementos Algunas de las operaciones que solemos realizar con las tablas no implican necesariamente el uso de la pantalla de propiedades de la tabla o celda, sino que están disponibles directamente en algunos menús, por ejemplo: inserción o eliminación de una tabla completa, de una fila, de una columna o incluso de celdas individuales (no recomendable). Para insertar una fila en una tabla ya creada, basta con hacer clic con el botón derecho del ratón sobre una celda cualquiera de la fila que hayamos elegido, y en el menú emergente, dentro de la opción Insertar tabla..., marcar la opción Fila superior, o Fila inferior. O también, si el cursor está en la tabla, podemos usar el menú Tabla de la barra de menús y en la opción Insertar elegir Fila superior o inferior como en el caso anterior. Al insertar una fila podemos ponerla por encima o por debajo de la fila en la que se encuentre el cursor de edición en el momento de abrir este diálogo. De la misma forma debemos proceder para insertar columnas, solo que ahora las columnas se pueden insertar a la izquierda del cursor (columna anterior) o a su derecha (columna siguiente). Incluso podemos insertar una tabla completa dentro de una celda. Al seleccionar esta opción (Insertar Tabla / Tabla...) nos aparecerá el ya conocido menú de inserción de tablas, que ya se ha visto en esta misma unidad. Observas ahora su utilidad?

62 Eliminando elementos De la misma forma que insertamos filas o columnas o celdas en una tabla podemos eliminarlas, y podemos igualmente eliminar una tabla entera. El procedimiento es para borrar tablas y sus elementos es uno de los siguientes: Hacemos clic con el botón derecho del ratón en cualquier punto del interior de la tabla y en el menú emergente elegimos la opción Eliminar tabla y dentro de ésta, lo que queremos borrar. Seleccionar previamente la tabla, y después de desplegar el menú Tabla, elegir la opción Eliminar y dentro de ésta, lo que queremos borrar.

63 Combinando celdas Es posible unir un grupo de celdas contiguas y que éstas compartan su contenido. Por ejemplo podemos crear una cabecera de tabla uniendo o combinando todas las celdas de la primera fila. Algo parecido podríamos hacer para ponerle un pie a la tabla. La opción de combinar varias celdas en una sola permite organizar el contenido de la página web casi en cualquier forma. El proceso para unir celdas comienza seleccionando varias celdas contiguas, para ello arrastramos el ratón sobre ellas con el botón izquierdo pulsado. A continuación tenemos dos métodos Pulsamos con el botón derecho del ratón eligiendo en el menú emergente la opción Unir celdas seleccionadas.

64 Desplegamos el menú Tabla y elegimos unir celdas seleccionadas. Las celdas combinadas pueden volver a separarse, para ello pon el cursor sobre la celda combinada y seguir una de las habituales caminos: Con el botón derecho se despliega el menú y se elige Dividir celda Con el menú Tabla se elige la opción Dividir celda.

65 CUESTIONES DE DISEÑO Como ya lo hemos dicho, las tablas son una importante herramienta para la maquetación de los contenidos dentro de una página. A efectos de diseño podemos diferenciar dos tipos de tablas: Tablas contenedoras: Se utilizan para alinear contenidos con respecto a la página y no suelen llevar bordes. Tablas de datos: Suelen ser anidadas (dentro de las contenedoras). Son las que estructuran el contenido en sí, es decir, los textos, las imágenes, etc. Aclaración: Al utilizar tablas contenedoras que utilicen todo el ancho de la página (100% de ancho y alto) hay que tener en cuenta que la página tiene un MARGEN superior e izquierda... y ese margen supondrá un espacio entre la tabla y el limite de la página en el navegador. Si queremos que esa tabla ocupe realmente el 100% de nuestra página tendremos que eliminar cualquier tipo de margen aplicando como valor de margen 0 en el cuadro de Propiedades de página. Resoluciones de pantalla. La resolución de pantalla del ordenador responde a la cantidad de píxeles que se visualiza a lo ancho y alto. La resolución normal suele ser de 800 x 600 píxeles. Si algo en nuestra página Web supera los 800 píxeles de ancho, el navegador reproducirá un scroll horizontal, lo cual resulta antiestético. También es conveniente que una página web se vea bien en resoluciones superiores (1024 x 768 píxeles). Esto suele ser problema de las tablas de ancho en porcentaje (%), relativo al ancho de la ventana de documento. Al variar la resolución varía el ancho de la ventana de documento. Veamos a continuación como superar este imprevisto: Solución: Trabajar con tablas contenedoras con ancho relativo (%) y tablas de datos de ancho absoluto (píxeles). 1. El contenido de la página (texto, imágenes,...) se diseña en una tabla de ancho absoluto (en píxeles). De esta forma el diseño de esta tabla no variara de una resolución a otra. 2. Crear una tabla contenedora sin bordes de 100% de ancho y de alto, de solo una celda. Esta tabla ocupará toda la pantalla en cualquier resolución. 3. Insertar la tabla con valor absoluto (en píxeles) dentro de la celda de la tabla

66 contenedora. La alineación de esa celda nos permitirá colocar la tabla del contenido en la zona deseada.

67 EXTRA: : REFERENCIAR HTML: Etiqueta <TABLE> El elemento básico dentro del cual se desarrolla la tabla son las etiquetas <TABLE> y </TABLE>. Dentro de la etiqueta de tabla se definen las filas por medio de las etiquetas <TR> y </TR>. Y finalmente, dentro de la etiqueta de las filas se definen las celdas que tiene por medio de la etiqueta <TD> y</td>. El número de celdas de una fila dará el número de columnas de la tabla. Existe un tipo de celdas, las celdas de encabezado, que se definen con las etiquetas <TH> y </TH>. El texto que contienen estas celdas estará destacado y centrado en la tabla. Ejemplo básico: Una tabla de dos filas y tres columnas. La tabla tiene 200 pixels de ancho y el borde de la tabla es de un píxel. 1 A. Atributos de <TABLE> BORDER: Dibuja bordes alrededor de las celdas. Se puede utilizar con el valor en píxeles que se desee. El grosor del borde solo afecta al borde exterior de la tabla, no afecta al borde interior de las celdas. CELLSPACING=<valor>: Controla en píxeles el espacio entre celdas. CELLPADDING=<valor>: Controla en píxeles el espacio entre los datos de las celdas y los bordes internos de las mismas. WIDTH=<valor o porcentaje>: Anchura que tendrá la tabla en valor absoluto o con tanto por ciento respecto al documento HTML. HEIGHT=<valor o porcentaje>: Altura que tendrá la tabla en valor absoluto o con tanto por ciento respecto al documento HTML. ALIGN: Alinea horizontalmente la tabla con respecto al documento HTML. BGCOLOR: Permite especificar el color de fondo de la tabla. BORDERCOLOR: Permite especificar el color de los bordes de la tabla. BACKGROUND: Permite introducir una imagen de fondo. La etiqueta <TD>, que define las celdas, tiene los mismos atributos, exceptuando

68 cellspacing y cellpadding. Además, la etiqueta <TD> tiene atributos propios como colspan y rowspan que se utilizan para combinar la celda con otras adyacentes.

69 MARCOS Introducción: Los frames (marcos o cuadros) permiten dividir la ventana en varias más pequeñas, de modo que en cada una de ellas se carga una página html distinta. Las versiones más antiguas de los navegadores no tienen implementada esta característica, por lo que no podrán verlos. Para crear una página con frames, tendremos que hacerlo desde el modo código, tecleando sentencias HTML, ya que Nvu / KompoZer aun no esta preparado para trabajar con frames. A continuación, explicaremos los conceptos básicos para poder aplicarlos, en el apartado Referencia HTML. Cuando se utilizan frames es muy habitual usar el atributo target en la etiqueta que define un vínculo (<A>), con este atributo especificaremos en que frame debe cargarse el destino del vinculo, es decir, la página vinculada.

70 REFERENCIA HTML Etiquetas <FRAMESET> y <FRAME> La página del conjunto de marcos es la que contiene el código HTML con la estructura de los marcos. Divide la pantalla en secciones rectangulares (marcos) donde se van a mostrar páginas independientes. Veamos un ejemplo de una página básica elaborada con frames: <html> <head> <title>prueba Frames</title> </head> <frameset rows="50,*" cols="*" > <frame src="documento.htm" name="cabecera" scrolling="no" noresize > <frameset cols="150,*" > <frame src=" name="google"> <frame src="wikipedia.es" name="wiki"> </frameset> </frameset> </html> <noframes><body>ooops!, tu navegador no soporta frames...</body></noframes> Las etiquetas <FRAMESET>...</FRAMESET> indican dónde empiezan y dónde acaban los marcos, y el tipo y forma de estos. Entre una y otra irán las definiciones de los diferentes marcos o frames. Las etiquetas <FRAME> representan los marcos y sus atributos (página web que contienen, márgenes, scroll, etc.) El body de la página está vacío, no tiene contenido. Las páginas de definición de marcos no nos interesan por su contenido, <body>, ya que sólo van a actuar de contenedor. No es necesario que aparezca la etiqueta <body>, pero es útil mantenerla: las etiquetas <NOFRAMES> </NOFRAMES> determinan el contenido de la página de marcos si se abre con un navegador que no permite visualizar marcos.

71 Toda página web con marcos se compone de: Una página de conjunto de marcos. Páginas para cargar en cada marco creado. Atributos de <FRAMESET> cols="...": Define el nº de columnas o marcos verticales que va a tener la ventana, y el ancho de cada uno de ellos. rows="...": Define el nº de filas o marcos horizontales que va a tener la ventana, y el alto de cada uno de ellos. frameborder="...": Define si los marcos creados van a tener borde o no. border="...": En el caso de que se haya establecido frameborder="..." o no se haya especificado, este atributo nos permite definir el grosor del borde bordercolor="...": Establece el color de los bordes de los marcos Atributos de <FRAME> name="...": Asigna un nombre al marco para diferenciarlo. Este nombre cobrará importancia a la hora de determinar en que marco queremos que se abra un enlace, es decir, el destino de los enlaces. src="...": Especifica qué pagina se va a cargar en el frame. La ruta de la pagina debe especificar su localización en el sitio web o una URL completa. scrolling="...": Establece si el marco tendrá o no barra deslizadora cuando el contenido del marco exceda al tamaño de este. noresize: impide que el marco pueda ser redimensionado por el visitante arrastrando su borde. Si no se indica este atributo el marco podrá ser redimensionado. marginwidth="...": Define el margen horizontal que queremos que haya dentro del frame, entre los límites de este y su contenido. marginheight="...": Define el margen vertical que queremos que haya dentro del frame, entre los límites de este y su contenido. bordercolor="...": Sirve para definir el color del borde del marco concreto al que se aplica.

72 FORMULARIOS Para crear formularios con KompoZer, abriremos el programa e iremos a la opción Insertar / Formulario/ Definir formulario. Entonces aparecerá la ventana Propiedades del formulario: Rellenaremos los datos del Nombre de formulario; en el campo URL de la acción pondremos en principio: ya configuraremos el servicio para que envíe las encuestas que hagamos a los usuarios de nuestra web a un correo determinado; en método seleccionaremos la opción POST, es decir... Enviar; finalmente, pulsamos Aceptar.

73 Inmediatamente veremos que el programa ha creado un área punteada, como una celda de tabla de color celeste. Esto nos indica que el formulario está creado con el método de recogida de datos que le hemos especificado. Dentro de ese área comenzaremos a colocar los elementos que nos permitirán recopilar los datos que consideremos de interés para nosotros sobre los visitantes a nuestra web. Para comenzar a crear los botones y los textos que nos servirán para recopilar información haremos lo siguiente. Hacemos clic con el ratón dentro de ese área punteada en celeste, escribimos por ejemplo Nombre y seleccionamos la opción Insertar/ Formulario/ Campo de Formulario. Rellenaremos la ventana que nos salga con los siguientes datos: elegiremos un campo de texto, lo nombraremos a efectos de poder reconocerlo posteriormente en el formulario y pulsaremos aceptar.

74 Nuestro formulario irá adquiriendo esta apariencia. Posteriormente podemos repetir la operación para agregar otro campo que sea apellidos y dirección de . Repetimos la misma operación anterior y nombramos a cada una según el dato que queramos recopilar. Tras estos datos podremos colocar items para que el visitante elija una entre varias opciones o varias a la vez Colocamos la pregunta Qué te parece esta web? y

75 añadiremos los siguientes items, cada uno con su opción: Para conseguir estos items, recurriremos a Insertar/ Formulario/ Campo de Formulario y en el tipo elegiremos casilla de verificación. A cada una de las casillas le asignamos el mismo nombre que pongamos en el formulario, en este caso son opiniones sobre nuestra web.

76 De forma que nuestro formulario va adquiriendo esta presencia: Para acabar este sencillo formulario podemos colocar un cuadro de texto para que nuestro visitante nos escriba libremente alguna sugerencia o cualquier otra cosa que le solicitemos. La mecánica para el cuadro de texto sería la siguiente: Insertar/ Formulario/ Área de Texto

77 Las propiedades de este área de texto serán las siguientes: Y lo que obtendremos será algo parecido a esto:

78 Finalmente solo quedará insertar los botones que harán posible que el visitante envíe el formulario o limpie la información del mismo por si se arrepiente de enviarlo o por si se equivoca en la consignación de algún dato. Para insertar los botones haremos lo siguiente: Insertar/ Formulario /Campo de Formulario; seleccionaremos la opción botón de envío y botón de restablecimiento posteriormente, de forma que completemos el formulario. A cada uno de los botones pondremos sus propiedades.

79 El formulario quedará de esta manera:

80 En formato html este ejemplo resultaría así.

81 CAPAS Introducción Una capa es un contenedor que tiene la peculiaridad fundamental de poder situarse en cualquier punto de nuestra página Web. Una capa puede contener cualquier elemento HTML, texto, tablas, imágenes, incluso otras capas. También podemos superponer variar capas, de tal manera que la capa que está por encima ocultará a la de abajo. Otra propiedad de las capas es la visibilidad, como consecuencia de un evento, podemos mostrar u ocultar el contenido de una capa. Por todas estas características, las capas tienen dos utilidades fundamentales: 1. Servir de contenedoras para situar una parte de documento en cualquier posición de la página. 2. Con la ayuda de código Javascript que se desencadena por eventos, permitir efectos dinámicos, por ejemplo menús desplegables, textos que aparecen al situar el ratón sobre un enlace, textos que se mueven siguiendo al puntero del ratón, etc. En esta lección explicaremos el uso básico de las capas como elementos contenedores.

82 REFERENCIA HTML Etiquetas DIV y SPAN Las etiquetas HTML que permiten el uso de las capas son DIV y SPAN. Todas las etiquetas HTML comprendidas entre las correspondientes etiquetas de apertura y cierre configuran la capa. La etiqueta DIV dispone del modificador id que permite dar un nombre a la capa. Dar un nombre a una capa es fundamental para que los programas Javascript puedan acceder a la misma. Las características de la capa se establecen con un estilo (style) dentro de la etiqueta DIV de apertura. El uso de la etiqueta DIV y SPAN es similar, la diferencia es que la etiqueta DIV genera un salto de línea anterior y posterior a su contenido, mientras que la etiqueta SPAN no. La etiqueta SPAN se utiliza para, por ejemplo, crear una capa que contenga algo y se alinee entre dos palabras de un párrafo. Crear capas En KompoZer crearemos capas mediante el botón Capa, es recomendable seleccionar primero el bloque que queremos colocar dentro de la capa antes de pulsar dicho botón. Junto a este botón aparecen dos que nos ayudaran a definir la profundidad de la capa, es decir, colocarla arriba o debajo de otra. Dentro de las capas podemos incluir otras capas, imágenes, texto formateado, tablas etc e incluso definirlas con un color de fondo o imagen de fondo. El problema es que KompoZer aun no esta preparado totalmente para trabajar con capas, por lo que su uso puede resultar frustrante. Desde el menú Formato podemos activar la Rejilla de posicionamiento que nos ayudara a mover las capas y colocarlas más precisamente donde deseemos.

83 En este apartado, KompoZer puede resultarnos bastante incompleto frente a las demas alternativas, pero aún así, veamos como crear y modificar una capa: 1. Creamos algún contenido para no crear una capa vacía: 2. Seleccionamos el mismo, y pulsamos sobre el botón Capa : 3. Ahora, podremos modificar el tamaño de la misma, así como el contenido, mediante la interfaz gráfica: Como podemos ver, al arrastrarla, nos ofrece información acerca del tamaño de la misma, esto nos permitirá ajustar el tamaño de la misma.

84 4. Ahora, dentro de la misma, podremos insertar todo el contenido que deseemos, tal y como hemos aprendido a lo largo de este tutorial: Yo, por ejemplo, he insertado una imagen. Hasta Aquí, hemos aprendido a crear la capa, y a introducir el contenido deseado dentro. Mi recomendación es continuar leyendo este tutorial, ya que para aplicarle propiedades a los distintos elementos de las mismas, es necesario crear estilos CSS, los cuales estudiaremos en el siguiente apartado, ya que no existe, de momento, ningún menú que nos permita definir las características de las capas ni de sus elementos de forma directa..

85 CSS HOJAS DE ESTILO Introducción Vamos a ver qué son las hojas de estilos y cómo usarlas para dotar a los documentos que creemos de una apariencia personalizada. Es importante que sepamos que para poder sacarles todo el partido posible a las hojas de estilos, tenemos que tener ciertos conocimientos del lenguaje HTML. Así que no está de más tener a mano un manual básico de HTML. Una hoja de estilos o CSS ("Cascade Style Sheet"), es un conjunto de reglas y características que, aplicadas a una página web o a un conjunto de ellas, pueden modificar su apariencia. De esta forma, podemos separar en cierta forma el diseño de la página de su contenido. Gracias a las hojas de estilos podemos de alguna manera homogeneizar y automatizar el trabajo que supone el diseño de una Web. Podemos definir un estilo para los títulos y otro para el texto, de forma que no tengamos que modificar cada vez el texto y los títulos para que tengan la apariencia que queramos. Una hoja de estilos puede estar contenida en la misma página donde se utiliza o puede estar definida en un archivo aparte. De la segunda forma, podemos definir estilos para todo el sitio web, mientras que de la primera tendremos que escribir el mismo código en cada página cada vez que lo necesitemos. Por eso la primera se utiliza cuando se quiere aplicar algún efecto en particular y la segunda cuando ese efecto es el mismo para todas las páginas. Existe una tercera posibilidad, y es especificar el estilo en la propia etiqueta HTML dónde queramos usarlo, con lo que el efecto sólo se producirá en ese lugar. Esto implica conocer código HTML y las propiedades que queramos cambiar. Esto tendríamos que repetirlo para cada elemento del texto cuyo estilo deseamos cambiar. Por ello, al ser poco eficiente, se usa la primera forma o la segunda, antes mencionadas. Estas formas también requieren conocer HTML. Por ello KompoZer nos facilita el uso de estilos por medio de las plantillas, que nos permite usar hojas de estilo con pocos conocimientos de HTML.

86 REFERENCIA HTML Introducción Las Hojas de estilo en cascada o estilos CSS (Cascade Style Sheet) permiten controlar el diseño y el aspecto de las páginas aumentando las posibilidades en cuanto a colores, tipos, tamaños y posicionamiento de cualquier tipo de objeto html, ya sea texto, imagen, tabla o campo de formulario (lo que sea que se pueda identificar con una etiqueta html). Se puede definir una hoja de estilo como una colección de reglas que afectan a la apariencia de un documento o parte del mismo. Las ventajas que presenta el uso de CSS son: Control sobre el diseño de la página: con los estilos CSS se separa el contenido de la página web, un documento.html, de todas las reglas referidas a su diseño y aspecto, que están separadas en un documento externo he independiente con extension.css. Actualización automática del diseño: empleando hojas de estilo se puede modificar la hoja de estilo individual y cambiar la apariencia de un sitio web completo. Discreción: los navegadores más antiguos no pueden entender las reglas de las hojas de estilo pero no dan errores, simplemente las ignoran. De este modo no se mostrarán los efectos de diseño asignados pero sí el texto básico de las páginas y la apariencia del HTML. Terminología empleada en CSS Para comprender el funcionamiento de las hojas de estilo en cascada es necesario conocer los términos empleados en las mismas: Propiedad Una propiedad es una característica de un elemento que puede verse modificada mediante una hoja de estilo. Por ejemplo color o text-transform. Estas propiedades son muy numerosas permitiendo cambiar muchas características que hasta ahora no era posible. Valor Valor es el dato que se asigna a una determinada propiedad. Por ejemplo #FFFFFF es un

87 valor para el color y uppercase es un valor de la propiedad text-transform. Declaración Una declaración esta formada por una propiedad y su valor. La declaración comienza por el nombre de la propiedad seguido de dos puntos y a continuación del valor de la propiedad. En nuestro ejemplo color: #FFFFFF; y text-transform: uppercase; son dos declaraciones. Selector Un selector es una etiqueta estándar de HTML o un nuevo nombre escrito por nosotros al cual se le quiere asignar una declaración. Por ejemplo: p, H1, strong son selectores del HTML. Regla de estilo Una regla es un selector junto con la declaración, por ejemplo, H1{color:rojo}. Al crear reglas es posible agrupar selectores y declaraciones. Un ejemplo de regla con dos declaraciones sería: strong { color: #FFFFFF; text-transform: uppercase; } Para separar las declaraciones se utiliza punto y coma. Tambien se pueden agrupar los selectores como en este ejemplo H1,H2{color:rojo;font-family:arial} Tanto los h1 y h2 serán mostrados de color rojo y tipo de letra arial. En este caso se utiliza la coma para separar los selectores. Hoja de estilo Una hoja de estilo es un conjunto de reglas que definen completamente el aspecto de todos los elementos de la página. Colocación de las reglas de estilo Las reglas de estilo pueden ir colocadas: 1. Dentro de una etiqueta individual. <etiqueta STYLE="propiedad1:valor;...;propiedadN:valor">...texto... </etiqueta> Estas reglas sólo afectan a una etiqueta particular. No se utilizan las llaves para escribir las declaraciones sino que se escriben entre comillas dentro del

88 modificador STYLE. Este tipo de colocación es el que implementa KompoZer a las capas en cuanto a tamaño y demás cuando las modificamos mediante la interfaz gráfica. 2. Afectando a toda la página. Van colocadas dentro del HEAD de la página, entre dos etiquetas <STYLE type="text/css">..reglas...</style> y afectan a todas las etiquetas del mismo tipo que aparezcan a lo largo de la página. 3. En un archivo externo llamado hoja de estilos cuya extensión es.css Lo más interesante es coger todos los estilos que vayamos a utilizar en un web y extraerlos a un archivo externo en donde almacenamos esas reglas de estilo. Esos archivos tienen extensión CSS. Para vincular las páginas al formato definido en el archivo CSS hay que colocar en cada una de ellas una etiqueta como esta dentro del HEAD: <LINK REL="stylesheet" TYPE="text/css" HREF="archivo.css"> Donde archivo.css contiene las reglas de estilo. De esta forma conseguimos establecer el formato uniforme para todas las páginas y además cualquier cambio que hacemos en la hoja de estilos se ve reflejado de forma inmediata en todas las páginas que usen esta hoja de estilos. Es por eso que es la opción más utilizada. Usar hojas de estilo en cascada KompoZer dispone de un editor de hojas de estilo denominado CaScadeS (CSS, Cascade Style Sheets). CaScadeS puede ser utilizado para producir tanto hojas de estilo internas como externas. A diferencia de los estilos incrustados, las hojas de estilo internas o externas ayudan a mantener separadas la información del contenido de la del estilo.cascades permite dos modos de edición de hojas de estilo: a) Modo para principiantes: este modo permite crear reglas asociadas a selectores de clase o selectores de tipo de elemento. Modo avanzado: este modo permite crear reglas sin restricciones. Para proporcionar estilo al documento html que se edita, CaScadeS puede iniciarse

89 haciendo clic en el menú Herramientas y seleccionando Editor CSS, apareciendo la siguiente ventana a continuación. En KompoZer contamos con un botón específico para activar la Hoja de estilos CSS, se trata del icono CasCadeS: Para crear una hoja de estilo interna: 1. Dejaremos por defecto la opción URL(ninguna, incrustado en el documento. 1. (Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo. 2. Haremos clic en Crear hoja de estilo. Para crear una hoja de estilo externa: 1. Pulsamos el icono Exportar hoja de estilos y cambiar a la versión exportada:

90 2. Seleccionamos el fichero en cuestión, Si no existe ya, se creará un nuevo fichero en el sistema de archivos local. Es recomendable, al guardarlo, asignarle el nombre completo (nombre.css) o (Opcional) Rellenaremos la información sobre Lista de medios y Título de la hoja de estilo. 3. Activaremos comprobar al crear una hoja de estilo alternativa si ésta es una alternativa. Consejo: guardaremos siempre el documento html antes de agregar una hoja de estilo local. Guardaremos también el documento inmediatamente antes de cerrar el editor CSS. Consejo: utilizaremos el botón Recargar del panel de la izquierda si la hoja de estilo no se descarga inmediatamente. Crear reglas de estilo Después de crear una o más hojas de estilo para el documento html, se pueden crear reglas para cada hoja de estilo de forma individual. Para usar una hoja de estilos concreta al crear o modificar reglas, selecciónela en el panel de la izquierda haciendo clic sobre ella con el botón izquierdo del ratón. El panel de la derecha mostrará entonces los detalles de la hoja de estilo en la pestaña General. Para crear reglas nuevas: 1. Haremos clic en el botón Regla del panel de la izquierda. 2. El panel de la derecha mostrará opciones para especificar el tipo de regla a crear. Elegiremos una entre las siguientes: estilo con nombre (introduzca abajo el nombre de la clase) estilo aplicado a todos los elementos del tipo (introduzca el tipo abajo) estilo aplicado a todos los elementos coincidentes con este selector 3. Rellenaremos el nombre de la regla. 4. Haremos clic en Crear regla de estilo.

91 En la parte derecha de esta pantalla de Hoja de estilos CSS, aparerá el elemento creado con el proceso anteriormente descrito. Las reglas pueden ser definidas usando las pestañas de estilo (Texto, Fondo, Bordes, Caja, Aural) del panel de la derecha. Para ver todas las definiciones de una regla de estilo, seleccionaremos en el panel de la izquierda y haremos clic en la pestaña General del panel de la derecha. La pestaña General mostrará todas las definiciones aplicadas a la regla.

92 EXTRA: ESTILOS CAPAS Como hemos dicho en el apartado anterior, vamos a aprender a aplicarle estilos a las capas. Para personalizar una capa tendremos que crear un nuevo estilo, en mi caso, se llama #encabezado, y aplicarle todas las propiedades que queramos aplicarle a la capa: Luego, solo tendremos que modificar mediante la vista del codigo fuente, el nombre de la capa. Esto se consigue agregando dentro de la etiqueta div el comando id= nombredelacapa : Ahora, observamos los resultados obtenidos en el modo vista preliminar:

93 PUBLICACIÓN DE PÁGINAS WEB KompoZer está pensado para trabajar directamente sobre el sitio web en Internet, aunque también puede trabajar con archivos en el sistema local. Configuración de publicación Para organizar todos los archivos, lo primero es crear un sitio web. Para ello, seleccionar la opción de menú Editar/ Configuración de publicación, o bien, desde el panel izquierdo Administrador de sitios de KompoZer, seleccionar el botón Editar sitios, se mostrará una ventana para gestionar los sitios web: En la zona izquierda se muestran los sitios definidos, y en la zona derecha, las propiedades del sitio seleccionado.

94 Para crear un nuevo sitio, seleccionar el botón Nuevo sitio, los campos de la derecha se pondrán en blanco para que sean rellenados: Nombre del sitio: nombre del sitio que se va a crear (Tutorial Kompozer). Es un texto que se va a mostrar en la lista de sitios y cuando haya que seleccionarlo. Dirección HTTP de su página inicial: URL de la página de inicio del sitio web. En caso de que se desee trabajar en el sistema local, la dirección será de tipo file:///home/usuario/sitioweb/index.html; Nombre de usuario: nombre del usuario. Esta información la suministra el servidor donde se aloja la página. Contraseña: contraseña del usuario. Esta información la suministra el servidor donde se aloja la página Para eliminar un sitio, selecciónelo de la lista y pulse el botón Eliminar sitio. Para establecer un sitio predeterminado, selecciónelo de la lista y pulse el botón Seleccionar como valor predeterminado. El nombre del sitio se pondrá en negrita indicando que es el predeterminado. Una vez definido el sitio web, en el panel de la izquierda se mostrarán todos los archivos y sub-carpetas existentes. Haciendo doble pulsación sobre un archivo, se abrirá en una solapa nueva de la zona de trabajo. Si se hace pulsación doble sobre una carpeta, se mostrará el contenido de la misma.

95 PUBLICAR NUESTRA WEB Una vez configurado el sitio de publicación tal y como se describió en el apartado precedente, 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 cuando guardamos las páginas en nuestro disco duro, con la diferencia que se guardaran en un servidor, el que configuramos en el administrador de sitios. Con el botón Publicar (o menú archivo publicar ) colocaremos las pagina en Internet (si queremos también podemos guardarla en nuestro disco duro, como hemos hecho hasta ahora). Como puedes comprobar, cuando pulsamos el icono aparece un panel en el que podemos especificar varios datos: Seleccionar el sitio de publicación si tenemos varios creados Incluir el título de la página y el nombre con el que se publicará, aunque estos datos se extraerán de la propia página.

96 Desde el Administrador de sitios también podremos modificar las páginas ya publicadas en Internet, basta con seleccionar el archivo que queremos modificar y se bajara directamente de Internet a nuestro programa de edición, KompoZer. Una vez modificada, volveremos a publicarla para que aparezca con los nuevos cambios realizados.

5.- Crear páginas web con Nvu

5.- Crear páginas web con Nvu 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

Más detalles

1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana

1.- MENU DE CONTROL O MENU VENTANA: permite cerrar la ventana cambiarla de tamaño y pasar a otra ventana EXCEL PRÓLOGO Microsoft Excel es una hoja de cálculo de gran capacidad y fácil uso. Excel no solo es una hoja de calculo, sino también tiene capacidad para diseñar bases de datos (listas) de forma totalmente

Más detalles

La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición.

La pestaña Inicio contiene las operaciones más comunes sobre copiar, cortar y pegar, además de las operaciones de Fuente, Párrafo, Estilo y Edición. Microsoft Word Microsoft Word es actualmente (2009) el procesador de textos líder en el mundo gracias a sus 500 millones de usuarios y sus 25 años de edad. Pero hoy en día, otras soluciones basadas en

Más detalles

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas.

Para crear una lista como la anterior, primero escribe la información, y después selecciona el texto y aplícale el formato de viñetas. Módulo 3 Herramientas de Cómputo Listas, tabulaciones, columnas y cuadros de texto Listas En muchas ocasiones es necesario que enumeres diferentes elementos en tus documentos. Word no sólo reconoce números

Más detalles

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora

Plataforma e-ducativa Aragonesa. Manual de Administración. Bitácora Plataforma e-ducativa Aragonesa Manual de Administración Bitácora ÍNDICE Acceso a la administración de la Bitácora...3 Interfaz Gráfica...3 Publicaciones...4 Cómo Agregar una Publicación...4 Cómo Modificar

Más detalles

Curso Diseño Web con Software libre, VNU

Curso Diseño Web con Software libre, VNU 1. - QUE ES VNU? NVU (se pronuncia N-view, por "new view") es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source, o sea que cualquiera está autorizado para bajarlo sin

Más detalles

... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4

... Formas alternativas de escribir un texto. Columnas. anfora CAPÍTULO 4 CAPÍTULO 4. Formas alternativas de escribir un texto........ Columnas Para fijar columnas se posiciona el Punto de Inserción donde se desee que comiencen las columnas, o bien se selecciona el texto que

Más detalles

Prof. Luis Miguel Oliveros - Computación 3er Año

Prof. Luis Miguel Oliveros - Computación 3er Año NVU / KompoZer NVU es un editor de páginas web libre y gratuito desarrollado bajo la modalidad Open Source. Esta alternativa gratuita trae nuevas herramientas para facilitar el trabajo, convirtiéndola

Más detalles

Diseño de páginas web 2011

Diseño de páginas web 2011 Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero

Más detalles

Práctica 3: Introducción a Word

Práctica 3: Introducción a Word Departament d Enginyeria i Ciència dels Computadors Práctica 3: Introducción a Word B12. Informática I. Curso 2001/2002 Profesores: Julio Pacheco Juanjo Murgui Raul Montoliu Mª Carmen Ortiz Octubre 2001

Más detalles

Trabajar con diapositivas

Trabajar con diapositivas Trabajar con diapositivas INFORMÁTICA 4º ESO POWERPOINT Una vez creada una presentación podemos modificarla insertando, eliminando, copiando diapositivas, Insertar una nueva diapositiva.- Para insertar

Más detalles

Operación Microsoft Access 97

Operación Microsoft Access 97 Trabajar con Controles Características de los controles Un control es un objeto gráfico, como por ejemplo un cuadro de texto, un botón de comando o un rectángulo que se coloca en un formulario o informe

Más detalles

Crear una página Html con el Editor.

Crear una página Html con el Editor. Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante

Más detalles

MANUAL DE USO DE LA APLICACIÓN

MANUAL DE USO DE LA APLICACIÓN MANUAL DE USO DE LA APLICACIÓN ÍNDICE 1. Acceso a la aplicación 2. Definición de funciones 3. Plantillas 4. Cómo crear una nueva encuesta 5. Cómo enviar una encuesta 6. Cómo copiar una encuesta 7. Cómo

Más detalles

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas.

3_formato I. NOTA: al pegar unas celdas sobre otras no vacías, se borrará el contenido de estas últimas. 3. Luego se seleccionan las celdas donde se quiere que se sitúen las celdas cortadas. No hace falta seleccionar el rango completo sobre el que se va a pegar, ya que si se selecciona una única celda, Calc

Más detalles

Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice

Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:

Más detalles

2_trabajar con calc I

2_trabajar con calc I Al igual que en las Tablas vistas en el procesador de texto, la interseccción de una columna y una fila se denomina Celda. Dentro de una celda, podemos encontrar diferentes tipos de datos: textos, números,

Más detalles

COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS.

COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. 2011 2012 COMO CREAR UNA PÁGINA WEB 3-VÍNCULOS. IMÁGENES. FORMULARIOS. WWW.FAUBELL.COM vicente@faubell.com VÍNCULOS: Antes de proseguir hemos de repasar el concepto vínculo ya que vamos a utilizarlo mucho

Más detalles

Plantilla de texto plano

Plantilla de texto plano Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en

Más detalles

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:

El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando

Más detalles

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn

MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn MANUAL DE USUARIO CMS- PLONE www.trabajo.gob.hn Tegucigalpa M. D. C., Junio de 2009 Que es un CMS Un sistema de administración de contenido (CMS por sus siglas en ingles) es un programa para organizar

Más detalles

Operación de Microsoft Excel

Operación de Microsoft Excel Representación gráfica de datos Generalidades Excel puede crear gráficos a partir de datos previamente seleccionados en una hoja de cálculo. El usuario puede incrustar un gráfico en una hoja de cálculo,

Más detalles

Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE

Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE . Marta Soler Tel: 902 33 12 12 Fax: 93 352 36 14 http://www.interdigital.es acc@interdigital.es TUTORIAL DEL GESTOR DE CONTENIDOS DOTNETNUKE El entorno de trabajo La página tiene como base una plantilla

Más detalles

Tema 8. Creación y diseño de un sitio web

Tema 8. Creación y diseño de un sitio web 1. Interfaz de Dreamweaver MX El entorno de trabajo de Dreamweaver está compuesto por una serie de ventanas, paneles y otros elementos configurables por el usuario. En la Figura 1 podemos ver una posible

Más detalles

Creando una webquests

Creando una webquests Creando una webquests 1. LO PRIMERO EL PROGRAMA Para crear paginas web necesitamos el software apropiado. Hay muchas formas y programas para hacerlo, pero por su facilidad de uso y por ser software libre

Más detalles

TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE)

TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE) 1. Introducción. TEMA 20 EXP. WINDOWS PROC. DE TEXTOS (1ª PARTE) El Explorador es una herramienta indispensable en un Sistema Operativo ya que con ella se puede organizar y controlar los contenidos (archivos

Más detalles

TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS

TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS TEMA 2 WINDOWS XP Lección 4 BLOC DE NOTAS 1) EL PEQUEÑO EDITOR El Bloc de notas de Windows XP es un básico editor de texto con el que podemos escribir anotaciones, de hasta 1024 caracteres por línea y

Más detalles

Manual de NVU Capítulo 5: Las hojas de estilo

Manual de NVU Capítulo 5: Las hojas de estilo Manual de NVU Capítulo 5: Las hojas de estilo Pág. 1 Manual de NVU Capítulo 5: Las hojas de estilo Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de

Más detalles

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página

Nos identificamos con nuestro nombre de usuario y la contraseña y llegamos a esta página ADMINISTRACIÓN DEL SITIO WEB Todos los jefes de Departamento, coordinadores de proyectos y directivos del Centro somos administradores de la página web. Cada uno tendrá la responsabilidad de administrar

Más detalles

CÓMO CREAR UNA WEBQUEST Paso a Paso

CÓMO CREAR UNA WEBQUEST Paso a Paso CÓMO CREAR UNA WEBQUEST Paso a Paso 1.- Lo primero que tenemos que hacer es acceder a la página del instituto usando Mozilla (no usar el navegador Firefox que puede dar problemas) URL: www.ieseltablero.org

Más detalles

UNIDAD I PROCESADOR DE TEXTOS

UNIDAD I PROCESADOR DE TEXTOS UNIDAD I PROCESADOR DE TEXTOS 1. Entorno de Microsoft Word 2007 Lic. Silvia Mireya Hernández Hermosillo 1.1 INTRODUCCIÓN 1.1.1 Generalidades de Microsoft Word 2007 Microsoft Word 2007 es un procesador

Más detalles

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web.

IMÁGENES. Existen una serie de formatos de imagen más recomendables que otros para ser introducidos en una página web. IMÁGENES Todas las páginas web acostumbran a tener un cierto número de imágenes, que permiten mejorar su apariencia, o dotarla de una mayor información visual. Existen una serie de formatos de imagen más

Más detalles

COREL DRAW PARTE II. TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS

COREL DRAW PARTE II. TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS CREAR TABLAS COREL DRAW PARTE II TERCER y CUARTO BIMESTRE 1 B - 2 AÑO A- B TABLAS Para crear una tabla, debes seleccionar la herramienta Tabla desde la barra de herramientas, completa los valores en el

Más detalles

CURSO DE INTRODUCCIÓN AL WORD

CURSO DE INTRODUCCIÓN AL WORD CURSO DE INTRODUCCIÓN AL WORD 1. INTRODUCCIÓN 2. PRIMER DOCUMENTO 3. UN EJEMPLO 4. TABLAS 5. FORMATO DE PAGINAS Y COLUMNAS 6. ORTOGRAFÍA, GRAMÁTICA Y SINÓNIMOS 7. WORDART 8. IMPRIMIR UN DOCUMENTO INTRODUCCIÓN

Más detalles

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010

Arrancar Word. Clic en inicio Clic en Microsoft Word 2010 Word 2007 Arrancar Word Clic en inicio Clic en Microsoft Word 2010 Nuestro primer documento Tarea 1 Escribiremos nuestros datos: Busca 1º Cambiamos formato de guardado: 3º 2º 4º Guardar un documento Dónde

Más detalles

La visualización de la ventana de Word tiene las siguientes partes:

La visualización de la ventana de Word tiene las siguientes partes: TRABAJANDO CON WORD Ventanas de Word La visualización de la ventana de Word tiene las siguientes partes: Visualización de página Barra de título, Barra de Menús, donde se indica el nombre de la aplicación

Más detalles

GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD

GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD GESTIÓN DOCUMENTAL PARA EL SISTEMA DE CALIDAD Manual de usuario 1 - ÍNDICE 1 - ÍNDICE... 2 2 - INTRODUCCIÓN... 3 3 - SELECCIÓN CARPETA TRABAJO... 4 3.1 CÓMO CAMBIAR DE EMPRESA O DE CARPETA DE TRABAJO?...

Más detalles

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6

TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6 Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales

Más detalles

MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1

MICROSOFT WORD 2007 AVANZADO. Unidad Didáctica Nº 1 MICROSOFT WORD 2007 AVANZADO Unidad Didáctica Nº 1 I Tablas A) Explicación conceptual y de uso de una tabla B) Creación de tablas C) Trabajo con tablas D) Formato de las tablas Ejercicio de Repaso Portal

Más detalles

Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS

Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Colegio de Ingenieros de Caminos, Canales y Puertos. Manual de Gestión de correo electrónico y SMS Versión 2.0 3/05/2010 Manual de Gestión de correo electrónico y SMS (v 2.0) 1 GESTOR DE CORREO ELECTRÓNICO

Más detalles

Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS

Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS Centro de Profesorado Luisa Revuelta (Córdoba) TEMA 6 TABLAS Y GRÁFICOS EN IMPRESS Antes que nada tenemos que hablar de la distinción entre tabla y hoja de cálculo. Una tabla es una estructura formada

Más detalles

COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER

COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER 2011 2012 COMO CREAR UNA PÁGINA WEB 2-INTRODUCCIÓN A DREAWEAVER WWW.FAUBELL.COM vicente@faubell.com Hasta ahora hemos visto una pequeña introducción a la creación de las páginas web. No te preocupes por

Más detalles

Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda:

Apuntes de ACCESS. Apuntes de Access. Campos de Búsqueda: Apuntes de ACCESS Campos de Búsqueda: Los campos de búsqueda permiten seleccionar el valor de un campo de una lista desplegable en lugar de tener que escribirlos. El usuario sólo tiene que elegir un valor

Más detalles

UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS

UNIVERSIDAD DE MEDELLÍN NUEVO PORTAL WEB MANUAL DE USUARIO GESTOR DE CONTENIDOS UNIVERSIDAD DE MEDELLÍN MANUAL DE USUARIO GESTOR DE CONTENIDOS NUEVO PORTAL WEB TABLA DE CONTENIDO Tabla de Contenido 2 Consideraciones Iniciales 3 Ingreso al Sistema 4 Opciones de Gestor de contenidos

Más detalles

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO

Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO Nueva Web de los SCTs http://www.sct.uniovi.es MANUAL DEL USUARIO 1 ÍNDICE DE CONTENIDOS 1 Acceso a la edición de contenidos...3 1.1 Noticias...3 1.2 Utilización del editor de contenidos...6 1. Formato...6

Más detalles

Programa diseñado y creado por 2014 - Art-Tronic Promotora Audiovisual, S.L.

Programa diseñado y creado por 2014 - Art-Tronic Promotora Audiovisual, S.L. Manual de Usuario Programa diseñado y creado por Contenido 1. Acceso al programa... 3 2. Opciones del programa... 3 3. Inicio... 4 4. Empresa... 4 4.2. Impuestos... 5 4.3. Series de facturación... 5 4.4.

Más detalles

100 EJERCICIOS DE MICROSOFT WORD

100 EJERCICIOS DE MICROSOFT WORD 100 EJERCICIOS DE MICROSOFT WORD 1. como se activan y se desactivan las barras de herramientas Clic derecho en la Barra de Menú Clic en el nombre de la barra que desee activar o desactivar. Clic en el

Más detalles

Creando un Sitio Web personal.

Creando un Sitio Web personal. Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.

Más detalles

Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas.

Para crear formularios se utiliza la barra de herramientas Formulario, que se activa a través del comando Ver barra de herramientas. Formularios TEMA: FORMULARIOS. 1. INTRODUCCIÓN. 2. CREACIÓN DE FORMULARIOS. 3. INTRODUCIR DATOS EN UN FORMULARIO. 4. MODIFICAR UN FORMULARIO 5. MANERAS DE GUARDAR UN FORMULARIO. 6. IMPRIMIR FORMULARIOS.

Más detalles

Presentaciones. Con el estudio de esta Unidad pretendemos alcanzar los siguientes objetivos:

Presentaciones. Con el estudio de esta Unidad pretendemos alcanzar los siguientes objetivos: UNIDAD 8 Presentaciones Reunión. (ITE. Banco de imágenes) as presentaciones son documentos formados por una sucesión de páginas, llamadas diapositivas, que transmiten información estructurada de manera

Más detalles

Plantillas Office. Manual de usuario Versión 1.1

Plantillas Office. Manual de usuario Versión 1.1 Manual de usuario Para comprender y seguir este manual es necesario: Disponer del fichero lasolucion50.exe Asegurarse de trabajar con la versión 5.0.0.7 o superior. Para comprobar que versión esta utilizando

Más detalles

Guía N 1: Fundamentos básicos(i)

Guía N 1: Fundamentos básicos(i) 1 Guía N 1: Fundamentos básicos(i) Objetivos Generales: Ver una breve descripción de las capacidades más comunes de Excel Objetivos específicos: Descripción de los elementos de un libro: Hojas, iconos,

Más detalles

PANEL DE CONTROL (Zona de Administración) MANUAL DE USO Por conexanet. Revisión 1.1 Fecha 2006-08

PANEL DE CONTROL (Zona de Administración) MANUAL DE USO Por conexanet. Revisión 1.1 Fecha 2006-08 PANEL DE CONTROL (Zona de Administración) MANUAL DE USO Por conexanet Revisión 1.1 Fecha 2006-08 Índice 1. Acceder 2. Menú 3. Gestión Básica 3.1 Añadir 3.2 Editar 3.3 Eliminar 3.4 Eliminación de registros

Más detalles

Microsoft Access proporciona dos métodos para crear una Base de datos.

Microsoft Access proporciona dos métodos para crear una Base de datos. Operaciones básicas con Base de datos Crear una Base de datos Microsoft Access proporciona dos métodos para crear una Base de datos. Se puede crear una base de datos en blanco y agregarle más tarde las

Más detalles

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual.

Paso 1 de 13. Paso 2 de 13. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Guía de aprendizaje de Flash CS5 Tutorial 3. Creación de un logotipo textual. Paso 1 de 13 En este tutorial vamos a crear un logotipo basado en un texto al que aplicaremos algunos efectos utilizando filtros

Más detalles

Roberto Quejido Cañamero

Roberto Quejido Cañamero Crear un documento de texto con todas las preguntas y respuestas del tema. Tiene que aparecer en él todos los contenidos del tema. 1. Explica qué son los modos de presentación en Writer, cuáles hay y cómo

Más detalles

CURSOS PRÁCTICOS SEDEN. Maquetación de un trabajo en Word SEDEN

CURSOS PRÁCTICOS SEDEN. Maquetación de un trabajo en Word SEDEN 2 CURSOS PRÁCTICOS SEDEN Maquetación de un trabajo en Word SEDEN 2 Maquetación de un trabajo en Word Vamos a explicar las distintas herramientas que tiene Word para maquetar cualquier trabajo que realicemos.

Más detalles

PLANTILLAS DE DOCUMENTOS EN WORD 2007

PLANTILLAS DE DOCUMENTOS EN WORD 2007 1 PLANTILLAS DE DOCUMENTOS EN WORD 2007 Introducción Una plantilla es un modelo o patrón para crear nuevos documentos. En una plantilla se guarda internamente el formato utilizado, es decir, el estilo

Más detalles

Editor de textos para Drupal: TinyMCE

Editor de textos para Drupal: TinyMCE Editor de textos para Drupal: TinyMCE Cuando vayamos a editar el texto de una página, normalmente nos encontraremos con un editor de textos, similar a Word, pero para la web. Donde podamos usarlo encontraremos

Más detalles

Configuración de un sitio local

Configuración de un sitio local Configuración de un sitio local Un sitio web es un conjunto de archivos y carpetas, relacionados entre sí, con un diseño similar o un objetivo común. Es necesario diseñar y planificar el sitio web antes

Más detalles

Plantilla de texto plano

Plantilla de texto plano Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en

Más detalles

Manual de NVU Capítulo 4: Los enlaces

Manual de NVU Capítulo 4: Los enlaces Manual de NVU Capítulo 4: Los enlaces Pág. 1 Manual de NVU Capítulo 4: Los enlaces Reconocimiento-NoComercial-CompartirIgual 2.5 España Realizado por: Julio Ruiz Palmero (Universidad de Málaga) julioruiz@uma.es

Más detalles

STRATO LivePages Inicio rápido

STRATO LivePages Inicio rápido STRATO LivePages Inicio rápido LivePages es la práctica herramienta de creación de páginas web de STRATO. En pocos pasos podrá crear su propia página web y publicarla en Internet sin necesidad de conocimientos

Más detalles

Tutorial de Dreamweaver MX 2004

Tutorial de Dreamweaver MX 2004 1 Tutorial de Dreamweaver MX 2004 Dreamweaver MX 2004 es una aplicación para el diseño de espacios web que incorpora múltiples posibilidades de edición. 1. Configurar un sitio local El método más común

Más detalles

UF0513 Gestión auxiliar de archivo en soporte convencional o informático

UF0513 Gestión auxiliar de archivo en soporte convencional o informático UF0513 Gestión auxiliar de archivo en soporte convencional o informático Tema 1. Sistemas operativos habituales Tema 2. Archivo y clasificación de documentación administrativa Tema 3. Base de datos Tema

Más detalles

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6

Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios

Más detalles

9. Composer: Bugs y consejos.

9. Composer: Bugs y consejos. 9. Composer: Bugs y consejos. Composer: bugs y consejos 9.1. Sobre la barra de herramientas de formato Elegir color para remarcar texto En la actualidad existe un lenguaje complementario a las etiquetas

Más detalles

10. El entorno de publicación web (Publiweb)

10. El entorno de publicación web (Publiweb) 10. El entorno de publicación web (Publiweb) 10.1. Introducción El entorno de publicación Web es una herramienta que permite la gestión de nuestras páginas Web de una forma visual. Algunos ejemplos de

Más detalles

Páginas multimedia Dashboard www.webardora.net

Páginas multimedia Dashboard www.webardora.net En este tipo de página web podremos crear una tabla con una serie de celdas independientes (las celdas pueden combinarse) susceptibles de incluir diversos tipos de contenido inicial y asociar diversas

Más detalles

POWER POINT. Iniciar PowerPoint

POWER POINT. Iniciar PowerPoint POWER POINT Power Point es la herramienta de Microsoft Office para crear presentaciones que permiten comunicar información e ideas de forma visual y atractiva. Iniciar PowerPoint Coloque el cursor y dé

Más detalles

Formularios. Formularios Diapositiva 1

Formularios. Formularios Diapositiva 1 Formularios Crear un formulario utilizando el Asistente para formularios Modificación en vista Diseño Adición de Controles a un Formulario Adición de un Subformulario a un formulario Formularios Diapositiva

Más detalles

Word XP (Continuación) Salto de página vs. Salto de Sección

Word XP (Continuación) Salto de página vs. Salto de Sección Word XP (Continuación) Salto de página vs. Salto de Sección 1 Salto. Salto de página Cuando se llena una página con texto o gráficos, Microsoft Word inserta un salto de página automático y comienza una

Más detalles

4.- Composer: Formato de párrafos, títulos y listas

4.- Composer: Formato de párrafos, títulos y listas 4.- Composer: Formato de párrafos, títulos y listas 4.1 Antes de empezar Vamos a configurar el composer antes de empezar a trabajar con él, para ello nos vamos al menú Editar/Preferencias y seleccionamos

Más detalles

La ventana de Microsoft Excel

La ventana de Microsoft Excel Actividad N 1 Conceptos básicos de Planilla de Cálculo La ventana del Microsoft Excel y sus partes. Movimiento del cursor. Tipos de datos. Metodología de trabajo con planillas. La ventana de Microsoft

Más detalles

Oficina de Tecnologías de la Información y Comunicaciones MANUAL DE USUARIO. Diseño básico para elaboración de banners en Macromedia Fireworks 8

Oficina de Tecnologías de la Información y Comunicaciones MANUAL DE USUARIO. Diseño básico para elaboración de banners en Macromedia Fireworks 8 MANUAL DE USUARIO Diseño básico para elaboración de banners en Macromedia Fireworks 8 Pág. 1 de 13 ÍNDICE 1. INTRODUCCION... 3 2. EL ESPACIO DE TRABAJO DE FIREWORKS... 3 3. CREAR UN NUEVO DOCUMENTO...

Más detalles

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007

MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 MINI MANUAL PARA CREAR FORMULARIOS CON PHP Marzo 2007 Servicio de Informática y Comunicaciones Para poder diseñar un formulario y que éste nos envíe los resultados a nuestro correo electrónico, necesitamos

Más detalles

PowerPoint 2010 Modificar el diseño de las diapositivas

PowerPoint 2010 Modificar el diseño de las diapositivas PowerPoint 2010 Modificar el diseño de las diapositivas Contenido CONTENIDO... 1 MODIFICAR EL DISEÑO DE LAS DIAPOSITIVAS... 2 DISEÑO DE DIAPOSITIVAS EN POWERPOINT WEB APP... 13 1 Modificar el diseño de

Más detalles

ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas.

ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas. ESTÁNDAR DESEMPEÑO BÁSICO Recopila información, la organiza y la procesa de forma adecuada, utilizando herramientas tecnológicas. Sala de sistemas, Video proyector, Guías RECURSOS ACTIVIDADES PEDAGÓGICAS

Más detalles

MOODLE 1.9 EDITOR DE TEXTO HTML

MOODLE 1.9 EDITOR DE TEXTO HTML MOODLE 1.9 EDITOR DE TEXTO HTML Unitat de Suport Tecnicopedagògic - CAMPUS EXTENS Universitat de les Illes Balears. Edifici Aulari. Ctra. de Valldemossa Km. 7.5. 07122 Palma (Illes Balears) Primera edición:

Más detalles

Configuración Y Diseño Del Correo Electrónico Y Web Personal De IESA

Configuración Y Diseño Del Correo Electrónico Y Web Personal De IESA Configuración Y Diseño Del Correo Electrónico Y Web Personal De IESA Accedemos a nuestro dominio contratado con IESA. Entramos en la administración. El acceso se encentra en la parte inferior de la página

Más detalles

Guía de Aprendizaje No. 1

Guía de Aprendizaje No. 1 MICROSOFT WORD Fundamentos básicos, ejecutar Word, su ventana y sus barras de herramientas Objetivos de la Guía de Aprendizaje No. 1 Obtener fundamentos básicos sobre Procesador de Texto Microsoft Word

Más detalles

Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor...

Módulo I - Word. Iniciar Word... 2. Finalizar Word... 3. Definición de elementos de pantalla... 4. Escribir texto en un documento... 5. El cursor... Módulo I - Word Índice Iniciar Word... 2 Finalizar Word... 3 Definición de elementos de pantalla... 4 Escribir texto en un documento... 5 El cursor... 5 Control de párrafos... 5 Nuevos párrafos... 5 Abrir

Más detalles

Wikis Trabajando en una Wiki

Wikis Trabajando en una Wiki Wikis Trabajando en una Wiki Contenido CONTENIDO... 1 VENTANA PRINCIPAL DEL WIKI... 2 AGREGAR UNA NUEVA PÁGINA... 4 EDICIÓN DE UNA PÁGINA... 5 DAR FORMATO A LA PÁGINA... 7 DESHACER Y REHACER ACCIONES...

Más detalles

Una guía rápida para. Crear Boletines de Noticias

Una guía rápida para. Crear Boletines de Noticias Una guía rápida para Crear Boletines de Noticias En esta guía Aprende a crear mensajes atractivos, con lenguaje HTML y con texto sin formato para involucrar a tus contactos. Conoce sus preferencias para

Más detalles

Resumen de fotos editadas por alumnos/as del 3º ciclo de Educación Primaria. / 12

Resumen de fotos editadas por alumnos/as del 3º ciclo de Educación Primaria. / 12 ÍNDICE DE CONTENIDOS Índice de contenidos. / 2 Sesión de fotografía. / 3 Creación de una carpeta de trabajo. / 3 Abrir Digital Imagen 2006. / 3 Área de trabajo. / 4 Abrir imágenes para editarlas. / 5 Recortar

Más detalles

CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP

CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP CAPÍTULO 4. EL EXPLORADOR DE WINDOWS XP Características del Explorador de Windows El Explorador de Windows es una de las aplicaciones más importantes con las que cuenta Windows. Es una herramienta indispensable

Más detalles

CREACION DE PÁGINAS WEB

CREACION DE PÁGINAS WEB CREACION DE PÁGINAS WEB CREAR LO QUE LLAMAREMOS SITIO WEB LOCAL En el escritorio del ordenador crear una carpeta llamada sitio web que sea donde guardes todos los archivos Dentro de ella guardaremos todos

Más detalles

Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder

Ministerio de Educación. Base de datos en la Enseñanza. Open Office. Módulo 5: Report Builder Ministerio de Educación Base de datos en la Enseñanza. Open Office Módulo 5: Report Builder Instituto de Tecnologías Educativas 2011 Informes con Oracle Report Builder En su configuración original, OpenOffice

Más detalles

5. Composer: Publicar sus páginas en la web

5. Composer: Publicar sus páginas en la web 5. Composer: Publicar sus páginas en la web Si nuestras páginas existen únicamente en el disco duro local, sólo nosotros podremos navegar por ellas, pero nadie más podrá hacerlo. Composer nos permite publicarlas

Más detalles

7. Composer: Imágenes

7. Composer: Imágenes 7. Composer: Imágenes Para insertar una imagen en Composer podemos pulsar sobre el botón imagen de la barra de herramientas o bien a través de la barra de menú en Insertar- imagen. Cuando hemos insertado

Más detalles

Crear una presentación

Crear una presentación Crear una presentación INFORMÁTICA 4º ESO POWERPOINT Podemos crear una presentación con PowerPoint: Con el Asistente A través del asistente que nos guiará a lo largo de todo el proceso. A través de alguna

Más detalles

Apuntes para hacer páginas Web con FrontPage

Apuntes para hacer páginas Web con FrontPage 1 ASIGNATURA: USOS MATEMÁTICOS DE INTERNET PARA SECUNDARIA Y BACHILLERATO CURSO: Cursos y acciones de postgrado, 2004-2005 PROFESORA: Inés M. Gómez-Chacón CARÁCTER/CRÉDITOS: 3 DEPARTAMENTO: ÁLGEBRA FACULTAD

Más detalles

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape

Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Herramientas Informáticas para la Documentación Práctica 1. Introducción al navegador Netscape Introducción y objetivos De modo muy resumido Internet es una red que interconecta redes de ordenadores. Conectándose

Más detalles

El Power Point es un programa que permite hacer presentaciones y es usado ampliamente en los ámbitos de negocios y educacionales.

El Power Point es un programa que permite hacer presentaciones y es usado ampliamente en los ámbitos de negocios y educacionales. TUTORIAL PARA HACER PRESENTACIONES EN POWER POINT Guía del taller de herramientas de presentación 1) Qué es un Power Point? El Power Point es un programa que permite hacer presentaciones y es usado ampliamente

Más detalles

Guía para la Automatización de Documentos en. Microsoft Word

Guía para la Automatización de Documentos en. Microsoft Word UNIVERSIDAD SAN CARLOS DE GUATEMALA CENTRO UNIVERSITARIO DE SAN MARCOS USAC-CUSAM Guía para la Automatización de Documentos en Microsoft Word ID Y ENSEÑAD A TODOS 2015 PRESENTACIÓN El Instituto de Investigaciones

Más detalles

EL PROGRAMA DE PRESENTACIONES IMPRESS (I)

EL PROGRAMA DE PRESENTACIONES IMPRESS (I) Bollullos del Cdo. (Huelva) Centro TIC/DIG EL PROGRAMA DE PRESENTACIONES IMPRESS (I) Introducción Básicamente Impress es un programa de presentaciones proyectadas a través de diapositivas (pantallas completas)

Más detalles

CÓMO CREAR NUESTRO CATÁLOGO

CÓMO CREAR NUESTRO CATÁLOGO CÓMO CREAR NUESTRO CATÁLOGO Mediante la aplicación (http://www.prensasoft.com/programas/conline) podemos crear nuestros propios catálogos. Para crear un catálogo necesitamos: - Varios productos que mostrar,

Más detalles

Laboratorio 6. Creación de sitios Web - Dreamweaver

Laboratorio 6. Creación de sitios Web - Dreamweaver UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios

Más detalles

Dinos qué tal lo estamos haciendo

Dinos qué tal lo estamos haciendo Acerca de los dibujos en Google Docs Google Docs te permite crear, compartir y modificar dibujos online fácilmente. Estas son algunas de las cosas que puedes hacer con dibujos en Google Docs: modificar

Más detalles