manualshive.com logo in svg

MACROMEDIA STUDIO 8-EXPLORING STUDIO 8, Manual

Share
Download
MACROMEDIA STUDIO 8-EXPLORING STUDIO 8 Manual Download Page 181

181

3

PART 3

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.

This part contains the following sections:

Tutorial: Handling Photographs  . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Tutorial: Creating a Page Banner . . . . . . . . . . . . . . . . . . . . . . . . . . . 195
Tutorial: Building Your First Flash Application. . . . . . . . . . . . . . . . 215
Tutorial: Building a Video Player (Flash Professional only). . . .  255

000_ExploringStudio.book  Page 181  Tuesday, August 30, 2005  9:30 AM

Summary of Contents for STUDIO 8-EXPLORING STUDIO 8

Page 1: ...Exploring Studio 8...

Page 2: ...oftware ASA and its suppliers All rights reserved Macromedia Flash 8 video is powered by On2 TrueMotion video technology 1992 2005 On2 Technologies Inc All Rights Reserved http www on2 com Visual Sour...

Page 3: ...17 Using the Studio help systems 32 Chapter 2 Studio Basics 43 Dreamweaver basics 43 Flash basics 57 Fireworks basics 102 Contribute basics 112 FlashPaper basics 118 Chapter 3 Web Development Workflow...

Page 4: ...xamine the design comp 163 Create and save a new page 165 Insert tables 166 Set table properties 170 Insert an image placeholder 175 Add color to the page 177 PART 3 CREATING CONTENT ASSETS Chapter 7...

Page 5: ...ponent 243 Add ActionScript code 244 Publish your document 250 Resources 251 Chapter 10 Tutorial Building a Video Player Flash Professional only 255 Review your task 255 Examine the completed applicat...

Page 6: ...tents of the page 321 Chapter 13 Tutorial Publishing Your Site 325 Learn about remote sites 325 Define a remote folder 326 Upload your local files 329 Troubleshoot the remote folder setup optional 330...

Page 7: ...rize 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 S...

Page 8: ......

Page 9: ...ls The information in this manual is designed for beginners especially users who are unfamiliar with one or all of the products in the Studio 8 family Intermediate and advanced users can benefit by le...

Page 10: ...ks 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...

Page 11: ...nterfaces include simple navigation bars as well as much more complex interfaces You can find an example of a navigation bar created with Flash across the top of the www macromedia com home page Flexi...

Page 12: ...h Player Depending on your project and your working style you may use these steps in a different order As you become familiar with Flash and its workflows you will discover a style of working that sui...

Page 13: ...is intuitive and familiar Users can add or update text images tables links and Microsoft Word and Excel documents What you can do with FlashPaper Macromedia FlashPaper lets you easily convert any pri...

Page 14: ...mple operation but you can selectively install individual applications if you choose to do so Before you install Studio 8 be sure you meet the minimum system requirements for each Studio product For a...

Page 15: ...n the installation process is complete The installed Studio 8 applications are now available 5 In Windows select Programs Macromedia from the Windows Start menu On the Macintosh open the Applications...

Page 16: ...e Macromedia Product Activation window and click Continue After activation your Studio 8 products are ready to use Registering your Studio products It s a good idea to register your Studio 8 products...

Page 17: ...s Getting the most from the Studio documentation 17 Using the Studio help systems 32 Getting the most from the Studio documentation This section describes the documentation in the Studio products It a...

Page 18: ...e information see www macromedia com go buy_books Title Description Audience Where to Find It Getting Started with Dreamweaver Basic introduction to Dreamweaver concepts and the interface with detaile...

Page 19: ...cs_dreamweaver Get the PDF www macromedia com go dw_documentation Dreamweaver API Reference Descriptions of the utility API and the JavaScript API both of which let you perform various supporting task...

Page 20: ...com go cf_documentation Reference HTML server model and other types of reference manuals mainly published by O Reilly Intended for anyone needing more information about coding syntax concepts and so...

Page 21: ...ntation The following tables summarize the documents included in the Flash help system You can purchase printed versions of select titles For more information see www macromedia com go buy_books Dream...

Page 22: ...Flash Comprehensive information about all the features of Flash except ActionScript Intended for all Flash users View in Flash Select Help Flash Help View online livedocs macromedia com go livedocs_fl...

Page 23: ...ash Select Help Flash Help View online livedocs macromedia com go livedocs_flash Get the PDF www macromedia com go fl_documentation Title Description Audience Where to Find It Learning ActionScript 2...

Page 24: ...ionary style reference entries for each term in the ActionScript component API Intended for all Flash users View in Flash Select Help Flash Help View online livedocs macromedia com go livedocs_flash G...

Page 25: ...sh Select Help Flash Help View online livedocs macromedia com go livedocs_flash Get the PDF www macromedia com go flash_lite_documentation Learning Flash Lite 1 x ActionScript Information about writin...

Page 26: ..._devcenter Flash Documentation Resource Center PDF and HTML versions of the Flash documentation www macromedia com go fl_documentation Macromedia Online Forums Discussion and problem solving informati...

Page 27: ...face with a detailed beginner tutorials Intended for beginning Fireworks users View in Fireworks Select Help Getting Started with Fireworks View online www macromedia com go livedocs_fireworks Get the...

Page 28: ...ills and learn new ones www macromedia com go fireworks_devnet Fireworks Support Center TechNotes plus support and problem solving information for Fireworks users www macromedia com go fireworks_suppo...

Page 29: ...here to Find It Contribute Quick Start Basic introduction to installing Contribute connecting to a website and completing some simple tasks quickly Intended for beginning Contribute users In Contribut...

Page 30: ...ontribute users and administrators In Contribute Select View Sidebar Contribute tutorial Step by step tutorial that guides you through representative Contribute tasks In the tutorial you ll update the...

Page 31: ...tribute Support Center TechNotes plus support and problem solving information for Contribute users www macromedia com go contribute_support Contribute Forum Discussion and problem solving information...

Page 32: ...ks Contribute and FlashPaper help systems The online help systems available in the Help menu for each Studio product provide detailed information on all tasks you can perform with the product The Drea...

Page 33: ...pen 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 s...

Page 34: ...Explorer The font size in the Windows help viewer is set in Internet Explorer 2 Select View Text Size and then select a size To change the font size in the Macintosh help viewer In help select Edit De...

Page 35: ...lable online in LiveDocs format The LiveDocs version of help looks very similar to the in product help but it allows you to comment on the contents of individual help pages You can add useful informat...

Page 36: ...2 If the table of contents is not visible click the Table of Contents button to display the Table of Contents pane A list of help books is displayed 3 Click a book title to open it and display its top...

Page 37: ...e phrase motion tween but not pages that contain separate instances of motion and tween Exact phrase with explicit AND OR searches allow you to use a combination of quotation marks and the words and o...

Page 38: ...one of the following Select an item in the Actions panel toolbox pane on the left side of the Actions panel Select an ActionScript term in the Actions panel in the Script pane Place the insertion poin...

