»
Present the plan in HTML
Published 06/18/2006
Present the plan in HTML After sketching your site navigation, you can present the preliminary plan to your client or members of your group in a browser window. This is particularly convenient if you want to share the document with people who do not have FreeHand. | 1 | With your navigation sketch open in FreeHand, select File > Publish as HTML. | | The HTML Output dialog box appears. 
| | 2 | In the HTML Output dialog box, do one of the following to choose HTML settings: |  | Select a setting from the HTML Setting pop-up menu. (If you have not previously created any HTML settings, only the built-in Default setting is available.) | | Click Setup to view the HTML Setup dialog box and choose HTML settings. | | Click Wizard (Windows) or Assistant (Macintosh) and follow the onscreen instructions to select HTML settings. When you have finished selecting settings, click Finish. | | For this tutorial, we've selected the built-in Default setting. | | 3 | Specify which pages to publish, all or a range. For this tutorial, there is only one page to publish. | | 4 | Select Show Output Warnings to display the HTML Output Warnings dialog box when you convert the document. You don't need to select this box for this tutorial. | | 5 | Select View in Browser or HTML Editor to preview the converted HTML document on your system. | | 6 | Select a browser or editor from the pop-up menu to view the document, or click Browse and locate an HTML viewing application on your system. | | 7 | Click Save as HTML. | | FreeHand generates an HTML file and saves it to the location specified in the HTML Setting Setup. The HTML application you specified in step 6 launches and displays the converted document. 
| | If you selected Show Output Warnings in step 4, the HTML Output Warnings dialog box appears, indicating any HTML errors in your document. |  | | For more information, see FreeHand Help (Help > Using FreeHand > Creating Web Graphics and Animation > Publishing FreeHand documents as HTML).
|
»
Add link lines to the document
Published 06/18/2006
Add link lines to the document Now you'll add lines to the document to show how the index page links to the individual files you specified. | 1 | In the Tools panel, click the Pen tool. 
| | 2 | Click once inside the document on the bottom border of the Index rectangle. This will mark your starting point for the first line. 
| | 3 | Hold down the Shift key and click once just below the starting point, then move the pen tool across the page to the right and click again. | | Two straight lines appear on the page. 
| | Remember to hold down the Shift key while you draw your lines. Holding down the Shift key while drawing a line constrains the axis of the line to 45 or 90 degrees. | | 4 | Next, click the Line tool in the Tools panel. 
| | 5 | Position the cursor on the horizontal line above the News rectangle, hold down the Shift key, and drag a vertical line down to the top of the News rectangle. 
| | If your vertical line doesn't precisely match up with your horizontal line, you can select the vertical line with the Pointer tool and use the arrow keys on your computer keyboard to move it closer to the horizontal line in small increments. | | 6 | Repeat the procedure described in Step 5 until your diagram indicates links between the Index rectangle and the six rectangles below it. 
| | 7 | Lastly, draw lines from the Index rectangle down to the Species rectangle and the Search rectangle to indicate that the Index page will also link to these pages. You can use the Pen tool, the Line tool, or both. 
| | You now have a FreeHand document that depicts a full navigation scheme. Your lines show that the Index page will link to six separate pages for News, Conferences, Education, Publications, Links, and Contact information. It will also link to a page about a particular endangered species, as well as a page that will provide the results of the search application you'll build later. |
|
»
Add text to the rectangles
Published 06/18/2006
Add text to the rectangles Next you'll add text to your rectangles to describe the different pages of the website. | 1 | In the Tools panel, click the Text tool and click inside the first rectangle at the top left corner of the document. 
| | A text block with a text ruler on top of it appears inside the rectangle. | | Note: On the Macintosh, there will be no visible text block. | | 2 | Type the word Index inside the text block. If you are using a PC, you will see the text block expand as you type. 
| | 3 | Click outside the text block to de-select it. You should see the word "Index" inside the rectangle, typed in the default font color black. Next you'll change the color and style of the font to make the text more visible. | | 4 | Choose Edit > Select > None to make sure both the rectangle and the text block are de-selected. | | 5 | In the Tools panel, click the Pointer tool and click inside the document on the word "Index" to select the text block again. | | An outline of the text block appears around the text. | | 6 | In the Tools panel, click the Fill color box and select white (FFFFFF) as the fill color for the text. | | 7 | In the Text inspector (Window > Inspectors > Text), select Bold from the Style pop-up menu. 
| | 8 | From the Font size pop-up menu, select 18 as the font size. | | 9 | Drag the text block to the center of the rectangle. You can position the text block more precisely by using the arrow keys on your computer keyboard. The arrow keys will move the text block up, down, left, and right, one point at a time. For more information, see FreeHand Help (Help > Using FreeHand > Working with Objects > Moving Objects). | | 10 | Repeat steps one through eight for the remaining eight rectangles using the following text: News, Conferences, Education, Publications, Links, Contact, Species, and Search. When you're finished, your document should look something like the diagram below. 
|
|
»
Create rectangles for the navigation scheme
Published 06/18/2006
Create rectangles for the navigation scheme Once you know what your links will be and where they will lead, you are ready to sketch the site navigation scheme in FreeHand 10. | 1 | In FreeHand, create a new file by selecting File > New. | | 2 | In the Tools panel, click the Rectangle tool and drag a rectangle on the page. 
| | When you release the mouse button, the new rectangle will be selected. Leave the rectangle selected so you can alter its properties. | | Note: For this tutorial, we've drawn a rectangle that is 135 pixels wide and 52 pixels high. You can view and set the exact dimensions of a rectangle in the Object inspector (Window > Inspectors > Object). | | 3 | In the Tools panel, click the Fill color box and select a color from the pop-up color palette for the inside of the rectangle. For this tutorial we've chosen dark blue (003366) for the rectangle's fill. 
| | 4 | With the rectangle still selected, click the Stroke color box, and select a color from the pop-up color palette for the outline of the rectangle. The Stroke color box is above the Fill color box in the Tools panel. For this tutorial we've chosen a lighter blue (0099FF) for the rectangle's stroke. | | 5 | Save your document (File > Save) as navigation.FH10. Remember to save your work often as you make changes to your document. | | 6 | With the rectangle still selected, copy the rectangle to your clipboard by selecting Edit > Copy. | | 7 | Paste a copy of the rectangle onto the page by selecting Edit > Paste. | | A copy of the rectangle appears at the center of the page. | | 8 | Paste another rectangle on the page by selecting Edit > Paste. This time it will appear that no new rectangle is pasted. This is because the pasted copy appears directly above the rectangle at the center of the page. To move the new rectangle, click the Pointer tool in the Tools panel (the solid arrow in the top left corner), and drag the new rectangle. The rectangle you pasted moves across the page as you drag. | | 9 | Continue to paste rectangles (Edit > Paste) until you have nine rectangles on the page. You may need to drag the new rectangles to different locations on the page each time you paste them. | | 10 | Once you've created nine rectangles, use the Pointer tool to drag and position them as they're positioned in the diagram below. 
| | This arrangement will serve as the basis for your site's navigation scheme. |
|
»
Wildlife Project: Sketching your site's navigation scheme
Published 06/18/2006
This tutorial illustrates how you can use Macromedia FreeHand 10 to create preliminary sketches of your site's navigation scheme.
Plan the site navigation Once you have determined your site's goals, target audience, and data requirements, you are ready to begin conceptualizing the site's navigation scheme. The site navigation is a "map" that depicts how your web pages relate to one another. Specifically, it shows how users will travel through your site as they click links and interact with application interfaces. A site's navigation scheme is normally reflected in the navigation bars used on web pages. During the early planning phase of the project, the people who contracted you to develop the site for The Wildlife Project requested an easy-to-use navigation scheme that would enable their users to find information about the group's conferences, educational programs, and publications. Your clients would also like the site to focus on current information about the world's endangered species, and provide a search application that will let users search for a wildlife group in their area of the country. You decide on a simple navigation scheme that will consist of eight links, all centralized on an index page. At the top of the index page, you'll create a Macromedia Fireworks MX navigation bar that will link to separate pages for news, conferences, education, publications, links, and contact information. Elsewhere on the page, you'll create a link to a special page that provides the most current information about a particular endangered species. You'll also create a link to a results page that will display the results of the search application. Once you have determined your site's goals, target audience, and data requirements, you are ready to begin conceptualizing the site's navigation scheme. The site navigation is a "map" that depicts how your web pages relate to one another. Specifically, it shows how users will travel through your site as they click links and interact with application interfaces. A site's navigation scheme is normally reflected in the navigation bars used on web pages. During the early planning phase of the project, the people who contracted you to develop the site for The Wildlife Project requested an easy-to-use navigation scheme that would enable their users to find information about the group's conferences, educational programs, and publications. Your clients would also like the site to focus on current information about the world's endangered species, and provide a search application that will let users search for a wildlife group in their area of the country. You decide on a simple navigation scheme that will consist of eight links, all centralized on an index page. At the top of the index page, you'll create a Macromedia Fireworks MX navigation bar that will link to separate pages for news, conferences, education, publications, links, and contact information. Elsewhere on the page, you'll create a link to a special page that provides the most current information about a particular endangered species. You'll also create a link to a results page that will display the results of the search application.
|
PSDTop offers Royalty Free files like PSDs and JPGs. PSD files are prepared for instant use in collages, banners, animations and other computer graphic related tasks - PSD files : PSD stock images & much more...!!! Files are multi layered and isolated. Just download a file, imort it to a program able to read .psd format (Adobe Photoshop, GIMP, other) and that's it - a new layer is added. PSD files are zipped to make transfer faster.
|
