TUTORIAL 4 Building a Navigation Bar with Fireworks

Size: px
Start display at page:

Download "TUTORIAL 4 Building a Navigation Bar with Fireworks"

Transcription

1 TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar also known as a nav bar is a series of buttons that appears on one or more pages of a website. Typically, all the buttons in a nav bar look the same, except for their text. The finished product will appear at the top of the Trio Motors website home page that you re creating. This tutorial contains the following sections: Create a new Fireworks document on page 140 Create a button symbol on page 141 Create button states on page 144 Create multiple button instances on page 146 Change button instance text on page 147 Assign URLs and names to the buttons on page 148 Optimize the navigation bar on page 149 Set HTML preferences on page 150 Export the document to HTML format on page 151 View the exported files in the Dreamweaver Files panel on page 152 View the Fireworks HTML file in a browser on page

2 Create a new Fireworks document In Tutorial 2, Creating a Table-based Page Layout in Dreamweaver, you used HTML tables to lay out your index.cfm page. You also inserted a line break (a space) between the first and second table. Now you ll create a new Fireworks document for a nav bar that fits between the two tables. 1 In Fireworks, select File > New. The New Document dialog box appears. 2 In the Width text field, enter 650, and select Pixels (the default) from the Width pop-up menu. 3 In the Height text field, enter 40, and select Pixels (the default) from the Height pop-up menu. 4 In the Resolution text field, enter 72, and select Pixels/Inch (the default) from the Resolution pop-up menu. 5 Under Canvas Color, select the White button if it is not already selected. 6 Click OK. A new Fireworks document appears in the workspace. The canvas is white and is 650 pixels wide by 40 pixels high. 7 Save the file (File > Save) as navbar.png. In Chapter 6, Setup for Sample ColdFusion Site, you created a folder called png within the site. When you save the new navbar.png file, save it inside that folder. It is good practice to keep all your PNG files in a central location. 140 Tutorial 4: Building a Navigation Bar with Fireworks

3 Create a button symbol Now you ll create the first button for the nav bar. You ll eventually use this button to create all the other buttons in the nav bar, so you want to make sure that the first button you create is large enough to contain the text of the longest word or words in the nav bar. In this example the longest words in the nav bar are Financial Services, so you ll create a Financial Services button first. Note: You should be familiar with the Fireworks Tools panel and Property inspector before proceeding. For more information, see Tutorial 3, Creating a Banner Graphic in Fireworks, on page Make sure that the file you created in the previous section, navbar.png, is open in the Document window. 2 In the Tools panel, click the Rectangle tool. 3 In the Property inspector, select light blue from the Fill Color pop-up menu. This tutorial uses a hexadecimal value of #CCCCFF. 4 Drag a rectangle across the canvas as shown. Don t worry about the exact size and position of the rectangle. You ll set its properties in the next step. 5 With the rectangle still selected, set its stroke, width, height, and x and y coordinates in the Property inspector. Select white (#FFFFFF) from the Stroke Color pop-up menu. Enter 1 as the stroke value. Select Pencil > Pixel Hard from the Stroke category Enter 131 in the Width text box. Enter 40 in the Height text box. Enter -1 in the X text box. Enter 0 in the Y text box. Note: If you cannot see the Width and Height text boxes, click the Expander arrow in the lower right corner of the Property inspector. Create a button symbol 141