Page 39: ...Fs at retail copy stores if you prefer To print an individual help page 1 Click Print in the Help panel toolbar 2 In the Print dialog box select the printer and other printing options and then click P...

Page 40: ...romedia Flash web forums www macromedia com go flash_forums The web forums are the best place to ask questions because many Macromedia employees Team Macromedia volunteers Macromedia user group manage...

Page 41: ...he browser to a larger size You must restart Flash for the change to take effect Getting updates to Flash Help The Update feature in Flash allows you to update your help system with new and revised do...

Page 42: ...42 Learning Studio...

Page 43: ...you need to spend learning a new product This chapter contains the following sections Dreamweaver basics 43 Flash basics 57 Fireworks basics 102 Contribute basics 112 FlashPaper basics 118 Dreamweave...

Page 44: ...ain a maximum of 256 colors JPEG or Joint Photographic Experts Group files named after the organization that created the format have a jpg extension and are usually photographs or high color images Th...

Page 45: ...pace lets you view documents and object properties The workspace also places many of the most common operations in toolbars so that you can quickly make changes to your documents This section is desig...

Page 46: ...Property inspector Tag selector Document toolbar Insert bar Document window Panel groups N O TE The Windows workspace also has a Coder option which docks the panel groups on the left side and display...

Page 47: ...cked together but can be undocked into their own windows Windows snap automatically to each other to the sides of the screen and to the Document window as you drag or resize them You can switch betwee...

Page 48: ...d Design view lets you view both Code view and Design view for the same document in a single window When the Document window has a title bar the title bar displays the page title and in parentheses th...

Page 49: ...on Top becomes available in the View Options menu Use this option to specify which view appears at the top of your Document window Show Design View displays only the Design view in the Document window...

Page 50: ...gn your pages For more information about using the Document toolbar see Chapter 1 Exploring the Workspace in Using Dreamweaver The status bar The status bar at the bottom of the Document window provid...

Page 51: ...r For more information about using the status bar see Chapter 1 Exploring the Workspace in Using Dreamweaver The Insert bar The Insert bar contains buttons for creating and inserting objects such as t...

Page 52: ...tags such as b em p h1 and ul The HTML category enables you to insert HTML tags for horizontal rules head content tables frames and scripts Server code categories are available only for pages that us...

Page 53: ...mments 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 You cannot undock or move...

Page 54: ...roperties 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 The Property inspector is at the bottom of the workspace by de...

Page 55: ...ts of the local site the remote site or the testing server as a list of files When expanded it displays the local site and either the remote site or testing server The Files panel can also display a v...

Page 56: ...anel also lets you modify CSS properties in both All and Current mode You can resize any of the panes by dragging the borders between the panes In Current mode the CSS Styles panel displays three pane...

Page 57: ...commonly used workspace elements including the Stage Property inspector and Tools panel This section contains the following topics About Flash files on page 57 Getting to know the Flash workspace on p...

Page 58: ...keep some or all of your ActionScript code outside of your FLA files These can be helpful for code organization and for projects that have multiple people working on different parts of the Flash conte...

Page 59: ...ility in the Flash authoring environment on page 95 Using the Start page Whenever Flash is running with no documents open the Start page appears The Start page provides easy access to frequently used...

Page 60: ...al category Using the Stage The Stage is the rectangular area where you place graphic content including vector art text boxes buttons imported bitmap graphics or video clips and so on when creating Fl...

Page 61: ...Zoom tool is selected or Alt click Windows or Option click Macintosh To zoom in on a specific area of your drawing drag a rectangular selection on the Stage with the Zoom tool Flash sets the magnifica...

Page 62: ...ve the Stage view 1 In the Tools panel select the Hand tool To temporarily switch between another tool and the Hand tool hold down the Spacebar and click the tool in the Tools panel 2 Drag the Stage U...

Page 63: ...move frames in the Timeline You can also drag frames to a new location on the same layer or to a different layer For more information see Working with frames in the Timeline on page 66 Changing the a...

Page 64: ...Timeline from docking To lengthen or shorten layer name fields Drag the bar separating the layer names and the frames portions of the Timeline To resize the Timeline do one of the following If the Tim...

Page 65: ...ion To center the Timeline on the current frame Click the Center Frame button at the bottom of the Timeline Changing the display of frames in the Timeline You can change the size of frames in the Time...

Page 66: ...ws are generally smaller than with the Preview option Using frames and keyframes A keyframe is a frame in which you define a change to an object s properties for an animation or include ActionScript c...

Page 67: ...n the entire frame sequence from one keyframe to the next is selected when you click any frame in the sequence You can specify span based selection in Flash preferences To specify span based selection...

Page 68: ...select the frame keyframe or sequence and select Edit Timeline Remove Frame or right click Windows or Control click Macintosh the frame keyframe or sequence and select Remove Frame from the context me...

Page 69: ...ked on top of each other on the Stage Layers help you organize the artwork in your document You can draw and edit objects on one layer without affecting objects on another layer Where there is nothing...

Page 70: ...of the following Click the Insert Layer button at the bottom of the Timeline Select Insert Timeline Layer Right click Windows or Control click Macintosh a layer name in the Timeline and select Insert...

Page 71: ...as outlines do one of the following Click in the Outline column to the right of the layer s name to display all objects on that layer as outlines Click in it again to turn off outline display Click th...

Page 72: ...s You can rename copy and delete layers and folders You can also lock layers and folders to prevent them from being edited By default new layers are named by the order in which they are created Layer...

Page 73: ...ck all layers and folders Click it again to unlock all layers and folders Drag through the Lock column to lock or unlock multiple layers or folders Alt click Windows or Option click Macintosh in the L...

Page 74: ...hich layers are visible on the Stage Folders can contain both layers and other folders allowing you to organize layers in much the same way you organize files on your computer The layer controls in th...

Page 75: ...r Control click Macintosh and select Guide from the context menu Select Guide again to change the layer back to a normal layer About the main toolbar and edit bar The menu bar at the top of the Flash...

Page 76: ...information on using the drawing and painting tools see About Flash drawing and painting tools in Using Flash For information on using the selection tools see Selecting objects in Using Flash For info...

Page 77: ...ailable in the Flash The Current Selection menu indicates the tool or tools currently assigned to the selected location in the Tools panel 2 Click a tool in the Tools panel image or use the arrows to...

Page 78: ...ou can drag horizontal and vertical guides from the rulers onto the Stage when the rulers are displayed You can move guides lock guides hide guides and remove guides You can also snap objects to guide...

Page 79: ...use the Selection tool to drag the guide to the horizontal or vertical ruler For information on locking and unlocking guides see the following procedure To lock guides Select View Guides Lock Guides N...

Page 80: ...ll guides from the current scene If you want to save the current settings as the default click Save Default 2 Click OK To clear guides Select View Guides Clear Guides If you are in document editing mo...

Page 81: ...rs many ways to customize the workspace to your needs Using panels and the Property inspector you can view organize and change media and other assets and their attributes You can show hide and resize...

Page 82: ...ol To display the Property inspector do one of the following Select Window Properties Properties Press Control F3 Windows or Command F3 Macintosh About the Library panel The Library panel is where you...

