Tutorials

Home

Dreamweaver Tutorial 4

The subject of this tutorial is to learn how to add text to a webpage. This tutorial also covers how to create a link. The tutorial will cover how to add text in design view and in code view. The tutorial will also cover how to add a link in both design and code view. Before starting the tutorial, the user should already have a webpage saved to work on.

To add text:

1. Open dreamweaver
2. Click open and choose the website you will be adding text to
3. In the design view, type the text you want to add or
4. in the code view, type the text between the body tags
5. To make a new paragraph, hit return
6. to make a line break, hit shift and return
7. Font size, color and other properties can be changed in the properties box

To create a text link:

1. Open dreamweaver
2. Click open and choose the website you will be working on
3. In design view, highlight the text that you will act as the link
4. In the properties box, look for the box next to the work “Link”
5. Click the “browse for file” button next to it and choose a saved website or
6. Type in a web address
7. In code view, a link may be added by typing <a href = "file"> link</a> where 'file' is the name of the page you are linking to and 'link' is the word that will act as a link

Dreamweaver 8

Dreamweaver Tutorial 5

This tutorial goes over in greater depth how to link files. It covers how to use the "point to file tool", and demonstrates how to create an email link. It will also cover anchors, a device that allows you to jump to specific points on the page. Lastly, it will cover how to link to files rather than pages.

1. To create a link using point to file, open your webpage in Dreamweaver.
2. Highlight the text you wish to be the link
3. In the properties box, look for the round icon next to the Link box.
4. drag the target to the page you are linking to in the files panel

1. To link to a source file, click the image placeholder that you will be using
2. In the property inspector box, click the round target icon next to the Src box.
3. Drag the target to the files panel and use it to find the image or file you will be using.

1. To create an email link, highlight the text in your webpage that you will use as the link
2. Up in the Common toolbar, click the Email Link icon, shaped like an envelope
3. In the resulting dialogue box, type the email address in the e-mail box.

1. To create an anchor, highlight the text in your webpage that you will use as the anchor
2. In the Common toolbar, click the Named Anchor icon, shaped like an anchor.
3. Type the name of the anchor in the dialogue box
4. Highlight the text in your webpake that you will use as the link, and use the point to file tool to select the anchor

Dreamweaver 8

Dreamweaver Tutorial 6

The subject of this tutorial is to learn how to create a type selector. It uses CSS to give you better control in formatting your webpage. The tutorial uses the CSS Styles panel to changes the formatting of a webpage.

To create a type selector:

1. Open dreamweaver
2. Click open and choose the website you will be working with
3. Create a new CSS rule by clicking the button in the CSS panel
4. In the dialog box that opens, select 'Tag' under Selector Type
5. Type in the type of tag you will be selecting in the tag box
6. Choose whether you want the rule to apply to the just the document you are working on
7. In the rule deifinition box, type the formatting changes you want to make for the tag
8. For example, if you are formatting headers, you might change the font type or size
9. Click ok to save the changes to the tag
10. You can review the rules you have created in the CSS panel under the CSS styles tab

Screens

Dreamweaver 8

Dreamweaver Tutorial 8

The subject of this tutorial is to learn how to create a tracing image. A tracing image allows you to import an layout that you have created in another program into Dreamweaver. Then, using Dreamweaver, you can apply an image of your layout in the background of the webpage you are working on. This can serve as a guide to help you place the objects on your webpage. In other words, the tracing image is a transparent image that serves as a template for the layout of your webpage.

To create apply a tracing image:

1. Open dreamweaver
2. Click open and choose the website you will be working with
3. Double click your webpage in the files panel
4. Choose Modify, and then choose Page Properties
5. In the menu inside the resulting box, click Tracing Image.
6. Click the Browse button to look for your layout image, and click OK
7. In the Page Properties box, leave the slider at opaque and click OK
8. If you preview your website with the tracing image on, it will not show up. Tracing images only show up in Dreamweaver
9. Use the Files Panel to access the Page Properties box again
10. Change the transparency of the image and click OK
11. When you make the image transparent, you can use it as a guide as it is easier to see the elements you are putting on your webpage as opposed to them being the exact same color as the tracing image

Dreamweaver 8

Dreamweaver Tutorial 11

This tutorial will illustrate how to create a rollover. A rollover is an action that happens when a user's mouse rolls over an image or button, causing the object to change. Rollovers are useful in grabbing the user's attention and showing them where links are or where to click. Rollover use two images. The first image is the picture that will be shown normally. The second image is the picture that will appear when the user rolls over the image.

To create apply a rollover:

1. Open dreamweaver
2. Click open and choose the website you will be working with
3. Click on the area you will be inserting the rollover image on.
4. In the common toolbar, locate the images button.
5. Scroll down to Rollover Image and click on it.
6. In the dialog box that pops up, type the name of the image, and use browse to find the original image.
7. In rollover image, use browse to find the image that will appear when the user rolls their mouse over the original picture.
8. Click preload image so that both images will be loaded when the page is opened, type an alternate text, and enter a URL if you want the image to link to a page..
9. To preview the rollover image in design view, place your mouse over the image and press F12.
10. You can add as many rollovers as you want by using the insert rollover button in the common toolbar. Animated images may be used as rollovers as well.

