Page 1 Exploring Studio 8...
Page 2 If you access a third-party website mentioned in this guide, then you do so at your own risk. Macromedia provides these links only as a convenience, and the inclusion of the link does not imply that Macromedia endorses or accepts any responsibility for the content on those third-party sites.
Page 3: Table Of Contents
Contents PART 1: GETTING STARTED Introduction ..........9 What you can do with Studio 8 .
Page 4 PART 2: SETTING UP YOUR ENVIRONMENT AND PLANNING YOUR PAGE DESIGN Chapter 4: Tutorial: Setting Up Your Site and Project Files . . . 137 Learn about Dreamweaver sites ....... 137 Set up your project files .
Page 5 Chapter 9: Tutorial: Building Your First Flash Application ..215 Review your task..........216 Examine the completed application .
Page 6 Chapter 12: Tutorial: Formatting Your Page with CSS ..295 Locate your files..........296 Review your task .
Page 7 PART 1 Getting Started In this part, you’ll familiarize yourself with the Macromedia Studio 8 software suite and learn everything you need to do before you begin building your website. This part contains the following sections: Introduction ..........9 Learning Studio .
Page 9: Introduction
Introduction This manual introduces you to Macromedia Studio 8, an integrated web development suite that includes Macromedia Dreamweaver 8, Macromedia Flash Professional 8, Macromedia Fireworks 8, Macromedia Contribute 3.1, and Macromedia FlashPaper 2. This manual gives an overview of the products, introduces conceptual information about website development, and shows you how to build a simple but functional website through a series of tutorials.
Page 10: What You Can Do With Studio 8
Macromedia Fireworks or another graphics application, and then import them directly into Dreamweaver. Dreamweaver also provides tools that make it easy to add Macromedia Flash assets to web pages. In addition to drag-and-drop features that help you build web pages,...
Page 11 “Getting the most from the Dreamweaver documentation” on page What you can do with Flash With the wide array of features in Macromedia Flash, you can create many types of applications. The following are some examples of the kinds of...
Page 12 What you can do with Fireworks You can use Macromedia Fireworks to create, edit, and animate web graphics, add advanced interactivity, and optimize images in a professional environment. In Fireworks, you can create and edit bitmap and vector graphics in a single application.
Page 13 Dreamweaver, to build your website. That includes planning, designing, developing, testing, and publishing the website. When that work is done, you can use Macromedia Contribute to manage your site, and to set up users to maintain content on the site.
Page 14: Installing Studio 8
Installing Studio 8 This section describes the installation procedure for Studio 8. You can install Studio 8 on Windows and Macintosh systems. Macromedia recommends that you install the suite of tools in one simple operation, but you can selectively install individual applications if you choose to do so.
Page 15 Install Studio 8 icon on the desktop. Do one of the following: To install the Studio 8 suite of tools, click Install. (Macromedia recommends this option.) To install only a single application, select it from the screen, and then click Install.
Page 16: Activating Your Studio Products
Studio 8 products, the other products are also registered. When you register, you can sign up to receive up-to-the-minute notices about upgrades and new Macromedia products. You can also sign up for timely e-mail notices about product updates and new content that appears on www.macromedia.com.
Page 17: Chapter 1: Learning Studio
CHAPTER 1 Learning Studio Macromedia Studio 8 includes a variety of resources to help you learn the Studio programs quickly. This chapter outlines all of the documentation resources that are available to you, and provides detailed information about using the help systems in the Studio products.
Page 18 Accessing the Dreamweaver documentation The following table summarizes the documentation included in the Dreamweaver help system. You can purchase printed versions of select titles. For more information, see www.macromedia.com/go/buy_books. Title Description/ Where to Find It Audience Basic introduction to •...
Page 19 • View in Dreamweaver: Extending Select Help > Extending Dreamweaver Dreamweaver Dreamweaver framework and • View online: http:// application livedocs.macromedia.com/ programming go/livedocs_dreamweaver/ interface (API). • Get the PDF: Intended for advanced www.macromedia.com/go/ users who want to dw_documentation build extensions or...
Page 20 • View in Dreamweaver: Select Help > Using most important books ColdFusion in the ColdFusion • View online: http:// documentation set. livedocs.macromedia.com/ (The full set is go/livedocs_coldfusion/ available on • Get the PDF: LiveDocs.) Intended www.macromedia.com/go/ for anyone interested cf_documentation...
Page 21 Getting the most from the Flash documentation The Macromedia Flash help system contains a great deal of information and resources that describe the full range of Flash authoring capabilities and the ActionScript language. Many online resources are also available to help you learn Flash.
Page 22 Basic introduction to • View in Flash: Select Help > Getting Started Flash Help Flash concepts and with Flash • View online: interface, with a livedocs.macromedia.com/ detailed beginner go/livedocs_flash tutorial. Intended for • Get the PDF: beginning Flash users. www.macromedia.com/go/ fl_documentation Comprehensive •...
Page 23 A collection of step- • View in Flash: Select Help > Flash Tutorials Flash Help by-step tutorials that • View online: teach a variety of both livedocs.macromedia.com/ beginning and go/livedocs_flash advanced Flash • Get the PDF: techniques. Intended www.macromedia.com/go/ for all Flash users.
Page 24 Information about how • View in Flash: Select Help > Using Flash Help to use and customize Components • View online: components in your livedocs.macromedia.com/ Flash documents. go/livedocs_flash Intended for all Flash • Get the PDF: users. www.macromedia.com/go/ fl_documentation Dictionary-style •...
Page 25 Introductory • View in Flash: Select Getting Started Help > Flash Help information about with Flash Lite • View online: Flash Lite workflows livedocs.macromedia.com/ and authoring go/livedocs_flash considerations. • Get the PDF: Intended for mobile www.macromedia.com/go/ and device developers flash_lite_documentation and intermediate Flash users.
Page 26 Flash development team. Macromedia Classroom and online www.macromedia.com/go/ • flash_training Training instruction offered by Macromedia training partners. Flash Resource An alternative viewer www.macromedia.com/go/ • flash_resource_manager Manager (English for viewing the Flash only) help system outside the Flash application.
Page 27 • View in Fireworks: Select Getting Started Help > Getting Started with Fireworks concepts with Fireworks Fireworks and interface, with a • View online: detailed beginner www.macromedia.com/go/ tutorials. Intended for livedocs_fireworks beginning Fireworks • Get the PDF: users. www.macromedia.com/go/ fireworks_documentation Comprehensive •...
Page 28 Accessing additional online Fireworks resources The following table summarizes additional online resources for learning Fireworks. Resource Description Where to Find It Fireworks Product manuals, www.macromedia.com/go/ • fw_documentation Documentation errata, tutorials, and Resource Center release notes. Fireworks Articles and tutorials www.macromedia.com/go/ •...
Page 29 • Get the PDF: should know when www.macromedia.com/go/ deploying Contribute contribute_docs_en within an organization. • In Contribute: Select Help > Topics include setting Macromedia Contribute Help, network and server and open Administering permissions, Contribute. configuring Contribute to work with your website, managing...
Page 30 Title Description/ Where to Find It Audience Using and Comprehensive • In Contribute: Select Help > Macromedia Contribute Help Administering information about the • View online: Contribute Contribute features. livedocs.macromedia.com Intended for all • Get the PDF: Contribute users and www.macromedia.com/go/...
Page 31 Accessing additional online Contribute and FlashPaper resources The following table summarizes additional online resources for learning Contribute and FlashPaper. Resource Description Where to Find It Contribute Product manuals, www.macromedia.com/go/ • contribute_docs_en Documentation errata, tutorials, and Resource Center release notes. Contribute Articles and tutorials www.macromedia.com/go/...
Page 32: Using The Studio Help Systems
Resource Description Where to Find It FlashPaper Discussion and www.macromedia.com/go/ • flashpaper_forums Forum problem-solving information by FlashPaper users, technical support representatives, and the FlashPaper development team. Using the Studio help systems The online help systems for the Studio products are available in the Help menu of each product.
Page 33 Select Help > Dreamweaver Help. To open Fireworks Help: Select Help > Fireworks Help. To open Contribute Help: Select Help > Macromedia Contribute Help. To open FlashPaper Help: Select Help > FlashPaper Help. Searching help You can do a full text search in the help systems.
Page 34 Using the help index You can find information quickly in the help index. To use the index (Windows): In the help system, click the Index tab. Scroll to an index entry in the alphabetized list and double-click it to display the indexed information. To use the index (Macintosh): You can start typing In the help system, click the Index link in the table of contents.
Page 35 Printing the documentation The Studio documentation is available in PDF format on the Macromedia website at www.macromedia.com/go/st_documentation. You can print all or part of the PDF on your own printer, or you can take the PDF to a copy shop to have it printed.
Page 36 This section covers the following topics: “Opening the Help panel” on page 36 “Searching the help system” on page 36 “Using context-sensitive help” on page 38 “Printing the Flash documentation” on page 39 “Purchasing printed documentation” on page 39 “Discussing the Flash documentation with LiveDocs” on page 39 “Controlling the appearance of the Help panel”...
Page 37 Multiple-word searches return a list of help pages that each contain all of the search terms you enter. In this case the word and is implicit in the search. For example, you might type movie clip in the search text box. This action returns a list of pages that contain both movie and clip—that is, clip movie, movie clip, or movie...clip, and so on.
Page 38 To search for a word or phrase within a specific help page: Locate the help page you want to search. Click in the help page so it has the focus. Press Ctrl+F (Windows) or Command+F (Macintosh). In the Find dialog box, enter the word or phrase you want to search for and click Find Next.
Page 39 Printing the Flash documentation Printable versions of each of the books in the Flash help system are available on the Macromedia website. You can also print individual help pages from within the Flash Help panel. To print an individual book or chapter from the Macromedia...
Page 40 Please read these guidelines closely, or your comment might be removed from the website if it does not conform to the guidelines. If you have a question about Flash, please ask it on the Macromedia Flash web forums: www.macromedia.com/go/flash_forums. The web forums are...
Page 41 Control, and download the help system update. scrolling the mouse When a help update is released, Macromedia creates and posts a new PDF wheel. This also changes the size of of each updated book on the Macromedia documentation page at text in your web www.macromedia.com/go/fl_documentation/.
Page 42 Learning Studio...
Page 43: Chapter 2: Studio Basics
CHAPTER 2 Studio Basics Macromedia Studio offers an integrated workspace that allows for seamless transition between products. You will find that panels, menus, selection icons, and other user interface elements are similar across products and are easy to use. As you move between products, the consistent and familiar workspace helps you increase productivity while decreasing the amount of time you need to spend learning a new product.
Page 44 About Dreamweaver files You can work with a variety of file types in Dreamweaver. The primary kind of file you will work with is the HTML file. HTML files—or Hypertext Markup Language files—contain the tag-based language responsible for displaying a web page in a browser. You can save HTML files with either the .html or the .htm extension.
Page 45 ASPX , or ASP.NET files, have a .aspx extension. They are used to process dynamic pages. For more information on working with these types of files, see Chapter 41, “Building ASP.NET Applications Rapidly,” in Using Dreamweaver. , or PHP: Hypertext Preprocessor files, have a .php extension. They are used to process dynamic pages.
Page 46 The workspace layout In Windows, Dreamweaver provides an all-in-one-window integrated layout. In the integrated workspace, all windows and panels are integrated into a single larger application window. Insert bar Document toolbar Document window Panel groups Tag selector Property inspector Files panel The Windows workspace also has a Coder option, which docks the panel groups on the left side and displays the Document window in Code view by default.
Page 47 On the Macintosh, Dreamweaver can display multiple documents in a single window with tabs that identify each document. Dreamweaver can also appear as part of a floating workspace in which each document appears in its own individual window. Panel groups are initially docked together, but can be undocked into their own windows.
Page 48 The Document window The Document window shows the current document. You can select any of the following views: Design view is a design environment for visual page layout, visual editing, and rapid application development. In this view, Dreamweaver displays a fully editable, visual representation of the document, similar to what you would see viewing the page in a browser.
Page 49 The Document toolbar The Document toolbar contains buttons that let you toggle between different views of your document quickly: Code, Design, and a split view that shows both Code and Design views. The toolbar also contains some common commands and options related to viewing the document and transferring it between the local and remote sites.
Page 50 File Management displays the File Management pop-up menu. Preview/Debug in Browser allows you to preview or debug your document in a browser. Select a browser from the pop-up menu. Refresh Design View refreshes the document’s Design view after you make changes in Code view. Changes you make in Code view don’t automatically appear in Design view until you perform certain actions, such as saving the file or clicking this button.
Page 51 The Hand tool lets you click the document and drag it in the Document window. Click the Select tool to disable the Hand tool. The Zoom tool and Set Magnification pop-up menu let you set a magnification level for your document. For more information, see “Zooming in and out”...
Page 52 The Flash elements category enables you to insert Macromedia Flash elements. The Favorites category enables you to group and organize the Insert bar buttons you use the most in one common place.
Page 53 The Coding toolbar The Coding toolbar contains buttons that let you perform many standard coding operations, such as collapsing and expanding code selections, highlighting invalid code, applying and removing comments, indenting code, and inserting recently used code snippets. The Coding toolbar is visible only in Code view and appears vertically on the left side of the Document window.
Page 54 The Property inspector The Property inspector lets you examine and edit the most common properties for the currently selected page element, such as text or an inserted object. The contents of the Property inspector vary depending on the element selected. For example, if you select an image on your page, the Property inspector changes to show properties for the image (such as the file path to the image, the width and height of the image, the border around the image, if any, and so on).
Page 55 The Files panel You use the Files panel to view and manage the files in your Dreamweaver site. When you view sites, files, or folders in the Files panel, you can change the size of the viewing area, as well as expand or collapse the Files panel. When the Files panel is collapsed it displays the contents of the local site, the remote site, or the testing server as a list of files.
Page 56 The CSS Styles panel The CSS Styles panel lets you track the CSS rules and properties affecting a currently selected page element (Current mode), or the rules and properties affecting an entire document (All mode). A toggle button at the top of the CSS Styles panel lets you switch between the two modes.
Page 57: Flash Basics
In All mode, the CSS Styles panel displays two panes: an All Rules pane (on top), and a Properties pane (on bottom). The All Rules pane displays a list of rules defined in the current document as well as all rules defined in style sheets attached to the current document.
Page 58 ActionScript code is the programming code you can add to Flash documents to make them respond to user interactions and to more finely control the behavior of your Flash documents. Much can be accomplished in Flash without ActionScript, but using ActionScript offers many more possibilities.
Page 59 Flash documents. You can create a new file by clicking the desired template in the list. Extend links to the Macromedia Flash Exchange website, where you can download helper applications for Flash, Flash extensions, and related information. Flash basics...
Page 60 Flash documents. The Stage in the Flash authoring environment represents the rectangular space in Macromedia Flash Player or in a web browser window where your Flash document appears during playback. You can zoom in and out to change the view of the Stage as you work.
Page 61 Zooming To view the entire Stage on the screen, or to view a particular area of your drawing at high magnification, you can change the magnification level. The maximum magnification depends on the resolution of your monitor and the document size. The minimum value for zooming out on the Stage is 8%.
Page 62 To display the entire Stage, select View > Magnification > Show Frame or select Show Frame from the Zoom control at the upper-right corner of the Timeline. To display the workspace surrounding the Stage, select View > Work Area. The work area is shown in light gray. Use the Work Area command to view elements in a scene that are partly or completely outside of the Stage area.
Page 63 The Timeline status display at the bottom of the Timeline indicates the selected frame number, the current frame rate, and the elapsed time to the current frame. When an animation is played, the actual frame rate is displayed; this may differ from the document’s frame rate setting if the computer can’t calculate and display the animation quickly enough.
Page 64 You can resize the Timeline to change the number of layers and frames that are visible. When there are more layers than can be displayed in the Timeline, you can view additional layers by using the scroll bars on the right side of the Timeline.
Page 65 When you’re working with a large number of frames that can’t all be displayed in the Timeline at once, you can move the playhead along the Timeline to easily display a specific frame. To go to a frame: Click the frame’s location in the Timeline header, or drag the playhead to the desired position.
Page 66 To change the display of frames in the Timeline: Click the Frame View button in the upper-right corner of the Timeline to display the Frame View pop-up menu. Select from the following options: To change the width of frame cells, select Tiny, Small, Normal, Medium, or Large.
Page 67 You can perform the following modifications on frames or keyframes: Insert, select, delete, and move frames or keyframes Drag frames and keyframes to a new location on the same layer or on a different layer Copy and paste frames and keyframes Convert keyframes to frames Drag an item from the Library panel onto the Stage to add the item to the current keyframe...
Page 68 To select one or more frames in the Timeline: To select one frame, click the frame. If you have Span Based Selection enabled in the Preferences dialog box, clicking one frame selects the entire frame sequence between two keyframes. For more information, “Setting preferences in Flash”...
Page 69 To convert a keyframe to a frame, select the keyframe and select Edit > Timeline > Clear Keyframe, or right-click (Windows) or Control-click (Macintosh) the keyframe and select Clear Keyframe from the context menu. The Stage contents of the cleared keyframe and all frames up to the subsequent keyframe are replaced with the Stage contents of the frame preceding the cleared keyframe.
Page 70 You can also organize and manage layers by creating layer folders and placing layers in them. You can expand or collapse layer folders in the Timeline without affecting what you see on the Stage. It’s a good idea to use separate layers or folders for sound files, ActionScript, frame labels, and frame comments.
Page 71 You can change the height of layers in the Timeline in order to display more information (such as sound waveforms) in the Timeline. You can also change the number of layers displayed in the Timeline. To show or hide a layer or folder, do one of the following: Click in the Eye column to the right of the layer or folder name in the Timeline to hide that layer or folder.
Page 72 To change layer height in the Timeline: Do one of the following: Double-click the layer’s icon (the icon to the left of the layer name) in the Timeline. Right-click (Windows) or Control-click (Macintosh) the layer name and select Properties from the context menu. Select the layer in the Timeline and select Modify >...
Page 73 To rename a layer or folder, do one of the following: Double-click the name of the layer or folder in the Timeline and enter a new name. Right-click (Windows) or Control-click (Macintosh) the name of the layer or folder and select Properties from the context menu. Enter the new name in the Name text box and click OK.
Page 74 To delete a layer or folder: Select the layer or folder by clicking its name in the Timeline or any frame in the layer. Do one of the following: Click the Delete Layer button in the Timeline. Drag the layer or folder to the Delete Layer button. Right-click (Windows) or Control-click (Macintosh) the layer or folder name and select Delete Layer from the context menu.
Page 75 To expand or collapse all folders: Right-click (Windows) or Control-click (Macintosh) and select Expand All Folders or Collapse All Folders from the context menu. Using guide layers For help in aligning objects when drawing, you can create guide layers. You can then align objects on other layers to the objects you create on the guide layers.
Page 76 Using the Tools panel The tools in the Tools panel let you draw, paint, select, and modify artwork, as well as change the view of the Stage. The Tools panel is divided into four sections: The tools area contains drawing, painting, and selection tools. The view area contains tools for zooming and panning in the application window.
Page 77 Customizing the Tools panel You can customize the Tools panel to specify which tools appear in the authoring environment. You use the Customize Tools panel dialog box to add or remove tools from the Tools panel. You can display more than one tool in one location. When more than one tool is displayed in a location, the top tool in the group (the most recently used) is displayed with an arrow in the lower-right corner of its icon.
Page 78 Using the grid, guides, and rulers Flash can display rulers and guides that help you draw and lay out objects precisely. You can place guides in a document and snap objects to those guides, or turn on the grid and snap objects to it. You can also snap objects to other objects or to pixels, or align objects using specified snap tolerance boundaries.
Page 79 To display or hide the drawing guides: Select View > Guides > Show Guides. If the grid is visible and Snap to Grid is turned on when you create guides, guides will snap to the grid. To turn snapping to guides on or off: Select View >...
Page 80 To set guide preferences: Select View > Guides > Edit Guides and do any of the following: For Color, click the triangle in the color box and select a guide line color from the palette. The default guide color is green. Select or deselect Show Guides to display or hide guides.
Page 81 To set grid preferences: Select View > Grid > Edit Grid. For Color, click the triangle in the color box and select a grid line color from the palette. The default grid line color is gray. Select or deselect Show Grid to display or hide the grid. Select or deselect Snap to Grid to turn snapping to grid lines on or off.
Page 82 Depending on what is currently selected, the Property inspector displays information and settings for the current document, text, symbol, shape, bitmap, video, group, frame, or tool. When two or more different types of objects are selected, the Property inspector displays the total number of objects selected.
Page 83 To display the Library panel, do one of the following: Select Window > Library. Press Control+L (Windows) or Command+L (Macintosh). About the Actions panel The Actions panel lets you create and edit ActionScript code for an object or frame. Selecting a frame, button, or movie clip instance makes the Actions panel active.
Page 84 Panels let you work with objects, colors, text, instances, frames, scenes, and entire documents. For example, you use the Color Mixer panel to create colors, and the Align panel to align objects to each other or the Stage. To view the complete list of panels available in Flash, see the Window menu. Most panels include a pop-up menu with additional options.
Page 85 To close all panels: Select Window > Hide Panels. Arranging panels In Flash, you can organize panels into groups. You can rearrange the order in which panels appear within panel groups. You can also create new panel groups and dock panels to existing panel groups. If you want a panel to appear on its own, separated from other panel groups, you can float the panel.
Page 86 To float a panel: Drag the panel by its gripper and move it away from other panels. To create a new panel group: Drag the panel by its gripper, away from other panel groups. Add additional panels to the first panel to form a new group. Using panel sets You can create custom panel arrangements, and save these as custom panel sets.
Page 87 Setting preferences in Flash Flash lets you set preferences for general application operations, editing operations, and Clipboard operations. For more information about the drawing preferences, see “Specifying drawing settings” in Using Flash. The General category in the Preferences dialog box Flash basics...
Page 88 To set preferences: Select Edit > Preferences (Windows) or Flash > Preferences (Macintosh). In the Category list, select the one of the following: General ActionScript Auto Format Clipboard Drawing Text Warning Select from the respective options as described in the procedures that follow.
Page 89 For Test Movie Options, select Open Test Movie in Tabs to have Flash open a new document tab in the application window when you select Control > Test Movie. The default is to open the test movie in its own window. For Selection Options, select or deselect Shift Select to control how Flash handles selection of multiple elements.
Page 90 To set AutoFormat preferences for ActionScript: Select any of the check boxes. To see the effect of each selection, look in the Preview pane. To set Clipboard preferences, select from the following options: For Bitmaps (Windows only), select options for Color Depth and Resolution to specify these parameters for bitmaps copied to the Clipboard.
Page 91 To set warning preferences, select one of the following options: Select Warn on Save for Macromedia Flash 8 Compatibility to have Flash warn you when you try to save documents with content that is specific to the Flash Basic 8 or Flash Professional 8 authoring tool as a Flash MX 2004 file.
Page 92 Flash uses built-in keyboard shortcuts designed for the Flash application. You can also select a built-in keyboard shortcut set from one of several popular graphics applications, including Macromedia Fireworks, Adobe Illustrator, and Adobe Photoshop. To create a custom keyboard shortcut set, you duplicate an existing set, and then add or remove shortcuts from the new set.
Page 93 To view or print the current set of keyboard shortcuts: Select Edit > Keyboard Shortcuts. In the Keyboard Shortcuts dialog box, select the shortcut set you wish to view from the Current pop-up menu. Click the Export Set as HTML button. The Export Set as HTML button In the Save As dialog box that appears, select a name and location for the exported HTML file.
Page 94 To add or remove a keyboard shortcut: Select Edit > Keyboard Shortcuts (Windows) or Flash > Keyboard Shortcuts (Macintosh) and select the set that you want to modify. From the Commands pop-up menu, select Drawing Menu Commands, Drawing Tools, Test Movie Menu Commands, or Workplace Accessibility Commands to view shortcuts for the selected category.
Page 95 Using context menus Context menus contain commands relevant to the current selection. For example, when you select a frame in the Timeline window, the context menu contains commands for creating, deleting, and modifying frames and keyframes. Context menus exist for many items and controls in many locations, including on the Stage, in the Timeline, in the Library panel, and in the Actions panel.
Page 96 Selecting panels or the Property inspector with keyboard shortcuts You can select a panel or the Property inspector (also referred to as applying focus to the panel or Property inspector) by using the keyboard shortcut Control+Alt+Tab (Windows) or Command+Option+Tab (Macintosh). You can apply focus to a panel or the Property inspector only when the panel or Property inspector is visible in the Flash application window.
Page 97 To use keyboard shortcuts to expand or collapse panels or the Property inspector: Press Control+Alt+Tab (Windows) or Command+Option+Tab (Macintosh) until the panel you wish to expand or collapse has focus. A dotted line appears around the title of the currently focused panel. Press the Spacebar to expand or collapse the currently selected panel.
Page 98 To move the focus from a panel title bar to a panel pop-up menu, do one of the following: Press Tab. Press the Right Arrow key. Press the Left Arrow key or Shift+Tab to return the focus to the panel title bar. If the panel is in a group, press the Up Arrow key to move the focus to the options pop-up menu of the panel immediately above the panel with the current focus.
Page 99 When the focus is applied to a dialog box control button—such as the OK, Cancel, or Apply button—press Enter to activate the button (equivalent to clicking the button). When the focus is not applied to any dialog box control button—such as the OK, Cancel, or Apply button—press Enter to apply the current settings and close the dialog box (equivalent to clicking OK).
Page 100 Objects on layers that are hidden or locked cannot be selected with the Tab key. If you are currently typing text into a text box, you cannot select an object using the keyboard focus. You must first change the focus to the Stage and then select an object.
Page 101 Items are cut, copied, and pasted using the following criteria: You can cut or copy one item or multiple items. You cannot paste a shape from the Stage into the library. You cannot paste a library item into a common library, because common libraries cannot be modified.
Page 102: Fireworks Basics
HTML files that contain JavaScript code. You can also export or save an image as a file type specific to another application, such as Photoshop or Macromedia Flash, if you want to continue working in the other application. The following are the most common file types in Fireworks: , or Portable Network Graphic, is the native file format for Fireworks.
Page 103 Getting to know the Fireworks workspace When you open a document in Fireworks for the first time, Fireworks activates the work environment, including the Tools panel, Property inspector, menus, and other panels. The Tools panel, on the left of the screen, contains labeled categories, including bitmap, vector, and web tool groups.
Page 104 Using the Tools panel The Tools panel is organized into six categories: Select, Bitmap, Vector, Web, Colors, and View. About bitmap and vector graphics Computers display graphics in either vector or bitmap format. Understanding the difference between the two formats helps you understand Fireworks, which contains both vector and bitmap tools and is capable of opening or importing both formats.
Page 105 Vector graphics render images using lines and curves, called vectors, that include color and position information. When you edit a vector graphic, you modify the properties of the lines and curves that describe its shape. Vector graphics are resolution-independent, which means you can move, resize, reshape, or change the color of a vector graphic, as well as display it on output devices of varying resolutions, without changing the quality of its appearance.
Page 106 To select an alternative tool from a tool group: Click the tool icon and hold down the mouse button. A pop-up menu appears with tool icons, tool names, and shortcut keys. The currently selected tool has a check mark to the left of the tool name.
Page 107 To expand a half-height Property inspector to full height, revealing additional options: Click the expander arrow in the lower right corner of the Property inspector. Click the icon in the upper-right of the Property inspector and select Full Height from the Property inspector Options menu. In Windows, the Options menu is available only when the Property inspector is docked.
Page 108 The Layers panel organizes a document’s structure and contain options for creating, deleting, and manipulating layers. The Frames panel includes options for creating animations. The History panel lists commands you recently used so that you can quickly undo and redo them. In addition, you can select multiple actions, and then save and reuse them as commands.
Page 109 The Auto Shape Properties panel (Window > Auto Shape Properties) lets you set the properties of Auto Shapes. The Image Editing panel (Window > Image Editing) assembles the most commonly used tools for photo editing in one place. The Special Characters panel (Window >...
Page 110 To collapse or expand a panel group or panel, do one of the following: Click the title of the panel group or panel. The title bar is still visible when the panel group or panel is collapsed. Click the expander arrow in the upper left corner of the panel group or panel.
Page 111 The Quick Export button lets you export your Fireworks files to a number of Macromedia applications, including Dreamweaver, Flash, Director, and Macromedia FreeHand MX. In addition, you can export your files to Photoshop, FrontPage, Adobe GoLive, and Illustrator, or you can preview your files in the browser of your choice.
Page 112: Contribute Basics
When your document is maximized in Windows, you can easily choose among multiple open documents by using the document tabs that appear at the top of the document window. Each open document displays its filename on a tab. Contribute basics To get the most out of your Contribute experience, you should understand the basic elements of the Contribute workspace.
Page 113 Identifying parts of the Contribute workspace The three main areas of the Contribute workspace are the Contribute browser/editor, the toolbar, and the sidebar. Toolbar Start page in the browser/editor Sidebar The Contribute browser/editor You use the main window in Contribute for browsing and editing. If you are not sure whether you are browsing or editing in Contribute, look at the toolbar.
Page 114 The Contribute toolbars The Contribute toolbar changes according to whether you are browsing or editing a page. When you are editing, the editor toolbar enables you to edit text or images, depending on the content you’ve selected. Depending on the role the Contribute administrator assigned you, some buttons in the toolbars might not be enabled for you.
Page 115 The image editing toolbar contains buttons for editing images. Align left Center Align right Resize Justify Resize Brightness/Contrast Image properties Sharpen Crop Rotate The Contribute sidebar You can use the Contribute sidebar to switch between editing and browsing, and obtain quick access to your drafts. You can also use the sidebar to get instructions for performing tasks in Contribute.
Page 116 You can click any link in the How Do I panel in the sidebar to get more information on that task. If the task you’re looking for is not in the list, see Using Contribute (Help > Macromedia Contribute Help) for detailed information.
Page 117 Switching between browsing and editing You can use Contribute to browse or edit web pages. You can switch between browsing and editing at any time. When you leave a draft that you’re editing, Contribute saves your changes so that you can return to the draft later and continue editing where you left off.
Page 118: Flashpaper Basics
When you embed Flash documents in a web page, you can view them across platforms in any browser that supports Flash. You can view SWF files directly in Macromedia Flash Player, and you can view PDF files directly in Adobe Acrobat Reader.
Page 119 The FlashPaper workspace consists of the FlashPaper toolbar, which is the same in both the application and the viewing environments. The FlashPaper toolbar enables you to resize a document for viewing, navigate through the document pages, select text, search the document, and print the document.
Page 120 To resize the document, do one of the following: Use the Zoom slider to dynamically resize the document. You can adjust the document magnification range from 25% to 250%. The Zoom text box updates as you use the slider. Enter a number in the Zoom text box to resize the document to a specific magnification.
Page 121: Chapter 3: Web Development Workflow
CHAPTER 3 Web Development Workflow This chapter demonstrates how the individual components of Macromedia Studio 8—Macromedia Dreamweaver 8, Macromedia Flash 8, Macromedia Fireworks 8, Macromedia Contribute 3, and Macromedia FlashPaper 2—make up a comprehensive suite for designing, developing, and maintaining interactive online experiences, as part of a typical web development workflow.
Page 122: Planning Your Website
Creating content assets, which includes creating images, video, and so on with Fireworks and Flash Building application assets, which includes creating dynamic pages and Rich Internet Applications with Dreamweaver and Flash Assembling, testing, and deploying your site, which includes formatting text, compiling your assets, ensuring that you have met accessibility requirements, testing your code, and publishing your site to a server with Dreamweaver Maintaining and updating your site, which includes keeping your...
Page 123: Setting Up The Development Environment
Determine your site goals Ask yourself or your client questions about the site, and write down your goals so that you remember them as you go through the design process. A list of goals helps you focus and target your website to your particular needs.
Page 124 Choose a web server and install it on your local or networked computer A web server is software that serves files in response to requests from web browsers. When the web server receives a request for a static HTML page, the server reads the request, finds the page, and sends it to the requesting browser.
Page 125: Planning Page Design And Layout
Related tutorial Chapter 4, “Tutorial: Setting Up Your Site and Project Files,” on page 137 Planning page design and layout A web design project usually begins with storyboards or flowcharts that the designers and developers then turn into sample pages. You can use Studio 8 to create sample pages as you work toward a final design.
Page 126 For example, consider the following sketch: A mock-up in Fireworks might look like this: 126 Web Development Workflow...
Page 127 When you finish creating a mock-up in Fireworks, you can export it as a Flash SWF file. Any computer running Flash Player can then display your work. Related tutorial Chapter 5, “Tutorial: Creating Page Mock-ups,” on page 143 Creating page layouts in Dreamweaver Page layout is one of the most important aspects of web design.
Page 128: Creating Content Assets
Creating content assets After you know what your design and layout will look like, you can create and gather the assets that you will need for your website. Assets can be items such as images (including buttons, banner graphics, logos, photographs, and so on), text, Flash content, or other media.
Page 129 Creating Flash content and video Your Flash content can include graphics, text, animation, and applications for websites. Flash content consists primarily of vector graphics, but it can also include video, bitmap graphics, and sounds. Because Flash content uses compact vector graphics, it downloads rapidly and scales to the viewer’s screen size.
Page 130: Assembling, Testing, And Deploying
Flash treats Flash Video as simply another media type, so you can layer, script, and control video just as you would any other object in a SWF file. Related tutorials Chapter 9, “Tutorial: Building Your First Flash Application,” on page 215 Chapter 10, “Tutorial: Building a Video Player (Flash Professional only),”...
Page 131 After assembling your page, you can edit the assets directly in the Dreamweaver workspace. You can perform a number of simple image- editing tasks—including cropping, adjusting contrast, optimizing, and sharpening—without the assistance of an image-editing application. For more complex editing, you can start Fireworks to edit images inserted into a Dreamweaver document.
Page 132 Monitor the size of your pages and the time that they take to download. Keep in mind that for pages that consist of one large table, visitors will see nothing until the entire table is downloaded. Consider breaking up large tables; if this is not possible, consider putting a small amount of content, such as a welcome message or an advertising banner, outside the table at the top of the page so that users can view this material while the table downloads.
Page 133: Maintaining And Updating Your Site
Maintaining and updating your site When the bulk of the site has been published, you need to continue to update and maintain it. Publishing your site—that is, deploying the site to a server and making it live—is an ongoing process. Dreamweaver has many tools to help you manage your site, transfer files to and from a remote server, set up a check-in/check-out process to prevent files from being overwritten, and synchronize the files on your local and...
Page 134 134 Web Development Workflow...
Page 135: Part 2: Setting Up Your Environment And Planning Your
In this part, you’ll begin building the Cafe Townsend sample website. Before you begin, you must copy the sample files and set up your project. Then you’ll use Macromedia Fireworks 8 and Macromedia Dreamweaver 8 to create a web page design for the Cafe Townsend home page.
Page 137: Chapter 4: Tutorial: Setting Up Your Site And Project Files
Tutorial: Setting Up Your Site and Project Files This tutorial introduces you to the concept of a Macromedia Dreamweaver 8 site and shows you how to set up the project files for the Cafe Townsend sample website. In Dreamweaver, a site generally consists of two parts: a collection of files on a local computer (the local site), and a location on a remote web server that you upload the files to when you’re ready to make...
Page 138 A Dreamweaver site consists of as many as three parts, depending on your computing environment and the type of website you are developing: Local folder is your working directory. Dreamweaver refers to this folder as your local site. The local folder is usually a folder on your hard disk. Remote folder is where you store your files, depending on your environment, for testing, production, collaboration, and publication.
Page 139: Set Up Your Project Files
Macintosh as a web server. Locate the cafe_townsend folder on Studio 8 disc 2 or download it from www.macromedia.com/go/st_documentation. About local and remote “root” folders The local “root” folder of your Dreamweaver site is often the main or top-level folder for your website. It usually corresponds to an identical folder on the remote site (web server).
Page 140: Define A Local Folder
Copy the cafe_townsend folder into the local_sites folder. The cafe_townsend folder is the folder that you will use as the root folder (main folder) for your Dreamweaver site. Define a local folder You must define a Dreamweaver local folder for each new website you create.
Page 141 In the Default Images Folder text box, specify the images folder that already exists in the cafe_townsend folder. You can click the folder icon to browse to and select the folder, or enter a path in the Default Images Folder text box. The Site Definition dialog box should now look as follows: Click OK.
Page 142 The Files panel now shows the new local root folder for your current site. The file list in the Files panel acts as a file manager, allowing you to copy, paste, delete, move, and open files just as you would on a computer desktop.
Page 143: Chapter 5: Tutorial: Creating Page Mock-Ups
Mock-ups This tutorial will guide you through the basic tasks of creating a mock-up of a web page with Macromedia Fireworks 8. Page mock-ups are typically used to show proposed page designs to colleagues or clients. Once a design is approved, the mock-up is used by web designers as a blueprint to create the page.
Page 144 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...
Page 145: Create And Save A New Document
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.
Page 146: Import And Place Images
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. On the Macintosh, select the Add Filename Extension option if it’s not already selected. Click Save. The title bar displays the new filename with a .png extension. PNG is the native file format for Fireworks.
Page 147 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.
Page 148: Create A Composite Of The Content Area
Create a composite of the content area Now you’re ready to create a mock-up of the content area of the web page. You’ll draw Fireworks vector objects to graphically represent areas of the web page. Before you begin, you review the napkin sketch to refresh your memory of the design.
Page 149 Select the Rounded Rectangle tool in the Vector section of the Tools panel. The Rounded Rectangle tool is a shape tool. Click the expander icon on the shape icon to select it. In the Document window, position the cross-hair pointer over the canvas, and drag downward and to the right to create the shape.
Page 150 With the rounded rectangle still selected, in the Property inspector, click the Fill Color box next to the bucket icon. The Fill Color pop-up window opens. Type 6B1101 in the text box at the top of the window, and then press Enter.
Page 151 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.
Page 152 Next, you need to give the rectangle an orange fill. With the rectangle still selected, in the Property inspector, click the Fill Color box next to the bucket icon. The Fill Color pop-up window appears. Type A3210A in the text box at the top of the window, and then press Enter.
Page 153: Place Text And Images
Now you need to give the rectangle an off-white fill. With the rectangle still selected, in the Property inspector, click the Fill Color box next to the bucket icon. The Fill Color pop-up window appears. Type F7EEDF in the text box at the top of the window, and then press Enter.
Page 154 Place placeholder text for the links The first element to create is the text representing the navigation links. Select the Text tool in the Vector section of the Tools panel, and move the pointer over the Document window. The pointer changes to an I-beam, and the Property inspector displays text properties.
Page 155 Type the following items, pressing Enter after each to start a new line: Chef Ipsum Articles Special Events Location Menu Contact Us When you complete this step, you have a text block representing the navigation links. Click the Pointer tool in the Tools panel to deselect the text box. Save your work.
Page 156 Position the insertion pointer about 6 pixels below and to the right of the upper-left corner of the off-white copy area, and then click to insert the image. With the placeholder image still selected, use the arrow keys on your keyboard to adjust its position.
Page 157 With the placeholder image still selected, use the arrow keys on your keyboard to adjust its position. You want to position the image so that its left edge aligns with the left edge of the video placeholder image. Click anywhere outside the selected image to deselect it. Save your work.
Page 158 Position the I-beam pointer about 6 pixels from the upper-right corner of the video-placeholder image, and then drag down and to the right to draw a text box. Ensure that there is about a 6-pixel margin on all sides. Type or paste about two paragraphs of placeholder text in the text box. Because the text represents where text would be for the web page, it doesn’t need to say anything.
Page 159 Now you add a line of text at the end of each paragraph and make it look like a web link. Click the I-beam pointer at the end of the first paragraph and press the spacebar on your keyboard. Type Learn more, and then select the text you just typed. In the Property inspector, do the following: Click the Underline button.
Page 160: Export The Image For The Web
Export the image for the web The mock-up of the Cafe Townsend homepage you created should look as follows: Next, you decide to export the PNG file to a JPEG file that you can display on an internal website or e-mail to your colleagues or clients. 160 Tutorial: Creating Page Mock-ups...
Page 161 Select File > Image Preview. In the Format pop-up menu, select JPEG. In the Quality text box, type 90, or use the Quality slider. Because this image will not be used on a public web page, you don’t need to be concerned about file size and download time. Otherwise, a quality setting of 90 might be too high.
Page 162 162 Tutorial: Creating Page Mock-ups...
Page 163: Chapter 6: Tutorial: Creating A Table-Based
Page Layout This tutorial explains how to create a table-based page layout in Macromedia Dreamweaver 8. A page layout determines how your page will appear in the browser, showing, for example, the placement of menus, images, and Macromedia Flash content.
Page 164 A comp consists of any number of page elements that the client has requested for their website. For example, the client might say, “I want to have a logo at the top of the page, a navigation that links to these other pages, a section for an online store, and a place where I can insert video clips.”...
Page 165: Create And Save A New Page
You’ll notice that the graphic designer has provided you with a web page comp that includes a number of content areas, as well as some graphic ideas. In the next sections, you’ll use Dreamweaver to lay out this design. You can also open the original comp file that you created in Chapter 5, “Tutorial: Creating Page Mock-ups”...
Page 166: Insert Tables
Select File > Save to save your page. Insert tables Next you’ll add a table that will hold text, graphics, and Macromedia Flash assets. Click once on the page to place the insertion point in the upper-left corner of the page.
Page 167 Enter 0 in the Cell Spacing text box. Click OK. A table with three rows and one column appears in your document. The table is 700 pixels wide with no border, cell padding, or cell spacing. Insert tables 167...
Page 168 More about tables Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. A table consists of one or more rows; each row consists of one or more cells. When you create multiple rows with multiple cells, the cells form columns. Technically, a cell is a division within a horizontal row, and a column is the vertical accumulation of those cell divisions.
Page 169 Click OK. A second table with one row and three columns appears below your first table. Click to the right of the table to deselect it. Insert a third table by selecting Insert > Table and entering the following values in the Insert Table dialog box: Enter 1 in the Rows text box.
Page 170: Set Table Properties
You may see the Table selector (indicated by green lines) after you insert a table. You can always make the Table selector disappear by clicking outside the table. You can also disable the Table selector by selecting View > Visual Aids > Table Widths. Set table properties Now you’ll set precise table properties, using Expanded Tables mode, a feature that temporarily adds cell padding and spacing to tables and...
Page 171 Click once inside the first row of the first table. In the Property inspector (Window > Properties), enter 90 in the Cell Height (H) text box and press Enter (Windows) or Return (Macintosh). If you cannot see the Cell Height text box, click the expander arrow in the lower-right corner of the Property inspector.
Page 172 In the Property inspector, enter 24 in the Cell Height text box and press Enter (Windows) or Return (Macintosh). You should now have three rows of differing heights in the first table. Next you’ll set properties for the second table (the table that contains three columns).
Page 173 In the Property inspector, enter 140 in the Cell Width (W) text box and press Enter (Windows) or Return (Macintosh). Click once inside the second column of the second table. In the Property inspector, enter 230 in the Cell Width text box and press Enter (Windows) or Return (Macintosh) Set the width of the third column to 330 pixels.
Page 174 In the Property inspector, enter 24 in the Cell Height text box and press Enter (Windows) or Return (Macintosh). Your layout should now look as follows: Click the Exit Expanded Tables Mode link at the top of the Document window to return to Standard mode. Save your page.
Page 175: Insert An Image Placeholder
Insert an image placeholder An image placeholder is a graphic that you use until final artwork is ready to be added to a web page. An image placeholder is useful when you lay out web pages because it allows you to position an image on a page before you actually create the image.
Page 176 GIFs or JPEGs. If you have Macromedia Fireworks, you can create a new graphic from a Dreamweaver image placeholder. When you select the image placeholder and click the Create button in the Property inspector, Fireworks opens and presents you with a new canvas.
Page 177: Add Color To The Page
Add color to the page Now you’ll add more color to the page by setting colors for some of the table cells and for the background of the page. Click once inside the first cell of the three-columned table. Click the <td> tag (cell tag) in the tag selector to select the cell. In the Property inspector (Window >...
Page 178 In the Background Color text box, enter the hexadecimal value #993300 and press Enter (Windows) or Return (Macintosh). The color of the table cell turns to reddish-brown. Click once inside the second cell of the three-columned table. Click the <td> tag (cell tag) in the tag selector to select the cell. In the Property inspector, click once inside the Background Color text box, enter the hexadecimal value #F7EEDF, and press Enter (Windows) or Return (Macintosh).
Page 179 Next you’ll change the background color for the entire page by modifying page properties. The Page Properties dialog box lets you set a number of page properties, including the size and color of page fonts, the colors of visited links, page margins, and much more. Select Modify >...
Page 180 Click OK. Your page background turns to black. Save your work. Your page layout is now complete. The layout contains a number of tables that can hold assets such as images, text, and Flash Video (FLV) files. 180 Tutorial: Creating a Table-based Page Layout...
Page 181 Creating Content Assets In this part, you’ll build assets for the Cafe Townsend sample website. You’ll use Macromedia Fireworks 8 to process images and design a banner graphic for the Cafe Townsend website. You’ll use Macromedia Flash 8 to build a flexible messaging area and a video player for the Cafe Townsend website.
Page 183: Chapter 7: Tutorial: Handling Photographs
Also, the size of each image must be 700 pixels by 150 pixels to fit the dimensions of the slideshow. For a tutorial on creating the slideshow in Flash, see the Macromedia Flash 8 tutorials.
Page 184: Batch Process Large Image Files
Batch process large image files When the source of your image files is a digital camera, you probably won’t be able to use the images directly as web graphics. The size and resolution are much too great. You may also want to alter the composition so that only parts of the photographs are used.
Page 185 In the Scale box at the bottom of the dialog box, select Scale to Size from the list, and then set the size dimensions as follows: Type 750 in the width box. For the height, select Variable from the list. Under Batch Options, select Rename, and then click Add to include the action in the batch process.
Page 186: Compose The Images
Compose the images The next step is to compose the images to appear in the slideshow. Each image must be 700 pixels by 150 pixels to fit the dimensions of the slideshow. However, because each image you batch processed is larger than the slideshow dimensions, you must choose, or compose, an interesting 700 x 150 image from each larger image.
Page 187 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. Select File >...
Page 188 In the Add Frames dialog box, enter 5 as the number of new frames, make sure the After the Current Frame option is selected, and click OK. Fireworks adds five new frames to the existing one, giving you a total of six.
Page 189 Place and compose an image in each frame Now that you created six frames, you want to import the files you processed earlier into each of the frames. Once imported, you can easily compose each image by dragging it around the canvas. Using frames to store and manipulate the images also allows you to export them all at once with the file settings you want.
Page 190 To compose the image, drag it until the part you want appears in the window created by the canvas. Click anywhere outside the selected image to deselect it. Repeat steps 1 through 6 for the remaining five images, making sure to select a new, empty frame before importing each image.
Page 191: Preview And Export The Images
Preview and export the images Your image source file now contains six frames with six images. Holding the images in frames lets you export them all at once with the file settings you want, as follows. Select File > Image Preview. In the Image Preview dialog box, do the following: In the Format pop-up menu, select JPEG.
Page 192: View The Final Optimized Images
In the Export dialog box that appears, browse to the following folder on your hard disk: local_sites/cafe_townsend/images/ Select Frames to Files in the Export pop-up menu. Make sure that Trim Images is not selected. Click Export. Fireworks exports each frame as a separate image file to the images folder using the name of the frame for the filename.
Page 193 The following tables indicate how the final images differ from the original JPEG files that the digital camera created: Original digital camera files Filename File dimensions File size 1013.jpg 1679 x 1170 pixels 402K 1088.jpg 2920 x 1876 pixels 1732K 1095.jpg 2063 x 1444 pixels 753K...
Page 194 194 Tutorial: Handling Photographs...
Page 195: Chapter 8: Tutorial: Creating A
Page Banner This tutorial will guide you through the task of designing a page banner with Macromedia Fireworks 8. You’ll learn to import image assets, work with layers, shapes, masks, and text, and optimize and export the finished banner graphic.
Page 196: Add A Background And Place The Logo
Add a background and place the logo After you create a new PNG file for the banner, you want to import a photo to serve as the background image for the graphic. You also want to import the Cafe Townsend logo. You start by creating a new PNG file for the banner.
Page 197 Import the background image The background of the banner graphic consists of a photograph of the interior of a Cafe Townsend restaurant. You want to import the photograph in your document, and then adjust it to fit the dimensions of the banner.
Page 198 Zoom out to view the entire photo by using the magnification pop-up menu in the lower right corner of the Document window. With the Scale tool, reduce the size of the photo by about 25 percent by clicking the selection point in the lower right corner of the photo and dragging the mouse towards the upper-left corner.
Page 199 Click the photo and drag it so that the canvas displays the part of the photo that you want to be visible in the banner. Move the photo to compose an interesting image for the banner graphic’s background. Once you’re satisfied with the image, save your work. Import the logo Next you import a vector-based graphic of the Cafe Townsend logo.
Page 200 Select cafeLogo.ai and click Open. The Vector File Options dialog box appears. This is where you can adjust how a vector file is imported. Click OK to accept the default options. Position the insertion pointer inside the upper-left corner of the banner and click to insert the graphic.
Page 201: Organize Your Objects With Layers
Organize your objects with layers Now that you imported two graphics into your document, you want to arrange them in layers so that you can more easily organize the banner’s composition and manipulate its elements. Specifically, you want to organize the elements on three layers—one layer for the background, a second layer for the logo, and a third layer for other graphics.
Page 202 More about layers Layers divide a Fireworks document into discrete planes. A document can consist of many layers, and each layer can contain many objects. In Fireworks, the Layers panel lists the layers in a document and the objects that each layer contains. The objects and layers in the Layers panel show the order of how these elements are stacked in the composition.
Page 203: Create A Contrasting Background For The Logo
Create a contrasting background for the logo The Cafe Townsend logo is not clearly visible because it’s black and transparent against a dark background. You decide to place a lighter colored rectangle behind the logo to make it stand out more. In the Layers panel, select the Logo layer.
Page 204 In the Property inspector, set the following properties for the tool: Click the Fill Category box and select Gradient > Linear. Click the Fill Color box next to the bucket icon and then click the button just above the Preset label in the dialog box that appears. 204 Tutorial: Creating a Page Banner...
Page 205 A pop-up window appears to let you pick the first gradient color. Type F7EFE3 in the text box at the top of the window, and then press Enter. The beginning color of the gradient changes to reflect your color choice. Click the second gradient color button (on the right side of the dialog box) and click the white swatch with the eyedropper pointer.
Page 206 Use the slider to set the opacity of the second gradient color to 50%. Press Enter to accept the settings, and then draw a rectangle over the Cafe Townsend logo in the banner. When you release the mouse button, a semi-transparent rectangle appears over the logo.
Page 207: Create An Outline Around The Banner
Create an outline around the banner You want to create a black outline around the banner. To create this effect, you decide to use a rounded rectangle as a vector mask. A vector mask crops or clips the underlying object to the shape of its path, creating a cookie-cutter effect.
Page 208 On the canvas, draw and position the rounded rectangle inside the banner. The area that falls outside the rounded rectangle will be black, forming the banner’s outline. Use the blue selection points to adjust the size of the shape. Use the yellow diamond-shaped control points to adjust the roundness of the corners.
Page 209: Create A Slanted Edge Effect
Create a slanted edge effect You want to create a slanted edge effect in the banner, as shown in the banner sketch (see “Review your task” on page 195). To produce this effect, you decide to create a shape and use it as a mask. In the Layers panel, select the Graphics layer.
Page 210: Add A Tag Line To The Banner
Select the Subselection tool (or press A) and click the shape’s anchor points to adjust its shape so that its right side is slanted, as follows. Save your work. Add a tag line to the banner Next, you need to add the company’s tag line, Nouveau World Cuisine, to the banner.
Page 211: Export An Optimized Image File
Export an optimized image file Now that you completed the banner graphic, you’re ready to optimize and export the image as an JPEG file. Optimize and preview the image Before you export any document from Fireworks, you should always optimize it. Optimizing ensures that an image is exported with the best possible balance of compression and quality.
Page 212 Click the Preview button near the top left of the Document window. Fireworks displays your document as it will appear when exported with the current settings. At the lower left of the window, Fireworks displays the size of the exported file and the estimated time it will take to display the image when viewed on the web.
Page 213 Export the image After choosing your optimization settings, export the image as a JPEG file. Select File > Export. The filename listed has a .jpg extension. Fireworks chose this file format because you selected it in the Optimize panel. Browse to the following folder on your hard disk: local_sites/cafe_townsend/images/ Ensure that the Save As Type (Windows) or Save As (Macintosh) pop- up menu reads Images Only, and click Export.
Page 214 The JPEG image opens in Fireworks. Because JPEG images are bitmaps, all your objects and layers are flattened in the Layers panel. Also, the Property inspector displays only a few properties. All the properties available in the PNG file are no longer available in a JPEG file. You still have your source PNG file, so if you need to do more work on the design, you can edit the PNG file and export it again.
Page 215: Chapter 9: Tutorial: Building Your First Flash Application
If you have not already done so, Macromedia recommends that before you take this tutorial you read “Flash basics”...
Page 216: Review Your Task
In this case, the FMA displays photographs of items from a restaurant menu. At Macromedia’s website, an FMA is used to display information about new software products and other advertising messages.
Page 217 Run the completed application To better understand the type of application you’ll create as you work through this tutorial, you can look at a completed FLA file version of the application in the Flash authoring tool. FLA files are the type of files you work on in Flash.
Page 218: Create A New Document
After you have the file open, you can explore the Stage, the Library panel, and the Timeline. On the Stage you will see a variety of graphic shapes, which you will learn to create later in this tutorial. In the Library panel, you will see a list of symbols, or reusable assets, that the document uses.
Page 219 Name the file flash_fma.fla and save the file in the cafe_townsend folder you copied to the local_sites folder on your hard disk. As you complete the tutorial, remember to save your work frequently. Define document properties Configuring document properties is a common first step in Flash authoring.
Page 220 In the Document Properties dialog box, enter 700 in the width text box and 150 in the height text box, and then click OK. Flash automatically inserts the px (for pixel) after the number. The Document Properties dialog box In the Timeline, click the value in the Zoom menu and enter 75%. This makes it easier to see your entire document in the Document window.
Page 221: Create Symbols
Create symbols Next, you will create some symbols or reusable assets. Symbols allow you to use the same asset more than once without storing multiple copies of it in your FLA file. You store the symbol in the Library panel, and drag instances of the symbol to the Stage when you need them.
Page 222 Drag in the drawing area to draw a wide, flat rectangle. Select the Selection tool from the Tools panel. Double-click the rectangle you drew to select both its fill and its stroke. The stroke is the line that forms the border of a shape. In the Property inspector, enter 0 in both the X and Y text boxes.
Page 223 In the Library panel (Window > Library), drag the imageHolder symbol to the drawing area. You have now created an instance of the imageHolder symbol. This instance is part of the new slides symbol you are creating. With the new instance still selected on the Stage, in the Property inspector, enter holder0 in the Instance Name text box.
Page 224 You have now finished creating the symbol called slides. Next, you will create a third symbol that will contain an instance of the slides symbol. As you can see, nesting symbol instances inside other symbols is a common technique of Flash authoring. The completed slides symbol To create the third symbol: Select Insert >...
Page 225: Edit A Symbol Timeline
With the symbol instance still selected, in the Property inspector, enter 0 in the X and Y text boxes. Still in the Property inspector, enter slides_mc in the instanceName text box. Edit a symbol Timeline Now that you have created the three symbols, you will edit the slideShow symbol by adding animation to its Timeline.
Page 226 In the Timeline, select Frame 20 of Layers 1 and 2. Selecting Frame 20 of Layers 1 and 2 Select Modify > Timeline > Convert to Keyframes. This adds frames to the Timeline and adds keyframes to the selected frames (Frame 20). The Timeline with the added keyframes in Frame 20 Repeat the process by selecting Layers 1 and 2 in Frame 40 and selecting Modify >...
Page 227: Add Actions To Frames
Add actions to frames In this section, you will add a small amount of ActionScript to control how the playhead moves through the Timeline of the movie clip. By slideShow adding methods, you cause the playhead to stop and wait at stop() certain frames.
Page 228: Add Labels To Frames
Select frame 60 of Layer 2. In the Actions panel, type the stop(); ActionScript. In the Timeline, select frame 80 of Layer 2. In the Actions panel, type the stop(); ActionScript. Add labels to frames Now you will add labels to specific frames. By labeling a frame, you make it possible to refer to that frame in ActionScript.
Page 229: Add Motion Tweens
Add motion tweens A motion tween is a type of animation in which an object moves from one position to another. In this project, you will make the images of food animate upward when the user clicks on a button, which you will add later. To add the motion tweens: In the Timeline, select Frame 1 of Layer 1.
Page 230 In the Property inspector, enter -150 in the Y text box. This moves the movie clip instance upward 150 pixels in slideShow the keyframe in Frame 20. The motion tween from Frame 1 to Frame 20 slides the movie clip upward smoothly instead of causing the movie clip to jump from one position to the next.
Page 231: Edit The Main Timeline
Edit the main Timeline Now you will return to the main Timeline of your Flash document to add details that affect the entire document. To add layers to the main Timeline: Click the Scene 1 icon at the top of the Timeline. You exit symbol-editing mode and return to the main Timeline of your FLA file.
Page 232: Create The Border
To add the slideShow movieClip to the Stage: Click the slideShow layer name to make that layer active. Drag the slideShow symbol from the Library panel to the Stage and align its upper-left corner with the upper left corner of the Stage. With the new movie clip instance still selected on the Stage, go to the Property inspector and set the X and Y values to 0 to align the upper- left corner of the movie clip exactly with the corner of the Stage.
Page 233 Select the color black (#000000) from the Fill Color Picker. Selecting black from the Fill Color Picker Draw a rectangle on the Stage that is approximately the same shape as the Stage. Drawing a black rectangle the shape of the Stage In the Tools panel, select the Selection tool.
Page 234 In the Align panel, click the To Stage option so it is selected. This allows the Align panel to align the selected rectangle with the Stage area. The Align panel with the To Stage option selected In the Align panel, find the Match-size area and click the Match Width When the To Stage and Height button.
Page 235 Still in the Align panel, click the Align Horizontal Center button. Clicking the Align Horizontal Center button The rectangle is now precisely centered on the Stage. The black rectangle centered on the Stage Click outside the Stage to deselect the black rectangle. In the Tools panel, select the Rectangle tool.
Page 236 Still in the Tools panel, select the color blue with the hexadecimal value #0000FF from the Fill Color Picker. In the Tools panel, double-click the Rectangle tool. In the Rectangle Settings dialog box, enter 16 in the Corner Radius text box and click OK.
Page 237 In the Tools panel, click the Selection tool. Click the blue rectangle to select it. With the blue rectangle selected, go to the Property inspector panel and enter the following values in the text boxes: W: 700 H: 150 X: 0 Y: 0 The properly sized blue rectangle on the Stage Double-click the blue rectangle again to select it.
Page 238: Add A Symbol
Add a symbol In this section, you will add a blue-colored area to the right side of the Stage. This is where the text that describes each menu item and the button for switching menu items will appear. To add a new symbol with a blue shape: Click the blueArea layer name in the Timeline.
Page 239: Add A Text Box
In the Tools panel, click the Subselection tool. Move the mouse over the lower-left corner of the rectangle until a tiny white box appears next to the arrow pointer. The pointer indicating that the corner of the rectangle can be dragged Drag the corner of the rectangle to the right so that the left side of the rectangle becomes a diagonal line at approximately a 30º...
Page 240 To add the text box for the menu item title: In the Tools panel, click the Text tool. In the Property inspector, select Dynamic Text from the Text Type menu. Still in the Property inspector, enter 14 in the Font Size text box. With the Text tool, draw a wide flat text rectangle in the top part of the gray-blue shape you just created.
Page 241 Add the second text box Now you will add the second text box, which will hold the description text for each menu item. To add a text box for the descriptions: Click outside the Stage to deselect the text box you created in the previous section.
Page 242: Add The Movie Clip To The Stage
In the Tools panel, click the Selection tool. Click in the Stage area outside the shapes you have drawn to deselect them. In the Timeline, click the Scene 1 link to exit symbol-editing mode and return to the main Timeline of the Flash document. You exit symbol-editing mode and the Stage with the black borders reappears.
Page 243: Add A Button Component
Add a button component Now you are ready to add the button that allows the user to switch from one slide to the next in the slide show. To add the Next button: In the Timeline, click the nextButton layer name to make that layer active.
Page 244: Add Actionscript Code
Add ActionScript code You have now added all the graphic and text elements that your FMA requires. The last step is to add the ActionScript code that displays the proper text and image for each slide in the movie clip. slideShow If you did not complete Chapter 7, “Tutorial: Handling Photographs”...
Page 245 Enter ActionScript code for the slide show Now you will enter the ActionScript code that makes the slideshow animate each new slide into place when the Next button is clicked. After you add the code, your Flash document will be complete. To add the ActionScript code to the Flash document: In the Timeline, make sure Frame 1 of the actions layer is still selected.
Page 246 menu_mc.description_txt.text = this["image"+currImage+"desc"]; for (var i:Number = 0; i<totalImages; i++) { slideShow_mc.slides_mc["holder"+i].loadMovie(this["image" +(i)+"uri"],slideShow_mc.slides_mc.getNextHighestDepth ()); slideShow_mc.slides_mc["holder4"].loadMovie(this["image0u ri"],slideShow_mc.slides_mc.getNextHighestDepth()); // function for the Next button function nextMenuItem(eventObj:Object) { slideShow_mc.gotoAndPlay("slide"+(currImage)); if ((currImage+1)>=totalImages) { currImage = 0; } else { currImage++; menu_mc.title_txt.text = this._parent["image"+currImage+"title"]; menu_mc.description_txt.text = this._parent["image"+currImage+"desc"];...
Page 247 The first section of code contains variables that store information about the images that will appear in each section of the movie clip. slideShow /* 0 */ var image0title:String = "Summer salad"; var image0desc:String = "Butter lettuce with apples, blood orange segments, gorgonzola, and raspberry vinaigrette.";...
Page 248 image0uri contains a string that is the Universal Resource Identifier for the image file that is loaded and displayed in each section of the slides movie clip. The next two lines of code declare two more variables: var currImage:Number = 0; var totalImages:Number = 4;...
Page 249 loop is a block of code surrounded by a set of braces { } that repeats for each increment of the variable. In this case, increments from 0 to 4 because the value of is 4. The method can be totalImages loadMovie() used to load a Flash file or an image file into the movie clip.
Page 250: Publish Your Document
The line of code immediately after the function definition tells Flash to execute the function when the next_btn instance receives a nextMenuItem mouse click. next_btn.addEventListener("click", nextMenuItem); Because the function is now set up to listen for mouse nextMenuItem clicks, it is called an event listener. This is why the addEventListener() method is used to tell flash to execute the function when the mouse click event occurs.
Page 251: Resources
Video Player (Flash Professional only),” on page 255. Resources Macromedia has excellent resources to help you discover more about Flash, get support, and send feedback to the company. Registration Register to receive the latest news about upgrades and new products, technical support, and more.
Page 252 To learn more, go to Macromedia Training at www.macromedia.com/go/flash_training. Flash Developers Center Stay up to date with the latest Macromedia Flash development trends and techniques. Tutorials, articles, and sample applications give you the information you need to stay competitive, innovative, and efficient. To learn more, go to the Flash Developers Center at www.macromedia.com/...
Page 253 Additional resources The following Macromedia web pages include reference materials and links to third-party Flash resources: Websites devoted to Macromedia Flash and Flash developers can be found at www.macromedia.com/go/tn_12046. Macromedia Press (Macromedia’s publishing division) can be found at www.macromedia.com/support/mmpress/. Resources 253...
Page 254 254 Tutorial: Building Your First Flash Application...
Page 255: Chapter 10: Tutorial: Building A Video Player
Basic 8 and Flash Professional 8. After it is created, you can deploy the video player in a web page. If you have not already done so, Macromedia recommends that before you take this tutorial you read “Flash basics” on page In this tutorial, you will complete the following tasks: Review your task .
Page 256: Examine The Completed Application
In this tutorial, after examining an existing Flash document, you’ll begin by creating a new Flash document and end by publishing the application for web playback. The tutorial should take approximately 20 to 30 minutes to complete. Examine the completed application As you examine the finished version of an application you’ll create, you will also look at the Flash workspace.
Page 257 Open the authoring document It’s helpful to look at the completed authoring FLA file to see how the author designed the application. To view the authoring version of the file in Flash: In Flash, select File > Open. Browse to the completed file in the local_sites\cafe_townsend\completed files\fash folder that you copied to your local disk in Chapter 4, “Tutorial: Setting Up Your Site and Project Files”...
Page 258: Encode A Video File
Encode a video file The first thing you will do is convert a QuickTime video file (MOV) to a Flash video file (FLV). To convert the video file: Start the Flash Video Encoder application. Drag the cafe_townsend_chef.mov file from the cafe_townsend folder onto the Flash Video Encoder application window.
Page 259: Create A New Flash Document
In the Flash Video Encoding Settings dialog box, select Flash 8 - Medium Quality (400kbps) from the Flash Video Encoding Profile menu. This setting is the default. This action applies only a small amount of compression to the file. Click OK to close the Settings dialog box. Click Start Queue.
Page 260 Open a new document Now you’re ready to create your own version of the FMA. To create a new document: Start Flash. Select File > New. In the New Document dialog box, select Flash Document and then click OK. Select File > Save. Name the file video_pod.fla and save the file in the cafe_townsend folder you copied to your hard disk.
Page 261: Add A Media Component
Click OK. Save your work. For more information about setting document properties, see “Creating or opening a document and setting properties” in Using Flash. Add a media component Next, you will add a media playback component to the Stage. This component will contain the video display and provide playback controls.
Page 262 To add a media component: Select Window > Components to open the Components panel. In the Components panel, click the plus sign (+) next to the FLV Playback - Player 8 category. Drag an FLVPlayback component to the Stage. The new component remains selected on the Stage by default. 262 Tutorial: Building a Video Player (Flash Professional only)
Page 263 With the new component still selected on the Stage, enter the following values in the Property inspector: W: 360 H: 240 X: 0 Y: 0 This makes the component the same size as the Stage and centers it on the Stage. The Property inspector with the proper values entered With the new component still selected on the Stage, select Window >...
Page 264: Publish Your Document
Save your work. To test your document, select Control >Test Movie. The document plays in the Test Movie window. You can control the playback of the video file with the controls at the bottom of the Stage. Publish your document The next step is to publish your FLA file as a SWF file that can be displayed in a web browser.
Page 265: The Next Steps
The next steps Now that you have completed the Flash video player, you would normally insert the SWF file into a real-world web page. This illustration demonstrates what a web page containing the video_pod.swf file might look like. The video_pod.swf file inserted in a web page The next steps 265...
Page 266 266 Tutorial: Building a Video Player (Flash Professional only)
Page 267 Then you’ll learn how you can easily maintain a website. You’ll use Macromedia Dreamweaver 8 to put all the pieces you’ve created together in the Cafe Townsend website and format the website with CSS.
Page 269: Chapter 11: Tutorial: Adding Content To
CHAPTER 11 Tutorial: Adding Content to Pages This tutorial shows you how to add content to web pages in Macromedia Dreamweaver 8. You can add many different kinds of content to web pages, including graphics, Macromedia Flash files, Macromedia Flash Video files, and text, to name a few.
Page 270 You’ll also need to use the assets that you created in Chapter 8, “Tutorial: Creating a Page Banner” and Chapter 9, “Tutorial: Building Your First Flash Application”. If you did not complete those tutorials, you can find the finished assets in the completed_files/flash and completed_files/ fireworks folders, within the cafe_townsend folder.
Page 271: Review Your Task
In this tutorial you’ll add assets to the home page for Cafe Townsend, a fictional restaurant. You’ll learn how to add images, a Macromedia Flash file, a Macromedia Flash Video file, and text. When you’re finished, the page will look like this: You’ll notice that the text on the page is not yet formatted.
Page 272: Insert Images
If you’ve completed the previous tutorials in this book, the required assets for this tutorial are saved in your cafe_townsend root folder. If you haven’t been doing the tutorials in order, see “Locate your files” on page 269 how to locate the required files. Insert images After you create your page layout, you are ready to add assets to the page.
Page 273 Select the banner_graphic.jpg file and click OK. If you didn’t complete “Creating a Page Banner,” open the banner_graphic.jpg file from the completed_files/fireworks folder in the cafe_townsend root folder. Dreamweaver replaces the image placeholder with the banner graphic for Cafe Townsend. Click once outside the table to deselect the image.
Page 274 Insert an image by using the Insert menu Click once inside the third row of the first table (two rows below the banner graphic you just inserted, just above the colored table cells). Select Insert > Image. In the Select Image Source dialog box, navigate to the images folder inside the cafe_townsend folder, select the body_main_header.gif file, and click OK.
Page 275 Insert an image by dragging Click once inside the last row of the last table on the page (just below the colored table cells). In the Files panel (Window > Files), locate the body_main_footer.gif file (it’s inside the images folder), and drag it to the insertion point in the last table.
Page 276 Insert an image from the Assets panel Click once inside the center column of the three-columned table (the first table cell that is colored light tan). In the Property inspector (Window > Properties), select Center from the Horz pop-up menu, and select Top from the Vert pop-up menu. This aligns the contents of the table cell in the middle of the cell, and pushes the cell’s contents to the top of the cell.
Page 277 The Assets panel You can use the Assets panel to view and manage assets in your current site. The Assets panel displays assets for the site associated with the active document in the Document window. You must define a local site before you can view assets in the Assets panel. For more information, see Chapter 4, “Tutorial: Setting Up Your Site and Project Files,”...
Page 278 Do one of the following: Drag the street_sign.jpg file to the insertion point in the center table cell. Click Insert at the bottom of the Assets panel. If the Image Tag Accessibility Attributes dialog box appears, click OK. The street_sign.jpg graphic appears on the page. Click once outside the table to deselect the image.
Page 279: Insert And Play A Flash File
Insert and play a Flash file Next, you’ll insert a Flash file that plays a photographic slide show of Cafe Townsend’s featured food items. The Flash file you’ll insert is a flexible messaging area—or FMA—file. An FMA is a common type of Flash application that displays an informational message to the audience.
Page 280 About Flash files When you build assets in Macromedia Flash, you work in FLA files, the default file type for the Flash application. FLA files are designated by a .fla extension. For example, if you are working on an animated logo for a website, the filename of the Flash file might be animated_logo.fla.
Page 281 The Flash content placeholder should remain selected after you insert the SWF file, as long as you don’t click anywhere else on the page. If it’s not selected, select the Flash content placeholder by clicking it. In the Property inspector (Window > Properties), click Play. If you cannot see the Flash Play button, click the expander arrow in the lower-right corner of the Property inspector.
Page 282: Insert Flash Video
Streaming Video streams the Flash Video content and plays it on a web page immediately. To enable streaming video on your web pages, however, you must have access to Macromedia Flash Communication Server, the only server that can stream Flash Video content.
Page 283 A preview of the selected skin appears below the Skin pop-up menu. The Skin option specifies the look and feel for the Flash Video component that will contain the Flash Video content. For more information on how to select different skins for Flash Video components, see www.macromedia.com/go/flv_tutorial. Insert Flash Video 283...
Page 284 In the Width and Height text boxes, do the following: In the Width text box, type 180. In the Height text box, type 135 and press Enter (Windows) or Return (Macintosh). The value in the Width and Height text boxes specifies the width and You can click Detect height in pixels of the FLV file.
Page 285: Insert Text
Click OK to close the dialog box and add the Flash Video content to your web page. The Insert Flash Video command generates a video player SWF file and a skin SWF file that are used to display your Flash Video content on a web page.
Page 286 Insert body text In the Files panel, locate the sample_text.txt file (in the cafe_townsend root folder) and double-click the file’s icon to open it in Dreamweaver. You’ll notice that this window is in Code view, and cannot be switched to Design view (the view you’ve been working in until now) because the file is not an HTML file.
Page 287 The text from the text file appears in the selected table cell. Depending on your monitor resolution, the three-columned table widens to accommodate the text. Don’t worry about how this looks right now. In the next tutorial, you’ll learn how to use CSS to format the text so that everything fits in the table appropriately.
Page 288 Insert text for a navigation bar Next you’ll insert text for a navigation bar. However, the text won’t look like a navigation bar until you format it in the next tutorial. Click once in the first column of the three-columned table (the column that is colored reddish-brown).
Page 289 Repeat the previous step until you’ve entered the following words with a space between each one: Articles, Special Events, Location, Menu, Contact Us. Do not press Enter (Windows) or Return (Macintosh) when you type. Use only the Spacebar to separate words, and let the words wrap naturally.
Page 290: Create Links
In the Property inspector (Window > Properties), select Top from the Vert pop-up menu. This aligns the text you just typed to the top of the table cell. If you cannot see the Vert pop-up menu, click the expander arrow in the lower-right corner of the Property inspector.
Page 291 With the index.html page open in the Document window, select the word Cuisine that you typed in the first cell of the three-columned table. Be careful to select the word Cuisine only, and not the space after it. In the Property inspector (Window > Properties), click the folder icon next to the Link text box.
Page 292: Preview Your Page In A Browser
Repeat the previous steps to link each word or set of words that you typed for the navigation. You want to create six more links: one for Chef Ipsum, Articles, Special Events, Location, Menu, and Contact Us. Link each word or set of words to the menu.html page, and be careful to avoid the space before and after the words or set of words when you create your links.
Page 293 Make sure the index.html file is open in the Document window. Press the F12 key (Windows) or Option+F12 (Macintosh). Your primary browser starts if it’s not running already and displays the index page. Dreamweaver automatically detects your primary browser and uses that for previewing.
Page 294 294 Tutorial: Adding Content to Pages...
Page 295: Chapter 12: Tutorial: Formatting Your Page With Css
CHAPTER 12 Tutorial: Formatting Your Page with CSS This tutorial shows you how to format text on your page using Cascading Style Sheets (CSS) in Dreamweaver. CSS provides you with greater control over the appearance of your page by letting you format and position text in ways that HTML cannot.
Page 296: Locate Your Files
Locate your files In this tutorial, you’ll begin with the Cafe Townsend index page to which you added content in Chapter 11, “Tutorial: Adding Content to Pages.” you did not complete that tutorial, you can either complete it before proceeding, or you can open the finished version of the tutorial and begin with that.
Page 297: Review Your Task
Review your task In this tutorial, you’ll use Cascading Style Sheets (CSS) to format the text on the home page for Cafe Townsend, a fictional restaurant. You’ll create different kinds of CSS rules to format the body text. You’ll also format the link text on the left side of the page to create a navigation bar.
Page 298: Learn About Css
For more information about CSS, proceed to the next section. To start creating CSS right away, proceed to “Create a new style sheet” on page 300. Learn about CSS Cascading Style Sheets (CSS) are a collection of formatting rules that control the appearance of content on a web page.
Page 299 The term cascading refers to your ability to apply multiple styles to the same element or web page. For example, you can create one CSS rule to apply color and another rule to apply margins, and apply them both to the same text on a page.
Page 300: Create A New Style Sheet
Create a new style sheet First, you’ll create an external style sheet that contains a CSS rule that defines a style for paragraph text. When you create styles in an external style sheet, you can control the appearance of multiple web pages from a central location, instead of setting styles on each individual web page.
Page 301 More about CSS rules CSS rules can reside in the following locations: External CSS style sheets are collections of CSS rules stored in a separate, external .css file (not an HTML file). The .css file is linked to one or more pages in a website by using a link in the head section of a document.
Page 302: Attach A Style Sheet
Don’t forget to include a semicolon at the end of each line, after the property values. When you’re finished, the code should look like following example: Save the style sheet. For more information Next you’ll attach the style sheet to the index.html page. about any CSS property, check the O’Reilly reference...
Page 303 In the Document window, open the Cafe Townsend index.html file. (You can click its tab if it’s already open.) Select the text of the first paragraph that you pasted into the page in Chapter 11, “Tutorial: Adding Content to Pages”. Look in the Property inspector and make sure that the paragraph is formatted with the paragraph tag.
Page 304 In the CSS Styles panel (Window > CSS Styles), click the Attach Style Sheet button in the lower-right corner of the panel. In the Attach External Style Sheet dialog box, click Browse and browse to the cafe_townsend.css file that you created in the previous section. Click OK.
Page 305: Explore The Css Styles Panel
Explore the CSS Styles panel The CSS Styles panel lets you track the CSS rules and properties that affect a currently selected page element, or the rules and properties that affect an entire document. It also lets you modify CSS properties without opening an external style sheet.
Page 306 You set the background color for the page in Chapter 6, “Tutorial: Creating a Table-based Page Layout” by using the Modify Page Properties dialog box. When you set page properties in this manner, Dreamweaver writes a CSS style that is internal to the document. Click plus (+) to expand the cafe_townsend.css category.
Page 307: Create A New Css Rule
Create a new CSS rule In this section you’ll use the CSS Styles panel to create a custom CSS rule, or class style. Class styles let you set style attributes for any range or block of text, and can be applied to any HTML tag. For more information on different types of CSS rules, see “Learn about CSS”...
Page 308 Select cafe_townsend.css from the Define In pop-up menu. It should be selected by default. Click OK. The CSS Rule Definition dialog box appears, indicating that you are creating a class style called .bold in the cafe_townsend.css file. In the CSS Rule Definition dialog box, do the following: In the Font text box, enter Verdana, sans-serif.
Page 309: Apply A Class Style To Text
Click OK. For more information Click All at the top of the CSS Styles panel. about any CSS property, check the Click the plus (+) button next to the cafe_townsend.css category if the O’Reilly reference category isn’t already expanded. guide included with You’ll see that Dreamweaver added the .bold class style to the list of Dreamweaver.
Page 310: Format The Navigation Bar Text
Repeat step 2 to apply the bold class style to the first four words of the second paragraph. Save your page. Format the navigation bar text Next you’ll use CSS to apply styles to the link text for the navigation bar. Many web pages use images of colored rectangles with text inside them to create a navigation bar, but with CSS, all you need is linked text and some formatting.
Page 311 Create a new rule for the navigation Open the cafe_townsend.css file if it isn’t already open, or click on its tab to see it. Define a new rule by typing the following code in the file, after the .bold class style: .navigation { This is an empty rule.
Page 312 In the CSS Styles panel, make sure All mode is selected, select the new .navigation rule and click Edit Style in the lower-right corner of the panel. 312 Tutorial: Formatting Your Page with CSS...
Page 313 In the CSS Rule Definition dialog box, do the following: Enter Verdana, sans-serif in the Font text box. Select 16 from the Size pop-up menu, and select pixels from the pop-up menu immediately to the right of the Size pop-up menu. Select Normal from the Style pop-up menu.
Page 314 In the CSS Styles panel, make sure the .navigation rule is selected and click Show List View. List view reorganizes the Properties pane to display an alphabetical list of all available properties (in contrast to Set Properties view, the previous view, which shows only those properties you’ve already set). Click in the column to the right of the property.
Page 315 Enter #993300 as the hexadecimal value and press Enter (Windows) or Return (Macintosh). Locate the property (you might need to scroll down), click display To see how your once in the column to the right, and select block from the pop-up menu. work affects the external style sheet, keep the...
Page 316 Click Show Set Properties so that only your set properties appear in the Properties pane. Click on the cafe_townsend.css file to display it. You’ll see that Dreamweaver has added all of the properties you specified to the file. Save the cafe_townsend.css file and close it. You’ve now created a rule to format the navigation bar text.
Page 317 Apply the rule With the index.html page open in the Document window, click the word Cuisine so that the insertion point is somewhere in the word. In the tag selector, click the rightmost <a> tag. This action selects all of the text for the specified <a> tag, or link. In the Property inspector (Window >...
Page 318 Repeat step 1 through 3 for each of the individual links in the navigation bar. You must assign a navigation class style to each <a> tag or link, so it’s important that you use the tag selector to select each link individually, and then assign the class styles one at a time.
Page 319 Add a rollover effect Now you’ll add a rollover effect so that the background color of the navigation bar blocks change whenever the mouse pointer passes over one of the links. To add a rollover effect, add a new rule that contains the :hover pseudo-class.
Page 320 Click once at the end of the rule and press Enter (Windows) or Return (Macintosh) a few times to create some space. Paste (Edit > Paste) the copied text in the space you just created. Add the :hover pseudo-class to the pasted .navigation selector, as follows: 320 Tutorial: Formatting Your Page with CSS...
Page 321: (Optional) Center The Contents Of The Page
In the new .navigation:hover rule, replace the current background-color (#993300) with #D03D03. Save the file and close it. Open the index.html file in the Document window and preview the page in a browser (File > Preview in Browser). When you hold the mouse over any of the links, you can see the new rollover effect.
Page 322 With the index.html page open in the Document window, click the tag in the tag selector. <body> Clicking the tag selects everything between the open and close <body> tags in the Document window. To see the selection, click Code <body> view at the top of the Document window.
Page 323 In the Property inspector (Window > Properties), click the Align Center button. Dreamweaver inserts CSS <div> tags that center the body content of the page. In Design view, a dotted line borders the area that the <div> tags center. Save the page. Your page is now finished.
Page 324 324 Tutorial: Formatting Your Page with CSS...
Page 325: Chapter 13: Tutorial: Publishing Your Site
Tutorial: Publishing Your Site This tutorial shows you how to set up a remote site with Macromedia Dreamweaver 8 and publish your web pages. A remote site is usually a place on a remote computer, running a web server, that holds copies of your local files.
Page 326: Define A Remote Folder
The procedures described in this tutorial work best if your remote root folder is empty. If your remote site already contains files, create an empty folder in your remote site (on the server), and use that empty folder as your remote root folder.
Page 327 Creating a remote folder with Dreamweaver If Dreamweaver is your only means of access to the remote server, you won’t be able to create an empty folder on the remote server until you’ve completed the remote settings in Dreamweaver and established a connection. If that’s the case, you can either define your host directory as your remote folder, or you can create a remote folder after you’ve established a connection with the server.
Page 328 For more information, click Help in the dialog box. If you selected FTP, enter the following options: Enter the host name of the server (such as ftp.macromedia.com). In the Host directory text box, enter the path on the server from the FTP root folder to the remote site’s root folder (cafe_townsend).
Page 329: Upload Your Local Files
Upload your local files After you set up your local and remote folders, you can upload your files from your local folder to the web server. To make your pages publicly accessible, you must upload them even if the web server is running on your local computer.
Page 330: Troubleshoot The Remote Folder Setup (Optional)
Troubleshoot the remote folder setup (optional) A web server can be configured in many ways. The following list provides information about some common issues you may encounter in setting up a remote folder, and how to resolve them: The Dreamweaver FTP implementation may not work properly with certain proxy servers, multilevel firewalls, and other forms of indirect server access.
Page 331 Many servers use symbolic links (UNIX), shortcuts (Windows), or aliases (Macintosh) to connect a folder on one part of the server’s disk with another folder elsewhere. For example, the public_html subdirectory of your home directory on the server may really be a link to another part of the server entirely. In most cases, such aliases have no effect on your ability to connect to the appropriate folder or directory;...
Page 332 332 Tutorial: Publishing Your Site...
Page 333: Chapter 14: Tutorial: Setting Up Your Website For Contribute Users
Tutorial: Setting Up Your Website for Contribute Users Macromedia Contribute enables you and your users to maintain, distribute, and control content on the web. You can easily connect to your website with Contribute, and send connection keys to set up your users so that they can edit the website.
Page 334: Review Your Task
“Upload your local files” on page 329. permissions, and how to create a connection key Learn about website connections www.macromedia .com/go/ and administration captivate_demo. A Contribute website connection is defined when you provide the web Before you connect address and path to point Contribute to the folder that contains your to your website, it’s a...
Page 335: Connect To A Website As An Administrator
Connect to a website as an administrator After you create the Cafe Townsend website, you can use Contribute to connect to the website. For more information about Contribute website connections, see “Learn about website connections and administration” on page 334. In Contribute, select Edit >...
Page 336: Set Administrative Settings
Set administrative settings Now that you’ve connected to the Cafe Townsend website and established yourself as an administrator, you can set some administrative settings. Contribute administrative settings are a collection of settings that apply to all users of your website, not just specific roles. Select Edit >...
Page 337: Create A User Role
Create a user role When Contribute users connect to a website, they are prompted to indicate which role they belong to. You’ll create a role for chefs who need to update the menu on the Cafe Townsend sample website. Select Edit > Administer Websites (Windows) or Contribute > Administer Websites (Macintosh), and then select the Cafe Townsend website from the submenu.
Page 338: Edit A Role's Settings
Edit a role’s settings Now you’re ready to determine which folders the users who have the Chef role can access and what kind of modifications those users can make to the Cafe Townsend website. In the Administer Website dialog box, select the Chef role in the list of role names.
Page 339 Select the Shared Assets category from the list on the left. to the site, but if you wanted to restrict Shared assets are commonly used images, Macromedia Flash content, users to editing text or Macromedia Dreamweaver library items. Making these items shared...
Page 340: Create A Connection Key And Send It To Users
Next, click in the ALT text column beside the special_salmon image. Type Image of Saturday salmon special. Next, click in the ALT text column beside the special_vegetarian image. Type Image of Sunday vegetarian special. Click OK. In the Edit “Chef” Settings dialog box, click OK to save your changes for the Chef role.
Page 341 Enter a password that you can remember, and then enter the password again. If you were actually going to make this key available to users, you would need to inform them of this password. Click Next. Review the Summary screen, and then click Done. In the Export Connection Key dialog box, navigate to your desktop.
Page 342 342 Tutorial: Setting Up Your Website for Contribute Users...
Page 343: Index
Index Center Frame button 65 certification and training 252 accessibility in the Flash authoring environment 95 Clear Keyframe command (in Flash) 69 accessing documentation Clipboard preferences (in Flash) 90 Contribute 29 Code view Contribute and FlashPaper 29 Design view and changing between 49 Dreamweaver 18 displaying text files 286 Fireworks 27...
Page 344 panels, overview of 107–109 Property inspector 106–107 Default Layout command, for panels 86 Quick Export button 111 deleting Tools panel 104 frames or keyframes 68 tools, changing options of 105 layers and layer folders 74 workspace 103 Design view 49 Flash discussing help in LiveDocs 39 animation 129...
Page 345 Insert Blank Keyframe command (in Flash) 67 guides Insert Keyframe command (in Flash) 67 clearing 80 Insert Layer command (in Flash) 70 locking 79 installing Macromedia Studio 14 moving 79 removing 79 setting preferences 80 showing 79 keyboard shortcuts snapping to 79...
Page 346 73 docking 85, 86 dragging 85 expanding 84 grouping 85, 86 Macromedia Flash Development Center 252 keyboard shortcuts 96 Macromedia Flash support 251 keyboard shortcuts for tree controls 100 Macromedia Studio, installing 14 Library 82...
Page 347 preferences Bitmaps on Clipboard (Windows only) 90 searching FlashPaper SWF files 119 Clipboard 90 searching help 33, 36, 37 drawing 90 selecting layers 72 Font Mapping Default 91 selecting text in FlashPaper SWF files 119 FreeHand Text on Clipboard 90 seminars 252 general (in Flash) 88 servers...
Page 348 toolbars about 114 table header menu 168 browser 114 table of contents 36 Coding 53 tables customizing 77 about 168 Document 49 creating layout with 163–180 editor 114 Expanded Tables mode 170 image editing 115 inserting 166–170 text formatting 114 setting properties 170–174 tools tag selector 289...
Page 349 Window Size pop-up menu 51 work area, showing and hiding 62 work environment 103 workspace 103 about 45 Contribute 112 Dreamweaver 45 Fireworks 103 Flash 59 FlashPaper 118 floating layout 46 Zoom tool (in Flash) 61 zooming 61 Index...
Page 350 Index...

This manual is also suitable for:

Studio 8

MACROMEDIA STUDIO 8-EXPLORING STUDIO 8 Manual

Chapter 1: Learning Studio

Chapter 2: Studio Basics

Chapter 3: Web Development Workflow

Chapter 4: Tutorial: Setting up Your Site and Project Files

Chapter 5: Tutorial: Creating Page Mock-Ups

Chapter 6: Tutorial: Creating a Table-Based

Chapter 7: Tutorial: Handling Photographs

Chapter 8: Tutorial: Creating a

Chapter 9: Tutorial: Building Your First Flash Application

Chapter 10: Tutorial: Building a Video Player

Chapter 11: Tutorial: Adding Content to

Chapter 12: Tutorial: Formatting Your Page with CSS

Chapter 13: Tutorial: Publishing Your Site

Chapter 14: Tutorial: Setting up Your Website for Contribute Users

Quick Links

Need help?

Questions and answers

Related Manuals for MACROMEDIA STUDIO 8-EXPLORING STUDIO 8

Summary of Contents for MACROMEDIA STUDIO 8-EXPLORING STUDIO 8

This manual is also suitable for:

Table of Contents