Ejercicio paso a paso Unidad 7. Insertar y rellenar tablas.

Transcripción

1 UNIDAD 7 Ejercicio paso a paso Unidad 7. Insertar y rellenar tablas. a.- Buscar el material. 1. Arranca FrontPage si no lo habías hecho ya. 2. Si estuvimos trabajando con el sitio web webpersonal, este se abre automáticamente con FrontPage. Para comprobarlo, haz clic en Carpetas. Si aparece la estructura de carpetas y archivos, es que se ha abierto con éxito. Salta al paso Si no se ha abierto, haz clic en Archivo - Abrir web. Busca la carpeta de la webpersonal, y haz clic en Aceptar. Para comprobar que se ha abierto con éxito, haz clic en Carpetas. Debería aparecer la estructura de carpetas y archivos. 4. Abre el archivo acerca.htm. b.- Introducir tablas. Ahora vamos a crear una tabla. Si observas las dos imágenes del gato que insertamos en ejercicios anteriores, sería mucho más elegante colocar una al lado de otra, pero separadas por un espacio. Para ello usaremos una tabla. La tabla no tendrá borde, por lo que será invisible y las dos imágenes "flotarán" en la página. 5. Deja un espacio entre las imágenes y el texto del párrafo. Si es necesario, pulsa INTRO. 6. Ahora coloca el punto de inserción en ese espacio y haz clic en Insertar tabla. Asegúrate de crear una tabla de una fila y dos columnas: Aparece la tabla, que por defecto tiene borde y ocupa todo el ancho de la ventana. Vamos a cambiar esto. 7. Haz clic con el botón derecho del ratón sobre la tabla. En el menú emergente haz clic en la opción Propiedades de Tabla. 8. En Especificar ancho cambia el 100 por 50. Para que ocupe la mitad de la pantalla del visitante. 9. En Alineación cambia Predeterminado por Centrar. Para que aparezca centrada en la pantalla. 10. En el apartado Bordes cambia 1 por 0. Para quitar el borde. 11. Pulsa en Aceptar. Ahora la tabla aparece con un borde punteado (invisible para el usuario) y se ha colocado en medio de la ventana. CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 38/78

2 11. Ahora arrastra las imágenes a las celdas de la tabla para colocarlas en su interior. Sólo has de pinchar en la primera imagen y, sin soltar, arrastra el ratón hasta colocarlo en la celda de la izquierda. Suelta el botón izquierdo del ratón. 12. Repite el paso anterior con la otra imagen en la celda de la derecha. 13. Guarda el archivo y ciérralo. Ejercicio paso a paso Unidad 7. Insertar filas a.- Insertar filas 1. Abre el sitio web WebPersonal. 2. Abre el archivo acerca.htm. En este ejercicio iremos colocando los datos del currículum en una tabla para que esos datos queden mejor presentados en la página. Empezaremos por crear una tabla en la que colocaremos la cabecera (CURRICULUM VITAE), el apartado Datos personales y el apartado Experiencia. Por lo tanto necesitamos una tabla de tres filas y una columna. 3. Coloca el punto de inserción la línea en blanco delante del currículum. 4. Haz clic en Insertar tabla de la barra de herramientas. 5. Crea una tabla de tres filas y una columna (3 por 1 Tabla) 6. Selecciona el texto Currículum Vitae 7. Córtalo con Ctrl + X o el icono Cortar de la barra de herramientas. 8. Posiciona el cursor en la primera fila de la tabla. 9. Pega el texto que hemos cortado con Ctrl + V o con el icono Pegar de la barra de herramientas. 10. Repite los pasos 6, 7, 8, 9 para el apartado Datos personales (corta el título del apartado y el texto completo) y para el apartado Experiencia. Ahora añadiremos el apartado Formación, insertándolo delante de Experiencia para practicar el insertar filas entre otras ya creadas. Nota: A continuación en los pasos 11 y 12 explicamos 2 formas de realizar lo mismo, estudialas y realiza la que más te guste. 11. Posiciona el cursor en la fila Experiencia. 12. Haz clic en el botón. Si no tienes abierta la barra de herramientas Tablas, ábrela con la opión Ver - Barras de herramientas - Tablas de la barra de menús. Nota: Puedes realizar lo mismo que en los pasos 11 y 12 de otra manera: Haz clic con el botón derecho del ratón sobre la fila Experiencia y elige la opción CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 39/78