Page 83: ...ation on using the Actions panel and writing ActionScript code including switching between editing modes see Using the Actions panel and Script window in Learning ActionScript 2 0 in Flash The Actions...

Page 84: ...ight of the Flash workspace To open a panel Select the desired panel from the Window menu To close a panel do one of the following Select the desired panel from the Window menu Right click Windows or...

Page 85: ...ss to all the time for example the Help panel or the Actions panel To move a panel Drag the panel by its gripper on the left side of the title bar To add a panel to an existing panel group Drag the pa...

Page 86: ...lor Mixer Actions Property inspector and Library panels or to a custom layout that you have saved previously To save a custom panel set 1 Select Window Save Current 2 Enter a name for the layout and c...

Page 87: ...ets 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...

Page 88: ...lect No Document to start Flash without opening a document For Undo enter a value from 2 to 300 to set the number of undo redo levels Undo levels require memory the more undo levels you use the more s...

Page 89: ...mpletely surrounds the object For Timeline Options select Span Based Selection to use span based selection in the Timeline rather than the default frame based selection For more information on span ba...

Page 90: ...ing items to a location outside of Flash When you are pasting within Flash the full gradient quality of the copied data is preserved regardless of the Gradients on Clipboard setting For PICT Settings...

Page 91: ...ent that is specific to the Flash Basic 8 or Flash Professional 8 authoring tool as a Flash MX 2004 file This option is selected by default Select Warn on Missing Fonts to have Flash warn you when you...

Page 92: ...Select Warn on Automatically Converting from Drawing Object to Group to have Flash warn you when it converts a graphic object drawn in Object Drawing mode to a group Select Show Incompatibility Warni...

Page 93: ...open the file in a web browser 7 To print the file use the browser s Print command To select a keyboard shortcut set 1 Select Edit Keyboard Shortcuts Windows or Flash Keyboard Shortcuts Macintosh 2 In...

Page 94: ...rtcut click the Add Shortcut button To remove a shortcut click the Remove Shortcut button and proceed to step 6 5 If you are adding a shortcut enter the new shortcut key combination in the Press Key t...

Page 95: ...an work with these interface elements without using the mouse You can customize the keyboard shortcuts for accessibility in the authoring environment using the Workspace Accessibility Commands section...

Page 96: ...docked panel Pressing the keyboard shortcut repeatedly then moves the focus through the other docked panels from right to left and from top to bottom of the workspace If you move the focus through all...

Page 97: ...for panel controls focus is applied to a control and the control is activated using the following criteria The panel with the current focus must be expanded in order for you to select a control in the...

Page 98: ...Macintosh to activate the currently selected pop up menu item To move the focus through the controls in a panel 1 Press Tab when the focus is currently applied to the panel pop up menu Press Tab repe...

Page 99: ...on the Stage Any other element currently selected becomes deselected when the Stage is selected Once the Stage is selected you can use the Tab key to navigate through all objects on all layers one at...

Page 100: ...row key To collapse an expanded folder select the folder and press the Left Arrow key To move to the parent folder of an expanded folder press the Left Arrow key To move to the child folder of an expa...

Page 101: ...can paste a library item into a different location in the same library where it originated If you attempt to paste a library item into a location containing another item by the same name you can selec...

Page 102: ...The following are the most common file types in Fireworks PNG or Portable Network Graphic is the native file format for Fireworks PNG is a versatile web graphic format that can support up to 32 bit c...

Page 103: ...or menus and other panels The Tools panel on the left of the screen contains labeled categories including bitmap vector and web tool groups The Property inspector appears along the bottom of the docum...

Page 104: ...Fireworks which contains both vector and bitmap tools and is capable of opening or importing both formats Bitmap graphics are composed of dots called pixels arranged in a grid When you edit a bitmap...

Page 105: ...options remain displayed as you work with the tool For other tools such as the basic shape Pen and Line tools the Property inspector displays the properties of selected objects For more information a...

Page 106: ...e properties of the current selection tool or document By default the Property inspector is docked at the bottom of the workspace The Property inspector can be open at half height displaying two rows...

Page 107: ...ctor options see the appropriate sections in Using Fireworks Using panels Panels help you edit aspects of a selected object or elements of the document Panels let you work on frames layers symbols and...

Page 108: ...nces of these symbols from the Library panel to your document You can make global changes to all instances by modifying only the symbol The URL panel lets you create libraries containing frequently us...

Page 109: ...nu You can undock panel groups add panels to a group undock individual panels rearrange the order of docked panel groups and collapse and close panel groups You can also open and close individual pane...

Page 110: ...of the panel group s Options menu The Group With command s name changes depending on the name of the active panel To rename a panel group 1 Click the icon in the upper right of the panel group and sel...

Page 111: ...eeHand MX In addition you can export your files to Photoshop FrontPage AdobeGoLive and Illustrator or you can preview your files in the browser of your choice Navigating and viewing a document You can...

Page 112: ...ab Contribute basics To get the most out of your Contribute experience you should understand the basic elements of the Contribute workspace This section introduces you to the most important and common...

Page 113: ...te browser you can browse to any web page not just to pages on your website The Contribute browser functions as a true web browser you can click links in web pages to browse to the page you want to ed...

Page 114: ...website or creating a new page The editor toolbar contains buttons for common operations from the File Insert Format and Table menus The text formatting toolbar contains buttons for formatting text I...

Page 115: ...browser and all drafts you re currently editing The Draft Console which shows the status of your drafts also has a link on the Pages panel The How Do I panel provides quick step by step instructions t...

Page 116: ...he following Select View Sidebar In Windows click the arrow on the splitter bar between the sidebar and the Contribute browser editor On the Macintosh double click the grabber on the splitter bar betw...

Page 117: ...t sure if you are browsing or editing in Contribute look at the toolbar When you are browsing you ll see the browser toolbar with the Edit Page or Create Connection button and when you are editing the...

Page 118: ...h as Microsoft Project Microsoft Visio and even QuarkXPress and AutoCAD Flash documents are typically much smaller than other document types When you embed Flash documents in a web page you can view t...

Page 119: ...le words or lines of text 3 Click the Pan button to return to viewing the document To search the document 1 Type words that you want to search for in the search text field and then click the Search bu...

Page 120: ...t Width button to resize the document so that the width of the page fills the viewer To navigate or page through the document do one of the following Enter a number in the Page Navigation text box to...

Page 121: ...environment 123 Planning page design and layout 125 Creating content assets 128 Assembling testing and deploying 130 Maintaining and updating your site 133 About the web development workflow A typica...

Page 122: ...Flash Fireworks Contribute and FlashPaper enables you to easily design develop and maintain websites and applications in both coding and design environments This chapter introduces a sample web develo...

Page 123: ...ers connect at various speeds may or may not have media plug ins and use various types of devices to view Internet content Because all these factors affect who uses your site determining your target a...

Page 124: ...dFusion web server for development any file in the CFusionMX wwwroot folder or in any of its subfolders can be served to a web browser Define your site in Dreamweaver In Dreamweaver the term site can...