4 6 In the Tools panel, click the Text tool. 7 In the Property inspector, do the following: Select a font from the Font pop-up menu. In this tutorial, Arial is selected. Enter 11 as the font size. Select dark blue (#000033) from the Fill Color pop-up menu. Click the Bold button. Click the Center Alignment button. Select Smooth Anti-Alias from the Anti-Aliasing Level pop-up menu. 8 Click once at the center of the blue rectangle. An empty text block is created. 9 Type FINANCIAL SERVICES inside the text block in capital letters. The width of the text block expands as you type. 10 Click once outside the text block to apply your entry. 11 Use the Pointer tool to center the text near the top of the rectangle as shown. Remember that you can also move objects in Fireworks by using the arrow keys on your keyboard. You can use them to move an object up, down, left, or right, one pixel at a time. In the example, the x coordinate of the text block is 0 and the y coordinate is Select both the rectangle and the text block by selecting Select All from the Select menu. 13 Select Modify > Symbol > Convert to Symbol. The Symbol Properties dialog box appears. 142 Tutorial 4: Building a Navigation Bar with Fireworks

5 14 Type Trio Nav Button in the Name text box, select Button as the symbol type, and click OK. A slice appears on top of the button graphic, and a shortcut icon appears at the left of the slice. This indicates that the selection in the workspace is an instance of the symbol you just created. Symbols are like master copies of your graphics. When you change a symbol, all the instances of that symbol in your document change automatically. Symbols reside in the library. 15 If the Library panel is minimized, click the word Assets on the Assets panel and click the Library tab. If the Assets panel isn t visible, select Window > Library. Your new button symbol is listed in the Library panel. Create a button symbol 143

6 Create button states Next, you ll create various states for the button symbol. Button states are the various ways that a button appears when rolled over or clicked in a web browser. 1 Double-click the button instance that you just created. Alternatively, you can double-click the preview of the button in the Library panel or the symbol icon beside it in the Library panel s symbol list. The Button Editor opens, with the button graphic displayed in the work area. 2 Click the canvas to make sure that everything is deselected. 3 Click the tabs at the top of the Button Editor. The first four tabs represent the button states. The last tab, Active Area, represents the hot area on the button, or the area where a user must click or roll over with a pointer to activate the button states. The active area is also the swap area for the button, or the area that changes with each button state. Currently there are no states for the button symbol other than the Up state, the state of the button before it is rolled over or clicked. 4 Click the Over tab at the top of the Button Editor, and then click the Copy Up Graphic button. The button graphic is copied from the Up tab. The Over state of a button is the way it appears when the pointer rolls over it. To give users visual feedback, you ll change the color of the rectangle behind the text. 144 Tutorial 4: Building a Navigation Bar with Fireworks

7 5 Select the rectangle. Be sure that you don t select the text instead; if you are unsure which one you are selecting, check the Layers panel (Window > Layers) to see which one is selected. 6 Click the Fill Color box in the Property inspector and select gray (#CCCCCC) as the color. The rectangle changes to gray. Note: This is the same web safe color that you chose for one of the table backgrounds in Tutorial 2, Creating a Table-based Page Layout in Dreamweaver. If the color change is not perceptible enough on your monitor, you can select another color. 7 Click the Down tab at the top of the Button Editor, and click the Copy Over Graphic button. The button graphic is copied from the Over tab. The Down state of a button is the way it appears after a user clicks it. This time you won t change the color of the rectangle; you ll leave it as it is. 8 Click Done in the Button Editor to apply your changes to the button symbol. 9 Click the Preview button in the upper left corner of the Document window and test the button s states. Turn slices off if necessary. You can turn slices off by clicking the Hide Slices and Hotspots button in the Tools panel. Show slices and hotspots button Hide slices and hotspots button 10 Click the Original tab and turn slices back on by clicking the Show Slices and Hotspots button. Create button states 145

8 Create multiple button instances Next, you ll create more instances of the button symbol. 1 Select the button in the workspace if it isn t already selected. The Property inspector displays button properties. 2 Select Edit > Clone. A new instance of the button appears on top of the original button. 3 Hold down Shift while pressing the Right Arrow key repeatedly to move the new instance to the right. This moves the instance in 10-pixel increments. If necessary, use the arrow keys alone to move the selection one pixel at a time. Position the instance to the immediate right of the original instance, but not overlapping, as shown in the illustration below. 4 Clone three more instances of the button, and position each instance to the right of the previous instance. Tip: As a shortcut, you can press Alt (Windows) or Option (Macintosh) while using the Pointer tool to drag the selected instance to make a copy of it. After positioning the new instance to the immediate right of the previous instance, select Edit > Repeat Duplicate to automatically create and place another copy of the instance. 5 In the Tools panel, click the Hide Slices and Hotspots button, and then use the arrow keys on your keyboard to move the buttons one pixel at a time until they are uniformly separated. In the nav bar in this example, no space exists between the buttons. Note: With no space between the buttons, the right edge of each button (except the last button) touches the left edge of the button next to it, giving the appearance of two pixels of white space between each button. (Remember that the white stroke, or outline, of each rectangle is one pixel.) The fifth button, like the first button, should be off the canvas by a few pixels. That is, there should be no white space showing at the left or right edges of the canvas. 6 Click the Show Slices and Hotspots button to turn slices back on. 146 Tutorial 4: Building a Navigation Bar with Fireworks

9 Change button instance text Now that you ve created all the buttons for your nav bar, you need to give each button unique text. You can easily change the text of a button instance by using the Property inspector. 1 Select the button instance at the far left. Properties for the button instance appear in the Property inspector. With the exception of the Export Settings pop-up menu, these properties apply to the selected instance only. Making changes here does not affect the original button symbol in the Library. 2 In the Property inspector, replace the text in the Text box with the word SHOWROOM in capital letters. Then press Enter (Windows) or Return (Macintosh). The text on the button changes to reflect your entry. 3 Repeat steps 1 and 2 for the remaining buttons. Enter NEWS & EVENTS for the text of the second button. Enter OWNERS for the text of the third button. Leave FINANCIAL SERVICES as the text for the fourth button. Enter PREVIEWS for the text of the fifth button. 4 Click the Preview tab, turn off slices by clicking the Hide Slices and Hotspots button, and roll the pointer over the buttons in the nav bar. The buttons change from blue to gray as you move the pointer over them. In this section, you used the Property inspector to change the text of individual button instances without affecting the original button symbol in the Library. If you wanted to change the color of all the buttons to red, however, you would double-click the original button symbol in the Library, select the rectangle, change the Fill color to red, and click Done. Updating a button symbol in the Library updates all instances of that symbol in the document. Change button instance text 147

10 Assign URLs and names to the buttons Next, you ll assign a unique URL, or link, to each button instance. A URL, or Uniform Resource Locator, is the address or location of a page on the web. You can easily assign URLs and names to buttons by using the Property inspector. 1 Select the button instance labeled SHOWROOM and enter your favorite URL in the Link text box of the Property inspector. For the purposes of this tutorial, any working URL will do. If you were creating a real website, you would enter the URL that you wanted the Showroom button to jump to. Be sure to enter the URL of an actual website, so that you can test your button links later. 2 In the Button text box, type showroom. Naming each of your button instances makes them easier to identify after they are exported. 3 Assign a working URL and unique name to each remaining button instance. When you name button instances, don t use spaces or high ASCII characters (ASCII characters from 129 to 256, including accents and math symbols, which are not the same on all computers). For example, you might name the News & Events button instance news_events. 4 Select File > Preview in Browser > Preview in [your preferred browser]. To test button links, you must preview the document in a browser. Note: If your browser is not listed, you must first select a browser by selecting File > Preview in Browser > Set Primary Browser. Your navigation bar is now complete. In the next sections, you ll optimize your work and export the nav bar to your Macromedia Dreamweaver MX 2004 site. 148 Tutorial 4: Building a Navigation Bar with Fireworks

11 Optimize the navigation bar Before you export any document from Fireworks, you should always optimize it. Optimizing a document ensures that a graphic is exported with the best possible balance of compression and quality. 1 With the navbar.png file open in the Document window, do one of the following to open the Optimize panel if it isn t already open: Select Window > Optimize. If the panel is minimized on the right side of the screen, click the word Optimize to view the entire panel. 2 Click in the Document window outside the canvas to make sure that no buttons are selected. 3 Select GIF Websnap 128 from the Settings pop-up menu if it isn t already selected. The options in the panel change to reflect the new setting. 4 Click the Hide Slices and Hotspots button in the Tools panel, and click the Preview button in the upper left corner of the Document window. Preview view displays your document as it will appear when it is exported with the current settings. In the lower left corner of the Preview window, Fireworks displays the file size of the exported file and the estimated time it will take to display the graphic when it is viewed on the web. For more information, see Optimizing and Exporting in Fireworks Help. Optimize the navigation bar 149

12 Set HTML preferences HTML, or Hypertext Markup Language, is the primary language used to create and display web pages on the Internet. You don t need to understand HTML to use Fireworks, but it helps to keep in mind that when Fireworks slices are exported, they become cells in an HTML table. Before you export the document for the first time, you need to set HTML export preferences. 1 Select File > HTML Setup. The HTML Setup dialog box appears. The options that you set in this dialog box will affect all future Fireworks documents that you create, except the options on the Document Specific tab. 2 On the General tab, select Dreamweaver HTML from the HTML Style pop-up menu. 3 Select.htm as the file extension. 4 Click the Table tab. The Table tab allows you to change HTML table properties. 5 In the Space With pop-up menu, select Single Table, No Spacers. 6 From the Contents pop-up menu, select None. 7 Click the Document Specific tab. The Document Specific tab allows you to choose a variety of document-specific preferences, including a customized naming convention for your exported files. Remember that the options you set here apply only to the current Fireworks document. Note: You can apply the settings on the Document Specific tab to all new documents by clicking the Set Defaults button. 8 Select Rollover (over, down, overdown) from the first Frame Names pop-up menu. 9 Click OK to accept the settings on the Document Specific tab and close the HTML Setup dialog box. For more information about setting HTML preferences, see Exporting HTML in Fireworks Help. 150 Tutorial 4: Building a Navigation Bar with Fireworks

13 Export the document to HTML format Your document is now ready for exporting. 1 Create a folder called navbar inside the images folder of your Trio Motors Dreamweaver site. 2 With the navbar.png file open in the Fireworks Document window, select File > Export. The Export dialog box appears. 3 Navigate to the navbar folder that you created in step 1. It should be inside the images folder of the Trio Motors site. 4 Ensure that the File name text box reads navbar.htm, and that the Save As Type (Windows) or Save As (Macintosh) pop-up menu reads HTML and Images. 5 Ensure that Export HTML File is selected in the HTML pop-up menu and that Export Slices is selected in the Slices pop-up menu. 6 Select Include Areas without Slices, and make sure that Put Images in Subfolder is not selected. 7 Click Save. The nav bar files are exported to the navbar folder of your Dreamweaver site. Remember that the PNG file is your source file, or working file. Although you ve exported your document in HTML and GIF format, you must also save the PNG so that any changes you ve made are reflected in the source file as well. 8 Select File > Save to save the changes to the PNG file. Export the document to HTML format 151

14 View the exported files in the Dreamweaver Files panel Now you ll examine the list of files that Fireworks exported. The new files created during the export process appear in the navbar folder within your Dreamweaver site. 1 In Dreamweaver, select the Trio Motors site in the Files panel. 2 Expand the navbar folder by clicking the plus sign (+) to the left of the folder. A long list of nav bar files, as well as a navbar.htm file, appear. The navbar.htm file contains all the HTML code that you will need to insert into your Dreamweaver page, including the JavaScript code for the various states of the nav bar buttons. Fireworks also exported graphics files for your buttons. There are several GIF files, including one for each button state. 152 Tutorial 4: Building a Navigation Bar with Fireworks

15 View the Fireworks HTML file in a browser Now that you ve examined the exported files, you re ready to test the nav bar in a browser. 1 Open a web browser and select File > Open (Internet Explorer) or File > Open File (Netscape). Then navigate to the navbar.htm file that you exported to the navbar folder of your Dreamweaver site. Alternatively, you can navigate to the navbar folder of your Dreamweaver site from your desktop and drag the navbar.htm file to an open web browser. Your nav bar appears in the browser window. 2 In the browser, click the buttons on the nav bar to test the links. If you added live links to the buttons (such as your web browser displays the corresponding live pages when you click the buttons. View the Fireworks HTML file in a browser 153

16 3 Find and execute the command that lets you view the source code for the page. Most web browsers let you view the source code with a command such as View > Source. 4 Scroll through the source code. If you know HTML and JavaScript, scan the code that Fireworks created to see how it works. If you don t know HTML and JavaScript, you can appreciate the work that Fireworks has done for you. Completed versions of the files you created in this tutorial are available in the trio_motors_complete directory on your Studio MX 2004 CD. To locate the directory, insert your Studio MX 2004 CD, click Browse CD contents, and select the Samples folder. If you copied the Samples folder to your hard drive for the previous tutorial, the complete files are already on your computer. For more information about any of the procedures described in this tutorial, see Fireworks Help. 154 Tutorial 4: Building a Navigation Bar with Fireworks

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Fireworks 3 Animation and Rollovers

Fireworks 3 Animation and Rollovers Fireworks 3 Animation and Rollovers What is Fireworks Fireworks is Web graphics program designed by Macromedia. It enables users to create any sort of graphics as well as to import GIF, JPEG, PNG photos

More information

Graphic Design Basics Tutorial

Graphic Design Basics Tutorial Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Fireworks CS4 Tutorial Part 1: Intro

Fireworks CS4 Tutorial Part 1: Intro Fireworks CS4 Tutorial Part 1: Intro This Adobe Fireworks CS4 Tutorial will help you familiarize yourself with this image editing software and help you create a layout for a website. Fireworks CS4 is the

More information

Chapter 3: Quick Start Tutorial

Chapter 3: Quick Start Tutorial 1 Quick Start Tutorial Chapter 3: Quick Start Tutorial This chapter helps you become acquainted with the workspace, the commands, and the features that you use to create your own website. The step-by-step

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

Creating Webpages in Dreamweaver MX for PC

Creating Webpages in Dreamweaver MX for PC Creating Webpages in Dreamweaver MX for PC Getting Started Before you can create a webpage you need to think about where the page will be stored both locally (i.e., hard drive, CD, disk) and remotely (i.e.,

More information

Dreamweaver - Adding content

Dreamweaver - Adding content Dreamweaver - Adding content Creating your first website Part 3: Adding content to pages This part will show you how to add content to web pages in Adobe Dreamweaver CS3. You can add many different kinds

More information

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.)

Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) Building a Personal Website (Adapted from the Building a Town Website Student Guide 2003 Macromedia, Inc.) In this project, you will learn the web publishing skills you need to: Plan a website Define a

More information

One of the most important features of Web graphics is the ability to link to other pages using Image Maps.

One of the most important features of Web graphics is the ability to link to other pages using Image Maps. LESSON 6: IMAGE MAPS AND SLICING OBJECTIVES By the end of this lesson you will be able to: create and edit links copy graphics to URL objects make URL link choices understand Slicing export different aspects

More information

Web Design with Dreamweaver

Web Design with Dreamweaver Web Design with Dreamweaver August 2003 Macromedia Dreamweaver MX and Fireworks MX This document describes how you can use Dreamweaver and Fireworks to develop Web sites quickly and easily. You can create,

More information

Creating a Web Presentation

Creating a Web Presentation 9.1 LESSON 9 Creating a Web Presentation After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent

More information

ADOBE DREAMWEAVER CS3 TUTORIAL

ADOBE DREAMWEAVER CS3 TUTORIAL ADOBE DREAMWEAVER CS3 TUTORIAL 1 TABLE OF CONTENTS I. GETTING S TARTED... 2 II. CREATING A WEBPAGE... 2 III. DESIGN AND LAYOUT... 3 IV. INSERTING AND USING TABLES... 4 A. WHY USE TABLES... 4 B. HOW TO

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

ToolBook 9.5. Getting Started with ToolBook

ToolBook 9.5. Getting Started with ToolBook Getting Started with ToolBook ToolBook 9.5 Copyright 2007-2008 SumTotal Systems, Inc. and its licensors. All Rights Reserved. SumTotal, SumTotal Systems, the SumTotal logo, ToolBook, ToolBook Instructor

More information

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003

Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Even More Dreamweaver Nadalia Yuehong Liu IT Lab School of Information University of Texas at Austin Spring 2003 Objectives Create your Web page in layout view Insert Flash Text and Flash Button objects

More information

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide

CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8. University Computing and Information Services. Training Guide CREATING WEB PAGES WITH MACROMEDIA DREAMWEAVER 8 University Computing and Information Services Training Guide For additional help, contact the UCIS Help Desk at (910) 5216260 or helpdesk@uncp.edu, or visit

More information

Dreamweaver - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive

More information

In this lesson, you ll learn to:

In this lesson, you ll learn to: LESSON 3: INTERACTIVITY BASICS OBJECTIVES In this lesson, you ll learn to: make your Flash movie interactive apply actions to specific frames create interactive buttons create and edit symbols in the Library

More information

Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks

Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks Dreamweaver Tutorials Basic Photo Editing for the Web using Adobe (Macromedia) Fireworks This tutorial will explain the fundamentals of how to edit a photo with Adobe (Macromedia) Fireworks for use on

More information

Inspiration Quick Start Tutorial

Inspiration Quick Start Tutorial Inspiration Quick Start Tutorial This tutorial is a great starting point for learning how to use Inspiration. Please plan on about 45 minutes from start to finish. If you re new to Inspiration and like

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Creating Web Pages With Dreamweaver MX 2004

Creating Web Pages With Dreamweaver MX 2004 Creating Web Pages With Dreamweaver MX 2004 1 Introduction Learning Goal: By the end of the session, participants will have an understanding of: What Dreamweaver is, and How it can be used to create basic

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

More information

macromedia USING IMAGE MAPS AND SLICING When you finish this lesson, you will understand: image maps disjointed rollovers and you will have learned:

macromedia USING IMAGE MAPS AND SLICING When you finish this lesson, you will understand: image maps disjointed rollovers and you will have learned: LESSON 9: USING IMAGE MAPS AND SLICING OBJECTIVES When you finish this lesson, you will understand: image maps disjointed rollovers and you will have learned: how to create image maps and hotspots how

More information

Adobe Dreamweaver CS4: Learning the Tools

Adobe Dreamweaver CS4: Learning the Tools Adobe Dreamweaver CS4: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)

More information

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver Dreamweaver Introduction -- Creating Web Pages with Dreamweaver This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a webpage including creating tables, inserting

More information

Creating Your Personal Website

Creating Your Personal Website Creating Your Personal Website These instructions will show you how to create a personal webpage for CSULB students using Dreamweaver MX 2004. The page will consist of a title, background image, text,

More information

Unit 21 - Creating a Button in Macromedia Flash

Unit 21 - Creating a Button in Macromedia Flash Unit 21 - Creating a Button in Macromedia Flash Items needed to complete the Navigation Bar: Unit 21 - House Style Unit 21 - Graphics Sketch Diagrams Document ------------------------------------------------------------------------------------------------

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

Chapter 1 : A Quick Tour of Adobe ImageReady

Chapter 1 : A Quick Tour of Adobe ImageReady 1 Chapter 1 : A Quick Tour of Adobe ImageReady This tour provides an overview of the key features of Adobe ImageReady and also describes some of the integrated Web preparation features of the Adobe Photoshop

More information

Working With Animation: Intermediate Flash

Working With Animation: Intermediate Flash Working With Animation: Intermediate Flash Creating a Frame-by-Frame Animation To create a frame-by-frame animation, you define each frame as a keyframe and create a different image for each frame. Each

More information

Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash.

Animated GIF images are silent movies; if you want to mix sound and animation, use QuickTime movies or Macromedia Flash. LESSON 7: CREATING ANIMATED GIF IMAGES OBJECTIVES When you finish this lesson, you will understand: frame-by-frame animation onion skinning symbols tweening and you will have learned: how to create GIF

More information

Guide to Content Editing

Guide to Content Editing Guide to Content Editing Page 1 of 119 Contents 1 About This Guide... 8 1.1 Users of This Guide... 8 1.2 Topics Covered in the Guide... 8 1.3 Software Requirements... 9 1.4 Conventions Used in the Guide...

More information

Below is the toolbar for the Rich Text Editor on the SharePoint Portal.

Below is the toolbar for the Rich Text Editor on the SharePoint Portal. Rich Text Editor Below is the toolbar for the Rich Text Editor on the SharePoint Portal. You will find instructions for using each of these functions on the following pages. 1. Cut 2. Copy 3. Paste 4.

More information

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....

More information

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video.

Flash also gives you the ability to export your movie in other formats, such as an animated GIF or a Quicktime video. LESSON 6: PUTTING IT ALL TOGETHER OBJECTIVES In this lesson, you ll learn to: preview your movie with the Test Movie command export your movie to a Web-ready Shockwave Flash file use Macromedia Aftershock

More information

Triggers & Actions 10

Triggers & Actions 10 Triggers & Actions 10 CHAPTER Introduction Triggers and actions are the building blocks that you can use to create interactivity and custom features. Once you understand how these building blocks work,

More information

Macromedia Studio 8 Step-by-Step

Macromedia Studio 8 Step-by-Step Macromedia Studio 8 Step-by-Step MACROMEDIA DREAMWEAVER 8 Project 1: Personal Web Site FIGURE 1 Dangerous Frogs Web Site Project 1 2 Web Site Design Document Good plans produce good Web sites Design document

More information

Adobe InDesign Creative Cloud

Adobe InDesign Creative Cloud Adobe InDesign Creative Cloud Beginning Layout and Design November, 2013 1 General guidelines InDesign creates links to media rather than copies so -Keep all text and graphics in one folder -Save the InDesign

More information

InDesign CS4-5.5 Part II

InDesign CS4-5.5 Part II InDesign CS4-5.5 Part II Library A library is a file and holds a collection of commonly used objects. A library is a file (extension.indl) and it is stored on disk. A library file can be open at any time

More information

BD CellQuest Pro Software Analysis Tutorial

BD CellQuest Pro Software Analysis Tutorial BD CellQuest Pro Analysis Tutorial This tutorial guides you through an analysis example using BD CellQuest Pro software. If you are already familiar with BD CellQuest Pro software on Mac OS 9, refer to

More information

The steps to create an HTML Web site with Virtual Exhibit are:

The steps to create an HTML Web site with Virtual Exhibit are: 23 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web site creator for PastPerfect Museum Software. Virtual Exhibit converts collection records and images stored in PastPerfect to HTML for posting

More information

This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007.

This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007. PowerPoint (Win) v.2007 Making an Accessible Book Introduction This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007. This tutorial assumes The PowerPoint

More information

PageMaker I. Getting Started. 1. Window Parts. Minimize, Maximize/Restore, Close. Title Bar Menu. Ruler (Horizontal) Ruler (Vertical)

PageMaker I. Getting Started. 1. Window Parts. Minimize, Maximize/Restore, Close. Title Bar Menu. Ruler (Horizontal) Ruler (Vertical) Getting Started 1. Window Parts Minimize, Maximize/Restore, Close Title Bar Menu Ruler (Horizontal) Ruler (Vertical) Tool Box Vertical Scroll Bar Paper Edge Guides (a) Size Corner (b) Page Icons (c) Page

More information

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9. Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format

More information

Table of contents. Universal Data Exporter PHP DMXzone.com

Table of contents. Universal Data Exporter PHP DMXzone.com Table of contents About Universal Data Exporter PHP... 2 Features in Detail... 3 Before you begin... 9 Installing the extension... 9 The Basics: Exporting an HTML table... 10 Introduction... 10 How to

More information

Word basics. Before you begin. What you'll learn. Requirements. Estimated time to complete:

Word basics. Before you begin. What you'll learn. Requirements. Estimated time to complete: Word basics Word is a powerful word processing and layout application, but to use it most effectively, you first have to understand the basics. This tutorial introduces some of the tasks and features that

More information

HTML Kit: A User Manual. by Paul Strickberger

HTML Kit: A User Manual. by Paul Strickberger HTML Kit: A User Manual by Paul Strickberger HTML Kit User Manual Contents Introduction... 1 The Main Screen... 1 Displaying or Hiding Elements of the Screen...1 Getting Around the Main Screen... 3 The

More information

Florence School District #1

Florence School District #1 Florence School District #1 Training Module 2 Designing Lessons Designing Interactive SMART Board Lessons- Revised June 2009 1 Designing Interactive SMART Board Lessons Lesson activities need to be designed

More information

Creating Hyperlinks & Buttons InDesign CS6

Creating Hyperlinks & Buttons InDesign CS6 Creating Hyperlinks & Buttons Adobe DPS, InDesign CS6 1 Creating Hyperlinks & Buttons InDesign CS6 Hyperlinks panel overview You can create hyperlinks so that when you export to Adobe PDF or SWF in InDesign,

More information

PowerPoint 2013: Basic Skills

PowerPoint 2013: Basic Skills PowerPoint 2013: Basic Skills Information Technology September 1, 2014 1 P a g e Getting Started There are a variety of ways to start using PowerPoint software. You can click on a shortcut on your desktop

More information

ADOBE MUSE. Building your first website

ADOBE MUSE. Building your first website ADOBE MUSE Building your first website Contents Chapter 1... 1 Chapter 2... 11 Chapter 3... 20 Chapter 4... 30 Chapter 5... 38 Chapter 6... 48 Chapter 1 Installing the software and setting up the sample

More information

CREATE A 3D MOVIE IN DIRECTOR

CREATE A 3D MOVIE IN DIRECTOR CREATE A 3D MOVIE IN DIRECTOR 2 Building Your First 3D Movie in Director Welcome to the 3D tutorial for Adobe Director. Director includes the option to create three-dimensional (3D) images, text, and animations.

More information

TUTORIAL. Introduction to Adobe Fireworks CS4

TUTORIAL. Introduction to Adobe Fireworks CS4 TUTORIAL October 2008 2008 Adobe Systems Incorporated. All rights reserved. If this tutorial is distributed with software that includes an end user agreement, this guide, as well as the software described

More information

Introduction to Macromedia Dreamweaver MX

Introduction to Macromedia Dreamweaver MX Introduction to Macromedia Dreamweaver MX Macromedia Dreamweaver MX is a comprehensive tool for developing and maintaining web pages. This document will take you through the basics of starting Dreamweaver

More information

Using the Rectangle Tool

Using the Rectangle Tool Using the Rectangle Tool By JP Kabala In our exploration of the new shape tools, we started with the Ellipse, now it s time to move on to the Rectangle. You ll probably be pleased and surprised to learn

More information

Dreamweaver Chapter 1 Review Questions

Dreamweaver Chapter 1 Review Questions Dreamweaver Chapter 1 Review Questions Multiple Choice Identify the choice that best completes the statement or answers the question. 1. is the current standard language used to create Web pages. a. HTML

More information

Excel basics. Before you begin. What you'll learn. Requirements. Estimated time to complete:

Excel basics. Before you begin. What you'll learn. Requirements. Estimated time to complete: Excel basics Excel is a powerful spreadsheet and data analysis application, but to use it most effectively, you first have to understand the basics. This tutorial introduces some of the tasks and features

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

SiteBuilder 2.1 Manual

SiteBuilder 2.1 Manual SiteBuilder 2.1 Manual Copyright 2004 Yahoo! Inc. All rights reserved. Yahoo! SiteBuilder About This Guide With Yahoo! SiteBuilder, you can build a great web site without even knowing HTML. If you can

More information

Image Editing in Photoshop CS4

Image Editing in Photoshop CS4 Image Editing in Photoshop CS4 Photoshop CS4 Help For more technical assistance, open Photoshop CS4 and press the F1 key, or go to Help >Photoshop Help. This will open Photoshop CS4 help topics in a web

More information

Drag-and-drop editor. Quick Start Guide

Drag-and-drop editor. Quick Start Guide Drag-and-drop editor Quick Start Guide Contents Introduction 3 Drag-and-drop editor interface 4 Working with elements 6 Adding and moving elements 7 Resizing of elements 8 Editing your template 9 Working

More information

User s Guide. Or at Vimeo Channel: https://www.vimeo.com > Locus Picker

User s Guide. Or at Vimeo Channel: https://www.vimeo.com > Locus Picker User s Guide Tutorial movie files are also available at LOCUS Youtube channel: https://www.youtube.com/user/locusstudio/playlists > R&D Center: LOCUS Picker Or at Vimeo Channel: https://www.vimeo.com >

More information

After this lesson you will be able to:

After this lesson you will be able to: LESSON 4: ANIMATION OBJECTIVES After this lesson you will be able to: use layers with frames create symbols and instances create motion by tweening create transformations by tweening set the timing of

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site

DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Page 1 of 22 DESIGN A WEB SITE USING PUBLISHER Before you begin, plan your Web site Before you create your Web site, ask yourself these questions: What do I want the site to do? Whom do I want to visit

More information

Creating a Photoshop Website to use in Dreamweaver

Creating a Photoshop Website to use in Dreamweaver -First create a Dreamweaver folder on your account -Next create two folders inside your Dreamweaver folder (Design files & Web files) -All of your files for this project must be in this Dreamweaver folder.

More information

Editing the Main Template Using Microsoft Front Page

Editing the Main Template Using Microsoft Front Page Editing the Main Template Using Microsoft Front Page This is the Solutions for Your Life main template. Below you will find information on how to edit each section. The first thing to realize about Front

More information

Camtasia Studio Components for Macromedia Flash MX User's Guide

Camtasia Studio Components for Macromedia Flash MX User's Guide Components for Macromedia Flash MX User's Guide Overview Components provide Flash developers with an easy way to incorporate and control SWF files in Macromedia Flash MX. The three are the first iteration

More information

Ohio University Computer Services Center August, 2002 Crystal Reports Introduction Quick Reference Guide

Ohio University Computer Services Center August, 2002 Crystal Reports Introduction Quick Reference Guide Open Crystal Reports From the Windows Start menu choose Programs and then Crystal Reports. Creating a Blank Report Ohio University Computer Services Center August, 2002 Crystal Reports Introduction Quick

More information

Sage Accountants Business Cloud EasyEditor Quick Start Guide

Sage Accountants Business Cloud EasyEditor Quick Start Guide Sage Accountants Business Cloud EasyEditor Quick Start Guide VERSION 1.0 September 2013 Contents Introduction 3 Overview of the interface 4 Working with elements 6 Adding and moving elements 7 Resizing

More information

Crop and Frame Your Photos

Crop and Frame Your Photos Crop and Frame Your Photos Paint Shop Pro s crop tool gives you total control over your photo compositions. Cropping allows you to turn busy portraits into professional prints. And when you have a nicely

More information

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

Adobe Illustrator CS5 Part 1: Introduction to Illustrator

Adobe Illustrator CS5 Part 1: Introduction to Illustrator CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES Adobe Illustrator CS5 Part 1: Introduction to Illustrator Summer 2011, Version 1.0 Table of Contents Introduction...2 Downloading

More information

Flash and Video Mindy McAdams University of Florida October 2006

Flash and Video Mindy McAdams University of Florida October 2006 Flash and Video Mindy McAdams University of Florida October 2006 These instructions are specific to the Windows operating system, but Mac users can certainly figure out where the slight differences occur.

More information

Flash MX Image Animation

Flash MX Image Animation Flash MX Image Animation Introduction (Preparing the Stage) Movie Property Definitions: Go to the Properties panel at the bottom of the window to choose the frame rate, width, height, and background color

More information

II. Creating Your Website

II. Creating Your Website II. Creating Your Website In this part of Dazzle the Web with Dynamic Dreamweaver, we will learn the following skills: 1. Define a website 2. Create our home page 3. Add content to the home page 4. Format

More information

CHAPTER 1 Dreamweaver Tutorial

CHAPTER 1 Dreamweaver Tutorial 1 CHAPTER 1 Dreamweaver Tutorial... The Dreamweaver tutorial walks you through the steps of building Web pages. You ll learn how to use Macromedia Dreamweaver to define a local site, and you ll use Dreamweaver

More information

Introduction to Links in Revu

Introduction to Links in Revu Introduction to Links in Revu Hyperlinks in Revu can be either text or graphic elements that, when clicked, take the user to another part of the document, to another document or to a website. The Links

More information

Dreamweaver MX Tutorials

Dreamweaver MX Tutorials Dreamweaver MX Tutorials macromedia Trademarks Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver, Authorware, Authorware Attain, Authorware

More information

m ac romed ia Fl a s h Curriculum Guide

m ac romed ia Fl a s h Curriculum Guide m ac romed ia Fl a s h Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra are trademarks

More information

m ac romed ia Fi r e wo r k s Curriculum Guide

m ac romed ia Fi r e wo r k s Curriculum Guide m ac romed ia Fi r e wo r k s Curriculum Guide 1997 1998 Macromedia, Inc. All rights reserved. Macromedia, the Macromedia logo, Dreamweaver, Director, Fireworks, Flash, Fontographer, FreeHand, and Xtra

More information

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION

MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION MICROSOFT POWERPOINT 2011 SHOW YOUR PRESENTATION Lasted Edited: 2012-07-10 1 Use Speaker Notes... 4 Add speaker notes... 4 Change or format a note on a slide... 5 Print slides including speaker notes...

More information

This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007.

This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007. PowerPoint (Win) v.2007 Making an Accessible Book Introduction This tutorial will guide you through the process of creating an accessible book using PowerPoint 2007. This tutorial assumes The PowerPoint

More information

Tutorial Five: Understanding denominators with fraction boxes

Tutorial Five: Understanding denominators with fraction boxes Tutorial Five: Understanding denominators with fraction boxes In this lesson you will create a new project using the Kidspiration Fraction Boxes Math Tool. In the context of representing fractions, finding

More information

Adobe Acrobat 6.0 Professional

Adobe Acrobat 6.0 Professional Adobe Acrobat 6.0 Professional Manual Adobe Acrobat 6.0 Professional Manual Purpose The will teach you to create, edit, save, and print PDF files. You will also learn some of Adobe s collaborative functions,

More information

Lab6: Creating a Web page with Macromedia Dreamweaver

Lab6: Creating a Web page with Macromedia Dreamweaver Lab6: Creating a Web page with Macromedia Dreamweaver I. Introduction When you need to find a specific recipe or when you want to visit somewhere you ve never been to before, what do you do? Most of you

More information

Creating Interactive PDF Forms

Creating Interactive PDF Forms Creating Interactive PDF Forms Using Adobe Acrobat X Pro Information Technology Services Outreach and Distance Learning Technologies Copyright 2012 KSU Department of Information Technology Services This

More information

Micro soft Expression Web 4

Micro soft Expression Web 4 University of Texas at Arlington Micro soft Expression Web 4 Beginner s Guide 2011 1 2 Table of Contents UTA Web Pages... 5 Connecting to your Website... 5 Copying files from your Website... 8 To open

More information

Microsoft Migrating to PowerPoint 2010 from PowerPoint 2003

Microsoft Migrating to PowerPoint 2010 from PowerPoint 2003 In This Guide Microsoft PowerPoint 2010 looks very different, so we created this guide to help you minimize the learning curve. Read on to learn key parts of the new interface, discover free PowerPoint

More information

Chapter 4: Website Basics

Chapter 4: Website Basics 1 Chapter 4: In its most basic form, a website is a group of files stored in folders on a hard drive that is connected directly to the internet. These files include all of the items that you see on your

More information

POWER BASICS. Creating a slide from scratch. Adding text to a slide. Adding another slide. Saving Your Presentation.

POWER BASICS. Creating a slide from scratch. Adding text to a slide. Adding another slide. Saving Your Presentation. Creating a slide from scratch POWER BASICS 1. Open the PowerPoint program. The PowerPoint dialog box appears. 2. In the PowerPoint dialog box, click the Blank Presentation option button. The New Slide

More information

Creating an E-Commerce App in Sketch (Chapter Excerpt)

Creating an E-Commerce App in Sketch (Chapter Excerpt) Creating an E-Commerce App in Sketch (Chapter Excerpt) 1 In this chapter we'll be creating the design for a fictional E-Commerce ios App called Store. 12 screens in total will be lovingly created inside

More information