Create a List Page - Step IV

26. Click inside the top left cell of the table that is in the contentLayer. Now right-click on the <td> in the bottom of the Design View window and select Set Class > tblHeader.

27. Repeat Step 26 for the other two cells in the top table row.

28. Click inside the middle row, left cell of the table. Now right-click on the <td> in the bottom of the Design View window and select Set Class > tblData.

29. Repeat Step 28 for the other two cells in the middle table row.

30. Click inside the bottom row, left cell and drag the mouse to the right cell in the bottom row. Right-click inside the highlighted area and select Table > Merge Cells.

31. Click inside the bottom row in the table. Now right-click on the <td> in the bottom of the Design View window and select Set Class > tblData.

32. Click inside the top left cell and type Product Name.

33. Click inside the middle cell in the top row and type Price. In the Property Inspector, change Horz to Center.

34. Click inside the right cell in the top row and type Info. In the Property Inspector, change Horz to Center.

35. Click inside the cell in the bottom row and type No Products Found. In the Property Inspector, change Horz to Center.

36. Click inside the middle cell in the middle row and type a dollar sign ($). Then in the Property Inspector, change Horz to Right.

37. Click inside the right cell in the middle row and type more. Then in the Property Inspector, change Horz to Center.

38. Open the Bindings Panel (CTRL + F10) if it is not already open.

39. In the Bindings Panel, click on the (+) sign to the left of Recordset(rsProdusts) to expand it.

40. In the Bindings Panel, click on ProductName and drag it to the left cell in the middle row.

41. In the Bindings Panel, click on UnitPrice and drag it to the middle cell in the middle row, to the right of the dollar sign ($).

42. Click on the UnitPrice that you just dropped in the table cell, then in the Bindings Panel click on the down arrow to the right of UnitPrice and select > Number > 2 Decimal Places.

43. Open the index.asp page and then File > Save As and name it detailPage.asp. Close the detailPage.asp file.

44. Highlight the text more in the right cell in the middle row and then click Make Link. In the Select File window, click on the detailPage.asp and then click on the Parameters button.

45. In the Name column of the Parameters window, type ProductID. Then click on the Value column to expose the lightning bolt icon. Click on the lightning bolt icon.

46. Click on ProductID in the Dynamic Data window and then click OK.

47. Click OK in the Parameters window.

48. Click OK in the Select File window.

Click here to continue the tutorial.