Dreamweaver Tutorial: (Chapter 4)

This chapter is about learning the basics of Dreamweaver. It covers how to create and save new documents for a website. It also shows you how to set the titles of your web pages so that the title you give them is displayed in the top left of the browser. This tutorial also shows you how to insert images and text onto your page and how to align them. Then it goes further and shows you how to create links with images and text. The chapter ends by showing you how to insert Meta tags so that search engines can find and index your site easier.

Inserting an Image, Alt, and Image Dimension Instructions:

1. Open an html document in Dreamweaver.
2. Go the coding window.
3. Type < img > between the body tags< /body >.
4. Then type src=”imageName.jpg” inside the < img > tag.
5. Proceed to put the name of the image you want to display in the quotes.
6. If the image is not with the html file include the file path of the image.
7. Then put alt=”” in the < img > tag for Accessibility comments for the image.
8. Insert a description of the image in the quotes.
9. To change height of the image insert height=”Number_Of_Pixels” into < img >.
10. To change width of the image insert width=”Number_Of_Pixels” into < img >.

Dreamweaver Tutorial: (Chapter 5)

Chapter five demonstrates how to use point to file to create links on a web page just by pointing to the file and also shows you how to replace images and placeholders using the same tool. Then it shows how to create e-mail links and how to create anchors on a page to jump to a certain spot on the same page using links. The chapter then shows you how to create links that open actual files such as a PDF so you can view it or save it from the webpage.

Creating a Link and an Image Link:

1. Start in between the body tags.
2. Insert an anchor tag < a >.
3. Type href into the < a > tag.
4. Then type =”” after href.
5. In quotes put the name of page href=”page.html”.
6. Then go outside of anchor tag to right.
7. Then type the name of the link to appear on the page.
8. Type < /a > after the name to close the anchor tag.
9. The code should look like this < a href=”page.html” >Page< /a >.
10. You can make an image a link by putting the image tag where Page is located.

Dreamweaver Tutorial: (Chapter 6)

In this chapter the primary focus is on Cascading Style Sheets. The tutorial starts out by showing you some basic CSS code and how to implement it. The code ranges anywhere from text color to document margins. The chapter then shows you how to export and link external CSS files. It then proceeds to show you how to create type selectors to help with page formatting and how to create ID selectors for styling. The final exercises cover class selectors and CSS rollovers, which can be used to make user interactions with elements.

Creating an Imbedded Style Sheet:

1. Start in between head tag.
2. Insert a style tag < style >.
3. Then in the style tag type=”text/css”.
4. Next type < !-- -- >.
5. Then in between this tag type h1 with two curly braces h1{}.
6. Next insert color: into the curly braces to define the color of h1.
7. Then type the name of a color and a semicolon after it.
8. Then insert font-family: after the color.
9. Next insert the name of a font after font-family: and put a semicolon at the end.
10. Finally close the style tag < /style > and place it outside all the other code.

Dreamweaver Tutorial: (Chapter 8)

The focus of chapter eight is on tables. The chapter starts by showing how to create a table and add content such as text and images. Then the chapter covers how to change the border of a table using XHTML and CSS. After that it covers how to add color to your tables and how to align table content. The chapter then explains how to sort your table content both aphabetically and numerically. The final exercises of the chapter show how to set table widths and how to create rounded-corner tables.

Creating a Table:

1. Start in the code window of Dreamweaver.
2. Insert a < table > tag in between the two < body > tags.
3. Then type a < tr > tag to insert a row.
4. Next insert a < td > tag to put a cell into the row.
5. Then after the < td > tag put text or graphics you want in the cell.
6. After that you need to close the td tag with < /td >.
7. Next close the tr tag with < /tr >.
8. Then close the table tag with < /table >.
9. To change the tables border put border=2 into the < table > tag.
10. To change the background color of a table type bgcolor=blue into the < table > tag.

Dreamweaver Tutorial: (Chapter 11)

Rollovers are the primary subject of this chapter. The tutorial starts out by showing you how to create a simple rollover. Next the chapter shows you how to create a disjointed rollover that changes a different image than the one you rollover. The chapter then covers how to create navigation bars with multiple rollover states. The tutorial wraps up with showing how to create flash buttons.

Creating a Simple Rollover:

1. Start in design view panel.
2. Choose the Rollover Image button in the Common group bar.
3. In the Rollover Image window put the path of the original image.
4. Next put in the path of the Rollover image.
5. Then in the alternate text section enter text describing the rollover.
6. In order to make the rollover link to something go to the URL section.
7. Then type the path of the link you want to connect the rollover to.
8. Next insert the name of the image in the Image name section.
9. Then click the OK button to insert the rollover.
10. Finally press F12 to preview the rollover.

Flash Tutorial: (Chapter 4)

Animation basics are the primary focus of this chapter. The tutorial starts by explaining the timeline, document properties, and the use of key frames in animation. It then discusses how to insert and delete frames as well as copying them and reversing them. The chapter wraps up by discussing how to use onion skinning and also how to test your movies.

Inserting and Deleting Frames:

1. Start in timeline panel.
2. Click on an individual frame to select it.
3. Then go to insert in the menu options.
4. Next go to timeline under the insert menu.
5. Then click on frame and a duplicated frame is inserted.
6. This can also be done using F5.
7. To remove a frame start in the timeline panel.
8. Select the frames or frame you want to remove.
9. Then right click and choose remove frames.
10. Using the shortcut Shift+F5 can also do this.

Flash Tutorial: (Chapter 8)

Motion tweening and timeline effects are the primary focus of this chapter. The tutorial starts by explaining the difference between shape tweening and motion tweening. It then discusses the basics of motion tweening and how to use certain motion tweening effects. The chapter then discusses how to edit multiple frames, use a motion guide, and how to use custom ease controls. The tutorial wraps up by discussing how animate text, how to use the timeline effect assistants, and how to animate with the blur and drop shadow filter.

Inserting a Motion Tween:

1. Start in timeline panel.
2. Click on an individual frame between 2 key frames.
3. Then go to properties tab at the bottom of the screen.
4. Look for the box labeled tweens.
5. Then click on the box and select motion.
6. A blue box should then appear in the timeline.
7. The blue box should contain an arrow.
8. That arrow points in the direction of the ending key frame.
9. You can also insert a motion tween by right clicking.
10. Then you click insert motion tween.

Flash Tutorial: (Chapter 10)

Buttons are the primary focus of this chapter. The tutorial starts by explaining how to create rollover buttons in Flash. It then covers how to add text to the rollover buttons. The chapter then discusses how to duplicate and align buttons in Flash. Next it shows you how to add sound to buttons. The tutorial wraps up by discussing how to create invisible buttons.

Creating Rollover Buttons:

1. First go to the Insert menu.
2. Then under Insert go to New Symbol.
3. Then under the Create New Symbol window name the symbol.
4. Next set the behavior to Button and click OK.
5. Then go into the buttons timeline.
6. First draw what will happen in the frame when the button is up.
7. Then draw what will happen when the mouse is over the button.
8. Next draw what the button when look like when it is clicked down.
9. Finally draw the hit area of the button in the Hit frame.
10. Leave the button timeline; choose Control, Test Movie to test your button.

Flash Tutorial: (Chapter 11)

Movie Clips are the primary focus of this chapter. The tutorial starts by explaining how to create a movie clip in Flash. The chapter then discusses the difference between animated graphic symbols and movie clip symbols. The tutorial wraps up by discussing how to create animated rollover buttons and then shows you how to put them into action.

Creating a Movie Clip:

1. First open a graphic in Flash.
2. Next go into the timeline window.
3. Then in the window add a new layer.
4. Next pull up the library window.
5. To do this press Ctrl+L.
6. After that select the graphic.
7. Then drag the graphic into the library.
8. The Create New Symbol window should appear.
9. Next enter a name for the movie clip.
10. Then set the behavior to Movie clip and click OK.

Flash Tutorial: (Chapter 12)

Action Script and Behaviors are the primary focus of this chapter. The tutorial starts by explaining how to control the timeline and movie clips. The chapter then discusses how to use goto Action and web page behavior. The tutorial then discusses targeting scenes and how to create a pop up menu. The tutorial wraps up by discussing how to load movies.

Loading Movies:

1. Open a new fla file.
2. Next click the Control menu.
3. Then in the menu click Test Movie.
4. Next go into timeline window.
5. Then select frame one.
6. After that go into the Actions panel.
7. Then click Script Assist.
8. After that click into Global Functions folder.
9. Next select loadMovie under Browser/Network folder.
10. Then save the fla and click Test Movie.