Unidad 21. Ejercicio: Texto dinámico

Objetivo

Practicar las operaciones necesarias para insertar texto dinámico y modificar sus propiedades.

Ejercicio

1. Si WampServer no se está ejecutando, lánzalo para realizar este ejercicio.
2. Si los servicios de MySQL o Apache no se están ejecutando, lánzalos para poder tener acceso a las bases de datos y a la ejecución de archivos PHP.
3. Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre él.
4. Abre el archivo nuevos.php.
5. En el área de contenido que podemos modificar introduce la siguiente línea: Listado de libros nuevos: e introduce un salto de párrafo (Enter).
6. Luego deberás insertar una tabla con un relleno de celda de 5 y borde 0. El resto de valores, déjalos vacíos.
7. La tabla deberá tener 4 filas y 4 columnas. Siendo la primera un encabezado.
8. Dale a las columnas, de izquierda a derecha, los siguientes anchos: 197 píxeles, 142 píxeles, 156 píxeles y 100 píxeles.
9. Rellena las celdas de la primera fila con el texto Título, Autor, Editorial y Precio respectivamente.
10. Selecciona todas las celdas de la tercera fila y combínalas utilizando el botón en el panel de Propiedades.
11. Haz lo mismo para la cuarta fila.
12. Selecciona la cuarta celda de la segunda fila y dale como estilo la clase precio y alineación a la derecha.
13. Selecciona la tercera y cuarta fila y dales la clase alto_10.
14. Ahora vamos a añadir una segunda clase a la tercera fila, como Dreamweaver sólo nos permite seleccionar una, deberemos ir a la vista de Código para editarlo desde allí (recuerda el tema de CSS avanzado).
    Localiza la tercera fila que tendrá este aspecto:
    <td colspan="4" class="alto_10">&nbsp;</td>
Añádele la clase borde_inferior, dejándola así:
    <td colspan="4" class="alto_10 borde_inferior">&nbsp;</td>
15. Vuelve a la vista de Diseño y abre el panel Vinculaciones (Ctrl + F10).
16. Despliega el juego de registros listado_libros y arrastra el elemento Titulo a la primera celda de la segunda fila de la tabla.
17. Arrastra el elemento Autor a la segunda celda.
18. Arrastra el elemento Editorial a la tercera celda.
19. Arrastra el elemento Precio a la cuarta celda (no te preocupes si aparentemente se descuadra la página).
20. A la derecha del precio, después del cierre de la llave escribe un espacio y el símbolo €.
21. Selecciona la celda que contienen el Autor de la página. Crea un Nuevo estilo en línea poniendo el contenido en cursiva pulsando el botón en el Inspector de Propiedades CSS.
22. Abre el panel Comportamientos del servidor (Ctrl + F9) y haz doble clic sobre el elemento Texto dinámico {listado_libros.Titulo} para modificar sus propiedades.
23. En el cuadro de diálogo que se abrirá selecciona el valor May.-min. - Mayús. del desplegable Formato para mostrar todo el texto en mayúsculas.
    Recuerda que este comando puede estar erróneo en Dreamweaver. Si es tu caso, emplea May.-min. - Minús..
24. Cambia a la Vista en vivo y verás como se muestra el primer registro. (También puedes visualizar los datos desde el localhost pulsando la tecla F12).
25. Cierra el documento guardando los cambios.