Create the header, footer, and site menu pages

In this topic you will take care of seven out of the nine server model-based files created earlier: you will be instructed how to add content in the header and footer pages, as well as in the site menu pages (pages to which the menu items point).

Add content in the 'header' page

Open the header file. This page will contain the site header (an image) that will be displayed on all the site "pages" (remember that this application is built in a reusable-code manner, using MX Includes).

Follow the next steps to insert the header image in page:

  1. Click the Images : Image icon in the Common tab of the Insert bar:


                                         

  2. In the dialog box that opens browse to the header.jpg image located in the header site folder (that you previously copied in your site root), and select it to be inserted in page:


                          

  3. Another dialog box will pop-up after you press OK in the Select Image Source one, namely the Image Tag Accessibility Attributes dialog box. Just click Cancel as explained here.

  4. Press the right arrow key to deselect the image inserted in page, and then press Enter to create an empty paragraph below it (this will ensure some blank space below the menu - a 'white' strip).

After following the steps above, the header page in Dreamweaver, in Design view, should look as follows:

 

Save the header page, upload it to the server, and close it.

Add content in the 'footer' page

Open the footer file. This page will contain the site footer (a small text section) that will be displayed on all the site "pages" (remember that this application is built in a reusable-code manner, using MX Includes).

Follow the next steps to create the site footer:

  1. Click the Horizontal Rule icon in the HTML tab of the Insert bar to insert a horizontal line in page:


                                        

  2. Once inserted, the line is selected. Press the right arrow key to deselect it, and then press Enter to create a new paragraph below it.

  3. In the new paragraph enter Copyright @ 2006 InterAKT Online - Dreamweaver Extensions for Dynamic Websites.

After following the steps above, the footer page in Dreamweaver, in Design view, should look as follows:

 

Save the footer page, upload it to the server, and close it.

Add content in the site menu pages

You will now add content in the five site pages to which the menu items point:

  1. home

  2. spring_pack

  3. products

  4. overview

  5. contact

 

----------

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.

 

----------

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.

 

After following those instructions, 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.

 

----------

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 overview page, upload it to the server, and close it.

 

----------

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

----------

Save the contact page, upload it to the server, and close it.

Continue with the next topic to generate the database-driven menu in the menu page.