3 insertar filas del menú contextual. Aparecerá una nueva fila delante de la fila Experiencia. 13. Rellena la nueva fila con el apartado Formación, como acabamos de hacer con los demás apartados. Por último añadiremos el apartado Aficiones para practicar el insertar una fila al final de la tabla. 14. Posiciónate en la última fila de la tabla. 15. Selecciona de la barra de menús la opción Tabla - Insertar - Filas o columnas Marca las opciones Fila y Por debajo de la selección. 17. Pulsa en Aceptar. Aparecerá automáticamente una nueva fila al final de la tabla. Nota: Los pasos se pueden resumir situándote en la última fila de la tabla y presionando la tecla de Tabulador. 18. Rellena la nueva fila con el apartado Aficiones. 19. Ciérra la página guardando los cambios. Ejercicio paso a paso Unidad 7. Dar formato en tablas. a.- Dar formato a las celdas. 1. Abre el archivo acerca.htm y posiciónate en el currículum. Aparece la tabla, que por defecto tiene borde y ocupa todo el ancho de la ventana. Vamos a cambiar esto. 2. Haz clic con el botón derecho del ratón sobre la tabla. En el menú emergente haz clic en la opción Propiedades de Tabla. 3. En Borde cambia 1 por 0. Para quitar el borde 4. En Especificar ancho cambia el 100 por 50. Para que ocupe la mitad de la pantalla del visitante. 5. Pulsa en Aceptar y observa los cambios. 6. Vuelve a abrir el cuadro de diálogo Propiedades de tabla y en Alineación cambia Predeterminado por Centrar. Para que aparezca centrada en la pantalla. 7. Pulsa en Aceptar y observa los cambios. Ahora la tabla aparece con un borde punteado (invisible para el usuario) y se ha colocado en medio de la ventana. Vamos a ponerle un fondo más oscuro a la primera fila 8. Coloca el puntero del ratón a la izquierda de la primera fila y cuando toma la forma de una flecha negra horizontal haz clic. La fila aparecerá resaltada, la hemos seleccionado. 9. Haz clic con el botón derecho del ratón sobre la fila y elige la opción Propiedades de celda... del menú contextual. CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 40/78

4 10. En el apartado Fondo, despliega el cuadro Color: y elige el color que quieras. 11. Pulsa en Aceptar. Observa los cambios. Dependiendo del color de fondo que selecciones, deberás cambiar también el color de la fuente como vimos en la unidad de Formato. Ahora vamos a dejar el texto en el tipo de letra Verdana y los títulos de cada apartado los pondremos en negrita y en cursiva. Ejemplo: Datos Personales: 12. Selecciona las filas de la tabla correspondientes a los apartados del currículum. Selecciona la primera y sin soltar el botón del ratón arrástralo hasta la última fila. Aparecerán las filas resaltadas. 13. Elige el tipo de letra Verdana de la barra de Formato. Observa los cambios. b.-autoformato de tabla. Ahora vamos a cambiar el formato de la tabla del Currículum Vitae, le asignaremos un formato de los que FrontPage tiene predefinidos. Para ello, necesitamos usar el autoformato de tablas. 1. Abre el archivo acerca.htm del sitio web WebPersonal. 2. Haz clic en cualquier parte de la tabla del currículum. 3. Haz clic en Autoformato de tablas. 4. Haz clic en los distintos formatos hasta encontrar el que más te guste. 5. Pulsa en el botón Aceptar para ver los cambios. En cualquier momento podemos cambiar el formato de la tabla eligiendo otro en el menú. 7. Vuelve a abrir el cuadro de diálogo Autoformato de tablas y elige el formato Moderno, y deja las opciones que aparecen por defecto. 8. Cierra el archivo guardando los cambios. CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 41/78

5 Ejercicios Unidad 7. Introducir tablas. Si no tienes abierto Frontpage2003, ábrelo para realizar los ejercicios planteados a continuación. WebPersonal. Ejercicio 1: Introducir tablas. Si recordamos ejercicios anteriores, en el archivo aficiones.htm insertamos unas imágenes cuya colocación era bastante caótica, al hacer que la imagen pudiese tener texto alrededor. Entonces lo resolvíamos dejando espacio entre imagen e imagen. La forma elegante y más eficiente de arreglar esto es, naturalmente, con una tabla. Así que vamos a crear una tabla, de 3 filas y dos columnas: una fila para cada país. 1. Abre el sitio web WebPersonal. 2. Abre el archivo aficiones.htm. 3. Coloca las imágenes y textos de los países en una tabla. 4. Guarda la página y ciérrala. WebProfesional. Ejercicio 2: Introducir tablas. 1. Abre el sitio web WebProfesional. 2. Copia el archivo servicios.htm de la carpeta ejercicios\profesional a la carpeta servicios del sitio. 3. Importa los archivos empresa_despegue.jpg, logo-mov.jpg, inet.gif y soft.gif de la carpeta ejercicios\profesional a la carpeta servicios\imagenes del sitio. 4. Abre servicios.htm y corrige los fallos en las imágenes. 5. Haz que la imagen empresa_despegue.jpg aparezca a la izquierda de la pantalla y el resto del texto (excepto el pie de página) a su derecha. 6. Guarda y cierra el archivo. 7. Cierra el sitio web. CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 42/78

