Creating a navigation bar in Fireworks. Setting up the canvas Open Fireworks and choose a canvas size big enough to fit the buttons on you are going to.

Slides:



Advertisements
Similar presentations
Drupal Basics Part 3 Create a new page Main tabs menu Using the theme Agricultural Communications Services Integrated Media Training Sessions
Advertisements

Burning a Video or File to a CD 1.Double click on the Nero- Burning Rom icon on your desktop or go to “Start” > “Programs” > “ahead Nero” > “Nero Burning.
Compose Workflow. Home page To compose a workflow navigate to the “Workflow Editor” page.
Registering Students for All-State Auditions Using MPA Online.
Pasewark & Pasewark Microsoft Office XP: Introductory Course INTRODUCTORY MICROSOFT POWERPOINT Lesson 1 – PowerPoint Basics.
Creating Animations – Lesson 71 Creating Animations Lesson 7.
FIRST COURSE PowerPoint. XP New Perspectives on Microsoft Office 2007: Windows XP Edition2 What Is PowerPoint? PowerPoint is a powerful presentation graphics.
ScannersScanners How to use them to scan pictures and documents.
How to Create a Pop–Up Menu Links to Other information (I.e. gvsu.edu, class pages, our pages??? STEP 1STEP 2STEP 3STEP 4STEP 5STEP 6STEP 7COMPLETE Explanation/Goals.
Google Earth How to create a Google Earth Tour and place it in your Wiki.
2 pt 3 pt 4 pt 5pt 1 pt 2 pt 3 pt 4 pt 5 pt 1 pt 2pt 3 pt 4pt 5 pt 1pt 2pt 3 pt 4 pt 5 pt 1 pt 2 pt 3 pt 4pt 5 pt 1pt.
CIS 205—Web Design & Development Integration Chapter 1.
Creating animated banners in Fireworks. Setting up the canvas Open Fireworks and choose a canvas size big enough to fit the animated banner you are going.
Dreamweaver Learning to be a web design master! By: Mr. Brunton.
Enhancing and Customizing a Presentation
Back to Table of Contents CAPA Website Tutorial Anne Dang, CCPA Webmaster for CAPA.
How to make an interactive PowerPoint in which you will….. Add hyperlinks to move to different parts of the presentationAdd hyperlinks to move to different.
PowerPoint Basics (for Macs) 1. Before you start your project, you need: Completed project storyboard. Files with images, sound, or video already saved.
DREAMWEAVER Adding photos and other tips!. Making photo gallery  Gather ALL the photos you need into your images folder. (remember to copy the URL so.
Making a PowerPoint Slide By Ms. Wesley. Creating Your PowerPoint Slide Learn how to: – Open PowerPoint ………………………….…….………Slides 3, 4Open PowerPoint –
WEBiT Adding a new page. 1. View a page like the one you wish to create a. Navigate to a page with a similar layout to the new page you wish to create.
Macromedia Dreamweaver 4.0 INTERFACE This presentation will run automatically.
Chapter 10 Fireworks: Part II The Web Warrior Guide to Web Design Technologies.
C-Map Tutorial How to create and save a concept map using C-Map, export a C-Map as an image, and export a C-Map as a webpage.
Alice 2.0 Introductory Concepts and Techniques Project 1 Exploring Alice and Object-Oriented Programming.
Slide 1 of 24 1) Launch Fireworks 2) Under File, choose New 3) In the New Document dialog box, enter Width: 100, Height 160, Resolution 72, and choose.
How to use Microsoft Word. Where can I find Microsoft Word? How to select, copy and paste information Go to the document from which you wish to copy the.
> 1 Diagrams in Word Faculty of Health Alan Grace.
1. Profile settings 2. Messaging system 3. Downloading files 4. Uploading files 5. Creating groups 6. Calendar events.
Creating Buttons – Lesson 51 Creating Buttons Lesson 5.
Website Editing From Gingerweb The Image Gallery.
USING WORDPRESS TO CREATE A WEBSITE (RATHER THAN A BLOG) STEP-BY-STEP INSTRUCTIONS.
MS Word Lesson Nine Formatting Objects Mrs. Brown.
How to Design a Page, Part 2 HOWE/ANDERSON. Step 1: Login   Job No  User ID/ Password.
Submitting and Assignment Click on the assignment link in your course The folder with the paper sticking out of the top is the symbol for an assignment.
Epson Interactive Projector Part 2 Whiteboard mode With whiteboard.
Begin a new story or edit a Photo Story project that has already been created. Make your selection and click next. 1.
Photo Story Creating your own!. What is Photo Story? Photo Story is a way to create slideshows with added narration, effects, transitions and background.
Pasewark & Pasewark Microsoft Office Applications: Introductory Course 1 INTRODUCTORY MICROSOFT POWERPOINT Part 1 – PowerPoint Basics.
Creating interactive web pages using Fireworks Creating a 5 page mock up.
Fireworks Web Page mockups. Set up canvas/page size Fireworks is very well-suited to designing graphics and web pages for the screen. To create a web.
Designing a Web Page Layout Using a Professional Bitmap & Vector Graphic Editing Suite 1IT: Web Technologies – Design a Web Page Layout 2 Copyright © Texas.
Grade 4 Science.  -Click Start  -Click Programs  -Click IHMC Cmap Tools  -Click Cmap Tools.
Pasewark & Pasewark Microsoft Office 2003: Introductory 1 INTRODUCTORY MICROSOFT POWERPOINT Lesson 1 – PowerPoint Basics.
1 Creating Links Lesson 2. 2 In the center column type : Home | Order Now | Contact Us This is the navigation button which will link to the other pages.
How to use the Hand-In Folder. Click on the Folder icon at the bottom of the screen.
It is a digital recording of your computer screen. Screencasts are important in online teaching because it is a way of replacing traditional classroom.
If you don’t have Google Earth downloaded already, you can go to to get it.
Adding a Picture in ArcGIS. Getting Started Open ArcMap in ArcGIS Add shape files Find pictures on the web save in folder with shape files you added to.
Copying a text file to the E-Form (HTML) Editor in OSCAR.
Copyright © Texas Education Agency, All rights reserved.1 Web Technologies Creating a Navigation Bar.
WEEBLY 101 MAKING AN AWESOME WEBPAGE. WEEBLY 101 PLANNING A WEB PAGE WHAT WOULD YOU LIKE YOUR PAGE TO LOOK LIKE? EXAMPLES:
INTRO to PIXLR.com.
Contract Compliance: Reporting
Save your modified slide as a JPEG picture: Click “File”
KELLER WILLIAMS REALTY
How to Create a PBWorks Site
Creating & Working with Clipping Masks
A simple template to assist with thinking skills
Print out your name blocks! (15 points)
DIRECTIONS: 1. Click Enable Editing in the yellow bar above.
A simple template to assist with thinking skills
How to PostPower Point Presentations
A simple template to assist with thinking skills
Making a website.
Creating an Expense Report Goods and Services
A simple template to assist with thinking skills
A drag and drop exercise can be created using Word quite easily using tables, text boxes and ensuring the document is saved properly.
Creating buttons in Fireworks
A simple template to assist with thinking skills
Presentation transcript:

Creating a navigation bar in Fireworks

Setting up the canvas Open Fireworks and choose a canvas size big enough to fit the buttons on you are going to create Remember that you will be going quite far across or down the page

Button Editor DO NOT draw any of your navigation bar on the canvas A navigation bar is made up of buttons Use the Button Editor to create only one button in the exact same way Add states to the button and click Done

Cloning One button will be created on your canvas This needs cloning – Right click the button, select Edit, Clone – The cloned button will be on top of the original. Click it and drag to one side – Repeat this cloning until you have the required amount of buttons for your navigation bar

Editing the Clone The text on each button from the navigation bar can now be changed Click on a button you wish to change and alter the Text in Properties at the bottom of the screen

Adding pop up menus Pop up or drop down menus can be added to each of the buttons in the navigation bar by clicking on the white Swatch in the middle of each button

Positioning pop up menus After going through the pop up menus and creating how you want them to look, they can be repositioned around the navigation bar buttons by simply dragging the pop up outlines

Saving your navigation bar You need to save your navigation bar as you did your button both as a Fireworks file and as an HTML file Select File, Save as for the Fireworks file Select File, Export for saving as a HTML and Image Save both versions in the same folder