Page 125: ...in Dreamweaver Create page mock ups to determine your site s appearance Planning your page design and layout before you actually begin building your web pages saves you a great deal of time during th...

Page 126: ...126 Web Development Workflow For example consider the following sketch A mock up in Fireworks might look like this...

Page 127: ...reating a page layout is to position elements using HTML tables A table consists of one or more rows with each row containing one or more cells Tables are powerful tools for presenting tabular data an...

Page 128: ...drop shadows glows and other effects to vector objects bitmaps and text Fireworks also generates JavaScript which makes rollovers buttons and pop up menus easy to create and its optimization features...

Page 129: ...olor opacity rotation and other properties You can create frame by frame animation in which you designate a separate image for each frame or tweened animation in which you set the first and last frame...

Page 130: ...an add text assets and design elements such as images colors movies sound and other forms of media You can simply drag saved assets to the page or you can do any of the following to create your web pa...

Page 131: ...est it locally In fact it s a good idea to test and troubleshoot your site frequently throughout its construction so that you can catch problems early and avoid repeating them It s important to make s...

Page 132: ...mweaver Validator Check your Flash content for errors while it s running in Flash Player You can use the Flash debugger in test mode with local files or you can use the debugger to test files on a web...

Page 133: ...and synchronize the files on your local and remote sites You can also use Contribute to maintain your website Using Contribute you can allow others to update content on the website so that content st...

Page 134: ...134 Web Development Workflow...

Page 135: ...u 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 This part contains...

Page 136: ......

Page 137: ...utorial you ll only learn how to set up the local site so that you can begin building web pages right away Later after you ve completed the website you ll learn how to create a remote site so that you...

Page 138: ...You do not need to worry about this folder unless you are developing a web application For more information about the Testing Server folder see Specifying where dynamic pages can be processed in Using...

Page 139: ...N OT E On the Macintosh there s a folder called Sites already in your user folder Don t use that Sites folder as your local folder the Sites folder is where you place your pages to make them publicly...

Page 140: ...s to and from your web server by using a number of file transfer methods Now you ll define the cafe_townsend folder that you copied into the local_sites folder as your local folder 1 Start Dreamweaver...

Page 141: ...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 7...

Page 142: ...t folder is the place on your local computer where you keep the working copies of your web pages Later if you want to publish your pages and make them publicly available you ll need to define a remote...

Page 143: ...te the following tasks Review your task 143 Create and save a new document 145 Import and place images 146 Create a composite of the content area 148 Place text and images 153 Export the image for the...

Page 144: ...144 Tutorial Creating Page Mock ups When the team returned to the office they told you the clients particularly liked two designs which were captured in the following napkin sketches...

Page 145: ...orks select File New 2 In the New Document dialog box enter 700 for the width and 600 for the height Ensure that both measurements are in pixels 3 Set the Canvas color to Custom and select black from...

Page 146: ...ll fit on the final web page Import the banner graphic The banner graphic you have is a mock up of the banner you ll use on the actual page You ll produce the final version of the banner in Tutorial...

Page 147: ...aceholder images are valuable for representing how a composition element will look without having to accommodate the large file size or having to build the complex element in its final form 1 Select F...

Page 148: ...jects to graphically represent areas of the web page Before you begin you review the napkin sketch to refresh your memory of the design Create and edit a rounded rectangle The first object to create i...

Page 149: ...ngle anywhere on the canvas Don t worry about size and position at this point you ll resize and position it later in this procedure 3 When you release the mouse button a rounded rectangle appears sele...

Page 150: ...ecide to do this precisely with the Property inspector 1 With the rounded rectangle still selected in the Property inspector type 700 in the width box W type 340 in the height box H type 0 for the X p...

Page 151: ...Shapes Properties panel and then click anywhere outside the canvas to deselect the rounded rectangle 4 Save your work Create a navigation sidebar area Next you decide to create a rectangle to define t...

Page 152: ...he Y position and then press Enter to apply the last value 2 Save your work Create the copy area Finally you need to create an off white rectangle to represent the area where the web page s text will...

Page 153: ...white fill and no stroke Next you need to resize and position the rounded rectangle You decide to do this precisely with the Property inspector With the rectangle still selected in the Property inspec...

Page 154: ...Enter 14 as the font size Select Smooth Anti Alias as the anti aliasing level Click the Color icon next to the font size menu and select the white swatch Click the Left Alignment button Enter 200 as...

Page 155: ...ks 6 Click the Pointer tool in the Tools panel to deselect the text box 7 Save your work Place a placeholder image for the video Next you add a placeholder image in the main content area to represent...

Page 156: ...d image to deselect it 6 Save your work Place a placeholder image for the featured item Next you add a placeholder image in the main content area to represent a featured menu item to be displayed on t...

Page 157: ...r the page copy Finally you will draw an empty text box and import some placeholder text into it to represent the page copy 1 In the Vector section of the Tools panel select the Text tool 2 In the Pro...

Page 158: ...remipsum txt file located in the following folder local_sites cafe_townsend fireworks_assets Now that you ve created the basic text blocks you decide to modify some of the text so that the paragraphs...

Page 159: ...line button Click the Color box type 32596E in the text box at the top of the Color window and then press Enter 4 Click the I beam pointer at the end of the second paragraph and press the spacebar on...

Page 160: ...rt 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...

Page 161: ...rt dialog box appears 5 Browse to the following folder local_sites cafe_townsend fireworks_assets 6 Click Export Fireworks creates a JPEG version of your page mock up in the fireworks_assets folder Yo...

Page 162: ...162 Tutorial Creating Page Mock ups...

Page 163: ...e tables effectively act as container boxes for the content you ll add later In this tutorial you will complete the following tasks Examine the design comp 163 Create and save a new page 165 Insert ta...

Page 164: ...store and a place where I can insert video clips Based on that discussion the designer begins planning the layout of the site and makes sketches of sample pages that fulfill the client s requirements...

Page 165: ...a new page and saving it in the cafe_townsend local root folder of your website The page eventually becomes the home page for Cafe Townsend a fictional restaurant If you haven t created the cafe_towns...

Page 166: ...File Save to save your page Insert tables Next you ll add a table that will hold text graphics and Macromedia Flash assets 1 Click once on the page to place the insertion point in the upper left corn...

Page 167: ...nsert tables 167 Enter 0 in the Cell Spacing text box 4 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 spacin...

Page 168: ...mweaver displays the table width and the width for each table column in the Table selector indicated by green lines when the table is selected or when the insertion point is in the table Next to the w...

Page 169: ...rt Table dialog box Enter 1 in the Rows text box Enter 1 in the Columns text box Enter 700 in the Table Width text box Select Pixels from the Table Width pop up menu Enter 0 in the Border Thickness te...

Page 170: ...e Mode Expanded Table Mode N O TE 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 ca...

Page 171: ...ter Windows or Return Macintosh 4 Click once inside the second row of the first table 5 In the Property inspector enter 166 in the Cell Height text box and press Enter Windows or Return Macintosh 6 Cl...

