MACROMEDIA STUDIO 8-EXPLORING STUDIO 8 Скачать руководство пользователя

Страница: 204 / 350

204 Tutorial: Creating a Page Banner

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.

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

Содержание STUDIO 8-EXPLORING STUDIO 8

Страница 1: ...Exploring Studio 8...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 8: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 42: ...42 Learning Studio...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 126: ...126 Web Development Workflow For example consider the following sketch A mock up in Fireworks might look like this...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 134: ...134 Web Development Workflow...

Страница 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...

Страница 136: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 162: ...162 Tutorial Creating Page Mock ups...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 182: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 194: ...194 Tutorial Handling Photographs...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 254: ...254 Tutorial Building Your First Flash Application...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 266: ...266 Tutorial Building a Video Player Flash Professional only...

Страница 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...

Страница 268: ......

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 294: ...294 Tutorial Adding Content to Pages...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 324: ...324 Tutorial Formatting Your Page with CSS...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 332: ...332 Tutorial Publishing Your Site...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 342: ...342 Tutorial Setting Up Your Website for Contribute Users...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 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...

Страница 350: ...350 Index...

Результаты поиска

Содержание STUDIO 8-EXPLORING STUDIO 8

Отзывы:

Похожие инструкции для STUDIO 8-EXPLORING STUDIO 8

Бренды по названию

Популярные бренды

MACROMEDIA STUDIO 8-EXPLORING STUDIO 8, Руководство пользователя

Результаты поиска

Содержание STUDIO 8-EXPLORING STUDIO 8

Отзывы:

Похожие инструкции для STUDIO 8-EXPLORING STUDIO 8

Бренды по названию

Популярные бренды