User manual MACROMEDIA STUDIO 8-EXPLORING STUDIO 8

[. . . ] Exploring Studio 8 Trademarks 1 Step RoboPDF, ActiveEdit, ActiveTest, Authorware, Blue Sky Software, Blue Sky, Breeze, Breezo, Captivate, Central, ColdFusion, Contribute, Database Explorer, Director, Dreamweaver, Fireworks, Flash, FlashCast, FlashHelp, Flash Lite, FlashPaper, Flash Video Encoder, Flex, Flex Builder, Fontographer, FreeHand, Generator, HomeSite, JRun, MacRecorder, Macromedia, MXML, RoboEngine, RoboHelp, RoboInfo, RoboPDF, Roundtrip, Roundtrip HTML, Shockwave, SoundEdit, Studio MX, UltraDev, and WebHelp are either registered trademarks or trademarks of Macromedia, Inc. and may be registered in the United States or in other jurisdictions including internationally. Other product names, logos, designs, titles, words, or phrases mentioned within this publication may be trademarks, service marks, or trade names of Macromedia, Inc. or other entities and may be registered in certain jurisdictions including internationally. [. . . ] Next, you need to resize and position the rounded rectangle. You decide to do this precisely with the Property inspector. 1. With the rounded rectangle still selected, in the Property inspector, type 700 in the width box (W), type 340 in the height box (H), type 0 for the X position, type 255 for the Y position, and then press Enter to apply the last value. The Y position is only an approximation. You can alternatively use the arrow keys to nudge the rounded rectangle up or down until it is about 6 pixels below the slideshow placeholder image. 150 Tutorial: Creating Page Mock-ups N OT E After resizing the rounded rectangle, you notice that the rounded edges are distorted. You want to adjust these to create appropriately rounded corners. The rounded rectangle is a Fireworks Auto Shape, so you can use the Auto Shape Properties panel to adjust the roundness of the corners. 1. With the rounded rectangle still selected, open the Auto Shape Properties panel by selecting Window > Auto Shape Properties (not Window > Auto Shapes). Enter 20 for the roundness of the first corner, and then press Enter. Because the values are locked, changing one roundness value changes all the other values. 2. At the same time, Fireworks adjusts the corners of the shape on the canvas. 3. 4. Close the Auto Shapes Properties panel, and then click anywhere outside the canvas to deselect the rounded rectangle. Save your work. Create a navigation sidebar area Next, you decide to create a rectangle to define the navigation sidebar for the web page. 1. 2. Select the Rectangle tool in the Vector section of the Tools panel. Position the cross-hair pointer in the rounded rectangle you drew earlier and drag downward and to the right to create a vertical rectangle for the sidebar. You can draw the rectangle anywhere on the canvas. You'll resize and position it later. When you release the mouse button, a rectangle appears, selected, in the area you defined. Create a composite of the content area 151 Next, you need to give the rectangle an orange fill. 1. With the rectangle still selected, in the Property inspector, click the Fill Color box next to the bucket icon. Type A3210A in the text box at the top of the window, and then press Enter. Click the Stroke Color box next to the pencil icon, and then click the Transparent button at the top of the Stroke Color pop-up window. 2. 3. The rectangle now has an orange fill and no stroke. Next, you need to resize and position the rounded rectangle. You decide to do this precisely with the Property inspector. 1. With the rectangle still selected, in the Property inspector, type 140 in the width box (W), type 295 in the height box (H), type 0 for the X position, type 278 for the Y position, and then press Enter to apply the last value. The Y position is only an approximation. You can use the arrow keys to nudge the rounded rectangle up or down until it is centered vertically with the rounded rectangle you drew earlier. The difference in height between the two objects is 45 pixels, so the top of the orange rectangle should be 22 or 23 pixels below the top of the dark red rounded rectangle. 2. 152 Tutorial: Creating Page Mock-ups N OT E Save your work. Create the copy area Finally, you need to create an off-white rectangle to represent the area where the web page's text will appear. 1. [. . . ] the Select All Files in This Folder button. In the Shared Asset Properties dialog box, do the following: a. b. You're going to allow Chefs to add images to the site, but if you wanted to restrict users to editing text only, you could select the Only Allow Text Editing and Formatting option in the General Editing Restrictions section. 14. 16. Click in the ALT text column beside the special_pasta image. [. . . ]