Page 172: ...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...

Page 173: ...nter Windows or Return Macintosh 12 Set the width of the third column to 330 pixels If you have the Table selector enabled View Visual Aids Table Widths you ll see all three of the pixel values you ju...

Page 174: ...operty inspector enter 24 in the Cell Height text box and press Enter Windows or Return Macintosh Your layout should now look as follows 15 Click the Exit Expanded Tables Mode link at the top of the D...

Page 175: ...the Alternate Text text box blank A BO UT A note on alternative text Alternative text is a textual description of an image on a web page It is part of the HTML code and does not appear on the page It...

Page 176: ...rowser Before you publish your site replace any image placeholders you ve added with web friendly graphic files such as GIFs or JPEGs If you have Macromedia Fireworks you can create a new graphic from...

Page 177: ...ll of the three columned table 2 Click the td tag cell tag in the tag selector to select the cell 3 In the Property inspector Window Properties click once inside the Background Color text box The text...

Page 178: ...columned table 6 Click the td tag cell tag in the tag selector to select the cell 7 In the Property inspector click once inside the Background Color text box enter the hexadecimal value F7EEDF and pre...

Page 179: ...s 00 33 66 99 CC or FF RGB values 0 51 102 153 204 and 255 respectively represents a web safe color You can select colors in Dreamweaver by entering hexadecimal values in the appropriate text boxes or...

Page 180: ...able based Page Layout 3 Click OK Your page background turns to black 4 Save your work Your page layout is now complete The layout contains a number of tables that can hold assets such as images text...

Page 181: ...r 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 This part contains the following sections Tuto...

Page 182: ......

Page 183: ...port the images 191 View the final optimized images 192 Review your task According to the page mock up you created previously the Cafe Townsend website will include a Flash based photo slideshow You a...

Page 184: ...are all same width Because the filenames are not very informative you want to add a dish_ prefix to the filenames to better describe the images The first step is to select the files you want to proces...

Page 185: ...og box select the Add Prefix option and enter dish_ in the text box 8 Click Next to move to the next screen 9 Make sure the Same Location As Original File option is selected and then click Batch to st...

Page 186: ...it However you decide to take a more efficient approach create a single image file that holds all six images while still letting you compose and export the images at any time You begin by creating the...

Page 187: ...you create several frames in the ImageSource png file to hold the image files that you processed earlier Frames are a Fireworks feature that are typically used to create animations and rollovers In th...

Page 188: ...he frames to reflect the filenames for the images you ll export later in this tutorial 5 In the Frames panel double click Frame 1 6 Type Image0 in the textbox that appears and then press Enter to acce...

Page 189: ...the following folder on your hard disk local_sites cafe_townsend fireworks_assets camera_files 3 Select dish_1013 jpg and click Open 4 Align the insertion pointer just outside the upper left corner of...

Page 190: ...til the part you want appears in the window created by the canvas 6 Click anywhere outside the selected image to deselect it 7 Repeat steps 1 through 6 for the remaining five images making sure to sel...

Page 191: ...ou want as follows 1 Select File Image Preview 2 In the Image Preview dialog box do the following In the Format pop up menu select JPEG The JPEG format is best for digital or scanned photographs image...

Page 192: ...eworks exports each frame as a separate image file to the images folder using the name of the frame for the filename View the final optimized images After exporting the images you can see how they loo...

Page 193: ...detailed information about any of the features covered in this tutorial and for information on additional Fireworks features see Using Fireworks Original digital camera files Filename File dimensions...

Page 194: ...194 Tutorial Handling Photographs...

Page 195: ...e logo 196 Organize your objects with layers 201 Create a contrasting background for the logo 203 Create an outline around the banner 207 Create a slanted edge effect 209 Add a tag line to the banner...

Page 196: ...following Enter 700 for the width and 92 for the height Ensure that both measurements are in pixels Set the canvas color to Custom and select black from the custom color menu 3 Click OK to create the...

Page 197: ...Import and browse to the following folder on your hard disk local_sites cafe_townsend fireworks_assets 2 Select cafePhoto jpg and click Open 3 Align the insertion pointer with the upper left corner o...

Page 198: ...wer right corner of the Document window 6 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 m...

Page 199: ...of the Cafe Townsend logo Vector graphics are one of two types of graphics you can create import or modify in Fireworks The file you import was created as a vector graphic in Fireworks and saved in t...

Page 200: ...r file is imported 4 Click OK to accept the default options 5 Position the insertion pointer inside the upper left corner of the banner and click to insert the graphic At this point the logo is not cl...

Page 201: ...graphic contains a single layer called Layer 1 3 At the bottom of the panel click the New Duplicate Layer button twice to create two more layers 4 Rename the layers by double clicking each one and ent...

Page 202: ...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...

Page 203: ...go 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...

Page 204: ...erty inspector set the following properties for the tool a Click the Fill Category box and select Gradient Linear b Click the Fill Color box next to the bucket icon and then click the button just abov...

Page 205: ...ing color of the gradient changes to reflect your color choice d Click the second gradient color button on the right side of the dialog box and click the white swatch with the eyedropper pointer The e...

Page 206: ...oints of the rectangle to position and resize the rectangle so that it is within and slightly smaller than the logo The rectangle obscures the logo beneath it You want to change the stacking order of...

Page 207: ...shape of its path creating a cookie cutter effect 1 Select the Background layer in the Layers panel 2 Select the Rounded Rectangle tool in the Vector section of the Tools panel 3 In the Property insp...

Page 208: ...ss of the corners 5 With the rounded rectangle still selected select Edit Cut 6 In the Layers panel select the background photo called Bitmap on the Background layer You want to apply the mask to this...

Page 209: ...egory pop up menu select Solid Click the Fill Color box next to the bucket icon and select the black swatch with the eyedropper pointer 4 In the Document window outside the canvas click four times to...

Page 210: ...the Property inspector set the following properties for the tool Select Arial from the Font pop up menu Enter 14 as the font size Click the Bold button Click the Color box type F7EFE3 as the text col...

Page 211: ...If the Optimize panel isn t already open select Window Optimize to open it 2 From the Settings pop up menu select JPEG Better Quality The options in the panel change to reflect the new setting These s...

Page 212: ...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 view...

Page 213: ...e JPEG file is exported to the images folder Remember that the PNG file is your source file or working file Although you exported your document in JPEG format you also must save the PNG file so that a...

Page 214: ...ork on the design you can edit the PNG file and export it again A PNG file always remains fully editable even if you export the image to another format such as JPEG In this tutorial you accomplished t...

Page 215: ...data sources If you have not already done so Macromedia recommends that before you take this tutorial you read Flash basics on page 57 In this tutorial you will complete the following tasks Review you...

Page 216: ...they usually occupy an area of the web page that is set aside for content that can change depending on the needs of the business or website For example if the fictional restaurant Caf Townsend has a s...

Page 217: ...u copied to your local disk in Chapter 4 Tutorial Setting Up Your Site and Project Files and double click flash_fma_finished swf The completed application runs in Flash Player Click Next to watch the...