6 Ayuda Ejercicios Unidad 7. Introducir tablas. WebPersonal. Ejercicio 1: Introducir tablas. Apartado 3. Coloca las imágenes y textos de los países en una tabla. 3.a Colocamos el cursor delante del texto 'LONDRES' y pulsa Intro para añadir una línea. 3.b Hacemos clic en el botón Insertar tabla, que está situado en la barra de herramientas estándar. Sin soltar, arrastramos hasta conseguir 3 por 2 (tres filas y dos columnas). 3.c Seleccionamos el texto 'LONDRES' y lo arrastramos dentro de la primera columna de la primera fila. 3.d Seleccionamos la imagen de Londres y la arrastramos dentro de la primera columna de la primera fila después del título. 3.e Seleccionamos el texto 'Londres...' y lo arrastramos dentro de la segunda columna de la primera fila. 3.f Repetimos los pasos del 3.a al 3.e para las otras ciudades. La columna de la izquierda nos ha quedado demasiado ancha, vamos a estrecharla. 3.g Posicionamos el puntero del ratón sobre la primera columna hasta que tome forma de flecha negra vertical y hacemos clic para seleccionar la columna entera. 3.h Seleccionamos la opción Tabla - Autoajustar al contenido de la barra de menús. La columna se habrá adaptado al tamaño de la imagen. Ahora vamos a hacer que el texto de la derecha empiece en la misma línea que el título. 3.i Seleccionamos la segunda columna como hicimos en el paso 3.g. 3.k Seleccionamos la opción Propiedades de celda del menú contextual. 3.l Cambiamos el campo Alineación vertical por Superior o hacemos clic en el icono Alinear en la parte superior de la barra Tabla. Ya tenemos la tabla creada y colocada. WebProfesional. Ejercicio 2: Introducir tablas. Apartado 4. Abre servicios.htm y corrige los fallos en las imágenes. Vemos que en la página tenemos unas imagenes que no aparecen porque no se encuentran en el lugar señalado por la propiedad Origen de la imagen, vamos pues a rectificarlo. 4.a Pulsamos con el botón derecho del ratón sobre cada imagen, y hacemos clic en Propiedades de Imagen. 4.b En la pestaña General, observa el campo Origen de la imagen:. Contiene../grupo/empresa_despegue.jpg por lo que buscará la imagen en la carpeta anterior dentro de grupo, pero la imagen se encuentra en la carpeta imagenes dentro de servicios, por CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 43/78

7 lo que tenemos que cambiar el origen de la imagen con el valor correspondiente: 4.c Pulsamos en Examinar y vamos a la carpeta donde copiamos las imágenes: servicios\imagenes. Hacemos clic en el archivo de la imagen empresa_despegue.jpg. 4.d Pulsamos después en Aceptar dos veces. La imagen debería verse ahora. 4.e Repite los pasos 4.a al 4.d para las demás imágenes. Apartado 5 Vamos a crear una tabla de una fila y dos columnas, colocaremos la primera imagen en la celda de la izquierda y el resto del texto en la celda de la derecha. 5.a Crea una tabla de una fila y dos columnas tras el titular de la página "Servicios" como lo hemos hecho hasta ahora. 5.b Selecciona el texto junto con las imágenes, (excepto el pie de página) y arrástralo a la celda de la derecha. 5.c Arrastra la imagen del despegue en la celda de la izquierda. 5.d Ajusta el tamaño de la primera columna a la imagen como lo hicimos en los pasos 3.g y 3.h del ejercicio de la Web personal. 5.e Alinea la imagen del despegue al margen superior de la columna como lo hicimos en los pasos 3.i y 3.l del ejercicio de la Web personal. 5.f Quita el borde de la tabla para que no se vea poniendo Borde 0 en el cuadro de diálogo Propiedades de tabla. CURSO Nº 3: Diseño de Páginas Web con FrontPage. Sus Aplicaciones Educativas Página 44/78