Creating the Web Elements


At this point, the document is starting to look like a web page, but with the exception of the text reference to an email address, there isn't any functionality that would actually allow this document to perform as a web page. To change that, you need to establish those regions of the page that will contain copy text/images and those that will contain navigation elements.

Establishing the Text/Image Region

If you review the wireframe you created to present to the client, you'll see that the left side of the blue dividing line is supposed to contain navigation buttons, and the large section below and to the right of the dividing line will contain the copy and images for the site.

Creating the region that will contain the copy and images is simply a matter of creating a placeholder region. You can do this by slicing out the region in which you want to be able to add text in Dreamweaver.

1.

In the retros_cycles_template document, choose the Slice tool from the toolbar and draw a square in the area to the right and below the blue divider. Again, don't worry about the size or location of the slice.

2.

Using the Property inspector, set the X position to 190, the Y position to 180, the width of the slice to 585, and the height to 395. You should now see a slice area that marks the text/images region (see Figure 7.11).

Figure 7.11. Create a slice that represents the area where copy and images will be placed.


After you export the page to HTML and open it in Fireworks, this region will be represented by a large, black image. All you have to do is delete the image from your web page and the area that is left will be usable for text and images.

Adding Navigation Buttons

The next step to adding web elements to the document is adding navigation buttons. The five navigation buttons that the client has requested are Home, Contact, About Us, Services, and For Sale. Not only can you add these to the page, but you can use Fireworks to make them rollover buttons that change when the visitor rolls a mouse over them.

1.

In the retros_cycles_template document, choose the Rectangle tool and draw a rectangle in the area to the left of the blue divider. Set the rectangle width to 132, the height to 30, the X position at 45, and the Y position at 196.

2.

Next, set the fill color of the rectangle to #000000 and the stroke color to #0000FF.

3.

Set the Rectangle roundness to 50. You should now have a blue, rounded rectangle on the page (see Figure 7.12).

Figure 7.12. A rectangle has been placed on the page.


4.

With the rectangle selected, choose Edit, Copy (Ctrl+C or Cmd-C) and Edit, Paste (Ctrl+C or Cmd-V) to create a duplicate of the rectangle. The duplicate is selected automatically after it is pasted onto the canvas.

Tip

You can also duplicate the rectangle by choosing Edit, Duplicate from the menu bar or by holding the Alt or Opt key and dragging the object to a new location on the canvas.

5.

Adjust the location properties of the new rectangle so that the X position is 35 and the Y position is 236.

6.

Create three additional duplicates with the first having an X position of 25 and a Y position of 276, the second having an X position of 15 and a Y position of 316, and the third having an X position of 5 and a Y position of 356.

7.

Select each of the rectangles by holding the Shift key and clicking on each one. From the menu bar, choose Modify, Arrange, Send To Back or using the Ctrl+Shift+Down Arrow keyboard command. This moves the rectangles behind the blue divider and gives the illusion that they are attached (see Figure 7.13).

Figure 7.13. Five navigation rectangles have been added to the page.


8.

The next step to creating your navigation buttons is to add text. Select the Text tool and draw a text block that stretches across the full width of the top button. In the text block, type Home and adjust the text so that it is Arial, 15, and has a color of #0000FF. Center the text in the rectangle by clicking the Center Alignment button on the Property inspector.

9.

Repeat this step to create the Contact, About Us, Services, and For Sale buttons, as shown in Figure 7.14.

Figure 7.14. Add text to the buttons.


10.

Next, you need to create the rollover states for your buttons. Open the Frames panel (Window, Frames) and open the upper-right Options menu. Choose Duplicate Frame from the menu.

11.

In the Duplicate Frame dialog box (see Figure 7.15), choose 1 frame, After Current Frame, and click OK.

Figure 7.15. Duplicate the existing frame.


In the Frames panel, there are now two frames. Frame 1 shows what the page will look like normally and Frame 2 displays what the page will look like while a mouse is rolled over specific areas. Because you haven't made any changes to Frame 2, they both are identical. To create the over state for each button, you need to modify it in Frame 2.

12.

In the Frames panel, select Frame 2. Select all the navigation buttons on the stage by holding the Shift key and clicking on each of them. Change their fill color to #0000FF and their stroke to #000000.

13.

Next, select each of the text blocks and change the text color to #000000. This creates the buttons' rollover state (see Figure 7.16).

Figure 7.16. Create the rollover states in Frame 2.


With the rollover states in place, the last step is to create slices that indicate what aspects of the page should change and then to apply the rollover behavior.

14.

Select the Slice tool from the toolbar and draw a slice around the Home button. In the Property inspector, set the width of the slice to 130, the height to 35, the X position to 0, and the Y position to 193. Name the slice sliHome by typing the value in the upper-left field of the Property inspector.

15.

Create a second slice for the Contact button with a width of 130, height of 41, X position of 0, and the Y position of 228. Name the slice sliContact by typing the value in the upper-left field of the Property inspector.

16.

Create a third slice for the About Us button with a width of 130, height of 41, X position of 0, and the Y position of 269. Name the slice sliAboutUs by typing the value in the upper-left field of the Property inspector.

17.

Create a fourth slice for the Services button with a width of 130, height of 41, X position of 0, and the Y position of 310. Name the slice sliServices by typing the value in the upper-left field of the Property inspector.

18.

Create a fifth slice for the For Sale button with a width of 130, height of 38, X position of 0, and the Y position of 351. Name the slice sliForSale by typing the value in the upper-left field of the Property inspector.

As shown in Figure 7.17, you now have five slices that indicate that these areas should be treated differently when the document is exported to HTML.

Figure 7.17. Each of the navigation buttons has been sliced.


19.

Open the Behaviors panel by choosing Window, Behaviors.

20.

Choose the Pointer tool from the menu bar and select the slice for the Home button. On the Behaviors panel, click the plus sign and choose Simple Rollover from the menu. The Behaviors panel now indicates that there is a rollover behavior assigned to the slice (see Figure 7.18).

Figure 7.18. The rollover behavior has been applied.


21.

In the Property inspector, type index.cfm in the Link field. When the document is exported to HTML, a hyperlink is created automatically to the index.cfm page.

22.

Following the same steps, apply the Simple Rollover behavior to each of the other buttons and link them to contact.cfm, aboutus.cfm, services.cfm, and forsale.cfm.



Special Edition Using Macromedia Studio 8
Special Edition Using Macromedia Studio 8
ISBN: 0789733854
EAN: 2147483647
Year: 2003
Pages: 337

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net