Dreamweaver CS3

Apartado 1.

1 Si no tienes abierto Dreamweaver, ábrelo para realizar el ejercicio.

2 Abre el sitio libreria.

3 Abre el archivo catalogo.php.

4 Ve a la vista de Código.

5 Localiza la tabla que muestra los registros.

6 Modifícala para que se pueda leer:

<table border="0" cellpadding="15" cellspacing="0">

<tr>

<th onclick="misLibros.sort('isbn', 'toggle');">ISBN</th>

<th onclick="misLibros.sort('titulo', 'toggle');">Título</th>

<th onclick="misLibros.sort('autor', 'toggle');">Autor</th>

<th onclick="misLibros.sort('precio', 'toggle');">Precio</th>

</tr>

<tr spry:repeat="misLibros">

<td>{isbn}</td>

<td>{titulo}</td>

<td>{autor}</td>

<td>{precio}</td>

</tr>

</table>

7 Añadiremos las definiciones de los tipos de columna en la parte superior (donde hemos declarado el dataset) para que no haya problemas a la hora de ordenar por precio.

var misLibros = new Spry.Data.XMLDataSet("libreria.xml", "biblioteca/libro");

misLibros.setColumnType('@id', 'number');

misLibros.setColumnType('precio', 'number');

8 Pulsa la tecla F12 para ver la página en el servidor de pruebas.

Apartado 2.

Vamos a añadir los estilos.

1 Modifica de nuevo las celdas de la cabecera para que sean como estas:

<th onclick="misLibros.sort('isbn', 'toggle');" spry:hover="destacado">ISBN</th>

<th onclick="misLibros.sort('titulo', 'toggle');" spry:hover="destacado">Título</th>

<th onclick="misLibros.sort('autor', 'toggle');" spry:hover="destacado">Autor</th>

<th onclick="misLibros.sort('precio', 'toggle');" spry:hover="destacado">Precio</th>

2 Abre el archivo estilo_libreria.css y añádele esta clase:

.destacado {color:#E35331; cursor:pointer;}

3 Guarda todos los documentos.

4 Pulsa la tecla F12 para ver la página en el servidor de pruebas.

Verás como al pasar el ratón sobre las cabeceras éstas cambian de color.

Al hacer clic los registros se ordenarán.

 Cursos Informática Gratuitos