Page 218: ...You will learn more about the role of each of these parts of Flash as you complete the tutorial 4 When you are finished viewing the finished document close it and be sure not to save any changes to th...

Page 219: ...Properties The default location of the Property inspector is at the bottom of the Flash application window The Property inspector 2 In the Property inspector enter 60 in the Frame Rate text box The a...

Page 220: ...erts the px for pixel after the number The Document Properties dialog box 5 In the Timeline click the value in the Zoom menu and enter 75 This makes it easier to see your entire document in the Docume...

Page 221: ...becomes a drawing area where you can draw and edit the symbol A B OU T About Symbols and the Library panel Symbols are reusable assets that allow you to use a single asset more than once in your Flas...

Page 222: ...t you created become the container for individual images your FMA will display This is why you named it imageHolder Next you create another symbol that becomes a container for a stack of five instance...

Page 223: ...ter Windows or Return Macintosh This locates the upper left corner of the holder0 instance at the upper left corner of the slides symbol 7 Drag the imageHolder symbol from the Library panel to the dra...

Page 224: ...technique of Flash authoring The completed slides symbol To create the third symbol 1 Select Insert New Symbol 2 In the Create New Symbol dialog box enter slideShow in the Name text box and click OK...

Page 225: ...lips and nested Timelines Each movie clip symbol can have its own timeline that allows the movie clip to contain animation or ActionScript of its own This is why you see the name of the symbol you are...

Page 226: ...frames This adds frames to the Timeline and adds keyframes to the selected frames Frame 20 The Timeline with the added keyframes in Frame 20 4 Repeat the process by selecting Layers 1 and 2 in Frame 4...

Page 227: ...n item double click or drag the item to the Script window and will be unable to type in the Script window click the Script Assist button in the Actions panel to exit Script Assist mode 5 In the Action...

Page 228: ...tionScript code that makes the playhead jump to these labeled frames To add the frame labels 1 In the Timeline select Frame 2 of Layer 2 2 In the Property inspector enter slide0 in the Frame Label tex...

Page 229: ...e slides_mc movie clip instance on the Stage to select it A B OU T About motion tweens The name motion tween comes from the fact that the animation includes motion and from the way that motion is crea...

Page 230: ...ct Frame 60 in Layer 1 15 In the Property inspector select Motion from the Tween menu 16 Drag the Ease slider up until the Ease value is 100 17 Click the slides_mc movie clip instance on the Stage to...

Page 231: ...ree more times to insert three more layers You now have four layers in the main Timeline 4 Double click the layer name Layer 5 to make the name editable 5 Enter the name actions as the new layer name...

Page 232: ...upper left corner of the movie clip exactly with the corner of the Stage 4 Still in the Property inspector enter slideShow_mc as the instance name for the movie clip 5 Save your work Create the border...

Page 233: ...Fill Color Picker 6 Draw a rectangle on the Stage that is approximately the same shape as the Stage Drawing a black rectangle the shape of the Stage 7 In the Tools panel select the Selection tool 8 O...

Page 234: ...find the Match size area and click the Match Width and Height button Your rectangle becomes the same size as the Stage area Clicking the Match Width and Height button 12 With the rectangle still selec...

Page 235: ...rizontal Center button Clicking the Align Horizontal Center button The rectangle is now precisely centered on the Stage The black rectangle centered on the Stage 14 Click outside the Stage to deselect...

Page 236: ...e Rectangle Settings dialog box enter 16 in the Corner Radius text box and click OK 19 Select View Snapping Snap to Pixels to turn on pixel snapping This causes the edges of shapes that you draw to sn...

Page 237: ...ext boxes W 700 H 150 X 0 Y 0 The properly sized blue rectangle on the Stage 24 Double click the blue rectangle again to select it 25 Press Delete to delete the blue rectangle A white rectangle appear...

Page 238: ...ct the Rectangle tool 5 Select No Stroke from the Stroke Color Picker 6 Click the Fill Color swatch to display the Fill Color Picker 7 In the Fill Color Picker enter 80 in the Alpha text box 8 Still i...

Page 239: ...rner of the rectangle to the right so that the left side of the rectangle becomes a diagonal line at approximately a 30 angle 19 In the Tools panel click the Selection tool This deselects the control...

Page 240: ...of the gray blue shape you just created The rectangle should be almost as wide as the blue shape Don t worry about the exact placement of the rectangle You will adjust that later 5 In the Tools panel...

Page 241: ...tor deselect the bold icon 5 Select Multiline from the Line Type menu 6 With the Text tool draw another text rectangle on the Stage filling the lower part of the blue shape you created earlier below t...

Page 242: ...u have completed the menu movie clip you are ready to add it to the Stage in the main Timeline To add the menu movie clip to the Stage 1 In the Tools panel click the Selection tool to ensure that the...

Page 243: ...el open the User Interface category by clicking the plus sign next to the User Interface category name 4 Drag the Button component from the Components panel to the lower part of the blue rectangle on...

Page 244: ...on text boxes that you added to the menu movie clip earlier 4 Select Control Test Movie The Flash document opens and plays in a new window 5 In the Test Movie window click Next The test title and test...

Page 245: ...nu item 0 var image0title String Summer salad var image0desc String Butter lettuce with apples blood orange segments gorgonzola and raspberry vinaigrette var image0uri String images image0 jpg 1 var i...

Page 246: ...e menu_mc description_txt text this _parent image currImage desc add the event listener for the button next_btn addEventListener click nextMenuItem Review the ActionScript code on page 246 explains th...

Page 247: ...my traditional cheesecake served with chocolate sauce and strawberries var image3uri String images image3 jpg This code declares four sets of three variables each Each set of three variables represent...

Page 248: ...le_txt text box in the menu_mc movie clip instance to the value of a variable In this case the variable name is constructed from the word image plus the value of the currImage variable plus the word t...

Page 249: ...description_txt text this _parent image currImage desc The code for the Next button is contained in the nextMenuItem function A function is a block of code that is set up to execute when a particular...

Page 250: ...orials Publish your document Now that you have completed your Flash document you are ready to publish it in a web page The first step in this process is to save the FLA version of your document as a c...

Page 251: ...sh get support and send feedback to the company Registration Register to receive the latest news about upgrades and new products technical support and more To register online go to www macromedia com...

Page 252: ...duces new features to navigate The Macromedia On Demand seminars help you get up to speed quickly The Macromedia seminars feature multimedia presentations and demos designed to help you maximize your...

Page 253: ...clude 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...

Page 254: ...254 Tutorial Building Your First Flash Application...

Page 255: ...Publish your document 264 Review your task In this tutorial you will create a type of application known as a flexible messaging area or FMA An FMA is a common type of Flash application used for displa...

Page 256: ...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 files you work on in Flash You can also play the SWF ver...

Page 257: ...pod_finished swf You now see the completed tutorial application in the Flash authoring environment 3 After you have the file open you can explore the Stage Library panel and the Timeline On the Stage...

