Web Authoring Lesson 28 Flash, CSS. O Power. Checklist If you have not set up your football site in Dreamweaver, do it before this lesson. If you have.

Slides:

Advertisements

Similar presentations

Working with Tables for Page Design – Lesson 41 Working with Tables for Page Design Lesson 4.

Advertisements

Chapter 3 Creating a Business Letter with a Letterhead and Table

The GIMP Simple features tutorial By Mary A White.

Adobe Photoshop Elements photo editing software licensed for use on DEC computers can be purchased for home use by DEC staff Company name Name of.

FrontPage Express By John G. Summerville Ph.D.©, RN.

Word Processing First Steps

Click your mouse for next slide Dreamweaver – Colors and Page Properties So far things are going just dandy aren’t they? You’ve been following FST’s fun.

Click your mouse for next slide Dreamweaver – Merging, Coloring, Fonts Now it’s time to fill your page with some more interesting stuff The first thing.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

Working with Vector Graphics – Lesson 21 Working with Vector Graphics Lesson 2.

Exercise 1 Checklist Dreamweaver - Local Root Folder –Make sure it is properly specified in Dreamweaver  Verify Otherwise can cause problems with local.

ABC’s of PowerPoint (Office 2007) Part 1: Basic Vocabulary Part 2: Cursors Part 3: Insert Your Text Part 4: Insert Your Pictures Part 5: Basic Tools &

1 Create a Questionnaire Learning Objective  To learn how to use the features in Microsoft Publisher to create a questionnaire.

Mr. Potato Head The objective of this tutorial is to cut an image and assemble Mr. Potato Head using various tools in Adobe Photoshop Elements 2.0.

Editing Process Of Front Cover Lauren Alger I have shown screen shots of how I have put together all four of my pages for my final music magazine product.

File Management and Organisation © Copyright William Rowan 2007.

CIS 205—Web Design & Development Integration Chapter 1.

Mastering Your Word Processing Skills

XP Tutorial 7 New Perspectives on Microsoft Windows XP 1 Microsoft Windows XP Working with Graphics Tutorial 7.

Creating A Simple Web Page. Step 1- Open Dreamweaver & Create A New Page (File New) and blank.

Microsoft Windows LEARNING HOW USE AN OPERATING SYSTEM 1.

Introduction to PowerPoint 2003 Learning And Research Technical Unit (LARTU)

Dreamweaver CS4 Concepts and Techniques Chapter 7 Page Layout with Frames.

Inserting Pictures and Symbols in PowerPoint There are many ways to insert pictures – these are the most common methods Copy and Paste Copy and paste is.

© Ms. Masihi.  The Dreamweaver Welcome Screen first opens when you start Dreamweaver.  This screen gives you quick access to previously opened files,

Inserting Pictures and Symbols in Word documents There are many ways to insert pictures – these are the most common methods Copy and Paste Copy and paste.

Copyright ©: SAMSUNG & Samsung Hope for Youth. All rights reserved Tutorials Software: Presentations Suitable for: Beginner Improver Advanced.

Click your mouse for next slide Flash – Introduction and Startup Many times on websites you will see animations of various sorts Many of these are created.

Microsoft PowerPoint Getting Started Guide Prepared for Towson University Dr. Jeff M. Kenton Amy Chase Martin 2007.

XP New Perspectives on Microsoft Office FrontPage 2003 Tutorial 4 1 Microsoft Office FrontPage 2003 Tutorial 4 – Using Shared Borders and Themes.

Color Correct and Remove Keystoning A minimalist approach to photographing your art By Paul Marley.

Project 2 Adding Web Pages, Links, and Images Dreamweaver MX 2004 Concepts and Techniques.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit E Using and Managing Images.

Macromedia Dreamweaver 8-- Illustrated Introductory 1 Macromedia Dreamweaver 8 Unit D Formatting Text and Using Cascading Style Sheets.

University of Sunderland CDM105 Session 6 Dreamweaver and Multimedia Fireworks MX 2004 Creating Menus and Button images.

> 1 Diagrams in Word Faculty of Health Alan Grace.

Dreamweaver CS4 Concepts and Techniques Chapter 9 Using Spry to Create Interactive Web Pages.

Dreamweaver CS4 Concepts and Techniques Chapter 2 Adding Web Pages, Links, and Images.

Macromedia Dreamweaver 8 Revealed LINKS WORKING WITH.

Chapter 1 Creating a Dreamweaver Web Page and Local Site

Sports Website Creation. In this project you will design and produce your own website.

Creating HUD Rings. Step 1 Open a new document in Illustrator. You can set it to the size you prefer to work in. In my case I have it set at 500px by.

PowerPoint Basics Tutorial 4: Interactivity & Media PowerPoint can communicate with the outside world by linking to different applications, managing different.

Layers, Image Maps, and Navigation Bars

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.

Web Design-Lecture3-QN-2003 Web Design Enhancing a Website.