Dreamweaver 8

Flash Tutorial Chapter 4

This tutorial will show you how to copy and reverse frame in the timeline. This can be very helpful when you need to create animation that uses the same frame multiple times. Rather than redrawing the frame over and over, yo can simply copy it. The ability to reverse a sequence of frame also helps create a looping animation.

How to Copy and Reverse Frames

1. Open the file you will be working on in flash. The file should have ten keyframes that will make up your animation.
2. Select all the frames in the layer. You can do this by clicking the layer name or highlighting them with the mouse.
3. Place your pointer over the selected frames and cilck.
4. Pull the mouse to the right and situate the outline over the next ten frames.
5. With the mouse button still clicked, hit the Alt key.
6. Pressing the Alt key tell flash to copy the frames to a specific place rather than cutting them.When you see the plus sign next to the pointer, let go of the mouse.
7. There should now be a copy of frames 1-10 in the slots 11-20.
8. Press enter to preview the movie.
9. Click Frame 11 and then hit Shift and click Frame 20. This will select Frames 11 thorugh 20.
10. Go the Modify menu, Timeline, and choose Reverse Frames.
11. Under the Control menu, hit Loop Playback. Hit enter. The animation will loop endlessly.

Flash Professional 8

Flash Tutorial Chapter 8

This tutorial will show you how to create a motion guide. A motion guide will let you draw a path that an instance will follow.

How to Create a Motion Guide

1. Open the file you will be working on in flash.
2. Use the insert layer button to make a new layer on the timeline. Give the layer a name relevant to the graphic you'll be using.
3. Open the library and drag the graphic you will be using onto the stage. Drag it to the place you want the graphic to start at.
4. On the timeline, right click frame 48 and choose insert keyframe.
5. While the 48th keyframe is still selected, click the graphic and drag it to a different point on the stage. This is the ending position of the graphic.
6. In the properties tab, under Tween, select motion tween.
7. Select the layer holding the graphic, and click the Add Motion Guide button.
8. Lock your original layer and select the Motion Guide layer.
9. Select the pencil tool, and choose smooth from the pencil pop up menu. Make sure object drawing is deselected.
10. On the stage, draw a curved line from the starting position of your graphic to the ending position.
11. Lock the motion guid layer and unlock the original layer. Select the first frame and select the graphic.
12. Click the registration point and drag the graphic to the begining of the motion guide path until the graphic snaps to it.
13. Go to the last frame and drag the registrationi point of the graphic to the end of the path.
14. Press enter to see the animation.

Flash Professional 8

Flash Tutorial Chapter 10

This tutorial will show you how to create a rollover button. Rollovers are useful in drawing the users eye to a button, making it easier to navigate. Rollovers can make use of animation, and contribute to the art design of the webpage. Rollovers can also be used to give the user more information about a link, such as using thumbnail rollovers in a portfolio.

How to Create A Rollover Button

1. Open the file you will be working on in flash
2. Draw a shape onto the stage.
3. Right click the shape and in the pop-up menu click "convert to symbol".
4. In the box that pops up, name the button and select the "Button" option.
5. Double click the button.
6. Open the file menu and click "import to library".
7. Find the image that will appear when you roll over the button.
8. In the timeline, insert a keyframe under the word "over".
9. Then, insert a keyframe under the word "hit".
10. Select the keyframe under "over" and place the image from your library in place of the button.
11. Go to control- "test movie" to see the effect.

Flash Professional 8

Flash Tutorial Chapter 11

This tutorial will show you how to create a movie clip. It implements a motion tween. A motion tween allows an instance to chance from one state to another over a period of time. The tutorial shows how to insert keyframes. The movie clip this tutorial create will have a graphic that slowly fills in.

How to Create a Movie Clip

1. Open the file you will be working on in flash
2. Use the insert layer button to make a new layer on the timeline. Name it outline adn put the outline of you graphic in the layer from the library.
3. Insert another new layer. Double click the layer and type "fillTween". Press enter. This renames the layer.
4. Open the library. Drag the graphic you will be using onto the stage. Make sure that this is in the fillTween layer.
5. Use the arrow keys to position the graphic over the outline.
6. In the fillTween layer, add keyframes to frame 20 and frame 40. You can do this by rightclicking the frame and choosing "insert keyframe".
7. Move to frame 40 and click the image on the stage. In the properties tab, under color, changed the Alpha to 0%.
8. Select the fillTween layer to select all the frames in the layer. Right click the frames and insert a motion tween.
9. In outline and text layer, select frame 40. Press F5 to add frames up to Frame 40.
10. Press enter to test the animation.

Flash Professional 8

Flash Tutorial Chapter 12

This tutorial will not show you anything because sadly, I did not get to it.

How to Forget to Do a Tutorial

Flash Professional 8

Home