Page 258: ...l do is convert a QuickTime video file MOV to a Flash video file FLV To convert the video file 1 Start the Flash Video Encoder application 2 Drag the cafe_townsend_chef mov file from the cafe_townsend...

Page 259: ...aves it in the same folder as the original cafe_townsend_chef mov file You are now ready to use the FLV file in a Flash document 7 Close the Flash Video Encoder application Create a new Flash document...

Page 260: ...the document properties at any time but it is helpful to make certain decisions such as the Stage size and background color at the beginning of the process Document properties are properties that affe...

Page 261: ...documents Most components are user interface elements such as buttons menus and so on Some are not meant to be seen on the Stage and are used instead to perform data handling functions By using a comp...

Page 262: ...a media component 1 Select Window Components to open the Components panel 2 In the Components panel click the plus sign next to the FLV Playback Player 8 category 3 Drag an FLVPlayback component to t...

Page 263: ...inspector with the proper values entered 5 With the new component still selected on the Stage select Window Component Inspector to open the Component inspector 6 In the Component inspector s Paramete...

Page 264: ...ple HTML file in the cafe_townsend folder where you saved the video_pod fla file Flash also saves a SWF file called ClearOverPlaySeekMute swf that contains the graphics for the video controller overla...

Page 265: ...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...

Page 266: ...266 Tutorial Building a Video Player Flash Professional only...

Page 267: ...ed together in the Cafe Townsend website and format the website with CSS Then you ll learn how to use Dreamweaver to publish the Cafe Townsend website to a remote server Finally when the Cafe Townsend...

Page 268: ......

Page 269: ...task 271 Insert images 272 Insert and play a Flash file 279 Insert Flash Video 282 Insert text 285 Create links 290 Preview your page in a browser 292 Locate your files In this tutorial you ll begin...

Page 270: ...iffer slightly if you are using assets from the completed_files folder For example if you completed the Fireworks banner graphic tutorial the finished asset banner_graphic jpg will be in the cafe_town...

Page 271: ...staurant 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...

Page 272: ...images to a web page in Dreamweaver In this section you ll add four different images to the index page for Cafe Townsend using various methods Replace the image placeholder 1 In Dreamweaver open the...

Page 273: ...ge placeholder with the banner graphic for Cafe Townsend 5 Click once outside the table to deselect the image 6 Save the page File Save N OT E If you didn t complete Creating a Page Banner open the ba...

Page 274: ...es folder inside the cafe_townsend folder select the body_main_header gif file and click OK A long colored graphic appears in the table row This might look more like background color for the table cel...

Page 275: ...low the colored table cells 2 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 3 Click once outsi...

Page 276: ...dow 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 t...

Page 277: ...ee Chapter 4 Tutorial Setting Up Your Site and Project Files or Using Dreamweaver The Assets panel provides two views The Site list shows all of the assets in your site including colors and URLs that...

Page 278: ...e to the insertion point in the center table cell Click Insert at the bottom of the Assets panel The street_sign jpg graphic appears on the page 8 Click once outside the table to deselect the image 9...

Page 279: ...you need to insert HTML code that embeds the file in the Dreamweaver page The easiest way to do this is to insert the SWF file the exported Flash Movie file into the page When you insert a SWF file i...

Page 280: ...browse to the flash_fma_finished swf file in the completed_files flash folder in the cafe_townsend root folder A BO UT About Flash files When you build assets in Macromedia Flash you work in FLA file...

Page 281: ...eholder by clicking it 5 In the Property inspector Window Properties click Play Dreamweaver plays the Flash file in the Document window showing you what site visitors will see when they view the page...

Page 282: ...The command inserts a Flash component which displays the Flash Video content you select as well as a set of playback controls when viewed in a browser The Insert Flash Video command gives you the fol...

Page 283: ...t folder of your site and selecting the FLV file 5 Select Halo Skin 2 from the Skin pop up menu A preview of the selected skin appears below the Skin pop up menu The Skin option specifies the look and...

Page 284: ...ions Constrain maintains the same aspect ratio between the width and height of the Flash Video component This option is selected by default Auto play specifies whether to play the video when the web p...

Page 285: ...tory as the HTML file to which you re adding Flash Video content in this case the cafe_townsend root folder When you upload the HTML page containing the Flash Video content Dreamweaver uploads these f...

Page 286: ...king in until now because the file is not an HTML file 2 In the sample_text txt Document window press Control A Windows or Command A Macintosh to select all of the text and then select Edit Copy to co...

Page 287: ...the text so that everything fits in the table appropriately 6 Make sure the insertion point is still inside the table cell where you just pasted the text If it isn t click inside the table cell 7 In t...

Page 288: ...rt text for a navigation bar However the text won t look like a navigation bar until you format it in the next tutorial 1 Click once in the first column of the three columned table the column that is...

Page 289: ...ion 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 The fixed width of the table cell determines h...

Page 290: ...an create links at any stage of the site creation process In this section you ll create links for the navigation bar even though you haven t formatted the text into the form of a navigation bar yet Th...

Page 291: ...and not the space after it 2 In the Property inspector Window Properties click the folder icon next to the Link text box 3 In the Select File dialog box browse to the menu html file which is in the sa...

Page 292: ...ugh idea of what your page will look like on the web but you must preview the page in a browser to see the definitive end result Though browsers in general produce the same results each browser versio...

Page 293: ...age full of content The next step is to format some of the content to make it more appealing In the next tutorial you ll learn how to use CSS to format the text that you added N O TE Dreamweaver autom...

Page 294: ...294 Tutorial Adding Content to Pages...

Page 295: ...f your page by letting you format and position text in ways that HTML cannot In this tutorial you will complete the following tasks Locate your files 296 Review your task 297 Learn about CSS 298 Creat...

Page 296: ...n of the tutorial and begin with that The finished version of the tutorial add_content html is located in the completed_files dreamweaver folder within the cafe_townsend folder that you copied to your...

Page 297: ...ormat 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 pag...

Page 298: ...CSS lets you control many properties that cannot be controlled with HTML alone For example you can specify different font sizes and units pixels points and so on for selected text By using CSS to set...

Page 299: ...of text All class styles begin with a period For example you could create a class style called red set the color property of the rule to red and apply the style to a portion of already styled paragra...

Page 300: ...ppearance of multiple web pages from a central location instead of setting styles on each individual web page 1 Select File New 2 In the New Document dialog box select Basic page in the Category colum...

Page 301: ...e css file is linked to one or more pages in a website by using a link in the head section of a document Internal or embedded CSS style sheets are collections of CSS rules that are included in a style...

Page 302: ...eb page the rules defined in the style sheet are applied to the corresponding elements on the page For example when you attach the cafe_townsend css style sheet to the index html page all paragraph te...

Page 303: ...1 Tutorial Adding Content to Pages 3 Look in the Property inspector and make sure that the paragraph is formatted with the paragraph tag If the Format pop up menu in the Property inspector says Paragr...

Page 304: ...le Sheet button in the lower right corner of the panel 6 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 7...

Page 305: ...In All mode the CSS panel shows you all of the CSS rules that apply to the current document whether those rules are in an external style sheet or in the document itself You should see two main categor...