Photoshop Image Slicing. Reasons to Image Slide To create links out of sliced images To optimise different areas. (flat areas of colour, such as logos,

1 2 Left Click 3 Left Click 4 Left Click NOTE: Your screen may look different; however, find the Start button (lower left corner); then All Programs; ending.

Learning PowerPoint Presenting your ideas as a slide show… …on the computer!

Know your computer Make a Folder Copy from Word to Composer Format the Font Change the Alignment Format the Background Format the Colors Insert a Picture.

1 After completing this lesson, you will be able to: Open a file. Navigate through a document. Scroll through a document. Insert text in a document. Select.

InDesign CS4 Basics By: Kaitlyn Dickinson. Making Boxes Click the Rectangle Frame Tool Click on the page and drag until the box is its preferred size.

Web Site Development - Process of planning and creating a website.

Paint Tutorial Created February 2006 Start Paint: Start>Programs>Accessories>Paint.

1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

Create a space Using the box Draw tool for your image.

VBQU149 Create texts of some complexity. Columns Making columns in Microsoft Word Open word and blank page type =rand() Go to page layout, then columns.

Web and Multimedia Development Copyright © Genetic Computer School 2007WM LESSON OVERVIEW  Use of Tables  Creating Tables  Try It – 1  Creating.

© Anselm Spoerri Lecture 7 Meaning –Guiding Principles for Term Project Mechanics –Interactivity Recap –Simple and Disjointed Rollovers and Image Map –Navigation.

Opening a File 1.Open Word 2.Click the Microsoft Office button(Very top left hand corner). A menu appears 3.Click Open. The Open dialog box appears 4.Use.

Our Presentation is about Microsoft word

Presenting Prezi Michael Pelitera

European Computer Driving Licence

Fusion 360 Concrete Tea light Holder Tutorial

DIRECTIONS: 1. Click Enable Editing in the yellow bar above.

Inserting Pictures and Symbols in Word documents

HOW TO MAKE PAGES FOR A WEB SITE

Making a website.

Use of Photo Shop.

Presentation transcript:

Web Authoring Lesson 28 Flash, CSS. O Power

Checklist If you have not set up your football site in Dreamweaver, do it before this lesson. If you have not drawn a sketch of the final design (with or without your changes) do it before this lesson. If you have not done lessons 23, 24, 25, 26, 27 do not attempt to do this lesson. In this lesson: 1. Preparation of navbar library item and images. 2. Preparation of images for rolling banner.

Navbar Rolling Banner

Making Rollover Images for navbar This Process has been outlined in previous lessons… (18 & 21 A) I will outline it here again but if you want to try it without my instructions you can.

1. Open Fireworks…new file….canvas colour black…height 30px…width 100 px… 2. Select text button 3. Type ‘Football’ onto the canvas.

4. Select black arrow..highlight word (you will see a blue box around the text…. 5. With the text still highlighted, using the black arrow (NOT the text tool!!!) select desired font face, colour and size….(I chose Eras Demi font size 21, colour white)

6. With the black arrow selected you can move the text around to a central postion…use the grid to help you. Grid?

View…Grid….Show Grid…. The Grid can be edited….smaller numbers will give you more exact measurements!

7. Use the crop tool to get the sizes exact…. 8. Left click on the top left corner and drag you should see a black box expanding as you do this. 9. Watch your dimensions in the bottom left…maintain the same height on all the buttons otherwise the navbar will look uneven

9.When you are happy with the image click return…save it as foot1 in your images folder…. 10. Change Canvas colour

I selected #99ff00…. Cilck on the black arrow …select the text (it should be white text on green background)…you will see a blue box surrounding the text….select text colour…

I selected #cc0033….save as foot 2….

You will need to repeat that process for each of the 5 remaining navbar buttons…. It’s important to start the text in the same place on each button…use the grid! It’s important to use the crop button accurately!

Open a new library page in dreamweaver…gice it the title ‘navbar’ and save it as ‘navbar’ in the ‘library’ folder.

Insert a Navigation Bar….

Insert Horizontally… use tables Click Browse next to Up image to find ‘foot1’ Click Browse next to Over image to find ‘foot2’

Add element by clicking +… Each time Click Browse next to Up image to find ‘image1’ and Click Browse next to Over image to find ‘image2’

Save and close the library item.

We’re going to prepare 3 ‘ball’ images for the rolling banner… Go online and find them….we’re going to resize them and make their backgrounds transparent….

Open your first ball image in fireworks…resize it to 100x100 It can be made smaller in Flash later if necessary – don’t make it smaller now because it’s better to start big and scale down. For now 100x100 is big enough

Resize 1….

Resize 2….

Press ctrl + to increase the display size of the image (don’t worry, you’re not changing the actual size of the image: that’s just so you can see it better) We want to make the area around the ball transparent…one method is to use the eraser button (see lesson 21 A)… We’re going to cut the circle out and paste into a new documet with a transparent background The crop button only works as a square so….select the ellipse tool.

Note: this next part is a tricky operation so resist the temptation to smash the computer against the wall (unless you’ve got loads of cash)

READ this 3 times before you begin: With the Draw Ellipse tool selected, Left Click and drag (holding down the shift button – gives you a perfect circle) from the bottom right to the top left. Release the MOUSE BUTTON FIRST then release the shift key. You need to get the circle more or less exactly over the ball….. Keep trying…deep breaths and ‘ctrl z’ will help.

When you’ve got a circle you’re happy with click modify…convert path to marquee (editable area)…copy and paste it into a new fireworks document with a transparent background.

Save the image in your ‘images’ folder and repeat for two other balls…. 100x100px

The rest of the banner (the individually scrolling letters of the words ‘More Balls’) will be made in Flash. Coming soon! Next lesson…2 nd navbar