Note: CSS stands for Cascading Style Sheets—a standard that enables you to separate content from presentation. You can create styles that define the font characteristics, colors, and even positioning of your content. You can then apply these styles to the desired elements. The CSS styles are already defined in the forum.css style sheet that comes with the tutorial sample files.

The topic is a link to the page displaying the corresponding messages. To create the topic list, you have to do the following:

1. Open the index.php page in Dreamweaver.
2. Create the recordset that retrieves topic information: the ID, title, and description.
3. Display the recordset contents on the page.

To create the recordset that retrieves the forum topics, follow these steps:

1. Click the Plus (+) button on the Bindings tab in the Application panel. From the pop-up menu select Recordset (Query) (see Figure 11).

   

   Figure 11. Creating a new Recordset (Query)

2. Configure the recordset dialog box options (see Figure 12):

1. For the recordset name enter rsTopics.
2. In the Connection pop-up menu, select connForum.
3. Select the topic_top table in the Table pop-up menu.

4. To sort the topics alphabetically, select the title_top column in the Sort pop-up menu; for the method (the next pop-up menu), select Ascending.



Figure 12. Configured Recordset dialog box

3. Click OK to close the dialog box and add the recordset. The recordset appears in the Bindings tab (see Figure 13).

   

   Figure 13. Bindings tab showing the recordset

4. After having created the recordset, you must use its fields to build the home page:

1. With the index.php page open, expand the rsTopics recordset in the Bindings tab.
2. Clear all content from the second
   container (the white one).

3. Drag and drop the title_top field on the Bindings tab in the second

   container (see Figure 14).



Figure 14. The title_top field in the second

container
4. Place the cursor after the added topic title and press Enter (Return) to create a new paragraph.
5. To distinguish the topic title from its description better, format it as Heading 3 by selecting the dynamic text and then choosing Heading 3 from the Format pop-up menu in the Property inspector.

6. The topic title must be linked to the messages page. This page displays all messages from the selected topic. The messages are filtered by the topic ID, which is passed from the home page as a URL parameter. With the topic title selected, click the Folder icon in the Property inspector to define the link (see Figure 15).

   

   Figure 15. Folder icon in the Property inspector

7. In the dialog box that opens, select the view_message.php page, and then click the Parameters button to define the URL variable that will filter the messages:

1. In the Parameters dialog box, click the Plus (+) button to add a new URL parameter.
2. In the Name field enter id_top.

3. For the Value, click the Dynamic Data icon (the yellow lightning bolt), and then select the id_top field of the rsTopics recordset (see Figure 16).

   

   Figure 16. Selecting the id_top field in the Dynamic Data dialog box

4. Click OK to define the parameter value.
5. Click OK twice to create the link.

8. Drag and drop the description_top recordset field in the Bindings tab in the paragraph below the link (see Figure 17).

   

   Figure 17. Adding the description_top recordset field in the paragraph below the link

At this point, if you try to preview your page in the browser, you’ll notice that only the first topic is displayed. You need to loop through all records in order to display all the topics:

1. Select the topic title and description and apply a Repeated Region server behavior. You can access it from the Application tab of the Insert bar (see Figure 18).

   

   Figure 18. Accessing the Repeated Region server behavior from the Application tab of the Insert bar

   Note: Make sure you select just the dynamic text, not the

   container.

2. In the Repeat Region dialog box, configure the repeat region to use the rsTopics recordset and click All Records to display all records.

3. Click the OK button to close the dialog box and apply the server behavior. You’ll notice that a gray border labeled Repeat is displayed around the topic information.

4. Save the page and upload it to the testing server. Press F12 (Windows) or Option+F12 (Macintosh) to load the page in your web browser. The page should look similar to what appears in Figure 19.

   

   Figure 19. Forums topic page so far

In the next section, you’ll change the way links look using CSS styles.