Page 306: ...he p rule appear in the Properties pane below 7 In the Document window click once anywhere in either of the two paragraphs that you just formatted 8 In the CSS Styles panel click Current at the top of...

Page 307: ...d to any HTML tag For more information on different types of CSS rules see Learn about CSS on page 298 1 In the CSS Styles panel click New CSS Rule in the lower right corner of the panel 2 In the New...

Page 308: ...ass style called bold in the cafe_townsend css file 6 In the CSS Rule Definition dialog box do the following In the Font text box enter Verdana sans serif In the Size text box enter 11 and select pixe...

Page 309: ...in the Style pop up menu in the Property inspector Apply a class style to text Now that you ve created a class rule you ll apply it to some paragraph text 1 In the Document window select the first fou...

Page 310: ...xt 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 nee...

Page 311: ...o see it 2 Define a new rule by typing the following code in the file after the bold class style navigation This is an empty rule The code in the file should look something like the following example...

Page 312: ...312 Tutorial Formatting Your Page with CSS 5 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...

Page 313: ...mal from the Style pop up menu Select None from the Decoration list Select Bold from the Weight pop up menu Enter FFFFFF in the Color text box 7 Click OK Now you ll use the CSS Styles panel to add a f...

Page 314: ...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 s...

Page 315: ...right enter 8px as the value and press Enter Windows or Return Macintosh 13 Locate the width property click once in the column to the right enter 140 in the first text box select pixels from the pop...

Page 316: ...the Properties pane 15 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 16 Save the cafe_townsend css file and cl...

Page 317: ...lick the rightmost a tag This action selects all of the text for the specified a tag or link 3 In the Property inspector Window Properties select navigation from the Style pop up menu In the Document...

Page 318: ...e having trouble formatting the link text make sure that a space not a return is between each linked word or words Also make sure that the space between two links is not itself linked If it is careful...

Page 319: ...f affecting certain elements in an HTML document based not on the HTML code of the document itself but on other external conditions applied by the web browser Pseudo classes can be dynamic in the sens...

Page 320: ...ick once at the end of the rule and press Enter Windows or Return Macintosh a few times to create some space 5 Paste Edit Paste the copied text in the space you just created 6 Add the hover pseudo cla...

Page 321: ...links you can see the new rollover effect Optional Center the contents of the page Lastly you ll use the tag selector to select all of the HTML in the document and center the document s contents NO T...

Page 322: ...index html page open in the Document window click the body tag in the tag selector Clicking the body tag selects everything between the open and close body tags in the Document window To see the selec...

Page 323: ...t center the body content of the page In Design view a dotted line borders the area that the div tags center 3 Save the page Your page is now finished The last task of building your website is to publ...

Page 324: ...324 Tutorial Formatting Your Page with CSS...

Page 325: ...folder is where you store your files for testing production collaboration and publication depending on your environment Dreamweaver refers to this folder as your remote site Before you can proceed yo...

Page 326: ...nformation about Dreamweaver sites see Chapter 2 Setting Up a Dreamweaver Site in Using Dreamweaver Define a remote folder Now you ll set up a remote folder so that you can publish your web pages The...

Page 327: ...server In either case continue with the instructions in this tutorial until you re connected to a remote server After you ve established a connection you can use the Dreamweaver Files panel to create...

Page 328: ...on the server from the FTP root folder to the remote site s root folder cafe_townsend If you re not sure of the path consult your system administrator In many cases this text box should be left blank...

Page 329: ...Files panel Window Files select the site s local root folder cafe_townsend 2 Click the blue Put Files arrow icon in the Files panel toolbar 3 When Dreamweaver asks if you want to put the entire site...

Page 330: ...icate the remote system s root folder as the host directory If you have problems connecting and you ve specified the host directory using a single slash you might need to specify a relative path from...

Page 331: ...her part of the server entirely In most cases such aliases have no effect on your ability to connect to the appropriate folder or directory however if you can connect to one part of the server but not...

Page 332: ...332 Tutorial Publishing Your Site...

Page 333: ...et up your users so that they can edit the website And by establishing user roles you can give your users as much or as little editing power as you want In this tutorial you will complete the followin...

Page 334: ...te Each connection you create is treated as a separate website in Contribute When you manually establish a website connection you can become the website s administrator As a Contribute administrator y...

Page 335: ...remote site for the Cafe Townsend website and then click Next 7 Enter your name and e mail address and then click Next 8 On the Summary screen review the connection settings to verify that they re cor...

Page 336: ...bsite from the submenu 2 Click Yes in the dialog box that asks whether you want to become the website administrator enter and confirm an administrator password for the website and click OK 3 In the Ad...

Page 337: ...te and click OK In the Administer Website dialog box you see that Contribute has three roles by default Administrator Publisher and Writer You re going to create a new role for the Cafe Townsend chefs...

Page 338: ...dialog box in the General category do the following a Select Allow Users to Publish Files to enable the chef to publish the menu after making changes b In the Role Description text box type Users in...

Page 339: ...rt them in the menu 12 Click the Add button and then select Image from the pop up menu 13 In the Choose Image dialog box double click the Cafe Townsend folder in the window double click the images fol...

Page 340: ...site Create a connection key and send it to users Contribute enables you to embed your website connection information in a connection key that you can send to other users The users simply double click...

Page 341: ...Next 8 Review the Summary screen and then click Done 9 In the Export Connection Key dialog box navigate to your desktop 10 Click Save 11 In the Administer Website dialog box click Close to exit the d...

Page 342: ...342 Tutorial Setting Up Your Website for Contribute Users...

Page 343: ...298 attaching 302 creating 300 CSS Styles panel 56 formatting with 295 323 Center Frame button 65 certification and training 252 Clear Keyframe command in Flash 69 Clipboard preferences in Flash 90 Co...

Page 344: ...09 panels overview of 107 109 Property inspector 106 107 Quick Export button 111 Tools panel 104 tools changing options of 105 workspace 103 Flash animation 129 inserting SWF files 279 playing content...

Page 345: ...and 128 exporting with Fireworks 213 importing 197 inserting 274 275 276 inserting in Dreamweaver 130 optimizing 211 placeholders for 175 importing images 197 Insert bar categories 51 Insert Blank Key...

Page 346: ...cenes preference 89 navigating FlashPaper SWF files 120 O objects stacking order 202 On Launch preferences in Flash 88 online resources accessing 26 opening FlashPaper SWF files in a new browser 120 o...

Page 347: ...ng with Dreamweaver 327 troubleshooting setup 330 Remove Frame command in Flash 68 renaming layers and layer folders 73 resizing FlashPaper SWF files 120 resources 251 253 rulers changing units of 78...

Page 348: ...ew in Context option 65 Preview option 66 resizing 64 showing frame thumbnails 65 66 using 62 viewing layers as outlines 71 working with frames 62 toolbars about 114 browser 114 Coding 53 customizing...

Page 349: ...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 Z Zoom tool in Fl...

Page 350: ...350 Index...

Reviews:

No comments

Brands by name

Popular brands

Load more brands