Site Design

     

If you've created a working site outline, as detailed in the previous section, you can now start working on designing your site. This is where FreeHand MX really begins to shine for working with Web graphics. Typically, Fireworks MX is used to create site composites (or " comps "). The final image is then sliced and moved over to Dreamweaver MX, where it is posted online.

If you're working with a large site, you will be rendering several designs for the major pages and a variety of sub-topic pages. The key to keeping your sanity is to use FreeHand MX and Fireworks MX to model your site. In this section, we'll take a look at using FreeHand MX and its feature that allows us to create multi-page documents that are located in one file. This file can then be efficiently imported from FreeHand MX into Fireworks MX where you can prep the image (optimize and slice) for use in Dreamweaver MX.

Create a Multipage Document

There are a few methods of creating a multipage document in FreeHand MX. You can use the Page tool to create multiple pages for your document.

For more information about the Page tool, see "Page Tool," page 795 , in Chapter 29, "Freehand MX Environment and Tools."


You can also use the Page Preview area in the Document panel (see Figure 30.10).

Figure 30.10. The Page Preview area in the Document Panel.

graphics/30fig10.jpg


Continuing with the case study of greendept.org, you need to create a multipage environment for the six top-level pages (Home, Search, Log-In, Events, About Us, Contact Us).

Open a new FreeHand MX document (File, New). Select the Documents tab in the Property inspector. If your Property inspector is not open , select it (Window, Document). From the Page Type menu, select Web (Figure 30.11). The page size is set to a default 550 pixels wide by 400 pixels tall.

Figure 30.11. Set the page size in the Documents tab.

graphics/30fig11.jpg


If you need to work with a different screen size, simply select Custom and set your page dimension accordingly .

To add pages to the document, select Add Pages from the Options menu (Figure 30.12).

Figure 30.12. Add pages to the document with the Add Pages command in the Options menu.

graphics/30fig12.jpg


This opens the Add Pages dialog, where you can enter the number of pages you want to create, as well as change page dimensions. In this case, you will add five more pages. Click OK.

When the Add Pages dialog disappears, the new pages appear in the Document Preview window as tiny pages. To enlarge or reduce the size of the page thumbnails, click one of the three page magnification buttons (Figure 30.13).

Figure 30.13. Select one of three page magnification buttons to control how the page thumbnails are displayed in the Document Preview window.

graphics/30fig13.jpg


When magnification is set to the middle or highest level, some of the pages in the document may not be visible in the Document panel's pasteboard window.

Note that your pages are now laid out in a linear order. Because you want to replicate the look of the site map created earlier, you need to rearrange the page order.

Select Fit All (Figure 30.14) from the drop-down menu located at the bottom of the document in the Status toolbar.

Figure 30.14. Since new pages are added in a vertical stack, select the Fit All option to view all pages in the document.

graphics/30fig14.jpg


Select the Page tool. Click on a page and drag it to a new position, similar to the site map layout created earlier (Figure 30.15). Repeat for the remaining pages. Notice that the page thumbnails in the Document panel resemble the new arrangement you created. You can also drag these thumbnails in the preview area to rearrange page order. However, if you're working with several pages, some pages will not be viewable in the preview area because it does not allow you to scroll.

Figure 30.15. You can create a new page arrangement by using the Page tool to reposition the pages.
graphics/30fig15.jpg

Design the Home Page

After your house is in order, so to speak, you can start adding the good stuff to your pages. It's time to design.

From the Status toolbar, select the page number you want to work on first. In this case, it will be Page 1, the Home page. Images and text can now be added to create your home page design. The first order of business is to import the client's logo and place it on the home page (Figure 30.16). Select (File, Import) and import the image as a bitmap.

Figure 30.16. Place the imported logo as a bitmap on the canvas.
graphics/30fig16.jpg

At this point, you'll need to work with some FreeHand MX text effects if you want to spice up the site's typography.

Text Effects

FreeHand MX offers several powerful text effects that can add highlights, shadows, and three-dimensional zooms. Because you are designing for the Web, you shouldn't get too crazy with text effects that may not render properly in a low-resolution environment.

One of the more powerful effects in FreeHand is to align text to a path. The path can be closed or open. In this case, you will attach the Web site name (GreenDept.org) to a path around the penguin.

First things first. You need to create a path. Using the Ellipse tool, draw a circle (hold the Shift key while dragging) around the penguin (Figure 30.17).

Figure 30.17. To attach text to a path, you need to create a path first. In this case, use the Ellipse tool to draw a circle around the logo.
graphics/30fig17.jpg

