| |
| |
Now that the template file is complete, you can create template-based pages in your site. When generating the site menu in the Dreamweaver template, you mentioned four pages that were not yet created. Create them now in the site root: home, spring_pack, products, company having the right extension (php, asp, or cfm according to your server model).
To transform a plain server model-based page in a template-based one, open it in Dreamweaver, and from the Assets tab of the Files panel drag and drop in page the other_table_tmp template:
Perform this operation for each of the four site pages, then save the changes. Now that the template-based pages are created, it is time to add content in them. Notice that you can only work in the template editable region and you are not allowed to change anything else in page.
Except for the products page, the content in the other three pages is static (entered manually). The products page content is dynamically retrieved from the database.
Follow the instructions below to populate the template-based pages:
Open the home page, if not already opened, and press Ctrl+A to select the default content in the editable region ("Content"). Copy the following text in the clipboard and paste it on top of the selection:
----------
InterAKT Online is a self-funded web development company that started in 2000. Our goal is to simplify web development in all possible aspects.
The software products created and provided by InterAKT Online include bundles, extensions, web applications or free products.
This small site here presents the MX Spring Pack 2006 bundle.
----------
Save the home page, upload it to the server, and close it.
Open the spring_pack page, if not already opened, and enter the following text in the editable region (on top of its default text):
----------
MX Spring Pack 2006 is a bundle of Dreamweaver extensions that help you enhance your website front-ends with new features and options. You can now add navigation menus, search features, or RSS feeds to your site in less time and with better results than before. Your visitors will definitely notice the new calendars and schedules, and can enjoy your brand-new image gallery. All this can be yours with this special spring offer. Save $115 with the new MX Spring Pack 2006!
----------
Save the spring_pack page, upload it to the server, and close it.
Open the products page, if not already opened. This is the only site page that has its content dynamically retrieved from the database you connected to.
First create a recordset to retrieve the products details. Go to the Application panel, Bindings -> + -> Recordset (Query). Configure the dialog box that opens as shown below:
Select the conn_other_table database connection.
Select the product_prd database table to retrieve information about products.
Select all the table columns to be included in the recordset.
Add a filtering condition: the id_prd primary key must match the id_prd URL parameter.
There is no need to sort the recordset.
If you press the Test button, you will be asked for a test value for the id_prd parameter, and if a match with the primary key is found, you will see the retrieved data.
Note: Check out the database table records to see all the possible values for the primary key column.
Click OK to create the recordset.
Once the recordset is created, continue with the next steps to add content in the products page:
Press Ctrl+A to select the default content in the editable region ("Content") and enter "MX Spring Pack 2006 > " (without the quotation marks).
Select the MX Spring Pack 2006 text section and make it a link to the spring_pack page: click the folder icon next to the Link text box in the Property Inspector, and select the spring_pack file from the site structure.
Expand the rsProductDetails recordset in the Bindings tab of the Application panel, and drag and drop the name_prd column after the existing content, more precisely after "> " (on the same row).
Press the right arrow to deselect the dynamic text dropped in page, and then press Enter (twice) to create a new paragraph below it. In the new paragraph you want to display the product logo and slogan.
Click the Images : Image icon in the Common tab of the Insert bar:
Configure the dialog box that opens as shown below:
In the Select file name from radio group choose the Data sources option.
Select the logo_prd column from the rsProductDetails recordset. Notice how the URL text box below is populated.
Add logos/ right before the automatically added content in the URL text box. This way, the products logos will be correctly displayed in page, given the relation between the filename stored in the database table and the image file stored in the logos folder from the site root.
Click OK when you are done.
Another dialog box will pop-up after you click OK in the Select Image Source one, namely the Image Tag Accessibility Attributes dialog box. Just click Cancel to skip setting values for the alternate text and long description image attributes (they are not important in this tutorial context), and to finalize inserting the dynamic image in page:
Insert a Space after the image placeholder, and on the same line, drag and drop the tagline_prd column from the rsProductDetails recordset.
Create two new paragraphs below (like you did above). In the first one drag and drop the shdesc_prd column, and in the second one the desc_prd column.
Click the image placeholder to select it, and in the Align drop-down menu from the Property Inspector select the Absolute Middle option to evenly align, vertically, the logo and the slogan next to it.
After following all these steps, the products page in Dreamweaver, in Design view, should look like this:
After performing these operations, notice in the Server Behaviors tab of the Application panel the recordset and the dynamic elements added (to the ones already existing from the template file).
Save the products page, upload it to the server, and close it.
Open the company page, if not already opened, and enter the following text in the editable region (on top of its default text):
----------
InterAKT's main lines of business stay in creating tools for software development - for Intranet, Web Publishing, and E-commerce. Most of our tools extend Dreamweaver and offer more productivity to developers and designers alike. Our mission is to provide functionality without any compromise on quality.
We are Macromedia partners for extending Dreamweaver. While we will continue to offer the best possible solutions to our Dreamweaver customers, InterAKT is looking into new markets where our experience and technology might help. We view the Flex, .NET, JSP and Web 2.0 technologies as new areas where we can make a difference, and in the near future our offer will include a more varied line of solutions.
----------
Save the company page, upload it to the server, and close it.
Now that content has been added in all four site pages, your application is completed. Preview in browser one of the four pages and use the menu to navigate in your site:
Notice how each menu item opens a certain page, or the same page, but with another value for the URL parameter.
In the tutorial you just completed, you generated a CSS menu combining the non database-driven (static) and database-driven (dynamic) components. The menu items on the second level are dynamically retrieved from the database, using another table structure than the InterAKT one. The site pages are template-based (the menu is included in the template file).