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. [. . . ] 160 5 Review your task Café Townsend, a fictional restaurant, hired your team to design and build their website. During the early planning stages of the project, members of your team met with Cafe Townsend representatives to brainstorm ideas for the website. During the meeting, your team sketched several possible designs on napkins (the meeting was held in a Cafe Townsend restaurant). 143 When the team returned to the office, they told you the clients particularly liked two designs, which were captured in the following napkin sketches: 144 Tutorial: Creating Page Mock-ups You're given the task of creating a page mock-up of the second design to show to the clients. The mock-up will look like a real web page but it won't work like one. Create and save a new document After previewing the completed page mock-up, you're ready to begin your project. If you haven't already set up a working folder, you must do so before you begin. For instructions, see "Setting Up Your Site and Project Files. " 1. In the New Document dialog box, enter 700 for the width and 600 for the height. Set the Canvas color to Custom and select black from the custom color menu. The New Document dialog box should look as follows: 4. Click OK to create the document. A Document window appears with a title bar that reads Untitled-1. png (Windows) or Untitled-1 (Macintosh). If the Document window isn't maximized, that is, if it doesn't fill the center of the screen, maximize it by clicking the Maximize button (Windows) or the zoom box (Macintosh) at the top of the Document window. This step will give you plenty of room to work. Create and save a new document 145 5. Select File > Save, and then browse to the following folder on your hard disk: local_sites/cafe_townsend/fireworks_assets/ Name the file homepage-mockup. 6. NO TE On the Macintosh, select the Add Filename Extension option if it's not already selected. At the end of this tutorial, you'll learn how to export your document to another format for the web. Import and place images Next you import images and position them on the Fireworks canvas to see how they'll fit on the final web page. Import the banner graphic The banner graphic you have is a mock-up of the banner you'll use on the actual page. You'll produce the final version of the banner in "Tutorial: Creating a Page Banner" on page 195". 1. Select File > Import and browse to the following folder on your hard disk: local_sites/cafe_townsend/fireworks_assets/ Select banner-mockup. jpg and click Open. An insertion pointer appears indicating where the upper-left corner of the graphic will be positioned. 2. 3. Align the pointer with the upper-left corner of the canvas and click to insert the banner graphic. The banner graphic appears surrounded by a blue frame indicating that it's the currently selected object. 146 Tutorial: Creating Page Mock-ups 4. Use the arrow keys on your keyboard to precisely align the banner graphic with the top of the canvas. The banner is correctly aligned if the values of its X and Y coordinates in the Property inspector are both 0. The Property inspector is located at the bottom of the Document window. 6. Click anywhere outside the selected banner graphic to deselect it. Save your work. Import the slideshow placeholder image Next, you import a placeholder image representing the size and position of a Flash-based photo slideshow that will be on the final web page. Placeholder images are valuable for representing how a composition element will look without having to accommodate the large file size or having to build the complex element in its final form. 1. Select File > Import and browse to the following folder on your hard disk: local_sites/cafe_townsend/fireworks_assets/ Double-click slideshow-placeholder. jpg. Position the insertion pointer about 6 pixels below the banner graphic you imported earlier, and then click to insert the slideshow placeholder. [. . . ] In the Choose Folder dialog box, double-click the Cafe Townsend folder in the window, double-click the images folder, and then doubleclick the menu_images folder. 6. 7. 338 Tutorial: Setting Up Your Website for Contribute Users 8. In the Edit "Chef" Settings dialog box, select the Editing category from the list on the left. the Other Editing Options section, select Require ALT Text for Images. [. . . ]