Objetivo Practicar las operaciones que hay que realizar para insertar una tabla y rellenar sus celdas.
Ejercicio 1: Crear y rellenar una tabla. 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrirá el documento en Dreamweaver. 6. Sitúa el punto de inserción al final el primer párrafo, y pulsa Intro para crear un nuevo párrafo. Escribe el siguiente párrafo: Tenemos sedes en: 7. Haz clic sobre el menú Insertar. 8. Elige la opción Tabla. 9. En Filas: escribe 6. 10. En Columnas: escribe 4. 11. En Ancho de tabla: selecciona Píxeles y escribe 500. 12. En Grosor de borde: escribe 2. 13. Si en Relleno de celda: aparece algo escrito, bórralo. 14. En Espacio entre celdas: escribe 2. 15. Selecciona el encabezado Izquierda. 16. Haz clic sobre el botón Aceptar. Rellena la tabla para que quede del siguiente modo: Sedes de cocina Ciudad Dirección Horario Especialidad Reservas
Valencia
Barcelona
Avda. Constitución 34
Gran Vía, 162
Av. Diagonal, 23
10:00 - 16:30 20:30 - 00:00
12:00 - 17:00 20:30 - 00:30
20:30 - 01:00
Casera y de Creación
Castellana y de Mercado Creativa
Sí
No
17. Haz clic sobre el botón Guardar
Sí
de la barra de herramientas.
EJERCICIO TABLAS. SITIO COCINA.
Objetivo Practicar cómo modificar las propiedades de una tabla y de sus celdas.
Ejercicio 2: Modificar las propiedades de una tabla. 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. 5. Se abrirá el documento en Dreamweaver. 6. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 7. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 8. Selecciona la tabla. 9. En Rell. celda, introduce el valor 5. 10. Haz clic en la segunda celda de la segunda fila (la de Valencia), y arrastra hasta la última celda. 11. Con las celdas seleccionadas, en el desplegable Horiz. elige Centro. 12. Haz clic sobre el botón Guardar
de la barra de herramientas.
EJERCICIO TABLAS. SITIO COCINA.
Objetivo Practicar cómo definir las propiedades de estilo de una tabla y de sus celdas.
Ejercicio 3: Modificar el estilo de una tabla. 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.
Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos. Selecciona el sitio Cocina en el panel Archivos. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrirá el documento en Dreamweaver. Abre el panel Estilos CSS (menú Ventana → Estilos CSS). En le desplegable Regla de destino del Inspector de propiedades CSS, selecciona , y pulsa el botón Editar regla. En Tipo de Selector selecciona clase. En nombre escribe .tabla_sedes. Y en Definición de regla selecciona estiloscocina.css. Haz clic en aceptar. En la categoría Tipo, cambia font-size a 80% y color #333. En la categoría Fondo, cambia background-color a #82C7F8. En la categoría Bloque, cambia text-align a center; En la categoría Cuadro, en Margin, desmarca Igual para todo, y en Left y Right selecciona auto. Pulsa Aceptar para guardar los cambios. Selecciona la tabla haciendo clic sobre su borde, y en el desplegable Clase elige .tabla_sedes. Haz clic sobre una celda. En la barra de estado, haz clic sobre
para seleccionar la fila. En el Inspector de propiedades CSS, selecciona , y pulsa el botón Editar regla para definir el estilo de las filas. Observa que ya aparece el selector compuesto .tabla_sedes tr. Pulsa Aceptar. En la categoría Fondo, en background-image elige la imagen fondo-sedes.gif de la carpeta imagenes. En Background-repeat elige repeat-X. Pulsa Aceptar.
EJERCICIO TABLAS. SITIO COCINA.
21. Haz clic en la celda Valencia y arrastra hasta la celda Barcelona. 22. Inspector de propiedades CSS, selecciona , y pulsa el botón Editar regla para definir el estilo de las filas. 23. Observa que aparece el selector compuesto .tabla_sedes tr td. Complétalo para que quede .tabla_sedes tr td.ciudad y pulsa Aceptar. 24. En Tipo, cambia el color a #069 y font-weight a bold. Pulsa Aceptar. 25. Si se han deseleccionado, haz clic en la celda Valencia y arrastra hasta la celda Barcelona. 26. Con las celdas seleccionadas, en el Inspector de propiedades HTML, en clase elige ciudad. 27. Haz clic en el borde izquierdo de la fila Horario para seleccionarla completa. 28. En el Inspector de propiedades CSS, selecciona . 29. En el Inspector de propiedades CSS, pulsa el icono Cursiva 30. Haz clic sobre el botón Guardar
.
de la barra de herramientas, o pulsa Ctrl + S.
El aspecto que te debe de haber quedado debe de ser el siguiente:
La completaremos en los siguientes ejercicios.
EJERCICIO TABLAS. SITIO COCINA.
Objetivo Practicar las operaciones necesarias para combinar celdas.
Ejercicio 5: Combinar celdas de la tabla. 1. Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio. 2. Si no aparece el panel Archivos, ábrelo a través del menú Ventana, opción Archivos. 3. Selecciona el sitio Cocina en el panel Archivos. 4. Haz doble clic sobre el documento quienes.htm, que aparece en el panel Archivos. Se abrirá el documento en Dreamweaver. 5. Si no aparece el inspector de propiedades, ábrelo a través del menú Ventana, opción Propiedades. 6. Si el inspector de propiedades no se muestra en su totalidad, pulsa sobre el botón para desplegar sus propiedades más avanzadas. 7. Selecciona la primera fila de la tabla. Puedes hacerlo situando el cursor junto al borde izquierdo de la tabla, a la altura de la primera fila, y haciendo clic cuando el puntero adquiera la forma de flecha. 8. Hacer clic sobre el botón Combinar las celdas seleccionadas , del inspector de propiedades. 9. Selecciona la segunda y la tercera celda de la segunda fila (la que pone Valencia y la que queda en blanco). Puedes hacerlo pulsando con el ratón sobre una de las celdas, y manteniéndolo pulsado mientras lo arrastras sobre la otra. 10. Haz clic sobre el botón Combinar las celdas seleccionadas . 11. Modifica el tamaño de las columnas para que se ajusten mejor al contenido. Puedes hacerlo manteniendo pulsado el ratón sobre los bordes de las columnas, arrastrándolos hacia las posiciones deseadas. Recuerda que la apariencia real es la que se ve en el navegador. 12. Haz clic sobre el botón Guardar