Next, you need to create the text that will be used on the path. Use the Text tool to type GreenDept.org (Figure 30.18). Use the Object panel to change the font, size, and fill color .

Figure 30.18. After you've created a path, add your text.
graphics/30fig18.jpg

Select both the circle and the text block by holding the Shift key while using the Select tool. Choose (Text, Attach to Path)(Figure 30.19) and the text will now align to the path. Because you are working with a closed path, insert a paragraph return between the "." and "org" to align the text to both the top and the bottom of the path. Because the "." looked dorky sitting at the top, I deleted it (Figure 30.20).

Figure 30.19. Use the Text, Attach to Path command to attach the text to the path, or circle.

graphics/30fig19.jpg


Figure 30.20. The text is now attached to the path.
graphics/30fig21.jpg

Resize the graphic and text and reposition as your creative eye sees fit (Figure 30.21).

Figure 30.21. The resized and repositioned logo.

graphics/30fig20.jpg


You can change the direction in which the text flows by holding the Opt/Alt key while using the Pointer tool to select just the path. Choose (Modify, Alter Path, Reverse Direction) to have the text flow in the opposite direction.

To reposition text along the path, use the Pointer tool to click the path. A small white triangle appears. Drag the triangle to move the text along the path.

To change the text alignment in regard to the vertical alignment of the text in relation to the path, click on the Text on a path entry in the Object panel. This displays the Text on a path options. The Top and Bottom Text alignment menus control where the text sits in relation to a path. The Top menu controls text before any paragraph return, whereas the Bottom menu controls text after any paragraph return.

Baseline places the baseline of the characters on the path; Ascent places the ascenders (letters in which part of the letter rises above the tops of the other letters , as with the letter t ) on the path; Descent places the descenders (letters in which part of the letter drops below the baseline, as in the letter q ). None indicates that no text is on the top or the bottom of the path.

After you've played with text and paths, you can start blocking out the site design. I like to use text headings and rectangles to show clients where the major page elements will be located (Figure 30.22).

Figure 30.22. Block out major page elements in your page concept design to show where key content areas are located.

graphics/30fig22.jpg


Actions

Another method of presenting a site map is to create a faux working model that will let people navigate between your page designs in FreeHand. You can accomplish this by using FreeHand's Action tool.

To assign an action to an object, double-click the Action tool in the Tools panel to open the Action Tool dialog box. Select one of the following actions:

  • Link to Target Page creates a link that moves from one page to another.

  • Print Target Page adds a command that prints the target page.

  • Load Target Page as a Movie takes objects on one page and adds them to the top of objects on the current page.

In this case, select Link to Target Page because you want to simulate working links between pages. Click OK to close the Action Tool dialog box.

Drag the Action tool from the object you want to act as the button to the target page. Release the mouse button and a curved action line indicates that an action has been applied between the pages (Figure 30.23).

Figure 30.23. Use the Action tool to simulate a working link between the page concepts.
graphics/30fig23.jpg

Using the Action tool allows you to apply only three types of Actions. The Navigation panel, however, enables you to apply several other actions. Nearly all these actions relate to incorporating Flash movies in your FreeHand documents.

To assign actions with the Navigation panel (Window, Navigation), select the object that will have the action applied. In the Navigation panel, use the Action menu to select an appropriate action (Figure 30.24).

Figure 30.24. Use the Action menu to choose an action.

graphics/30fig24.jpg


Use the Event menu to select the event that will trigger the action:

  • Go To and Stop creates a button that goes to a particular frame or movie. The play action is then stopped .

  • Go To and Play creates a button that goes to a particular frame or movie. The movie then continues to play at that point.

  • Get URL creates a button that is used to go to the link specified in the Link field.

  • Play creates a button that starts a paused movie.

  • Stop creates a button stops a movie that is running.

  • Print creates a button that specifies a page that can be printed through the Flash Player.

  • Full Screen displays the movie in the Flash Player in full-screen mode.

  • Start/Stop Drag allows a movie clip to be dragged around a page when an event happens and stop when another event happens.

  • Load Movie creates a button that loads the movie from one page onto the movie on the current page.

  • Unload Movie creates a button that removes a loaded movie from a page.

  • Tell Target creates a button that controls the movies that were loaded onto the current movie.



Using Macromedia Studio MX 2004
Special Edition Using Macromedia Studio MX 2004
ISBN: 0789730421
EAN: 2147483647
Year: N/A
Pages: 339

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