Create a List Page - Step III

Now we will insert another layer to hold a table that will contain the information from the filtered recordset.

16. Click on a blank area of the page, outside of any layers, and then Insert > Layer. In the Layers Panel (F2), click on the layer that just inserted and use the following settings in the Property Inspector.

NOTE: It is important that you give the contentLayer a lower z-index than the catSubLayer so that the catSubLayer displays "over" the contentLayer.

17. On the page, click inside the contentLayer and then Insert > Table and use the following settings.

18. Click inside the table that you just inserted and then click on the <td> in the bottom of the Design View window. In the Property Inspector, set the Bg color to #666666.

19. Click inside the table again, then click Insert > Table and use the following settings.

20. Click inside each <td> of the table that you just inserted (there are 9 of them) and in the Property Inspector, set the Bg color to #FFFFFF.

21. Now we need to create some more CSS classes so that we can style the table cells. Click on the New CSS Style icon in the CSS Styles (SHIFT + F11) window and use the following settings in the New CSS Style window and click OK.

22. Use the following settings in the CSS Style definition for .tblHeader window. Click OK.

23. Click on the New CSS Style icon in the CSS Styles (SHIFT + F11) window and use the following settings in the New CSS Style window and click OK.

24. Use the following settings in the CSS Style definition for .tblData window. Click OK.

25. Right-click on the .tblData class in the CSS Styles Panel and select Duplicate. Use the following settings in the Duplicate CSS Style window and click OK.

Click here to continue the tutorial.