| |
| |
The goal of this tutorial is to teach you how to generate a static CSS menu that points to pages with both static and dynamic content. Out of the five pages created earlier, four have static content (entered manually) and one (namely products) has its content dynamically retrieved from the database.
Follow the instructions below to populate the five site pages:
Open the home page and enter (copy/paste) the following text:
----------
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.
----------
Switch to Code view and locate the opening <body> tag. Create a new line below it and paste the following code: <div>Menu placeholder</div>. This div section will be later on replaced by the menu you are generating for your site, and that will be displayed on each page.
Save the home page, upload it to the server, and close it.
Open the spring_pack page and enter the following 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!
----------
Reserve space for the menu to be added on top of the page, just like you did here (for the home page). Then save the spring_pack page, upload it to the server, and close it.
Open the products page. 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 here, the only exception being the database connection name - conn_html_menu:
Once the recordset is created, continue with the next steps to add content in the products page:
Click inside the empty page 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 key to deselect the dynamic text dropped in page, and then press Enter 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 here:
Click Cancel in the Image Tag Accessibility Attributes dialog box that opens after clicking OK in the Select Image Source one.
Press 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.
Finally, reserve space for the menu to be added on top of the page, just like you did here (for the home page).
After following all these steps, the products page in Dreamweaver, in Design view, should look like this:
Notice in the Server Behaviors tab of the Application panel the recordset and the dynamic elements added after performing these operations.
Save the products page, upload it to the server, and close it.
Open the overview page and enter the following 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.
----------
Reserve space for the menu to be added on top of the page, just like you did here (for the home page). Then save the overview page, upload it to the server, and close it.
Open the contact page and enter the following text:
----------
Address: 1-11 Economu Cezarescu ST, AYASH Center, 1st floor, Sector 6, ZIP 060754, Bucharest, Romania
Web: www.interaktonline.com
E-mail: contact@interaktonline.com
Phone: +4031 401.68.19 or +4021 312.51.91
Fax: +4021 312.53.12
----------
Reserve space for the menu to be added on top of the page, just like you did here (for the home page). Then save the contact page, upload it to the server, and close it.
Now that content has been added in all five site pages, move on to the next topic to generate the static CSS menu for your site.