Unidad 20. Ejercicio paso a paso: Texto dinámico
Objetivo
Practicar
las operaciones necesarias para insertar texto dinámico y modificar sus propiedades.
Ejercicio
- Si WampServer no se está ejecutando, lánzalo para realizar este ejercicio.
- 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.
- Ejecuta Dreamweaver y abre el sitio libreria, vamos a trabajar sobre él.
- Abre el archivo nuevos.php.
- En el área de contenido que podemos modificar introduce la siguiente línea: Listado de libros nuevos: e introduce un saltos de párrafo (Enter).
- Luego deberás insertar una tabla con un relleno de celda de 5 y borde 0. El resto de valores, déjalos vacíos.
- La tabla deberá tener 4 filas y 4 columnas. Siendo la primera un encabezado.
- Dale a las columnas, de izquierda a derecha, los siguientes anchos: 197 píxeles, 142 píxeles, 156 píxeles y 100 píxeles.
- Rellena las celdas de la primera fila con el texto Título, Autor, Editorial y Precio respectivamente.
- Selecciona todas las celdas de la tercera fila y combínalas utilizando el botón en el panel de Propiedades.
- Haz lo mismo para la cuarta fila.
- Selecciona la cuarta celda de la segunda fila y dale como estilo la clase precio y alineación a la derecha.
- Selecciona la tercera y cuarta fila y dales la clase alto_10.
- 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"> </td>
Añádele la clase borde_inferior, dejándola así:
<td colspan="4" class="alto_10 borde_inferior"> </td>
- Vuelve a la vista de Diseño y abre el panel Vinculaciones (Ctrl + F10).
- Despliega el juego de registros listado_libros y arrastra el elemento Titulo a la primera celda de la segunda fila de la tabla.
- Arrastra el elemento Autor a la segunda celda.
- Arrastra el elemento Editorial a la tercera celda.
- Arrastra el elemento Precio a la cuarta celda (no te preocupes si aparentemente se descuadra la página).
- A la derecha del precio, después del cierre de la llave escribe un espacio y el símbolo €.
- 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.
- 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.
- 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..
- Cambia a la vista LiveData (Ver → Live Data) y verás como se muestra el primer registro. (También puedes visualizar los datos desde el localhost pulsando la tecla F12).
- Cierra el documento guardando los cambios.
Octubre-2009.